svelte-product-mockup 0.0.4 → 0.0.6

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 { 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 { onMount as Te, tick as Mt, onDestroy as Tt, untrack as Ge } from "svelte";
+import { fade as $e } from "svelte/transition";
+import { beforeNavigate as St, pushState as It } from "$app/navigation";
+import { browser as zt } from "$app/environment";
+function Pt(o, r) {
+  const t = new Uint8ClampedArray(o.data), { brightness: a, contrast: n, saturation: s, hue: l, exposure: f, gamma: h, shadows: w, highlights: u, vibrance: g, temperature: p, tint: T } = r;
   for (let v = 0; v < t.length; v += 4) {
-    let y = t[v], x = t[v + 1], 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], z = t[v + 2];
+    t[v + 3] !== 0 && (y = Be(y, a), x = Be(x, a), z = Be(z, a), y = Le(y, n), x = Le(x, n), z = Le(z, n), [y, x, z] = Ct(y, x, z, s), [y, x, z] = Nt(y, x, z, l), [y, x, z] = Rt(y, x, z, f), [y, x, z] = jt(y, x, z, h), [y, x, z] = Wt(y, x, z, w, u), [y, x, z] = Yt(y, x, z, g), [y, x, z] = Dt(y, x, z, p, T), t[v] = qe(y), t[v + 1] = qe(x), t[v + 2] = qe(z));
   }
-  return new ImageData(t, r.width, r.height);
+  return new ImageData(t, o.width, o.height);
 }
