svelte-product-mockup 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,162 +1,162 @@
 import "svelte/internal/disclose-version";
 import * as e from "svelte/internal/client";
 import { onMount as Te, tick as xt, onDestroy as kt, untrack as Ge } from "svelte";
-import { fade as Qe } from "svelte/transition";
+import { fade as $e } from "svelte/transition";
 import { beforeNavigate as Mt, pushState as Tt } from "$app/navigation";
-import { browser as St } from "$app/environment";
-function Nt(r, a) {
-  const t = new Uint8ClampedArray(r.data), { brightness: s, contrast: n, saturation: i, hue: l, exposure: f, gamma: h, shadows: w, highlights: d, vibrance: _, temperature: m, tint: T } = a;
+import { browser as zt } from "$app/environment";
+function St(o, n) {
+  const t = new Uint8ClampedArray(o.data), { brightness: a, contrast: r, saturation: s, hue: l, exposure: f, gamma: g, shadows: w, highlights: u, vibrance: h, temperature: m, tint: T } = n;
   for (let v = 0; v < t.length; v += 4) {
-    let y = t[v], x = t[v + 1], I = t[v + 2];
-    t[v + 3] !== 0 && (y = Ze(y, s), x = Ze(x, s), I = Ze(I, s), y = Oe(y, n), x = Oe(x, n), I = Oe(I, n), [y, x, I] = It(y, x, I, i), [y, x, I] = Ct(y, x, I, l), [y, x, I] = Pt(y, x, I, f), [y, x, I] = Rt(y, x, I, h), [y, x, I] = Wt(y, x, I, w, d), [y, x, I] = zt(y, x, I, _), [y, x, I] = Dt(y, x, I, m, T), t[v] = Le(y), t[v + 1] = Le(x), t[v + 2] = Le(I));
+    let y = t[v], x = t[v + 1], N = t[v + 2];
+    t[v + 3] !== 0 && (y = Be(y, a), x = Be(x, a), N = Be(N, a), y = Ee(y, r), x = Ee(x, r), N = Ee(N, r), [y, x, N] = Nt(y, x, N, s), [y, x, N] = It(y, x, N, l), [y, x, N] = Ct(y, x, N, f), [y, x, N] = Pt(y, x, N, g), [y, x, N] = Rt(y, x, N, w, u), [y, x, N] = jt(y, x, N, h), [y, x, N] = Wt(y, x, N, m, T), t[v] = Ze(y), t[v + 1] = Ze(x), t[v + 2] = Ze(N));
   }
-  return new ImageData(t, r.width, r.height);
+  return new ImageData(t, o.width, o.height);
 }
-function Ze(r, a) {
-  return r + a * 255;
+function Be(o, n) {
+  return o + n * 255;
 }
-function Oe(r, a) {
-  return 259 * (a * 255 + 255) / (255 * (259 - a * 255)) * (r - 128) + 128;
+function Ee(o, n) {
+  return 259 * (n * 255 + 255) / (255 * (259 - n * 255)) * (o - 128) + 128;
 }
-function It(r, a, t, s) {
-  const n = 0.299 * r + 0.587 * a + 0.114 * t, i = 1 + s;
+function Nt(o, n, t, a) {
+  const r = 0.299 * o + 0.587 * n + 0.114 * t, s = 1 + a;
   return [
-    n + i * (r - n),
-    n + i * (a - n),
-    n + i * (t - n)
+    r + s * (o - r),
+    r + s * (n - r),
+    r + s * (t - r)
   ];
 }
-function Ct(r, a, t, s) {
-  const n = s * Math.PI / 180, i = Math.cos(n), l = Math.sin(n), f = [
-    i + (1 - i) / 3,
-    1 / 3 * (1 - i) - Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - i) + Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - i) + Math.sqrt(1 / 3) * l,
-    i + 1 / 3 * (1 - i),
-    1 / 3 * (1 - i) - Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - i) - Math.sqrt(1 / 3) * l,
-    1 / 3 * (1 - i) + Math.sqrt(1 / 3) * l,
-    i + 1 / 3 * (1 - i)
+function It(o, n, t, a) {
+  const r = a * Math.PI / 180, s = Math.cos(r), l = Math.sin(r), 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)
   ];
   return [
-    r * f[0] + a * f[1] + t * f[2],
-    r * f[3] + a * f[4] + t * f[5],
-    r * f[6] + a * f[7] + t * f[8]
+    o * f[0] + n * f[1] + t * f[2],
+    o * f[3] + n * f[4] + t * f[5],
+    o * f[6] + n * f[7] + t * f[8]
   ];
 }
-function Pt(r, a, t, s) {
-  const n = Math.pow(2, s);
-  return [r * n, a * n, t * n];
+function Ct(o, n, t, a) {
+  const r = Math.pow(2, a);
+  return [o * r, n * r, t * r];
 }
-function Rt(r, a, t, s) {
-  const n = 1 / s;
+function Pt(o, n, t, a) {
+  const r = 1 / a;
   return [
-    Math.pow(r / 255, n) * 255,
-    Math.pow(a / 255, n) * 255,
-    Math.pow(t / 255, n) * 255
+    Math.pow(o / 255, r) * 255,
+    Math.pow(n / 255, r) * 255,
+    Math.pow(t / 255, r) * 255
   ];
 }
-function Wt(r, a, t, s, n) {
-  const i = 0.299 * r + 0.587 * a + 0.114 * t;
+function Rt(o, n, t, a, r) {
+  const s = 0.299 * o + 0.587 * n + 0.114 * t;
   let l = 1;
-  return i < 128 ? l = 1 + s : l = 1 + n, [r * l, a * l, t * l];
+  return s < 128 ? l = 1 + a : l = 1 + r, [o * l, n * l, t * l];
 }
-function zt(r, a, t, s) {
-  const n = Math.max(r, a, t), i = Math.min(r, a, t), l = n === 0 ? 0 : (n - i) / n, f = 1 + s * (1 - l);
-  return [r * f, a * f, t * f];
+function jt(o, n, t, a) {
+  const r = Math.max(o, n, t), s = Math.min(o, n, t), l = r === 0 ? 0 : (r - s) / r, f = 1 + a * (1 - l);
+  return [o * f, n * f, t * f];
 }
-function Dt(r, a, t, s, n) {
-  let i = r, l = a, f = t;
-  return s > 0 ? (i += s * 0.1, f -= s * 0.1) : (i += s * 0.05, f -= s * 0.05), n > 0 ? (i += n * 0.1, l -= n * 0.05) : (i += n * 0.05, l -= n * 0.1), [i, l, f];
+function Wt(o, n, t, a, r) {
+  let s = o, l = n, f = t;
+  return a > 0 ? (s += a * 0.1, f -= a * 0.1) : (s += a * 0.05, f -= a * 0.05), r > 0 ? (s += r * 0.1, l -= r * 0.05) : (s += r * 0.05, l -= r * 0.1), [s, l, f];
 }
-function Le(r) {
-  return Math.max(0, Math.min(255, r));
+function Ze(o) {
+  return Math.max(0, Math.min(255, o));
 }
-function Xt(r, a, t) {
-  const s = r / a;
+function Dt(o, n, t) {
+  const a = o / n;
   switch (t.mode) {
     case "scale":
-      const n = t.scale ?? 1;
+      const r = t.scale ?? 1;
       return {
-        width: r * n,
-        height: a * n,
+        width: o * r,
+        height: n * r,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: n
       };
     case "px":
-      let i = t.width ?? r, l = t.height ?? a;
+      let s = t.width ?? o, l = t.height ?? n;
       if (t.maintainAspectRatio) {
-        if (i && !l)
-          l = i / s;
-        else if (l && !i)
-          i = l * s;
-        else if (i && l) {
-          const C = Math.min(i / r, l / a);
-          i = r * C, l = a * C;
+        if (s && !l)
+          l = s / a;
+        else if (l && !s)
+          s = l * a;
+        else if (s && l) {
+          const I = Math.min(s / o, l / n);
+          s = o * I, l = n * I;
         }
       }
-      return t.minWidth && (i = Math.max(i, t.minWidth)), t.maxWidth && (i = Math.min(i, t.maxWidth)), t.minHeight && (l = Math.max(l, t.minHeight)), t.maxHeight && (l = Math.min(l, t.maxHeight)), {
-        width: i,
+      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,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: n
       };
     case "fit":
-      const f = t.width ?? r, h = t.height ?? a, w = Math.min(f / r, h / a);
+      const f = t.width ?? o, g = t.height ?? n, w = Math.min(f / o, g / n);
       return {
-        width: r * w,
-        height: a * w,
+        width: o * w,
+        height: n * w,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: n
       };
     case "fill":
-      const d = t.width ?? r, _ = t.height ?? a, m = Math.max(d / r, _ / a), T = d / m, v = _ / m;
+      const u = t.width ?? o, h = t.height ?? n, m = Math.max(u / o, h / n), T = u / m, v = h / m;
       return {
-        width: d,
-        height: _,
-        sourceX: (r - T) / 2,
-        sourceY: (a - v) / 2,
+        width: u,
+        height: h,
+        sourceX: (o - T) / 2,
+        sourceY: (n - v) / 2,
         sourceWidth: T,
         sourceHeight: v
       };
     case "cover":
-      const y = t.width ?? r, x = t.height ?? a;
+      const y = t.width ?? o, x = t.height ?? n;
       return {
         width: y,
         height: x,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: n
       };
     case "contain":
-      const I = t.width ?? r, b = t.height ?? a, k = Math.min(I / r, b / a);
+      const N = t.width ?? o, _ = t.height ?? n, k = Math.min(N / o, _ / n);
       return {
-        width: r * k,
-        height: a * k,
+        width: o * k,
+        height: n * k,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: n
       };
     default:
       return {
-        width: r,
-        height: a,
+        width: o,
+        height: n,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: n
       };
   }
 }
-const ie = {
+const se = {
   scale: 1,
   translateX: 0,
   translateY: 0
@@ -171,7 +171,7 @@ const ie = {
   rotationX: 0,
   rotationY: 0,
   rotationZ: 0
-}, se = {
+}, ae = {
   rotationX: 0,
   rotationY: 0,
   rotationZ: 0,
@@ -181,324 +181,324 @@ const ie = {
   rotationX: 0,
   rotationY: 0,
   rotationZ: 0
-}, $e = {
+}, Qe = {
   type: "warp",
   shape: "none",
   enabled: !1,
   quality: 1,
-  image: { ...ie },
+  image: { ...se },
   cylinder: { ...ce },
-  plane: { ...se },
+  plane: { ...ae },
   sphere: { ...ke }
 };
-function Yt(r) {
-  const t = new OffscreenCanvas(r.width, r.height).getContext("2d");
+function Xt(o) {
+  const t = new OffscreenCanvas(o.width, o.height).getContext("2d");
   if (!t) throw new Error("Failed to create canvas context");
-  return t.drawImage(r, 0, 0), t.getImageData(0, 0, r.width, r.height);
+  return t.drawImage(o, 0, 0), t.getImageData(0, 0, o.width, o.height);
 }
-function Bt(r, a, t) {
-  const s = r.width, n = r.height, i = r.data;
-  if (a < 0 || a >= s || t < 0 || t >= n)
+function Yt(o, n, t) {
+  const a = o.width, r = o.height, s = o.data;
+  if (n < 0 || n >= a || t < 0 || t >= r)
     return null;
-  const l = Math.floor(a), f = Math.floor(t), h = Math.min(l + 1, s - 1), w = Math.min(f + 1, n - 1), d = a - l, _ = t - f, m = (g, u) => {
-    const p = (u * s + g) * 4;
+  const l = Math.floor(n), f = Math.floor(t), g = Math.min(l + 1, a - 1), w = Math.min(f + 1, r - 1), u = n - l, h = t - f, m = (b, d) => {
+    const p = (d * a + b) * 4;
     return {
-      r: i[p],
-      g: i[p + 1],
-      b: i[p + 2],
-      a: i[p + 3]
+      r: s[p],
+      g: s[p + 1],
+      b: s[p + 2],
+      a: s[p + 3]
     };
-  }, T = m(l, f), v = m(h, f), y = m(l, w), x = m(h, w), I = (g, u, p) => g + (u - g) * p, b = I(I(T.r, v.r, d), I(y.r, x.r, d), _), k = I(I(T.g, v.g, d), I(y.g, x.g, d), _), C = I(I(T.b, v.b, d), I(y.b, x.b, d), _), S = I(I(T.a, v.a, d), I(y.a, x.a, d), _);
-  return { r: b, g: k, b: C, a: S };
+  }, T = m(l, f), v = m(g, f), y = m(l, w), x = m(g, w), N = (b, d, p) => b + (d - b) * p, _ = N(N(T.r, v.r, u), N(y.r, x.r, u), h), k = N(N(T.g, v.g, u), N(y.g, x.g, u), h), I = N(N(T.b, v.b, u), N(y.b, x.b, u), h), z = N(N(T.a, v.a, u), N(y.a, x.a, u), h);
+  return { r: _, g: k, b: I, a: z };
 }
-function He(r, a, t, s, n, i, l, f, h, w) {
-  const d = Yt(a), _ = w?.showDepthVis ?? !1, m = w?.maxZ ?? 500, T = h ?? {
-    minX: -n / 2,
-    minY: -i / 2,
-    maxX: n / 2,
-    maxY: i / 2
-  }, v = T.maxX - T.minX, y = T.maxY - T.minY, x = Math.floor(v * l), I = Math.floor(y * l);
-  if (x <= 0 || I <= 0) return;
-  const b = new ImageData(x, I), k = b.data;
-  for (let p = 0; p < I; p++)
-    for (let o = 0; o < x; o++) {
-      const c = T.minX + o / l, M = T.minY + p / l, N = f(c, M);
-      if (!N || N.z <= 0)
+function He(o, n, t, a, r, s, l, f, g, w) {
+  const u = Xt(n), h = w?.showDepthVis ?? !1, m = w?.maxZ ?? 500, T = g ?? {
+    minX: -r / 2,
+    minY: -s / 2,
+    maxX: r / 2,
+    maxY: s / 2
+  }, v = T.maxX - T.minX, y = T.maxY - T.minY, x = Math.floor(v * l), N = Math.floor(y * l);
+  if (x <= 0 || N <= 0) return;
+  const _ = new ImageData(x, N), k = _.data;
+  for (let p = 0; p < N; p++)
+    for (let i = 0; i < x; i++) {
+      const c = T.minX + i / l, M = T.minY + p / l, S = f(c, M);
+      if (!S || S.z <= 0)
         continue;
-      const B = (p * x + o) * 4;
-      if (_) {
-        const J = Math.min(1, Math.max(0, N.z / m)), Z = Math.floor(J * 200 + 55);
-        k[B] = Math.floor(Z * 0.3), k[B + 1] = Math.floor(Z * 0.6), k[B + 2] = Z, k[B + 3] = 200;
+      const Y = (p * x + i) * 4;
+      if (h) {
+        const J = Math.min(1, Math.max(0, S.z / m)), B = Math.floor(J * 200 + 55);
+        k[Y] = Math.floor(B * 0.3), k[Y + 1] = Math.floor(B * 0.6), k[Y + 2] = B, k[Y + 3] = 200;
       } else {
-        const { u: J, v: Z } = N, U = Bt(d, J, Z);
-        U && (k[B] = Math.round(U.r), k[B + 1] = Math.round(U.g), k[B + 2] = Math.round(U.b), k[B + 3] = Math.round(U.a));
+        const { u: J, v: B } = S, U = Yt(u, J, B);
+        U && (k[Y] = Math.round(U.r), k[Y + 1] = Math.round(U.g), k[Y + 2] = Math.round(U.b), k[Y + 3] = Math.round(U.a));
       }
     }
-  const C = new OffscreenCanvas(x, I), S = C.getContext("2d");
-  if (!S) return;
-  S.putImageData(b, 0, 0);
-  const g = t + T.minX, u = s + T.minY;
-  l !== 1 ? r.drawImage(C, g, u, v, y) : r.drawImage(C, g, u);
+  const I = new OffscreenCanvas(x, N), z = I.getContext("2d");
+  if (!z) return;
+  z.putImageData(_, 0, 0);
+  const b = t + T.minX, d = a + T.minY;
+  l !== 1 ? o.drawImage(I, b, d, v, y) : o.drawImage(I, b, d);
 }
-function Ae(r, a, t, s = 20) {
-  if (!("save" in r)) return;
-  const n = r;
-  n.save(), n.strokeStyle = "#00ff00", n.lineWidth = 2, n.beginPath(), n.moveTo(a - s, t), n.lineTo(a + s, t), n.stroke(), n.beginPath(), n.moveTo(a, t - s), n.lineTo(a, t + s), n.stroke(), n.fillStyle = "#00ff00", n.beginPath(), n.arc(a, t, 3, 0, Math.PI * 2), n.fill(), n.restore();
+function Ae(o, n, t, a = 20) {
+  if (!("save" in o)) return;
+  const r = o;
+  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 re(r, a, t, s, n, i) {
-  const l = Math.cos(s), f = Math.sin(s), h = Math.cos(n), w = Math.sin(n), d = Math.cos(i), _ = Math.sin(i);
-  let m = r, T = a, v = t;
-  if (i !== 0) {
+function oe(o, n, t, a, r, s) {
+  const l = Math.cos(a), f = Math.sin(a), g = Math.cos(r), w = Math.sin(r), u = Math.cos(s), h = Math.sin(s);
+  let m = o, T = n, v = t;
+  if (s !== 0) {
     const y = m, x = T;
-    m = y * d - x * _, T = y * _ + x * d;
+    m = y * u - x * h, T = y * h + x * u;
   }
-  if (n !== 0) {
+  if (r !== 0) {
     const y = m, x = v;
-    m = y * h + x * w, v = -y * w + x * h;
+    m = y * g + x * w, v = -y * w + x * g;
   }
-  if (s !== 0) {
+  if (a !== 0) {
     const y = T, x = v;
     T = y * l - x * f, v = y * f + x * l;
   }
   return [m, T, v];
 }
-function Et(r, a, t, s, n, i) {
-  const l = Math.cos(s), f = Math.sin(s), h = Math.cos(n), w = Math.sin(n), d = Math.cos(i), _ = Math.sin(i);
-  let m = r, T = a, v = t;
-  if (s !== 0) {
+function qt(o, n, t, a, r, s) {
+  const l = Math.cos(a), f = Math.sin(a), g = Math.cos(r), w = Math.sin(r), u = Math.cos(s), h = Math.sin(s);
+  let m = o, T = n, v = t;
+  if (a !== 0) {
     const y = T, x = v;
     T = y * l + x * f, v = -y * f + x * l;
   }
-  if (n !== 0) {
+  if (r !== 0) {
     const y = m, x = v;
-    m = y * h - x * w, v = y * w + x * h;
+    m = y * g - x * w, v = y * w + x * g;
   }
-  if (i !== 0) {
+  if (s !== 0) {
     const y = m, x = T;
-    m = y * d + x * _, T = -y * _ + x * d;
+    m = y * u + x * h, T = -y * h + x * u;
   }
   return [m, T, v];
 }
-function Zt(r, a, t, s, n, i) {
-  if (!("save" in r)) return;
-  const l = r;
+function Bt(o, n, t, a, r, 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 d = w * f, _ = [];
+  const f = 50, g = 3;
+  for (let w = -g; w <= g; w++) {
+    const u = w * f, h = [];
     for (let m = -10; m <= 10; m++) {
-      const T = m * f, v = i(d, T);
-      v && _.push({ x: a + v.x, y: t + v.y });
+      const T = m * f, v = s(u, T);
+      v && h.push({ x: n + v.x, y: t + v.y });
     }
-    if (_.length > 1) {
-      l.beginPath(), l.moveTo(_[0].x, _[0].y);
-      for (let m = 1; m < _.length; m++)
-        l.lineTo(_[m].x, _[m].y);
+    if (h.length > 1) {
+      l.beginPath(), l.moveTo(h[0].x, h[0].y);
+      for (let m = 1; m < h.length; m++)
+        l.lineTo(h[m].x, h[m].y);
       l.stroke();
     }
   }
-  for (let w = -h; w <= h; w++) {
-    const d = w * f, _ = [];
+  for (let w = -g; w <= g; w++) {
+    const u = w * f, h = [];
     for (let m = -10; m <= 10; m++) {
-      const T = m * f, v = i(T, d);
-      v && _.push({ x: a + v.x, y: t + v.y });
+      const T = m * f, v = s(T, u);
+      v && h.push({ x: n + v.x, y: t + v.y });
     }
-    if (_.length > 1) {
-      l.beginPath(), l.moveTo(_[0].x, _[0].y);
-      for (let m = 1; m < _.length; m++)
-        l.lineTo(_[m].x, _[m].y);
+    if (h.length > 1) {
+      l.beginPath(), l.moveTo(h[0].x, h[0].y);
+      for (let m = 1; m < h.length; m++)
+        l.lineTo(h[m].x, h[m].y);
       l.stroke();
     }
   }
   l.restore();
 }
-function Ot(r, a, t, s, n, i, l, f) {
-  if (!("save" in r)) return;
-  const h = r;
-  h.save(), h.lineWidth = 2, h.setLineDash([6, 4]);
-  const w = Math.sin(i);
-  let d = 1 / 0, _ = -1 / 0;
-  const m = (p, o, c) => {
-    const M = o * w, N = f / (f + M);
+function Et(o, n, t, a, r, s, l, f) {
+  if (!("save" in o)) return;
+  const g = o;
+  g.save(), g.lineWidth = 2, g.setLineDash([6, 4]);
+  const w = Math.sin(s);
+  let u = 1 / 0, h = -1 / 0;
+  const m = (p, i, c) => {
+    const M = i * w, S = f / (f + M);
     return {
-      x: a + p * N,
-      y: t + o * N,
+      x: n + p * S,
+      y: t + i * S,
       z: c
     };
-  }, T = (p, o, c) => {
-    const M = c - o;
+  }, T = (p, i, c) => {
+    const M = c - i;
     if (M < 1e-3) return "#ff6600";
-    const N = (p - o) / M, B = Math.round(100 + N * 155), J = Math.round(30 + N * 70), Z = Math.round(0 + N * 0);
-    return `rgb(${B},${J},${Z})`;
-  }, v = 32, y = [], x = [], I = [], b = [], k = i > 0.01 ? -Math.PI / 2 : 0, C = i > 0.01 ? Math.PI / 2 : Math.PI * 2, S = i < -0.01 ? -Math.PI / 2 : 0, g = i < -0.01 ? Math.PI / 2 : Math.PI * 2;
+    const S = (p - i) / M, Y = Math.round(100 + S * 155), J = Math.round(30 + S * 70), B = Math.round(0 + S * 0);
+    return `rgb(${Y},${J},${B})`;
+  }, v = 32, y = [], x = [], N = [], _ = [], k = s > 0.01 ? -Math.PI / 2 : 0, I = s > 0.01 ? Math.PI / 2 : Math.PI * 2, z = s < -0.01 ? -Math.PI / 2 : 0, b = s < -0.01 ? Math.PI / 2 : Math.PI * 2;
   for (let p = 0; p <= v; p++) {
-    const o = p / v, c = k + o * (C - k), M = Math.sin(c) * s, N = Math.cos(c) * s, B = -n / 2, [J, Z, U] = re(M, B, N, i, 0, l), z = m(J, Z, U);
-    y.push(z), d = Math.min(d, U), _ = Math.max(_, U);
+    const i = p / v, c = k + i * (I - k), M = Math.sin(c) * a, S = Math.cos(c) * a, Y = -r / 2, [J, B, U] = oe(M, Y, S, s, 0, l), j = m(J, B, U);
+    y.push(j), u = Math.min(u, U), h = Math.max(h, U);
   }
   for (let p = 0; p <= v; p++) {
-    const o = p / v, c = S + o * (g - S), M = Math.sin(c) * s, N = Math.cos(c) * s, B = n / 2, [J, Z, U] = re(M, B, N, i, 0, l), z = m(J, Z, U);
-    x.push(z), d = Math.min(d, U), _ = Math.max(_, U);
+    const i = p / v, c = z + i * (b - z), M = Math.sin(c) * a, S = Math.cos(c) * a, Y = r / 2, [J, B, U] = oe(M, Y, S, s, 0, l), j = m(J, B, U);
+    x.push(j), u = Math.min(u, U), h = Math.max(h, U);
   }
   for (let p = 0; p <= 10; p++) {
-    const o = p / 10, c = -n / 2 + o * n, [M, N, B] = re(-s, c, 0, i, 0, l);
-    I.push(m(M, N, B)), d = Math.min(d, B), _ = Math.max(_, B);
-    const [J, Z, U] = re(s, c, 0, i, 0, l);
-    b.push(m(J, Z, U)), d = Math.min(d, U), _ = Math.max(_, U);
-  }
-  const u = (p) => {
-    for (let o = 0; o < p.length - 1; o++) {
-      const c = p[o], M = p[o + 1], N = (c.z + M.z) / 2;
-      h.strokeStyle = T(N, d, _), h.beginPath(), h.moveTo(c.x, c.y), h.lineTo(M.x, M.y), h.stroke();
+    const i = p / 10, c = -r / 2 + i * r, [M, S, Y] = oe(-a, c, 0, s, 0, l);
+    N.push(m(M, S, Y)), u = Math.min(u, Y), h = Math.max(h, Y);
+    const [J, B, U] = oe(a, c, 0, s, 0, l);
+    _.push(m(J, B, U)), u = Math.min(u, U), h = Math.max(h, U);
+  }
+  const d = (p) => {
+    for (let i = 0; i < p.length - 1; i++) {
+      const c = p[i], M = p[i + 1], S = (c.z + M.z) / 2;
+      g.strokeStyle = T(S, u, h), g.beginPath(), g.moveTo(c.x, c.y), g.lineTo(M.x, M.y), g.stroke();
     }
   };
-  u(y), u(x), u(I), u(b), h.restore();
+  d(y), d(x), d(N), d(_), g.restore();
 }
-function Lt(r, a, t, s, n, i, l, f, h, w) {
-  const { diameter: d, perspective: _, rotationX: m, rotationZ: T } = l, v = d / 2, y = m * Math.PI / 180, x = T * Math.PI / 180, I = Math.abs(y) > 1e-3, b = _ ?? 1, k = b > 0.01 ? v * (10 / b) : v * 1e3, C = f.scale, S = f.translateX, g = f.translateY;
-  let u = {
+function Zt(o, n, t, a, r, s, l, f, g, w) {
+  const { diameter: u, perspective: h, rotationX: m, rotationZ: T } = l, v = u / 2, y = m * Math.PI / 180, x = T * Math.PI / 180, N = Math.abs(y) > 1e-3, _ = h ?? 1, k = _ > 0.01 ? v * (10 / _) : v * 1e3, I = f.scale, z = f.translateX, b = f.translateY;
+  let d = {
     minX: -v,
-    minY: -i / 2,
+    minY: -s / 2,
     maxX: v,
-    maxY: i / 2
+    maxY: s / 2
   };
-  if (I) {
+  if (N) {
     const c = [
-      { x: -v, y: -i / 2 },
-      { x: v, y: -i / 2 },
-      { x: v, y: i / 2 },
-      { x: -v, y: i / 2 }
+      { x: -v, y: -s / 2 },
+      { x: v, y: -s / 2 },
+      { x: v, y: s / 2 },
+      { x: -v, y: s / 2 }
     ], M = [];
-    for (const B of c) {
-      const [J, Z, U] = re(B.x, B.y, v, y, 0, x), z = k / (k + U);
-      M.push({ x: J * z, y: Z * z });
-      const [E, O, j] = re(B.x, B.y, 0, y, 0, x), L = k / (k + j);
-      M.push({ x: E * L, y: O * L });
+    for (const Y of c) {
+      const [J, B, U] = oe(Y.x, Y.y, v, y, 0, x), j = k / (k + U);
+      M.push({ x: J * j, y: B * j });
+      const [q, E, O] = oe(Y.x, Y.y, 0, y, 0, x), Z = k / (k + O);
+      M.push({ x: q * Z, y: E * Z });
     }
-    const N = v * Math.abs(Math.sin(y));
-    M.length > 0 && (u = {
-      minX: Math.min(...M.map((B) => B.x)) - 2,
-      minY: Math.min(...M.map((B) => B.y)) - N - 2,
-      maxX: Math.max(...M.map((B) => B.x)) + 2,
-      maxY: Math.max(...M.map((B) => B.y)) + N + 2
+    const S = v * Math.abs(Math.sin(y));
+    M.length > 0 && (d = {
+      minX: Math.min(...M.map((Y) => Y.x)) - 2,
+      minY: Math.min(...M.map((Y) => Y.y)) - S - 2,
+      maxX: Math.max(...M.map((Y) => Y.x)) + 2,
+      maxY: Math.max(...M.map((Y) => Y.y)) + S + 2
     });
   }
   const p = (c, M) => {
-    const N = Math.cos(x), B = Math.sin(x), J = c * N + M * B, Z = -c * B + M * N, U = Math.cos(y), z = Math.sin(y), E = Z * z, O = k / (k + E), j = J / O, L = Z / O;
-    if (Math.abs(j) > v) return null;
-    const K = Math.sqrt(v * v - j * j);
+    const S = Math.cos(x), Y = Math.sin(x), J = c * S + M * Y, B = -c * Y + M * S, U = Math.cos(y), j = Math.sin(y), q = B * j, E = k / (k + q), O = J / E, Z = B / E;
+    if (Math.abs(O) > v) return null;
+    const K = Math.sqrt(v * v - O * O);
     if (Math.abs(U) < 0.01) return null;
-    const H = (L + K * z) / U, G = H * z + K * U;
+    const H = (Z + K * j) / U, G = H * j + K * U;
     if (G < 0) return null;
-    const D = Math.asin(j / v) * v / n + 0.5, R = H / i + 0.5, V = (D - 0.5 - S) / C + 0.5, A = (R - 0.5 - g) / C + 0.5;
-    return V >= 0 && V <= 1 && A >= 0 && A <= 1 ? { u: V * a.width, v: A * a.height, z: G } : null;
-  }, o = w.showDepthVis ? { showDepthVis: !0, maxZ: v } : void 0;
-  w.showBounds && Ot(r, t, s, v, i, y, x, k), He(r, a, t, s, n, i, h, p, u, o), w.showCrosshair && Ae(r, t, s);
+    const W = Math.asin(O / v) * v / r + 0.5, P = H / s + 0.5, V = (W - 0.5 - z) / I + 0.5, A = (P - 0.5 - b) / I + 0.5;
+    return V >= 0 && V <= 1 && A >= 0 && A <= 1 ? { u: V * n.width, v: A * n.height, z: G } : null;
+  }, i = w.showDepthVis ? { showDepthVis: !0, maxZ: v } : void 0;
+  w.showBounds && Et(o, t, a, v, s, y, x, k), He(o, n, t, a, r, s, g, p, d, i), w.showCrosshair && Ae(o, t, a);
 }
-function jt(r, a, t, s, n, i, l, f, h, w) {
-  const { rotationX: d, rotationY: _, rotationZ: m, depthScale: T } = l, v = d * (Math.PI / 180), y = _ * (Math.PI / 180), x = m * (Math.PI / 180), I = Math.abs(v) > 1e-3 || Math.abs(y) > 1e-3 || Math.abs(x) > 1e-3, b = f.scale, k = f.translateX, C = f.translateY, S = T * 1e-3, g = S > 1e-4 ? 1 / S : 1e4, u = (Z, U) => {
-    const [z, E, O] = re(Z, U, 0, v, y, x), j = O + g;
-    if (j <= 0) return null;
-    const L = g / j, K = z * L, H = E * L;
-    return { x: K, y: H, z: O };
+function Ot(o, n, t, a, r, s, l, f, g, w) {
+  const { rotationX: u, rotationY: h, rotationZ: m, depthScale: T } = l, v = u * (Math.PI / 180), y = h * (Math.PI / 180), x = m * (Math.PI / 180), N = Math.abs(v) > 1e-3 || Math.abs(y) > 1e-3 || Math.abs(x) > 1e-3, _ = f.scale, k = f.translateX, I = f.translateY, z = T * 1e-3, b = z > 1e-4 ? 1 / z : 1e4, d = (B, U) => {
+    const [j, q, E] = oe(B, U, 0, v, y, x), O = E + b;
+    if (O <= 0) return null;
+    const Z = b / O, K = j * Z, H = q * Z;
+    return { x: K, y: H, z: E };
   };
-  let p = -n / 2, o = n / 2, c = -i / 2, M = i / 2;
-  if (I) {
-    const Z = [];
-    for (let z = 0; z <= 10; z++) {
-      const E = z / 10, O = -n / 2 + E * n, j = u(O, -i / 2);
-      j && Z.push({ x: j.x, y: j.y });
-      const L = u(O, i / 2);
-      L && Z.push({ x: L.x, y: L.y });
-      const K = -i / 2 + E * i, H = u(-n / 2, K);
-      H && Z.push({ x: H.x, y: H.y });
-      const G = u(n / 2, K);
-      G && Z.push({ x: G.x, y: G.y });
+  let p = -r / 2, i = r / 2, c = -s / 2, M = s / 2;
+  if (N) {
+    const B = [];
+    for (let j = 0; j <= 10; j++) {
+      const q = j / 10, E = -r / 2 + q * r, O = d(E, -s / 2);
+      O && B.push({ x: O.x, y: O.y });
+      const Z = d(E, s / 2);
+      Z && B.push({ x: Z.x, y: Z.y });
+      const K = -s / 2 + q * s, H = d(-r / 2, K);
+      H && B.push({ x: H.x, y: H.y });
+      const G = d(r / 2, K);
+      G && B.push({ x: G.x, y: G.y });
     }
-    if (Z.length > 0) {
-      p = Math.min(...Z.map((L) => L.x)), o = Math.max(...Z.map((L) => L.x)), c = Math.min(...Z.map((L) => L.y)), M = Math.max(...Z.map((L) => L.y));
-      const z = Math.sqrt(v * v + y * y + x * x), E = 2, O = z * Math.max(n, i) * 0.1, j = E + O;
-      p -= j, o += j, c -= j, M += j;
+    if (B.length > 0) {
+      p = Math.min(...B.map((Z) => Z.x)), i = Math.max(...B.map((Z) => Z.x)), c = Math.min(...B.map((Z) => Z.y)), M = Math.max(...B.map((Z) => Z.y));
+      const j = Math.sqrt(v * v + y * y + x * x), q = 2, E = j * Math.max(r, s) * 0.1, O = q + E;
+      p -= O, i += O, c -= O, M += O;
     }
   }
-  const N = { minX: p, minY: c, maxX: o, maxY: M }, B = (Z, U) => {
-    if (!I) {
-      const Ie = Z / n + 0.5, ze = U / i + 0.5, me = (Ie - 0.5 - k) / b + 0.5, ye = (ze - 0.5 - C) / b + 0.5;
+  const S = { minX: p, minY: c, maxX: i, maxY: M }, Y = (B, U) => {
+    if (!N) {
+      const Ne = B / r + 0.5, je = U / s + 0.5, me = (Ne - 0.5 - k) / _ + 0.5, ye = (je - 0.5 - I) / _ + 0.5;
       return me >= 0 && me <= 1 && ye >= 0 && ye <= 1 ? {
-        u: me * a.width,
-        v: ye * a.height,
+        u: me * n.width,
+        v: ye * n.height,
         z: 1
       } : null;
     }
-    const [z, E, O] = re(0, 0, 1, v, y, x), j = 0, L = 0, K = 0, H = -g, G = Z - L, X = U - K, Y = 0 - H, D = Math.sqrt(G * G + X * X + Y * Y), R = G / D, V = X / D, A = Y / D, ue = R * z + V * E + A * O;
-    if (Math.abs(ue) < 1e-4)
+    const [j, q, E] = oe(0, 0, 1, v, y, x), O = 0, Z = 0, K = 0, H = -b, G = B - Z, D = U - K, X = 0 - H, W = Math.sqrt(G * G + D * D + X * X), P = G / W, V = D / W, A = X / W, de = P * j + V * q + A * E;
+    if (Math.abs(de) < 1e-4)
       return null;
-    const oe = -(L * z + K * E + H * O + j) / ue;
-    if (oe < 0)
+    const ie = -(Z * j + K * q + H * E + O) / de;
+    if (ie < 0)
       return null;
-    const he = L + R * oe, _e = K + V * oe, le = H + A * oe;
+    const ge = Z + P * ie, he = K + V * ie, le = H + A * ie;
     if (le < H)
       return null;
-    const [ge, We] = Et(he, _e, le, v, y, x), Se = ge / n + 0.5, de = We / i + 0.5, Ne = le + g, be = (Se - 0.5 - k) / b + 0.5, pe = (de - 0.5 - C) / b + 0.5;
-    return be >= 0 && be <= 1 && pe >= 0 && pe <= 1 ? {
-      u: be * a.width,
-      v: pe * a.height,
-      z: Ne
+    const [be, Re] = qt(ge, he, le, v, y, x), ze = be / r + 0.5, ue = Re / s + 0.5, Se = le + b, _e = (ze - 0.5 - k) / _ + 0.5, pe = (ue - 0.5 - I) / _ + 0.5;
+    return _e >= 0 && _e <= 1 && pe >= 0 && pe <= 1 ? {
+      u: _e * n.width,
+      v: pe * n.height,
+      z: Se
     } : null;
-  }, J = w.showDepthVis ? { showDepthVis: !0, maxZ: g * 0.5 } : void 0;
-  w.showBounds && Zt(r, t, s, n, i, u), He(r, a, t, s, n, i, h, B, N, J), w.showCrosshair && Ae(r, t, s);
+  }, J = w.showDepthVis ? { showDepthVis: !0, maxZ: b * 0.5 } : void 0;
+  w.showBounds && Bt(o, t, a, r, s, d), He(o, n, t, a, r, s, g, Y, S, J), w.showCrosshair && Ae(o, t, a);
 }
-function qt(r, a, t, s, n) {
-  if (!("save" in r)) return;
-  const i = r;
-  if (i.save(), i.strokeStyle = "#ff6600", i.lineWidth = 2, i.setLineDash([6, 4]), i.beginPath(), i.arc(a, t, s, 0, Math.PI * 2), i.stroke(), i.beginPath(), i.moveTo(a - s, t), i.lineTo(a + s, t), i.stroke(), i.beginPath(), i.moveTo(a, t - s), i.lineTo(a, t + s), i.stroke(), i.beginPath(), i.moveTo(a - s, t - s), i.lineTo(a - s, t + s), i.stroke(), i.beginPath(), i.moveTo(a + s, t - s), i.lineTo(a + s, t + s), i.stroke(), Math.abs(n) > 1e-3) {
-    i.strokeStyle = "#ffaa00";
-    const l = Math.cos(n), f = Math.sin(n), h = s * 0.7;
-    i.beginPath(), i.moveTo(a + l * h, t + f * h), i.lineTo(a - l * h, t - f * h), i.stroke(), i.beginPath(), i.moveTo(a - f * h, t + l * h), i.lineTo(a + f * h, t - l * h), i.stroke();
-  }
-  i.restore();
+function Lt(o, n, t, a, r) {
+  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(n, t, a, 0, Math.PI * 2), s.stroke(), s.beginPath(), s.moveTo(n - a, t), s.lineTo(n + a, t), s.stroke(), s.beginPath(), s.moveTo(n, t - a), s.lineTo(n, t + a), s.stroke(), s.beginPath(), s.moveTo(n - a, t - a), s.lineTo(n - a, t + a), s.stroke(), s.beginPath(), s.moveTo(n + a, t - a), s.lineTo(n + a, t + a), s.stroke(), Math.abs(r) > 1e-3) {
+    s.strokeStyle = "#ffaa00";
+    const l = Math.cos(r), f = Math.sin(r), g = a * 0.7;
+    s.beginPath(), s.moveTo(n + l * g, t + f * g), s.lineTo(n - l * g, t - f * g), s.stroke(), s.beginPath(), s.moveTo(n - f * g, t + l * g), s.lineTo(n + f * g, t - l * g), s.stroke();
+  }
+  s.restore();
 }
-function Ht(r, a, t, s, n, i, l, f, h, w) {
-  const { radius: d, rotationZ: _ } = l, m = _ * (Math.PI / 180), T = f.scale, v = f.translateX, y = f.translateY, x = {
-    minX: -d,
-    minY: -d,
-    maxX: d,
-    maxY: d
-  }, I = (k, C) => {
-    const S = Math.sqrt(k * k + C * C);
-    if (S > d) return null;
-    const g = Math.sqrt(d * d - k * k - C * C), p = Math.asin(S / d) * d, o = Math.atan2(C, k) - m, c = p * Math.cos(o), M = p * Math.sin(o), N = c / n + 0.5, B = M / i + 0.5, J = (N - 0.5 - v) / T + 0.5, Z = (B - 0.5 - y) / T + 0.5;
-    return J >= 0 && J <= 1 && Z >= 0 && Z <= 1 ? {
-      u: J * a.width,
-      v: Z * a.height,
-      z: g
+function Ht(o, n, t, a, r, s, l, f, g, w) {
+  const { radius: u, rotationZ: h } = l, m = h * (Math.PI / 180), T = f.scale, v = f.translateX, y = f.translateY, x = {
+    minX: -u,
+    minY: -u,
+    maxX: u,
+    maxY: u
+  }, N = (k, I) => {
+    const z = Math.sqrt(k * k + I * I);
+    if (z > u) return null;
+    const b = Math.sqrt(u * u - k * k - I * I), p = Math.asin(z / u) * u, i = Math.atan2(I, k) - m, c = p * Math.cos(i), M = p * Math.sin(i), S = c / r + 0.5, Y = M / s + 0.5, J = (S - 0.5 - v) / T + 0.5, B = (Y - 0.5 - y) / T + 0.5;
+    return J >= 0 && J <= 1 && B >= 0 && B <= 1 ? {
+      u: J * n.width,
+      v: B * n.height,
+      z: b
     } : null;
-  }, b = w.showDepthVis ? { showDepthVis: !0, maxZ: d } : void 0;
-  w.showBounds && qt(r, t, s, d, m), He(r, a, t, s, n, i, h, I, x, b), w.showCrosshair && Ae(r, t, s);
+  }, _ = w.showDepthVis ? { showDepthVis: !0, maxZ: u } : void 0;
+  w.showBounds && Lt(o, t, a, u, m), He(o, n, t, a, r, s, g, N, x, _), w.showCrosshair && Ae(o, t, a);
 }
-function At(r, a, t, s, n, i, l) {
-  r.drawImage(a, t - n / 2, s - i / 2, n, i);
+function At(o, n, t, a, r, s, l) {
+  o.drawImage(n, t - r / 2, a - s / 2, r, s);
 }
-function Ut(r, a, t, s, n, i, l) {
+function Ut(o, n, t, a, r, s, l) {
   if (!l.enabled || l.shape === "none") {
-    r.drawImage(a, t - n / 2, s - i / 2, n, i);
+    o.drawImage(n, t - r / 2, a - s / 2, r, s);
     return;
   }
-  const f = l.quality ?? 1, h = l.image ?? ie, w = l.debug ?? ve;
+  const f = l.quality ?? 1, g = l.image ?? se, w = l.debug ?? ve;
   switch (l.shape) {
     case "cylinder":
-      l.cylinder && Lt(r, a, t, s, n, i, l.cylinder, h, f, w);
+      l.cylinder && Zt(o, n, t, a, r, s, l.cylinder, g, f, w);
       break;
     case "plane":
-      l.plane && jt(r, a, t, s, n, i, l.plane, h, f, w);
+      l.plane && Ot(o, n, t, a, r, s, l.plane, g, f, w);
       break;
     case "sphere":
-      l.sphere && Ht(r, a, t, s, n, i, l.sphere, h, f, w);
+      l.sphere && Ht(o, n, t, a, r, s, l.sphere, g, f, w);
       break;
     case "custom":
-      l.custom && At(r, a, t, s, n, i, l.custom);
+      l.custom && At(o, n, t, a, r, s, l.custom);
       break;
     default:
-      r.drawImage(a, t - n / 2, s - i / 2, n, i);
+      o.drawImage(n, t - r / 2, a - s / 2, r, s);
   }
 }
 const ee = {
@@ -520,14 +520,14 @@ const ee = {
   scale: 1,
   maintainAspectRatio: !0
 };
-function et(r, a) {
-  let t = r, s = r.width, n = r.height;
-  const i = Vt(a);
-  for (const l of i)
+function et(o, n) {
+  let t = o, a = o.width, r = o.height;
+  const s = Vt(n);
+  for (const l of s)
     switch (l.type) {
       case "resize":
-        const f = Xt(s, n, l);
-        s = f.width, n = f.height;
+        const f = Dt(a, r, l);
+        a = f.width, r = f.height;
         break;
       case "restyle":
         t = Ft(t, l);
@@ -535,35 +535,35 @@ function et(r, a) {
     }
   return {
     image: t,
-    width: s,
-    height: n
+    width: a,
+    height: r
   };
 }
-function Vt(r) {
-  const a = ["resize", "restyle", "warp"];
-  return r.sort((t, s) => {
-    const n = a.indexOf(t.type), i = a.indexOf(s.type);
-    return n - i;
+function Vt(o) {
+  const n = ["resize", "restyle", "warp"];
+  return o.sort((t, a) => {
+    const r = n.indexOf(t.type), s = n.indexOf(a.type);
+    return r - s;
   });
 }
-function Ft(r, a) {
-  const t = new OffscreenCanvas(r.width, r.height), s = t.getContext("2d");
-  if (!s) return r;
-  s.drawImage(r, 0, 0);
-  const n = s.getImageData(0, 0, r.width, r.height), i = Nt(n, a);
-  return s.putImageData(i, 0, 0), t.transferToImageBitmap();
+function Ft(o, n) {
+  const t = new OffscreenCanvas(o.width, o.height), a = t.getContext("2d");
+  if (!a) return o;
+  a.drawImage(o, 0, 0);
+  const r = a.getImageData(0, 0, o.width, o.height), s = St(r, n);
+  return a.putImageData(s, 0, 0), t.transferToImageBitmap();
 }
-class at {
+class nt {
   latestInput = null;
   rafPending = !1;
   timeoutId = null;
   onFlush;
   TRAILING_MS = 32;
-  constructor(a) {
-    this.onFlush = a;
+  constructor(n) {
+    this.onFlush = n;
   }
-  queue(a) {
-    this.latestInput = a, 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,8 +572,8 @@ class at {
   flush() {
     if (this.latestInput === null) return;
     this.timeoutId !== null && (clearTimeout(this.timeoutId), this.timeoutId = null);
-    const a = this.latestInput;
-    this.latestInput = null, this.onFlush(a);
+    const n = this.latestInput;
+    this.latestInput = null, this.onFlush(n);
   }
   destroy() {
     this.timeoutId !== null && (clearTimeout(this.timeoutId), this.timeoutId = null), this.latestInput = null;
@@ -587,8 +587,8 @@ class Kt {
   frameId = 0;
   lastCompletedId = 0;
   options;
-  constructor(a) {
-    this.options = a, this.batcher = new at((t) => this.submitToWorker(t)), this.initWorker();
+  constructor(n) {
+    this.options = n, this.batcher = new nt((t) => this.submitToWorker(t)), this.initWorker();
   }
   initWorker() {
     try {
@@ -599,55 +599,55 @@ class Kt {
           import.meta.url
         ),
         { type: "module" }
-      ), this.worker.onmessage = (a) => {
-        this.handleWorkerMessage(a.data);
-      }, this.worker.onerror = (a) => {
-        console.error("Worker error:", a), this.options.onError?.(`Worker error: ${a.message}`);
+      ), 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 (a) {
-      console.error("Failed to create worker:", a), 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(a) {
-    this.batcher.queue(a);
+  request(n) {
+    this.batcher.queue(n);
   }
-  submitToWorker(a) {
-    const t = ++this.frameId, s = {
-      ...a,
+  submitToWorker(n) {
+    const t = ++this.frameId, a = {
+      ...n,
       id: t
     };
-    this.isWorking ? this.pendingRequest = s : this.sendToWorker(s);
+    this.isWorking ? this.pendingRequest = a : this.sendToWorker(a);
   }
-  sendToWorker(a) {
+  sendToWorker(n) {
     if (!this.worker) return;
     this.isWorking = !0;
-    const t = { type: "render", payload: a }, s = a.images.filter((n) => n instanceof ImageBitmap);
-    this.worker.postMessage(t, s);
+    const t = { type: "render", payload: n }, a = n.images.filter((r) => r instanceof ImageBitmap);
+    this.worker.postMessage(t, a);
   }
-  handleWorkerMessage(a) {
-    if (a.type === "error") {
-      console.error("Render error:", a.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: s, frameTime: n } = a.payload;
+    const { id: t, result: a, frameTime: r } = n.payload;
     if (this.isWorking = !1, t <= this.lastCompletedId) {
-      s.close(), this.processNext();
+      a.close(), this.processNext();
       return;
     }
-    this.lastCompletedId = t, this.options.onResult(s, n), this.processNext();
+    this.lastCompletedId = t, this.options.onResult(a, r), this.processNext();
   }
   processNext() {
     if (this.pendingRequest) {
-      const a = this.pendingRequest;
-      this.pendingRequest = null, this.sendToWorker(a);
+      const n = this.pendingRequest;
+      this.pendingRequest = null, this.sendToWorker(n);
     }
   }
   destroy() {
     this.batcher.destroy(), this.worker && (this.worker.terminate(), this.worker = null);
   }
 }
-function qe(r, a, t = {}, s) {
-  const n = {
+function Le(o, n, t = {}, a) {
+  const r = {
     loadedImages: /* @__PURE__ */ new Map(),
     imageBitmaps: /* @__PURE__ */ new Map(),
     imagesLoaded: !1,
@@ -658,151 +658,151 @@ function qe(r, a, t = {}, s) {
     ctx: null,
     renderStartTime: null
   };
-  n.ctx = r.getContext("2d");
-  function i(b, k) {
-    return Object.keys(k).length === 0 ? b : {
-      ...b,
-      layers: b.layers.map((C) => {
-        const S = C.name || C.id, g = k[S];
-        return g ? {
-          ...C,
-          src: g
-        } : C;
+  r.ctx = o.getContext("2d");
+  function s(_, k) {
+    return Object.keys(k).length === 0 ? _ : {
+      ..._,
+      layers: _.layers.map((I) => {
+        const z = I.name || I.id, b = k[z];
+        return b ? {
+          ...I,
+          src: b
+        } : I;
       })
     };
   }
-  if (!n.ctx)
+  if (!r.ctx)
     return () => {
     };
-  let l = a, f = t;
-  function h() {
-    return i(l, f);
-  }
-  h(), n.scheduler = new Kt({
-    onResult: (b, k) => {
-      if (n.ctx && r)
-        if (n.ctx.drawImage(b, 0, 0, r.width, r.height), b.close(), n.renderStartTime !== null) {
-          const C = performance.now() - n.renderStartTime;
-          s?.(C), n.renderStartTime = null;
+  let l = n, f = t;
+  function g() {
+    return s(l, f);
+  }
+  g(), r.scheduler = new Kt({
+    onResult: (_, k) => {
+      if (r.ctx && o)
+        if (r.ctx.drawImage(_, 0, 0, o.width, o.height), _.close(), r.renderStartTime !== null) {
+          const I = performance.now() - r.renderStartTime;
+          a?.(I), r.renderStartTime = null;
         } else
-          s?.(k);
+          a?.(k);
     },
-    onError: (b) => {
-      console.warn("Worker render failed, falling back to main thread:", b), n.useWorker = !1, m();
+    onError: (_) => {
+      console.warn("Worker render failed, falling back to main thread:", _), r.useWorker = !1, m();
     }
   });
   function w() {
-    if (!r || !n.ctx) return;
-    const b = h(), k = b.layers.map((S) => S.src).join(","), C = b.layers.map((S) => {
-      const g = S.effects.find((c) => c.type === "warp"), u = S.effects.find((c) => c.type === "restyle"), p = g ? `${g.enabled}:${g.shape}` : "none", o = u ? JSON.stringify(u) : "none";
-      return `${S.id}:${S.transform.x},${S.transform.y},${S.transform.scale},${S.transform.rotation},${S.opacity},${S.visible}:${p}:${o}`;
+    if (!o || !r.ctx) return;
+    const _ = g(), k = _.layers.map((z) => z.src).join(","), I = _.layers.map((z) => {
+      const b = z.effects.find((c) => c.type === "warp"), d = z.effects.find((c) => c.type === "restyle"), p = b ? `${b.enabled}:${b.shape}` : "none", i = d ? JSON.stringify(d) : "none";
+      return `${z.id}:${z.transform.x},${z.transform.y},${z.transform.scale},${z.transform.rotation},${z.opacity},${z.visible}:${p}:${i}`;
     }).join("|");
-    (r.width !== b.width || r.height !== b.height) && (r.width = b.width, r.height = b.height), k !== n.lastSources ? (n.lastSources = k, n.imagesLoaded = !1, _()) : n.imagesLoaded && C !== n.lastRenderKey ? (n.lastRenderKey = C, m()) : n.imagesLoaded ? n.imagesLoaded && m() : h().layers.length > 0 && _();
-  }
-  async function d(b) {
-    if (n.loadedImages.has(b))
-      return n.loadedImages.get(b);
-    const k = b.startsWith("data:");
-    let S = b.startsWith("/") || b.startsWith("./") || b.startsWith("../");
-    if (!k && !S && typeof window < "u")
+    (o.width !== _.width || o.height !== _.height) && (o.width = _.width, o.height = _.height), k !== r.lastSources ? (r.lastSources = k, r.imagesLoaded = !1, h()) : r.imagesLoaded && I !== r.lastRenderKey ? (r.lastRenderKey = I, m()) : r.imagesLoaded ? r.imagesLoaded && m() : g().layers.length > 0 && h();
+  }
+  async function u(_) {
+    if (r.loadedImages.has(_))
+      return r.loadedImages.get(_);
+    const k = _.startsWith("data:");
+    let z = _.startsWith("/") || _.startsWith("./") || _.startsWith("../");
+    if (!k && !z && typeof window < "u")
       try {
-        S = new URL(b, window.location.href).origin === window.location.origin;
+        z = new URL(_, window.location.href).origin === window.location.origin;
       } catch {
-        S = !0;
+        z = !0;
       }
-    const g = new Image();
+    const b = new Image();
     try {
-      if (await new Promise((u, p) => {
-        const o = setTimeout(() => {
+      if (await new Promise((d, p) => {
+        const i = setTimeout(() => {
           p(new Error("Image load timeout"));
         }, 3e4);
-        g.onload = () => {
-          clearTimeout(o), u();
-        }, g.onerror = (c) => {
-          clearTimeout(o), p(c);
-        }, g.src = b;
-      }), n.loadedImages.set(b, g), !k && !S)
+        b.onload = () => {
+          clearTimeout(i), d();
+        }, b.onerror = (c) => {
+          clearTimeout(i), p(c);
+        }, b.src = _;
+      }), r.loadedImages.set(_, b), !k && !z)
         try {
-          const u = new Image();
-          u.crossOrigin = "anonymous", await new Promise((p, o) => {
-            u.onload = () => p(), u.onerror = () => o(new Error("CORS failed")), u.src = b;
-          }), n.loadedImages.set(b, u);
+          const d = new Image();
+          d.crossOrigin = "anonymous", await new Promise((p, i) => {
+            d.onload = () => p(), d.onerror = () => i(new Error("CORS failed")), d.src = _;
+          }), r.loadedImages.set(_, d);
           try {
-            const p = await createImageBitmap(u);
-            n.imageBitmaps.set(b, p);
+            const p = await createImageBitmap(d);
+            r.imageBitmaps.set(_, p);
           } catch (p) {
             console.warn("Failed to create ImageBitmap:", p);
           }
-          return u;
+          return d;
         } catch {
-          console.warn(`Image loaded but CORS not available for ${b}. Canvas operations may be limited.`);
+          console.warn(`Image loaded but CORS not available for ${_}. Canvas operations may be limited.`);
           try {
-            const p = await createImageBitmap(g);
-            n.imageBitmaps.set(b, p);
+            const p = await createImageBitmap(b);
+            r.imageBitmaps.set(_, p);
           } catch {
           }
-          return g;
+          return b;
         }
       else {
         try {
-          const u = await createImageBitmap(g);
-          n.imageBitmaps.set(b, u);
-        } catch (u) {
-          console.warn("Failed to create ImageBitmap:", u);
+          const d = await createImageBitmap(b);
+          r.imageBitmaps.set(_, d);
+        } catch (d) {
+          console.warn("Failed to create ImageBitmap:", d);
         }
-        return g;
+        return b;
       }
-    } catch (u) {
-      return console.error(`Failed to load image: ${b}`, u), null;
+    } catch (d) {
+      return console.error(`Failed to load image: ${_}`, d), null;
     }
   }
-  async function _() {
+  async function h() {
     performance.now();
-    const b = h();
-    if (b.layers.length === 0) {
-      n.imagesLoaded = !0, n.ctx && m();
+    const _ = g();
+    if (_.layers.length === 0) {
+      r.imagesLoaded = !0, r.ctx && m();
       return;
     }
-    await Promise.all(b.layers.map((k) => d(k.src))), n.imagesLoaded = !0, n.ctx && r && m();
+    await Promise.all(_.layers.map((k) => u(k.src))), r.imagesLoaded = !0, r.ctx && o && m();
   }
   function m() {
-    if (!(!n.ctx || !r)) {
-      if (n.useWorker && n.scheduler) {
+    if (!(!r.ctx || !o)) {
+      if (r.useWorker && r.scheduler) {
         T();
         return;
       }
-      n.renderStartTime = performance.now(), v();
+      r.renderStartTime = performance.now(), v();
     }
   }
   async function T() {
-    if (!n.scheduler) return;
-    n.renderStartTime = performance.now();
-    const b = h(), k = [], C = [];
-    let S = !1;
-    for (const g of b.layers) {
-      if (!g.visible) continue;
-      const u = n.loadedImages.get(g.src), p = n.imageBitmaps.get(g.src);
-      if (!u) continue;
+    if (!r.scheduler) return;
+    r.renderStartTime = performance.now();
+    const _ = g(), k = [], I = [];
+    let z = !1;
+    for (const b of _.layers) {
+      if (!b.visible) continue;
+      const d = r.loadedImages.get(b.src), p = r.imageBitmaps.get(b.src);
+      if (!d) continue;
       if (!p) {
-        S = !0;
+        z = !0;
         continue;
       }
-      const o = et(p, g.effects), c = g.effects.find((z) => z.type === "warp");
-      let M = o.width, N = o.height;
-      const B = M * g.transform.scale, J = N * g.transform.scale;
-      let Z;
-      if (o.image instanceof ImageBitmap)
-        Z = o.image;
+      const i = et(p, b.effects), c = b.effects.find((j) => j.type === "warp");
+      let M = i.width, S = i.height;
+      const Y = M * b.transform.scale, J = S * b.transform.scale;
+      let B;
+      if (i.image instanceof ImageBitmap)
+        B = i.image;
       else
         try {
-          Z = await createImageBitmap(o.image);
-        } catch (z) {
-          console.warn("Failed to create bitmap from processed image, falling back to main thread:", z), v();
+          B = await createImageBitmap(i.image);
+        } catch (j) {
+          console.warn("Failed to create bitmap from processed image, falling back to main thread:", j), v();
           return;
         }
       let U = null;
       if (c) {
-        const z = {
+        const j = {
           type: "warp",
           shape: c.shape,
           enabled: !!c.enabled,
@@ -813,401 +813,428 @@ function qe(r, a, t = {}, s) {
             translateY: Number(c.image?.translateY ?? 0)
           }
         };
-        c.debug && (z.debug = {
+        c.debug && (j.debug = {
           showBounds: !!c.debug.showBounds,
           showDepthVis: !!c.debug.showDepthVis,
           showCrosshair: !!c.debug.showCrosshair
-        }), c.cylinder && (z.cylinder = {
+        }), 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 && (z.plane = {
+        }), 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 && (z.sphere = {
+        }), 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 && (z.custom = {
+        }), c.custom && (j.custom = {
           formula: String(c.custom.formula),
           parameters: Object.fromEntries(
-            Object.entries(c.custom.parameters || {}).map(([E, O]) => [E, Number(O)])
+            Object.entries(c.custom.parameters || {}).map(([q, E]) => [q, Number(E)])
           )
-        }), U = z;
+        }), U = j;
       }
       k.push({
-        id: String(g.id),
-        x: Number(g.transform.x),
-        y: Number(g.transform.y),
-        width: Number(B),
+        id: String(b.id),
+        x: Number(b.transform.x),
+        y: Number(b.transform.y),
+        width: Number(Y),
         height: Number(J),
-        rotation: Number(g.transform.rotation),
-        opacity: Number(g.opacity),
+        rotation: Number(b.transform.rotation),
+        opacity: Number(b.opacity),
         warp: U
-      }), C.push(Z);
+      }), I.push(B);
     }
-    if (S || k.length === 0) {
+    if (z || k.length === 0) {
       v();
       return;
     }
     try {
-      const g = await Promise.all(
-        C.map((u) => createImageBitmap(u))
+      const b = await Promise.all(
+        I.map((d) => createImageBitmap(d))
       );
-      n.scheduler?.request({
-        canvasWidth: b.width,
-        canvasHeight: b.height,
+      r.scheduler?.request({
+        canvasWidth: _.width,
+        canvasHeight: _.height,
         layers: k,
-        images: g
+        images: b
       });
-    } catch (g) {
-      console.warn("Failed to clone bitmaps for worker, falling back to main thread:", g), v();
+    } catch (b) {
+      console.warn("Failed to clone bitmaps for worker, falling back to main thread:", b), v();
     }
   }
   function v() {
-    if (!n.ctx || !r) return;
-    const b = 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;
+    if (!r.ctx || !o) return;
+    const _ = r.renderStartTime ?? performance.now(), k = g();
+    r.ctx.fillStyle = "#ffffff", r.ctx.fillRect(0, 0, k.width, k.height);
+    for (const z of k.layers) {
+      if (!z.visible) continue;
       performance.now();
-      const g = n.loadedImages.get(S.src);
-      if (!g) continue;
-      if (!g.complete || g.naturalWidth === 0) {
-        console.warn("Image not fully loaded:", S.src);
+      const b = r.loadedImages.get(z.src);
+      if (!b) continue;
+      if (!b.complete || b.naturalWidth === 0) {
+        console.warn("Image not fully loaded:", z.src);
         continue;
       }
-      const u = et(g, S.effects), p = S.effects.find((Z) => Z.type === "warp");
-      let o = u.width, c = u.height;
-      n.ctx.save(), n.ctx.globalAlpha = S.opacity;
-      const M = S.transform.x, N = S.transform.y;
-      n.ctx.translate(M, N), n.ctx.rotate(S.transform.rotation * Math.PI / 180);
-      const B = o * S.transform.scale, J = c * S.transform.scale;
+      const d = et(b, z.effects), p = z.effects.find((B) => B.type === "warp");
+      let i = d.width, c = d.height;
+      r.ctx.save(), r.ctx.globalAlpha = z.opacity;
+      const M = z.transform.x, S = z.transform.y;
+      r.ctx.translate(M, S), r.ctx.rotate(z.transform.rotation * Math.PI / 180);
+      const Y = i * z.transform.scale, J = c * z.transform.scale;
       try {
-        p && p.enabled && p.shape !== "none" ? Ut(n.ctx, u.image, 0, 0, B, J, p) : n.ctx.drawImage(u.image, -B / 2, -J / 2, B, J);
-      } catch (Z) {
-        console.warn("Failed to draw image to canvas (may be CORS issue):", S.src, Z);
+        p && p.enabled && p.shape !== "none" ? Ut(r.ctx, d.image, 0, 0, Y, J, p) : r.ctx.drawImage(d.image, -Y / 2, -J / 2, Y, J);
+      } catch (B) {
+        console.warn("Failed to draw image to canvas (may be CORS issue):", z.src, B);
       }
-      n.ctx.restore();
+      r.ctx.restore();
     }
-    const C = performance.now() - b;
-    s?.(C), n.renderStartTime !== null && (n.renderStartTime = null);
+    const I = performance.now() - _;
+    a?.(I), r.renderStartTime !== null && (r.renderStartTime = null);
   }
   w();
-  function y(b, k) {
-    l = b, k !== void 0 && (f = k), w();
+  function y(_, k) {
+    l = _, k !== void 0 && (f = k), w();
   }
   function x() {
-    n.scheduler?.destroy();
-    for (const b of n.imageBitmaps.values())
-      b.close();
+    r.scheduler?.destroy();
+    for (const _ of r.imageBitmaps.values())
+      _.close();
   }
-  const I = x;
-  return I.update = y, I;
+  const N = x;
+  return N.update = y, N;
 }
 var Jt = e.from_html('<div><canvas class="canvas svelte-1xdpk2w"></canvas></div>');
-function Ja(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "imageOverrides", 19, () => ({})), s = e.prop(a, "objectFit", 3, "contain"), n = e.state(null);
+const Gt = {
+  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 ca(o, n) {
+  e.push(n, !0), e.append_styles(o, Gt);
+  let t = e.prop(n, "imageOverrides", 19, () => ({})), a = e.prop(n, "objectFit", 3, "contain"), r = e.state(null);
   Te(() => {
-    if (e.get(n))
-      return qe(e.get(n), a.mockup.composition, t());
+    if (e.get(r))
+      return Le(e.get(r), n.mockup.composition, t());
   });
-  var i = Jt();
+  var s = Jt();
   let l;
-  var f = e.child(i);
-  e.bind_this(f, (h) => e.set(n, h), () => e.get(n)), e.reset(i), e.template_effect(() => l = e.set_class(i, 1, "mockup-renderer svelte-1xdpk2w", null, l, {
-    contain: s() === "contain",
-    cover: s() === "cover"
-  })), e.append(r, i), e.pop();
+  var f = e.child(s);
+  e.bind_this(f, (g) => e.set(r, g), () => e.get(r)), e.reset(s), e.template_effect(() => l = e.set_class(s, 1, "mockup-renderer svelte-1xdpk2w", null, l, {
+    contain: a() === "contain",
+    cover: a() === "cover"
+  })), e.append(o, s), e.pop();
 }
-const Gt = {
+const $t = {
   x: 0,
   y: 0,
   scale: 1,
   rotation: 0
 }, Qt = {
-  transform: { ...Gt },
+  transform: { ...$t },
   opacity: 1,
   visible: !0,
   effects: []
-}, Ce = {
+}, Ie = {
   zoom: 1,
   panX: 0,
   panY: 0
-}, st = {
+}, at = {
   width: 800,
   height: 600,
   layers: [],
   effects: []
 };
-var $t = 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>');
-function en(r, a) {
-  let t = e.state(e.proxy({ ...Ce })), s = e.state(!1), n = e.state(e.proxy({ x: 0, y: 0 }));
-  function i(b) {
-    b.preventDefault();
-    const k = b.deltaY > 0 ? 0.9 : 1.1, C = Math.max(0.25, Math.min(4, e.get(t).zoom * k));
-    e.set(t, { ...e.get(t), zoom: C }, !0);
-  }
-  function l(b) {
-    b.button === 0 && (e.set(s, !0), e.set(
-      n,
+var er = 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 tr = {
+  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 rr(o, n) {
+  e.append_styles(o, tr);
+  let t = e.state(e.proxy({ ...Ie })), a = e.state(!1), r = e.state(e.proxy({ x: 0, y: 0 }));
+  function s(_) {
+    _.preventDefault();
+    const k = _.deltaY > 0 ? 0.9 : 1.1, I = Math.max(0.25, Math.min(4, e.get(t).zoom * k));
+    e.set(t, { ...e.get(t), zoom: I }, !0);
+  }
+  function l(_) {
+    _.button === 0 && (e.set(a, !0), e.set(
+      r,
       {
-        x: b.clientX - e.get(t).panX,
-        y: b.clientY - e.get(t).panY
+        x: _.clientX - e.get(t).panX,
+        y: _.clientY - e.get(t).panY
       },
       !0
     ));
   }
-  function f(b) {
-    e.get(s) && e.set(
+  function f(_) {
+    e.get(a) && e.set(
       t,
       {
         ...e.get(t),
-        panX: b.clientX - e.get(n).x,
-        panY: b.clientY - e.get(n).y
+        panX: _.clientX - e.get(r).x,
+        panY: _.clientY - e.get(r).y
       },
       !0
     );
   }
-  function h() {
-    e.set(s, !1);
+  function g() {
+    e.set(a, !1);
   }
   function w() {
-    e.set(t, { ...Ce }, !0);
+    e.set(t, { ...Ie }, !0);
   }
-  const d = 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 _ = $t();
-  _.__mousedown = l, _.__mousemove = f, _.__mouseup = h;
-  var m = e.child(_), T = e.child(m);
-  e.snippet(T, () => a.children), e.reset(m);
+  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 h = er();
+  h.__mousedown = l, h.__mousemove = f, h.__mouseup = g;
+  var m = e.child(h), T = e.child(m);
+  e.snippet(T, () => n.children), e.reset(m);
   var v = e.sibling(m, 2), y = e.child(v), x = e.child(y);
   e.reset(y);
-  var I = e.sibling(y, 2);
-  I.__click = w, e.reset(v), e.reset(_), e.template_effect(
-    (b) => {
-      e.set_style(m, e.get(d)), e.set_text(x, `${b ?? ""}%`);
+  var N = e.sibling(y, 2);
+  N.__click = w, e.reset(v), e.reset(h), e.template_effect(
+    (_) => {
+      e.set_style(m, e.get(u)), e.set_text(x, `${_ ?? ""}%`);
     },
     [() => Math.round(e.get(t).zoom * 100)]
-  ), e.event("wheel", _, i), e.event("mouseleave", _, h), e.append(r, _);
+  ), e.event("wheel", h, s), e.event("mouseleave", h, g), e.append(o, h);
 }
 e.delegate(["mousedown", "mousemove", "mouseup", "click"]);
-function tn(r, a, t = {}, s) {
-  let n = a, i = t, l = null;
-  const f = new at((d) => {
-    l?.update ? l.update(d.config, d.overrides) : (l?.(), l = qe(r, d.config, d.overrides, s));
+function nr(o, n, t = {}, a) {
+  let r = n, s = t, l = null;
+  const f = new nt((u) => {
+    l?.update ? l.update(u.config, u.overrides) : (l?.(), l = Le(o, u.config, u.overrides, a));
   });
-  l = qe(r, n, i, s);
-  function h(d, _) {
-    n = d, _ !== void 0 && (i = _), f.queue({ config: n, overrides: i });
+  l = Le(o, r, s, a);
+  function g(u, h) {
+    r = u, h !== void 0 && (s = h), f.queue({ config: r, overrides: s });
   }
   return {
-    update: h,
+    update: g,
     cleanup: () => {
       f.destroy(), l?.();
     }
   };
 }
-var nn = e.from_html('<div class="render-time svelte-1p1rf8j"> </div>'), an = e.from_html('<div><canvas class="canvas svelte-1p1rf8j"></canvas> <!></div>');
-function sn(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "imageOverrides", 19, () => ({})), s = e.prop(a, "objectFit", 3, "contain"), n = e.prop(a, "debounceMs", 3, 100), i = e.state(null), l = e.state(null), f = e.state(0), h = e.state(null), w = null, d = e.state(""), _ = e.state(""), m = e.state(null);
+var ar = e.from_html('<div class="render-time svelte-1p1rf8j"> </div>'), sr = e.from_html('<div><canvas class="canvas svelte-1p1rf8j"></canvas> <!></div>');
+const or = {
+  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 ir(o, n) {
+  e.push(n, !0), e.append_styles(o, or);
+  let t = e.prop(n, "imageOverrides", 19, () => ({})), a = e.prop(n, "objectFit", 3, "contain"), r = e.prop(n, "debounceMs", 3, 100), s = e.state(null), l = e.state(null), f = e.state(0), g = e.state(null), w = null, u = e.state(""), h = e.state(""), m = e.state(null);
   const T = 3;
   function v() {
     if (!e.get(l)) return;
-    const g = JSON.stringify(a.mockup.composition), u = JSON.stringify(t());
-    g === e.get(d) && u === e.get(_) || (e.update(f), e.set(
-      h,
+    const b = JSON.stringify(n.mockup.composition), d = JSON.stringify(t());
+    b === e.get(u) && d === e.get(h) || (e.update(f), e.set(
+      g,
       {
-        composition: a.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(d, g, !0), e.set(_, u, !0);
-    }), e.set(h, null))) : (w && clearTimeout(w), w = setTimeout(
+    ), e.get(f) >= T ? (e.set(f, 0), w && (clearTimeout(w), w = null), e.get(g) && (Ge(() => {
+      e.get(l).update(e.get(g).composition, e.get(g).overrides), e.set(u, b, !0), e.set(h, d, !0);
+    }), e.set(g, null))) : (w && clearTimeout(w), w = setTimeout(
       () => {
-        e.get(l) && e.get(h) && (Ge(() => {
-          e.get(l).update(e.get(h).composition, e.get(h).overrides), e.set(d, JSON.stringify(e.get(h).composition), !0), e.set(_, JSON.stringify(e.get(h).overrides), !0);
-        }), e.set(h, null), e.set(f, 0)), w = null;
+        e.get(l) && e.get(g) && (Ge(() => {
+          e.get(l).update(e.get(g).composition, e.get(g).overrides), e.set(u, JSON.stringify(e.get(g).composition), !0), e.set(h, JSON.stringify(e.get(g).overrides), !0);
+        }), e.set(g, null), e.set(f, 0)), w = null;
       },
-      n()
+      r()
     )));
   }
   Te(() => (xt().then(() => {
-    e.get(i) && (e.set(
+    e.get(s) && (e.set(
       l,
-      tn(e.get(i), a.mockup.composition, t(), (g) => {
-        e.set(m, g, !0);
+      nr(e.get(s), n.mockup.composition, t(), (b) => {
+        e.set(m, b, !0);
       }),
       !0
-    ), e.set(d, JSON.stringify(a.mockup.composition), !0), e.set(_, JSON.stringify(t()), !0));
+    ), e.set(u, JSON.stringify(n.mockup.composition), !0), e.set(h, JSON.stringify(t()), !0));
   }), () => {
     w && clearTimeout(w), e.get(l)?.cleanup();
   }));
-  const y = e.derived(() => JSON.stringify(a.mockup.composition)), x = e.derived(() => JSON.stringify(t()));
+  const y = e.derived(() => JSON.stringify(n.mockup.composition)), x = e.derived(() => JSON.stringify(t()));
   e.user_effect(() => {
     e.get(y), e.get(x), e.get(l) && v();
   }), kt(() => {
     w && clearTimeout(w), e.get(l)?.cleanup();
   });
-  var I = an();
-  let b;
-  var k = e.child(I);
-  e.bind_this(k, (g) => e.set(i, g), () => e.get(i));
-  var C = e.sibling(k, 2);
+  var N = sr();
+  let _;
+  var k = e.child(N);
+  e.bind_this(k, (b) => e.set(s, b), () => e.get(s));
+  var I = e.sibling(k, 2);
   {
-    var S = (g) => {
-      var u = nn(), p = e.child(u);
-      e.reset(u), e.template_effect((o) => e.set_text(p, `${o ?? ""}ms`), [() => e.get(m).toFixed(1)]), e.append(g, u);
+    var z = (b) => {
+      var d = ar(), p = e.child(d);
+      e.reset(d), e.template_effect((i) => e.set_text(p, `${i ?? ""}ms`), [() => e.get(m).toFixed(1)]), e.append(b, d);
     };
-    e.if(C, (g) => {
-      e.get(m) !== null && g(S);
+    e.if(I, (b) => {
+      e.get(m) !== null && b(z);
     });
   }
-  e.reset(I), e.template_effect(() => b = e.set_class(I, 1, "mockup-renderer svelte-1p1rf8j", null, b, {
-    contain: s() === "contain",
-    cover: s() === "cover"
-  })), e.append(r, I), e.pop();
+  e.reset(N), e.template_effect(() => _ = e.set_class(N, 1, "mockup-renderer svelte-1p1rf8j", null, _, {
+    contain: a() === "contain",
+    cover: a() === "cover"
+  })), e.append(o, N), e.pop();
 }
-var rn = 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 on(r, a) {
-  let t = e.prop(a, "fontSize", 3, "1em"), s = e.prop(a, "color", 3, "currentColor");
-  var n = rn();
+var lr = 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 cr(o, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = lr();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(o, r);
 }
-var ln = 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 cn(r, a) {
-  let t = e.prop(a, "fontSize", 3, "1em"), s = e.prop(a, "color", 3, "currentColor");
-  var n = ln();
+var dr = 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 ur(o, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = dr();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(o, r);
 }
-var un = 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 Ue(r, a) {
-  let t = e.prop(a, "fontSize", 3, "1em"), s = e.prop(a, "color", 3, "currentColor");
-  var n = un();
+var pr = 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 Ue(o, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = pr();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(o, r);
 }
-var dn = 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 pn(r, a) {
-  let t = e.prop(a, "fontSize", 3, "1em"), s = e.prop(a, "color", 3, "currentColor");
-  var n = dn();
+var mr = 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 vr(o, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = mr();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(o, r);
 }
-var mn = e.from_html('<button type="button" class="reset-btn svelte-18gpljp" title="Reset to default"><!></button>'), vn = 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>');
-function F(r, a) {
-  var t = vn(), s = e.child(t), n = e.child(s);
+var fr = e.from_html('<button type="button" class="reset-btn svelte-18gpljp" title="Reset to default"><!></button>'), gr = 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 hr = {
+  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, n) {
+  e.append_styles(o, hr);
+  var t = gr(), a = e.child(t), r = e.child(a);
   {
-    var i = (_) => {
-      var m = mn();
+    var s = (h) => {
+      var m = fr();
       m.__click = function(...v) {
-        a.onReset?.apply(this, v);
+        n.onReset?.apply(this, v);
       };
       var T = e.child(m);
-      pn(T, { fontSize: "0.875rem" }), e.reset(m), e.append(_, m);
+      vr(T, { fontSize: "0.875rem" }), e.reset(m), e.append(h, m);
     };
-    e.if(n, (_) => {
-      a.onReset && _(i);
+    e.if(r, (h) => {
+      n.onReset && h(s);
     });
   }
-  var l = e.sibling(n, 2), f = e.child(l), h = e.child(f, !0);
+  var l = e.sibling(r, 2), f = e.child(l), g = e.child(f, !0);
   e.reset(f);
-  var w = e.sibling(f, 2), d = e.child(w);
-  e.snippet(d, () => a.children), e.reset(w), e.reset(l), e.reset(s), e.reset(t), e.template_effect(() => e.set_text(h, a.label)), e.append(r, t);
+  var w = e.sibling(f, 2), u = e.child(w);
+  e.snippet(u, () => n.children), e.reset(w), e.reset(l), e.reset(a), e.reset(t), e.template_effect(() => e.set_text(g, n.label)), e.append(o, t);
 }
 e.delegate(["click"]);
-var fn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), hn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), _n = 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), gn = 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), bn = 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>');
-function yn(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "transform", 7), s = e.prop(a, "opacity", 7);
-  const n = {
-    x: Math.round(a.canvasWidth / 2),
-    y: Math.round(a.canvasHeight / 2),
+var br = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), _r = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), yr = 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), wr = 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), xr = 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 kr = {
+  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 Mr(o, n) {
+  e.push(n, !0), e.append_styles(o, kr);
+  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 i(C) {
-    a.onTransformChange({ ...t(), ...C });
+  function s(I) {
+    n.onTransformChange({ ...t(), ...I });
   }
-  const l = -a.canvasWidth / 2, f = a.canvasWidth * 1.5, h = -a.canvasHeight / 2, w = a.canvasHeight * 1.5;
-  var d = bn(), _ = e.sibling(e.child(d), 2), m = e.child(_), T = e.sibling(e.child(m), 2), v = e.child(T);
+  const l = -n.canvasWidth / 2, f = n.canvasWidth * 1.5, g = -n.canvasHeight / 2, w = n.canvasHeight * 1.5;
+  var u = xr(), h = e.sibling(e.child(u), 2), m = e.child(h), T = e.sibling(e.child(m), 2), v = e.child(T);
   F(v, {
     label: "Position X",
-    onReset: () => i({ x: n.x }),
-    children: (C, S) => {
-      var g = fn(), u = e.first_child(g);
-      e.remove_input_defaults(u), u.__input = (o) => i({ x: Number(o.currentTarget.value) });
-      var p = e.sibling(u, 2);
-      e.remove_input_defaults(p), p.__input = (o) => i({ x: Number(o.currentTarget.value) }), e.template_effect(() => {
-        e.set_attribute(u, "min", l), e.set_attribute(u, "max", f);
-      }), e.bind_value(u, () => t().x, (o) => t().x = o), e.bind_value(p, () => t().x, (o) => t().x = o), e.append(C, g);
+    onReset: () => s({ x: r.x }),
+    children: (I, z) => {
+      var b = br(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => s({ x: Number(i.currentTarget.value) });
+      var p = e.sibling(d, 2);
+      e.remove_input_defaults(p), p.__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(p, () => t().x, (i) => t().x = i), e.append(I, b);
     }
   });
   var y = e.sibling(v, 2);
   F(y, {
     label: "Position Y",
-    onReset: () => i({ y: n.y }),
-    children: (C, S) => {
-      var g = hn(), u = e.first_child(g);
-      e.remove_input_defaults(u), u.__input = (o) => i({ y: Number(o.currentTarget.value) });
-      var p = e.sibling(u, 2);
-      e.remove_input_defaults(p), p.__input = (o) => i({ y: Number(o.currentTarget.value) }), e.template_effect(() => {
-        e.set_attribute(u, "min", h), e.set_attribute(u, "max", w);
-      }), e.bind_value(u, () => t().y, (o) => t().y = o), e.bind_value(p, () => t().y, (o) => t().y = o), e.append(C, g);
+    onReset: () => s({ y: r.y }),
+    children: (I, z) => {
+      var b = _r(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => s({ y: Number(i.currentTarget.value) });
+      var p = e.sibling(d, 2);
+      e.remove_input_defaults(p), p.__input = (i) => s({ y: Number(i.currentTarget.value) }), e.template_effect(() => {
+        e.set_attribute(d, "min", g), e.set_attribute(d, "max", w);
+      }), e.bind_value(d, () => t().y, (i) => t().y = i), e.bind_value(p, () => t().y, (i) => t().y = i), e.append(I, b);
     }
   }), e.reset(T), e.reset(m);
-  var x = e.sibling(m, 2), I = e.sibling(e.child(x), 2), b = e.child(I);
-  F(b, {
+  var x = e.sibling(m, 2), N = e.sibling(e.child(x), 2), _ = e.child(N);
+  F(_, {
     label: "Rotation (°)",
-    onReset: () => i({ rotation: n.rotation }),
-    children: (C, S) => {
-      var g = _n(), u = e.first_child(g);
-      e.remove_input_defaults(u), u.__input = (o) => i({ rotation: Number(o.currentTarget.value) });
-      var p = e.sibling(u, 2);
-      e.remove_input_defaults(p), p.__input = (o) => i({ rotation: Number(o.currentTarget.value) }), e.bind_value(u, () => t().rotation, (o) => t().rotation = o), e.bind_value(p, () => t().rotation, (o) => t().rotation = o), e.append(C, g);
+    onReset: () => s({ rotation: r.rotation }),
+    children: (I, z) => {
+      var b = yr(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => s({ rotation: Number(i.currentTarget.value) });
+      var p = e.sibling(d, 2);
+      e.remove_input_defaults(p), p.__input = (i) => s({ rotation: Number(i.currentTarget.value) }), e.bind_value(d, () => t().rotation, (i) => t().rotation = i), e.bind_value(p, () => t().rotation, (i) => t().rotation = i), e.append(I, b);
     }
   });
-  var k = e.sibling(b, 2);
+  var k = e.sibling(_, 2);
   F(k, {
     label: "Opacity",
-    onReset: () => a.onOpacityChange(n.opacity),
-    children: (C, S) => {
-      var g = gn(), u = e.first_child(g);
-      e.remove_input_defaults(u), u.__input = (o) => a.onOpacityChange(Number(o.currentTarget.value));
-      var p = e.sibling(u, 2);
-      e.remove_input_defaults(p), p.__input = (o) => a.onOpacityChange(Number(o.currentTarget.value)), e.bind_value(u, s), e.bind_value(p, s), e.append(C, g);
+    onReset: () => n.onOpacityChange(r.opacity),
+    children: (I, z) => {
+      var b = wr(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => n.onOpacityChange(Number(i.currentTarget.value));
+      var p = e.sibling(d, 2);
+      e.remove_input_defaults(p), p.__input = (i) => n.onOpacityChange(Number(i.currentTarget.value)), e.bind_value(d, a), e.bind_value(p, a), e.append(I, b);
     }
-  }), e.reset(I), e.reset(x), e.reset(_), e.reset(d), e.append(r, d), e.pop();
+  }), e.reset(N), e.reset(x), e.reset(h), e.reset(u), e.append(o, u), e.pop();
 }
 e.delegate(["input"]);
-var wn = 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), kn = 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), Mn = 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), Tn = e.from_html('<input type="checkbox"/>'), Sn = e.from_html("<!> <!> <!>", 1), Nn = 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>');
-function In(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "effect", 3, fe);
-  function s(d) {
-    a.onChange({ ...t(), ...d });
-  }
-  var n = Nn(), i = e.sibling(e.child(n), 2), l = e.child(i);
+var Tr = e.from_html('<select class="mode-select svelte-1qmrgom"><option>Scale</option><option>Px</option></select>'), zr = 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), Sr = 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), Nr = 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), Ir = e.from_html('<input type="checkbox"/>'), Cr = e.from_html("<!> <!> <!>", 1), Pr = 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 Rr = {
+  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 jr(o, n) {
+  e.push(n, !0), e.append_styles(o, Rr);
+  let t = e.prop(n, "effect", 3, fe);
+  function a(u) {
+    n.onChange({ ...t(), ...u });
+  }
+  var r = Pr(), s = e.sibling(e.child(r), 2), l = e.child(s);
   F(l, {
     label: "Mode",
-    onReset: () => s({ mode: fe.mode }),
-    children: (d, _) => {
-      var m = wn();
-      m.__change = (x) => s({ mode: x.currentTarget.value });
+    onReset: () => a({ mode: fe.mode }),
+    children: (u, h) => {
+      var m = Tr();
+      m.__change = (x) => a({ mode: x.currentTarget.value });
       var T = e.child(m);
       T.value = T.__value = "scale";
       var v = e.sibling(T);
@@ -1215,156 +1242,164 @@ function In(r, a) {
       var y;
       e.init_select(m), e.template_effect(() => {
         y !== (y = t().mode) && (m.value = (m.__value = t().mode) ?? "", e.select_option(m, t().mode));
-      }), e.append(d, m);
+      }), e.append(u, m);
     }
   });
   var f = e.sibling(l, 2);
   {
-    var h = (d) => {
-      F(d, {
+    var g = (u) => {
+      F(u, {
         label: "Scale",
-        onReset: () => s({ scale: fe.scale }),
-        children: (_, m) => {
-          var T = xn(), v = e.first_child(T);
-          e.remove_input_defaults(v), v.__input = (x) => s({ scale: Number(x.currentTarget.value) });
+        onReset: () => a({ scale: fe.scale }),
+        children: (h, m) => {
+          var T = zr(), 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) => s({ scale: Number(x.currentTarget.value) }), e.template_effect(() => {
+          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(_, T);
+          }), e.append(h, T);
         }
       });
-    }, w = (d) => {
-      var _ = Sn(), m = e.first_child(_);
+    }, w = (u) => {
+      var h = Cr(), m = e.first_child(h);
       F(m, {
         label: "Width",
-        onReset: () => s({ width: void 0, minWidth: void 0, maxWidth: void 0 }),
+        onReset: () => a({ width: void 0, minWidth: void 0, maxWidth: void 0 }),
         children: (y, x) => {
-          var I = kn(), b = e.first_child(I);
-          e.remove_input_defaults(b), b.__input = (p) => {
-            const o = p.currentTarget.value ? Number(p.currentTarget.value) : void 0, c = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "";
-            s(c === "min" ? { width: o, minWidth: o, maxWidth: void 0 } : c === "max" ? { width: o, maxWidth: o, minWidth: void 0 } : { width: o });
+          var N = Sr(), _ = e.first_child(N);
+          e.remove_input_defaults(_), _.__input = (p) => {
+            const i = p.currentTarget.value ? Number(p.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 });
           };
-          var k = e.sibling(b, 2);
+          var k = e.sibling(_, 2);
           k.__change = (p) => {
-            const o = t().width ?? t().minWidth ?? t().maxWidth;
-            p.currentTarget.value === "min" && o !== void 0 ? s({ minWidth: o, maxWidth: void 0 }) : p.currentTarget.value === "max" && o !== void 0 ? s({ maxWidth: o, minWidth: void 0 }) : s({ minWidth: void 0, maxWidth: void 0 });
+            const i = t().width ?? t().minWidth ?? t().maxWidth;
+            p.currentTarget.value === "min" && i !== void 0 ? a({ minWidth: i, maxWidth: void 0 }) : p.currentTarget.value === "max" && i !== void 0 ? a({ maxWidth: i, minWidth: void 0 }) : a({ minWidth: void 0, maxWidth: void 0 });
           };
-          var C = e.child(k);
-          C.value = C.__value = "";
-          var S = e.sibling(C);
-          S.value = S.__value = "min";
-          var g = e.sibling(S);
-          g.value = g.__value = "max", e.reset(k);
-          var u;
+          var I = e.child(k);
+          I.value = I.__value = "";
+          var z = e.sibling(I);
+          z.value = z.__value = "min";
+          var b = e.sibling(z);
+          b.value = b.__value = "max", e.reset(k);
+          var d;
           e.init_select(k), e.template_effect(() => {
-            e.set_value(b, t().width ?? t().minWidth ?? t().maxWidth ?? ""), u !== (u = 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, I);
+            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, N);
         }
       });
       var T = e.sibling(m, 2);
       F(T, {
         label: "Height",
-        onReset: () => s({
+        onReset: () => a({
           height: void 0,
           minHeight: void 0,
           maxHeight: void 0
         }),
         children: (y, x) => {
-          var I = Mn(), b = e.first_child(I);
-          e.remove_input_defaults(b), b.__input = (p) => {
-            const o = p.currentTarget.value ? Number(p.currentTarget.value) : void 0, c = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "";
-            s(c === "min" ? { height: o, minHeight: o, maxHeight: void 0 } : c === "max" ? { height: o, maxHeight: o, minHeight: void 0 } : { height: o });
+          var N = Nr(), _ = e.first_child(N);
+          e.remove_input_defaults(_), _.__input = (p) => {
+            const i = p.currentTarget.value ? Number(p.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 });
           };
-          var k = e.sibling(b, 2);
+          var k = e.sibling(_, 2);
           k.__change = (p) => {
-            const o = t().height ?? t().minHeight ?? t().maxHeight;
-            p.currentTarget.value === "min" && o !== void 0 ? s({ minHeight: o, maxHeight: void 0 }) : p.currentTarget.value === "max" && o !== void 0 ? s({ maxHeight: o, minHeight: void 0 }) : s({ minHeight: void 0, maxHeight: void 0 });
+            const i = t().height ?? t().minHeight ?? t().maxHeight;
+            p.currentTarget.value === "min" && i !== void 0 ? a({ minHeight: i, maxHeight: void 0 }) : p.currentTarget.value === "max" && i !== void 0 ? a({ maxHeight: i, minHeight: void 0 }) : a({ minHeight: void 0, maxHeight: void 0 });
           };
-          var C = e.child(k);
-          C.value = C.__value = "";
-          var S = e.sibling(C);
-          S.value = S.__value = "min";
-          var g = e.sibling(S);
-          g.value = g.__value = "max", e.reset(k);
-          var u;
+          var I = e.child(k);
+          I.value = I.__value = "";
+          var z = e.sibling(I);
+          z.value = z.__value = "min";
+          var b = e.sibling(z);
+          b.value = b.__value = "max", e.reset(k);
+          var d;
           e.init_select(k), e.template_effect(() => {
-            e.set_value(b, t().height ?? t().minHeight ?? t().maxHeight ?? ""), u !== (u = 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, I);
+            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, N);
         }
       });
       var v = e.sibling(T, 2);
       F(v, {
         label: "Maintain Aspect",
-        onReset: () => s({ maintainAspectRatio: fe.maintainAspectRatio }),
+        onReset: () => a({ maintainAspectRatio: fe.maintainAspectRatio }),
         children: (y, x) => {
-          var I = Tn();
-          e.remove_input_defaults(I), I.__change = (b) => s({ maintainAspectRatio: b.currentTarget.checked }), e.template_effect(() => e.set_checked(I, t().maintainAspectRatio ?? !0)), e.append(y, I);
+          var N = Ir();
+          e.remove_input_defaults(N), N.__change = (_) => a({ maintainAspectRatio: _.currentTarget.checked }), e.template_effect(() => e.set_checked(N, t().maintainAspectRatio ?? !0)), e.append(y, N);
         }
-      }), e.append(d, _);
+      }), e.append(u, h);
     };
-    e.if(f, (d) => {
-      t().mode === "scale" ? d(h) : d(w, !1);
+    e.if(f, (u) => {
+      t().mode === "scale" ? u(g) : u(w, !1);
     });
   }
-  e.reset(i), e.reset(n), e.append(r, n), e.pop();
+  e.reset(s), e.reset(r), e.append(o, r), e.pop();
 }
 e.delegate(["change", "input"]);
-var Cn = e.from_html('<span class="section-toggle svelte-1h62jm0"> </span>'), Pn = e.from_html('<div class="section-content svelte-1h62jm0"><!></div>'), Rn = e.from_html('<div class="section svelte-1h62jm0"><div class="section-header svelte-1h62jm0"><h3 class="section-title svelte-1h62jm0"> </h3> <!></div> <!></div>');
-function Wn(r, a) {
-  e.push(a, !0);
-  let t = e.state(e.proxy(a.config.defaultCollapsed ?? !1));
-  var s = Rn(), n = e.child(s);
-  n.__click = () => a.config.collapsible && e.set(t, !e.get(t));
-  var i = e.child(n), l = e.child(i, !0);
-  e.reset(i);
-  var f = e.sibling(i, 2);
+var Wr = e.from_html('<span class="section-toggle svelte-1h62jm0"> </span>'), Dr = e.from_html('<div class="section-content svelte-1h62jm0"><!></div>'), Xr = e.from_html('<div class="section svelte-1h62jm0"><div class="section-header svelte-1h62jm0"><h3 class="section-title svelte-1h62jm0"> </h3> <!></div> <!></div>');
+const Yr = {
+  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 qr(o, n) {
+  e.push(n, !0), e.append_styles(o, Yr);
+  let t = e.state(e.proxy(n.config.defaultCollapsed ?? !1));
+  var a = Xr(), r = e.child(a);
+  r.__click = () => n.config.collapsible && e.set(t, !e.get(t));
+  var s = e.child(r), l = e.child(s, !0);
+  e.reset(s);
+  var f = e.sibling(s, 2);
   {
-    var h = (_) => {
-      var m = Cn(), T = e.child(m, !0);
-      e.reset(m), e.template_effect(() => e.set_text(T, e.get(t) ? "▼" : "▲")), e.append(_, m);
+    var g = (h) => {
+      var m = Wr(), T = e.child(m, !0);
+      e.reset(m), e.template_effect(() => e.set_text(T, e.get(t) ? "▼" : "▲")), e.append(h, m);
     };
-    e.if(f, (_) => {
-      a.config.collapsible && _(h);
+    e.if(f, (h) => {
+      n.config.collapsible && h(g);
     });
   }
-  e.reset(n);
-  var w = e.sibling(n, 2);
+  e.reset(r);
+  var w = e.sibling(r, 2);
   {
-    var d = (_) => {
-      var m = Pn(), T = e.child(m);
-      e.snippet(T, () => a.children), e.reset(m), e.append(_, m);
+    var u = (h) => {
+      var m = Dr(), T = e.child(m);
+      e.snippet(T, () => n.children), e.reset(m), e.append(h, m);
     };
-    e.if(w, (_) => {
-      e.get(t) || _(d);
+    e.if(w, (h) => {
+      e.get(t) || h(u);
     });
   }
-  e.reset(s), e.template_effect(() => e.set_text(l, a.config.title)), e.append(r, s), e.pop();
+  e.reset(a), e.template_effect(() => e.set_text(l, n.config.title)), e.append(o, a), e.pop();
 }
 e.delegate(["click"]);
-var zn = e.from_html('<input type="checkbox"/>'), Dn = e.from_html('<select class="shape-select svelte-1ani6pi"><option>None</option><option>Plane</option><option>Cylinder</option><option>Sphere</option></select>'), Xn = 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), Yn = 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), Bn = 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), En = 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), Zn = 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>'), On = 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), Ln = 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), jn = 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), Hn = 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>'), An = 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), Un = 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), Vn = 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), Fn = 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), Kn = 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>'), Jn = 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), Gn = 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('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!></div></details>'), $n = e.from_html('<input type="checkbox"/>'), ea = e.from_html('<input type="checkbox"/>'), ta = e.from_html('<input type="checkbox"/>'), na = 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>'), aa = e.from_html("<!> <!> <!> <!> <!> <!> <!>", 1), sa = e.from_html("<!> <!>", 1);
-function ia(r, a) {
-  e.push(a, !0);
-  const t = e.derived(() => a.effect ?? $e), s = e.derived(() => e.get(t).image ?? ie), n = e.derived(() => e.get(t).debug ?? ve);
-  function i(T) {
+var Br = e.from_html('<input type="checkbox"/>'), Er = e.from_html('<select class="shape-select svelte-1ani6pi"><option>None</option><option>Plane</option><option>Cylinder</option><option>Sphere</option></select>'), Zr = 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), Or = 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), Lr = 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), Hr = 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), Ar = 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>'), Ur = 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), Vr = 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), Fr = 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), Kr = 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), Jr = 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>'), Gr = 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), $r = 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), Qr = 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), en = 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), tn = 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>'), rn = 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), nn = 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), an = 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>'), sn = e.from_html('<input type="checkbox"/>'), on = e.from_html('<input type="checkbox"/>'), ln = e.from_html('<input type="checkbox"/>'), cn = 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>'), dn = e.from_html("<!> <!> <!> <!> <!> <!> <!>", 1), un = e.from_html("<!> <!>", 1);
+const pn = {
+  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 mn(o, n) {
+  e.push(n, !0), e.append_styles(o, pn);
+  const t = e.derived(() => n.effect ?? Qe), a = e.derived(() => e.get(t).image ?? se), r = e.derived(() => e.get(t).debug ?? ve);
+  function s(T) {
     const v = { ...e.get(t), ...T };
-    a.onChange(v);
+    n.onChange(v);
   }
   function l(T) {
-    i({
+    s({
       image: {
-        ...ie,
+        ...se,
         ...e.get(t).image,
         ...T
       }
     });
   }
   function f(T) {
-    i({
+    s({
       debug: { ...ve, ...e.get(t).debug, ...T }
     });
   }
-  function h(T) {
-    i({
+  function g(T) {
+    s({
       cylinder: {
         ...ce,
         ...e.get(t).cylinder,
@@ -1373,12 +1408,12 @@ function ia(r, a) {
     });
   }
   function w(T) {
-    i({
-      plane: { ...se, ...e.get(t).plane, ...T }
+    s({
+      plane: { ...ae, ...e.get(t).plane, ...T }
     });
   }
-  function d(T) {
-    i({
+  function u(T) {
+    s({
       sphere: {
         ...ke,
         ...e.get(t).sphere,
@@ -1386,310 +1421,310 @@ function ia(r, a) {
       }
     });
   }
-  function _() {
-    e.get(t).enabled ? i({ enabled: !1 }) : i({
+  function h() {
+    e.get(t).enabled ? s({ enabled: !1 }) : s({
       enabled: !0,
       shape: "plane",
-      plane: e.get(t).plane ?? { ...se },
-      image: e.get(t).image ?? { ...ie }
+      plane: e.get(t).plane ?? { ...ae },
+      image: e.get(t).image ?? { ...se }
     });
   }
   const m = { id: "warp", title: "Warp", collapsible: !0 };
-  Wn(r, {
+  qr(o, {
     get config() {
       return m;
     },
     children: (T, v) => {
-      var y = sa(), x = e.first_child(y);
+      var y = un(), x = e.first_child(y);
       F(x, {
         label: "Enabled",
-        children: (k, C) => {
-          var S = zn();
-          e.remove_input_defaults(S), S.__change = _, e.template_effect(() => e.set_checked(S, e.get(t).enabled)), e.append(k, S);
+        children: (k, I) => {
+          var z = Br();
+          e.remove_input_defaults(z), z.__change = h, e.template_effect(() => e.set_checked(z, e.get(t).enabled)), e.append(k, z);
         }
       });
-      var I = e.sibling(x, 2);
+      var N = e.sibling(x, 2);
       {
-        var b = (k) => {
-          var C = aa(), S = e.first_child(C);
-          F(S, {
+        var _ = (k) => {
+          var I = dn(), z = e.first_child(I);
+          F(z, {
             label: "Shape",
-            children: (z, E) => {
-              var O = Dn();
-              O.__change = (X) => {
-                const Y = X.currentTarget.value;
-                i({ shape: Y }), Y === "cylinder" && !e.get(t).cylinder && i({ cylinder: { ...ce } }), Y === "plane" && !e.get(t).plane && i({ plane: { ...se } }), Y === "sphere" && !e.get(t).sphere && i({ sphere: { ...ke } });
+            children: (j, q) => {
+              var E = Er();
+              E.__change = (D) => {
+                const X = D.currentTarget.value;
+                s({ shape: X }), X === "cylinder" && !e.get(t).cylinder && s({ cylinder: { ...ce } }), X === "plane" && !e.get(t).plane && s({ plane: { ...ae } }), X === "sphere" && !e.get(t).sphere && s({ sphere: { ...ke } });
               };
-              var j = e.child(O);
-              j.value = j.__value = "none";
-              var L = e.sibling(j);
-              L.value = L.__value = "plane";
-              var K = e.sibling(L);
+              var O = e.child(E);
+              O.value = O.__value = "none";
+              var Z = e.sibling(O);
+              Z.value = Z.__value = "plane";
+              var K = e.sibling(Z);
               K.value = K.__value = "cylinder";
               var H = e.sibling(K);
-              H.value = H.__value = "sphere", e.reset(O);
+              H.value = H.__value = "sphere", e.reset(E);
               var G;
-              e.init_select(O), e.template_effect(() => {
-                G !== (G = e.get(t).shape) && (O.value = (O.__value = e.get(t).shape) ?? "", e.select_option(O, e.get(t).shape));
-              }), e.append(z, O);
+              e.init_select(E), e.template_effect(() => {
+                G !== (G = e.get(t).shape) && (E.value = (E.__value = e.get(t).shape) ?? "", e.select_option(E, e.get(t).shape));
+              }), e.append(j, E);
             }
           });
-          var g = e.sibling(S, 2);
-          F(g, {
+          var b = e.sibling(z, 2);
+          F(b, {
             label: "Quality",
-            onReset: () => i({ quality: $e.quality }),
-            children: (z, E) => {
-              var O = Xn(), j = e.first_child(O);
-              e.remove_input_defaults(j), j.__input = (K) => i({ quality: Number(K.currentTarget.value) });
-              var L = e.sibling(j, 2);
-              e.remove_input_defaults(L), L.__input = (K) => i({ quality: Number(K.currentTarget.value) }), e.template_effect(() => {
-                e.set_value(j, e.get(t).quality ?? 1), e.set_value(L, e.get(t).quality ?? 1);
-              }), e.append(z, O);
+            onReset: () => s({ quality: Qe.quality }),
+            children: (j, q) => {
+              var E = Zr(), O = e.first_child(E);
+              e.remove_input_defaults(O), O.__input = (K) => s({ quality: Number(K.currentTarget.value) });
+              var Z = e.sibling(O, 2);
+              e.remove_input_defaults(Z), Z.__input = (K) => s({ quality: Number(K.currentTarget.value) }), e.template_effect(() => {
+                e.set_value(O, e.get(t).quality ?? 1), e.set_value(Z, e.get(t).quality ?? 1);
+              }), e.append(j, E);
             }
           });
-          var u = e.sibling(g, 2);
+          var d = e.sibling(b, 2);
           {
-            var p = (z) => {
-              var E = Zn(), O = e.sibling(e.child(E), 2), j = e.child(O);
-              F(j, {
+            var p = (j) => {
+              var q = Ar(), E = e.sibling(e.child(q), 2), O = e.child(E);
+              F(O, {
                 label: "Scale",
-                onReset: () => l({ scale: ie.scale }),
+                onReset: () => l({ scale: se.scale }),
                 children: (H, G) => {
-                  var X = Yn(), Y = e.first_child(X);
-                  e.remove_input_defaults(Y), Y.__input = (R) => l({ scale: Number(R.currentTarget.value) });
-                  var D = e.sibling(Y, 2);
-                  e.remove_input_defaults(D), D.__input = (R) => l({ scale: Number(R.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(Y, e.get(s).scale), e.set_value(D, e.get(s).scale);
-                  }), e.append(H, X);
+                  var D = Or(), X = e.first_child(D);
+                  e.remove_input_defaults(X), X.__input = (P) => l({ scale: Number(P.currentTarget.value) });
+                  var W = e.sibling(X, 2);
+                  e.remove_input_defaults(W), W.__input = (P) => l({ scale: Number(P.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(X, e.get(a).scale), e.set_value(W, e.get(a).scale);
+                  }), e.append(H, D);
                 }
               });
-              var L = e.sibling(j, 2);
-              F(L, {
+              var Z = e.sibling(O, 2);
+              F(Z, {
                 label: "Translate X",
-                onReset: () => l({ translateX: ie.translateX }),
+                onReset: () => l({ translateX: se.translateX }),
                 children: (H, G) => {
-                  var X = Bn(), Y = e.first_child(X);
-                  e.remove_input_defaults(Y), Y.__input = (R) => l({ translateX: Number(R.currentTarget.value) });
-                  var D = e.sibling(Y, 2);
-                  e.remove_input_defaults(D), D.__input = (R) => l({ translateX: Number(R.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(Y, e.get(s).translateX), e.set_value(D, e.get(s).translateX);
-                  }), e.append(H, X);
+                  var D = Lr(), X = e.first_child(D);
+                  e.remove_input_defaults(X), X.__input = (P) => l({ translateX: Number(P.currentTarget.value) });
+                  var W = e.sibling(X, 2);
+                  e.remove_input_defaults(W), W.__input = (P) => l({ translateX: Number(P.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(X, e.get(a).translateX), e.set_value(W, e.get(a).translateX);
+                  }), e.append(H, D);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(Z, 2);
               F(K, {
                 label: "Translate Y",
-                onReset: () => l({ translateY: ie.translateY }),
+                onReset: () => l({ translateY: se.translateY }),
                 children: (H, G) => {
-                  var X = En(), Y = e.first_child(X);
-                  e.remove_input_defaults(Y), Y.__input = (R) => l({ translateY: Number(R.currentTarget.value) });
-                  var D = e.sibling(Y, 2);
-                  e.remove_input_defaults(D), D.__input = (R) => l({ translateY: Number(R.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(Y, e.get(s).translateY), e.set_value(D, e.get(s).translateY);
-                  }), e.append(H, X);
+                  var D = Hr(), X = e.first_child(D);
+                  e.remove_input_defaults(X), X.__input = (P) => l({ translateY: Number(P.currentTarget.value) });
+                  var W = e.sibling(X, 2);
+                  e.remove_input_defaults(W), W.__input = (P) => l({ translateY: Number(P.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(X, e.get(a).translateY), e.set_value(W, e.get(a).translateY);
+                  }), e.append(H, D);
                 }
-              }), e.reset(O), e.reset(E), e.append(z, E);
+              }), e.reset(E), e.reset(q), e.append(j, q);
             };
-            e.if(u, (z) => {
-              e.get(t).shape !== "none" && z(p);
+            e.if(d, (j) => {
+              e.get(t).shape !== "none" && j(p);
             });
           }
-          var o = e.sibling(u, 2);
+          var i = e.sibling(d, 2);
           {
-            var c = (z) => {
-              const E = e.derived(() => e.get(t).plane);
-              var O = Hn(), j = e.sibling(e.child(O), 2), L = e.child(j);
-              F(L, {
+            var c = (j) => {
+              const q = e.derived(() => e.get(t).plane);
+              var E = Jr(), O = e.sibling(e.child(E), 2), Z = e.child(O);
+              F(Z, {
                 label: "Rotation X",
-                onReset: () => w({ rotationX: se.rotationX }),
-                children: (X, Y) => {
-                  var D = On(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => w({ rotationX: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
+                onReset: () => w({ rotationX: ae.rotationX }),
+                children: (D, X) => {
+                  var W = Ur(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => w({ rotationX: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
                   e.remove_input_defaults(V), V.__input = (A) => w({ rotationX: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).rotationX), e.set_value(V, e.get(E).rotationX);
-                  }), e.append(X, D);
+                    e.set_value(P, e.get(q).rotationX), e.set_value(V, e.get(q).rotationX);
+                  }), e.append(D, W);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(Z, 2);
               F(K, {
                 label: "Rotation Y",
-                onReset: () => w({ rotationY: se.rotationY }),
-                children: (X, Y) => {
-                  var D = Ln(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => w({ rotationY: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
+                onReset: () => w({ rotationY: ae.rotationY }),
+                children: (D, X) => {
+                  var W = Vr(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => w({ rotationY: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
                   e.remove_input_defaults(V), V.__input = (A) => w({ rotationY: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).rotationY), e.set_value(V, e.get(E).rotationY);
-                  }), e.append(X, D);
+                    e.set_value(P, e.get(q).rotationY), e.set_value(V, e.get(q).rotationY);
+                  }), e.append(D, W);
                 }
               });
               var H = e.sibling(K, 2);
               F(H, {
                 label: "Rotation Z",
-                onReset: () => w({ rotationZ: se.rotationZ }),
-                children: (X, Y) => {
-                  var D = jn(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => w({ rotationZ: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
+                onReset: () => w({ rotationZ: ae.rotationZ }),
+                children: (D, X) => {
+                  var W = Fr(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => w({ rotationZ: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
                   e.remove_input_defaults(V), V.__input = (A) => w({ rotationZ: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).rotationZ), e.set_value(V, e.get(E).rotationZ);
-                  }), e.append(X, D);
+                    e.set_value(P, e.get(q).rotationZ), e.set_value(V, e.get(q).rotationZ);
+                  }), e.append(D, W);
                 }
               });
               var G = e.sibling(H, 2);
               F(G, {
                 label: "Perspective",
-                onReset: () => w({ depthScale: se.depthScale }),
-                children: (X, Y) => {
-                  var D = qn(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => w({ depthScale: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
+                onReset: () => w({ depthScale: ae.depthScale }),
+                children: (D, X) => {
+                  var W = Kr(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => w({ depthScale: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
                   e.remove_input_defaults(V), V.__input = (A) => w({ depthScale: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).depthScale), e.set_value(V, e.get(E).depthScale);
-                  }), e.append(X, D);
+                    e.set_value(P, e.get(q).depthScale), e.set_value(V, e.get(q).depthScale);
+                  }), e.append(D, W);
                 }
-              }), e.reset(j), e.reset(O), e.append(z, O);
+              }), e.reset(O), e.reset(E), e.append(j, E);
             };
-            e.if(o, (z) => {
-              e.get(t).shape === "plane" && e.get(t).plane && z(c);
+            e.if(i, (j) => {
+              e.get(t).shape === "plane" && e.get(t).plane && j(c);
             });
           }
-          var M = e.sibling(o, 2);
+          var M = e.sibling(i, 2);
           {
-            var N = (z) => {
-              const E = e.derived(() => e.get(t).cylinder);
-              var O = Kn(), j = e.sibling(e.child(O), 2), L = e.child(j);
-              F(L, {
+            var S = (j) => {
+              const q = e.derived(() => e.get(t).cylinder);
+              var E = tn(), O = e.sibling(e.child(E), 2), Z = e.child(O);
+              F(Z, {
                 label: "Diameter",
-                onReset: () => h({ diameter: ce.diameter }),
-                children: (X, Y) => {
-                  var D = An(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => h({ diameter: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
-                  e.remove_input_defaults(V), V.__input = (A) => h({ diameter: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).diameter), e.set_value(V, e.get(E).diameter);
-                  }), e.append(X, D);
+                onReset: () => g({ diameter: ce.diameter }),
+                children: (D, X) => {
+                  var W = Gr(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => g({ diameter: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
+                  e.remove_input_defaults(V), V.__input = (A) => g({ diameter: Number(A.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(P, e.get(q).diameter), e.set_value(V, e.get(q).diameter);
+                  }), e.append(D, W);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(Z, 2);
               F(K, {
                 label: "Perspective",
-                onReset: () => h({ perspective: ce.perspective }),
-                children: (X, Y) => {
-                  var D = Un(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => h({ perspective: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
-                  e.remove_input_defaults(V), V.__input = (A) => h({ perspective: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).perspective ?? 1), e.set_value(V, e.get(E).perspective ?? 1);
-                  }), e.append(X, D);
+                onReset: () => g({ perspective: ce.perspective }),
+                children: (D, X) => {
+                  var W = $r(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => g({ perspective: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
+                  e.remove_input_defaults(V), V.__input = (A) => g({ perspective: Number(A.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(P, e.get(q).perspective ?? 1), e.set_value(V, e.get(q).perspective ?? 1);
+                  }), e.append(D, W);
                 }
               });
               var H = e.sibling(K, 2);
               F(H, {
                 label: "Tilt (X)",
-                onReset: () => h({ rotationX: ce.rotationX }),
-                children: (X, Y) => {
-                  var D = Vn(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => h({ rotationX: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
-                  e.remove_input_defaults(V), V.__input = (A) => h({ rotationX: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).rotationX), e.set_value(V, e.get(E).rotationX);
-                  }), e.append(X, D);
+                onReset: () => g({ rotationX: ce.rotationX }),
+                children: (D, X) => {
+                  var W = Qr(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => g({ rotationX: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
+                  e.remove_input_defaults(V), V.__input = (A) => g({ rotationX: Number(A.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(P, e.get(q).rotationX), e.set_value(V, e.get(q).rotationX);
+                  }), e.append(D, W);
                 }
               });
               var G = e.sibling(H, 2);
               F(G, {
                 label: "Spin (Z)",
-                onReset: () => h({ rotationZ: ce.rotationZ }),
-                children: (X, Y) => {
-                  var D = Fn(), R = e.first_child(D);
-                  e.remove_input_defaults(R), R.__input = (A) => h({ rotationZ: Number(A.currentTarget.value) });
-                  var V = e.sibling(R, 2);
-                  e.remove_input_defaults(V), V.__input = (A) => h({ rotationZ: Number(A.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(R, e.get(E).rotationZ), e.set_value(V, e.get(E).rotationZ);
-                  }), e.append(X, D);
+                onReset: () => g({ rotationZ: ce.rotationZ }),
+                children: (D, X) => {
+                  var W = en(), P = e.first_child(W);
+                  e.remove_input_defaults(P), P.__input = (A) => g({ rotationZ: Number(A.currentTarget.value) });
+                  var V = e.sibling(P, 2);
+                  e.remove_input_defaults(V), V.__input = (A) => g({ rotationZ: Number(A.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(P, e.get(q).rotationZ), e.set_value(V, e.get(q).rotationZ);
+                  }), e.append(D, W);
                 }
-              }), e.reset(j), e.reset(O), e.append(z, O);
+              }), e.reset(O), e.reset(E), e.append(j, E);
             };
-            e.if(M, (z) => {
-              e.get(t).shape === "cylinder" && e.get(t).cylinder && z(N);
+            e.if(M, (j) => {
+              e.get(t).shape === "cylinder" && e.get(t).cylinder && j(S);
             });
           }
-          var B = e.sibling(M, 2);
+          var Y = e.sibling(M, 2);
           {
-            var J = (z) => {
-              const E = e.derived(() => e.get(t).sphere);
-              var O = Qn(), j = e.sibling(e.child(O), 2), L = e.child(j);
-              F(L, {
+            var J = (j) => {
+              const q = e.derived(() => e.get(t).sphere);
+              var E = an(), O = e.sibling(e.child(E), 2), Z = e.child(O);
+              F(Z, {
                 label: "Radius",
-                onReset: () => d({ radius: ke.radius }),
+                onReset: () => u({ radius: ke.radius }),
                 children: (H, G) => {
-                  var X = Jn(), Y = e.first_child(X);
-                  e.remove_input_defaults(Y), Y.__input = (R) => d({ radius: Number(R.currentTarget.value) });
-                  var D = e.sibling(Y, 2);
-                  e.remove_input_defaults(D), D.__input = (R) => d({ radius: Number(R.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(Y, e.get(E).radius), e.set_value(D, e.get(E).radius);
-                  }), e.append(H, X);
+                  var D = rn(), X = e.first_child(D);
+                  e.remove_input_defaults(X), X.__input = (P) => u({ radius: Number(P.currentTarget.value) });
+                  var W = e.sibling(X, 2);
+                  e.remove_input_defaults(W), W.__input = (P) => u({ radius: Number(P.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(X, e.get(q).radius), e.set_value(W, e.get(q).radius);
+                  }), e.append(H, D);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(Z, 2);
               F(K, {
                 label: "Spin (Z)",
-                onReset: () => d({ rotationZ: ke.rotationZ }),
+                onReset: () => u({ rotationZ: ke.rotationZ }),
                 children: (H, G) => {
-                  var X = Gn(), Y = e.first_child(X);
-                  e.remove_input_defaults(Y), Y.__input = (R) => d({ rotationZ: Number(R.currentTarget.value) });
-                  var D = e.sibling(Y, 2);
-                  e.remove_input_defaults(D), D.__input = (R) => d({ rotationZ: Number(R.currentTarget.value) }), e.template_effect(() => {
-                    e.set_value(Y, e.get(E).rotationZ), e.set_value(D, e.get(E).rotationZ);
-                  }), e.append(H, X);
+                  var D = nn(), X = e.first_child(D);
+                  e.remove_input_defaults(X), X.__input = (P) => u({ rotationZ: Number(P.currentTarget.value) });
+                  var W = e.sibling(X, 2);
+                  e.remove_input_defaults(W), W.__input = (P) => u({ rotationZ: Number(P.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(X, e.get(q).rotationZ), e.set_value(W, e.get(q).rotationZ);
+                  }), e.append(H, D);
                 }
-              }), e.reset(j), e.reset(O), e.append(z, O);
+              }), e.reset(O), e.reset(E), e.append(j, E);
             };
-            e.if(B, (z) => {
-              e.get(t).shape === "sphere" && e.get(t).sphere && z(J);
+            e.if(Y, (j) => {
+              e.get(t).shape === "sphere" && e.get(t).sphere && j(J);
             });
           }
-          var Z = e.sibling(B, 2);
+          var B = e.sibling(Y, 2);
           {
-            var U = (z) => {
-              var E = na(), O = e.sibling(e.child(E), 2), j = e.child(O);
-              F(j, {
+            var U = (j) => {
+              var q = cn(), E = e.sibling(e.child(q), 2), O = e.child(E);
+              F(O, {
                 label: "Show Grid/Bounds",
                 onReset: () => f({ showBounds: ve.showBounds }),
                 children: (H, G) => {
-                  var X = $n();
-                  e.remove_input_defaults(X), X.__change = (Y) => f({ showBounds: Y.currentTarget.checked }), e.template_effect(() => e.set_checked(X, e.get(n).showBounds)), e.append(H, X);
+                  var D = sn();
+                  e.remove_input_defaults(D), D.__change = (X) => f({ showBounds: X.currentTarget.checked }), e.template_effect(() => e.set_checked(D, e.get(r).showBounds)), e.append(H, D);
                 }
               });
-              var L = e.sibling(j, 2);
-              F(L, {
+              var Z = e.sibling(O, 2);
+              F(Z, {
                 label: "Depth Shader",
                 onReset: () => f({ showDepthVis: ve.showDepthVis }),
                 children: (H, G) => {
-                  var X = ea();
-                  e.remove_input_defaults(X), X.__change = (Y) => f({ showDepthVis: Y.currentTarget.checked }), e.template_effect(() => e.set_checked(X, e.get(n).showDepthVis)), e.append(H, X);
+                  var D = on();
+                  e.remove_input_defaults(D), D.__change = (X) => f({ showDepthVis: X.currentTarget.checked }), e.template_effect(() => e.set_checked(D, e.get(r).showDepthVis)), e.append(H, D);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(Z, 2);
               F(K, {
                 label: "Crosshair",
                 onReset: () => f({ showCrosshair: ve.showCrosshair }),
                 children: (H, G) => {
-                  var X = ta();
-                  e.remove_input_defaults(X), X.__change = (Y) => f({ showCrosshair: Y.currentTarget.checked }), e.template_effect(() => e.set_checked(X, e.get(n).showCrosshair)), e.append(H, X);
+                  var D = ln();
+                  e.remove_input_defaults(D), D.__change = (X) => f({ showCrosshair: X.currentTarget.checked }), e.template_effect(() => e.set_checked(D, e.get(r).showCrosshair)), e.append(H, D);
                 }
-              }), e.reset(O), e.reset(E), e.append(z, E);
+              }), e.reset(E), e.reset(q), e.append(j, q);
             };
-            e.if(Z, (z) => {
-              e.get(t).shape !== "none" && z(U);
+            e.if(B, (j) => {
+              e.get(t).shape !== "none" && j(U);
             });
           }
-          e.append(k, C);
+          e.append(k, I);
         };
-        e.if(I, (k) => {
-          e.get(t).enabled && k(b);
+        e.if(N, (k) => {
+          e.get(t).enabled && k(_);
         });
       }
       e.append(T, y);
@@ -1698,783 +1733,806 @@ function ia(r, a) {
   }), e.pop();
 }
 e.delegate(["change", "input"]);
-var ra = 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), oa = 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), la = 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), ca = 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), ua = 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), da = 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), pa = 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), ma = 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), va = 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), fa = 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), ha = 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), _a = 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>');
-function ga(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "effect", 3, ee);
-  function s(u) {
-    a.onChange({ ...t(), ...u });
+var vn = 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), fn = 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), gn = 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), hn = 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), bn = 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), _n = 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), yn = 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), wn = 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), xn = 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), kn = 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), Mn = 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), Tn = 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 zn = {
+  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 Sn(o, n) {
+  e.push(n, !0), e.append_styles(o, zn);
+  let t = e.prop(n, "effect", 3, ee);
+  function a(d) {
+    n.onChange({ ...t(), ...d });
   }
-  var n = _a(), i = e.sibling(e.child(n), 2), l = e.child(i), f = e.sibling(e.child(l), 2), h = e.child(f);
-  F(h, {
+  var r = Tn(), s = e.sibling(e.child(r), 2), l = e.child(s), f = e.sibling(e.child(l), 2), g = e.child(f);
+  F(g, {
     label: "Brightness",
-    onReset: () => s({ brightness: ee.brightness }),
-    children: (u, p) => {
-      var o = ra(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ brightness: Number(N.currentTarget.value) });
+    onReset: () => a({ brightness: ee.brightness }),
+    children: (d, p) => {
+      var i = vn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ brightness: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ brightness: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ brightness: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().brightness), e.set_value(M, t().brightness);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var w = e.sibling(h, 2);
+  var w = e.sibling(g, 2);
   F(w, {
     label: "Contrast",
-    onReset: () => s({ contrast: ee.contrast }),
-    children: (u, p) => {
-      var o = oa(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ contrast: Number(N.currentTarget.value) });
+    onReset: () => a({ contrast: ee.contrast }),
+    children: (d, p) => {
+      var i = fn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ contrast: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ contrast: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ contrast: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().contrast), e.set_value(M, t().contrast);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var d = e.sibling(w, 2);
-  F(d, {
+  var u = e.sibling(w, 2);
+  F(u, {
     label: "Saturation",
-    onReset: () => s({ saturation: ee.saturation }),
-    children: (u, p) => {
-      var o = la(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ saturation: Number(N.currentTarget.value) });
+    onReset: () => a({ saturation: ee.saturation }),
+    children: (d, p) => {
+      var i = gn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ saturation: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ saturation: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ saturation: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().saturation), e.set_value(M, t().saturation);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var _ = e.sibling(d, 2);
-  F(_, {
+  var h = e.sibling(u, 2);
+  F(h, {
     label: "Hue (°)",
-    onReset: () => s({ hue: ee.hue }),
-    children: (u, p) => {
-      var o = ca(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ hue: Number(N.currentTarget.value) });
+    onReset: () => a({ hue: ee.hue }),
+    children: (d, p) => {
+      var i = hn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ hue: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ hue: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ hue: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().hue), e.set_value(M, t().hue);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   }), e.reset(f), e.reset(l);
   var m = e.sibling(l, 2), T = e.sibling(e.child(m), 2), v = e.child(T);
   F(v, {
     label: "Exposure",
-    onReset: () => s({ exposure: ee.exposure }),
-    children: (u, p) => {
-      var o = ua(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ exposure: Number(N.currentTarget.value) });
+    onReset: () => a({ exposure: ee.exposure }),
+    children: (d, p) => {
+      var i = bn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ exposure: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ exposure: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ exposure: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().exposure), e.set_value(M, t().exposure);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
   var y = e.sibling(v, 2);
   F(y, {
     label: "Gamma",
-    onReset: () => s({ gamma: ee.gamma }),
-    children: (u, p) => {
-      var o = da(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ gamma: Number(N.currentTarget.value) });
+    onReset: () => a({ gamma: ee.gamma }),
+    children: (d, p) => {
+      var i = _n(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ gamma: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ gamma: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ gamma: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().gamma), e.set_value(M, t().gamma);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
   var x = e.sibling(y, 2);
   F(x, {
     label: "Shadows",
-    onReset: () => s({ shadows: ee.shadows }),
-    children: (u, p) => {
-      var o = pa(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ shadows: Number(N.currentTarget.value) });
+    onReset: () => a({ shadows: ee.shadows }),
+    children: (d, p) => {
+      var i = yn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ shadows: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ shadows: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ shadows: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().shadows), e.set_value(M, t().shadows);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var I = e.sibling(x, 2);
-  F(I, {
+  var N = e.sibling(x, 2);
+  F(N, {
     label: "Highlights",
-    onReset: () => s({ highlights: ee.highlights }),
-    children: (u, p) => {
-      var o = ma(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ highlights: Number(N.currentTarget.value) });
+    onReset: () => a({ highlights: ee.highlights }),
+    children: (d, p) => {
+      var i = wn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ highlights: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ highlights: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ highlights: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().highlights), e.set_value(M, t().highlights);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   }), e.reset(T), e.reset(m);
-  var b = e.sibling(m, 2), k = e.sibling(e.child(b), 2), C = e.child(k);
-  F(C, {
+  var _ = e.sibling(m, 2), k = e.sibling(e.child(_), 2), I = e.child(k);
+  F(I, {
     label: "Vibrance",
-    onReset: () => s({ vibrance: ee.vibrance }),
-    children: (u, p) => {
-      var o = va(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ vibrance: Number(N.currentTarget.value) });
+    onReset: () => a({ vibrance: ee.vibrance }),
+    children: (d, p) => {
+      var i = xn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ vibrance: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ vibrance: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ vibrance: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().vibrance), e.set_value(M, t().vibrance);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var S = e.sibling(C, 2);
-  F(S, {
+  var z = e.sibling(I, 2);
+  F(z, {
     label: "Temperature",
-    onReset: () => s({ temperature: ee.temperature }),
-    children: (u, p) => {
-      var o = fa(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ temperature: Number(N.currentTarget.value) });
+    onReset: () => a({ temperature: ee.temperature }),
+    children: (d, p) => {
+      var i = kn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ temperature: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ temperature: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ temperature: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().temperature), e.set_value(M, t().temperature);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var g = e.sibling(S, 2);
-  F(g, {
+  var b = e.sibling(z, 2);
+  F(b, {
     label: "Tint",
-    onReset: () => s({ tint: ee.tint }),
-    children: (u, p) => {
-      var o = ha(), c = e.first_child(o);
-      e.remove_input_defaults(c), c.__input = (N) => s({ tint: Number(N.currentTarget.value) });
+    onReset: () => a({ tint: ee.tint }),
+    children: (d, p) => {
+      var i = Mn(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (S) => a({ tint: Number(S.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ tint: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (S) => a({ tint: Number(S.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().tint), e.set_value(M, t().tint);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
-  }), e.reset(k), e.reset(b), e.reset(i), e.reset(n), e.append(r, n), e.pop();
+  }), e.reset(k), e.reset(_), e.reset(s), e.reset(r), e.append(o, r), e.pop();
 }
 e.delegate(["input"]);
-var ba = 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>'), ya = 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>');
-function wa(r, a) {
-  e.push(a, !0);
-  const t = e.derived(() => a.layer.effects.find((c) => c.type === "resize") ?? fe), s = e.derived(() => a.layer.effects.find((c) => c.type === "restyle") ?? ee), n = e.derived(() => a.layer.effects.find((o) => o.type === "warp"));
-  function i(o) {
-    const c = a.layer.effects.filter((M) => M.type !== "resize");
-    a.onEffectsChange([...c, o]);
-  }
-  function l(o) {
-    const c = a.layer.effects.filter((M) => M.type !== "restyle");
-    a.onEffectsChange([...c, o]);
-  }
-  function f(o) {
-    const c = a.layer.effects.filter((M) => M.type !== "warp");
-    o ? a.onEffectsChange([...c, o]) : a.onEffectsChange(c);
-  }
-  var h = ya(), w = e.child(h), d = e.child(w);
-  d.__click = () => a.onVisibilityChange(!a.layer.visible);
-  var _ = e.child(d);
+var Nn = 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>'), In = 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 Cn = {
+  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 Pn(o, n) {
+  e.push(n, !0), e.append_styles(o, Cn);
+  const t = e.derived(() => n.layer.effects.find((c) => c.type === "resize") ?? fe), a = e.derived(() => n.layer.effects.find((c) => c.type === "restyle") ?? ee), r = e.derived(() => n.layer.effects.find((i) => i.type === "warp"));
+  function s(i) {
+    const c = n.layer.effects.filter((M) => M.type !== "resize");
+    n.onEffectsChange([...c, i]);
+  }
+  function l(i) {
+    const c = n.layer.effects.filter((M) => M.type !== "restyle");
+    n.onEffectsChange([...c, i]);
+  }
+  function f(i) {
+    const c = n.layer.effects.filter((M) => M.type !== "warp");
+    i ? n.onEffectsChange([...c, i]) : n.onEffectsChange(c);
+  }
+  var g = In(), w = e.child(g), u = e.child(w);
+  u.__click = () => n.onVisibilityChange(!n.layer.visible);
+  var h = e.child(u);
   {
-    var m = (o) => {
-      on(o, {});
-    }, T = (o) => {
-      cn(o, {});
+    var m = (i) => {
+      cr(i, {});
+    }, T = (i) => {
+      ur(i, {});
     };
-    e.if(_, (o) => {
-      a.layer.visible ? o(m) : o(T, !1);
+    e.if(h, (i) => {
+      n.layer.visible ? i(m) : i(T, !1);
     });
   }
-  e.reset(d);
-  var v = e.sibling(d, 2), y = e.child(v);
+  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(...o) {
-    a.onDelete?.apply(this, o);
+  x.__click = function(...i) {
+    n.onDelete?.apply(this, i);
   };
-  var I = e.child(x);
-  Ue(I, {}), e.reset(x), e.reset(w);
-  var b = e.sibling(w, 2);
+  var N = e.child(x);
+  Ue(N, {}), e.reset(x), e.reset(w);
+  var _ = e.sibling(w, 2);
   {
-    var k = (o) => {
-      var c = ba(), M = e.child(c), N = e.sibling(M, 2);
-      e.remove_input_defaults(N), N.__input = (B) => a.onNameChange(B.currentTarget.value), e.next(2), e.reset(c), e.template_effect(() => {
-        e.set_attribute(M, "for", `layer-name-${a.layer.id ?? ""}`), e.set_attribute(N, "id", `layer-name-${a.layer.id ?? ""}`), e.set_value(N, a.layer.name || "");
-      }), e.append(o, c);
+    var k = (i) => {
+      var c = Nn(), M = e.child(c), S = e.sibling(M, 2);
+      e.remove_input_defaults(S), S.__input = (Y) => n.onNameChange(Y.currentTarget.value), e.next(2), e.reset(c), e.template_effect(() => {
+        e.set_attribute(M, "for", `layer-name-${n.layer.id ?? ""}`), e.set_attribute(S, "id", `layer-name-${n.layer.id ?? ""}`), e.set_value(S, n.layer.name || "");
+      }), e.append(i, c);
     };
-    e.if(b, (o) => {
-      a.onNameChange && o(k);
+    e.if(_, (i) => {
+      n.onNameChange && i(k);
     });
   }
-  var C = e.sibling(b, 2), S = e.child(C);
-  In(S, {
+  var I = e.sibling(_, 2), z = e.child(I);
+  jr(z, {
     get effect() {
       return e.get(t);
     },
-    onChange: i
+    onChange: s
   });
-  var g = e.sibling(S, 2);
-  ga(g, {
+  var b = e.sibling(z, 2);
+  Sn(b, {
     get effect() {
-      return e.get(s);
+      return e.get(a);
     },
     onChange: l
   });
-  var u = e.sibling(g, 2);
-  yn(u, {
+  var d = e.sibling(b, 2);
+  Mr(d, {
     get transform() {
-      return a.layer.transform;
+      return n.layer.transform;
     },
     get opacity() {
-      return a.layer.opacity;
+      return n.layer.opacity;
     },
     get canvasWidth() {
-      return a.canvasWidth;
+      return n.canvasWidth;
     },
     get canvasHeight() {
-      return a.canvasHeight;
+      return n.canvasHeight;
     },
     get onTransformChange() {
-      return a.onTransformChange;
+      return n.onTransformChange;
     },
     get onOpacityChange() {
-      return a.onOpacityChange;
+      return n.onOpacityChange;
     },
     get layerId() {
-      return a.layer.id;
+      return n.layer.id;
     }
   });
-  var p = e.sibling(u, 2);
-  ia(p, {
+  var p = e.sibling(d, 2);
+  mn(p, {
     get effect() {
-      return e.get(n);
+      return e.get(r);
     },
     onChange: f
-  }), e.reset(C), e.reset(h), e.template_effect(() => {
-    e.set_attribute(d, "aria-label", a.layer.visible ? "Hide layer" : "Show layer"), e.set_attribute(y, "src", a.layer.src);
-  }), e.append(r, h), e.pop();
+  }), e.reset(I), e.reset(g), e.template_effect(() => {
+    e.set_attribute(u, "aria-label", n.layer.visible ? "Hide layer" : "Show layer"), e.set_attribute(y, "src", n.layer.src);
+  }), e.append(o, g), e.pop();
 }
 e.delegate(["click", "input"]);
-var xa = e.from_html('<button type="button" class="modal-backdrop svelte-ta60gp" aria-label="Close modal"></button> <div><!></div>', 1);
-function ka(r, a) {
-  e.push(a, !0);
-  let t = !1, s = !1;
-  const n = St && /iPhone|iPad|iPod/.test(navigator.userAgent) && !("MSStream" in window);
-  function i(T) {
+var Rn = e.from_html('<button type="button" class="modal-backdrop svelte-ta60gp" aria-label="Close modal"></button> <div><!></div>', 1);
+const jn = {
+  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 Wn(o, n) {
+  e.push(n, !0), e.append_styles(o, jn);
+  let t = !1, a = !1;
+  const r = zt && /iPhone|iPad|iPod/.test(navigator.userAgent) && !("MSStream" in window);
+  function s(T) {
     T.key === "Escape" && (T.preventDefault(), f());
   }
   function l() {
-    t && (t = !1, a.onclose());
+    t && (t = !1, n.onclose());
   }
   function f() {
-    t && (t = !1, history.back()), a.onclose();
+    t && (t = !1, history.back()), n.onclose();
   }
   Mt(() => {
-    s = !0;
-  }), Te(() => (n || (document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden"), Tt("", { modal: !0 }), t = !0, () => {
-    n || (document.documentElement.style.overflow = "", document.body.style.overflow = ""), t && !s && history.back();
+    a = !0;
+  }), Te(() => (r || (document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden"), Tt("", { modal: !0 }), t = !0, () => {
+    r || (document.documentElement.style.overflow = "", document.body.style.overflow = ""), t && !a && history.back();
   }));
-  var h = xa();
-  e.event("keydown", e.window, i), e.event("popstate", e.window, l);
-  var w = e.first_child(h);
+  var g = Rn();
+  e.event("keydown", e.window, s), e.event("popstate", e.window, l);
+  var w = e.first_child(g);
   w.__click = f;
-  var d = e.sibling(w, 2);
-  let _;
-  var m = e.child(d);
-  e.snippet(m, () => a.children), e.reset(d), e.template_effect(() => _ = e.set_class(d, 1, "modal-content svelte-ta60gp", null, _, { "ios-safari": n })), e.transition(7, w, () => Qe, () => ({ duration: 100 })), e.transition(7, d, () => Qe, () => ({ duration: 100 })), e.append(r, h), e.pop();
+  var u = e.sibling(w, 2);
+  let h;
+  var m = e.child(u);
+  e.snippet(m, () => n.children), e.reset(u), e.template_effect(() => h = e.set_class(u, 1, "modal-content svelte-ta60gp", null, h, { "ios-safari": r })), e.transition(7, w, () => $e, () => ({ duration: 100 })), e.transition(7, u, () => $e, () => ({ duration: 100 })), e.append(o, g), e.pop();
 }
 e.delegate(["click"]);
-var Ma = 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(r, a) {
-  let t = e.prop(a, "fontSize", 3, "1em"), s = e.prop(a, "color", 3, "currentColor");
-  var n = Ma();
+var Dn = 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, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = Dn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(r, `font-size: ${t() ?? ""};`), e.set_attribute(r, "stroke", a());
+  }), e.append(o, r);
 }
-const Pe = "product-mockups", it = "product-mockups-current";
-function Ta(r, a = Pe) {
+const Ce = "product-mockups", st = "product-mockups-current";
+function Xn(o, n = Ce) {
   try {
-    const t = Re(), s = t.findIndex((n) => n.id === r.id);
-    return s >= 0 ? t[s] = { ...r, updatedAt: Date.now() } : t.push({ ...r, updatedAt: Date.now() }), localStorage.setItem(a, JSON.stringify(t)), !0;
+    const t = Pe(), a = t.findIndex((r) => r.id === o.id);
+    return a >= 0 ? t[a] = { ...o, updatedAt: Date.now() } : t.push({ ...o, updatedAt: Date.now() }), localStorage.setItem(n, JSON.stringify(t)), !0;
   } catch (t) {
     return console.error("Failed to save mockup:", t), !1;
   }
 }
-function Re(r = Pe) {
+function Pe(o = Ce) {
   try {
-    const a = localStorage.getItem(r);
-    return a ? JSON.parse(a).map((s) => {
-      const n = s.composition ?? s.canvas ?? { ...st };
+    const n = localStorage.getItem(o);
+    return n ? JSON.parse(n).map((a) => {
+      const r = a.composition ?? a.canvas ?? { ...at };
       return {
-        ...s,
-        view: s.view ?? { ...Ce },
+        ...a,
+        view: a.view ?? { ...Ie },
         composition: {
-          ...n,
-          effects: n.effects ?? [],
-          layers: n.layers?.map((i) => ({
-            ...i,
-            effects: i.effects ?? []
+          ...r,
+          effects: r.effects ?? [],
+          layers: r.layers?.map((s) => ({
+            ...s,
+            effects: s.effects ?? []
           })) ?? []
         }
       };
     }) : [];
-  } catch (a) {
-    return console.error("Failed to load mockups:", a), [];
+  } catch (n) {
+    return console.error("Failed to load mockups:", n), [];
   }
 }
-function Sa(r, a = Pe) {
-  return Re(a).find((s) => s.id === r) ?? null;
+function Yn(o, n = Ce) {
+  return Pe(n).find((a) => a.id === o) ?? null;
 }
-function Na(r, a = Pe) {
+function qn(o, n = Ce) {
   try {
-    const s = Re(a).filter((n) => n.id !== r);
-    return localStorage.setItem(a, JSON.stringify(s)), !0;
+    const a = Pe(n).filter((r) => r.id !== o);
+    return localStorage.setItem(n, JSON.stringify(a)), !0;
   } catch (t) {
     return console.error("Failed to delete mockup:", t), !1;
   }
 }
-function je(r, a = it) {
+function Oe(o, n = st) {
   try {
-    r ? localStorage.setItem(a, r) : localStorage.removeItem(a);
+    o ? localStorage.setItem(n, o) : localStorage.removeItem(n);
   } catch (t) {
     console.error("Failed to save current mockup ID:", t);
   }
 }
-function Ia(r = it) {
+function Bn(o = st) {
   try {
-    return localStorage.getItem(r);
+    return localStorage.getItem(o);
   } catch {
     return null;
   }
 }
-function tt(r = "Untitled Mockup") {
+function tt(o = "Untitled Mockup") {
   return {
     id: crypto.randomUUID(),
-    name: r,
-    composition: { ...st },
-    view: { ...Ce },
+    name: o,
+    composition: { ...at },
+    view: { ...Ie },
     createdAt: Date.now(),
     updatedAt: Date.now()
   };
 }
-var Ca = 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>'), Pa = 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>'), Ra = e.from_html('<div class="mockup-grid svelte-33nadc"></div>'), Wa = 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>');
-function za(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "storageKey", 3, "product-mockups"), s = e.state(e.proxy([]));
-  function n() {
-    e.set(s, Re(t()), !0);
+var En = 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>'), Zn = 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>'), On = e.from_html('<div class="mockup-grid svelte-33nadc"></div>'), Ln = 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 Hn = {
+  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 An(o, n) {
+  e.push(n, !0), e.append_styles(o, Hn);
+  let t = e.prop(n, "storageKey", 3, "product-mockups"), a = e.state(e.proxy([]));
+  function r() {
+    e.set(a, Pe(t()), !0);
   }
   Te(() => {
-    n();
+    r();
   });
-  function i(d) {
-    a.onSelect(d), a.onclose();
+  function s(u) {
+    n.onSelect(u), n.onclose();
   }
   function l() {
-    a.onNew(), a.onclose();
+    n.onNew(), n.onclose();
   }
-  function f(d, _) {
-    d.stopPropagation(), confirm("Are you sure you want to delete this mockup?") && (Na(_, t()), n());
+  function f(u, h) {
+    u.stopPropagation(), confirm("Are you sure you want to delete this mockup?") && (qn(h, t()), r());
   }
-  async function h(d, _) {
-    d.stopPropagation();
+  async function g(u, h) {
+    u.stopPropagation();
     try {
-      const m = JSON.stringify(_, null, 2);
+      const m = JSON.stringify(h, null, 2);
       await navigator.clipboard.writeText(m);
     } catch (m) {
       console.error("Failed to copy config:", m);
     }
   }
-  function w(d) {
-    const _ = new Date(d);
-    return _.toLocaleDateString() + " " + _.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  function w(u) {
+    const h = new Date(u);
+    return h.toLocaleDateString() + " " + h.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   }
-  ka(r, {
+  Wn(o, {
     get onclose() {
-      return a.onclose;
+      return n.onclose;
     },
-    children: (d, _) => {
-      var m = Wa(), T = e.child(m), v = e.sibling(e.child(T), 2);
+    children: (u, h) => {
+      var m = Ln(), T = e.child(m), 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);
       {
-        var I = (k) => {
-          var C = Ca(), S = e.sibling(e.child(C), 2);
-          S.__click = l;
-          var g = e.child(S);
-          Me(g, {}), e.next(), e.reset(S), e.reset(C), e.append(k, C);
-        }, b = (k) => {
-          var C = Ra();
-          e.each(C, 21, () => e.get(s), (S) => S.id, (S, g) => {
-            var u = Pa();
+        var N = (k) => {
+          var I = En(), z = e.sibling(e.child(I), 2);
+          z.__click = l;
+          var b = e.child(z);
+          Me(b, {}), e.next(), e.reset(z), e.reset(I), e.append(k, I);
+        }, _ = (k) => {
+          var I = On();
+          e.each(I, 21, () => e.get(a), (z) => z.id, (z, b) => {
+            var d = Zn();
             let p;
-            u.__click = () => i(e.get(g)), u.__keydown = (D) => D.key === "Enter" && i(e.get(g));
-            var o = e.child(u), c = e.child(o), M = e.child(c, !0);
+            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 N = e.sibling(c, 2), B = e.child(N);
-            B.__click = (D) => h(D, e.get(g));
-            var J = e.sibling(B, 2);
-            J.__click = (D) => f(D, e.get(g).id);
-            var Z = e.child(J);
-            Ue(Z, {}), e.reset(J), e.reset(N), e.reset(o);
-            var U = e.sibling(o, 2), z = e.child(U), E = e.sibling(e.child(z), 2), O = e.child(E, !0);
-            e.reset(E), e.reset(z);
-            var j = e.sibling(z, 2), L = e.sibling(e.child(j), 2), K = e.child(L);
-            e.reset(L), e.reset(j), e.reset(U);
-            var H = e.sibling(U, 2), G = e.child(H), X = e.sibling(e.child(G), 2), Y = e.child(X, !0);
-            e.reset(X), e.reset(G), e.reset(H), e.reset(u), e.template_effect(
-              (D) => {
-                p = e.set_class(u, 1, "mockup-card svelte-33nadc", null, p, { current: e.get(g).id === a.currentMockupId }), e.set_text(M, e.get(g).name), e.set_text(O, e.get(g).composition.layers.length), e.set_text(K, `${e.get(g).composition.width ?? ""} × ${e.get(g).composition.height ?? ""}`), e.set_text(Y, D);
+            var S = e.sibling(c, 2), Y = e.child(S);
+            Y.__click = (W) => g(W, e.get(b));
+            var J = e.sibling(Y, 2);
+            J.__click = (W) => f(W, e.get(b).id);
+            var B = e.child(J);
+            Ue(B, {}), e.reset(J), e.reset(S), e.reset(i);
+            var U = e.sibling(i, 2), j = e.child(U), q = e.sibling(e.child(j), 2), E = e.child(q, !0);
+            e.reset(q), e.reset(j);
+            var O = e.sibling(j, 2), Z = e.sibling(e.child(O), 2), K = e.child(Z);
+            e.reset(Z), e.reset(O), e.reset(U);
+            var H = e.sibling(U, 2), G = e.child(H), D = e.sibling(e.child(G), 2), X = e.child(D, !0);
+            e.reset(D), e.reset(G), e.reset(H), e.reset(d), e.template_effect(
+              (W) => {
+                p = e.set_class(d, 1, "mockup-card svelte-33nadc", null, p, { current: e.get(b).id === n.currentMockupId }), e.set_text(M, e.get(b).name), e.set_text(E, e.get(b).composition.layers.length), e.set_text(K, `${e.get(b).composition.width ?? ""} × ${e.get(b).composition.height ?? ""}`), e.set_text(X, W);
               },
-              [() => w(e.get(g).updatedAt)]
-            ), e.append(S, u);
-          }), e.reset(C), e.append(k, C);
+              [() => w(e.get(b).updatedAt)]
+            ), e.append(z, d);
+          }), e.reset(I), e.append(k, I);
         };
         e.if(x, (k) => {
-          e.get(s).length === 0 ? k(I) : k(b, !1);
+          e.get(a).length === 0 ? k(N) : k(_, !1);
         });
       }
-      e.reset(m), e.append(d, m);
+      e.reset(m), e.append(u, m);
     },
     $$slots: { default: !0 }
   }), e.pop();
 }
 e.delegate(["click", "keydown"]);
-var Da = 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 nt(r, a) {
-  let t = e.prop(a, "fontSize", 3, "1em"), s = e.prop(a, "color", 3, "currentColor");
-  var n = Da();
+var Un = 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, n) {
+  let t = e.prop(n, "fontSize", 3, "1em"), a = e.prop(n, "color", 3, "currentColor");
+  var r = Un();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""}; ${(a.rotate && `rotate: ${a.rotate};`) ?? ""}`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(r, `font-size: ${t() ?? ""}; ${(n.rotate && `rotate: ${n.rotate};`) ?? ""}`), e.set_attribute(r, "stroke", a());
+  }), e.append(o, r);
 }
-const Xa = "product-mockups", Ya = "product-mockups-current";
-var Ba = e.from_html('<header class="header-logos svelte-w47swm"><!></header>'), Ea = 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>'), Za = e.from_html('<div class="no-layers svelte-w47swm">No layers yet. Add an image to get started.</div>'), Oa = e.from_html('<code class="layer-key-badge svelte-w47swm"> </code>'), La = 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>'), ja = e.from_html('<div class="layers-list svelte-w47swm"></div>'), qa = e.from_html('<div class="canvas-header svelte-w47swm"><!></div>'), Ha = 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>');
-function Ga(r, a) {
-  e.push(a, !0);
-  let t = e.prop(a, "storageKey", 3, Xa), s = e.prop(a, "currentMockupKey", 3, Ya), n = e.state(e.proxy(tt())), i = e.state(""), l = e.state(null), f = e.state(""), h = e.state(!1), w = e.state(!1), d = null;
-  e.derived(() => e.get(l) ? e.get(n).composition.layers.find((P) => P.id === e.get(l)) ?? null : null);
-  function _(P) {
-    const W = {
+const Vn = "product-mockups", Fn = "product-mockups-current";
+var Kn = e.from_html('<header class="header-logos svelte-w47swm"><!></header>'), Jn = 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>'), Gn = e.from_html('<div class="no-layers svelte-w47swm">No layers yet. Add an image to get started.</div>'), $n = e.from_html('<code class="layer-key-badge svelte-w47swm"> </code>'), Qn = 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>'), ea = e.from_html('<div class="layers-list svelte-w47swm"></div>'), ta = e.from_html('<div class="canvas-header svelte-w47swm"><!></div>'), ra = 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 na = {
+  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 da(o, n) {
+  e.push(n, !0), e.append_styles(o, na);
+  let t = e.prop(n, "storageKey", 3, Vn), a = e.prop(n, "currentMockupKey", 3, Fn), r = e.state(e.proxy(tt())), s = e.state(""), l = e.state(null), f = e.state(""), g = e.state(!1), w = e.state(!1), u = null;
+  e.derived(() => e.get(l) ? e.get(r).composition.layers.find((C) => C.id === e.get(l)) ?? null : null);
+  function h(C) {
+    const R = {
       id: crypto.randomUUID(),
-      src: P,
+      src: C,
       ...Qt,
       effects: [{ ...fe }],
       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(W), e.set(l, W.id, !0), p();
+    e.get(r).composition.layers.push(R), e.set(l, R.id, !0), p();
   }
   function m() {
-    const P = e.get(f).trim();
-    P && (_(P), e.set(f, ""), e.set(h, !1));
-  }
-  function T(P) {
-    const W = P.currentTarget, q = W.files?.[0];
-    if (q) {
-      const Q = new FileReader();
-      Q.onload = (ne) => {
-        const $ = ne.target?.result;
-        typeof $ == "string" && _($);
-      }, Q.readAsDataURL(q);
+    const C = e.get(f).trim();
+    C && (h(C), e.set(f, ""), e.set(g, !1));
+  }
+  function T(C) {
+    const R = C.currentTarget, L = R.files?.[0];
+    if (L) {
+      const $ = new FileReader();
+      $.onload = (re) => {
+        const Q = re.target?.result;
+        typeof Q == "string" && h(Q);
+      }, $.readAsDataURL(L);
     }
-    W.value = "";
+    R.value = "";
   }
-  function v(P) {
-    e.set(l, P, !0);
+  function v(C) {
+    e.set(l, C, !0);
   }
-  function y(P, W) {
-    const q = e.get(n).composition.layers.find((Q) => Q.id === P);
-    q && (q.transform = W, p());
+  function y(C, R) {
+    const L = e.get(r).composition.layers.find(($) => $.id === C);
+    L && (L.transform = R, p());
   }
-  function x(P, W) {
-    const q = e.get(n).composition.layers.find((Q) => Q.id === P);
-    q && (q.opacity = W, p());
+  function x(C, R) {
+    const L = e.get(r).composition.layers.find(($) => $.id === C);
+    L && (L.opacity = R, p());
   }
-  function I(P, W) {
-    const q = e.get(n).composition.layers.find((Q) => Q.id === P);
-    q && (q.visible = W, p());
+  function N(C, R) {
+    const L = e.get(r).composition.layers.find(($) => $.id === C);
+    L && (L.visible = R, p());
   }
-  function b(P, W) {
-    const q = e.get(n).composition.layers.find((Q) => Q.id === P);
-    q && (q.effects = W, p());
+  function _(C, R) {
+    const L = e.get(r).composition.layers.find(($) => $.id === C);
+    L && (L.effects = R, p());
   }
-  function k(P, W) {
-    const q = e.get(n).composition.layers.find((Q) => Q.id === P);
-    q && (q.name = W.trim() || void 0, p());
+  function k(C, R) {
+    const L = e.get(r).composition.layers.find(($) => $.id === C);
+    L && (L.name = R.trim() || void 0, p());
   }
-  function C(P) {
-    e.get(n).composition.layers = e.get(n).composition.layers.filter((W) => W.id !== P), e.get(l) === P && e.set(l, null), p();
+  function I(C) {
+    e.get(r).composition.layers = e.get(r).composition.layers.filter((R) => R.id !== C), e.get(l) === C && e.set(l, null), p();
   }
-  function S(P) {
-    const W = e.get(n).composition.layers.findIndex((q) => q.id === P);
-    if (W > 0) {
-      const q = [...e.get(n).composition.layers];
-      [q[W - 1], q[W]] = [q[W], q[W - 1]], e.get(n).composition.layers = q, p();
+  function z(C) {
+    const R = e.get(r).composition.layers.findIndex((L) => L.id === C);
+    if (R > 0) {
+      const L = [...e.get(r).composition.layers];
+      [L[R - 1], L[R]] = [L[R], L[R - 1]], e.get(r).composition.layers = L, p();
     }
   }
-  function g(P) {
-    const W = e.get(n).composition.layers.findIndex((q) => q.id === P);
-    if (W >= 0 && W < e.get(n).composition.layers.length - 1) {
-      const q = [...e.get(n).composition.layers];
-      [q[W], q[W + 1]] = [q[W + 1], q[W]], e.get(n).composition.layers = q, p();
+  function b(C) {
+    const R = e.get(r).composition.layers.findIndex((L) => L.id === C);
+    if (R >= 0 && R < e.get(r).composition.layers.length - 1) {
+      const L = [...e.get(r).composition.layers];
+      [L[R], L[R + 1]] = [L[R + 1], L[R]], e.get(r).composition.layers = L, p();
     }
   }
-  function u(P, W) {
-    e.get(n).composition.width = P, e.get(n).composition.height = W, p();
+  function d(C, R) {
+    e.get(r).composition.width = C, e.get(r).composition.height = R, p();
   }
   function p() {
-    d && clearTimeout(d), d = setTimeout(
+    u && clearTimeout(u), u = setTimeout(
       () => {
-        o();
+        i();
       },
       500
     );
   }
-  function o() {
-    e.get(n).name = e.get(i) || "Untitled Mockup", e.get(n).updatedAt = Date.now(), Ta(e.get(n), t()), je(e.get(n).id, s());
+  function i() {
+    e.get(r).name = e.get(s) || "Untitled Mockup", e.get(r).updatedAt = Date.now(), Xn(e.get(r), t()), Oe(e.get(r).id, a());
   }
   function c() {
-    o();
-    const P = tt();
-    e.set(n, P, !0), e.set(i, P.name, !0), je(null, s());
+    i();
+    const C = tt();
+    e.set(r, C, !0), e.set(s, C.name, !0), Oe(null, a());
   }
-  function M(P) {
-    o(), e.set(n, P, !0), e.set(i, P.name, !0), je(P.id, s()), e.set(w, !1);
+  function M(C) {
+    i(), e.set(r, C, !0), e.set(s, C.name, !0), Oe(C.id, a()), e.set(w, !1);
   }
-  function N() {
+  function S() {
     c(), e.set(w, !1);
   }
-  async function B() {
+  async function Y() {
     try {
-      const P = JSON.stringify(e.get(n), null, 2);
-      await navigator.clipboard.writeText(P);
-    } catch (P) {
-      console.error("Failed to copy config:", P);
+      const C = JSON.stringify(e.get(r), null, 2);
+      await navigator.clipboard.writeText(C);
+    } catch (C) {
+      console.error("Failed to copy config:", C);
     }
   }
   Te(() => {
-    const P = Ia(s());
-    if (P) {
-      const W = Sa(P, t());
-      W && (e.set(n, W, !0), e.set(i, W.name, !0));
+    const C = Bn(a());
+    if (C) {
+      const R = Yn(C, t());
+      R && (e.set(r, R, !0), e.set(s, R.name, !0));
     }
     return () => {
-      d && clearTimeout(d), o();
+      u && clearTimeout(u), i();
     };
   });
-  var J = Ha(), Z = e.child(J), U = e.child(Z);
+  var J = ra(), B = e.child(J), U = e.child(B);
   {
-    var z = (P) => {
-      var W = Ba(), q = e.child(W);
-      e.snippet(q, () => a.children), e.reset(W), e.append(P, W);
+    var j = (C) => {
+      var R = Kn(), L = e.child(R);
+      e.snippet(L, () => n.children), e.reset(R), e.append(C, R);
     };
-    e.if(U, (P) => {
-      a.children && P(z);
+    e.if(U, (C) => {
+      n.children && C(j);
     });
   }
-  var E = e.sibling(U, 2), O = e.child(E), j = e.child(O), L = e.sibling(e.child(j), 2), K = e.child(L);
+  var q = e.sibling(U, 2), E = e.child(q), O = e.child(E), Z = e.sibling(e.child(O), 2), K = e.child(Z);
   K.__click = c;
   var H = e.child(K);
   Me(H, {}), e.next(), e.reset(K);
   var G = e.sibling(K, 2);
-  G.__click = () => e.set(w, !0), e.reset(L), e.reset(j);
-  var X = e.sibling(j, 4), Y = e.child(X);
-  e.remove_input_defaults(Y), Y.__input = () => {
+  G.__click = () => e.set(w, !0), e.reset(Z), e.reset(O);
+  var D = e.sibling(O, 4), X = e.child(D);
+  e.remove_input_defaults(X), X.__input = () => {
     p();
   };
-  var D = e.sibling(Y, 2);
-  D.__click = B, e.reset(X), e.reset(O);
-  var R = e.sibling(O, 2), V = e.sibling(e.child(R), 2), A = e.child(V), ue = e.sibling(e.child(A), 2);
-  e.remove_input_defaults(ue), ue.__input = (P) => u(Number(P.currentTarget.value), e.get(n).composition.height), e.reset(A);
-  var oe = e.sibling(A, 2), he = e.sibling(e.child(oe), 2);
-  e.remove_input_defaults(he), he.__input = (P) => u(e.get(n).composition.width, Number(P.currentTarget.value)), e.reset(oe), e.reset(V), e.reset(R);
-  var _e = e.sibling(R, 2), le = e.child(_e), ge = e.child(le), We = e.child(ge);
-  e.reset(ge);
-  var Se = e.sibling(ge, 2), de = e.child(Se);
-  de.__click = () => e.set(h, !e.get(h));
-  var Ne = e.child(de);
+  var W = e.sibling(X, 2);
+  W.__click = Y, e.reset(D), e.reset(E);
+  var P = e.sibling(E, 2), V = e.sibling(e.child(P), 2), A = e.child(V), de = e.sibling(e.child(A), 2);
+  e.remove_input_defaults(de), de.__input = (C) => d(Number(C.currentTarget.value), e.get(r).composition.height), e.reset(A);
+  var ie = e.sibling(A, 2), ge = e.sibling(e.child(ie), 2);
+  e.remove_input_defaults(ge), ge.__input = (C) => d(e.get(r).composition.width, Number(C.currentTarget.value)), e.reset(ie), e.reset(V), e.reset(P);
+  var he = e.sibling(P, 2), le = e.child(he), be = e.child(le), Re = e.child(be);
+  e.reset(be);
+  var ze = e.sibling(be, 2), ue = e.child(ze);
+  ue.__click = () => e.set(g, !e.get(g));
+  var Se = e.child(ue);
+  Me(Se, {});
+  var _e = e.sibling(Se);
+  e.reset(ue);
+  var pe = e.sibling(ue, 2), Ne = e.child(pe);
   Me(Ne, {});
-  var be = e.sibling(Ne);
-  e.reset(de);
-  var pe = e.sibling(de, 2), Ie = e.child(pe);
-  Me(Ie, {});
-  var ze = e.sibling(Ie, 2);
-  ze.__change = T, e.reset(pe), e.reset(Se), e.reset(le);
+  var je = e.sibling(Ne, 2);
+  je.__change = T, e.reset(pe), e.reset(ze), e.reset(le);
   var me = e.sibling(le, 2);
   {
-    var ye = (P) => {
-      var W = Ea(), q = e.child(W);
-      e.remove_input_defaults(q), q.__keydown = (ne) => ne.key === "Enter" && m();
-      var Q = e.sibling(q, 2);
-      Q.__click = m, e.reset(W), e.bind_value(q, () => e.get(f), (ne) => e.set(f, ne)), e.append(P, W);
+    var ye = (C) => {
+      var R = Jn(), L = e.child(R);
+      e.remove_input_defaults(L), L.__keydown = (re) => re.key === "Enter" && m();
+      var $ = e.sibling(L, 2);
+      $.__click = m, e.reset(R), e.bind_value(L, () => e.get(f), (re) => e.set(f, re)), e.append(C, R);
     };
-    e.if(me, (P) => {
-      e.get(h) && P(ye);
+    e.if(me, (C) => {
+      e.get(g) && C(ye);
     });
   }
-  var rt = e.sibling(me, 2);
+  var ot = e.sibling(me, 2);
   {
-    var ot = (P) => {
-      var W = Za();
-      e.append(P, W);
-    }, lt = (P) => {
-      var W = ja();
-      e.each(W, 23, () => e.get(n).composition.layers, (q) => q.id, (q, Q, ne) => {
-        var $ = La();
+    var it = (C) => {
+      var R = Gn();
+      e.append(C, R);
+    }, lt = (C) => {
+      var R = ea();
+      e.each(R, 23, () => e.get(r).composition.layers, (L) => L.id, (L, $, re) => {
+        var Q = Qn();
         let te;
-        $.__click = () => v(e.get(Q).id), $.__keydown = (ae) => ae.key === "Enter" && v(e.get(Q).id);
-        var Xe = e.child($), ft = e.child(Xe);
-        e.reset(Xe);
-        var Fe = e.sibling(Xe, 2), Ye = e.child(Fe), Ke = e.child(Ye), ht = e.sibling(Ke);
+        Q.__click = () => v(e.get($).id), Q.__keydown = (ne) => ne.key === "Enter" && v(e.get($).id);
+        var De = e.child(Q), ft = e.child(De);
+        e.reset(De);
+        var Fe = e.sibling(De, 2), Xe = e.child(Fe), Ke = e.child(Xe), gt = e.sibling(Ke);
         {
-          var _t = (ae) => {
-            var Ee = Oa(), wt = e.child(Ee, !0);
-            e.reset(Ee), e.template_effect(() => e.set_text(wt, e.get(Q).name)), e.append(ae, Ee);
+          var ht = (ne) => {
+            var qe = $n(), wt = e.child(qe, !0);
+            e.reset(qe), e.template_effect(() => e.set_text(wt, e.get($).name)), e.append(ne, qe);
           };
-          e.if(ht, (ae) => {
-            e.get(Q).name && ae(_t);
+          e.if(gt, (ne) => {
+            e.get($).name && ne(ht);
           });
         }
-        e.reset(Ye);
-        var Je = e.sibling(Ye, 2), we = e.child(Je);
-        we.__click = (ae) => {
-          ae.stopPropagation(), S(e.get(Q).id);
+        e.reset(Xe);
+        var Je = e.sibling(Xe, 2), we = e.child(Je);
+        we.__click = (ne) => {
+          ne.stopPropagation(), z(e.get($).id);
         };
-        var gt = e.child(we);
-        nt(gt, { rotate: "-90deg" }), e.reset(we);
+        var bt = e.child(we);
+        rt(bt, { rotate: "-90deg" }), e.reset(we);
         var xe = e.sibling(we, 2);
-        xe.__click = (ae) => {
-          ae.stopPropagation(), g(e.get(Q).id);
+        xe.__click = (ne) => {
+          ne.stopPropagation(), b(e.get($).id);
         };
-        var bt = e.child(xe);
-        nt(bt, { rotate: "90deg" }), e.reset(xe);
-        var Be = e.sibling(xe, 2);
-        Be.__click = (ae) => {
-          ae.stopPropagation(), C(e.get(Q).id);
+        var _t = e.child(xe);
+        rt(_t, { rotate: "90deg" }), e.reset(xe);
+        var Ye = e.sibling(xe, 2);
+        Ye.__click = (ne) => {
+          ne.stopPropagation(), I(e.get($).id);
         };
-        var yt = e.child(Be);
-        Ue(yt, {}), e.reset(Be), e.reset(Je), e.reset(Fe), e.reset($), e.template_effect(() => {
-          te = e.set_class($, 1, "layer-item svelte-w47swm", null, te, { selected: e.get(l) === e.get(Q).id }), e.set_attribute(ft, "src", e.get(Q).src), e.set_text(Ke, `${(e.get(Q).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(q, $);
-      }), e.reset(W), e.append(P, W);
+        var yt = e.child(Ye);
+        Ue(yt, {}), e.reset(Ye), 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(ft, "src", e.get($).src), e.set_text(Ke, `${(e.get($).name || `Layer ${e.get(re) + 1}`) ?? ""} `), we.disabled = e.get(re) === 0, xe.disabled = e.get(re) === e.get(r).composition.layers.length - 1;
+        }), e.append(L, Q);
+      }), e.reset(R), e.append(C, R);
     };
-    e.if(rt, (P) => {
-      e.get(n).composition.layers.length === 0 ? P(ot) : P(lt, !1);
+    e.if(ot, (C) => {
+      e.get(r).composition.layers.length === 0 ? C(it) : C(lt, !1);
     });
   }
-  e.reset(_e);
-  var ct = e.sibling(_e, 2);
+  e.reset(he);
+  var ct = e.sibling(he, 2);
   {
-    var ut = (P) => {
-      const W = e.derived(() => e.get(n).composition.layers.find(($) => $.id === e.get(l)));
-      var q = e.comment(), Q = e.first_child(q);
+    var dt = (C) => {
+      const R = e.derived(() => e.get(r).composition.layers.find((Q) => Q.id === e.get(l)));
+      var L = e.comment(), $ = e.first_child(L);
       {
-        var ne = ($) => {
-          wa($, {
+        var re = (Q) => {
+          Pn(Q, {
             get layer() {
-              return e.get(W);
+              return e.get(R);
             },
             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(W).id, te),
-            onOpacityChange: (te) => x(e.get(W).id, te),
-            onVisibilityChange: (te) => I(e.get(W).id, te),
-            onEffectsChange: (te) => b(e.get(W).id, te),
-            onNameChange: (te) => k(e.get(W).id, te),
-            onDelete: () => C(e.get(W).id)
+            onTransformChange: (te) => y(e.get(R).id, te),
+            onOpacityChange: (te) => x(e.get(R).id, te),
+            onVisibilityChange: (te) => N(e.get(R).id, te),
+            onEffectsChange: (te) => _(e.get(R).id, te),
+            onNameChange: (te) => k(e.get(R).id, te),
+            onDelete: () => I(e.get(R).id)
           });
         };
-        e.if(Q, ($) => {
-          e.get(W) && $(ne);
+        e.if($, (Q) => {
+          e.get(R) && Q(re);
         });
       }
-      e.append(P, q);
+      e.append(C, L);
     };
-    e.if(ct, (P) => {
-      e.get(l) && P(ut);
+    e.if(ct, (C) => {
+      e.get(l) && C(dt);
     });
   }
-  e.reset(E), e.reset(Z);
-  var De = e.sibling(Z, 2), Ve = e.child(De);
+  e.reset(q), e.reset(B);
+  var We = e.sibling(B, 2), Ve = e.child(We);
   {
-    var dt = (P) => {
-      var W = qa(), q = e.child(W);
-      e.snippet(q, () => a.children), e.reset(W), e.append(P, W);
+    var ut = (C) => {
+      var R = ta(), L = e.child(R);
+      e.snippet(L, () => n.children), e.reset(R), e.append(C, R);
     };
-    e.if(Ve, (P) => {
-      a.children && P(dt);
+    e.if(Ve, (C) => {
+      n.children && C(ut);
     });
   }
   var pt = e.sibling(Ve, 2);
-  en(pt, {
-    children: (P, W) => {
-      sn(P, {
+  rr(pt, {
+    children: (C, R) => {
+      ir(C, {
         get mockup() {
-          return e.get(n);
+          return e.get(r);
         }
       });
     }
-  }), e.reset(De);
-  var mt = e.sibling(De, 2);
+  }), e.reset(We);
+  var mt = e.sibling(We, 2);
   {
-    var vt = (P) => {
-      za(P, {
+    var vt = (C) => {
+      An(C, {
         onclose: () => e.set(w, !1),
         onSelect: M,
-        onNew: N,
+        onNew: S,
         get currentMockupId() {
-          return e.get(n).id;
+          return e.get(r).id;
         },
         get storageKey() {
           return t();
         }
       });
     };
-    e.if(mt, (P) => {
-      e.get(w) && P(vt);
+    e.if(mt, (C) => {
+      e.get(w) && C(vt);
     });
   }
   e.reset(J), e.template_effect(() => {
-    e.set_value(ue, e.get(n).composition.width), e.set_value(he, e.get(n).composition.height), e.set_text(We, `Layers (${e.get(n).composition.layers.length ?? ""})`), e.set_text(be, ` ${e.get(h) ? "Cancel" : "URL"}`);
-  }), e.bind_value(Y, () => e.get(i), (P) => e.set(i, P)), e.append(r, J), e.pop();
+    e.set_value(de, e.get(r).composition.width), e.set_value(ge, e.get(r).composition.height), e.set_text(Re, `Layers (${e.get(r).composition.layers.length ?? ""})`), e.set_text(_e, ` ${e.get(g) ? "Cancel" : "URL"}`);
+  }), e.bind_value(X, () => e.get(s), (C) => e.set(s, C)), e.append(o, J), e.pop();
 }
 e.delegate(["click", "input", "change", "keydown"]);
 export {
-  Ya as CURRENT_MOCKUP_KEY,
-  at as InputBatcher,
-  wa as LayerControls,
-  Ga as MockupEditor,
-  sn as MockupEditorRenderer,
-  za as MockupListModal,
-  Ja as MockupRenderer,
+  Fn as CURRENT_MOCKUP_KEY,
+  nt as InputBatcher,
+  Pn as LayerControls,
+  da as MockupEditor,
+  ir as MockupEditorRenderer,
+  An as MockupListModal,
+  ca as MockupRenderer,
   Kt as RenderScheduler,
-  Xa as STORAGE_KEY,
-  en as ZoomableCanvas,
+  Vn as STORAGE_KEY,
+  rr as ZoomableCanvas,
   tt as createNewMockup,
-  st as defaultComposition,
+  at as defaultComposition,
   ce as defaultCylinderWarp,
-  ie as defaultImageOnSurface,
+  se as defaultImageOnSurface,
   Qt as defaultLayer,
-  se as defaultPlaneWarp,
+  ae as defaultPlaneWarp,
   fe as defaultResizeEffect,
   ee as defaultRestyleEffect,
   ke as defaultSphereWarp,
-  Gt as defaultTransform,
-  Ce as defaultView,
+  $t as defaultTransform,
+  Ie as defaultView,
   ve as defaultWarpDebug,
-  $e as defaultWarpEffect,
-  Na as deleteMockup,
-  Re as loadAllMockups,
-  Ia as loadCurrentMockupId,
-  Sa as loadMockup,
-  qe as renderMockupCanvas,
-  tn as renderMockupCanvasEditor,
-  je as saveCurrentMockupId,
-  Ta as saveMockup
+  Qe as defaultWarpEffect,
+  qn as deleteMockup,
+  Pe as loadAllMockups,
+  Bn as loadCurrentMockupId,
+  Yn as loadMockup,
+  Le as renderMockupCanvas,
+  nr as renderMockupCanvasEditor,
+  Oe as saveCurrentMockupId,
+  Xn as saveMockup
 };