-function Ze(r, a) {
-  return r + a * 255;
+function Be(o, r) {
+  return o + r * 255;
 }
-function Oe(r, a) {
-  return 259 * (a * 255 + 255) / (255 * (259 - a * 255)) * (r - 128) + 128;
+function Le(o, r) {
+  return 259 * (r * 255 + 255) / (255 * (259 - r * 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 Ct(o, r, t, a) {
+  const n = 0.299 * o + 0.587 * r + 0.114 * t, s = 1 + a;
   return [
-    n + i * (r - n),
-    n + i * (a - n),
-    n + i * (t - n)
+    n + s * (o - n),
+    n + s * (r - n),
+    n + s * (t - n)
   ];
 }
-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 Nt(o, r, t, a) {
+  const n = a * Math.PI / 180, s = Math.cos(n), l = Math.sin(n), f = [
+    s + (1 - s) / 3,
+    1 / 3 * (1 - s) - Math.sqrt(1 / 3) * l,
+    1 / 3 * (1 - s) + Math.sqrt(1 / 3) * l,
+    1 / 3 * (1 - s) + Math.sqrt(1 / 3) * l,
+    s + 1 / 3 * (1 - s),
+    1 / 3 * (1 - s) - Math.sqrt(1 / 3) * l,
+    1 / 3 * (1 - s) - Math.sqrt(1 / 3) * l,
+    1 / 3 * (1 - s) + Math.sqrt(1 / 3) * l,
+    s + 1 / 3 * (1 - s)
   ];
   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] + r * f[1] + t * f[2],
+    o * f[3] + r * f[4] + t * f[5],
+    o * f[6] + r * 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 Rt(o, r, t, a) {
+  const n = Math.pow(2, a);
+  return [o * n, r * n, t * n];
 }
-function Rt(r, a, t, s) {
-  const n = 1 / s;
+function jt(o, r, t, a) {
+  const n = 1 / a;
   return [
+    Math.pow(o / 255, n) * 255,
     Math.pow(r / 255, n) * 255,
-    Math.pow(a / 255, n) * 255,
     Math.pow(t / 255, n) * 255
   ];
 }
-function Wt(r, a, t, s, n) {
-  const i = 0.299 * r + 0.587 * a + 0.114 * t;
+function Wt(o, r, t, a, n) {
+  const s = 0.299 * o + 0.587 * r + 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 + n, [o * l, r * 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 Yt(o, r, t, a) {
+  const n = Math.max(o, r, t), s = Math.min(o, r, t), l = n === 0 ? 0 : (n - s) / n, f = 1 + a * (1 - l);
+  return [o * f, r * f, t * f];
 }
-function 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 Dt(o, r, t, a, n) {
+  let s = o, l = r, f = t;
+  return a > 0 ? (s += a * 0.1, f -= a * 0.1) : (s += a * 0.05, f -= a * 0.05), n > 0 ? (s += n * 0.1, l -= n * 0.05) : (s += n * 0.05, l -= n * 0.1), [s, l, f];
 }
-function Le(r) {
-  return Math.max(0, Math.min(255, r));
+function qe(o) {
+  return Math.max(0, Math.min(255, o));
 }
-function Xt(r, a, t) {
-  const s = r / a;
+function Xt(o, r, t) {
+  const a = o / r;
   switch (t.mode) {
     case "scale":
       const n = t.scale ?? 1;
       return {
-        width: r * n,
-        height: a * n,
+        width: o * n,
+        height: r * n,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: r
       };
     case "px":
-      let i = t.width ?? r, l = t.height ?? a;
+      let s = t.width ?? o, l = t.height ?? r;
       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 P = Math.min(s / o, l / r);
+          s = o * P, l = r * P;
         }
       }
-      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: r
       };
     case "fit":
-      const f = t.width ?? r, h = t.height ?? a, w = Math.min(f / r, h / a);
+      const f = t.width ?? o, h = t.height ?? r, w = Math.min(f / o, h / r);
       return {
-        width: r * w,
-        height: a * w,
+        width: o * w,
+        height: r * w,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: r
       };
     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, g = t.height ?? r, p = Math.max(u / o, g / r), T = u / p, v = g / p;
       return {
-        width: d,
-        height: _,
-        sourceX: (r - T) / 2,
-        sourceY: (a - v) / 2,
+        width: u,
+        height: g,
+        sourceX: (o - T) / 2,
+        sourceY: (r - 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 ?? r;
       return {
         width: y,
         height: x,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: r
       };
     case "contain":
-      const I = t.width ?? r, b = t.height ?? a, k = Math.min(I / r, b / a);
+      const z = t.width ?? o, _ = t.height ?? r, k = Math.min(z / o, _ / r);
       return {
-        width: r * k,
-        height: a * k,
+        width: o * k,
+        height: r * k,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: r
       };
     default:
       return {
-        width: r,
-        height: a,
+        width: o,
+        height: r,
         sourceX: 0,
         sourceY: 0,
-        sourceWidth: r,
-        sourceHeight: a
+        sourceWidth: o,
+        sourceHeight: r
       };
   }
 }
-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 Zt(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 Bt(o, r, t) {
+  const a = o.width, n = o.height, s = o.data;
+  if (r < 0 || r >= a || t < 0 || t >= n)
     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(r), f = Math.floor(t), h = Math.min(l + 1, a - 1), w = Math.min(f + 1, n - 1), u = r - l, g = t - f, p = (b, d) => {
+    const m = (d * a + b) * 4;
     return {
-      r: i[p],
-      g: i[p + 1],
-      b: i[p + 2],
-      a: i[p + 3]
+      r: s[m],
+      g: s[m + 1],
+      b: s[m + 2],
+      a: s[m + 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 = p(l, f), v = p(h, f), y = p(l, w), x = p(h, w), z = (b, d, m) => b + (d - b) * m, _ = z(z(T.r, v.r, u), z(y.r, x.r, u), g), k = z(z(T.g, v.g, u), z(y.g, x.g, u), g), P = z(z(T.b, v.b, u), z(y.b, x.b, u), g), S = z(z(T.a, v.a, u), z(y.a, x.a, u), g);
+  return { r: _, g: k, b: P, a: S };
 }
-function He(r, a, t, s, n, i, l, f, h, w) {
-  const d = Yt(a), _ = w?.showDepthVis ?? !1, m = w?.maxZ ?? 500, T = h ?? {
+function Ve(o, r, t, a, n, s, l, f, h, w) {
+  const u = Zt(r), g = w?.showDepthVis ?? !1, p = w?.maxZ ?? 500, T = h ?? {
     minX: -n / 2,
-    minY: -i / 2,
+    minY: -s / 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)
+    maxY: s / 2
+  }, v = T.maxX - T.minX, y = T.maxY - T.minY, x = Math.floor(v * l), z = Math.floor(y * l);
+  if (x <= 0 || z <= 0) return;
+  const _ = new ImageData(x, z), k = _.data;
+  for (let m = 0; m < z; m++)
+    for (let i = 0; i < x; i++) {
+      const c = T.minX + i / l, M = T.minY + m / l, I = f(c, M);
+      if (!I || I.z <= 0)
         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 X = (m * x + i) * 4;
+      if (g) {
+        const J = Math.min(1, Math.max(0, I.z / p)), B = Math.floor(J * 200 + 55);
+        k[X] = Math.floor(B * 0.3), k[X + 1] = Math.floor(B * 0.6), k[X + 2] = B, k[X + 3] = 200;
       } 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 } = I, A = Bt(u, J, B);
+        A && (k[X] = Math.round(A.r), k[X + 1] = Math.round(A.g), k[X + 2] = Math.round(A.b), k[X + 3] = Math.round(A.a));
       }
     }
-  const C = new OffscreenCanvas(x, I), S = C.getContext("2d");
+  const P = new OffscreenCanvas(x, z), S = P.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);
+  S.putImageData(_, 0, 0);
+  const b = t + T.minX, d = a + T.minY;
+  l !== 1 ? o.drawImage(P, b, d, v, y) : o.drawImage(P, b, d);
 }
-function 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 Ue(o, r, t, a = 20) {
+  if (!("save" in o)) return;
+  const n = o;
+  n.save(), n.strokeStyle = "#00ff00", n.lineWidth = 2, n.beginPath(), n.moveTo(r - a, t), n.lineTo(r + a, t), n.stroke(), n.beginPath(), n.moveTo(r, t - a), n.lineTo(r, t + a), n.stroke(), n.fillStyle = "#00ff00", n.beginPath(), n.arc(r, t, 3, 0, Math.PI * 2), n.fill(), n.restore();
 }
-function 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) {
-    const y = m, x = T;
-    m = y * d - x * _, T = y * _ + x * d;
+function oe(o, r, t, a, n, s) {
+  const l = Math.cos(a), f = Math.sin(a), h = Math.cos(n), w = Math.sin(n), u = Math.cos(s), g = Math.sin(s);
+  let p = o, T = r, v = t;
+  if (s !== 0) {
+    const y = p, x = T;
+    p = y * u - x * g, T = y * g + x * u;
   }
   if (n !== 0) {
-    const y = m, x = v;
-    m = y * h + x * w, v = -y * w + x * h;
+    const y = p, x = v;
+    p = y * h + x * w, v = -y * w + x * h;
   }
-  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];
+  return [p, 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 Lt(o, r, t, a, n, s) {
+  const l = Math.cos(a), f = Math.sin(a), h = Math.cos(n), w = Math.sin(n), u = Math.cos(s), g = Math.sin(s);
+  let p = o, T = r, v = t;
+  if (a !== 0) {
     const y = T, x = v;
     T = y * l + x * f, v = -y * f + x * l;
   }
   if (n !== 0) {
-    const y = m, x = v;
-    m = y * h - x * w, v = y * w + x * h;
+    const y = p, x = v;
+    p = y * h - x * w, v = y * w + x * h;
   }
-  if (i !== 0) {
-    const y = m, x = T;
-    m = y * d + x * _, T = -y * _ + x * d;
+  if (s !== 0) {
+    const y = p, x = T;
+    p = y * u + x * g, T = -y * g + x * u;
   }
-  return [m, T, v];
+  return [p, T, v];
 }
-function Zt(r, a, t, s, n, i) {
-  if (!("save" in r)) return;
-  const l = r;
+function qt(o, r, t, a, n, s) {
+  if (!("save" in o)) return;
+  const l = o;
   l.save(), l.strokeStyle = "#ff6600", l.lineWidth = 1.5, l.setLineDash([4, 6]);
   const f = 50, h = 3;
   for (let w = -h; w <= h; w++) {
-    const d = w * f, _ = [];
-    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 u = w * f, g = [];
+    for (let p = -10; p <= 10; p++) {
+      const T = p * f, v = s(u, T);
+      v && g.push({ x: r + v.x, y: t + v.y });
     }
-    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 (g.length > 1) {
+      l.beginPath(), l.moveTo(g[0].x, g[0].y);
+      for (let p = 1; p < g.length; p++)
+        l.lineTo(g[p].x, g[p].y);
       l.stroke();
     }
   }
   for (let w = -h; w <= h; w++) {
-    const d = w * f, _ = [];
-    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 u = w * f, g = [];
+    for (let p = -10; p <= 10; p++) {
+      const T = p * f, v = s(T, u);
+      v && g.push({ x: r + v.x, y: t + v.y });
     }
-    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 (g.length > 1) {
+      l.beginPath(), l.moveTo(g[0].x, g[0].y);
+      for (let p = 1; p < g.length; p++)
+        l.lineTo(g[p].x, g[p].y);
       l.stroke();
     }
   }
   l.restore();
 }
-function Ot(r, a, t, s, n, i, l, f) {
-  if (!("save" in r)) return;
-  const h = r;
+function Et(o, r, t, a, n, s, l, f) {
+  if (!("save" in o)) return;
+  const h = o;
   h.save(), h.lineWidth = 2, h.setLineDash([6, 4]);
-  const w = Math.sin(i);
-  let d = 1 / 0, _ = -1 / 0;
-  const m = (p, o, c) => {
-    const M = o * w, N = f / (f + M);
+  const w = Math.sin(s);
+  let u = 1 / 0, g = -1 / 0;
+  const p = (m, i, c) => {
+    const M = i * w, I = f / (f + M);
     return {
-      x: a + p * N,
-      y: t + o * N,
+      x: r + m * I,
+      y: t + i * I,
       z: c
     };
-  }, T = (p, o, c) => {
-    const M = c - o;
+  }, T = (m, 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;
-  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);
-  }
-  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);
-  }
-  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 = (m - i) / M, X = Math.round(100 + I * 155), J = Math.round(30 + I * 70), B = Math.round(0 + I * 0);
+    return `rgb(${X},${J},${B})`;
+  }, v = 32, y = [], x = [], z = [], _ = [], k = s > 0.01 ? -Math.PI / 2 : 0, P = s > 0.01 ? Math.PI / 2 : Math.PI * 2, S = s < -0.01 ? -Math.PI / 2 : 0, b = s < -0.01 ? Math.PI / 2 : Math.PI * 2;
+  for (let m = 0; m <= v; m++) {
+    const i = m / v, c = k + i * (P - k), M = Math.sin(c) * a, I = Math.cos(c) * a, X = -n / 2, [J, B, A] = oe(M, X, I, s, 0, l), j = p(J, B, A);
+    y.push(j), u = Math.min(u, A), g = Math.max(g, A);
+  }
+  for (let m = 0; m <= v; m++) {
+    const i = m / v, c = S + i * (b - S), M = Math.sin(c) * a, I = Math.cos(c) * a, X = n / 2, [J, B, A] = oe(M, X, I, s, 0, l), j = p(J, B, A);
+    x.push(j), u = Math.min(u, A), g = Math.max(g, A);
+  }
+  for (let m = 0; m <= 10; m++) {
+    const i = m / 10, c = -n / 2 + i * n, [M, I, X] = oe(-a, c, 0, s, 0, l);
+    z.push(p(M, I, X)), u = Math.min(u, X), g = Math.max(g, X);
+    const [J, B, A] = oe(a, c, 0, s, 0, l);
+    _.push(p(J, B, A)), u = Math.min(u, A), g = Math.max(g, A);
+  }
+  const d = (m) => {
+    for (let i = 0; i < m.length - 1; i++) {
+      const c = m[i], M = m[i + 1], I = (c.z + M.z) / 2;
+      h.strokeStyle = T(I, u, g), h.beginPath(), h.moveTo(c.x, c.y), h.lineTo(M.x, M.y), h.stroke();
     }
   };
-  u(y), u(x), u(I), u(b), h.restore();
+  d(y), d(x), d(z), d(_), h.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 Ot(o, r, t, a, n, s, l, f, h, w) {
+  const { diameter: u, perspective: g, rotationX: p, rotationZ: T } = l, v = u / 2, y = p * Math.PI / 180, x = T * Math.PI / 180, z = Math.abs(y) > 1e-3, _ = g ?? 1, k = _ > 0.01 ? v * (10 / _) : v * 1e3, P = f.scale, S = f.translateX, b = f.translateY;
+  let d = {
     minX: -v,
-    minY: -i / 2,
+    minY: -s / 2,
     maxX: v,
-    maxY: i / 2
+    maxY: s / 2
   };
-  if (I) {
+  if (z) {
     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 X of c) {
+      const [J, B, A] = oe(X.x, X.y, v, y, 0, x), j = k / (k + A);
+      M.push({ x: J * j, y: B * j });
+      const [Z, L, E] = oe(X.x, X.y, 0, y, 0, x), q = k / (k + E);
+      M.push({ x: Z * q, y: L * q });
     }
-    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 I = v * Math.abs(Math.sin(y));
+    M.length > 0 && (d = {
+      minX: Math.min(...M.map((X) => X.x)) - 2,
+      minY: Math.min(...M.map((X) => X.y)) - I - 2,
+      maxX: Math.max(...M.map((X) => X.x)) + 2,
+      maxY: Math.max(...M.map((X) => X.y)) + I + 2
     });
   }
-  const 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);
-    if (Math.abs(U) < 0.01) return null;
-    const H = (L + K * z) / U, G = H * z + K * U;
+  const m = (c, M) => {
+    const I = Math.cos(x), X = Math.sin(x), J = c * I + M * X, B = -c * X + M * I, A = Math.cos(y), j = Math.sin(y), Z = B * j, L = k / (k + Z), E = J / L, q = B / L;
+    if (Math.abs(E) > v) return null;
+    const K = Math.sqrt(v * v - E * E);
+    if (Math.abs(A) < 0.01) return null;
+    const V = (q + K * j) / A, G = V * j + K * A;
     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(E / v) * v / n + 0.5, N = V / s + 0.5, H = (W - 0.5 - S) / P + 0.5, U = (N - 0.5 - b) / P + 0.5;
+    return H >= 0 && H <= 1 && U >= 0 && U <= 1 ? { u: H * r.width, v: U * r.height, z: G } : null;
+  }, i = w.showDepthVis ? { showDepthVis: !0, maxZ: v } : void 0;
+  w.showBounds && Et(o, t, a, v, s, y, x, k), Ve(o, r, t, a, n, s, h, m, d, i), w.showCrosshair && Ue(o, t, a);
 }
-function 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 Vt(o, r, t, a, n, s, l, f, h, w) {
+  const { rotationX: u, rotationY: g, rotationZ: p, depthScale: T } = l, v = u * (Math.PI / 180), y = g * (Math.PI / 180), x = p * (Math.PI / 180), z = Math.abs(v) > 1e-3 || Math.abs(y) > 1e-3 || Math.abs(x) > 1e-3, _ = f.scale, k = f.translateX, P = f.translateY, S = T * 1e-3, b = S > 1e-4 ? 1 / S : 1e4, d = (B, A) => {
+    const [j, Z, L] = oe(B, A, 0, v, y, x), E = L + b;
+    if (E <= 0) return null;
+    const q = b / E, K = j * q, V = Z * q;
+    return { x: K, y: V, z: L };
   };
-  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 m = -n / 2, i = n / 2, c = -s / 2, M = s / 2;
+  if (z) {
+    const B = [];
+    for (let j = 0; j <= 10; j++) {
+      const Z = j / 10, L = -n / 2 + Z * n, E = d(L, -s / 2);
+      E && B.push({ x: E.x, y: E.y });
+      const q = d(L, s / 2);
+      q && B.push({ x: q.x, y: q.y });
+      const K = -s / 2 + Z * s, V = d(-n / 2, K);
+      V && B.push({ x: V.x, y: V.y });
+      const G = d(n / 2, K);
+      G && B.push({ x: G.x, y: G.y });
     }
-    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) {
+      m = Math.min(...B.map((q) => q.x)), i = Math.max(...B.map((q) => q.x)), c = Math.min(...B.map((q) => q.y)), M = Math.max(...B.map((q) => q.y));
+      const j = Math.sqrt(v * v + y * y + x * x), Z = 2, L = j * Math.max(n, s) * 0.1, E = Z + L;
+      m -= E, i += E, c -= E, M += E;
     }
   }
-  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;
-      return me >= 0 && me <= 1 && ye >= 0 && ye <= 1 ? {
-        u: me * a.width,
-        v: ye * a.height,
+  const I = { minX: m, minY: c, maxX: i, maxY: M }, X = (B, A) => {
+    if (!z) {
+      const ze = B / n + 0.5, je = A / s + 0.5, pe = (ze - 0.5 - k) / _ + 0.5, ye = (je - 0.5 - P) / _ + 0.5;
+      return pe >= 0 && pe <= 1 && ye >= 0 && ye <= 1 ? {
+        u: pe * r.width,
+        v: ye * r.height,
         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, Z, L] = oe(0, 0, 1, v, y, x), E = 0, q = 0, K = 0, V = -b, G = B - q, Y = A - K, D = 0 - V, W = Math.sqrt(G * G + Y * Y + D * D), N = G / W, H = Y / W, U = D / W, de = N * j + H * Z + U * L;
+    if (Math.abs(de) < 1e-4)
       return null;
-    const oe = -(L * z + K * E + H * O + j) / ue;
-    if (oe < 0)
+    const ie = -(q * j + K * Z + V * L + E) / de;
+    if (ie < 0)
       return null;
-    const he = L + R * oe, _e = K + V * oe, le = H + A * oe;
-    if (le < H)
+    const he = q + N * ie, ge = K + H * ie, le = V + U * ie;
+    if (le < V)
       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] = Lt(he, ge, le, v, y, x), Se = be / n + 0.5, ue = Re / s + 0.5, Ie = le + b, _e = (Se - 0.5 - k) / _ + 0.5, me = (ue - 0.5 - P) / _ + 0.5;
+    return _e >= 0 && _e <= 1 && me >= 0 && me <= 1 ? {
+      u: _e * r.width,
+      v: me * r.height,
+      z: Ie
     } : 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 && qt(o, t, a, n, s, d), Ve(o, r, t, a, n, s, h, X, I, J), w.showCrosshair && Ue(o, t, a);
 }
-function 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 Ut(o, r, t, a, n) {
+  if (!("save" in o)) return;
+  const s = o;
+  if (s.save(), s.strokeStyle = "#ff6600", s.lineWidth = 2, s.setLineDash([6, 4]), s.beginPath(), s.arc(r, t, a, 0, Math.PI * 2), s.stroke(), s.beginPath(), s.moveTo(r - a, t), s.lineTo(r + a, t), s.stroke(), s.beginPath(), s.moveTo(r, t - a), s.lineTo(r, t + a), s.stroke(), s.beginPath(), s.moveTo(r - a, t - a), s.lineTo(r - a, t + a), s.stroke(), s.beginPath(), s.moveTo(r + a, t - a), s.lineTo(r + a, t + a), s.stroke(), Math.abs(n) > 1e-3) {
+    s.strokeStyle = "#ffaa00";
+    const l = Math.cos(n), f = Math.sin(n), h = a * 0.7;
+    s.beginPath(), s.moveTo(r + l * h, t + f * h), s.lineTo(r - l * h, t - f * h), s.stroke(), s.beginPath(), s.moveTo(r - f * h, t + l * h), s.lineTo(r + f * h, t - l * h), s.stroke();
+  }
+  s.restore();
 }
-function 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 At(o, r, t, a, n, s, l, f, h, w) {
+  const { radius: u, rotationZ: g } = l, p = g * (Math.PI / 180), T = f.scale, v = f.translateX, y = f.translateY, x = {
+    minX: -u,
+    minY: -u,
+    maxX: u,
+    maxY: u
+  }, z = (k, P) => {
+    const S = Math.sqrt(k * k + P * P);
+    if (S > u) return null;
+    const b = Math.sqrt(u * u - k * k - P * P), m = Math.asin(S / u) * u, i = Math.atan2(P, k) - p, c = m * Math.cos(i), M = m * Math.sin(i), I = c / n + 0.5, X = M / s + 0.5, J = (I - 0.5 - v) / T + 0.5, B = (X - 0.5 - y) / T + 0.5;
+    return J >= 0 && J <= 1 && B >= 0 && B <= 1 ? {
+      u: J * r.width,
+      v: B * r.height,
+      z: b
     } : 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 && Ut(o, t, a, u, p), Ve(o, r, t, a, n, s, h, z, x, _), w.showCrosshair && Ue(o, t, a);
 }
-function At(r, a, t, s, n, i, l) {
-  r.drawImage(a, t - n / 2, s - i / 2, n, i);
+function Ht(o, r, t, a, n, s, l) {
+  o.drawImage(r, t - n / 2, a - s / 2, n, s);
 }
-function Ut(r, a, t, s, n, i, l) {
+function Ft(o, r, t, a, n, s, l) {
   if (!l.enabled || l.shape === "none") {
-    r.drawImage(a, t - n / 2, s - i / 2, n, i);
+    o.drawImage(r, t - n / 2, a - s / 2, n, s);
     return;
   }
-  const f = l.quality ?? 1, h = l.image ?? ie, w = l.debug ?? ve;
+  const f = l.quality ?? 1, h = 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 && Ot(o, r, t, a, n, s, l.cylinder, h, f, w);
       break;
     case "plane":
-      l.plane && jt(r, a, t, s, n, i, l.plane, h, f, w);
+      l.plane && Vt(o, r, t, a, n, s, l.plane, h, f, w);
       break;
     case "sphere":
-      l.sphere && Ht(r, a, t, s, n, i, l.sphere, h, f, w);
+      l.sphere && At(o, r, t, a, n, s, l.sphere, h, f, w);
       break;
     case "custom":
-      l.custom && At(r, a, t, s, n, i, l.custom);
+      l.custom && Ht(o, r, t, a, n, s, l.custom);
       break;
     default:
-      r.drawImage(a, t - n / 2, s - i / 2, n, i);
+      o.drawImage(r, t - n / 2, a - s / 2, n, s);
   }
 }
 const ee = {
@@ -520,38 +520,38 @@ 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, r) {
+  let t = o, a = o.width, n = o.height;
+  const s = Kt(r);
+  for (const l of s)
     switch (l.type) {
       case "resize":
-        const f = Xt(s, n, l);
-        s = f.width, n = f.height;
+        const f = Xt(a, n, l);
+        a = f.width, n = f.height;
         break;
       case "restyle":
-        t = Ft(t, l);
+        t = Jt(t, l);
         break;
     }
   return {
     image: t,
-    width: s,
+    width: a,
     height: n
   };
 }
-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 Kt(o) {
+  const r = ["resize", "restyle", "warp"];
+  return o.sort((t, a) => {
+    const n = r.indexOf(t.type), s = r.indexOf(a.type);
+    return n - s;
   });
 }
-function 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 Jt(o, r) {
+  const t = new OffscreenCanvas(o.width, o.height), a = t.getContext("2d");
+  if (!a) return o;
+  a.drawImage(o, 0, 0);
+  const n = a.getImageData(0, 0, o.width, o.height), s = Pt(n, r);
+  return a.putImageData(s, 0, 0), t.transferToImageBitmap();
 }
 class at {
   latestInput = null;
@@ -559,11 +559,11 @@ class at {
   timeoutId = null;
   onFlush;
   TRAILING_MS = 32;
-  constructor(a) {
-    this.onFlush = a;
+  constructor(r) {
+    this.onFlush = r;
   }
-  queue(a) {
-    this.latestInput = a, this.timeoutId !== null && clearTimeout(this.timeoutId), this.rafPending || (this.rafPending = !0, requestAnimationFrame(() => {
+  queue(r) {
+    this.latestInput = r, 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,14 +572,34 @@ 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 r = this.latestInput;
+    this.latestInput = null, this.onFlush(r);
   }
   destroy() {
     this.timeoutId !== null && (clearTimeout(this.timeoutId), this.timeoutId = null), this.latestInput = null;
   }
 }
-class Kt {
+const st = '(function(){"use strict";const ot={scale:1,translateX:0,translateY:0},at={showBounds:!1,showDepthVis:!1,showCrosshair:!1};({...ot});function et(c){const n=new OffscreenCanvas(c.width,c.height).getContext("2d");if(!n)throw new Error("Failed to create canvas context");return n.drawImage(c,0,0),n.getImageData(0,0,c.width,c.height)}function ct(c,e,n){const s=c.width,o=c.height,t=c.data;if(e<0||e>=s||n<0||n>=o)return null;const a=Math.floor(e),u=Math.floor(n),r=Math.min(a+1,s-1),M=Math.min(u+1,o-1),l=e-a,m=n-u,f=(Y,z)=>{const d=(z*s+Y)*4;return{r:t[d],g:t[d+1],b:t[d+2],a:t[d+3]}},g=f(a,u),i=f(r,u),p=f(a,M),h=f(r,M),S=(Y,z,d)=>Y+(z-Y)*d,X=S(S(g.r,i.r,l),S(p.r,h.r,l),m),v=S(S(g.g,i.g,l),S(p.g,h.g,l),m),V=S(S(g.b,i.b,l),S(p.b,h.b,l),m),B=S(S(g.a,i.a,l),S(p.a,h.a,l),m);return{r:X,g:v,b:V,a:B}}function J(c,e,n,s,o,t,a,u,r,M){const l=et(e),m=M?.showDepthVis??!1,f=M?.maxZ??500,g=r??{minX:-o/2,minY:-t/2,maxX:o/2,maxY:t/2},i=g.maxX-g.minX,p=g.maxY-g.minY,h=Math.floor(i*a),S=Math.floor(p*a);if(h<=0||S<=0)return;const X=new ImageData(h,S),v=X.data;for(let d=0;d<S;d++)for(let P=0;P<h;P++){const T=g.minX+P/a,b=g.minY+d/a,I=u(T,b);if(!I||I.z<=0)continue;const y=(d*h+P)*4;if(m){const Z=Math.min(1,Math.max(0,I.z/f)),x=Math.floor(Z*200+55);v[y]=Math.floor(x*.3),v[y+1]=Math.floor(x*.6),v[y+2]=x,v[y+3]=200}else{const{u:Z,v:x}=I,w=ct(l,Z,x);w&&(v[y]=Math.round(w.r),v[y+1]=Math.round(w.g),v[y+2]=Math.round(w.b),v[y+3]=Math.round(w.a))}}const V=new OffscreenCanvas(h,S),B=V.getContext("2d");if(!B)return;B.putImageData(X,0,0);const Y=n+g.minX,z=s+g.minY;a!==1?c.drawImage(V,Y,z,i,p):c.drawImage(V,Y,z)}function K(c,e,n,s=20){if(!("save"in c))return;const o=c;o.save(),o.strokeStyle="#00ff00",o.lineWidth=2,o.beginPath(),o.moveTo(e-s,n),o.lineTo(e+s,n),o.stroke(),o.beginPath(),o.moveTo(e,n-s),o.lineTo(e,n+s),o.stroke(),o.fillStyle="#00ff00",o.beginPath(),o.arc(e,n,3,0,Math.PI*2),o.fill(),o.restore()}function U(c,e,n,s,o,t){const a=Math.cos(s),u=Math.sin(s),r=Math.cos(o),M=Math.sin(o),l=Math.cos(t),m=Math.sin(t);let f=c,g=e,i=n;if(t!==0){const p=f,h=g;f=p*l-h*m,g=p*m+h*l}if(o!==0){const p=f,h=i;f=p*r+h*M,i=-p*M+h*r}if(s!==0){const p=g,h=i;g=p*a-h*u,i=p*u+h*a}return[f,g,i]}function it(c,e,n,s,o,t){const a=Math.cos(s),u=Math.sin(s),r=Math.cos(o),M=Math.sin(o),l=Math.cos(t),m=Math.sin(t);let f=c,g=e,i=n;if(s!==0){const p=g,h=i;g=p*a+h*u,i=-p*u+h*a}if(o!==0){const p=f,h=i;f=p*r-h*M,i=p*M+h*r}if(t!==0){const p=f,h=g;f=p*l+h*m,g=-p*m+h*l}return[f,g,i]}function rt(c,e,n,s,o,t){if(!("save"in c))return;const a=c;a.save(),a.strokeStyle="#ff6600",a.lineWidth=1.5,a.setLineDash([4,6]);const u=50,r=3;for(let M=-r;M<=r;M++){const l=M*u,m=[];for(let f=-10;f<=10;f++){const g=f*u,i=t(l,g);i&&m.push({x:e+i.x,y:n+i.y})}if(m.length>1){a.beginPath(),a.moveTo(m[0].x,m[0].y);for(let f=1;f<m.length;f++)a.lineTo(m[f].x,m[f].y);a.stroke()}}for(let M=-r;M<=r;M++){const l=M*u,m=[];for(let f=-10;f<=10;f++){const g=f*u,i=t(g,l);i&&m.push({x:e+i.x,y:n+i.y})}if(m.length>1){a.beginPath(),a.moveTo(m[0].x,m[0].y);for(let f=1;f<m.length;f++)a.lineTo(m[f].x,m[f].y);a.stroke()}}a.restore()}function lt(c,e,n,s,o,t,a,u){if(!("save"in c))return;const r=c;r.save(),r.lineWidth=2,r.setLineDash([6,4]);const M=Math.sin(t);let l=1/0,m=-1/0;const f=(d,P,T)=>{const b=P*M,I=u/(u+b);return{x:e+d*I,y:n+P*I,z:T}},g=(d,P,T)=>{const b=T-P;if(b<.001)return"#ff6600";const I=(d-P)/b,y=Math.round(100+I*155),Z=Math.round(30+I*70),x=Math.round(0+I*0);return`rgb(${y},${Z},${x})`},i=32,p=[],h=[],S=[],X=[],v=t>.01?-Math.PI/2:0,V=t>.01?Math.PI/2:Math.PI*2,B=t<-.01?-Math.PI/2:0,Y=t<-.01?Math.PI/2:Math.PI*2;for(let d=0;d<=i;d++){const P=d/i,T=v+P*(V-v),b=Math.sin(T)*s,I=Math.cos(T)*s,y=-o/2,[Z,x,w]=U(b,y,I,t,0,a),k=f(Z,x,w);p.push(k),l=Math.min(l,w),m=Math.max(m,w)}for(let d=0;d<=i;d++){const P=d/i,T=B+P*(Y-B),b=Math.sin(T)*s,I=Math.cos(T)*s,y=o/2,[Z,x,w]=U(b,y,I,t,0,a),k=f(Z,x,w);h.push(k),l=Math.min(l,w),m=Math.max(m,w)}for(let d=0;d<=10;d++){const P=d/10,T=-o/2+P*o,[b,I,y]=U(-s,T,0,t,0,a);S.push(f(b,I,y)),l=Math.min(l,y),m=Math.max(m,y);const[Z,x,w]=U(s,T,0,t,0,a);X.push(f(Z,x,w)),l=Math.min(l,w),m=Math.max(m,w)}const z=d=>{for(let P=0;P<d.length-1;P++){const T=d[P],b=d[P+1],I=(T.z+b.z)/2;r.strokeStyle=g(I,l,m),r.beginPath(),r.moveTo(T.x,T.y),r.lineTo(b.x,b.y),r.stroke()}};z(p),z(h),z(S),z(X),r.restore()}function ft(c,e,n,s,o,t,a,u,r,M){const{diameter:l,perspective:m,rotationX:f,rotationZ:g}=a,i=l/2,p=f*Math.PI/180,h=g*Math.PI/180,S=Math.abs(p)>.001,X=m??1,v=X>.01?i*(10/X):i*1e3,V=u.scale,B=u.translateX,Y=u.translateY;let z={minX:-i,minY:-t/2,maxX:i,maxY:t/2};if(S){const T=[{x:-i,y:-t/2},{x:i,y:-t/2},{x:i,y:t/2},{x:-i,y:t/2}],b=[];for(const y of T){const[Z,x,w]=U(y.x,y.y,i,p,0,h),k=v/(v+w);b.push({x:Z*k,y:x*k});const[j,W,C]=U(y.x,y.y,0,p,0,h),D=v/(v+C);b.push({x:j*D,y:W*D})}const I=i*Math.abs(Math.sin(p));b.length>0&&(z={minX:Math.min(...b.map(y=>y.x))-2,minY:Math.min(...b.map(y=>y.y))-I-2,maxX:Math.max(...b.map(y=>y.x))+2,maxY:Math.max(...b.map(y=>y.y))+I+2})}const d=(T,b)=>{const I=Math.cos(h),y=Math.sin(h),Z=T*I+b*y,x=-T*y+b*I,w=Math.cos(p),k=Math.sin(p),j=x*k,W=v/(v+j),C=Z/W,D=x/W;if(Math.abs(C)>i)return null;const E=Math.sqrt(i*i-C*C);if(Math.abs(w)<.01)return null;const L=(D+E*k)/w,O=L*k+E*w;if(O<0)return null;const F=Math.asin(C/i)*i/o+.5,$=L/t+.5,q=(F-.5-B)/V+.5,A=($-.5-Y)/V+.5;return q>=0&&q<=1&&A>=0&&A<=1?{u:q*e.width,v:A*e.height,z:O}:null},P=M.showDepthVis?{showDepthVis:!0,maxZ:i}:void 0;M.showBounds&&lt(c,n,s,i,t,p,h,v),J(c,e,n,s,o,t,r,d,z,P),M.showCrosshair&&K(c,n,s)}function ht(c,e,n,s,o,t,a,u,r,M){const{rotationX:l,rotationY:m,rotationZ:f,depthScale:g}=a,i=l*(Math.PI/180),p=m*(Math.PI/180),h=f*(Math.PI/180),S=Math.abs(i)>.001||Math.abs(p)>.001||Math.abs(h)>.001,X=u.scale,v=u.translateX,V=u.translateY,B=g*.001,Y=B>1e-4?1/B:1e4,z=(x,w)=>{const[k,j,W]=U(x,w,0,i,p,h),C=W+Y;if(C<=0)return null;const D=Y/C,E=k*D,L=j*D;return{x:E,y:L,z:W}};let d=-o/2,P=o/2,T=-t/2,b=t/2;if(S){const x=[];for(let k=0;k<=10;k++){const j=k/10,W=-o/2+j*o,C=z(W,-t/2);C&&x.push({x:C.x,y:C.y});const D=z(W,t/2);D&&x.push({x:D.x,y:D.y});const E=-t/2+j*t,L=z(-o/2,E);L&&x.push({x:L.x,y:L.y});const O=z(o/2,E);O&&x.push({x:O.x,y:O.y})}if(x.length>0){d=Math.min(...x.map(D=>D.x)),P=Math.max(...x.map(D=>D.x)),T=Math.min(...x.map(D=>D.y)),b=Math.max(...x.map(D=>D.y));const k=Math.sqrt(i*i+p*p+h*h),j=2,W=k*Math.max(o,t)*.1,C=j+W;d-=C,P+=C,T-=C,b+=C}}const I={minX:d,minY:T,maxX:P,maxY:b},y=(x,w)=>{if(!S){const wt=x/o+.5,St=w/t+.5,tt=(wt-.5-v)/X+.5,nt=(St-.5-V)/X+.5;return tt>=0&&tt<=1&&nt>=0&&nt<=1?{u:tt*e.width,v:nt*e.height,z:1}:null}const[k,j,W]=U(0,0,1,i,p,h),C=0,D=0,E=0,L=-Y,O=x-D,R=w-E,H=0-L,F=Math.sqrt(O*O+R*R+H*H),$=O/F,q=R/F,A=H/F,st=$*k+q*j+A*W;if(Math.abs(st)<1e-4)return null;const G=-(D*k+E*j+L*W+C)/st;if(G<0)return null;const yt=D+$*G,xt=E+q*G,N=L+A*G;if(N<L)return null;const[bt,vt]=it(yt,xt,N,i,p,h),Pt=bt/o+.5,Tt=vt/t+.5,It=N+Y,Q=(Pt-.5-v)/X+.5,_=(Tt-.5-V)/X+.5;return Q>=0&&Q<=1&&_>=0&&_<=1?{u:Q*e.width,v:_*e.height,z:It}:null},Z=M.showDepthVis?{showDepthVis:!0,maxZ:Y*.5}:void 0;M.showBounds&&rt(c,n,s,o,t,z),J(c,e,n,s,o,t,r,y,I,Z),M.showCrosshair&&K(c,n,s)}function pt(c,e,n,s,o){if(!("save"in c))return;const t=c;if(t.save(),t.strokeStyle="#ff6600",t.lineWidth=2,t.setLineDash([6,4]),t.beginPath(),t.arc(e,n,s,0,Math.PI*2),t.stroke(),t.beginPath(),t.moveTo(e-s,n),t.lineTo(e+s,n),t.stroke(),t.beginPath(),t.moveTo(e,n-s),t.lineTo(e,n+s),t.stroke(),t.beginPath(),t.moveTo(e-s,n-s),t.lineTo(e-s,n+s),t.stroke(),t.beginPath(),t.moveTo(e+s,n-s),t.lineTo(e+s,n+s),t.stroke(),Math.abs(o)>.001){t.strokeStyle="#ffaa00";const a=Math.cos(o),u=Math.sin(o),r=s*.7;t.beginPath(),t.moveTo(e+a*r,n+u*r),t.lineTo(e-a*r,n-u*r),t.stroke(),t.beginPath(),t.moveTo(e-u*r,n+a*r),t.lineTo(e+u*r,n-a*r),t.stroke()}t.restore()}function mt(c,e,n,s,o,t,a,u,r,M){const{radius:l,rotationZ:m}=a,f=m*(Math.PI/180),g=u.scale,i=u.translateX,p=u.translateY,h={minX:-l,minY:-l,maxX:l,maxY:l},S=(v,V)=>{const B=Math.sqrt(v*v+V*V);if(B>l)return null;const Y=Math.sqrt(l*l-v*v-V*V),d=Math.asin(B/l)*l,P=Math.atan2(V,v)-f,T=d*Math.cos(P),b=d*Math.sin(P),I=T/o+.5,y=b/t+.5,Z=(I-.5-i)/g+.5,x=(y-.5-p)/g+.5;return Z>=0&&Z<=1&&x>=0&&x<=1?{u:Z*e.width,v:x*e.height,z:Y}:null},X=M.showDepthVis?{showDepthVis:!0,maxZ:l}:void 0;M.showBounds&&pt(c,n,s,l,f),J(c,e,n,s,o,t,r,S,h,X),M.showCrosshair&&K(c,n,s)}function ut(c,e,n,s,o,t,a){c.drawImage(e,n-o/2,s-t/2,o,t)}function dt(c,e,n,s,o,t,a){if(!a.enabled||a.shape==="none"){c.drawImage(e,n-o/2,s-t/2,o,t);return}const u=a.quality??1,r=a.image??ot,M=a.debug??at;switch(a.shape){case"cylinder":a.cylinder&&ft(c,e,n,s,o,t,a.cylinder,r,u,M);break;case"plane":a.plane&&ht(c,e,n,s,o,t,a.plane,r,u,M);break;case"sphere":a.sphere&&mt(c,e,n,s,o,t,a.sphere,r,u,M);break;case"custom":a.custom&&ut(c,e,n,s,o,t,a.custom);break;default:c.drawImage(e,n-o/2,s-t/2,o,t)}}self.onmessage=async c=>{const{type:e,payload:n}=c.data;if(e==="render"){const s=performance.now();try{const o=await Mt(n),t=performance.now()-s,a={type:"complete",payload:{id:n.id,result:o,frameTime:t}};self.postMessage(a,[o])}catch(o){const t={type:"error",payload:{id:n.id,error:o instanceof Error?o.message:String(o)}};self.postMessage(t)}}};async function Mt(c){const{canvasWidth:e,canvasHeight:n,layers:s,images:o}=c;performance.now();const t=new OffscreenCanvas(e,n),a=t.getContext("2d");if(!a)throw new Error("Failed to get 2d context");a.fillStyle="#ffffff",a.fillRect(0,0,e,n);for(let r=0;r<s.length;r++){const M=s[r],l=o[r];l&&gt(a,l,M)}return await createImageBitmap(t)}function gt(c,e,n){c.save(),c.globalAlpha=n.opacity;const s=n.x,o=n.y;c.translate(s,o),c.rotate(n.rotation*Math.PI/180),n.warp&&n.warp.enabled&&n.warp.shape!=="none"?dt(c,e,0,0,n.width,n.height,n.warp):c.drawImage(e,-n.width/2,-n.height/2,n.width,n.height),c.restore()}})();\n', tt = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", st], { type: "text/javascript;charset=utf-8" });
+function Gt(o) {
+  let r;
+  try {
+    if (r = tt && (self.URL || self.webkitURL).createObjectURL(tt), !r) throw "";
+    const t = new Worker(r, {
+      name: o?.name
+    });
+    return t.addEventListener("error", () => {
+      (self.URL || self.webkitURL).revokeObjectURL(r);
+    }), t;
+  } catch {
+    return new Worker(
+      "data:text/javascript;charset=utf-8," + encodeURIComponent(st),
+      {
+        name: o?.name
+      }
+    );
+  }
+}
+class $t {
   worker = null;
   batcher;
   pendingRequest = null;
@@ -587,66 +607,59 @@ class Kt {
   frameId = 0;
   lastCompletedId = 0;
   options;
-  constructor(a) {
-    this.options = a, this.batcher = new at((t) => this.submitToWorker(t)), this.initWorker();
+  constructor(r) {
+    this.options = r, this.batcher = new at((t) => this.submitToWorker(t)), this.initWorker();
   }
   initWorker() {
     try {
-      this.worker = new Worker(
-        new URL(
-          /* @vite-ignore */
-          "/assets/render.worker-CozETkb6.js",
-          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 = new Gt(), this.worker.onmessage = (r) => {
+        this.handleWorkerMessage(r.data);
+      }, this.worker.onerror = (r) => {
+        console.error("Worker error:", r), this.options.onError?.(`Worker error: ${r.message}`);
       };
-    } catch (a) {
-      console.error("Failed to create worker:", a), this.options.onError?.("Failed to create render worker");
+    } catch (r) {
+      console.error("Failed to create worker:", r), this.options.onError?.("Failed to create render worker");
     }
   }
-  request(a) {
-    this.batcher.queue(a);
+  request(r) {
+    this.batcher.queue(r);
   }
-  submitToWorker(a) {
-    const t = ++this.frameId, s = {
-      ...a,
+  submitToWorker(r) {
+    const t = ++this.frameId, a = {
+      ...r,
       id: t
     };
-    this.isWorking ? this.pendingRequest = s : this.sendToWorker(s);
+    this.isWorking ? this.pendingRequest = a : this.sendToWorker(a);
   }
-  sendToWorker(a) {
+  sendToWorker(r) {
     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: r }, a = r.images.filter((n) => n 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(r) {
+    if (r.type === "error") {
+      console.error("Render error:", r.payload.error), this.isWorking = !1, this.processNext();
       return;
     }
-    const { id: t, result: s, frameTime: n } = a.payload;
+    const { id: t, result: a, frameTime: n } = r.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, n), this.processNext();
   }
   processNext() {
     if (this.pendingRequest) {
-      const a = this.pendingRequest;
-      this.pendingRequest = null, this.sendToWorker(a);
+      const r = this.pendingRequest;
+      this.pendingRequest = null, this.sendToWorker(r);
     }
   }
   destroy() {
     this.batcher.destroy(), this.worker && (this.worker.terminate(), this.worker = null);
   }
 }
-function qe(r, a, t = {}, s) {
+function Oe(o, r, t = {}, a) {
   const n = {
     loadedImages: /* @__PURE__ */ new Map(),
     imageBitmaps: /* @__PURE__ */ new Map(),
@@ -658,115 +671,115 @@ 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;
+  n.ctx = o.getContext("2d");
+  function s(_, k) {
+    return Object.keys(k).length === 0 ? _ : {
+      ..._,
+      layers: _.layers.map((P) => {
+        const S = P.name || P.id, b = k[S];
+        return b ? {
+          ...P,
+          src: b
+        } : P;
       })
     };
   }
   if (!n.ctx)
     return () => {
     };
-  let l = a, f = t;
+  let l = r, 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;
+    return s(l, f);
+  }
+  h(), n.scheduler = new $t({
+    onResult: (_, k) => {
+      if (n.ctx && o)
+        if (n.ctx.drawImage(_, 0, 0, o.width, o.height), _.close(), n.renderStartTime !== null) {
+          const P = performance.now() - n.renderStartTime;
+          a?.(P), n.renderStartTime = null;
         } 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:", _), n.useWorker = !1, p();
     }
   });
   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 || !n.ctx) return;
+    const _ = h(), k = _.layers.map((S) => S.src).join(","), P = _.layers.map((S) => {
+      const b = S.effects.find((c) => c.type === "warp"), d = S.effects.find((c) => c.type === "restyle"), m = b ? `${b.enabled}:${b.shape}` : "none", i = d ? JSON.stringify(d) : "none";
+      return `${S.id}:${S.transform.x},${S.transform.y},${S.transform.scale},${S.transform.rotation},${S.opacity},${S.visible}:${m}:${i}`;
     }).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 && _();
+    (o.width !== _.width || o.height !== _.height) && (o.width = _.width, o.height = _.height), k !== n.lastSources ? (n.lastSources = k, n.imagesLoaded = !1, g()) : n.imagesLoaded && P !== n.lastRenderKey ? (n.lastRenderKey = P, p()) : n.imagesLoaded ? n.imagesLoaded && p() : h().layers.length > 0 && g();
   }
-  async function 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("../");
+  async function u(_) {
+    if (n.loadedImages.has(_))
+      return n.loadedImages.get(_);
+    const k = _.startsWith("data:");
+    let S = _.startsWith("/") || _.startsWith("./") || _.startsWith("../");
     if (!k && !S && typeof window < "u")
       try {
-        S = new URL(b, window.location.href).origin === window.location.origin;
+        S = new URL(_, window.location.href).origin === window.location.origin;
       } catch {
         S = !0;
       }
-    const g = new Image();
+    const b = new Image();
     try {
-      if (await new Promise((u, p) => {
-        const o = setTimeout(() => {
-          p(new Error("Image load timeout"));
+      if (await new Promise((d, m) => {
+        const i = setTimeout(() => {
+          m(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), m(c);
+        }, b.src = _;
+      }), n.loadedImages.set(_, b), !k && !S)
         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((m, i) => {
+            d.onload = () => m(), d.onerror = () => i(new Error("CORS failed")), d.src = _;
+          }), n.loadedImages.set(_, d);
           try {
-            const p = await createImageBitmap(u);
-            n.imageBitmaps.set(b, p);
-          } catch (p) {
-            console.warn("Failed to create ImageBitmap:", p);
+            const m = await createImageBitmap(d);
+            n.imageBitmaps.set(_, m);
+          } catch (m) {
+            console.warn("Failed to create ImageBitmap:", m);
           }
-          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 m = await createImageBitmap(b);
+            n.imageBitmaps.set(_, m);
           } 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);
+          n.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 g() {
     performance.now();
-    const b = h();
-    if (b.layers.length === 0) {
-      n.imagesLoaded = !0, n.ctx && m();
+    const _ = h();
+    if (_.layers.length === 0) {
+      n.imagesLoaded = !0, n.ctx && p();
       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))), n.imagesLoaded = !0, n.ctx && o && p();
   }
-  function m() {
-    if (!(!n.ctx || !r)) {
+  function p() {
+    if (!(!n.ctx || !o)) {
       if (n.useWorker && n.scheduler) {
         T();
         return;
@@ -777,32 +790,32 @@ function qe(r, a, t = {}, s) {
   async function T() {
     if (!n.scheduler) return;
     n.renderStartTime = performance.now();
-    const b = h(), k = [], C = [];
+    const _ = h(), k = [], P = [];
     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 (!p) {
+    for (const b of _.layers) {
+      if (!b.visible) continue;
+      const d = n.loadedImages.get(b.src), m = n.imageBitmaps.get(b.src);
+      if (!d) continue;
+      if (!m) {
         S = !0;
         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(m, b.effects), c = b.effects.find((j) => j.type === "warp");
+      let M = i.width, I = i.height;
+      const X = M * b.transform.scale, J = I * b.transform.scale;
+      let B;
+      if (i.image instanceof ImageBitmap)
+        B = i.image;
       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;
+      let A = null;
       if (c) {
-        const z = {
+        const j = {
           type: "warp",
           shape: c.shape,
           enabled: !!c.enabled,
@@ -813,199 +826,208 @@ 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(([Z, L]) => [Z, Number(L)])
           )
-        }), U = z;
+        }), A = 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(X),
         height: Number(J),
-        rotation: Number(g.transform.rotation),
-        opacity: Number(g.opacity),
-        warp: U
-      }), C.push(Z);
+        rotation: Number(b.transform.rotation),
+        opacity: Number(b.opacity),
+        warp: A
+      }), P.push(B);
     }
     if (S || k.length === 0) {
       v();
       return;
     }
     try {
-      const g = await Promise.all(
-        C.map((u) => createImageBitmap(u))
+      const b = await Promise.all(
+        P.map((d) => createImageBitmap(d))
       );
       n.scheduler?.request({
-        canvasWidth: b.width,
-        canvasHeight: b.height,
+        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();
+    if (!n.ctx || !o) return;
+    const _ = n.renderStartTime ?? performance.now(), k = h();
     n.ctx.fillStyle = "#ffffff", n.ctx.fillRect(0, 0, k.width, k.height);
     for (const S of k.layers) {
       if (!S.visible) continue;
       performance.now();
-      const g = n.loadedImages.get(S.src);
-      if (!g) continue;
-      if (!g.complete || g.naturalWidth === 0) {
+      const b = n.loadedImages.get(S.src);
+      if (!b) continue;
+      if (!b.complete || b.naturalWidth === 0) {
         console.warn("Image not fully loaded:", S.src);
         continue;
       }
-      const u = et(g, S.effects), p = S.effects.find((Z) => Z.type === "warp");
-      let o = u.width, c = u.height;
+      const d = et(b, S.effects), m = S.effects.find((B) => B.type === "warp");
+      let i = d.width, c = d.height;
       n.ctx.save(), n.ctx.globalAlpha = S.opacity;
-      const M = S.transform.x, 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 M = S.transform.x, I = S.transform.y;
+      n.ctx.translate(M, I), n.ctx.rotate(S.transform.rotation * Math.PI / 180);
+      const X = i * S.transform.scale, J = c * S.transform.scale;
       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);
+        m && m.enabled && m.shape !== "none" ? Ft(n.ctx, d.image, 0, 0, X, J, m) : n.ctx.drawImage(d.image, -X / 2, -J / 2, X, J);
+      } catch (B) {
+        console.warn("Failed to draw image to canvas (may be CORS issue):", S.src, B);
       }
       n.ctx.restore();
     }
-    const C = performance.now() - b;
-    s?.(C), n.renderStartTime !== null && (n.renderStartTime = null);
+    const P = performance.now() - _;
+    a?.(P), n.renderStartTime !== null && (n.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();
+    for (const _ of n.imageBitmaps.values())
+      _.close();
   }
-  const I = x;
-  return I.update = y, I;
+  const z = x;
+  return z.update = y, z;
 }
-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);
+var Qt = e.from_html('<div><canvas class="canvas svelte-1xdpk2w"></canvas></div>');
+const en = {
+  hash: "svelte-1xdpk2w",
+  code: ".mockup-renderer.svelte-1xdpk2w {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;}.canvas.svelte-1xdpk2w {display:block;max-width:100%;max-height:100%;}.mockup-renderer.contain.svelte-1xdpk2w .canvas:where(.svelte-1xdpk2w) {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}.mockup-renderer.cover.svelte-1xdpk2w .canvas:where(.svelte-1xdpk2w) {width:100%;height:100%;object-fit:cover;}"
+};
+function ma(o, r) {
+  e.push(r, !0), e.append_styles(o, en);
+  let t = e.prop(r, "imageOverrides", 19, () => ({})), a = e.prop(r, "objectFit", 3, "contain"), n = e.state(null);
   Te(() => {
     if (e.get(n))
-      return qe(e.get(n), a.mockup.composition, t());
+      return Oe(e.get(n), r.mockup.composition, t());
   });
-  var i = Jt();
+  var s = Qt();
   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, (h) => e.set(n, h), () => e.get(n)), e.reset(s), e.template_effect(() => l = e.set_class(s, 1, "mockup-renderer svelte-1xdpk2w", null, l, {
+    contain: a() === "contain",
+    cover: a() === "cover"
+  })), e.append(o, s), e.pop();
 }
-const Gt = {
+const tn = {
   x: 0,
   y: 0,
   scale: 1,
   rotation: 0
-}, Qt = {
-  transform: { ...Gt },
+}, nn = {
+  transform: { ...tn },
   opacity: 1,
   visible: !0,
   effects: []
-}, Ce = {
+}, Pe = {
   zoom: 1,
   panX: 0,
   panY: 0
-}, st = {
+}, ot = {
   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(
+var rn = e.from_html('<div class="zoomable-canvas svelte-zjsyu1" role="application" aria-label="Zoomable canvas - scroll to zoom, drag to pan"><div class="canvas-frame svelte-zjsyu1"><!></div> <div class="view-controls svelte-zjsyu1"><span class="zoom-indicator svelte-zjsyu1"> </span> <button class="reset-btn svelte-zjsyu1">Reset</button></div></div>');
+const an = {
+  hash: "svelte-zjsyu1",
+  code: ".zoomable-canvas.svelte-zjsyu1 {width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-bg, #f5f5f5);overflow:hidden;cursor:grab;position:relative;}.zoomable-canvas.svelte-zjsyu1:active {cursor:grabbing;}.canvas-frame.svelte-zjsyu1 {transform-origin:center center;box-shadow:0 4px 16px rgba(0, 0, 0, 0.1);}.view-controls.svelte-zjsyu1 {position:absolute;bottom:1rem;right:1rem;display:flex;align-items:center;gap:0.5rem;background:rgba(0, 0, 0, 0.7);padding:0.3rem 0.5rem;border-radius:4px;}.zoom-indicator.svelte-zjsyu1 {color:#fff;font-size:0.75rem;font-family:monospace;min-width:2.5rem;text-align:center;}.reset-btn.svelte-zjsyu1 {background:transparent;border:1px solid rgba(255, 255, 255, 0.3);color:rgba(255, 255, 255, 0.8);padding:0.2rem 0.5rem;border-radius:3px;font-size:0.75rem;cursor:pointer;transition:all 200ms;}.reset-btn.svelte-zjsyu1:hover {border-color:rgba(255, 255, 255, 0.6);color:#fff;}"
+};
+function sn(o, r) {
+  e.append_styles(o, an);
+  let t = e.state(e.proxy({ ...Pe })), a = e.state(!1), n = e.state(e.proxy({ x: 0, y: 0 }));
+  function s(_) {
+    _.preventDefault();
+    const k = _.deltaY > 0 ? 0.9 : 1.1, P = Math.max(0.25, Math.min(4, e.get(t).zoom * k));
+    e.set(t, { ...e.get(t), zoom: P }, !0);
+  }
+  function l(_) {
+    _.button === 0 && (e.set(a, !0), e.set(
       n,
       {
-        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(n).x,
+        panY: _.clientY - e.get(n).y
       },
       !0
     );
   }
   function h() {
-    e.set(s, !1);
+    e.set(a, !1);
   }
   function w() {
-    e.set(t, { ...Ce }, !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);
-  var v = e.sibling(m, 2), y = e.child(v), x = e.child(y);
+    e.set(t, { ...Pe }, !0);
+  }
+  const u = e.derived(() => `transform: scale(${e.get(t).zoom}) translate(${e.get(t).panX / e.get(t).zoom}px, ${e.get(t).panY / e.get(t).zoom}px);`);
+  var g = rn();
+  g.__mousedown = l, g.__mousemove = f, g.__mouseup = h;
+  var p = e.child(g), T = e.child(p);
+  e.snippet(T, () => r.children), e.reset(p);
+  var v = e.sibling(p, 2), y = e.child(v), x = e.child(y);
   e.reset(y);
-  var 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 z = e.sibling(y, 2);
+  z.__click = w, e.reset(v), e.reset(g), e.template_effect(
+    (_) => {
+      e.set_style(p, e.get(u)), e.set_text(x, `${_ ?? ""}%`);
     },
     [() => Math.round(e.get(t).zoom * 100)]
-  ), e.event("wheel", _, i), e.event("mouseleave", _, h), e.append(r, _);
+  ), e.event("wheel", g, s), e.event("mouseleave", g, h), e.append(o, g);
 }
 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 on(o, r, t = {}, a) {
+  let n = r, s = t, l = null;
+  const f = new at((u) => {
+    l?.update ? l.update(u.config, u.overrides) : (l?.(), l = Oe(o, u.config, u.overrides, a));
   });
-  l = qe(r, n, i, s);
-  function h(d, _) {
-    n = d, _ !== void 0 && (i = _), f.queue({ config: n, overrides: i });
+  l = Oe(o, n, s, a);
+  function h(u, g) {
+    n = u, g !== void 0 && (s = g), f.queue({ config: n, overrides: s });
   }
   return {
     update: h,
@@ -1014,357 +1036,383 @@ function tn(r, a, t = {}, s) {
     }
   };
 }
-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 ln = e.from_html('<div class="render-time svelte-1p1rf8j"> </div>'), cn = e.from_html('<div><canvas class="canvas svelte-1p1rf8j"></canvas> <!></div>');
+const dn = {
+  hash: "svelte-1p1rf8j",
+  code: ".mockup-renderer.svelte-1p1rf8j {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;}.canvas.svelte-1p1rf8j {display:block;max-width:100%;max-height:100%;}.mockup-renderer.contain.svelte-1p1rf8j .canvas:where(.svelte-1p1rf8j) {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}.mockup-renderer.cover.svelte-1p1rf8j .canvas:where(.svelte-1p1rf8j) {width:100%;height:100%;object-fit:cover;}.render-time.svelte-1p1rf8j {position:absolute;top:8px;right:8px;background:rgba(0, 0, 0, 0.7);color:white;padding:4px 8px;border-radius:4px;font-size:12px;font-family:monospace;pointer-events:none;z-index:10;}"
+};
+function un(o, r) {
+  e.push(r, !0), e.append_styles(o, dn);
+  let t = e.prop(r, "imageOverrides", 19, () => ({})), a = e.prop(r, "objectFit", 3, "contain"), n = e.prop(r, "debounceMs", 3, 100), s = e.state(null), l = e.state(null), f = e.state(0), h = e.state(null), w = null, u = e.state(""), g = e.state(""), p = e.state(null);
   const T = 3;
   function v() {
     if (!e.get(l)) return;
-    const g = JSON.stringify(a.mockup.composition), u = JSON.stringify(t());
-    g === e.get(d) && u === e.get(_) || (e.update(f), e.set(
+    const b = JSON.stringify(r.mockup.composition), d = JSON.stringify(t());
+    b === e.get(u) && d === e.get(g) || (e.update(f), e.set(
       h,
       {
-        composition: a.mockup.composition,
+        composition: r.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.get(l).update(e.get(h).composition, e.get(h).overrides), e.set(u, b, !0), e.set(g, d, !0);
     }), e.set(h, null))) : (w && clearTimeout(w), w = setTimeout(
       () => {
         e.get(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.get(l).update(e.get(h).composition, e.get(h).overrides), e.set(u, JSON.stringify(e.get(h).composition), !0), e.set(g, JSON.stringify(e.get(h).overrides), !0);
         }), e.set(h, null), e.set(f, 0)), w = null;
       },
       n()
     )));
   }
-  Te(() => (xt().then(() => {
-    e.get(i) && (e.set(
+  Te(() => (Mt().then(() => {
+    e.get(s) && (e.set(
       l,
-      tn(e.get(i), a.mockup.composition, t(), (g) => {
-        e.set(m, g, !0);
+      on(e.get(s), r.mockup.composition, t(), (b) => {
+        e.set(p, b, !0);
       }),
       !0
-    ), e.set(d, JSON.stringify(a.mockup.composition), !0), e.set(_, JSON.stringify(t()), !0));
+    ), e.set(u, JSON.stringify(r.mockup.composition), !0), e.set(g, 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(r.mockup.composition)), x = e.derived(() => JSON.stringify(t()));
   e.user_effect(() => {
     e.get(y), e.get(x), e.get(l) && v();
-  }), kt(() => {
+  }), Tt(() => {
     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 z = cn();
+  let _;
+  var k = e.child(z);
+  e.bind_this(k, (b) => e.set(s, b), () => e.get(s));
+  var P = e.sibling(k, 2);
   {
-    var 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 S = (b) => {
+      var d = ln(), m = e.child(d);
+      e.reset(d), e.template_effect((i) => e.set_text(m, `${i ?? ""}ms`), [() => e.get(p).toFixed(1)]), e.append(b, d);
     };
-    e.if(C, (g) => {
-      e.get(m) !== null && g(S);
+    e.if(P, (b) => {
+      e.get(p) !== null && b(S);
     });
   }
-  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(z), e.template_effect(() => _ = e.set_class(z, 1, "mockup-renderer svelte-1p1rf8j", null, _, {
+    contain: a() === "contain",
+    cover: a() === "cover"
+  })), e.append(o, z), 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 mn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
+function pn(o, r) {
+  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
+  var n = mn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
+  }), e.append(o, n);
 }
-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 vn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>');
+function fn(o, r) {
+  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
+  var n = vn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
+  }), e.append(o, n);
 }
-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 hn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>');
+function Ae(o, r) {
+  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
+  var n = hn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
+  }), e.append(o, n);
 }
-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 gn = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>');
+function bn(o, r) {
+  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
+  var n = gn();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
+  }), e.append(o, n);
 }
-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 _n = e.from_html('<button type="button" class="reset-btn svelte-18gpljp" title="Reset to default"><!></button>'), yn = e.from_html('<div class="control-group"><div class="control-row svelte-18gpljp"><!> <label class="control-label svelte-18gpljp"><span class="label-text svelte-18gpljp"> </span> <div class="control-content svelte-18gpljp"><!></div></label></div></div>');
+const wn = {
+  hash: "svelte-18gpljp",
+  code: ".control-row.svelte-18gpljp {display:flex;align-items:center;gap:0.25rem;min-width:0;max-width:100%;}.reset-btn.svelte-18gpljp {display:flex;align-items:center;justify-content:center;padding:0.25rem;background:transparent;border:none;border-radius:4px;color:var(--color-text-muted, #666);cursor:pointer;opacity:0.5;transition:opacity 0.15s, color 0.15s;}.reset-btn.svelte-18gpljp:hover {opacity:1;color:var(--color-primary, #007bff);}.control-label.svelte-18gpljp {display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0;}.label-text.svelte-18gpljp {width:80px;flex-shrink:0;font-size:0.875rem;color:var(--color-text-muted, #666);}.control-content.svelte-18gpljp {flex:1;display:flex;align-items:center;gap:0.5rem;min-width:0;max-width:100%;overflow:hidden;}"
+};
+function F(o, r) {
+  e.append_styles(o, wn);
+  var t = yn(), a = e.child(t), n = e.child(a);
   {
-    var i = (_) => {
-      var m = mn();
-      m.__click = function(...v) {
-        a.onReset?.apply(this, v);
+    var s = (g) => {
+      var p = _n();
+      p.__click = function(...v) {
+        r.onReset?.apply(this, v);
       };
-      var T = e.child(m);
-      pn(T, { fontSize: "0.875rem" }), e.reset(m), e.append(_, m);
+      var T = e.child(p);
+      bn(T, { fontSize: "0.875rem" }), e.reset(p), e.append(g, p);
     };
-    e.if(n, (_) => {
-      a.onReset && _(i);
+    e.if(n, (g) => {
+      r.onReset && g(s);
     });
   }
   var l = e.sibling(n, 2), f = e.child(l), h = 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, () => r.children), e.reset(w), e.reset(l), e.reset(a), e.reset(t), e.template_effect(() => e.set_text(h, r.label)), e.append(o, t);
 }
 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);
+var xn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), kn = e.from_html('<input type="range" step="1" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), Mn = e.from_html('<input type="range" step="1" min="-360" max="360" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="1"/>', 1), Tn = e.from_html('<input type="range" min="0" max="1" step="0.01" class="svelte-efcks6"/> <input type="number" class="manual-input svelte-efcks6" step="0.01" min="0" max="1"/>', 1), Sn = e.from_html('<details class="section svelte-efcks6" open=""><summary class="section-title svelte-efcks6">Position & Transform</summary> <div class="section-content svelte-efcks6"><details class="subsection svelte-efcks6" open=""><summary class="subsection-title svelte-efcks6">Position</summary> <div class="subsection-content svelte-efcks6"><!> <!></div></details> <details class="subsection svelte-efcks6" open=""><summary class="subsection-title svelte-efcks6">Transform</summary> <div class="subsection-content svelte-efcks6"><!> <!></div></details></div></details>');
+const In = {
+  hash: "svelte-efcks6",
+  code: `.section.svelte-efcks6 {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-efcks6 {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-efcks6::-webkit-details-marker {display:none;}.section-title.svelte-efcks6::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-efcks6 > .section-title:where(.svelte-efcks6)::before {transform:rotate(90deg);}.section-content.svelte-efcks6 {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.manual-input.svelte-efcks6 {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-efcks6 {flex:1;min-width:0;max-width:100%;}.subsection.svelte-efcks6 {margin-top:0.75rem;border-top:1px solid var(--color-border, #e0e0e0);}.subsection.svelte-efcks6:first-child {margin-top:0;border-top:none;}.subsection-title.svelte-efcks6 {padding:0.5rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;}.subsection-title.svelte-efcks6::-webkit-details-marker {display:none;}.subsection-title.svelte-efcks6::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.subsection[open].svelte-efcks6 > .subsection-title:where(.svelte-efcks6)::before {transform:rotate(90deg);}.subsection-content.svelte-efcks6 {padding-bottom:0.25rem;}`
+};
+function zn(o, r) {
+  e.push(r, !0), e.append_styles(o, In);
+  let t = e.prop(r, "transform", 7), a = e.prop(r, "opacity", 7);
   const n = {
-    x: Math.round(a.canvasWidth / 2),
-    y: Math.round(a.canvasHeight / 2),
+    x: Math.round(r.canvasWidth / 2),
+    y: Math.round(r.canvasHeight / 2),
     rotation: 0,
     opacity: 1
   };
-  function i(C) {
-    a.onTransformChange({ ...t(), ...C });
+  function s(P) {
+    r.onTransformChange({ ...t(), ...P });
   }
-  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 = -r.canvasWidth / 2, f = r.canvasWidth * 1.5, h = -r.canvasHeight / 2, w = r.canvasHeight * 1.5;
+  var u = Sn(), g = e.sibling(e.child(u), 2), p = e.child(g), T = e.sibling(e.child(p), 2), v = e.child(T);
   F(v, {
     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: n.x }),
+    children: (P, S) => {
+      var b = xn(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => s({ x: Number(i.currentTarget.value) });
+      var m = e.sibling(d, 2);
+      e.remove_input_defaults(m), m.__input = (i) => s({ x: Number(i.currentTarget.value) }), e.template_effect(() => {
+        e.set_attribute(d, "min", l), e.set_attribute(d, "max", f);
+      }), e.bind_value(d, () => t().x, (i) => t().x = i), e.bind_value(m, () => t().x, (i) => t().x = i), e.append(P, b);
     }
   });
   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: n.y }),
+    children: (P, S) => {
+      var b = kn(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => s({ y: Number(i.currentTarget.value) });
+      var m = e.sibling(d, 2);
+      e.remove_input_defaults(m), m.__input = (i) => s({ y: Number(i.currentTarget.value) }), e.template_effect(() => {
+        e.set_attribute(d, "min", h), e.set_attribute(d, "max", w);
+      }), e.bind_value(d, () => t().y, (i) => t().y = i), e.bind_value(m, () => t().y, (i) => t().y = i), e.append(P, b);
     }
-  }), 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, {
+  }), e.reset(T), e.reset(p);
+  var x = e.sibling(p, 2), z = e.sibling(e.child(x), 2), _ = e.child(z);
+  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: n.rotation }),
+    children: (P, S) => {
+      var b = Mn(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => s({ rotation: Number(i.currentTarget.value) });
+      var m = e.sibling(d, 2);
+      e.remove_input_defaults(m), m.__input = (i) => s({ rotation: Number(i.currentTarget.value) }), e.bind_value(d, () => t().rotation, (i) => t().rotation = i), e.bind_value(m, () => t().rotation, (i) => t().rotation = i), e.append(P, b);
     }
   });
-  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: () => r.onOpacityChange(n.opacity),
+    children: (P, S) => {
+      var b = Tn(), d = e.first_child(b);
+      e.remove_input_defaults(d), d.__input = (i) => r.onOpacityChange(Number(i.currentTarget.value));
+      var m = e.sibling(d, 2);
+      e.remove_input_defaults(m), m.__input = (i) => r.onOpacityChange(Number(i.currentTarget.value)), e.bind_value(d, a), e.bind_value(m, a), e.append(P, b);
     }
-  }), e.reset(I), e.reset(x), e.reset(_), e.reset(d), e.append(r, d), e.pop();
+  }), e.reset(z), e.reset(x), e.reset(g), 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 Pn = e.from_html('<select class="mode-select svelte-1qmrgom"><option>Scale</option><option>Px</option></select>'), Cn = e.from_html('<input type="range" step="0.1" min="0.1" max="10" class="svelte-1qmrgom"/> <input type="number" class="manual-input svelte-1qmrgom" step="0.1" min="0.1" max="10"/>', 1), Nn = e.from_html('<input type="number" class="px-input svelte-1qmrgom" step="1" min="1" placeholder="Auto"/> <select class="constraint-select svelte-1qmrgom"><option>None</option><option>Min</option><option>Max</option></select>', 1), Rn = e.from_html('<input type="number" class="px-input svelte-1qmrgom" step="1" min="1" placeholder="Auto"/> <select class="constraint-select svelte-1qmrgom"><option>None</option><option>Min</option><option>Max</option></select>', 1), jn = e.from_html('<input type="checkbox"/>'), Wn = e.from_html("<!> <!> <!>", 1), Yn = e.from_html('<details class="section svelte-1qmrgom" open=""><summary class="section-title svelte-1qmrgom">Sizing</summary> <div class="section-content svelte-1qmrgom"><!> <!></div></details>');
+const Dn = {
+  hash: "svelte-1qmrgom",
+  code: `.section.svelte-1qmrgom {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-1qmrgom {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-1qmrgom::-webkit-details-marker {display:none;}.section-title.svelte-1qmrgom::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-1qmrgom > .section-title:where(.svelte-1qmrgom)::before {transform:rotate(90deg);}.section-content.svelte-1qmrgom {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.mode-select.svelte-1qmrgom {padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;background:var(--color-surface, #fff);}.px-input.svelte-1qmrgom {width:50px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;appearance:textfield;-moz-appearance:textfield;}.px-input.svelte-1qmrgom::-webkit-outer-spin-button,
+	.px-input.svelte-1qmrgom::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}.constraint-select.svelte-1qmrgom {width:70px;flex-shrink:0;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}.manual-input.svelte-1qmrgom {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-1qmrgom {flex:1;min-width:0;max-width:100%;}`
+};
+function Xn(o, r) {
+  e.push(r, !0), e.append_styles(o, Dn);
+  let t = e.prop(r, "effect", 3, fe);
+  function a(u) {
+    r.onChange({ ...t(), ...u });
+  }
+  var n = Yn(), s = e.sibling(e.child(n), 2), l = e.child(s);
   F(l, {
     label: "Mode",
-    onReset: () => s({ mode: fe.mode }),
-    children: (d, _) => {
-      var m = wn();
-      m.__change = (x) => s({ mode: x.currentTarget.value });
-      var T = e.child(m);
+    onReset: () => a({ mode: fe.mode }),
+    children: (u, g) => {
+      var p = Pn();
+      p.__change = (x) => a({ mode: x.currentTarget.value });
+      var T = e.child(p);
       T.value = T.__value = "scale";
       var v = e.sibling(T);
-      v.value = v.__value = "px", e.reset(m);
+      v.value = v.__value = "px", e.reset(p);
       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.init_select(p), e.template_effect(() => {
+        y !== (y = t().mode) && (p.value = (p.__value = t().mode) ?? "", e.select_option(p, t().mode));
+      }), e.append(u, p);
     }
   });
   var f = e.sibling(l, 2);
   {
-    var h = (d) => {
-      F(d, {
+    var h = (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: (g, p) => {
+          var T = Cn(), v = e.first_child(T);
+          e.remove_input_defaults(v), v.__input = (x) => a({ scale: Number(x.currentTarget.value) });
           var y = e.sibling(v, 2);
-          e.remove_input_defaults(y), y.__input = (x) => 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(g, T);
         }
       });
-    }, w = (d) => {
-      var _ = Sn(), m = e.first_child(_);
-      F(m, {
+    }, w = (u) => {
+      var g = Wn(), p = e.first_child(g);
+      F(p, {
         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 z = Nn(), _ = e.first_child(z);
+          e.remove_input_defaults(_), _.__input = (m) => {
+            const i = m.currentTarget.value ? Number(m.currentTarget.value) : void 0, c = t().minWidth !== void 0 ? "min" : t().maxWidth !== void 0 ? "max" : "";
+            a(c === "min" ? { width: i, minWidth: i, maxWidth: void 0 } : c === "max" ? { width: i, maxWidth: i, minWidth: void 0 } : { width: i });
           };
-          var k = e.sibling(b, 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 });
+          var k = e.sibling(_, 2);
+          k.__change = (m) => {
+            const i = t().width ?? t().minWidth ?? t().maxWidth;
+            m.currentTarget.value === "min" && i !== void 0 ? a({ minWidth: i, maxWidth: void 0 }) : m.currentTarget.value === "max" && i !== void 0 ? a({ maxWidth: i, minWidth: void 0 }) : a({ minWidth: void 0, maxWidth: void 0 });
           };
-          var C = e.child(k);
-          C.value = C.__value = "";
-          var S = e.sibling(C);
+          var P = e.child(k);
+          P.value = P.__value = "";
+          var S = e.sibling(P);
           S.value = S.__value = "min";
-          var g = e.sibling(S);
-          g.value = g.__value = "max", e.reset(k);
-          var u;
+          var b = e.sibling(S);
+          b.value = b.__value = "max", e.reset(k);
+          var d;
           e.init_select(k), e.template_effect(() => {
-            e.set_value(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, z);
         }
       });
-      var T = e.sibling(m, 2);
+      var T = e.sibling(p, 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 z = Rn(), _ = e.first_child(z);
+          e.remove_input_defaults(_), _.__input = (m) => {
+            const i = m.currentTarget.value ? Number(m.currentTarget.value) : void 0, c = t().minHeight !== void 0 ? "min" : t().maxHeight !== void 0 ? "max" : "";
+            a(c === "min" ? { height: i, minHeight: i, maxHeight: void 0 } : c === "max" ? { height: i, maxHeight: i, minHeight: void 0 } : { height: i });
           };
-          var k = e.sibling(b, 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 });
+          var k = e.sibling(_, 2);
+          k.__change = (m) => {
+            const i = t().height ?? t().minHeight ?? t().maxHeight;
+            m.currentTarget.value === "min" && i !== void 0 ? a({ minHeight: i, maxHeight: void 0 }) : m.currentTarget.value === "max" && i !== void 0 ? a({ maxHeight: i, minHeight: void 0 }) : a({ minHeight: void 0, maxHeight: void 0 });
           };
-          var C = e.child(k);
-          C.value = C.__value = "";
-          var S = e.sibling(C);
+          var P = e.child(k);
+          P.value = P.__value = "";
+          var S = e.sibling(P);
           S.value = S.__value = "min";
-          var g = e.sibling(S);
-          g.value = g.__value = "max", e.reset(k);
-          var u;
+          var b = e.sibling(S);
+          b.value = b.__value = "max", e.reset(k);
+          var d;
           e.init_select(k), e.template_effect(() => {
-            e.set_value(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, z);
         }
       });
       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 z = jn();
+          e.remove_input_defaults(z), z.__change = (_) => a({ maintainAspectRatio: _.currentTarget.checked }), e.template_effect(() => e.set_checked(z, t().maintainAspectRatio ?? !0)), e.append(y, z);
         }
-      }), e.append(d, _);
+      }), e.append(u, g);
     };
-    e.if(f, (d) => {
-      t().mode === "scale" ? d(h) : d(w, !1);
+    e.if(f, (u) => {
+      t().mode === "scale" ? u(h) : u(w, !1);
     });
   }
-  e.reset(i), e.reset(n), e.append(r, n), e.pop();
+  e.reset(s), e.reset(n), e.append(o, n), 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 Zn = e.from_html('<span class="section-toggle svelte-1h62jm0"> </span>'), Bn = e.from_html('<div class="section-content svelte-1h62jm0"><!></div>'), Ln = e.from_html('<div class="section svelte-1h62jm0"><div class="section-header svelte-1h62jm0"><h3 class="section-title svelte-1h62jm0"> </h3> <!></div> <!></div>');
+const qn = {
+  hash: "svelte-1h62jm0",
+  code: ".section.svelte-1h62jm0 {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-header.svelte-1h62jm0 {display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;border-bottom:1px solid var(--color-border, #eee);cursor:pointer;}.section-title.svelte-1h62jm0 {margin:0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);}.section-toggle.svelte-1h62jm0 {font-size:0.75rem;color:var(--color-text-muted, #666);}.section-content.svelte-1h62jm0 {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}"
+};
+function En(o, r) {
+  e.push(r, !0), e.append_styles(o, qn);
+  let t = e.state(e.proxy(r.config.defaultCollapsed ?? !1));
+  var a = Ln(), n = e.child(a);
+  n.__click = () => r.config.collapsible && e.set(t, !e.get(t));
+  var s = e.child(n), l = e.child(s, !0);
+  e.reset(s);
+  var f = e.sibling(s, 2);
   {
-    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 h = (g) => {
+      var p = Zn(), T = e.child(p, !0);
+      e.reset(p), e.template_effect(() => e.set_text(T, e.get(t) ? "▼" : "▲")), e.append(g, p);
     };
-    e.if(f, (_) => {
-      a.config.collapsible && _(h);
+    e.if(f, (g) => {
+      r.config.collapsible && g(h);
     });
   }
   e.reset(n);
   var w = e.sibling(n, 2);
   {
-    var d = (_) => {
-      var m = Pn(), T = e.child(m);
-      e.snippet(T, () => a.children), e.reset(m), e.append(_, m);
+    var u = (g) => {
+      var p = Bn(), T = e.child(p);
+      e.snippet(T, () => r.children), e.reset(p), e.append(g, p);
     };
-    e.if(w, (_) => {
-      e.get(t) || _(d);
+    e.if(w, (g) => {
+      e.get(t) || g(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, r.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 On = e.from_html('<input type="checkbox"/>'), Vn = e.from_html('<select class="shape-select svelte-1ani6pi"><option>None</option><option>Plane</option><option>Cylinder</option><option>Sphere</option></select>'), Un = e.from_html('<input type="range" step="0.5" min="0.5" max="4" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.5" min="0.5" max="4"/>', 1), An = e.from_html('<input type="range" step="0.05" min="0.1" max="5" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.05" min="0.1" max="5"/>', 1), Hn = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.01" min="-1" max="1"/>', 1), Fn = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.01" min="-1" max="1"/>', 1), Kn = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Image Position & Sizing</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!></div></details>'), Jn = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), Gn = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), $n = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), Qn = e.from_html('<input type="range" step="0.1" min="0" max="3" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.1" min="0" max="3"/>', 1), er = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!> <!></div></details>'), tr = e.from_html('<input type="range" step="10" min="50" max="2000" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="10" min="50" max="2000"/>', 1), nr = e.from_html('<input type="range" step="0.1" min="0" max="5" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="0.1" min="0" max="10"/>', 1), rr = e.from_html('<input type="range" step="1" min="-90" max="90" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-90" max="90"/>', 1), ar = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), sr = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!> <!></div></details>'), or = e.from_html('<input type="range" step="10" min="50" max="1000" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="10" min="50" max="1000"/>', 1), ir = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1ani6pi"/> <input type="number" class="manual-input svelte-1ani6pi" step="1" min="-180" max="180"/>', 1), lr = e.from_html('<details class="subsection svelte-1ani6pi" open=""><summary class="subsection-title svelte-1ani6pi">Surface Settings</summary> <div class="subsection-content svelte-1ani6pi"><!> <!></div></details>'), cr = e.from_html('<input type="checkbox"/>'), dr = e.from_html('<input type="checkbox"/>'), ur = e.from_html('<input type="checkbox"/>'), mr = e.from_html('<details class="subsection svelte-1ani6pi"><summary class="subsection-title svelte-1ani6pi">Debug Visualization</summary> <div class="subsection-content svelte-1ani6pi"><!> <!> <!></div></details>'), pr = e.from_html("<!> <!> <!> <!> <!> <!> <!>", 1), vr = e.from_html("<!> <!>", 1);
+const fr = {
+  hash: "svelte-1ani6pi",
+  code: `.shape-select.svelte-1ani6pi {padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;background:var(--color-surface, #fff);}.manual-input.svelte-1ani6pi {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-1ani6pi {flex:1;min-width:0;max-width:100%;}.subsection.svelte-1ani6pi {margin-top:0.75rem;border-top:1px solid var(--color-border, #e0e0e0);}.subsection-title.svelte-1ani6pi {padding:0.5rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;}.subsection-title.svelte-1ani6pi::-webkit-details-marker {display:none;}.subsection-title.svelte-1ani6pi::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.subsection[open].svelte-1ani6pi > .subsection-title:where(.svelte-1ani6pi)::before {transform:rotate(90deg);}.subsection-content.svelte-1ani6pi {padding-bottom:0.25rem;}`
+};
+function hr(o, r) {
+  e.push(r, !0), e.append_styles(o, fr);
+  const t = e.derived(() => r.effect ?? Qe), a = e.derived(() => e.get(t).image ?? se), n = e.derived(() => e.get(t).debug ?? ve);
+  function s(T) {
     const v = { ...e.get(t), ...T };
-    a.onChange(v);
+    r.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({
+    s({
       cylinder: {
         ...ce,
         ...e.get(t).cylinder,
@@ -1373,12 +1421,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 +1434,310 @@ function ia(r, a) {
       }
     });
   }
-  function _() {
-    e.get(t).enabled ? i({ enabled: !1 }) : i({
+  function g() {
+    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, {
+  const p = { id: "warp", title: "Warp", collapsible: !0 };
+  En(o, {
     get config() {
-      return m;
+      return p;
     },
     children: (T, v) => {
-      var y = sa(), x = e.first_child(y);
+      var y = vr(), 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, P) => {
+          var S = On();
+          e.remove_input_defaults(S), S.__change = g, e.template_effect(() => e.set_checked(S, e.get(t).enabled)), e.append(k, S);
         }
       });
-      var I = e.sibling(x, 2);
+      var z = e.sibling(x, 2);
       {
-        var b = (k) => {
-          var C = aa(), S = e.first_child(C);
+        var _ = (k) => {
+          var P = pr(), S = e.first_child(P);
           F(S, {
             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, Z) => {
+              var L = Vn();
+              L.__change = (Y) => {
+                const D = Y.currentTarget.value;
+                s({ shape: D }), D === "cylinder" && !e.get(t).cylinder && s({ cylinder: { ...ce } }), D === "plane" && !e.get(t).plane && s({ plane: { ...ae } }), D === "sphere" && !e.get(t).sphere && s({ sphere: { ...ke } });
               };
-              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 E = e.child(L);
+              E.value = E.__value = "none";
+              var q = e.sibling(E);
+              q.value = q.__value = "plane";
+              var K = e.sibling(q);
               K.value = K.__value = "cylinder";
-              var H = e.sibling(K);
-              H.value = H.__value = "sphere", e.reset(O);
+              var V = e.sibling(K);
+              V.value = V.__value = "sphere", e.reset(L);
               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(L), e.template_effect(() => {
+                G !== (G = e.get(t).shape) && (L.value = (L.__value = e.get(t).shape) ?? "", e.select_option(L, e.get(t).shape));
+              }), e.append(j, L);
             }
           });
-          var g = e.sibling(S, 2);
-          F(g, {
+          var b = e.sibling(S, 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, Z) => {
+              var L = Un(), E = e.first_child(L);
+              e.remove_input_defaults(E), E.__input = (K) => s({ quality: Number(K.currentTarget.value) });
+              var q = e.sibling(E, 2);
+              e.remove_input_defaults(q), q.__input = (K) => s({ quality: Number(K.currentTarget.value) }), e.template_effect(() => {
+                e.set_value(E, e.get(t).quality ?? 1), e.set_value(q, e.get(t).quality ?? 1);
+              }), e.append(j, L);
             }
           });
-          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 m = (j) => {
+              var Z = Kn(), L = e.sibling(e.child(Z), 2), E = e.child(L);
+              F(E, {
                 label: "Scale",
-                onReset: () => l({ scale: ie.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);
+                onReset: () => l({ scale: se.scale }),
+                children: (V, G) => {
+                  var Y = An(), D = e.first_child(Y);
+                  e.remove_input_defaults(D), D.__input = (N) => l({ scale: Number(N.currentTarget.value) });
+                  var W = e.sibling(D, 2);
+                  e.remove_input_defaults(W), W.__input = (N) => l({ scale: Number(N.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(a).scale), e.set_value(W, e.get(a).scale);
+                  }), e.append(V, Y);
                 }
               });
-              var L = e.sibling(j, 2);
-              F(L, {
+              var q = e.sibling(E, 2);
+              F(q, {
                 label: "Translate X",
-                onReset: () => l({ translateX: ie.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);
+                onReset: () => l({ translateX: se.translateX }),
+                children: (V, G) => {
+                  var Y = Hn(), D = e.first_child(Y);
+                  e.remove_input_defaults(D), D.__input = (N) => l({ translateX: Number(N.currentTarget.value) });
+                  var W = e.sibling(D, 2);
+                  e.remove_input_defaults(W), W.__input = (N) => l({ translateX: Number(N.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(a).translateX), e.set_value(W, e.get(a).translateX);
+                  }), e.append(V, Y);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(q, 2);
               F(K, {
                 label: "Translate Y",
-                onReset: () => l({ translateY: ie.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);
+                onReset: () => l({ translateY: se.translateY }),
+                children: (V, G) => {
+                  var Y = Fn(), D = e.first_child(Y);
+                  e.remove_input_defaults(D), D.__input = (N) => l({ translateY: Number(N.currentTarget.value) });
+                  var W = e.sibling(D, 2);
+                  e.remove_input_defaults(W), W.__input = (N) => l({ translateY: Number(N.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(a).translateY), e.set_value(W, e.get(a).translateY);
+                  }), e.append(V, Y);
                 }
-              }), e.reset(O), e.reset(E), e.append(z, E);
+              }), e.reset(L), e.reset(Z), e.append(j, Z);
             };
-            e.if(u, (z) => {
-              e.get(t).shape !== "none" && z(p);
+            e.if(d, (j) => {
+              e.get(t).shape !== "none" && j(m);
             });
           }
-          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 Z = e.derived(() => e.get(t).plane);
+              var L = er(), E = e.sibling(e.child(L), 2), q = e.child(E);
+              F(q, {
                 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);
-                  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);
+                onReset: () => w({ rotationX: ae.rotationX }),
+                children: (Y, D) => {
+                  var W = Jn(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => w({ rotationX: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => w({ rotationX: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).rotationX), e.set_value(H, e.get(Z).rotationX);
+                  }), e.append(Y, W);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(q, 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);
-                  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);
+                onReset: () => w({ rotationY: ae.rotationY }),
+                children: (Y, D) => {
+                  var W = Gn(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => w({ rotationY: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => w({ rotationY: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).rotationY), e.set_value(H, e.get(Z).rotationY);
+                  }), e.append(Y, W);
                 }
               });
-              var H = e.sibling(K, 2);
-              F(H, {
+              var V = e.sibling(K, 2);
+              F(V, {
                 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);
-                  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);
+                onReset: () => w({ rotationZ: ae.rotationZ }),
+                children: (Y, D) => {
+                  var W = $n(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => w({ rotationZ: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => w({ rotationZ: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).rotationZ), e.set_value(H, e.get(Z).rotationZ);
+                  }), e.append(Y, W);
                 }
               });
-              var G = e.sibling(H, 2);
+              var G = e.sibling(V, 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);
-                  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);
+                onReset: () => w({ depthScale: ae.depthScale }),
+                children: (Y, D) => {
+                  var W = Qn(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => w({ depthScale: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => w({ depthScale: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).depthScale), e.set_value(H, e.get(Z).depthScale);
+                  }), e.append(Y, W);
                 }
-              }), e.reset(j), e.reset(O), e.append(z, O);
+              }), e.reset(E), e.reset(L), e.append(j, L);
             };
-            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 I = (j) => {
+              const Z = e.derived(() => e.get(t).cylinder);
+              var L = sr(), E = e.sibling(e.child(L), 2), q = e.child(E);
+              F(q, {
                 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);
+                children: (Y, D) => {
+                  var W = tr(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => h({ diameter: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => h({ diameter: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).diameter), e.set_value(H, e.get(Z).diameter);
+                  }), e.append(Y, W);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(q, 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);
+                children: (Y, D) => {
+                  var W = nr(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => h({ perspective: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => h({ perspective: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).perspective ?? 1), e.set_value(H, e.get(Z).perspective ?? 1);
+                  }), e.append(Y, W);
                 }
               });
-              var H = e.sibling(K, 2);
-              F(H, {
+              var V = e.sibling(K, 2);
+              F(V, {
                 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);
+                children: (Y, D) => {
+                  var W = rr(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => h({ rotationX: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => h({ rotationX: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).rotationX), e.set_value(H, e.get(Z).rotationX);
+                  }), e.append(Y, W);
                 }
               });
-              var G = e.sibling(H, 2);
+              var G = e.sibling(V, 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);
+                children: (Y, D) => {
+                  var W = ar(), N = e.first_child(W);
+                  e.remove_input_defaults(N), N.__input = (U) => h({ rotationZ: Number(U.currentTarget.value) });
+                  var H = e.sibling(N, 2);
+                  e.remove_input_defaults(H), H.__input = (U) => h({ rotationZ: Number(U.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(N, e.get(Z).rotationZ), e.set_value(H, e.get(Z).rotationZ);
+                  }), e.append(Y, W);
                 }
-              }), e.reset(j), e.reset(O), e.append(z, O);
+              }), e.reset(E), e.reset(L), e.append(j, L);
             };
-            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(I);
             });
           }
-          var B = e.sibling(M, 2);
+          var X = 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 Z = e.derived(() => e.get(t).sphere);
+              var L = lr(), E = e.sibling(e.child(L), 2), q = e.child(E);
+              F(q, {
                 label: "Radius",
-                onReset: () => d({ 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);
+                onReset: () => u({ radius: ke.radius }),
+                children: (V, G) => {
+                  var Y = or(), D = e.first_child(Y);
+                  e.remove_input_defaults(D), D.__input = (N) => u({ radius: Number(N.currentTarget.value) });
+                  var W = e.sibling(D, 2);
+                  e.remove_input_defaults(W), W.__input = (N) => u({ radius: Number(N.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(Z).radius), e.set_value(W, e.get(Z).radius);
+                  }), e.append(V, Y);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(q, 2);
               F(K, {
                 label: "Spin (Z)",
-                onReset: () => d({ 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);
+                onReset: () => u({ rotationZ: ke.rotationZ }),
+                children: (V, G) => {
+                  var Y = ir(), D = e.first_child(Y);
+                  e.remove_input_defaults(D), D.__input = (N) => u({ rotationZ: Number(N.currentTarget.value) });
+                  var W = e.sibling(D, 2);
+                  e.remove_input_defaults(W), W.__input = (N) => u({ rotationZ: Number(N.currentTarget.value) }), e.template_effect(() => {
+                    e.set_value(D, e.get(Z).rotationZ), e.set_value(W, e.get(Z).rotationZ);
+                  }), e.append(V, Y);
                 }
-              }), e.reset(j), e.reset(O), e.append(z, O);
+              }), e.reset(E), e.reset(L), e.append(j, L);
             };
-            e.if(B, (z) => {
-              e.get(t).shape === "sphere" && e.get(t).sphere && z(J);
+            e.if(X, (j) => {
+              e.get(t).shape === "sphere" && e.get(t).sphere && j(J);
             });
           }
-          var Z = e.sibling(B, 2);
+          var B = e.sibling(X, 2);
           {
-            var U = (z) => {
-              var E = na(), O = e.sibling(e.child(E), 2), j = e.child(O);
-              F(j, {
+            var A = (j) => {
+              var Z = mr(), L = e.sibling(e.child(Z), 2), E = e.child(L);
+              F(E, {
                 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);
+                children: (V, G) => {
+                  var Y = cr();
+                  e.remove_input_defaults(Y), Y.__change = (D) => f({ showBounds: D.currentTarget.checked }), e.template_effect(() => e.set_checked(Y, e.get(n).showBounds)), e.append(V, Y);
                 }
               });
-              var L = e.sibling(j, 2);
-              F(L, {
+              var q = e.sibling(E, 2);
+              F(q, {
                 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);
+                children: (V, G) => {
+                  var Y = dr();
+                  e.remove_input_defaults(Y), Y.__change = (D) => f({ showDepthVis: D.currentTarget.checked }), e.template_effect(() => e.set_checked(Y, e.get(n).showDepthVis)), e.append(V, Y);
                 }
               });
-              var K = e.sibling(L, 2);
+              var K = e.sibling(q, 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);
+                children: (V, G) => {
+                  var Y = ur();
+                  e.remove_input_defaults(Y), Y.__change = (D) => f({ showCrosshair: D.currentTarget.checked }), e.template_effect(() => e.set_checked(Y, e.get(n).showCrosshair)), e.append(V, Y);
                 }
-              }), e.reset(O), e.reset(E), e.append(z, E);
+              }), e.reset(L), e.reset(Z), e.append(j, Z);
             };
-            e.if(Z, (z) => {
-              e.get(t).shape !== "none" && z(U);
+            e.if(B, (j) => {
+              e.get(t).shape !== "none" && j(A);
             });
           }
-          e.append(k, C);
+          e.append(k, P);
         };
-        e.if(I, (k) => {
-          e.get(t).enabled && k(b);
+        e.if(z, (k) => {
+          e.get(t).enabled && k(_);
         });
       }
       e.append(T, y);
@@ -1698,464 +1746,487 @@ 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 gr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), br = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), _r = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), yr = e.from_html('<input type="range" step="1" min="-180" max="180" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-180" max="180"/>', 1), wr = e.from_html('<input type="range" step="0.01" min="-2" max="2" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-2" max="2"/>', 1), xr = e.from_html('<input type="range" step="0.01" min="0.1" max="3" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="0.1" max="3"/>', 1), kr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Mr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Tr = e.from_html('<input type="range" step="0.01" min="-1" max="1" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="0.01" min="-1" max="1"/>', 1), Sr = e.from_html('<input type="range" step="1" min="-100" max="100" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-100" max="100"/>', 1), Ir = e.from_html('<input type="range" step="1" min="-100" max="100" class="svelte-1f6utug"/> <input type="number" class="manual-input svelte-1f6utug" step="1" min="-100" max="100"/>', 1), zr = e.from_html('<details class="section svelte-1f6utug" open=""><summary class="section-title svelte-1f6utug">Restyle</summary> <div class="section-content svelte-1f6utug"><details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Basic Adjustments</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!> <!></div></details> <details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Exposure & Tone</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!> <!></div></details> <details class="subsection svelte-1f6utug" open=""><summary class="subsection-title svelte-1f6utug">Color & White Balance</summary> <div class="subsection-content svelte-1f6utug"><!> <!> <!></div></details></div></details>');
+const Pr = {
+  hash: "svelte-1f6utug",
+  code: `.section.svelte-1f6utug {border-top:1px solid var(--color-border, #ccc);border-bottom:1px solid var(--color-border, #ccc);background:var(--color-surface, #fff);min-width:0;}.section-title.svelte-1f6utug {padding:0.75rem 0;font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid var(--color-border, #eee);}.section-title.svelte-1f6utug::-webkit-details-marker {display:none;}.section-title.svelte-1f6utug::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.section[open].svelte-1f6utug > .section-title:where(.svelte-1f6utug)::before {transform:rotate(90deg);}.section-content.svelte-1f6utug {padding:0.75rem 0;display:flex;flex-direction:column;gap:0.75rem;}.manual-input.svelte-1f6utug {width:60px;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}input[type="range"].svelte-1f6utug {flex:1;min-width:0;max-width:100%;}.subsection.svelte-1f6utug {margin-top:0.75rem;border-top:1px solid var(--color-border, #e0e0e0);}.subsection.svelte-1f6utug:first-child {margin-top:0;border-top:none;}.subsection-title.svelte-1f6utug {padding:0.5rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #666);cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;}.subsection-title.svelte-1f6utug::-webkit-details-marker {display:none;}.subsection-title.svelte-1f6utug::before {content:'▶';font-size:0.625rem;transition:transform 0.15s ease;}.subsection[open].svelte-1f6utug > .subsection-title:where(.svelte-1f6utug)::before {transform:rotate(90deg);}.subsection-content.svelte-1f6utug {padding-bottom:0.25rem;}`
+};
+function Cr(o, r) {
+  e.push(r, !0), e.append_styles(o, Pr);
+  let t = e.prop(r, "effect", 3, ee);
+  function a(d) {
+    r.onChange({ ...t(), ...d });
   }
-  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);
+  var n = zr(), s = e.sibling(e.child(n), 2), l = e.child(s), f = e.sibling(e.child(l), 2), h = e.child(f);
   F(h, {
     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, m) => {
+      var i = gr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ brightness: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ brightness: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ brightness: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().brightness), e.set_value(M, t().brightness);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
   var w = e.sibling(h, 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, m) => {
+      var i = br(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ contrast: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ contrast: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ contrast: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().contrast), e.set_value(M, t().contrast);
-      }), e.append(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, m) => {
+      var i = _r(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ saturation: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ saturation: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ saturation: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().saturation), e.set_value(M, t().saturation);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var _ = e.sibling(d, 2);
-  F(_, {
+  var g = e.sibling(u, 2);
+  F(g, {
     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, m) => {
+      var i = yr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ hue: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ hue: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ hue: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().hue), e.set_value(M, t().hue);
-      }), e.append(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);
+  var p = e.sibling(l, 2), T = e.sibling(e.child(p), 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, m) => {
+      var i = wr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ exposure: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ exposure: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ exposure: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().exposure), e.set_value(M, t().exposure);
-      }), e.append(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, m) => {
+      var i = xr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ gamma: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ gamma: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ gamma: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().gamma), e.set_value(M, t().gamma);
-      }), e.append(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, m) => {
+      var i = kr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ shadows: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ shadows: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ shadows: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().shadows), e.set_value(M, t().shadows);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var I = e.sibling(x, 2);
-  F(I, {
+  var z = e.sibling(x, 2);
+  F(z, {
     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, m) => {
+      var i = Mr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ highlights: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ highlights: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ highlights: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().highlights), e.set_value(M, t().highlights);
-      }), e.append(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, {
+  }), e.reset(T), e.reset(p);
+  var _ = e.sibling(p, 2), k = e.sibling(e.child(_), 2), P = e.child(k);
+  F(P, {
     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, m) => {
+      var i = Tr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ vibrance: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ vibrance: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ vibrance: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().vibrance), e.set_value(M, t().vibrance);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var S = e.sibling(C, 2);
+  var S = e.sibling(P, 2);
   F(S, {
     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, m) => {
+      var i = Sr(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ temperature: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ temperature: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ temperature: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().temperature), e.set_value(M, t().temperature);
-      }), e.append(u, o);
+      }), e.append(d, i);
     }
   });
-  var g = e.sibling(S, 2);
-  F(g, {
+  var b = e.sibling(S, 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, m) => {
+      var i = Ir(), c = e.first_child(i);
+      e.remove_input_defaults(c), c.__input = (I) => a({ tint: Number(I.currentTarget.value) });
       var M = e.sibling(c, 2);
-      e.remove_input_defaults(M), M.__input = (N) => s({ tint: Number(N.currentTarget.value) }), e.template_effect(() => {
+      e.remove_input_defaults(M), M.__input = (I) => a({ tint: Number(I.currentTarget.value) }), e.template_effect(() => {
         e.set_value(c, t().tint), e.set_value(M, t().tint);
-      }), e.append(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(n), e.append(o, n), 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 Nr = e.from_html('<div class="layer-name-section svelte-et76o3"><label class="form-label svelte-et76o3">Layer Name (for overrides)</label> <input type="text" class="form-input svelte-et76o3" placeholder="e.g., front, back, logo"/> <p class="form-hint svelte-et76o3">Use this name as the key when overriding images in the renderer</p></div>'), Rr = e.from_html('<div class="layer-controls svelte-et76o3"><div class="layer-header svelte-et76o3"><button class="visibility-toggle svelte-et76o3"><!></button> <span class="layer-preview svelte-et76o3"><img alt="Layer preview" class="svelte-et76o3"/></span> <button class="delete-btn svelte-et76o3" aria-label="Delete layer"><!></button></div> <!> <div class="sections svelte-et76o3"><!> <!> <!> <!></div></div>');
+const jr = {
+  hash: "svelte-et76o3",
+  code: ".layer-controls.svelte-et76o3 {border-radius:4px;padding-top:0.75rem;padding-bottom:0.75rem;margin-bottom:0.5rem;background:var(--color-surface, #fff);}.layer-header.svelte-et76o3 {display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;padding-bottom:0.75rem;border-bottom:1px solid var(--color-border, #eee);}.visibility-toggle.svelte-et76o3 {background:none;border:none;cursor:pointer;padding:0.25rem;display:flex;align-items:center;justify-content:center;color:var(--color-text, #000);}.layer-preview.svelte-et76o3 {flex:1;display:flex;align-items:center;justify-content:center;height:40px;overflow:hidden;border-radius:4px;background:#f5f5f5;}.layer-preview.svelte-et76o3 img:where(.svelte-et76o3) {max-width:100%;max-height:100%;object-fit:contain;}.delete-btn.svelte-et76o3 {background:#ef4444;color:white;border:none;border-radius:4px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}.delete-btn.svelte-et76o3:hover {background:#dc2626;}.layer-name-section.svelte-et76o3 {padding:0 0.75rem;margin-bottom:0.75rem;}.layer-name-section.svelte-et76o3 .form-label:where(.svelte-et76o3) {display:block;font-size:0.75rem;font-weight:500;color:var(--color-text-muted, #666);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px;}.layer-name-section.svelte-et76o3 .form-input:where(.svelte-et76o3) {width:100%;padding:0.375rem 0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;font-family:inherit;}.layer-name-section.svelte-et76o3 .form-input:where(.svelte-et76o3):focus {outline:none;border-color:var(--color-primary, #3b82f6);}.form-hint.svelte-et76o3 {font-size:0.75rem;color:var(--color-text-muted, #666);margin:0.25rem 0 0 0;}.sections.svelte-et76o3 {display:flex;flex-direction:column;gap:0;overflow:hidden;min-width:0;}"
+};
+function Wr(o, r) {
+  e.push(r, !0), e.append_styles(o, jr);
+  const t = e.derived(() => r.layer.effects.find((c) => c.type === "resize") ?? fe), a = e.derived(() => r.layer.effects.find((c) => c.type === "restyle") ?? ee), n = e.derived(() => r.layer.effects.find((i) => i.type === "warp"));
+  function s(i) {
+    const c = r.layer.effects.filter((M) => M.type !== "resize");
+    r.onEffectsChange([...c, i]);
+  }
+  function l(i) {
+    const c = r.layer.effects.filter((M) => M.type !== "restyle");
+    r.onEffectsChange([...c, i]);
+  }
+  function f(i) {
+    const c = r.layer.effects.filter((M) => M.type !== "warp");
+    i ? r.onEffectsChange([...c, i]) : r.onEffectsChange(c);
+  }
+  var h = Rr(), w = e.child(h), u = e.child(w);
+  u.__click = () => r.onVisibilityChange(!r.layer.visible);
+  var g = e.child(u);
   {
-    var m = (o) => {
-      on(o, {});
-    }, T = (o) => {
-      cn(o, {});
+    var p = (i) => {
+      pn(i, {});
+    }, T = (i) => {
+      fn(i, {});
     };
-    e.if(_, (o) => {
-      a.layer.visible ? o(m) : o(T, !1);
+    e.if(g, (i) => {
+      r.layer.visible ? i(p) : 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) {
+    r.onDelete?.apply(this, i);
   };
-  var I = e.child(x);
-  Ue(I, {}), e.reset(x), e.reset(w);
-  var b = e.sibling(w, 2);
+  var z = e.child(x);
+  Ae(z, {}), 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 = Nr(), M = e.child(c), I = e.sibling(M, 2);
+      e.remove_input_defaults(I), I.__input = (X) => r.onNameChange(X.currentTarget.value), e.next(2), e.reset(c), e.template_effect(() => {
+        e.set_attribute(M, "for", `layer-name-${r.layer.id ?? ""}`), e.set_attribute(I, "id", `layer-name-${r.layer.id ?? ""}`), e.set_value(I, r.layer.name || "");
+      }), e.append(i, c);
     };
-    e.if(b, (o) => {
-      a.onNameChange && o(k);
+    e.if(_, (i) => {
+      r.onNameChange && i(k);
     });
   }
-  var C = e.sibling(b, 2), S = e.child(C);
-  In(S, {
+  var P = e.sibling(_, 2), S = e.child(P);
+  Xn(S, {
     get effect() {
       return e.get(t);
     },
-    onChange: i
+    onChange: s
   });
-  var g = e.sibling(S, 2);
-  ga(g, {
+  var b = e.sibling(S, 2);
+  Cr(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);
+  zn(d, {
     get transform() {
-      return a.layer.transform;
+      return r.layer.transform;
     },
     get opacity() {
-      return a.layer.opacity;
+      return r.layer.opacity;
     },
     get canvasWidth() {
-      return a.canvasWidth;
+      return r.canvasWidth;
     },
     get canvasHeight() {
-      return a.canvasHeight;
+      return r.canvasHeight;
     },
     get onTransformChange() {
-      return a.onTransformChange;
+      return r.onTransformChange;
     },
     get onOpacityChange() {
-      return a.onOpacityChange;
+      return r.onOpacityChange;
     },
     get layerId() {
-      return a.layer.id;
+      return r.layer.id;
     }
   });
-  var p = e.sibling(u, 2);
-  ia(p, {
+  var m = e.sibling(d, 2);
+  hr(m, {
     get effect() {
       return e.get(n);
     },
     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(P), e.reset(h), e.template_effect(() => {
+    e.set_attribute(u, "aria-label", r.layer.visible ? "Hide layer" : "Show layer"), e.set_attribute(y, "src", r.layer.src);
+  }), e.append(o, h), e.pop();
 }
 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 Yr = e.from_html('<button type="button" class="modal-backdrop svelte-ta60gp" aria-label="Close modal"></button> <div><!></div>', 1);
+const Dr = {
+  hash: "svelte-ta60gp",
+  code: ".modal-backdrop.svelte-ta60gp {position:fixed;inset:0;z-index:10000;background:var(--color-overlay-darker);backdrop-filter:blur(4px);border:none;padding:0;margin:0;cursor:pointer;border-radius:unset;}.modal-backdrop.svelte-ta60gp:hover {background:var(--color-overlay-darker) !important;}.modal-content.svelte-ta60gp {position:fixed;top:0;left:0;right:0;height:100dvh;z-index:10001;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}.modal-content.ios-safari.svelte-ta60gp {height:100dvh;overflow-y:auto;}.modal-content.svelte-ta60gp > * {pointer-events:auto;margin:0 auto;}"
+};
+function Xr(o, r) {
+  e.push(r, !0), e.append_styles(o, Dr);
+  let t = !1, a = !1;
+  const n = zt && /iPhone|iPad|iPod/.test(navigator.userAgent) && !("MSStream" in window);
+  function s(T) {
     T.key === "Escape" && (T.preventDefault(), f());
   }
   function l() {
-    t && (t = !1, a.onclose());
+    t && (t = !1, r.onclose());
   }
   function f() {
-    t && (t = !1, history.back()), a.onclose();
+    t && (t = !1, history.back()), r.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();
+  St(() => {
+    a = !0;
+  }), Te(() => (n || (document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden"), It("", { modal: !0 }), t = !0, () => {
+    n || (document.documentElement.style.overflow = "", document.body.style.overflow = ""), t && !a && history.back();
   }));
-  var h = xa();
-  e.event("keydown", e.window, i), e.event("popstate", e.window, l);
+  var h = Yr();
+  e.event("keydown", e.window, s), e.event("popstate", e.window, l);
   var w = e.first_child(h);
   w.__click = f;
-  var 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 g;
+  var p = e.child(u);
+  e.snippet(p, () => r.children), e.reset(u), e.template_effect(() => g = e.set_class(u, 1, "modal-content svelte-ta60gp", null, g, { "ios-safari": n })), e.transition(7, w, () => $e, () => ({ duration: 100 })), e.transition(7, u, () => $e, () => ({ duration: 100 })), e.append(o, h), e.pop();
 }
 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 Zr = e.from_svg('<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg>');
+function Me(o, r) {
+  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
+  var n = Zr();
   e.template_effect(() => {
-    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", s());
-  }), e.append(r, n);
+    e.set_style(n, `font-size: ${t() ?? ""};`), e.set_attribute(n, "stroke", a());
+  }), e.append(o, n);
 }
-const Pe = "product-mockups", it = "product-mockups-current";
-function Ta(r, a = Pe) {
+const Ce = "product-mockups", it = "product-mockups-current";
+function Br(o, r = 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 = Ne(), a = t.findIndex((n) => n.id === o.id);
+    return a >= 0 ? t[a] = { ...o, updatedAt: Date.now() } : t.push({ ...o, updatedAt: Date.now() }), localStorage.setItem(r, JSON.stringify(t)), !0;
   } catch (t) {
     return console.error("Failed to save mockup:", t), !1;
   }
 }
-function Re(r = Pe) {
+function Ne(o = Ce) {
   try {
-    const a = localStorage.getItem(r);
-    return a ? JSON.parse(a).map((s) => {
-      const n = s.composition ?? s.canvas ?? { ...st };
+    const r = localStorage.getItem(o);
+    return r ? JSON.parse(r).map((a) => {
+      const n = a.composition ?? a.canvas ?? { ...ot };
       return {
-        ...s,
-        view: s.view ?? { ...Ce },
+        ...a,
+        view: a.view ?? { ...Pe },
         composition: {
           ...n,
           effects: n.effects ?? [],
-          layers: n.layers?.map((i) => ({
-            ...i,
-            effects: i.effects ?? []
+          layers: n.layers?.map((s) => ({
+            ...s,
+            effects: s.effects ?? []
           })) ?? []
         }
       };
     }) : [];
-  } catch (a) {
-    return console.error("Failed to load mockups:", a), [];
+  } catch (r) {
+    return console.error("Failed to load mockups:", r), [];
   }
 }
-function Sa(r, a = Pe) {
-  return Re(a).find((s) => s.id === r) ?? null;
+function Lr(o, r = Ce) {
+  return Ne(r).find((a) => a.id === o) ?? null;
 }
-function Na(r, a = Pe) {
+function qr(o, r = Ce) {
   try {
-    const s = Re(a).filter((n) => n.id !== r);
-    return localStorage.setItem(a, JSON.stringify(s)), !0;
+    const a = Ne(r).filter((n) => n.id !== o);
+    return localStorage.setItem(r, JSON.stringify(a)), !0;
   } catch (t) {
     return console.error("Failed to delete mockup:", t), !1;
   }
 }
-function je(r, a = it) {
+function Ee(o, r = it) {
   try {
-    r ? localStorage.setItem(a, r) : localStorage.removeItem(a);
+    o ? localStorage.setItem(r, o) : localStorage.removeItem(r);
   } catch (t) {
     console.error("Failed to save current mockup ID:", t);
   }
 }
-function Ia(r = it) {
+function Er(o = it) {
   try {
-    return localStorage.getItem(r);
+    return localStorage.getItem(o);
   } catch {
     return null;
   }
 }
-function tt(r = "Untitled Mockup") {
+function nt(o = "Untitled Mockup") {
   return {
     id: crypto.randomUUID(),
-    name: r,
-    composition: { ...st },
-    view: { ...Ce },
+    name: o,
+    composition: { ...ot },
+    view: { ...Pe },
     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([]));
+var Or = e.from_html('<div class="empty-state svelte-33nadc"><p class="svelte-33nadc">No mockups yet. Create your first mockup to get started!</p> <button class="new-mockup-btn primary svelte-33nadc" type="button"><!> Create Mockup</button></div>'), Vr = e.from_html('<div role="button" tabindex="0"><div class="mockup-card-header svelte-33nadc"><h3 class="mockup-card-title svelte-33nadc"> </h3> <div class="mockup-card-actions svelte-33nadc"><button class="copy-btn svelte-33nadc" type="button" aria-label="Copy config">Copy Config</button> <button class="delete-btn svelte-33nadc" type="button" aria-label="Delete mockup"><!></button></div></div> <div class="mockup-card-info svelte-33nadc"><div class="mockup-card-stat svelte-33nadc"><span class="stat-label svelte-33nadc">Layers:</span> <span class="stat-value svelte-33nadc"> </span></div> <div class="mockup-card-stat svelte-33nadc"><span class="stat-label svelte-33nadc">Size:</span> <span class="stat-value svelte-33nadc"> </span></div></div> <div class="mockup-card-footer svelte-33nadc"><div class="mockup-card-date svelte-33nadc"><span class="date-label svelte-33nadc">Updated:</span> <span class="date-value svelte-33nadc"> </span></div></div></div>'), Ur = e.from_html('<div class="mockup-grid svelte-33nadc"></div>'), Ar = e.from_html('<div class="mockup-list-container svelte-33nadc"><div class="mockup-list-header svelte-33nadc"><h2 class="svelte-33nadc">All Mockups</h2> <button class="new-mockup-btn svelte-33nadc" type="button"><!> New Mockup</button></div> <!></div>');
+const Hr = {
+  hash: "svelte-33nadc",
+  code: ".mockup-list-container.svelte-33nadc {background:var(--color-surface, #fff);border-radius:8px;padding:2rem;max-width:900px;width:100%;margin:2rem auto;max-height:calc(100dvh - 4rem);overflow-y:auto;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2);}.mockup-list-header.svelte-33nadc {display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem;}.mockup-list-header.svelte-33nadc h2:where(.svelte-33nadc) {font-size:1.5rem;font-weight:600;color:var(--color-text, #111);margin:0;}.new-mockup-btn.svelte-33nadc {display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:6px;cursor:pointer;font-size:0.875rem;font-weight:500;transition:background 200ms;}.new-mockup-btn.svelte-33nadc:hover {background:var(--color-primary-dark, #2563eb);}.new-mockup-btn.primary.svelte-33nadc {margin-top:1rem;}.empty-state.svelte-33nadc {text-align:center;padding:4rem 2rem;color:var(--color-text-muted, #666);}.empty-state.svelte-33nadc p:where(.svelte-33nadc) {font-size:1rem;margin-bottom:1.5rem;}.mockup-grid.svelte-33nadc {display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1rem;}.mockup-card.svelte-33nadc {background:var(--color-surface-alt, #f5f5f5);border:2px solid var(--color-border, #ccc);border-radius:8px;padding:1rem;cursor:pointer;transition:all 200ms;display:flex;flex-direction:column;gap:0.75rem;}.mockup-card.svelte-33nadc:hover {border-color:var(--color-primary, #3b82f6);background:var(--color-surface, #fff);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);}.mockup-card.current.svelte-33nadc {border-color:var(--color-primary, #3b82f6);background:var(--color-primary-light, #eff6ff);}.mockup-card-header.svelte-33nadc {display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;}.mockup-card-title.svelte-33nadc {font-size:1rem;font-weight:600;color:var(--color-text, #111);margin:0;flex:1;word-break:break-word;}.mockup-card-actions.svelte-33nadc {display:flex;align-items:center;gap:0.5rem;flex-shrink:0;}.copy-btn.svelte-33nadc {background:transparent;border:1px solid var(--color-primary, #3b82f6);color:var(--color-primary, #3b82f6);cursor:pointer;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;transition:all 200ms;display:flex;align-items:center;justify-content:center;}.copy-btn.svelte-33nadc:hover {background:var(--color-primary, #3b82f6);color:white;}.delete-btn.svelte-33nadc {background:transparent;border:none;color:var(--color-text-muted, #666);cursor:pointer;padding:0.25rem;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 200ms;flex-shrink:0;}.delete-btn.svelte-33nadc:hover {background:#ef4444;color:white;}.mockup-card-info.svelte-33nadc {display:flex;gap:1rem;font-size:0.875rem;}.mockup-card-stat.svelte-33nadc {display:flex;flex-direction:column;gap:0.25rem;}.stat-label.svelte-33nadc {color:var(--color-text-muted, #666);font-size:0.75rem;text-transform:uppercase;}.stat-value.svelte-33nadc {color:var(--color-text, #111);font-weight:500;}.mockup-card-footer.svelte-33nadc {margin-top:auto;padding-top:0.75rem;border-top:1px solid var(--color-border, #ccc);}.mockup-card-date.svelte-33nadc {display:flex;flex-direction:column;gap:0.25rem;font-size:0.75rem;}.date-label.svelte-33nadc {color:var(--color-text-muted, #666);text-transform:uppercase;}.date-value.svelte-33nadc {color:var(--color-text, #111);}"
+};
+function Fr(o, r) {
+  e.push(r, !0), e.append_styles(o, Hr);
+  let t = e.prop(r, "storageKey", 3, "product-mockups"), a = e.state(e.proxy([]));
   function n() {
-    e.set(s, Re(t()), !0);
+    e.set(a, Ne(t()), !0);
   }
   Te(() => {
     n();
   });
-  function i(d) {
-    a.onSelect(d), a.onclose();
+  function s(u) {
+    r.onSelect(u), r.onclose();
   }
   function l() {
-    a.onNew(), a.onclose();
+    r.onNew(), r.onclose();
   }
-  function f(d, _) {
-    d.stopPropagation(), confirm("Are you sure you want to delete this mockup?") && (Na(_, t()), n());
+  function f(u, g) {
+    u.stopPropagation(), confirm("Are you sure you want to delete this mockup?") && (qr(g, t()), n());
   }
-  async function h(d, _) {
-    d.stopPropagation();
+  async function h(u, g) {
+    u.stopPropagation();
     try {
-      const m = JSON.stringify(_, null, 2);
-      await navigator.clipboard.writeText(m);
-    } catch (m) {
-      console.error("Failed to copy config:", m);
+      const p = JSON.stringify(g, null, 2);
+      await navigator.clipboard.writeText(p);
+    } catch (p) {
+      console.error("Failed to copy config:", p);
     }
   }
-  function w(d) {
-    const _ = new Date(d);
-    return _.toLocaleDateString() + " " + _.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  function w(u) {
+    const g = new Date(u);
+    return g.toLocaleDateString() + " " + g.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   }
-  ka(r, {
+  Xr(o, {
     get onclose() {
-      return a.onclose;
+      return r.onclose;
     },
-    children: (d, _) => {
-      var m = Wa(), T = e.child(m), v = e.sibling(e.child(T), 2);
+    children: (u, g) => {
+      var p = Ar(), T = e.child(p), v = e.sibling(e.child(T), 2);
       v.__click = l;
       var y = e.child(v);
       Me(y, {}), e.next(), e.reset(v), e.reset(T);
       var x = e.sibling(T, 2);
       {
-        var I = (k) => {
-          var C = Ca(), S = e.sibling(e.child(C), 2);
+        var z = (k) => {
+          var P = Or(), S = e.sibling(e.child(P), 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();
-            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);
+          var b = e.child(S);
+          Me(b, {}), e.next(), e.reset(S), e.reset(P), e.append(k, P);
+        }, _ = (k) => {
+          var P = Ur();
+          e.each(P, 21, () => e.get(a), (S) => S.id, (S, b) => {
+            var d = Vr();
+            let m;
+            d.__click = () => s(e.get(b)), d.__keydown = (W) => W.key === "Enter" && s(e.get(b));
+            var i = e.child(d), c = e.child(i), M = e.child(c, !0);
             e.reset(c);
-            var 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 I = e.sibling(c, 2), X = e.child(I);
+            X.__click = (W) => h(W, e.get(b));
+            var J = e.sibling(X, 2);
+            J.__click = (W) => f(W, e.get(b).id);
+            var B = e.child(J);
+            Ae(B, {}), e.reset(J), e.reset(I), e.reset(i);
+            var A = e.sibling(i, 2), j = e.child(A), Z = e.sibling(e.child(j), 2), L = e.child(Z, !0);
+            e.reset(Z), e.reset(j);
+            var E = e.sibling(j, 2), q = e.sibling(e.child(E), 2), K = e.child(q);
+            e.reset(q), e.reset(E), e.reset(A);
+            var V = e.sibling(A, 2), G = e.child(V), Y = e.sibling(e.child(G), 2), D = e.child(Y, !0);
+            e.reset(Y), e.reset(G), e.reset(V), e.reset(d), e.template_effect(
+              (W) => {
+                m = e.set_class(d, 1, "mockup-card svelte-33nadc", null, m, { current: e.get(b).id === r.currentMockupId }), e.set_text(M, e.get(b).name), e.set_text(L, e.get(b).composition.layers.length), e.set_text(K, `${e.get(b).composition.width ?? ""} × ${e.get(b).composition.height ?? ""}`), e.set_text(D, W);
               },
-              [() => w(e.get(g).updatedAt)]
-            ), e.append(S, u);
-          }), e.reset(C), e.append(k, C);
+              [() => w(e.get(b).updatedAt)]
+            ), e.append(S, d);
+          }), e.reset(P), e.append(k, P);
         };
         e.if(x, (k) => {
-          e.get(s).length === 0 ? k(I) : k(b, !1);
+          e.get(a).length === 0 ? k(z) : k(_, !1);
         });
       }
-      e.reset(m), e.append(d, m);
+      e.reset(p), e.append(u, p);
     },
     $$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 Kr = e.from_svg('<svg width=".4em" height="1em" viewBox="8 2 8 20" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>');
+function rt(o, r) {
+  let t = e.prop(r, "fontSize", 3, "1em"), a = e.prop(r, "color", 3, "currentColor");
+  var n = Kr();
   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(n, `font-size: ${t() ?? ""}; ${(r.rotate && `rotate: ${r.rotate};`) ?? ""}`), e.set_attribute(n, "stroke", a());
+  }), e.append(o, n);
 }
-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 Jr = "product-mockups", Gr = "product-mockups-current";
+var $r = e.from_html('<header class="header-logos svelte-w47swm"><!></header>'), Qr = e.from_html('<div class="url-input-group svelte-w47swm"><input type="url" placeholder="https://example.com/image.jpg" class="svelte-w47swm"/> <button type="button" class="svelte-w47swm">Add</button></div>'), ea = e.from_html('<div class="no-layers svelte-w47swm">No layers yet. Add an image to get started.</div>'), ta = e.from_html('<code class="layer-key-badge svelte-w47swm"> </code>'), na = e.from_html('<div role="button" tabindex="0"><div class="layer-item-preview svelte-w47swm"><img alt="Layer preview" class="svelte-w47swm"/></div> <div class="layer-item-info svelte-w47swm"><span class="layer-item-name svelte-w47swm"> <!></span> <div class="layer-item-actions svelte-w47swm"><button class="layer-order-btn svelte-w47swm" aria-label="Move up"><!></button> <button class="layer-order-btn svelte-w47swm" aria-label="Move down"><!></button> <button class="layer-delete-btn svelte-w47swm" aria-label="Delete layer"><!></button></div></div></div>'), ra = e.from_html('<div class="layers-list svelte-w47swm"></div>'), aa = e.from_html('<div class="canvas-header svelte-w47swm"><!></div>'), sa = e.from_html('<div class="processor-container svelte-w47swm"><sidebar class="svelte-w47swm"><!> <div class="editor-items svelte-w47swm"><div class="editor-section svelte-w47swm"><div class="mockup-name-header svelte-w47swm"><div class="mockup-title-group svelte-w47swm"><h3 class="mockup-name-title svelte-w47swm">Mockup</h3></div> <div class="mockup-buttons-group svelte-w47swm"><button class="new-mockup-btn svelte-w47swm" type="button"><!> New Mockup</button> <button class="view-all-btn svelte-w47swm" type="button">View All</button></div></div> <label class="form-label svelte-w47swm">Mockup Name</label> <div class="name-input-group svelte-w47swm"><input type="text" class="form-input name-input svelte-w47swm" placeholder="Mockup name..."/> <button class="copy-config-btn svelte-w47swm" type="button">Copy Config</button></div></div> <div class="editor-section svelte-w47swm"><div class="sidebar-title-2 svelte-w47swm">Canvas Setup</div> <div class="canvas-size-controls svelte-w47swm"><div class="form-input-group svelte-w47swm"><label class="form-label svelte-w47swm">Width</label> <input type="number" class="form-input svelte-w47swm" min="100" max="5000"/></div> <div class="form-input-group svelte-w47swm"><label class="form-label svelte-w47swm">Height</label> <input type="number" class="form-input svelte-w47swm" min="100" max="5000"/></div></div></div> <div class="editor-section svelte-w47swm"><div class="layers-header svelte-w47swm"><div class="layers-title svelte-w47swm"> </div> <div class="add-layer-buttons svelte-w47swm"><button class="add-layer-btn secondary svelte-w47swm" type="button"><!> </button> <label class="add-layer-btn svelte-w47swm"><!> File <input type="file" accept="image/*" style="display: none;"/></label></div></div> <!> <!></div> <!></div></sidebar> <div class="output-canvas svelte-w47swm"><!> <!></div> <!></div>');
+const oa = {
+  hash: "svelte-w47swm",
+  code: `.form-label.svelte-w47swm {display:block;font-size:0.75rem;font-weight:500;color:var(--color-text-muted, #666);margin-bottom:0.375rem;}.form-input.svelte-w47swm {width:100%;padding-top:0.5rem;padding-bottom:0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;margin-bottom:1rem;}.form-input-group.svelte-w47swm .form-input:where(.svelte-w47swm) {margin-bottom:0;}.form-input.svelte-w47swm:focus {outline:none;border-color:var(--color-primary, #3b82f6);}.form-input-group.svelte-w47swm {display:flex;flex-direction:column;gap:0.25rem;}.processor-container.svelte-w47swm {display:flex;height:100%;overflow:hidden;}sidebar.svelte-w47swm {min-width:360px;flex-shrink:0;background:var(--color-surface, #fff);border-right:1px solid var(--color-border, #ccc);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-left:1rem;}.header-logos.svelte-w47swm {display:flex;gap:1rem;font-size:1.5rem;padding:0.5rem;padding-right:1rem;border-bottom:1px solid var(--color-border, #ccc);align-items:center;flex-wrap:wrap;}.editor-items.svelte-w47swm {flex:1;overflow-y:auto;padding:0;padding-right:0.5rem;display:flex;flex-direction:column;}.editor-section.svelte-w47swm {border-bottom:1px solid var(--color-border, #ccc);padding:0.25rem 0 0.75rem 0;}.output-canvas.svelte-w47swm {flex:1;display:flex;min-width:0;background:var(--color-bg, #f5f5f5);overflow:hidden;position:relative;flex-shrink:0;}.canvas-header.svelte-w47swm {display:none;}.sidebar-title-2.svelte-w47swm {font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);padding:0.75rem 0 0.25rem 0;margin-bottom:0.5rem;}.layers-header.svelte-w47swm {display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.5rem;}.layers-title.svelte-w47swm {font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);flex:1;}.add-layer-buttons.svelte-w47swm {display:flex;gap:0.25rem;}.add-layer-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 200ms;display:flex;align-items:center;gap:0.375rem;}.add-layer-btn.svelte-w47swm:hover {background:var(--color-primary-dark, #2563eb);}.add-layer-btn.secondary.svelte-w47swm {background:transparent;color:var(--color-text, #111);border:1px solid var(--color-border, #ccc);}.add-layer-btn.secondary.svelte-w47swm:hover {background:var(--color-bg, #f5f5f5);}.url-input-group.svelte-w47swm {display:flex;gap:0.5rem;margin-top:0.5rem;padding:0.75rem;background:var(--color-surface-alt, #f5f5f5);border-radius:4px;}.url-input-group.svelte-w47swm input:where(.svelte-w47swm) {flex:1;padding-top:0.375rem;padding-bottom:0.375rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;}.url-input-group.svelte-w47swm button:where(.svelte-w47swm) {padding:0.375rem 0.75rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 200ms;}.url-input-group.svelte-w47swm button:where(.svelte-w47swm):hover {background:var(--color-primary-dark, #2563eb);}.canvas-size-controls.svelte-w47swm {display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:1rem;margin-top:0;}.form-input-group.svelte-w47swm {display:flex;flex-direction:column;}.no-layers.svelte-w47swm {padding:1rem;text-align:center;color:var(--color-text-muted, #666);font-size:0.875rem;}.layers-list.svelte-w47swm {display:flex;flex-direction:column;gap:0.5rem;}.layer-item.svelte-w47swm {display:flex;align-items:center;gap:0.5rem;padding:0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;cursor:pointer;transition:all 200ms;background:var(--color-surface, #fff);}.layer-item.svelte-w47swm:hover {border-color:var(--color-primary, #3b82f6);background:var(--color-surface-alt, #f5f5f5);}.layer-item.selected.svelte-w47swm {border-color:var(--color-primary, #3b82f6);background:var(--color-primary-light, #eff6ff);}.layer-item-preview.svelte-w47swm {width:40px;height:40px;flex-shrink:0;border-radius:4px;overflow:hidden;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}.layer-item-preview.svelte-w47swm img:where(.svelte-w47swm) {width:100%;height:100%;object-fit:cover;}.layer-item-info.svelte-w47swm {flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;}.layer-item-name.svelte-w47swm {font-size:0.875rem;color:var(--color-text, #111);display:flex;flex-direction:column;gap:0.25rem;}.layer-key-badge.svelte-w47swm {font-size:0.7rem;font-family:monospace;background:var(--color-primary-light, #eff6ff);color:var(--color-primary, #3b82f6);padding:0.125rem 0.375rem;border-radius:3px;font-weight:500;}.layer-item-actions.svelte-w47swm {display:flex;gap:0.25rem;align-items:center;}.layer-order-btn.svelte-w47swm {background:transparent;border:1px solid var(--color-border, #ccc);border-radius:3px;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 200ms;color:var(--color-text, #000);padding:0;}.layer-order-btn.svelte-w47swm:hover:not(:disabled) {background:var(--color-primary, #3b82f6);border-color:var(--color-primary, #3b82f6);color:white;}.layer-order-btn.svelte-w47swm:disabled {opacity:0.3;cursor:not-allowed;}.layer-delete-btn.svelte-w47swm {background:#ef4444;color:white;border:none;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;width:24px;height:24px;cursor:pointer;font-size:1rem;line-height:1;transition:background 200ms;}.layer-delete-btn.svelte-w47swm:hover {background:#dc2626;}.mockup-name-header.svelte-w47swm {display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}.mockup-title-group.svelte-w47swm {display:flex;align-items:center;gap:0.5rem;}.mockup-buttons-group.svelte-w47swm {display:flex;align-items:center;gap:0.5rem;}.new-mockup-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:var(--color-primary, #3b82f6);color:white;border:none;border-radius:4px;cursor:pointer;font-size:0.875rem;transition:background 200ms;display:flex;align-items:center;gap:0.375rem;}.new-mockup-btn.svelte-w47swm:hover {background:var(--color-primary-dark, #2563eb);}.mockup-name-title.svelte-w47swm {font-size:0.875rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted, #666);margin:0;}.view-all-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:transparent;color:var(--color-primary, #3b82f6);border:1px solid var(--color-primary, #3b82f6);border-radius:4px;cursor:pointer;font-size:0.875rem;transition:all 200ms;}.view-all-btn.svelte-w47swm:hover {background:var(--color-primary, #3b82f6);color:white;}.form-label.svelte-w47swm {display:block;font-size:0.875rem;font-weight:500;color:var(--color-text, #111);margin-bottom:0.25rem;}.form-input.svelte-w47swm {width:100%;padding:0.5rem;border:1px solid var(--color-border, #ccc);border-radius:4px;font-size:0.875rem;margin-bottom:0.75rem;}.name-input-group.svelte-w47swm {display:flex;gap:0.5rem;align-items:stretch;}.name-input.svelte-w47swm {flex:1;margin-bottom:0;min-width:0;}.copy-config-btn.svelte-w47swm {padding:0.375rem 0.75rem;background:transparent;color:var(--color-primary, #3b82f6);border:1px solid var(--color-primary, #3b82f6);border-radius:4px;cursor:pointer;font-size:0.875rem;transition:all 200ms;white-space:nowrap;flex-shrink:0;}.copy-config-btn.svelte-w47swm:hover {background:var(--color-primary, #3b82f6);color:white;}.no-layers.svelte-w47swm {text-align:center;color:var(--color-text-muted, #666);font-size:0.875rem;padding:2rem;}
+
+	@media (max-width: 768px) {.processor-container.svelte-w47swm {flex-direction:column;height:100%;}sidebar.svelte-w47swm {min-width:unset;width:100%;border-right:none;border-top:1px solid var(--color-border, #ccc);order:2;flex-shrink:1;overflow-y:auto;}sidebar.svelte-w47swm .header-logos:where(.svelte-w47swm) {display:none;}.output-canvas.svelte-w47swm {order:1;flex:0 0 50vh;height:50vh;min-height:50vh;}.canvas-header.svelte-w47swm {display:flex;position:absolute;top:0;left:0;right:0;z-index:10;gap:1rem;font-size:1.5rem;padding:0.5rem 1rem;align-items:center;flex-wrap:wrap;}
+	}`
+};
+function pa(o, r) {
+  e.push(r, !0), e.append_styles(o, oa);
+  let t = e.prop(r, "storageKey", 3, Jr), a = e.prop(r, "currentMockupKey", 3, Gr), n = e.state(e.proxy(nt())), s = e.state(""), l = e.state(null), f = e.state(""), h = e.state(!1), w = e.state(!1), u = null;
+  e.derived(() => e.get(l) ? e.get(n).composition.layers.find((C) => C.id === e.get(l)) ?? null : null);
+  function g(C) {
+    const R = {
       id: crypto.randomUUID(),
-      src: P,
-      ...Qt,
+      src: C,
+      ...nn,
       effects: [{ ...fe }],
       transform: {
         x: e.get(n).composition.width / 2,
@@ -2164,217 +2235,217 @@ function Ga(r, a) {
         rotation: 0
       }
     };
-    e.get(n).composition.layers.push(W), e.set(l, W.id, !0), p();
+    e.get(n).composition.layers.push(R), e.set(l, R.id, !0), m();
   }
-  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);
+  function p() {
+    const C = e.get(f).trim();
+    C && (g(C), e.set(f, ""), e.set(h, !1));
+  }
+  function T(C) {
+    const R = C.currentTarget, O = R.files?.[0];
+    if (O) {
+      const $ = new FileReader();
+      $.onload = (ne) => {
+        const Q = ne.target?.result;
+        typeof Q == "string" && g(Q);
+      }, $.readAsDataURL(O);
     }
-    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 O = e.get(n).composition.layers.find(($) => $.id === C);
+    O && (O.transform = R, m());
   }
-  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 O = e.get(n).composition.layers.find(($) => $.id === C);
+    O && (O.opacity = R, m());
   }
-  function I(P, W) {
-    const q = e.get(n).composition.layers.find((Q) => Q.id === P);
-    q && (q.visible = W, p());
+  function z(C, R) {
+    const O = e.get(n).composition.layers.find(($) => $.id === C);
+    O && (O.visible = R, m());
   }
-  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 O = e.get(n).composition.layers.find(($) => $.id === C);
+    O && (O.effects = R, m());
   }
-  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 O = e.get(n).composition.layers.find(($) => $.id === C);
+    O && (O.name = R.trim() || void 0, m());
   }
-  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 P(C) {
+    e.get(n).composition.layers = e.get(n).composition.layers.filter((R) => R.id !== C), e.get(l) === C && e.set(l, null), m();
   }
-  function 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 S(C) {
+    const R = e.get(n).composition.layers.findIndex((O) => O.id === C);
+    if (R > 0) {
+      const O = [...e.get(n).composition.layers];
+      [O[R - 1], O[R]] = [O[R], O[R - 1]], e.get(n).composition.layers = O, m();
     }
   }
-  function 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(n).composition.layers.findIndex((O) => O.id === C);
+    if (R >= 0 && R < e.get(n).composition.layers.length - 1) {
+      const O = [...e.get(n).composition.layers];
+      [O[R], O[R + 1]] = [O[R + 1], O[R]], e.get(n).composition.layers = O, m();
     }
   }
-  function u(P, W) {
-    e.get(n).composition.width = P, e.get(n).composition.height = W, p();
+  function d(C, R) {
+    e.get(n).composition.width = C, e.get(n).composition.height = R, m();
   }
-  function p() {
-    d && clearTimeout(d), d = setTimeout(
+  function m() {
+    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(n).name = e.get(s) || "Untitled Mockup", e.get(n).updatedAt = Date.now(), Br(e.get(n), t()), Ee(e.get(n).id, a());
   }
   function c() {
-    o();
-    const P = tt();
-    e.set(n, P, !0), e.set(i, P.name, !0), je(null, s());
+    i();
+    const C = nt();
+    e.set(n, C, !0), e.set(s, C.name, !0), Ee(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(n, C, !0), e.set(s, C.name, !0), Ee(C.id, a()), e.set(w, !1);
   }
-  function N() {
+  function I() {
     c(), e.set(w, !1);
   }
-  async function B() {
+  async function X() {
     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(n), 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 = Er(a());
+    if (C) {
+      const R = Lr(C, t());
+      R && (e.set(n, 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 = sa(), B = e.child(J), A = 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 = $r(), O = e.child(R);
+      e.snippet(O, () => r.children), e.reset(R), e.append(C, R);
     };
-    e.if(U, (P) => {
-      a.children && P(z);
+    e.if(A, (C) => {
+      r.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 Z = e.sibling(A, 2), L = e.child(Z), E = e.child(L), q = e.sibling(e.child(E), 2), K = e.child(q);
   K.__click = c;
-  var H = e.child(K);
-  Me(H, {}), e.next(), e.reset(K);
+  var V = e.child(K);
+  Me(V, {}), e.next(), e.reset(K);
   var G = e.sibling(K, 2);
-  G.__click = () => e.set(w, !0), e.reset(L), e.reset(j);
-  var X = e.sibling(j, 4), Y = e.child(X);
-  e.remove_input_defaults(Y), Y.__input = () => {
-    p();
+  G.__click = () => e.set(w, !0), e.reset(q), e.reset(E);
+  var Y = e.sibling(E, 4), D = e.child(Y);
+  e.remove_input_defaults(D), D.__input = () => {
+    m();
   };
-  var 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);
-  Me(Ne, {});
-  var be = e.sibling(Ne);
-  e.reset(de);
-  var pe = e.sibling(de, 2), Ie = e.child(pe);
+  var W = e.sibling(D, 2);
+  W.__click = X, e.reset(Y), e.reset(L);
+  var N = e.sibling(L, 2), H = e.sibling(e.child(N), 2), U = e.child(H), de = e.sibling(e.child(U), 2);
+  e.remove_input_defaults(de), de.__input = (C) => d(Number(C.currentTarget.value), e.get(n).composition.height), e.reset(U);
+  var ie = e.sibling(U, 2), he = e.sibling(e.child(ie), 2);
+  e.remove_input_defaults(he), he.__input = (C) => d(e.get(n).composition.width, Number(C.currentTarget.value)), e.reset(ie), e.reset(H), e.reset(N);
+  var ge = e.sibling(N, 2), le = e.child(ge), be = e.child(le), Re = e.child(be);
+  e.reset(be);
+  var Se = e.sibling(be, 2), ue = e.child(Se);
+  ue.__click = () => e.set(h, !e.get(h));
+  var Ie = e.child(ue);
   Me(Ie, {});
-  var ze = e.sibling(Ie, 2);
-  ze.__change = T, e.reset(pe), e.reset(Se), e.reset(le);
-  var me = e.sibling(le, 2);
+  var _e = e.sibling(Ie);
+  e.reset(ue);
+  var me = e.sibling(ue, 2), ze = e.child(me);
+  Me(ze, {});
+  var je = e.sibling(ze, 2);
+  je.__change = T, e.reset(me), e.reset(Se), e.reset(le);
+  var pe = e.sibling(le, 2);
   {
-    var 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 = Qr(), O = e.child(R);
+      e.remove_input_defaults(O), O.__keydown = (ne) => ne.key === "Enter" && p();
+      var $ = e.sibling(O, 2);
+      $.__click = p, e.reset(R), e.bind_value(O, () => e.get(f), (ne) => e.set(f, ne)), e.append(C, R);
     };
-    e.if(me, (P) => {
-      e.get(h) && P(ye);
+    e.if(pe, (C) => {
+      e.get(h) && C(ye);
     });
   }
-  var rt = e.sibling(me, 2);
+  var lt = e.sibling(pe, 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 ct = (C) => {
+      var R = ea();
+      e.append(C, R);
+    }, dt = (C) => {
+      var R = ra();
+      e.each(R, 23, () => e.get(n).composition.layers, (O) => O.id, (O, $, ne) => {
+        var Q = na();
         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 = (re) => re.key === "Enter" && v(e.get($).id);
+        var Ye = e.child(Q), gt = e.child(Ye);
+        e.reset(Ye);
+        var Fe = e.sibling(Ye, 2), De = e.child(Fe), Ke = e.child(De), bt = e.sibling(Ke);
         {
-          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 _t = (re) => {
+            var Ze = ta(), kt = e.child(Ze, !0);
+            e.reset(Ze), e.template_effect(() => e.set_text(kt, e.get($).name)), e.append(re, Ze);
           };
-          e.if(ht, (ae) => {
-            e.get(Q).name && ae(_t);
+          e.if(bt, (re) => {
+            e.get($).name && re(_t);
           });
         }
-        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(De);
+        var Je = e.sibling(De, 2), we = e.child(Je);
+        we.__click = (re) => {
+          re.stopPropagation(), S(e.get($).id);
         };
-        var gt = e.child(we);
-        nt(gt, { rotate: "-90deg" }), e.reset(we);
+        var yt = e.child(we);
+        rt(yt, { rotate: "-90deg" }), e.reset(we);
         var xe = e.sibling(we, 2);
-        xe.__click = (ae) => {
-          ae.stopPropagation(), g(e.get(Q).id);
+        xe.__click = (re) => {
+          re.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 wt = e.child(xe);
+        rt(wt, { rotate: "90deg" }), e.reset(xe);
+        var Xe = e.sibling(xe, 2);
+        Xe.__click = (re) => {
+          re.stopPropagation(), P(e.get($).id);
         };
-        var 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 xt = e.child(Xe);
+        Ae(xt, {}), e.reset(Xe), e.reset(Je), e.reset(Fe), e.reset(Q), e.template_effect(() => {
+          te = e.set_class(Q, 1, "layer-item svelte-w47swm", null, te, { selected: e.get(l) === e.get($).id }), e.set_attribute(gt, "src", e.get($).src), e.set_text(Ke, `${(e.get($).name || `Layer ${e.get(ne) + 1}`) ?? ""} `), we.disabled = e.get(ne) === 0, xe.disabled = e.get(ne) === e.get(n).composition.layers.length - 1;
+        }), e.append(O, Q);
+      }), e.reset(R), e.append(C, R);
     };
-    e.if(rt, (P) => {
-      e.get(n).composition.layers.length === 0 ? P(ot) : P(lt, !1);
+    e.if(lt, (C) => {
+      e.get(n).composition.layers.length === 0 ? C(ct) : C(dt, !1);
     });
   }
-  e.reset(_e);
-  var ct = e.sibling(_e, 2);
+  e.reset(ge);
+  var ut = e.sibling(ge, 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 mt = (C) => {
+      const R = e.derived(() => e.get(n).composition.layers.find((Q) => Q.id === e.get(l)));
+      var O = e.comment(), $ = e.first_child(O);
       {
-        var ne = ($) => {
-          wa($, {
+        var ne = (Q) => {
+          Wr(Q, {
             get layer() {
-              return e.get(W);
+              return e.get(R);
             },
             get canvasWidth() {
               return e.get(n).composition.width;
@@ -2382,52 +2453,52 @@ function Ga(r, a) {
             get canvasHeight() {
               return e.get(n).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) => z(e.get(R).id, te),
+            onEffectsChange: (te) => _(e.get(R).id, te),
+            onNameChange: (te) => k(e.get(R).id, te),
+            onDelete: () => P(e.get(R).id)
           });
         };
-        e.if(Q, ($) => {
-          e.get(W) && $(ne);
+        e.if($, (Q) => {
+          e.get(R) && Q(ne);
         });
       }
-      e.append(P, q);
+      e.append(C, O);
     };
-    e.if(ct, (P) => {
-      e.get(l) && P(ut);
+    e.if(ut, (C) => {
+      e.get(l) && C(mt);
     });
   }
-  e.reset(E), e.reset(Z);
-  var De = e.sibling(Z, 2), Ve = e.child(De);
+  e.reset(Z), e.reset(B);
+  var We = e.sibling(B, 2), He = 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 pt = (C) => {
+      var R = aa(), O = e.child(R);
+      e.snippet(O, () => r.children), e.reset(R), e.append(C, R);
     };
-    e.if(Ve, (P) => {
-      a.children && P(dt);
+    e.if(He, (C) => {
+      r.children && C(pt);
     });
   }
-  var pt = e.sibling(Ve, 2);
-  en(pt, {
-    children: (P, W) => {
-      sn(P, {
+  var vt = e.sibling(He, 2);
+  sn(vt, {
+    children: (C, R) => {
+      un(C, {
         get mockup() {
           return e.get(n);
         }
       });
     }
-  }), e.reset(De);
-  var mt = e.sibling(De, 2);
+  }), e.reset(We);
+  var ft = e.sibling(We, 2);
   {
-    var vt = (P) => {
-      za(P, {
+    var ht = (C) => {
+      Fr(C, {
         onclose: () => e.set(w, !1),
         onSelect: M,
-        onNew: N,
+        onNew: I,
         get currentMockupId() {
           return e.get(n).id;
         },
@@ -2436,45 +2507,45 @@ function Ga(r, a) {
         }
       });
     };
-    e.if(mt, (P) => {
-      e.get(w) && P(vt);
+    e.if(ft, (C) => {
+      e.get(w) && C(ht);
     });
   }
   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(n).composition.width), e.set_value(he, e.get(n).composition.height), e.set_text(Re, `Layers (${e.get(n).composition.layers.length ?? ""})`), e.set_text(_e, ` ${e.get(h) ? "Cancel" : "URL"}`);
+  }), e.bind_value(D, () => e.get(s), (C) => e.set(s, C)), e.append(o, J), e.pop();
 }
 e.delegate(["click", "input", "change", "keydown"]);
 export {
-  Ya as CURRENT_MOCKUP_KEY,
+  Gr as CURRENT_MOCKUP_KEY,
   at as InputBatcher,
-  wa as LayerControls,
-  Ga as MockupEditor,
-  sn as MockupEditorRenderer,
-  za as MockupListModal,
-  Ja as MockupRenderer,
-  Kt as RenderScheduler,
-  Xa as STORAGE_KEY,
-  en as ZoomableCanvas,
-  tt as createNewMockup,
-  st as defaultComposition,
+  Wr as LayerControls,
+  pa as MockupEditor,
+  un as MockupEditorRenderer,
+  Fr as MockupListModal,
+  ma as MockupRenderer,
+  $t as RenderScheduler,
+  Jr as STORAGE_KEY,
+  sn as ZoomableCanvas,
+  nt as createNewMockup,
+  ot as defaultComposition,
   ce as defaultCylinderWarp,
-  ie as defaultImageOnSurface,
-  Qt as defaultLayer,
-  se as defaultPlaneWarp,
+  se as defaultImageOnSurface,
+  nn as defaultLayer,
+  ae as defaultPlaneWarp,
   fe as defaultResizeEffect,
   ee as defaultRestyleEffect,
   ke as defaultSphereWarp,
-  Gt as defaultTransform,
-  Ce as defaultView,
+  tn as defaultTransform,
+  Pe 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,
+  qr as deleteMockup,
+  Ne as loadAllMockups,
+  Er as loadCurrentMockupId,
+  Lr as loadMockup,
+  Oe as renderMockupCanvas,
+  on as renderMockupCanvasEditor,
+  Ee as saveCurrentMockupId,
+  Br as saveMockup
 };