@varianta/sdk 0.1.3 → 0.1.4

package/dist/index.esm.js

@@ -1,6 +1,4 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { forwardRef as Z, useRef as k, useEffect as L, useImperativeHandle as q, useState as S, useCallback as M } from "react";
-class B {
+class N {
   constructor(e) {
     this.animationFrameId = null, this.needsRender = !0, this.areas = [], this.contents = /* @__PURE__ */ new Map(), this.artboard = null, this.bgImageElement = null, this.loadedImages = /* @__PURE__ */ new Map(), this.loadingImages = /* @__PURE__ */ new Set(), this.zoom = 1, this.pan = { x: 0, y: 0 }, this.selectedAreaId = null, this.hoveredHandle = null, this.eventListeners = /* @__PURE__ */ new Map(), this.safeArea = null, this.safeAreaViolations = /* @__PURE__ */ new Set(), this.showAreaBorders = !0, this.areaSelectionEnabled = !0, this.renderLoop = () => {
       try {
@@ -131,10 +129,10 @@ class B {
   getCenteredPan(e) {
     if (!this.artboard)
       return null;
-    const { width: t, height: i } = this.artboard, n = window.devicePixelRatio || 1, r = this.canvas.width / n, s = this.canvas.height / n;
+    const { width: t, height: i } = this.artboard, n = window.devicePixelRatio || 1, a = this.canvas.width / n, o = this.canvas.height / n;
     return {
-      x: (r / e - t) / 2,
-      y: (s / e - i) / 2
+      x: (a / e - t) / 2,
+      y: (o / e - i) / 2
     };
   }
   /**
@@ -149,11 +147,11 @@ class B {
   fitToView() {
     if (!this.artboard)
       return;
-    const e = 0, { width: t, height: i } = this.artboard, n = window.devicePixelRatio || 1, r = this.canvas.width / n - e * 2, s = this.canvas.height / n - e * 2;
-    if (r <= 0 || s <= 0)
+    const e = 0, { width: t, height: i } = this.artboard, n = window.devicePixelRatio || 1, a = this.canvas.width / n - e * 2, o = this.canvas.height / n - e * 2;
+    if (a <= 0 || o <= 0)
       return;
-    const a = r / t, o = s / i, d = Math.min(a, o), l = this.canvas.width / n, h = this.canvas.height / n, u = (l / d - t) / 2, g = (h / d - i) / 2;
-    this.zoom = d, this.pan = { x: u, y: g }, this.requestRender();
+    const s = a / t, r = o / i, d = Math.min(s, r), l = this.canvas.width / n, c = this.canvas.height / n, u = (l / d - t) / 2, p = (c / d - i) / 2;
+    this.zoom = d, this.pan = { x: u, y: p }, this.requestRender();
   }
   /**
    * Set the selected area
@@ -183,8 +181,8 @@ class B {
    * Convert screen coordinates to canvas coordinates
    */
   screenToCanvas(e, t) {
-    const i = window.devicePixelRatio || 1, n = e / i, r = t / i, s = n / this.zoom - this.pan.x, a = r / this.zoom - this.pan.y;
-    return { x: s, y: a };
+    const i = window.devicePixelRatio || 1, n = e / i, a = t / i, o = n / this.zoom - this.pan.x, s = a / this.zoom - this.pan.y;
+    return { x: o, y: s };
   }
   /**
    * Get content bounds for an area (in artboard coordinates)
@@ -196,34 +194,34 @@ class B {
     const i = this.contents.get(e);
     if (!i)
       return null;
-    const { location: n } = t, { x: r, y: s, width: a, height: o } = n;
+    const { location: n } = t, { x: a, y: o, width: s, height: r } = n;
     if (i.type === "text") {
-      const d = i.offset || { x: 0, y: 0 }, l = i.scale ?? 1, h = i.rotation ?? 0, u = a * l, g = o * l, m = r + a / 2 + d.x, f = s + o / 2 + d.y;
+      const d = i.offset || { x: 0, y: 0 }, l = i.scale ?? 1, c = i.rotation ?? 0, u = s * l, p = r * l, g = a + s / 2 + d.x, m = o + r / 2 + d.y;
       return {
-        x: m - u / 2,
-        y: f - g / 2,
+        x: g - u / 2,
+        y: m - p / 2,
         width: u,
-        height: g,
-        rotation: h,
-        centerX: m,
-        centerY: f
+        height: p,
+        rotation: c,
+        centerX: g,
+        centerY: m
       };
     } else if (i.type === "image") {
       const d = this.loadedImages.get(e);
       if (!d)
         return null;
-      const l = i.offset || { x: 0, y: 0 }, h = i.scale ?? 1, u = i.rotation ?? 0, g = d.naturalWidth / d.naturalHeight, m = a / o;
-      let f, y;
-      g > m ? (f = a, y = a / g) : (y = o, f = o * g);
-      const v = f * h, w = y * h, p = r + a / 2 + l.x, C = s + o / 2 + l.y;
+      const l = i.offset || { x: 0, y: 0 }, c = i.scale ?? 1, u = i.rotation ?? 0, p = d.naturalWidth / d.naturalHeight, g = s / r;
+      let m, v;
+      p > g ? (m = s, v = s / p) : (v = r, m = r * p);
+      const b = m * c, y = v * c, x = a + s / 2 + l.x, w = o + r / 2 + l.y;
       return {
-        x: p - v / 2,
-        y: C - w / 2,
-        width: v,
-        height: w,
+        x: x - b / 2,
+        y: w - y / 2,
+        width: b,
+        height: y,
         rotation: u,
-        centerX: p,
-        centerY: C
+        centerX: x,
+        centerY: w
       };
     }
     return null;
@@ -236,8 +234,8 @@ class B {
     if (!this.areaSelectionEnabled)
       return null;
     for (let i = this.areas.length - 1; i >= 0; i--) {
-      const n = this.areas[i], r = this.getContentBounds(n.id);
-      if (r && this.isPointInBounds(e, t, r))
+      const n = this.areas[i], a = this.getContentBounds(n.id);
+      if (a && this.isPointInBounds(e, t, a))
         return n.id;
     }
     return null;
@@ -250,8 +248,8 @@ class B {
     if (!this.areaSelectionEnabled)
       return null;
     for (let i = this.areas.length - 1; i >= 0; i--) {
-      const n = this.areas[i], { x: r, y: s, width: a, height: o } = n.location;
-      if (e >= r && e <= r + a && t >= s && t <= s + o)
+      const n = this.areas[i], { x: a, y: o, width: s, height: r } = n.location;
+      if (e >= a && e <= a + s && t >= o && t <= o + r)
         return n.id;
     }
     return null;
@@ -260,14 +258,14 @@ class B {
    * Test if a point is inside rotated bounds
    */
   isPointInBounds(e, t, i) {
-    const { centerX: n, centerY: r, width: s, height: a, rotation: o } = i, d = -o * Math.PI / 180, l = Math.cos(d), h = Math.sin(d), u = e - n, g = t - r, m = u * l - g * h, f = u * h + g * l;
-    return m >= -s / 2 && m <= s / 2 && f >= -a / 2 && f <= a / 2;
+    const { centerX: n, centerY: a, width: o, height: s, rotation: r } = i, d = -r * Math.PI / 180, l = Math.cos(d), c = Math.sin(d), u = e - n, p = t - a, g = u * l - p * c, m = u * c + p * l;
+    return g >= -o / 2 && g <= o / 2 && m >= -s / 2 && m <= s / 2;
   }
   /**
    * Get handle positions for the selected content
    */
   getContentHandlePositions(e) {
-    const t = this.areas.find((v) => v.id === e);
+    const t = this.areas.find((b) => b.id === e);
     if (!t)
       return null;
     const i = this.contents.get(e);
@@ -276,25 +274,25 @@ class B {
     const n = this.getContentBounds(e);
     if (!n)
       return null;
-    const { centerX: r, centerY: s, width: a, height: o, rotation: d } = n, l = 6 / this.zoom, h = 30 / this.zoom, u = d * Math.PI / 180, g = Math.cos(u), m = Math.sin(u), f = (v, w) => ({
-      x: r + v * g - w * m,
-      y: s + v * m + w * g
-    }), y = [];
+    const { centerX: a, centerY: o, width: s, height: r, rotation: d } = n, l = 6 / this.zoom, c = 30 / this.zoom, u = d * Math.PI / 180, p = Math.cos(u), g = Math.sin(u), m = (b, y) => ({
+      x: a + b * p - y * g,
+      y: o + b * g + y * p
+    }), v = [];
     if (i.type === "image" && t.imageOptions?.allowScaling || i.type === "text" && t.textOptions?.allowScaling) {
-      const v = a / 2, w = o / 2, p = f(-v, -w);
-      y.push({ type: "nw", ...p, radius: l });
-      const C = f(v, -w);
-      y.push({ type: "ne", ...C, radius: l });
-      const I = f(v, w);
-      y.push({ type: "se", ...I, radius: l });
-      const x = f(-v, w);
-      y.push({ type: "sw", ...x, radius: l });
+      const b = s / 2, y = r / 2, x = m(-b, -y);
+      v.push({ type: "nw", ...x, radius: l });
+      const w = m(b, -y);
+      v.push({ type: "ne", ...w, radius: l });
+      const C = m(b, y);
+      v.push({ type: "se", ...C, radius: l });
+      const M = m(-b, y);
+      v.push({ type: "sw", ...M, radius: l });
     }
     if (i.type === "image" && t.imageOptions?.allowRotation || i.type === "text" && t.textOptions?.allowRotation) {
-      const v = f(0, -o / 2 - h);
-      y.push({ type: "rotate", ...v, radius: l });
+      const b = m(0, -r / 2 - c);
+      v.push({ type: "rotate", ...b, radius: l });
     }
-    return y;
+    return v;
   }
   /**
    * Hit test handles at given canvas coordinates
@@ -303,10 +301,10 @@ class B {
     const n = this.getContentHandlePositions(i);
     if (!n)
       return null;
-    for (const r of n) {
-      const s = e - r.x, a = t - r.y;
-      if (Math.sqrt(s * s + a * a) <= r.radius * 2)
-        return r.type;
+    for (const a of n) {
+      const o = e - a.x, s = t - a.y;
+      if (Math.sqrt(o * o + s * s) <= a.radius * 2)
+        return a.type;
     }
     return null;
   }
@@ -346,15 +344,15 @@ class B {
   checkSafeAreaViolations() {
     if (!this.safeArea || !this.artboard)
       return [];
-    const e = [], { top: t, right: i, bottom: n, left: r } = this.safeArea, s = r, a = t, o = this.artboard.width - i, d = this.artboard.height - n;
+    const e = [], { top: t, right: i, bottom: n, left: a } = this.safeArea, o = a, s = t, r = this.artboard.width - i, d = this.artboard.height - n;
     for (const l of this.areas) {
       if (!this.contents.get(l.id))
         continue;
-      const h = this.getContentBounds(l.id);
-      if (!h)
+      const c = this.getContentBounds(l.id);
+      if (!c)
         continue;
-      const { centerX: u, centerY: g, width: m, height: f, rotation: y } = h, v = y * Math.PI / 180, w = Math.abs(Math.cos(v)), p = Math.abs(Math.sin(v)), C = m * w + f * p, I = m * p + f * w, x = u - C / 2, R = g - I / 2, D = u + C / 2, U = g + I / 2;
-      (x < s || R < a || D > o || U > d) && e.push(l.id);
+      const { centerX: u, centerY: p, width: g, height: m, rotation: v } = c, b = v * Math.PI / 180, y = Math.abs(Math.cos(b)), x = Math.abs(Math.sin(b)), w = g * y + m * x, C = g * x + m * y, M = u - w / 2, A = p - C / 2, D = u + w / 2, R = p + C / 2;
+      (M < o || A < s || D > r || R > d) && e.push(l.id);
     }
     return this.safeAreaViolations = new Set(e), this.requestRender(), e;
   }
@@ -383,15 +381,15 @@ class B {
       throw new Error("No artboard configured");
     const { width: e, height: t, backgroundColor: i } = this.artboard, n = document.createElement("canvas");
     n.width = e, n.height = t;
-    const r = n.getContext("2d");
-    if (!r)
+    const a = n.getContext("2d");
+    if (!a)
       throw new Error("Failed to get 2D context for export");
-    r.fillStyle = i, r.fillRect(0, 0, e, t), this.backgroundImage?.position === "behind" && this.bgImageElement && this.drawBackgroundImageOnContext(r, e, t);
-    for (const s of this.areas)
-      this.drawAreaContentOnContext(r, s);
-    return this.backgroundImage?.position === "overlay" && this.bgImageElement && this.drawBackgroundImageOnContext(r, e, t), new Promise((s, a) => {
-      n.toBlob((o) => {
-        o ? s(o) : a(new Error("Failed to create PNG blob"));
+    a.fillStyle = i, a.fillRect(0, 0, e, t), this.backgroundImage?.position === "behind" && this.bgImageElement && this.drawBackgroundImageOnContext(a, e, t);
+    for (const o of this.areas)
+      this.drawAreaContentOnContext(a, o);
+    return this.backgroundImage?.position === "overlay" && this.bgImageElement && this.drawBackgroundImageOnContext(a, e, t), new Promise((o, s) => {
+      n.toBlob((r) => {
+        r ? o(r) : s(new Error("Failed to create PNG blob"));
       }, "image/png", 1);
     });
   }
@@ -424,17 +422,17 @@ class B {
     e.save();
     const i = window.devicePixelRatio || 1;
     e.scale(i, i), e.scale(this.zoom, this.zoom), e.translate(this.pan.x, this.pan.y);
-    const { width: n, height: r, backgroundColor: s } = this.artboard;
-    e.fillStyle = s, e.fillRect(0, 0, n, r), e.strokeStyle = "#d1d5db", e.lineWidth = 1 / this.zoom, e.strokeRect(0, 0, n, r), this.backgroundImage?.position === "behind" && this.renderBackgroundImage();
-    for (const a of this.areas)
-      this.renderAreaWithContent(a);
+    const { width: n, height: a, backgroundColor: o } = this.artboard;
+    e.fillStyle = o, e.fillRect(0, 0, n, a), e.strokeStyle = "#d1d5db", e.lineWidth = 1 / this.zoom, e.strokeRect(0, 0, n, a), this.backgroundImage?.position === "behind" && this.renderBackgroundImage();
+    for (const s of this.areas)
+      this.renderAreaWithContent(s);
     this.backgroundImage?.position === "overlay" && this.renderBackgroundImage(), this.renderSafeAreaGuide();
-    for (const a of this.safeAreaViolations) {
-      const o = this.areas.find((g) => g.id === a);
-      if (!o)
+    for (const s of this.safeAreaViolations) {
+      const r = this.areas.find((p) => p.id === s);
+      if (!r)
         continue;
-      const { x: d, y: l, width: h, height: u } = o.location;
-      e.save(), e.fillStyle = "rgba(239, 68, 68, 0.15)", e.fillRect(d, l, h, u), e.restore();
+      const { x: d, y: l, width: c, height: u } = r.location;
+      e.save(), e.fillStyle = "rgba(239, 68, 68, 0.15)", e.fillRect(d, l, c, u), e.restore();
     }
     this.selectedAreaId && this.renderSelectionOverlay(this.selectedAreaId), e.restore();
   }
@@ -444,36 +442,36 @@ class B {
   renderSelectionOverlay(e) {
     const t = this.getContentBounds(e);
     if (!t) {
-      const l = this.areas.find((y) => y.id === e);
+      const l = this.areas.find((v) => v.id === e);
       if (!l)
         return;
-      const { ctx: h } = this, { x: u, y: g, width: m, height: f } = l.location;
-      h.save(), h.strokeStyle = "#3b82f6", h.lineWidth = 2 / this.zoom, h.setLineDash([]), h.strokeRect(u, g, m, f), h.restore();
+      const { ctx: c } = this, { x: u, y: p, width: g, height: m } = l.location;
+      c.save(), c.strokeStyle = "#3b82f6", c.lineWidth = 2 / this.zoom, c.setLineDash([]), c.strokeRect(u, p, g, m), c.restore();
       return;
     }
-    const { ctx: i } = this, { centerX: n, centerY: r, width: s, height: a, rotation: o } = t;
-    i.save(), i.translate(n, r), i.rotate(o * Math.PI / 180), i.strokeStyle = "#3b82f6", i.lineWidth = 2 / this.zoom, i.setLineDash([]), i.strokeRect(-s / 2, -a / 2, s, a), i.restore();
+    const { ctx: i } = this, { centerX: n, centerY: a, width: o, height: s, rotation: r } = t;
+    i.save(), i.translate(n, a), i.rotate(r * Math.PI / 180), i.strokeStyle = "#3b82f6", i.lineWidth = 2 / this.zoom, i.setLineDash([]), i.strokeRect(-o / 2, -s / 2, o, s), i.restore();
     const d = this.getContentHandlePositions(e);
     if (d)
       for (const l of d) {
         i.save();
-        const h = this.hoveredHandle === l.type, u = h ? "#dbeafe" : "#ffffff", g = h ? "#2563eb" : "#3b82f6";
+        const c = this.hoveredHandle === l.type, u = c ? "#dbeafe" : "#ffffff", p = c ? "#2563eb" : "#3b82f6";
         if (l.type === "rotate") {
-          const m = this.getRotatedPoint(n, r - a / 2, n, r, o);
-          i.beginPath(), i.strokeStyle = g, i.lineWidth = 1 / this.zoom, i.setLineDash([4 / this.zoom, 4 / this.zoom]), i.moveTo(m.x, m.y), i.lineTo(l.x, l.y), i.stroke(), i.setLineDash([]), i.beginPath(), i.fillStyle = u, i.strokeStyle = g, i.lineWidth = 2 / this.zoom, i.arc(l.x, l.y, l.radius, 0, Math.PI * 2), i.fill(), i.stroke(), i.beginPath(), i.strokeStyle = g, i.lineWidth = 1.5 / this.zoom, i.arc(l.x, l.y, l.radius * 0.5, -Math.PI * 0.8, Math.PI * 0.5), i.stroke();
+          const g = this.getRotatedPoint(n, a - s / 2, n, a, r);
+          i.beginPath(), i.strokeStyle = p, i.lineWidth = 1 / this.zoom, i.setLineDash([4 / this.zoom, 4 / this.zoom]), i.moveTo(g.x, g.y), i.lineTo(l.x, l.y), i.stroke(), i.setLineDash([]), i.beginPath(), i.fillStyle = u, i.strokeStyle = p, i.lineWidth = 2 / this.zoom, i.arc(l.x, l.y, l.radius, 0, Math.PI * 2), i.fill(), i.stroke(), i.beginPath(), i.strokeStyle = p, i.lineWidth = 1.5 / this.zoom, i.arc(l.x, l.y, l.radius * 0.5, -Math.PI * 0.8, Math.PI * 0.5), i.stroke();
         } else
-          i.fillStyle = u, i.strokeStyle = g, i.lineWidth = 2 / this.zoom, i.fillRect(l.x - l.radius, l.y - l.radius, l.radius * 2, l.radius * 2), i.strokeRect(l.x - l.radius, l.y - l.radius, l.radius * 2, l.radius * 2);
+          i.fillStyle = u, i.strokeStyle = p, i.lineWidth = 2 / this.zoom, i.fillRect(l.x - l.radius, l.y - l.radius, l.radius * 2, l.radius * 2), i.strokeRect(l.x - l.radius, l.y - l.radius, l.radius * 2, l.radius * 2);
         i.restore();
       }
   }
   /**
    * Rotate a point around a center
    */
-  getRotatedPoint(e, t, i, n, r) {
-    const s = r * Math.PI / 180, a = Math.cos(s), o = Math.sin(s), d = e - i, l = t - n;
+  getRotatedPoint(e, t, i, n, a) {
+    const o = a * Math.PI / 180, s = Math.cos(o), r = Math.sin(o), d = e - i, l = t - n;
     return {
-      x: i + d * a - l * o,
-      y: n + d * o + l * a
+      x: i + d * s - l * r,
+      y: n + d * r + l * s
     };
   }
   /**
@@ -484,9 +482,9 @@ class B {
       return;
     const { ctx: e } = this, { opacity: t } = this.backgroundImage, { width: i, height: n } = this.artboard;
     e.save(), e.globalAlpha = t;
-    const r = this.bgImageElement.naturalWidth / this.bgImageElement.naturalHeight, s = i / n;
-    let a, o, d, l;
-    r > s ? (o = n, a = n * r, d = (i - a) / 2, l = 0) : (a = i, o = i / r, d = 0, l = (n - o) / 2), e.drawImage(this.bgImageElement, d, l, a, o), e.restore();
+    const a = this.bgImageElement.naturalWidth / this.bgImageElement.naturalHeight, o = i / n;
+    let s, r, d, l;
+    a > o ? (r = n, s = n * a, d = (i - s) / 2, l = 0) : (s = i, r = i / a, d = 0, l = (n - r) / 2), e.drawImage(this.bgImageElement, d, l, s, r), e.restore();
   }
   /**
    * Render safe area guide as dashed green rectangle
@@ -494,17 +492,17 @@ class B {
   renderSafeAreaGuide() {
     if (!this.safeArea || !this.artboard)
       return;
-    const { ctx: e } = this, { top: t, right: i, bottom: n, left: r } = this.safeArea, s = r, a = t, o = this.artboard.width - r - i, d = this.artboard.height - t - n;
-    o <= 0 || d <= 0 || (e.save(), e.strokeStyle = "#22c55e", e.lineWidth = 1 / this.zoom, e.setLineDash([6 / this.zoom, 4 / this.zoom]), e.strokeRect(s, a, o, d), e.setLineDash([]), e.restore());
+    const { ctx: e } = this, { top: t, right: i, bottom: n, left: a } = this.safeArea, o = a, s = t, r = this.artboard.width - a - i, d = this.artboard.height - t - n;
+    r <= 0 || d <= 0 || (e.save(), e.strokeStyle = "#22c55e", e.lineWidth = 1 / this.zoom, e.setLineDash([6 / this.zoom, 4 / this.zoom]), e.strokeRect(o, s, r, d), e.setLineDash([]), e.restore());
   }
   /**
    * Render an area with its content
    */
   renderAreaWithContent(e) {
-    const { ctx: t } = this, { location: i, backgroundColor: n } = e, { x: r, y: s, width: a, height: o } = i;
-    n && (t.fillStyle = n, t.fillRect(r, s, a, o));
+    const { ctx: t } = this, { location: i, backgroundColor: n } = e, { x: a, y: o, width: s, height: r } = i;
+    n && (t.fillStyle = n, t.fillRect(a, o, s, r));
     const d = this.contents.get(e.id);
-    d && (d.type === "text" ? this.renderTextContent(e, d) : d.type === "image" && this.renderImageContent(e, d)), this.showAreaBorders && e.showBorder && (t.save(), t.strokeStyle = e.borderColor || "#3b82f6", t.lineWidth = 1 / this.zoom, t.setLineDash([4 / this.zoom, 4 / this.zoom]), t.strokeRect(r, s, a, o), t.setLineDash([]), t.restore());
+    d && (d.type === "text" ? this.renderTextContent(e, d) : d.type === "image" && this.renderImageContent(e, d)), this.showAreaBorders && e.showBorder && (t.save(), t.strokeStyle = e.borderColor || "#3b82f6", t.lineWidth = 1 / this.zoom, t.setLineDash([4 / this.zoom, 4 / this.zoom]), t.strokeRect(a, o, s, r), t.setLineDash([]), t.restore());
   }
   /**
    * Render text content in an area
@@ -512,22 +510,22 @@ class B {
   renderTextContent(e, t) {
     if (!t.text.trim())
       return;
-    const { ctx: i } = this, { location: n } = e, { x: r, y: s, width: a, height: o } = n, d = t.offset || { x: 0, y: 0 }, l = t.scale ?? 1, h = t.rotation ?? 0, u = r + a / 2 + d.x, g = s + o / 2 + d.y;
-    i.save(), i.beginPath(), i.rect(r, s, a, o), i.clip(), i.translate(u, g), i.rotate(h * Math.PI / 180), i.scale(l, l), i.font = `${t.size}px ${t.font}, sans-serif`, i.fillStyle = t.color, i.textBaseline = "middle";
-    let m;
+    const { ctx: i } = this, { location: n } = e, { x: a, y: o, width: s, height: r } = n, d = t.offset || { x: 0, y: 0 }, l = t.scale ?? 1, c = t.rotation ?? 0, u = a + s / 2 + d.x, p = o + r / 2 + d.y;
+    i.save(), i.beginPath(), i.rect(a, o, s, r), i.clip(), i.translate(u, p), i.rotate(c * Math.PI / 180), i.scale(l, l), i.font = `${t.size}px ${t.font}, sans-serif`, i.fillStyle = t.color, i.textBaseline = "middle";
+    let g;
     switch (t.align) {
       case "left":
-        i.textAlign = "left", m = -a / 2 + 10;
+        i.textAlign = "left", g = -s / 2 + 10;
         break;
       case "right":
-        i.textAlign = "right", m = a / 2 - 10;
+        i.textAlign = "right", g = s / 2 - 10;
         break;
       case "center":
       default:
-        i.textAlign = "center", m = 0;
+        i.textAlign = "center", g = 0;
         break;
     }
-    i.fillText(t.text, m, 0), i.restore();
+    i.fillText(t.text, g, 0), i.restore();
   }
   /**
    * Render image content in an area
@@ -536,13 +534,13 @@ class B {
     const i = this.loadedImages.get(e.id);
     if (!i)
       return;
-    const { ctx: n } = this, { location: r } = e, { x: s, y: a, width: o, height: d } = r, l = t.offset || { x: 0, y: 0 }, h = t.scale ?? 1, u = t.rotation ?? 0;
-    n.save(), n.beginPath(), n.rect(s, a, o, d), n.clip();
-    const g = i.naturalWidth / i.naturalHeight, m = o / d;
-    let f, y;
-    g > m ? (f = o, y = o / g) : (y = d, f = d * g);
-    const v = f * h, w = y * h, p = s + o / 2 + l.x, C = a + d / 2 + l.y;
-    n.translate(p, C), n.rotate(u * Math.PI / 180), n.drawImage(i, -v / 2, -w / 2, v, w), n.restore();
+    const { ctx: n } = this, { location: a } = e, { x: o, y: s, width: r, height: d } = a, l = t.offset || { x: 0, y: 0 }, c = t.scale ?? 1, u = t.rotation ?? 0;
+    n.save(), n.beginPath(), n.rect(o, s, r, d), n.clip();
+    const p = i.naturalWidth / i.naturalHeight, g = r / d;
+    let m, v;
+    p > g ? (m = r, v = r / p) : (v = d, m = d * p);
+    const b = m * c, y = v * c, x = o + r / 2 + l.x, w = s + d / 2 + l.y;
+    n.translate(x, w), n.rotate(u * Math.PI / 180), n.drawImage(i, -b / 2, -y / 2, b, y), n.restore();
   }
   /**
    * Draw background image on a specific context (for export)
@@ -552,48 +550,48 @@ class B {
       return;
     const { opacity: n } = this.backgroundImage;
     e.save(), e.globalAlpha = n;
-    const r = this.bgImageElement.naturalWidth / this.bgImageElement.naturalHeight, s = t / i;
-    let a, o, d, l;
-    r > s ? (o = i, a = i * r, d = (t - a) / 2, l = 0) : (a = t, o = t / r, d = 0, l = (i - o) / 2), e.drawImage(this.bgImageElement, d, l, a, o), e.restore();
+    const a = this.bgImageElement.naturalWidth / this.bgImageElement.naturalHeight, o = t / i;
+    let s, r, d, l;
+    a > o ? (r = i, s = i * a, d = (t - s) / 2, l = 0) : (s = t, r = t / a, d = 0, l = (i - r) / 2), e.drawImage(this.bgImageElement, d, l, s, r), e.restore();
   }
   /**
    * Draw area content on a specific context (for export)
    */
   drawAreaContentOnContext(e, t) {
-    const { location: i, backgroundColor: n } = t, { x: r, y: s, width: a, height: o } = i;
-    n && (e.fillStyle = n, e.fillRect(r, s, a, o));
+    const { location: i, backgroundColor: n } = t, { x: a, y: o, width: s, height: r } = i;
+    n && (e.fillStyle = n, e.fillRect(a, o, s, r));
     const d = this.contents.get(t.id);
     if (d) {
       if (d.type === "text") {
         if (!d.text.trim())
           return;
-        const l = d.offset || { x: 0, y: 0 }, h = d.scale ?? 1, u = d.rotation ?? 0, g = r + a / 2 + l.x, m = s + o / 2 + l.y;
-        e.save(), e.beginPath(), e.rect(r, s, a, o), e.clip(), e.translate(g, m), e.rotate(u * Math.PI / 180), e.scale(h, h), e.font = `${d.size}px ${d.font}, sans-serif`, e.fillStyle = d.color, e.textBaseline = "middle";
-        let f;
+        const l = d.offset || { x: 0, y: 0 }, c = d.scale ?? 1, u = d.rotation ?? 0, p = a + s / 2 + l.x, g = o + r / 2 + l.y;
+        e.save(), e.beginPath(), e.rect(a, o, s, r), e.clip(), e.translate(p, g), e.rotate(u * Math.PI / 180), e.scale(c, c), e.font = `${d.size}px ${d.font}, sans-serif`, e.fillStyle = d.color, e.textBaseline = "middle";
+        let m;
         switch (d.align) {
           case "left":
-            e.textAlign = "left", f = -a / 2 + 10;
+            e.textAlign = "left", m = -s / 2 + 10;
             break;
           case "right":
-            e.textAlign = "right", f = a / 2 - 10;
+            e.textAlign = "right", m = s / 2 - 10;
             break;
           case "center":
           default:
-            e.textAlign = "center", f = 0;
+            e.textAlign = "center", m = 0;
             break;
         }
-        e.fillText(d.text, f, 0), e.restore();
+        e.fillText(d.text, m, 0), e.restore();
       } else if (d.type === "image") {
         const l = this.loadedImages.get(t.id);
         if (!l)
           return;
-        const h = d.offset || { x: 0, y: 0 }, u = d.scale ?? 1, g = d.rotation ?? 0;
-        e.save(), e.beginPath(), e.rect(r, s, a, o), e.clip();
-        const m = l.naturalWidth / l.naturalHeight, f = a / o;
-        let y, v;
-        m > f ? (y = a, v = a / m) : (v = o, y = o * m);
-        const w = y * u, p = v * u, C = r + a / 2 + h.x, I = s + o / 2 + h.y;
-        e.translate(C, I), e.rotate(g * Math.PI / 180), e.drawImage(l, -w / 2, -p / 2, w, p), e.restore();
+        const c = d.offset || { x: 0, y: 0 }, u = d.scale ?? 1, p = d.rotation ?? 0;
+        e.save(), e.beginPath(), e.rect(a, o, s, r), e.clip();
+        const g = l.naturalWidth / l.naturalHeight, m = s / r;
+        let v, b;
+        g > m ? (v = s, b = s / g) : (b = r, v = r * g);
+        const y = v * u, x = b * u, w = a + s / 2 + c.x, C = o + r / 2 + c.y;
+        e.translate(w, C), e.rotate(p * Math.PI / 180), e.drawImage(l, -y / 2, -x / 2, y, x), e.restore();
       }
     }
   }
@@ -604,8 +602,8 @@ class B {
     this.stop(), this.bgImageElement = null, this.loadedImages.clear(), this.loadingImages.clear(), this.eventListeners.clear();
   }
 }
-function P(b) {
-  const e = b.textOptions;
+function E(f) {
+  const e = f.textOptions;
   return {
     type: "text",
     text: e?.defaultText || "",
@@ -615,14 +613,14 @@ function P(b) {
     align: e?.defaultAlign || "center"
   };
 }
-function A(b) {
-  return b.contentType === "text" || b.contentType === "both";
+function S(f) {
+  return f.contentType === "text" || f.contentType === "both";
 }
-function O(b) {
-  return b.contentType === "image" || b.contentType === "both";
+function k(f) {
+  return f.contentType === "image" || f.contentType === "both";
 }
-const Y = 50;
-class j {
+const U = 50;
+class O {
   constructor(e) {
     this.history = [], this.historyIndex = -1, this.listeners = /* @__PURE__ */ new Set(), this.isRestoring = !1, this.state = this.cloneState(e), this.history.push({
       state: this.cloneState(e),
@@ -673,7 +671,7 @@ class j {
       state: this.cloneState(e),
       timestamp: Date.now(),
       description: t
-    }), this.history.length > Y && this.history.shift(), this.historyIndex = this.history.length - 1;
+    }), this.history.length > U && this.history.shift(), this.historyIndex = this.history.length - 1;
   }
   restoreFromHistory() {
     const e = this.history[this.historyIndex];
@@ -696,14 +694,14 @@ class j {
     return JSON.parse(JSON.stringify(e));
   }
 }
-class X {
+class T {
   constructor(e) {
     this.listeners = /* @__PURE__ */ new Set(), this.areas = e, this.contents = this.buildInitialContents();
   }
   buildInitialContents() {
     const e = /* @__PURE__ */ new Map();
     for (const t of this.areas)
-      A(t) && e.set(t.id, P(t));
+      S(t) && e.set(t.id, E(t));
     return e;
   }
   getContents() {
@@ -713,7 +711,7 @@ class X {
     return this.contents.get(e);
   }
   setTextContent(e, t) {
-    const i = this.contents.get(e), n = this.areas.find((s) => s.id === e), r = n ? P(n) : {
+    const i = this.contents.get(e), n = this.areas.find((o) => o.id === e), a = n ? E(n) : {
       type: "text",
       text: "",
       font: "Inter",
@@ -721,7 +719,7 @@ class X {
       color: "#000000",
       align: "center"
     };
-    i?.type === "text" ? this.contents.set(e, { ...i, ...t }) : this.contents.set(e, { ...r, ...t }), this.notify();
+    i?.type === "text" ? this.contents.set(e, { ...i, ...t }) : this.contents.set(e, { ...a, ...t }), this.notify();
   }
   setImageContent(e, t, i) {
     const n = {
@@ -733,7 +731,7 @@ class X {
   }
   clearContent(e) {
     const t = this.areas.find((i) => i.id === e);
-    t && A(t) ? this.contents.set(e, P(t)) : this.contents.delete(e), this.notify();
+    t && S(t) ? this.contents.set(e, E(t)) : this.contents.delete(e), this.notify();
   }
   setContentOffset(e, t) {
     const i = this.contents.get(e);
@@ -778,7 +776,7 @@ class X {
       }
   }
 }
-class T {
+class I {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -825,11 +823,11 @@ class T {
     const i = this.listeners.get(e);
     if (i) {
       const n = Array.from(i);
-      for (const r of n)
+      for (const a of n)
         try {
-          r(t);
-        } catch (s) {
-          console.error(`Error in event handler for "${String(e)}":`, s);
+          a(t);
+        } catch (o) {
+          console.error(`Error in event handler for "${String(e)}":`, o);
         }
     }
   }
@@ -851,7 +849,7 @@ class T {
     return this.listeners.get(e)?.size ?? 0;
   }
 }
-class W extends T {
+class V extends I {
   constructor() {
     super(...arguments), this.activeTouches = /* @__PURE__ */ new Map(), this.initialPinchDistance = null, this.lastPinchCenter = null, this.isTwoFingerGesture = !1;
   }
@@ -883,14 +881,14 @@ class W extends T {
     }
     if (this.activeTouches.size === 2 && this.initialPinchDistance !== null && this.lastPinchCenter) {
       e.preventDefault();
-      const [t, i] = Array.from(this.activeTouches.values()), n = this.getDistance(t, i), r = this.getCenter(t, i), s = n / this.initialPinchDistance;
+      const [t, i] = Array.from(this.activeTouches.values()), n = this.getDistance(t, i), a = this.getCenter(t, i), o = n / this.initialPinchDistance;
       this.emit("pinch", {
-        scale: s,
-        centerX: r.x,
-        centerY: r.y
+        scale: o,
+        centerX: a.x,
+        centerY: a.y
       });
-      const a = r.x - this.lastPinchCenter.x, o = r.y - this.lastPinchCenter.y;
-      (Math.abs(a) > 0.5 || Math.abs(o) > 0.5) && this.emit("pan", { deltaX: a, deltaY: o }), this.initialPinchDistance = n, this.lastPinchCenter = r;
+      const s = a.x - this.lastPinchCenter.x, r = a.y - this.lastPinchCenter.y;
+      (Math.abs(s) > 0.5 || Math.abs(r) > 0.5) && this.emit("pan", { deltaX: s, deltaY: r }), this.initialPinchDistance = n, this.lastPinchCenter = a;
     }
   }
   handleTouchEnd(e) {
@@ -914,24 +912,24 @@ class W extends T {
     };
   }
 }
-class G extends T {
+class F extends I {
   constructor(e, t, i, n) {
-    super(), this.interactionState = { mode: "idle" }, this.initialPinchZoom = 1, this.canvas = e, this.engine = t, this.getContents = i, this.getSelectedAreaId = n, this.gestureHandler = new W(), this.boundMouseDown = this.handleMouseDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundMouseUp = this.handleMouseUp.bind(this), this.boundMouseLeave = this.handleMouseLeave.bind(this), this.boundContextMenu = this.handleContextMenu.bind(this), this.boundDoubleClick = this.handleDoubleClick.bind(this), this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), e.addEventListener("mousedown", this.boundMouseDown), e.addEventListener("mousemove", this.boundMouseMove), e.addEventListener("mouseup", this.boundMouseUp), e.addEventListener("mouseleave", this.boundMouseLeave), e.addEventListener("contextmenu", this.boundContextMenu), e.addEventListener("dblclick", this.boundDoubleClick), e.addEventListener("touchstart", this.boundTouchStart, { passive: !1 }), e.addEventListener("touchmove", this.boundTouchMove, { passive: !1 }), e.addEventListener("touchend", this.boundTouchEnd), this.gestureHandler.on("pinch", ({ scale: r }) => {
-      const s = Math.max(0.1, Math.min(5, this.initialPinchZoom * r));
-      this.emit("zoom", { zoom: s });
-    }), this.gestureHandler.on("pan", ({ deltaX: r, deltaY: s }) => {
-      const a = this.engine.getPan(), o = this.engine.getZoom();
+    super(), this.interactionState = { mode: "idle" }, this.initialPinchZoom = 1, this.canvas = e, this.engine = t, this.getContents = i, this.getSelectedAreaId = n, this.gestureHandler = new V(), this.boundMouseDown = this.handleMouseDown.bind(this), this.boundMouseMove = this.handleMouseMove.bind(this), this.boundMouseUp = this.handleMouseUp.bind(this), this.boundMouseLeave = this.handleMouseLeave.bind(this), this.boundContextMenu = this.handleContextMenu.bind(this), this.boundDoubleClick = this.handleDoubleClick.bind(this), this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), e.addEventListener("mousedown", this.boundMouseDown), e.addEventListener("mousemove", this.boundMouseMove), e.addEventListener("mouseup", this.boundMouseUp), e.addEventListener("mouseleave", this.boundMouseLeave), e.addEventListener("contextmenu", this.boundContextMenu), e.addEventListener("dblclick", this.boundDoubleClick), e.addEventListener("touchstart", this.boundTouchStart, { passive: !1 }), e.addEventListener("touchmove", this.boundTouchMove, { passive: !1 }), e.addEventListener("touchend", this.boundTouchEnd), this.gestureHandler.on("pinch", ({ scale: a }) => {
+      const o = Math.max(0.1, Math.min(5, this.initialPinchZoom * a));
+      this.emit("zoom", { zoom: o });
+    }), this.gestureHandler.on("pan", ({ deltaX: a, deltaY: o }) => {
+      const s = this.engine.getPan(), r = this.engine.getZoom();
       this.emit("pan", {
         pan: {
-          x: a.x + r / o,
-          y: a.y + s / o
+          x: s.x + a / r,
+          y: s.y + o / r
         }
       });
     });
   }
   getCanvasPosition(e, t) {
-    const i = this.canvas.getBoundingClientRect(), n = window.devicePixelRatio || 1, r = (e - i.left) * n, s = (t - i.top) * n;
-    return this.engine.screenToCanvas(r, s);
+    const i = this.canvas.getBoundingClientRect(), n = window.devicePixelRatio || 1, a = (e - i.left) * n, o = (t - i.top) * n;
+    return this.engine.screenToCanvas(a, o);
   }
   handleMouseDown(e) {
     const t = this.getCanvasPosition(e.clientX, e.clientY);
@@ -978,83 +976,83 @@ class G extends T {
   processPointerDown(e) {
     const t = this.getSelectedAreaId(), i = this.getContents();
     if (t) {
-      const s = this.engine.hitTestHandle(e.x, e.y, t);
-      if (s) {
-        const a = i.get(t), o = this.engine.getContentBounds(t);
-        if (s === "rotate" && a?.type === "image" && o) {
-          const d = Math.atan2(e.y - o.centerY, e.x - o.centerX) * (180 / Math.PI);
+      const o = this.engine.hitTestHandle(e.x, e.y, t);
+      if (o) {
+        const s = i.get(t), r = this.engine.getContentBounds(t);
+        if (o === "rotate" && s?.type === "image" && r) {
+          const d = Math.atan2(e.y - r.centerY, e.x - r.centerX) * (180 / Math.PI);
           return this.interactionState = {
             mode: "rotating",
             areaId: t,
-            startRotation: a.rotation ?? 0,
-            centerPoint: { x: o.centerX, y: o.centerY },
+            startRotation: s.rotation ?? 0,
+            centerPoint: { x: r.centerX, y: r.centerY },
             startAngle: d
           }, !0;
-        } else if (s !== "rotate" && a?.type === "image" && o)
+        } else if (o !== "rotate" && s?.type === "image" && r)
           return this.interactionState = {
             mode: "scaling",
             areaId: t,
-            handle: s,
-            startScale: a.scale ?? 1,
+            handle: o,
+            startScale: s.scale ?? 1,
             startMousePos: e,
-            pivotPoint: { x: o.centerX, y: o.centerY }
+            pivotPoint: { x: r.centerX, y: r.centerY }
           }, !0;
       }
     }
     const n = this.engine.hitTestContent(e.x, e.y);
     if (n) {
       if (this.emit("area:select", { areaId: n }), this.engine.isPositioningAllowed(n)) {
-        const s = i.get(n)?.offset ?? { x: 0, y: 0 };
+        const o = i.get(n)?.offset ?? { x: 0, y: 0 };
         return this.interactionState = {
           mode: "dragging",
           areaId: n,
-          startOffset: s,
+          startOffset: o,
           startMousePos: e
         }, !0;
       }
       return !0;
     }
-    const r = this.engine.hitTestArea(e.x, e.y);
-    return r ? (this.emit("area:select", { areaId: r }), !1) : (this.emit("area:select", { areaId: null }), !1);
+    const a = this.engine.hitTestArea(e.x, e.y);
+    return a ? (this.emit("area:select", { areaId: a }), !1) : (this.emit("area:select", { areaId: null }), !1);
   }
   processPointerMove(e) {
     if (this.interactionState.mode === "dragging") {
-      const { areaId: t, startOffset: i, startMousePos: n } = this.interactionState, r = e.x - n.x, s = e.y - n.y;
-      let a = {
-        x: i.x + r,
-        y: i.y + s
+      const { areaId: t, startOffset: i, startMousePos: n } = this.interactionState, a = e.x - n.x, o = e.y - n.y;
+      let s = {
+        x: i.x + a,
+        y: i.y + o
       };
-      const o = this.engine.getAreaLocation(t);
-      if (o) {
-        const d = o.width / 2 - 10, l = o.height / 2 - 10;
-        a.x = Math.max(-d, Math.min(d, a.x)), a.y = Math.max(-l, Math.min(l, a.y));
+      const r = this.engine.getAreaLocation(t);
+      if (r) {
+        const d = r.width / 2 - 10, l = r.height / 2 - 10;
+        s.x = Math.max(-d, Math.min(d, s.x)), s.y = Math.max(-l, Math.min(l, s.y));
       }
-      this.emit("content:drag", { areaId: t, offset: a });
+      this.emit("content:drag", { areaId: t, offset: s });
       return;
     }
     if (this.interactionState.mode === "scaling") {
-      const { areaId: t, startScale: i, startMousePos: n, pivotPoint: r } = this.interactionState, s = Math.sqrt(
-        Math.pow(n.x - r.x, 2) + Math.pow(n.y - r.y, 2)
-      ), a = Math.sqrt(
-        Math.pow(e.x - r.x, 2) + Math.pow(e.y - r.y, 2)
+      const { areaId: t, startScale: i, startMousePos: n, pivotPoint: a } = this.interactionState, o = Math.sqrt(
+        Math.pow(n.x - a.x, 2) + Math.pow(n.y - a.y, 2)
+      ), s = Math.sqrt(
+        Math.pow(e.x - a.x, 2) + Math.pow(e.y - a.y, 2)
       );
-      if (s > 0) {
-        const o = a / s, d = Math.max(0.1, Math.min(5, i * o));
+      if (o > 0) {
+        const r = s / o, d = Math.max(0.1, Math.min(5, i * r));
         this.emit("content:scale", { areaId: t, scale: d });
       }
       return;
     }
     if (this.interactionState.mode === "rotating") {
-      const { areaId: t, startRotation: i, centerPoint: n, startAngle: r } = this.interactionState, s = Math.atan2(e.y - n.y, e.x - n.x) * (180 / Math.PI);
-      let a = i + (s - r);
-      a = a % 360, a < 0 && (a += 360);
-      const o = [0, 90, 180, 270, 360];
-      for (const d of o)
-        if (Math.abs(a - d) < 5) {
-          a = d === 360 ? 0 : d;
+      const { areaId: t, startRotation: i, centerPoint: n, startAngle: a } = this.interactionState, o = Math.atan2(e.y - n.y, e.x - n.x) * (180 / Math.PI);
+      let s = i + (o - a);
+      s = s % 360, s < 0 && (s += 360);
+      const r = [0, 90, 180, 270, 360];
+      for (const d of r)
+        if (Math.abs(s - d) < 5) {
+          s = d === 360 ? 0 : d;
           break;
         }
-      this.emit("content:rotate", { areaId: t, rotation: a });
+      this.emit("content:rotate", { areaId: t, rotation: s });
       return;
     }
     this.updateCursor(e);
@@ -1079,7 +1077,7 @@ class G extends T {
     this.canvas.removeEventListener("mousedown", this.boundMouseDown), this.canvas.removeEventListener("mousemove", this.boundMouseMove), this.canvas.removeEventListener("mouseup", this.boundMouseUp), this.canvas.removeEventListener("mouseleave", this.boundMouseLeave), this.canvas.removeEventListener("contextmenu", this.boundContextMenu), this.canvas.removeEventListener("dblclick", this.boundDoubleClick), this.canvas.removeEventListener("touchstart", this.boundTouchStart), this.canvas.removeEventListener("touchmove", this.boundTouchMove), this.canvas.removeEventListener("touchend", this.boundTouchEnd), this.gestureHandler.reset(), this.clear();
   }
 }
-class J {
+class $ {
   constructor(e = "/api") {
     this.baseUrl = e;
   }
@@ -1097,6 +1095,20 @@ class J {
       throw t instanceof Error && t.message.includes("Failed to fetch") ? new Error(`Network error loading template: ${e}`) : t;
     }
   }
+  async getProduct(e) {
+    try {
+      const t = await fetch(`${this.baseUrl}/products/${e}`);
+      if (!t.ok) {
+        let i = `Failed to load product (${t.status} ${t.statusText}): ${e}
+
+`;
+        throw t.status === 404 ? i += "Product not found." : t.status === 403 ? i += "Access forbidden." : t.status >= 500 && (i += "Server error."), new Error(i);
+      }
+      return t.json();
+    } catch (t) {
+      throw t instanceof Error && t.message.includes("Failed to fetch") ? new Error(`Network error loading product: ${e}`) : t;
+    }
+  }
   async finalizeDesign(e, t) {
     try {
       const i = await fetch(`${this.baseUrl}/finalize`, {
@@ -1113,8 +1125,8 @@ class J {
 
 `;
         if (i.status === 400) {
-          const r = await i.json().catch(() => ({}));
-          n += r.error || "Invalid design data.";
+          const a = await i.json().catch(() => ({}));
+          n += a.error || "Invalid design data.";
         } else i.status === 429 ? n += "Rate limit exceeded." : i.status >= 500 && (n += "Server error.");
         throw new Error(n);
       }
@@ -1132,14 +1144,14 @@ class J {
         body: i
       });
       if (!n.ok) {
-        let r = `Failed to upload asset (${n.status} ${n.statusText})
+        let a = `Failed to upload asset (${n.status} ${n.statusText})
 
 `;
         if (n.status === 400) {
-          const s = await n.json().catch(() => ({}));
-          r += s.error || "Invalid file.";
-        } else n.status === 413 ? r += "File too large (max 15MB)." : n.status >= 500 && (r += "Server error.");
-        throw new Error(r);
+          const o = await n.json().catch(() => ({}));
+          a += o.error || "Invalid file.";
+        } else n.status === 413 ? a += "File too large (max 15MB)." : n.status >= 500 && (a += "Server error.");
+        throw new Error(a);
       }
       return n.json();
     } catch (i) {
@@ -1157,96 +1169,125 @@ class J {
     }
   }
 }
-function c(b, e, ...t) {
-  const i = document.createElement(b);
-  return e && Object.entries(e).forEach(([n, r]) => {
-    n === "class" ? i.className = r : n in i ? i[n] = r : i.setAttribute(n, String(r));
+function h(f, e, ...t) {
+  const i = document.createElement(f);
+  return e && Object.entries(e).forEach(([n, a]) => {
+    n === "class" ? i.className = a : n in i ? i[n] = a : i.setAttribute(n, String(a));
   }), t.forEach((n) => {
     typeof n == "string" ? i.appendChild(document.createTextNode(n)) : i.appendChild(n);
   }), i;
 }
-function V(b, e) {
+function H(f, e) {
   let t = null, i = null;
-  const n = (...r) => {
-    i = r, t && clearTimeout(t), t = setTimeout(() => {
-      i && b(...i), t = null, i = null;
+  const n = (...a) => {
+    i = a, t && clearTimeout(t), t = setTimeout(() => {
+      i && f(...i), t = null, i = null;
     }, e);
   };
   return n.flush = () => {
-    t && (clearTimeout(t), t = null), i && (b(...i), i = null);
+    t && (clearTimeout(t), t = null), i && (f(...i), i = null);
   }, n.cancel = () => {
     t && (clearTimeout(t), t = null), i = null;
   }, n;
 }
-class K extends T {
+class B extends I {
   constructor() {
-    super(), this.percentLabel = c("span", { class: "zoom-percent" }, "100%");
-    const e = c("button", {
+    super(), this.percentLabel = h("span", { class: "zoom-percent" }, "100%");
+    const e = h("button", {
       class: "zoom-btn",
       title: "Zoom out"
     }, "−");
     e.addEventListener("click", () => this.emit("zoom-out", void 0));
-    const t = c("button", {
+    const t = h("button", {
       class: "zoom-btn",
       title: "Fit to view"
     }, "Fit");
     t.addEventListener("click", () => this.emit("zoom-fit", void 0));
-    const i = c("button", {
+    const i = h("button", {
       class: "zoom-btn",
       title: "Zoom in"
     }, "+");
-    i.addEventListener("click", () => this.emit("zoom-in", void 0)), this.element = c("div", { class: "zoom-toolbar" }), this.element.appendChild(e), this.element.appendChild(t), this.element.appendChild(i), this.element.appendChild(this.percentLabel);
+    i.addEventListener("click", () => this.emit("zoom-in", void 0)), this.viewSelect = document.createElement("select"), this.viewSelect.className = "view-select", this.viewSelect.title = "Switch view", this.viewSelect.style.display = "none", this.viewSelect.addEventListener("change", () => {
+      this.emit("view-change", { viewName: this.viewSelect.value });
+    }), this.element = h("div", { class: "zoom-toolbar" }), this.element.appendChild(e), this.element.appendChild(t), this.element.appendChild(i), this.element.appendChild(this.percentLabel), this.element.appendChild(this.viewSelect);
+    const n = h("div", { class: "zoom-toolbar-spacer" });
+    this.element.appendChild(n);
+    const a = h("button", {
+      class: "zoom-btn zoom-close-btn",
+      title: "Close editor"
+    }, "✕ Close");
+    a.addEventListener("click", () => this.emit("close", void 0)), this.element.appendChild(a), this.saveBtn = h("button", {
+      class: "zoom-btn zoom-save-btn",
+      title: "Save customization"
+    }, "Save Customization"), this.saveBtn.style.display = "none", this.saveBtn.addEventListener("click", () => this.emit("save", void 0)), this.element.appendChild(this.saveBtn);
   }
   setZoom(e) {
     this.percentLabel.textContent = `${Math.round(e * 100)}%`;
   }
+  showSaveButton(e) {
+    this.saveBtn.style.display = e ? "" : "none";
+  }
+  setSaveDisabled(e, t) {
+    this.saveBtn.disabled = e, t && (this.saveBtn.textContent = t);
+  }
+  setViews(e) {
+    this.viewSelect.innerHTML = "";
+    for (const t of e) {
+      const i = document.createElement("option");
+      i.value = t.viewName, i.textContent = t.viewName, this.viewSelect.appendChild(i);
+    }
+    this.viewSelect.style.display = e.length > 1 ? "" : "none";
+  }
+  setActiveView(e) {
+    this.viewSelect.value = e;
+  }
   getElement() {
     return this.element;
   }
 }
-const Q = [
+const Z = [
   { label: "Inter", value: "Inter" },
   { label: "Arial", value: "Arial" },
   { label: "Georgia", value: "Georgia" },
   { label: "Times New Roman", value: "Times New Roman" },
   { label: "Courier New", value: "Courier New" }
-], _ = [
+], q = [
   { label: "L", value: "left" },
   { label: "C", value: "center" },
   { label: "R", value: "right" }
-], H = ["image/png", "image/jpeg", "image/webp", "image/svg+xml"], ee = 15 * 1024 * 1024;
-class te extends T {
+], P = ["image/png", "image/jpeg", "image/webp", "image/svg+xml"], Y = 15 * 1024 * 1024;
+class L extends I {
   constructor(e) {
     super(), this.mode = "text", this.isSelected = !1, this.textInputEl = null, this.fontSelectEl = null, this.sizeInputEl = null, this.colorInputEl = null, this.alignGroupEl = null, this.area = e;
-    const t = A(e), i = O(e);
-    this.mode = i && !t ? "image" : "text", this.element = c("div", { class: "area-card" }), this.element.addEventListener("click", (o) => {
-      o.target.tagName === "INPUT" || o.target.tagName === "SELECT" || o.target.tagName === "BUTTON" || this.emit("select", { areaId: e.id });
+    const t = S(e), i = k(e);
+    this.mode = i && !t ? "image" : "text", this.element = h("div", { class: "area-card" }), this.element.addEventListener("click", (r) => {
+      r.target.tagName === "INPUT" || r.target.tagName === "SELECT" || r.target.tagName === "BUTTON" || this.emit("select", { areaId: e.id });
     });
-    const n = c("div", { class: "area-card-header" }), r = c("div", { class: "area-card-name-row" }), s = c("span", { class: "area-card-name" }, e.name);
-    if (r.appendChild(s), e.required) {
-      const o = c("span", { class: "area-card-badge" }, "Required");
-      r.appendChild(o);
+    const n = h("div", { class: "area-card-header" }), a = h("div", { class: "area-card-name-row" }), o = h("span", { class: "area-card-name" }, e.name);
+    if (a.appendChild(o), e.required) {
+      const r = h("span", { class: "area-card-badge" }, "Required");
+      a.appendChild(r);
     }
-    n.appendChild(r);
-    const a = c("button", {
+    n.appendChild(a);
+    const s = h("button", {
       class: "area-card-reset-btn",
       title: "Reset content"
     }, "Reset");
-    if (a.addEventListener("click", (o) => {
-      o.stopPropagation(), this.emit("clear", { areaId: e.id });
-    }), n.appendChild(a), this.element.appendChild(n), t && i) {
-      const o = c("div", { class: "area-card-mode-switcher" }), d = c("button", {
+    if (s.addEventListener("click", (r) => {
+      r.stopPropagation(), this.emit("clear", { areaId: e.id });
+    }), n.appendChild(s), this.element.appendChild(n), t && i) {
+      const r = h("div", { class: "area-card-mode-switcher" }), d = h("button", {
         class: "mode-btn mode-btn-active"
       }, "Text");
       d.dataset.mode = "text";
-      const l = c("button", { class: "mode-btn" }, "Image");
-      l.dataset.mode = "image", d.addEventListener("click", (h) => {
-        h.stopPropagation(), this.setMode("text"), d.classList.add("mode-btn-active"), l.classList.remove("mode-btn-active"), this.currentContent?.type === "image" && this.emit("clear", { areaId: e.id });
-      }), l.addEventListener("click", (h) => {
-        h.stopPropagation(), this.setMode("image"), l.classList.add("mode-btn-active"), d.classList.remove("mode-btn-active"), this.currentContent?.type === "text" && this.emit("clear", { areaId: e.id });
-      }), o.appendChild(d), o.appendChild(l), this.element.appendChild(o);
+      const l = h("button", { class: "mode-btn" }, "Image");
+      l.dataset.mode = "image", d.addEventListener("click", (c) => {
+        c.stopPropagation(), this.setMode("text"), d.classList.add("mode-btn-active"), l.classList.remove("mode-btn-active"), this.currentContent?.type === "image" && this.emit("clear", { areaId: e.id });
+      }), l.addEventListener("click", (c) => {
+        c.stopPropagation(), this.setMode("image"), l.classList.add("mode-btn-active"), d.classList.remove("mode-btn-active"), this.currentContent?.type === "text" && this.emit("clear", { areaId: e.id });
+      }), r.appendChild(d), r.appendChild(l), this.element.appendChild(r);
     }
-    this.contentContainer = c("div", { class: "area-card-content" }), this.element.appendChild(this.contentContainer), this.transformContainer = c("div", { class: "area-card-transforms" }), this.element.appendChild(this.transformContainer), this.renderContent();
+    this.contentContainer = h("div", { class: "area-card-content" }), this.element.appendChild(this.contentContainer), this.transformContainer = h("div", { class: "area-card-transforms" }), this.element.appendChild(this.transformContainer), this.renderContent();
   }
   setMode(e) {
     this.mode = e, this.renderContent();
@@ -1269,11 +1310,11 @@ class te extends T {
   }
   renderContent() {
     this.contentContainer.innerHTML = "", this.textInputEl = null, this.fontSelectEl = null, this.sizeInputEl = null, this.colorInputEl = null, this.alignGroupEl = null;
-    const e = A(this.area), t = O(this.area), i = !t || e && t && this.mode === "text", n = !e || e && t && this.mode === "image";
+    const e = S(this.area), t = k(this.area), i = !t || e && t && this.mode === "text", n = !e || e && t && this.mode === "image";
     e && i && this.renderTextControls(), t && n && this.renderImageControls();
   }
   renderTextControls() {
-    const e = this.currentContent, t = e?.type === "text" ? e : P(this.area), i = c("input", {
+    const e = this.currentContent, t = e?.type === "text" ? e : E(this.area), i = h("input", {
       class: "area-input-text",
       type: "text",
       placeholder: this.area.placeholder || "Enter text..."
@@ -1281,79 +1322,79 @@ class te extends T {
     i.value = t.text, this.area.textOptions?.maxLength && (i.maxLength = this.area.textOptions.maxLength), i.addEventListener("input", () => {
       this.emit("text:change", { areaId: this.area.id, updates: { text: i.value } });
     }), this.contentContainer.appendChild(i), this.textInputEl = i;
-    const n = c("div", { class: "area-input-row" }), r = c("select", { class: "area-input-font" });
-    for (const l of Q) {
-      const h = c("option");
-      h.value = l.value, h.textContent = l.label, l.value === t.font && (h.selected = !0), r.appendChild(h);
+    const n = h("div", { class: "area-input-row" }), a = h("select", { class: "area-input-font" });
+    for (const l of Z) {
+      const c = h("option");
+      c.value = l.value, c.textContent = l.label, l.value === t.font && (c.selected = !0), a.appendChild(c);
     }
-    r.addEventListener("change", () => {
-      this.emit("text:change", { areaId: this.area.id, updates: { font: r.value } });
-    }), n.appendChild(r), this.fontSelectEl = r;
-    const s = c("input", {
+    a.addEventListener("change", () => {
+      this.emit("text:change", { areaId: this.area.id, updates: { font: a.value } });
+    }), n.appendChild(a), this.fontSelectEl = a;
+    const o = h("input", {
       class: "area-input-size",
       type: "number"
     });
-    s.value = String(t.size), s.min = String(this.area.textOptions?.minSize || 8), s.max = String(this.area.textOptions?.maxSize || 200), s.addEventListener("change", () => {
+    o.value = String(t.size), o.min = String(this.area.textOptions?.minSize || 8), o.max = String(this.area.textOptions?.maxSize || 200), o.addEventListener("change", () => {
       this.emit("text:change", {
         areaId: this.area.id,
-        updates: { size: parseInt(s.value, 10) || 24 }
+        updates: { size: parseInt(o.value, 10) || 24 }
       });
-    }), n.appendChild(s), this.sizeInputEl = s, this.contentContainer.appendChild(n);
-    const a = c("div", { class: "area-input-row" }), o = c("div", { class: "area-input-align" });
-    for (const l of _) {
-      const h = c("button", {
+    }), n.appendChild(o), this.sizeInputEl = o, this.contentContainer.appendChild(n);
+    const s = h("div", { class: "area-input-row" }), r = h("div", { class: "area-input-align" });
+    for (const l of q) {
+      const c = h("button", {
         class: `align-btn${t.align === l.value ? " align-btn-active" : ""}`,
         title: l.label === "L" ? "Left" : l.label === "C" ? "Center" : "Right"
       }, l.label);
-      h.addEventListener("click", (u) => {
-        u.stopPropagation(), this.emit("text:change", { areaId: this.area.id, updates: { align: l.value } }), o.querySelectorAll(".align-btn").forEach((g) => g.classList.remove("align-btn-active")), h.classList.add("align-btn-active");
-      }), o.appendChild(h);
+      c.addEventListener("click", (u) => {
+        u.stopPropagation(), this.emit("text:change", { areaId: this.area.id, updates: { align: l.value } }), r.querySelectorAll(".align-btn").forEach((p) => p.classList.remove("align-btn-active")), c.classList.add("align-btn-active");
+      }), r.appendChild(c);
     }
-    a.appendChild(o), this.alignGroupEl = o;
-    const d = c("input", {
+    s.appendChild(r), this.alignGroupEl = r;
+    const d = h("input", {
       class: "area-input-color",
       type: "color"
     });
     d.value = t.color, d.addEventListener("input", () => {
       this.emit("text:change", { areaId: this.area.id, updates: { color: d.value } });
-    }), a.appendChild(d), this.colorInputEl = d, this.contentContainer.appendChild(a);
+    }), s.appendChild(d), this.colorInputEl = d, this.contentContainer.appendChild(s);
   }
   renderImageControls() {
     const e = this.currentContent;
     if (e?.type === "image") {
-      const t = c("div", { class: "area-image-preview" }), i = c("img", { class: "area-image-thumb" });
+      const t = h("div", { class: "area-image-preview" }), i = h("img", { class: "area-image-thumb" });
       i.src = e.dataUrl, i.alt = e.filename || "Uploaded image", t.appendChild(i);
-      const n = c("div", { class: "area-image-info" });
-      n.appendChild(c("span", { class: "area-image-name" }, e.filename || "Image"));
-      const r = c("button", { class: "area-image-remove-btn" }, "Remove");
-      r.addEventListener("click", (s) => {
-        s.stopPropagation(), this.emit("clear", { areaId: this.area.id });
-      }), n.appendChild(r), t.appendChild(n), this.contentContainer.appendChild(t);
+      const n = h("div", { class: "area-image-info" });
+      n.appendChild(h("span", { class: "area-image-name" }, e.filename || "Image"));
+      const a = h("button", { class: "area-image-remove-btn" }, "Remove");
+      a.addEventListener("click", (o) => {
+        o.stopPropagation(), this.emit("clear", { areaId: this.area.id });
+      }), n.appendChild(a), t.appendChild(n), this.contentContainer.appendChild(t);
     } else {
-      const t = c("button", { class: "area-upload-btn" }, "Upload Image"), i = c("input", { type: "file" });
-      i.accept = H.join(","), i.style.display = "none";
-      const n = c("div", { class: "area-validation-error" });
+      const t = h("button", { class: "area-upload-btn" }, "Upload Image"), i = h("input", { type: "file" });
+      i.accept = P.join(","), i.style.display = "none";
+      const n = h("div", { class: "area-validation-error" });
       n.style.display = "none", i.addEventListener("change", () => {
-        const r = i.files?.[0];
-        if (!r) return;
-        if (!H.includes(r.type)) {
-          const a = "Only PNG, JPEG, WebP, and SVG images are accepted";
-          n.textContent = a, n.style.display = "block", this.emit("validation:error", { areaId: this.area.id, message: a }), i.value = "";
+        const a = i.files?.[0];
+        if (!a) return;
+        if (!P.includes(a.type)) {
+          const s = "Only PNG, JPEG, WebP, and SVG images are accepted";
+          n.textContent = s, n.style.display = "block", this.emit("validation:error", { areaId: this.area.id, message: s }), i.value = "";
           return;
         }
-        if (r.size > ee) {
-          const a = "File must be smaller than 15MB";
-          n.textContent = a, n.style.display = "block", this.emit("validation:error", { areaId: this.area.id, message: a }), i.value = "";
+        if (a.size > Y) {
+          const s = "File must be smaller than 15MB";
+          n.textContent = s, n.style.display = "block", this.emit("validation:error", { areaId: this.area.id, message: s }), i.value = "";
           return;
         }
         n.style.display = "none";
-        const s = new FileReader();
-        s.onload = () => {
-          const a = s.result;
-          this.emit("image:change", { areaId: this.area.id, dataUrl: a, filename: r.name });
-        }, s.readAsDataURL(r), i.value = "";
-      }), t.addEventListener("click", (r) => {
-        r.stopPropagation(), i.click();
+        const o = new FileReader();
+        o.onload = () => {
+          const s = o.result;
+          this.emit("image:change", { areaId: this.area.id, dataUrl: s, filename: a.name });
+        }, o.readAsDataURL(a), i.value = "";
+      }), t.addEventListener("click", (a) => {
+        a.stopPropagation(), i.click();
       }), this.contentContainer.appendChild(t), this.contentContainer.appendChild(i), this.contentContainer.appendChild(n);
     }
   }
@@ -1363,72 +1404,82 @@ class te extends T {
     if (!this.isSelected || !e) return;
     const t = e.type === "text" ? this.area.textOptions?.allowPositioning : this.area.imageOptions?.allowPositioning, i = e.type === "image" && this.area.imageOptions?.allowScaling, n = e.type === "image" && this.area.imageOptions?.allowRotation;
     if (!t && !i && !n) return;
-    const r = c("div", { class: "area-card-divider" });
-    this.transformContainer.appendChild(r);
-    const s = c("div", { class: "transform-header" });
-    s.appendChild(c("span", { class: "transform-title" }, "Transform"));
-    const a = c("button", { class: "transform-reset-btn" }, "Reset");
-    a.addEventListener("click", (d) => {
+    const a = h("div", { class: "area-card-divider" });
+    this.transformContainer.appendChild(a);
+    const o = h("div", { class: "transform-header" });
+    o.appendChild(h("span", { class: "transform-title" }, "Transform"));
+    const s = h("button", { class: "transform-reset-btn" }, "Reset");
+    s.addEventListener("click", (d) => {
       d.stopPropagation(), t && this.emit("offset:change", { areaId: this.area.id, offset: { x: 0, y: 0 } }), i && this.emit("scale:change", { areaId: this.area.id, scale: 1 }), n && this.emit("rotation:change", { areaId: this.area.id, rotation: 0 });
-    }), s.appendChild(a), this.transformContainer.appendChild(s);
-    const o = e.offset ?? { x: 0, y: 0 };
+    }), o.appendChild(s), this.transformContainer.appendChild(o);
+    const r = e.offset ?? { x: 0, y: 0 };
     if (t) {
-      const d = c("div", { class: "area-input-row" }), l = c("label", { class: "transform-label" }, "X"), h = c("input", { class: "transform-input", type: "number" });
-      h.value = String(Math.round(o.x)), h.addEventListener("change", () => {
+      const d = h("div", { class: "area-input-row" }), l = h("label", { class: "transform-label" }, "X"), c = h("input", { class: "transform-input", type: "number" });
+      c.value = String(Math.round(r.x)), c.addEventListener("change", () => {
         this.emit("offset:change", {
           areaId: this.area.id,
-          offset: { ...o, x: parseInt(h.value, 10) || 0 }
+          offset: { ...r, x: parseInt(c.value, 10) || 0 }
         });
       });
-      const u = c("label", { class: "transform-label" }, "Y"), g = c("input", { class: "transform-input", type: "number" });
-      g.value = String(Math.round(o.y)), g.addEventListener("change", () => {
+      const u = h("label", { class: "transform-label" }, "Y"), p = h("input", { class: "transform-input", type: "number" });
+      p.value = String(Math.round(r.y)), p.addEventListener("change", () => {
         this.emit("offset:change", {
           areaId: this.area.id,
-          offset: { ...o, y: parseInt(g.value, 10) || 0 }
+          offset: { ...r, y: parseInt(p.value, 10) || 0 }
         });
-      }), d.appendChild(l), d.appendChild(h), d.appendChild(u), d.appendChild(g), this.transformContainer.appendChild(d);
+      }), d.appendChild(l), d.appendChild(c), d.appendChild(u), d.appendChild(p), this.transformContainer.appendChild(d);
     }
     if (i && e.type === "image") {
-      const d = e.scale ?? 1, l = c("div", { class: "area-input-row transform-slider-row" }), h = c("label", { class: "transform-label" }, `Scale: ${Math.round(d * 100)}%`), u = c("input", { class: "transform-slider", type: "range" });
+      const d = e.scale ?? 1, l = h("div", { class: "area-input-row transform-slider-row" }), c = h("label", { class: "transform-label" }, `Scale: ${Math.round(d * 100)}%`), u = h("input", { class: "transform-slider", type: "range" });
       u.min = "10", u.max = "500", u.step = "5", u.value = String(Math.round(d * 100)), u.addEventListener("input", () => {
-        const g = parseInt(u.value, 10) / 100;
-        h.textContent = `Scale: ${Math.round(g * 100)}%`, this.emit("scale:change", { areaId: this.area.id, scale: g });
-      }), l.appendChild(h), l.appendChild(u), this.transformContainer.appendChild(l);
+        const p = parseInt(u.value, 10) / 100;
+        c.textContent = `Scale: ${Math.round(p * 100)}%`, this.emit("scale:change", { areaId: this.area.id, scale: p });
+      }), l.appendChild(c), l.appendChild(u), this.transformContainer.appendChild(l);
     }
     if (n && e.type === "image") {
-      const d = e.rotation ?? 0, l = c("div", { class: "area-input-row transform-slider-row" }), h = c("label", { class: "transform-label" }, `Rotation: ${Math.round(d)}°`), u = c("input", { class: "transform-slider", type: "range" });
+      const d = e.rotation ?? 0, l = h("div", { class: "area-input-row transform-slider-row" }), c = h("label", { class: "transform-label" }, `Rotation: ${Math.round(d)}°`), u = h("input", { class: "transform-slider", type: "range" });
       u.min = "0", u.max = "360", u.step = "1", u.value = String(Math.round(d)), u.addEventListener("input", () => {
-        const g = parseInt(u.value, 10);
-        h.textContent = `Rotation: ${g}°`, this.emit("rotation:change", { areaId: this.area.id, rotation: g });
-      }), l.appendChild(h), l.appendChild(u), this.transformContainer.appendChild(l);
+        const p = parseInt(u.value, 10);
+        c.textContent = `Rotation: ${p}°`, this.emit("rotation:change", { areaId: this.area.id, rotation: p });
+      }), l.appendChild(c), l.appendChild(u), this.transformContainer.appendChild(l);
     }
   }
   getElement() {
     return this.element;
   }
 }
-class ie extends T {
+class j extends I {
   constructor(e) {
     super(), this.cards = /* @__PURE__ */ new Map(), this.isMobile = !1, this.boundEscapeHandler = (n) => {
       n.key === "Escape" && this.emit("dismiss", void 0);
-    }, this.backdrop = c("div", { class: "area-panel-backdrop" }), this.backdrop.addEventListener("click", () => {
+    }, this.backdrop = h("div", { class: "area-panel-backdrop" }), this.backdrop.addEventListener("click", () => {
       this.emit("dismiss", void 0);
-    }), this.element = c("div", { class: "area-panel" });
-    const t = c("div", { class: "area-panel-header" });
-    t.appendChild(c("span", { class: "area-panel-title" }, "Customize"));
-    const i = c("button", { class: "area-panel-close-btn", title: "Close" }, "×");
+    }), this.element = h("div", { class: "area-panel" });
+    const t = h("div", { class: "area-panel-header" });
+    t.appendChild(h("span", { class: "area-panel-title" }, "Customize"));
+    const i = h("button", { class: "area-panel-close-btn", title: "Close" }, "×");
     if (i.addEventListener("click", () => {
       this.emit("dismiss", void 0);
-    }), t.appendChild(i), this.element.appendChild(t), this.panelContent = c("div", { class: "area-panel-content" }), e.length === 0) {
-      const n = c("p", { class: "area-panel-empty" }, "No customization areas defined.");
+    }), t.appendChild(i), this.element.appendChild(t), this.panelContent = h("div", { class: "area-panel-content" }), e.length === 0) {
+      const n = h("p", { class: "area-panel-empty" }, "No customization areas defined.");
       this.panelContent.appendChild(n);
     } else
       for (const n of e) {
-        const r = new te(n);
-        this.cards.set(n.id, r), r.on("text:change", (s) => this.emit("text:change", s)), r.on("image:change", (s) => this.emit("image:change", s)), r.on("clear", (s) => this.emit("clear", s)), r.on("select", (s) => this.emit("select", s)), r.on("offset:change", (s) => this.emit("offset:change", s)), r.on("scale:change", (s) => this.emit("scale:change", s)), r.on("rotation:change", (s) => this.emit("rotation:change", s)), r.on("validation:error", (s) => this.emit("validation:error", s)), this.panelContent.appendChild(r.getElement());
+        const a = new L(n);
+        this.cards.set(n.id, a), a.on("text:change", (o) => this.emit("text:change", o)), a.on("image:change", (o) => this.emit("image:change", o)), a.on("clear", (o) => this.emit("clear", o)), a.on("select", (o) => this.emit("select", o)), a.on("offset:change", (o) => this.emit("offset:change", o)), a.on("scale:change", (o) => this.emit("scale:change", o)), a.on("rotation:change", (o) => this.emit("rotation:change", o)), a.on("validation:error", (o) => this.emit("validation:error", o)), this.panelContent.appendChild(a.getElement());
       }
     this.element.appendChild(this.panelContent);
   }
+  setAreas(e) {
+    if (this.cards.clear(), this.panelContent.innerHTML = "", e.length === 0) {
+      const t = h("p", { class: "area-panel-empty" }, "No customization areas defined.");
+      this.panelContent.appendChild(t);
+    } else
+      for (const t of e) {
+        const i = new L(t);
+        this.cards.set(t.id, i), i.on("text:change", (n) => this.emit("text:change", n)), i.on("image:change", (n) => this.emit("image:change", n)), i.on("clear", (n) => this.emit("clear", n)), i.on("select", (n) => this.emit("select", n)), i.on("offset:change", (n) => this.emit("offset:change", n)), i.on("scale:change", (n) => this.emit("scale:change", n)), i.on("rotation:change", (n) => this.emit("rotation:change", n)), i.on("validation:error", (n) => this.emit("validation:error", n)), this.panelContent.appendChild(i.getElement());
+      }
+  }
   setContents(e) {
     for (const [t, i] of this.cards)
       i.setContent(e.get(t));
@@ -1450,7 +1501,7 @@ class ie extends T {
     return this.backdrop;
   }
 }
-class ne {
+class X {
   constructor(e = window) {
     this.target = e, this.commands = [], this.isEnabled = !0, this.handleKeyDown = (t) => {
       if (!this.isEnabled) return;
@@ -1504,31 +1555,31 @@ class ne {
     this.target.removeEventListener("keydown", this.handleKeyDown), this.commands = [];
   }
 }
-function re() {
+function W() {
   return /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 }
-function ae() {
-  return re() ? "meta" : "ctrl";
+function J() {
+  return W() ? "meta" : "ctrl";
 }
-function se(b, e, t, i) {
-  const n = b / t, r = e / i;
-  return Math.min(n, r);
+function G(f, e, t, i) {
+  const n = f / t, a = e / i;
+  return Math.min(n, a);
 }
-function oe(b, e, t = 8, i = 10, n = 300) {
-  const r = se(b, e, t, i), s = r >= n;
+function K(f, e, t = 8, i = 10, n = 300) {
+  const a = G(f, e, t, i), o = a >= n;
   return {
-    actualDPI: Math.round(r),
+    actualDPI: Math.round(a),
     targetDPI: n,
-    width: b,
+    width: f,
     height: e,
-    passed: s,
-    warning: s ? void 0 : `Image resolution is ${Math.round(r)} DPI at 100% scale. For best print quality, use images with at least ${n} DPI. This may result in pixelated or blurry prints.`
+    passed: o,
+    warning: o ? void 0 : `Image resolution is ${Math.round(a)} DPI at 100% scale. For best print quality, use images with at least ${n} DPI. This may result in pixelated or blurry prints.`
   };
 }
-const F = ':host{--editor-bg: #f3f4f6;--editor-surface: #ffffff;--editor-border: #e5e7eb;--editor-text: #111827;--editor-text-muted: #6b7280;--editor-primary: #3b82f6;--editor-primary-hover: #2563eb;--editor-danger: #ef4444;--editor-radius: 8px;--editor-radius-sm: 4px;--editor-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--editor-panel-width: 280px;display:block;width:100%;height:100%;font-family:var(--editor-font);font-size:13px;color:var(--editor-text);line-height:1.4}:host([theme="dark"]){--editor-bg: #1f2937;--editor-surface: #374151;--editor-border: #4b5563;--editor-text: #f9fafb;--editor-text-muted: #9ca3af}.editor-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative;overflow:hidden;background:var(--editor-bg)}.layout-desktop .editor-main{display:flex;flex:1;min-height:0}.layout-desktop .canvas-area{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.layout-desktop .area-panel{width:var(--editor-panel-width);border-left:1px solid var(--editor-border);background:var(--editor-surface);display:none;flex-direction:column;overflow:hidden}.layout-desktop .area-panel.area-panel-visible{display:flex}.layout-mobile .editor-main{display:flex;flex-direction:column;flex:1;min-height:0}.layout-mobile .canvas-area{flex:1;position:relative;display:flex;flex-direction:column;min-height:0}.layout-mobile .area-panel{position:absolute;bottom:0;left:0;right:0;max-height:50%;background:var(--editor-surface);border-top:1px solid var(--editor-border);border-radius:var(--editor-radius) var(--editor-radius) 0 0;box-shadow:0 -4px 20px #00000026;transform:translateY(100%);transition:transform .25s ease-out;z-index:20;display:flex;flex-direction:column;overflow:hidden}.layout-mobile .area-panel.area-panel-visible{transform:translateY(0)}.area-panel-backdrop{display:none}.layout-mobile .area-panel-backdrop{display:block;position:absolute;inset:0;background:#0000004d;z-index:15;opacity:0;pointer-events:none;transition:opacity .25s ease-out}.layout-mobile .area-panel-backdrop.area-panel-backdrop-visible{opacity:1;pointer-events:auto}.zoom-toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:var(--editor-surface);border-bottom:1px solid var(--editor-border)}.zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);cursor:pointer;font-size:14px;font-family:var(--editor-font);transition:background .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.zoom-btn:hover{background:var(--editor-bg)}.zoom-btn:active{background:var(--editor-border)}.zoom-percent{margin-left:8px;font-size:12px;color:var(--editor-text-muted);min-width:40px}.canvas-wrapper{flex:1;position:relative;overflow:hidden;min-height:200px}.editor-canvas{position:absolute;top:0;left:0}.area-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--editor-border);flex-shrink:0}.area-panel-title{font-weight:600;font-size:14px}.area-panel-close-btn{width:28px;height:28px;border:none;background:none;color:var(--editor-text-muted);cursor:pointer;font-size:18px;line-height:1;border-radius:var(--editor-radius-sm);display:flex;align-items:center;justify-content:center}.area-panel-close-btn:hover{background:var(--editor-bg);color:var(--editor-text)}.area-panel-content{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.area-panel-empty{color:var(--editor-text-muted);font-size:12px;text-align:center;padding:20px 0}.area-card{padding:12px;border:1px solid var(--editor-border);border-radius:var(--editor-radius);background:var(--editor-surface);cursor:pointer;transition:border-color .15s}.area-card:hover{border-color:var(--editor-primary)}.area-card-selected{border-color:var(--editor-primary);box-shadow:0 0 0 1px var(--editor-primary)}.area-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.area-card-name-row{display:flex;align-items:center;gap:6px}.area-card-name{font-weight:600;font-size:13px}.area-card-badge{display:inline-block;padding:1px 6px;font-size:10px;font-weight:500;background:#fef3c7;color:#92400e;border-radius:10px}.area-card-reset-btn{padding:2px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:none;color:var(--editor-text-muted);cursor:pointer;font-size:11px;font-family:var(--editor-font)}.area-card-reset-btn:hover{background:var(--editor-bg);color:var(--editor-danger);border-color:var(--editor-danger)}.area-card-mode-switcher{display:flex;gap:4px;margin-bottom:8px}.mode-btn{flex:1;padding:4px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);cursor:pointer;font-size:12px;font-family:var(--editor-font);transition:all .15s}.mode-btn-active{background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.area-input-text{width:100%;padding:6px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:13px;color:var(--editor-text);background:var(--editor-surface);box-sizing:border-box;margin-bottom:6px}.area-input-text:focus{outline:none;border-color:var(--editor-primary);box-shadow:0 0 0 1px var(--editor-primary)}.area-input-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}.area-input-font{flex:1;padding:4px 6px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:12px;color:var(--editor-text);background:var(--editor-surface);min-width:0}.area-input-size{width:56px;padding:4px 6px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:12px;color:var(--editor-text);background:var(--editor-surface)}.area-input-align{display:flex;gap:2px}.align-btn{width:28px;height:28px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--editor-font)}.align-btn-active{background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.area-input-color{width:32px;height:28px;padding:0;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);cursor:pointer;background:none}.area-upload-btn{width:100%;padding:10px;border:2px dashed var(--editor-border);border-radius:var(--editor-radius);background:var(--editor-bg);color:var(--editor-text-muted);cursor:pointer;font-family:var(--editor-font);font-size:12px;text-align:center;transition:all .15s;min-height:44px}.area-upload-btn:hover{border-color:var(--editor-primary);color:var(--editor-primary)}.area-image-preview{display:flex;gap:8px;align-items:center}.area-image-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--editor-radius-sm);border:1px solid var(--editor-border)}.area-image-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.area-image-name{font-size:12px;color:var(--editor-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.area-image-remove-btn{padding:2px 8px;border:1px solid var(--editor-danger);border-radius:var(--editor-radius-sm);background:none;color:var(--editor-danger);cursor:pointer;font-size:11px;font-family:var(--editor-font);width:fit-content}.area-image-remove-btn:hover{background:#fef2f2}.area-card-divider{height:1px;background:var(--editor-border);margin:8px 0}.transform-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.transform-title{font-weight:600;font-size:12px}.transform-reset-btn{padding:2px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:none;color:var(--editor-text-muted);cursor:pointer;font-size:11px;font-family:var(--editor-font)}.transform-reset-btn:hover{background:var(--editor-bg)}.transform-label{font-size:11px;color:var(--editor-text-muted);white-space:nowrap}.transform-input{width:60px;padding:3px 6px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:12px;color:var(--editor-text);background:var(--editor-surface)}.transform-slider-row{flex-direction:column;align-items:stretch}.transform-slider{width:100%;accent-color:var(--editor-primary)}.loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:200px}.loading-spinner{width:32px;height:32px;border:3px solid var(--editor-border);border-top-color:var(--editor-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;min-height:200px;padding:20px;text-align:center}.error-title{font-weight:600;font-size:16px;color:var(--editor-danger);margin-bottom:8px}.error-message{font-size:13px;color:var(--editor-text-muted);max-width:400px;white-space:pre-wrap}:host(:focus){outline:2px solid var(--editor-primary);outline-offset:-2px}input:focus,select:focus,button:focus-visible{outline:2px solid var(--editor-primary);outline-offset:-1px}.context-menu{position:absolute;z-index:100;min-width:160px;background:var(--editor-surface);border:1px solid var(--editor-border);border-radius:var(--editor-radius);box-shadow:0 4px 12px #00000026;padding:4px 0;font-size:13px}.context-menu-header{padding:6px 12px;font-weight:600;font-size:12px;color:var(--editor-text-muted);user-select:none}.context-menu-divider{height:1px;background:var(--editor-border);margin:4px 0}.context-menu-item{padding:6px 12px;cursor:pointer;color:var(--editor-text);user-select:none;transition:background .1s}.context-menu-item:hover{background:var(--editor-bg)}.context-menu-item:active{background:var(--editor-border)}.context-menu-item-disabled{color:var(--editor-text-muted);cursor:default;pointer-events:none}.editor-toast{position:absolute;top:16px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:var(--editor-radius);font-size:13px;font-family:var(--editor-font);line-height:1.4;z-index:200;max-width:400px;text-align:center;animation:toast-in .25s ease-out,toast-out .25s ease-in forwards;animation-delay:0s,var(--toast-duration, 3.75s);pointer-events:none;box-shadow:0 4px 12px #00000026}.editor-toast-warning{background:#fef3c7;color:#92400e;border:1px solid #f59e0b}.editor-toast-error{background:#fef2f2;color:#991b1b;border:1px solid var(--editor-danger)}.editor-toast-info{background:#eff6ff;color:#1e40af;border:1px solid var(--editor-primary)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.editor-modal-overlay{position:absolute;inset:0;background:#0006;z-index:300;display:flex;align-items:center;justify-content:center;animation:modal-overlay-in .2s ease-out}@keyframes modal-overlay-in{0%{opacity:0}to{opacity:1}}.editor-modal{background:var(--editor-surface);border-radius:var(--editor-radius);box-shadow:0 8px 32px #0003;max-width:380px;width:calc(100% - 32px);padding:20px;animation:modal-in .2s ease-out}@keyframes modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.editor-modal-title{font-weight:600;font-size:15px;margin-bottom:8px;color:var(--editor-text)}.editor-modal-body{font-size:13px;color:var(--editor-text-muted);margin-bottom:16px;line-height:1.5}.editor-modal-actions{display:flex;justify-content:flex-end;gap:8px}.editor-modal-btn{padding:8px 16px;border-radius:var(--editor-radius-sm);font-size:13px;font-family:var(--editor-font);cursor:pointer;border:1px solid var(--editor-border);background:var(--editor-surface);color:var(--editor-text);transition:background .15s}.editor-modal-btn:hover{background:var(--editor-bg)}.editor-modal-btn-primary{background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.editor-modal-btn-primary:hover{background:var(--editor-primary-hover)}.area-validation-error{font-size:11px;color:var(--editor-danger);margin-top:4px}@media(pointer:coarse){.zoom-btn{min-width:44px;min-height:44px}.area-input-text,.area-input-font,.area-input-size{min-height:44px;font-size:16px}.align-btn{min-width:44px;min-height:44px}.area-upload-btn{min-height:48px}}', de = "2.0.0", le = 768;
-class he extends HTMLElement {
+const z = ':host{--editor-bg: #f3f4f6;--editor-surface: #ffffff;--editor-border: #e5e7eb;--editor-text: #111827;--editor-text-muted: #6b7280;--editor-primary: #3b82f6;--editor-primary-hover: #2563eb;--editor-danger: #ef4444;--editor-radius: 8px;--editor-radius-sm: 4px;--editor-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--editor-panel-width: 280px;display:block;width:100%;height:100%;font-family:var(--editor-font);font-size:13px;color:var(--editor-text);line-height:1.4}:host([theme="dark"]){--editor-bg: #1f2937;--editor-surface: #374151;--editor-border: #4b5563;--editor-text: #f9fafb;--editor-text-muted: #9ca3af}.editor-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative;overflow:hidden;background:var(--editor-bg)}.layout-desktop .editor-main{display:flex;flex:1;min-height:0}.layout-desktop .canvas-area{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.layout-desktop .area-panel{width:var(--editor-panel-width);border-left:1px solid var(--editor-border);background:var(--editor-surface);display:none;flex-direction:column;overflow:hidden}.layout-desktop .area-panel.area-panel-visible{display:flex}.layout-mobile .editor-main{display:flex;flex-direction:column;flex:1;min-height:0}.layout-mobile .canvas-area{flex:1;position:relative;display:flex;flex-direction:column;min-height:0}.layout-mobile .area-panel{position:absolute;bottom:0;left:0;right:0;max-height:50%;background:var(--editor-surface);border-top:1px solid var(--editor-border);border-radius:var(--editor-radius) var(--editor-radius) 0 0;box-shadow:0 -4px 20px #00000026;transform:translateY(100%);transition:transform .25s ease-out;z-index:20;display:flex;flex-direction:column;overflow:hidden}.layout-mobile .area-panel.area-panel-visible{transform:translateY(0)}.area-panel-backdrop{display:none}.layout-mobile .area-panel-backdrop{display:block;position:absolute;inset:0;background:#0000004d;z-index:15;opacity:0;pointer-events:none;transition:opacity .25s ease-out}.layout-mobile .area-panel-backdrop.area-panel-backdrop-visible{opacity:1;pointer-events:auto}.zoom-toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:var(--editor-surface);border-bottom:1px solid var(--editor-border)}.zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);cursor:pointer;font-size:14px;font-family:var(--editor-font);transition:background .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.zoom-btn:hover{background:var(--editor-bg)}.zoom-btn:active{background:var(--editor-border)}.zoom-percent{margin-left:8px;font-size:12px;color:var(--editor-text-muted);min-width:40px}.view-select{margin-left:8px;padding:4px 8px;height:32px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);font-family:var(--editor-font);font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.view-select:hover{background:var(--editor-bg)}.view-select:focus{outline:2px solid var(--editor-primary);outline-offset:-1px}.zoom-toolbar-spacer{flex:1}.zoom-close-btn{width:auto;padding:0 12px;font-size:13px;gap:4px}.zoom-save-btn{width:auto;padding:0 16px;margin-left:8px;font-size:13px;font-weight:600;background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.zoom-save-btn:hover{background:var(--editor-primary-hover)}.zoom-save-btn:disabled{opacity:.5;cursor:not-allowed}.canvas-wrapper{flex:1;position:relative;overflow:hidden;min-height:200px}.editor-canvas{position:absolute;top:0;left:0}.area-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--editor-border);flex-shrink:0}.area-panel-title{font-weight:600;font-size:14px}.area-panel-close-btn{width:28px;height:28px;border:none;background:none;color:var(--editor-text-muted);cursor:pointer;font-size:18px;line-height:1;border-radius:var(--editor-radius-sm);display:flex;align-items:center;justify-content:center}.area-panel-close-btn:hover{background:var(--editor-bg);color:var(--editor-text)}.area-panel-content{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.area-panel-empty{color:var(--editor-text-muted);font-size:12px;text-align:center;padding:20px 0}.area-card{padding:12px;border:1px solid var(--editor-border);border-radius:var(--editor-radius);background:var(--editor-surface);cursor:pointer;transition:border-color .15s}.area-card:hover{border-color:var(--editor-primary)}.area-card-selected{border-color:var(--editor-primary);box-shadow:0 0 0 1px var(--editor-primary)}.area-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.area-card-name-row{display:flex;align-items:center;gap:6px}.area-card-name{font-weight:600;font-size:13px}.area-card-badge{display:inline-block;padding:1px 6px;font-size:10px;font-weight:500;background:#fef3c7;color:#92400e;border-radius:10px}.area-card-reset-btn{padding:2px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:none;color:var(--editor-text-muted);cursor:pointer;font-size:11px;font-family:var(--editor-font)}.area-card-reset-btn:hover{background:var(--editor-bg);color:var(--editor-danger);border-color:var(--editor-danger)}.area-card-mode-switcher{display:flex;gap:4px;margin-bottom:8px}.mode-btn{flex:1;padding:4px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);cursor:pointer;font-size:12px;font-family:var(--editor-font);transition:all .15s}.mode-btn-active{background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.area-input-text{width:100%;padding:6px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:13px;color:var(--editor-text);background:var(--editor-surface);box-sizing:border-box;margin-bottom:6px}.area-input-text:focus{outline:none;border-color:var(--editor-primary);box-shadow:0 0 0 1px var(--editor-primary)}.area-input-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}.area-input-font{flex:1;padding:4px 6px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:12px;color:var(--editor-text);background:var(--editor-surface);min-width:0}.area-input-size{width:56px;padding:4px 6px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:12px;color:var(--editor-text);background:var(--editor-surface)}.area-input-align{display:flex;gap:2px}.align-btn{width:28px;height:28px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:var(--editor-surface);color:var(--editor-text);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--editor-font)}.align-btn-active{background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.area-input-color{width:32px;height:28px;padding:0;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);cursor:pointer;background:none}.area-upload-btn{width:100%;padding:10px;border:2px dashed var(--editor-border);border-radius:var(--editor-radius);background:var(--editor-bg);color:var(--editor-text-muted);cursor:pointer;font-family:var(--editor-font);font-size:12px;text-align:center;transition:all .15s;min-height:44px}.area-upload-btn:hover{border-color:var(--editor-primary);color:var(--editor-primary)}.area-image-preview{display:flex;gap:8px;align-items:center}.area-image-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--editor-radius-sm);border:1px solid var(--editor-border)}.area-image-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.area-image-name{font-size:12px;color:var(--editor-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.area-image-remove-btn{padding:2px 8px;border:1px solid var(--editor-danger);border-radius:var(--editor-radius-sm);background:none;color:var(--editor-danger);cursor:pointer;font-size:11px;font-family:var(--editor-font);width:fit-content}.area-image-remove-btn:hover{background:#fef2f2}.area-card-divider{height:1px;background:var(--editor-border);margin:8px 0}.transform-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.transform-title{font-weight:600;font-size:12px}.transform-reset-btn{padding:2px 8px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);background:none;color:var(--editor-text-muted);cursor:pointer;font-size:11px;font-family:var(--editor-font)}.transform-reset-btn:hover{background:var(--editor-bg)}.transform-label{font-size:11px;color:var(--editor-text-muted);white-space:nowrap}.transform-input{width:60px;padding:3px 6px;border:1px solid var(--editor-border);border-radius:var(--editor-radius-sm);font-family:var(--editor-font);font-size:12px;color:var(--editor-text);background:var(--editor-surface)}.transform-slider-row{flex-direction:column;align-items:stretch}.transform-slider{width:100%;accent-color:var(--editor-primary)}.loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:200px}.loading-spinner{width:32px;height:32px;border:3px solid var(--editor-border);border-top-color:var(--editor-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;min-height:200px;padding:20px;text-align:center}.error-title{font-weight:600;font-size:16px;color:var(--editor-danger);margin-bottom:8px}.error-message{font-size:13px;color:var(--editor-text-muted);max-width:400px;white-space:pre-wrap}:host(:focus){outline:2px solid var(--editor-primary);outline-offset:-2px}input:focus,select:focus,button:focus-visible{outline:2px solid var(--editor-primary);outline-offset:-1px}.context-menu{position:absolute;z-index:100;min-width:160px;background:var(--editor-surface);border:1px solid var(--editor-border);border-radius:var(--editor-radius);box-shadow:0 4px 12px #00000026;padding:4px 0;font-size:13px}.context-menu-header{padding:6px 12px;font-weight:600;font-size:12px;color:var(--editor-text-muted);user-select:none}.context-menu-divider{height:1px;background:var(--editor-border);margin:4px 0}.context-menu-item{padding:6px 12px;cursor:pointer;color:var(--editor-text);user-select:none;transition:background .1s}.context-menu-item:hover{background:var(--editor-bg)}.context-menu-item:active{background:var(--editor-border)}.context-menu-item-disabled{color:var(--editor-text-muted);cursor:default;pointer-events:none}.editor-toast{position:absolute;top:16px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:var(--editor-radius);font-size:13px;font-family:var(--editor-font);line-height:1.4;z-index:200;max-width:400px;text-align:center;animation:toast-in .25s ease-out,toast-out .25s ease-in forwards;animation-delay:0s,var(--toast-duration, 3.75s);pointer-events:none;box-shadow:0 4px 12px #00000026}.editor-toast-warning{background:#fef3c7;color:#92400e;border:1px solid #f59e0b}.editor-toast-error{background:#fef2f2;color:#991b1b;border:1px solid var(--editor-danger)}.editor-toast-info{background:#eff6ff;color:#1e40af;border:1px solid var(--editor-primary)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.editor-modal-overlay{position:absolute;inset:0;background:#0006;z-index:300;display:flex;align-items:center;justify-content:center;animation:modal-overlay-in .2s ease-out}@keyframes modal-overlay-in{0%{opacity:0}to{opacity:1}}.editor-modal{background:var(--editor-surface);border-radius:var(--editor-radius);box-shadow:0 8px 32px #0003;max-width:380px;width:calc(100% - 32px);padding:20px;animation:modal-in .2s ease-out}@keyframes modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.editor-modal-title{font-weight:600;font-size:15px;margin-bottom:8px;color:var(--editor-text)}.editor-modal-body{font-size:13px;color:var(--editor-text-muted);margin-bottom:16px;line-height:1.5}.editor-modal-actions{display:flex;justify-content:flex-end;gap:8px}.editor-modal-btn{padding:8px 16px;border-radius:var(--editor-radius-sm);font-size:13px;font-family:var(--editor-font);cursor:pointer;border:1px solid var(--editor-border);background:var(--editor-surface);color:var(--editor-text);transition:background .15s}.editor-modal-btn:hover{background:var(--editor-bg)}.editor-modal-btn-primary{background:var(--editor-primary);color:#fff;border-color:var(--editor-primary)}.editor-modal-btn-primary:hover{background:var(--editor-primary-hover)}.area-validation-error{font-size:11px;color:var(--editor-danger);margin-top:4px}@media(pointer:coarse){.zoom-btn{min-width:44px;min-height:44px}.area-input-text,.area-input-font,.area-input-size{min-height:44px;font-size:16px}.align-btn{min-width:44px;min-height:44px}.area-upload-btn{min-height:48px}.view-select{min-height:44px;font-size:16px}}', Q = "2.0.0", _ = 768;
+class ee extends HTMLElement {
   constructor() {
-    super(), this.resizeObserver = null, this.isReady = !1, this.currentTemplate = null, this.loadingTemplateId = null, this.isMobileLayout = !1, this.subscriptions = [], this.storageUsage = null, this.storageUsageLastRefresh = 0, this.emitChange = V(() => {
+    super(), this.resizeObserver = null, this.isReady = !1, this.currentTemplate = null, this.loadingTemplateId = null, this.isMobileLayout = !1, this.productViews = [], this.activeViewName = null, this.perViewContents = /* @__PURE__ */ new Map(), this.subscriptions = [], this.storageUsage = null, this.storageUsageLastRefresh = 0, this.emitChange = H(() => {
       this.dispatchEvent(
         new CustomEvent("change", {
           detail: { design: this.getDesign() },
@@ -1539,7 +1590,7 @@ class he extends HTMLElement {
     }, 300), this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["template-id", "theme", "mode", "store-id", "api-url"];
+    return ["template-id", "product-id", "theme", "mode", "store-id", "api-url"];
   }
   async connectedCallback() {
     try {
@@ -1552,14 +1603,14 @@ class he extends HTMLElement {
     this.cleanup();
   }
   attributeChangedCallback(e, t, i) {
-    t !== i && e === "template-id" && this.isReady && i && this.loadTemplate(i);
+    t !== i && (e === "template-id" && this.isReady && i && this.loadTemplate(i), e === "product-id" && this.isReady && i && this.loadProduct(i));
   }
   // ─── Public API ───
   getDesign() {
     if (!this.currentTemplate) throw new Error("No design loaded");
     return {
       templateId: this.currentTemplate.metadata.id,
-      engineVersion: de,
+      engineVersion: Q,
       contents: this.contentManager.toJSON(),
       userData: {}
     };
@@ -1583,7 +1634,7 @@ class he extends HTMLElement {
       contents: this.contentManager.toJSON(),
       selectedAreaId: null,
       isDirty: !1
-    }), this.engine.setSelectedArea(null), this.inputPanel.setSelectedArea(null), this.engine.fitToView(), this.stateManager.update({
+    }), this.zoomToolbar?.showSaveButton(!1), this.engine.setSelectedArea(null), this.inputPanel.setSelectedArea(null), this.engine.fitToView(), this.stateManager.update({
       zoom: this.engine.getZoom(),
       pan: this.engine.getPan()
     });
@@ -1594,6 +1645,24 @@ class he extends HTMLElement {
   getSelectedAreaId() {
     return this.stateManager.getState().selectedAreaId;
   }
+  getActiveView() {
+    return this.activeViewName;
+  }
+  getViews() {
+    return this.productViews.map((e) => ({
+      viewName: e.viewName,
+      viewOrder: e.viewOrder,
+      isRequired: e.isRequired,
+      isDefault: e.isDefault,
+      templateId: e.template.id
+    }));
+  }
+  setActiveView(e) {
+    if (this.activeViewName === e) return;
+    const t = this.productViews.find((i) => i.viewName === e);
+    if (!t) throw new Error(`View not found: ${e}`);
+    this.switchToView(t);
+  }
   setAreaContent(e, t) {
     t.type === "text" ? this.contentManager.setTextContent(e, t) : this.contentManager.setImageContent(e, t.dataUrl, t.filename), this.syncEngineContents(), this.saveContentState();
   }
@@ -1603,10 +1672,10 @@ class he extends HTMLElement {
   async finalize() {
     const e = this.engine.checkSafeAreaViolations();
     if (e.length > 0) {
-      const r = this.currentTemplate?.areas || [], s = e.map((a) => r.find((o) => o.id === a)?.name || a).join(", ");
+      const a = this.currentTemplate?.areas || [], o = e.map((s) => a.find((r) => r.id === s)?.name || s).join(", ");
       if (!await this.showConfirmation(
         "Content outside safe area",
-        `Content in ${s} extends beyond the safe area. It may be trimmed during printing. Continue?`,
+        `Content in ${o} extends beyond the safe area. It may be trimmed during printing. Continue?`,
         "Cancel",
         "Proceed Anyway"
       ))
@@ -1630,21 +1699,21 @@ class he extends HTMLElement {
   // ─── Initialization ───
   renderLoading() {
     const e = document.createElement("style");
-    e.textContent = F, this.shadow.appendChild(e);
-    const t = c(
+    e.textContent = z, this.shadow.appendChild(e);
+    const t = h(
       "div",
       { class: "loading-container" },
-      c("div", { class: "loading-spinner" })
+      h("div", { class: "loading-spinner" })
     );
     this.shadow.appendChild(t);
   }
   async initialize() {
-    const e = this.getAttribute("api-url") || "http://localhost:4000/public";
-    this.apiClient = new J(e);
-    const t = this.getAttribute("template-id");
-    if (!t)
-      throw new Error("template-id attribute is required");
-    await this.loadTemplate(t), this.isReady = !0, this.dispatchEvent(new CustomEvent("ready", { bubbles: !0, composed: !0 }));
+    const e = this.getAttribute("api-url") || "http://localhost:4000";
+    this.apiClient = new $(`${e.replace(/\/+$/, "")}/public`);
+    const t = this.getAttribute("product-id"), i = this.getAttribute("template-id");
+    if (!t && !i)
+      throw new Error("Either template-id or product-id attribute is required");
+    t ? await this.loadProduct(t) : await this.loadTemplate(i), this.isReady = !0, this.dispatchEvent(new CustomEvent("ready", { bubbles: !0, composed: !0 }));
   }
   async loadTemplate(e) {
     if (this.loadingTemplateId !== e) {
@@ -1652,57 +1721,120 @@ class he extends HTMLElement {
       try {
         const t = await this.apiClient.getTemplate(e);
         if (this.loadingTemplateId !== e) return;
-        this.currentTemplate = t;
-        const i = t.areas || [];
-        this.contentManager = new X(i);
-        const n = {
-          template: t,
-          contents: this.contentManager.toJSON(),
-          selectedAreaId: null,
-          zoom: 1,
-          pan: { x: 0, y: 0 },
-          isDirty: !1,
-          warnings: []
-        };
-        this.stateManager = new j(n), this.buildUI(t, i), this.engine = new B(this.canvas), this.engine.setArtboard({
-          width: t.artboard.width,
-          height: t.artboard.height,
-          backgroundColor: t.artboard.backgroundColor ?? "#ffffff"
-        }), this.engine.setAreas(i), this.engine.setContents(this.contentManager.getContents()), t.backgroundImage && this.engine.setBackgroundImage(t.backgroundImage);
-        const r = t.artboard.safeArea ?? t.safeArea;
-        r && this.engine.setSafeArea(r), this.engine.start(), this.engine.fitToView(), this.stateManager.update({
-          zoom: this.engine.getZoom(),
-          pan: this.engine.getPan()
-        }), this.zoomToolbar.setZoom(this.engine.getZoom()), this.interaction = new G(
-          this.canvas,
-          this.engine,
-          () => this.contentManager.getContents(),
-          () => this.stateManager.getState().selectedAreaId
-        ), this.wireInteractionEvents(), this.subscriptions.push(
-          this.contentManager.subscribe(() => {
-            this.syncEngineContents(), this.inputPanel.setContents(this.contentManager.getContents());
-          })
-        ), this.keyboard = new ne(this), this.setupKeyboardShortcuts(), this.inputPanel.setContents(this.contentManager.getContents());
-        const s = this.getAttribute("store-id");
-        s && this.apiClient.getStorageUsage(s).then((a) => {
-          this.storageUsage = a, a.usagePercent >= 100 ? this.showToast("Storage quota exceeded. Upgrade your plan for more storage.", "error") : a.usagePercent >= 80 && this.showToast(`Storage ${a.usagePercent}% full. Consider upgrading your plan.`, "warning");
-        }).catch(() => {
-        }), this.loadingTemplateId = null;
+        await this.loadTemplateData(t), this.loadingTemplateId = null;
       } catch (t) {
         throw this.loadingTemplateId = null, new Error(`Failed to load template: ${t.message}`);
       }
     }
   }
+  async loadTemplateData(e) {
+    this.currentTemplate = e;
+    const t = e.areas || [];
+    this.contentManager = new T(t);
+    const i = {
+      template: e,
+      contents: this.contentManager.toJSON(),
+      selectedAreaId: null,
+      zoom: 1,
+      pan: { x: 0, y: 0 },
+      isDirty: !1,
+      warnings: []
+    };
+    this.stateManager = new O(i), this.buildUI(e, t), this.engine = new N(this.canvas), this.engine.setArtboard({
+      width: e.artboard.width,
+      height: e.artboard.height,
+      backgroundColor: e.artboard.backgroundColor ?? "#ffffff"
+    }), this.engine.setAreas(t), this.engine.setContents(this.contentManager.getContents()), e.backgroundImage && this.engine.setBackgroundImage(e.backgroundImage);
+    const n = e.artboard.safeArea ?? e.safeArea;
+    n && this.engine.setSafeArea(n), this.engine.start(), this.engine.fitToView(), this.stateManager.update({
+      zoom: this.engine.getZoom(),
+      pan: this.engine.getPan()
+    }), this.zoomToolbar.setZoom(this.engine.getZoom()), this.interaction = new F(
+      this.canvas,
+      this.engine,
+      () => this.contentManager.getContents(),
+      () => this.stateManager.getState().selectedAreaId
+    ), this.wireInteractionEvents(), this.subscriptions.push(
+      this.contentManager.subscribe(() => {
+        this.syncEngineContents(), this.inputPanel.setContents(this.contentManager.getContents());
+      })
+    ), this.keyboard = new X(this), this.setupKeyboardShortcuts(), this.inputPanel.setContents(this.contentManager.getContents());
+    const a = this.getAttribute("store-id");
+    a && this.apiClient.getStorageUsage(a).then((o) => {
+      this.storageUsage = o, o.usagePercent >= 100 ? this.showToast("Storage quota exceeded. Upgrade your plan for more storage.", "error") : o.usagePercent >= 80 && this.showToast(`Storage ${o.usagePercent}% full. Consider upgrading your plan.`, "warning");
+    }).catch(() => {
+    });
+  }
+  async loadProduct(e) {
+    try {
+      const t = await this.apiClient.getProduct(e);
+      if (t.views.length === 0)
+        throw new Error("Product has no active templates");
+      this.productViews = t.views, this.perViewContents.clear();
+      const i = t.views.find((n) => n.isDefault) || t.views[0];
+      await this.loadTemplateData(i.template.templateJson), this.activeViewName = i.viewName, this.zoomToolbar && t.views.length > 1 && (this.zoomToolbar.setViews(this.getViews()), this.zoomToolbar.setActiveView(i.viewName));
+    } catch (t) {
+      throw new Error(`Failed to load product: ${t.message}`);
+    }
+  }
+  switchToView(e) {
+    this.activeViewName && this.contentManager && this.perViewContents.set(this.activeViewName, this.contentManager.toJSON()), this.activeViewName = e.viewName, this.zoomToolbar?.setActiveView(e.viewName);
+    const t = e.template.templateJson;
+    this.currentTemplate = t;
+    const i = t.areas || [];
+    this.contentManager = new T(i);
+    const n = this.perViewContents.get(e.viewName);
+    n && this.contentManager.fromJSON(n), this.engine.setArtboard({
+      width: t.artboard.width,
+      height: t.artboard.height,
+      backgroundColor: t.artboard.backgroundColor ?? "#ffffff"
+    }), this.engine.setAreas(i), this.engine.setContents(this.contentManager.getContents()), this.engine.setBackgroundImage(t.backgroundImage ?? void 0);
+    const a = t.artboard.safeArea ?? t.safeArea;
+    this.engine.setSafeArea(a ?? null), this.engine.fitToView(), this.stateManager.setState({
+      template: t,
+      contents: this.contentManager.toJSON(),
+      selectedAreaId: null,
+      isDirty: this.stateManager.getState().isDirty,
+      zoom: this.engine.getZoom(),
+      pan: this.engine.getPan(),
+      warnings: []
+    }), this.zoomToolbar.setZoom(this.engine.getZoom()), this.inputPanel.setAreas(i), this.inputPanel.setContents(this.contentManager.getContents()), this.inputPanel.setSelectedArea(null), this.engine.setSelectedArea(null), this.dispatchEvent(
+      new CustomEvent("view-change", {
+        detail: { viewName: e.viewName },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
   buildUI(e, t) {
     this.shadow.innerHTML = "";
     const i = document.createElement("style");
-    i.textContent = F, this.shadow.appendChild(i), this.container = c("div", { class: "editor-container" }), this.zoomToolbar = new K(), this.subscriptions.push(this.zoomToolbar.on("zoom-in", () => this.handleZoomIn())), this.subscriptions.push(this.zoomToolbar.on("zoom-out", () => this.handleZoomOut())), this.subscriptions.push(this.zoomToolbar.on("zoom-fit", () => this.handleZoomFit()));
-    const n = c("div", { class: "canvas-area" });
-    n.appendChild(this.zoomToolbar.getElement()), this.canvasWrapper = c("div", { class: "canvas-wrapper" }), this.canvas = document.createElement("canvas"), this.canvas.className = "editor-canvas", this.canvasWrapper.appendChild(this.canvas), n.appendChild(this.canvasWrapper), this.inputPanel = new ie(t), this.wireInputPanelEvents();
-    const r = c("div", { class: "editor-main" });
-    r.appendChild(n), r.appendChild(this.inputPanel.getBackdrop()), r.appendChild(this.inputPanel.getElement()), this.container.appendChild(r), this.shadow.appendChild(this.container), this.resizeObserver = new ResizeObserver((s) => {
-      for (const a of s)
-        a.target === this.canvasWrapper && this.handleCanvasResize(a.contentRect), a.target === this.container && this.handleLayoutResize(a.contentRect);
+    i.textContent = z, this.shadow.appendChild(i), this.container = h("div", { class: "editor-container" }), this.zoomToolbar = new B(), this.subscriptions.push(this.zoomToolbar.on("zoom-in", () => this.handleZoomIn())), this.subscriptions.push(this.zoomToolbar.on("zoom-out", () => this.handleZoomOut())), this.subscriptions.push(this.zoomToolbar.on("zoom-fit", () => this.handleZoomFit())), this.subscriptions.push(this.zoomToolbar.on("view-change", ({ viewName: o }) => {
+      const s = this.productViews.find((r) => r.viewName === o);
+      s && this.switchToView(s);
+    })), this.subscriptions.push(this.zoomToolbar.on("close", () => {
+      this.dispatchEvent(new CustomEvent("customizer:close", {
+        bubbles: !0,
+        composed: !0
+      }));
+    })), this.subscriptions.push(this.zoomToolbar.on("save", async () => {
+      this.zoomToolbar.setSaveDisabled(!0, "Saving...");
+      try {
+        await this.finalize(), this.zoomToolbar.setSaveDisabled(!0, "Saved!"), this.showToast("Design saved successfully!", "info"), setTimeout(() => {
+          this.zoomToolbar.setSaveDisabled(!1, "Save Customization"), this.zoomToolbar.showSaveButton(!1), this.stateManager.update({ isDirty: !1 });
+        }, 2e3);
+      } catch (o) {
+        console.error("Customizer: finalize failed", o);
+        const s = o instanceof Error ? o.message : "Save failed. Please try again.";
+        this.showToast(s, "error"), this.zoomToolbar.setSaveDisabled(!1, "Save Customization");
+      }
+    }));
+    const n = h("div", { class: "canvas-area" });
+    n.appendChild(this.zoomToolbar.getElement()), this.canvasWrapper = h("div", { class: "canvas-wrapper" }), this.canvas = document.createElement("canvas"), this.canvas.className = "editor-canvas", this.canvasWrapper.appendChild(this.canvas), n.appendChild(this.canvasWrapper), this.inputPanel = new j(t), this.wireInputPanelEvents();
+    const a = h("div", { class: "editor-main" });
+    a.appendChild(n), a.appendChild(this.inputPanel.getBackdrop()), a.appendChild(this.inputPanel.getElement()), this.container.appendChild(a), this.shadow.appendChild(this.container), this.resizeObserver = new ResizeObserver((o) => {
+      for (const s of o)
+        s.target === this.canvasWrapper && this.handleCanvasResize(s.contentRect), s.target === this.container && this.handleLayoutResize(s.contentRect);
     }), this.resizeObserver.observe(this.canvasWrapper), this.resizeObserver.observe(this.container);
   }
   // ─── Event Wiring ───
@@ -1751,10 +1883,10 @@ class he extends HTMLElement {
     ), this.subscriptions.push(
       this.inputPanel.on("image:change", async ({ areaId: e, dataUrl: t, filename: i }) => {
         const n = this.contentManager.getContents();
-        let r = 0;
-        for (const [a, o] of n)
-          o.type === "image" && a !== e && r++;
-        if (r >= 10) {
+        let a = 0;
+        for (const [s, r] of n)
+          r.type === "image" && s !== e && a++;
+        if (a >= 10) {
           this.showToast("Maximum of 10 images per design reached", "error");
           return;
         }
@@ -1762,28 +1894,28 @@ class he extends HTMLElement {
           this.showToast("Storage quota exceeded. Upgrade your plan for more storage.", "error");
           return;
         }
-        const s = this.currentTemplate?.areas.find((a) => a.id === e);
-        if (s && this.currentTemplate) {
-          const a = this.currentTemplate.print.targetDpi;
+        const o = this.currentTemplate?.areas.find((s) => s.id === e);
+        if (o && this.currentTemplate) {
+          const s = this.currentTemplate.print.targetDpi;
           try {
-            const o = new Image(), d = await new Promise((g, m) => {
-              o.onload = () => g({ width: o.naturalWidth, height: o.naturalHeight }), o.onerror = () => m(new Error("Failed to load image")), o.src = t;
-            }), l = s.location.width / a, h = s.location.height / a, u = oe(
+            const r = new Image(), d = await new Promise((p, g) => {
+              r.onload = () => p({ width: r.naturalWidth, height: r.naturalHeight }), r.onerror = () => g(new Error("Failed to load image")), r.src = t;
+            }), l = o.location.width / s, c = o.location.height / s, u = K(
               d.width,
               d.height,
               l,
-              h,
-              a
+              c,
+              s
             );
             if (u.actualDPI < 150) {
               if (!await this.showConfirmation(
                 "Low resolution detected",
-                `This image is ${u.actualDPI} DPI at print size. Print may appear blurry. Recommended: ${a} DPI.`,
+                `This image is ${u.actualDPI} DPI at print size. Print may appear blurry. Recommended: ${s} DPI.`,
                 "Cancel",
                 "Use Anyway"
               )) return;
-            } else u.actualDPI < a && (this.showToast(
-              `Image resolution is ${u.actualDPI} DPI (${a} recommended)`,
+            } else u.actualDPI < s && (this.showToast(
+              `Image resolution is ${u.actualDPI} DPI (${s} recommended)`,
               "warning"
             ), this.stateManager.update({
               warnings: [
@@ -1795,8 +1927,8 @@ class he extends HTMLElement {
           }
         }
         if (this.contentManager.setImageContent(e, t, i), this.saveContentState(), this.storageUsage) {
-          const a = Math.round(t.length * 0.75);
-          this.storageUsage.storageUsed += a, this.storageUsage.usagePercent = this.storageUsage.storageQuota > 0 ? Math.round(this.storageUsage.storageUsed / this.storageUsage.storageQuota * 100) : 0;
+          const s = Math.round(t.length * 0.75);
+          this.storageUsage.storageUsed += s, this.storageUsage.usagePercent = this.storageUsage.storageQuota > 0 ? Math.round(this.storageUsage.storageUsed / this.storageUsage.storageQuota * 100) : 0;
         }
       })
     ), this.subscriptions.push(
@@ -1860,8 +1992,8 @@ class he extends HTMLElement {
     this.canvas.width = t * n, this.canvas.height = i * n, this.canvas.style.width = `${t}px`, this.canvas.style.height = `${i}px`, this.engine && (this.engine.fitToView(), this.stateManager.update({ zoom: this.engine.getZoom(), pan: this.engine.getPan() }), this.zoomToolbar.setZoom(this.engine.getZoom()));
   }
   handleLayoutResize(e) {
-    const t = e.width < le;
-    t !== this.isMobileLayout && (this.isMobileLayout = t, this.container.classList.toggle("layout-desktop", !t), this.container.classList.toggle("layout-mobile", t), this.inputPanel.setMobile(t));
+    const t = e.width < _;
+    this.container.classList.toggle("layout-desktop", !t), this.container.classList.toggle("layout-mobile", t), t !== this.isMobileLayout && (this.isMobileLayout = t, this.inputPanel.setMobile(t));
   }
   // ─── State Management ───
   async refreshStorageUsage() {
@@ -1877,7 +2009,7 @@ class he extends HTMLElement {
     this.stateManager.setState({
       contents: this.contentManager.toJSON(),
       isDirty: !0
-    }), this.engine.checkSafeAreaViolations(), this.emitChange();
+    }), this.zoomToolbar?.showSaveButton(!0), this.engine.checkSafeAreaViolations(), this.emitChange();
   }
   syncEngineContents() {
     this.engine?.setContents(this.contentManager.getContents());
@@ -1888,7 +2020,7 @@ class he extends HTMLElement {
   }
   // ─── Keyboard ───
   setupKeyboardShortcuts() {
-    const e = ae();
+    const e = J();
     this.keyboard.register({
       key: "z",
       [e]: !0,
@@ -1905,32 +2037,32 @@ class he extends HTMLElement {
   }
   // ─── Toast & Modal ───
   showToast(e, t = "info") {
-    const i = c("div", { class: `editor-toast editor-toast-${t}` }, e);
+    const i = h("div", { class: `editor-toast editor-toast-${t}` }, e);
     this.shadow.appendChild(i), setTimeout(() => i.remove(), 4e3);
   }
   showConfirmation(e, t, i = "Cancel", n = "Continue") {
-    return new Promise((r) => {
-      const s = c("div", { class: "editor-modal-overlay" }), a = c("div", { class: "editor-modal" });
-      a.appendChild(c("div", { class: "editor-modal-title" }, e)), a.appendChild(c("div", { class: "editor-modal-body" }, t));
-      const o = c("div", { class: "editor-modal-actions" }), d = c("button", { class: "editor-modal-btn" }, i);
+    return new Promise((a) => {
+      const o = h("div", { class: "editor-modal-overlay" }), s = h("div", { class: "editor-modal" });
+      s.appendChild(h("div", { class: "editor-modal-title" }, e)), s.appendChild(h("div", { class: "editor-modal-body" }, t));
+      const r = h("div", { class: "editor-modal-actions" }), d = h("button", { class: "editor-modal-btn" }, i);
       d.addEventListener("click", () => {
-        s.remove(), r(!1);
+        o.remove(), a(!1);
       });
-      const l = c("button", { class: "editor-modal-btn editor-modal-btn-primary" }, n);
+      const l = h("button", { class: "editor-modal-btn editor-modal-btn-primary" }, n);
       l.addEventListener("click", () => {
-        s.remove(), r(!0);
-      }), o.appendChild(d), o.appendChild(l), a.appendChild(o), s.appendChild(a), s.addEventListener("click", (h) => {
-        h.target === s && (s.remove(), r(!1));
-      }), this.shadow.appendChild(s);
+        o.remove(), a(!0);
+      }), r.appendChild(d), r.appendChild(l), s.appendChild(r), o.appendChild(s), o.addEventListener("click", (c) => {
+        c.target === o && (o.remove(), a(!1));
+      }), this.shadow.appendChild(o);
     });
   }
   // ─── Error / Cleanup ───
   showError(e, t) {
     this.shadow.innerHTML = "";
     const i = document.createElement("style");
-    i.textContent = F, this.shadow.appendChild(i);
-    const n = c("div", { class: "error-container" });
-    n.appendChild(c("div", { class: "error-title" }, e)), n.appendChild(c("div", { class: "error-message" }, t?.message ?? "")), this.shadow.appendChild(n), this.dispatchEvent(
+    i.textContent = z, this.shadow.appendChild(i);
+    const n = h("div", { class: "error-container" });
+    n.appendChild(h("div", { class: "error-title" }, e)), n.appendChild(h("div", { class: "error-message" }, t?.message ?? "")), this.shadow.appendChild(n), this.dispatchEvent(
       new CustomEvent("error", {
         detail: { message: e, error: t },
         bubbles: !0,
@@ -1941,32 +2073,36 @@ class he extends HTMLElement {
   cleanup() {
     for (const e of this.subscriptions)
       e();
-    this.subscriptions = [], this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.engine?.destroy(), this.interaction?.destroy(), this.keyboard?.destroy(), this.isReady = !1, this.currentTemplate = null;
+    this.subscriptions = [], this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.engine?.destroy(), this.interaction?.destroy(), this.keyboard?.destroy(), this.isReady = !1, this.currentTemplate = null, this.productViews = [], this.activeViewName = null, this.perViewContents.clear();
   }
 }
-customElements.get("customizer-editor") || customElements.define("customizer-editor", he);
-function ce(b, e) {
-  const t = typeof b == "string" ? document.querySelector(b) : b;
+customElements.get("customizer-editor") || customElements.define("customizer-editor", ee);
+function te(f, e) {
+  const t = typeof f == "string" ? document.querySelector(f) : f;
   if (!t)
     throw new Error(
-      `Container not found: ${typeof b == "string" ? b : "provided element is null"}`
+      `Container not found: ${typeof f == "string" ? f : "provided element is null"}`
     );
+  if (!e.templateId && !e.productId)
+    throw new Error("Either templateId or productId must be provided");
+  if (e.templateId && e.productId)
+    throw new Error("Only one of templateId or productId should be provided, not both");
   const i = document.createElement("customizer-editor");
-  i.setAttribute("template-id", e.templateId), e.theme && i.setAttribute("theme", e.theme), e.mode && i.setAttribute("mode", e.mode), e.className && i.classList.add(e.className), i.style.width = "100%", i.style.height = "100%";
-  const n = [], r = (a, o) => {
-    i.addEventListener(a, o), n.push({ event: a, handler: o });
+  e.productId ? i.setAttribute("product-id", e.productId) : i.setAttribute("template-id", e.templateId), e.theme && i.setAttribute("theme", e.theme), e.mode && i.setAttribute("mode", e.mode), e.className && i.classList.add(e.className), i.style.width = "100%", i.style.height = "100%";
+  const n = [], a = (s, r) => {
+    i.addEventListener(s, r), n.push({ event: s, handler: r });
   };
   t.innerHTML = "", t.appendChild(i);
-  const s = {
+  const o = {
     getDesign() {
       if (typeof i.getDesign != "function")
         throw new Error("Editor not ready: getDesign method not available");
       return i.getDesign();
     },
-    setDesign(a) {
+    setDesign(s) {
       if (typeof i.setDesign != "function")
         throw new Error("Editor not ready: setDesign method not available");
-      i.setDesign(a);
+      i.setDesign(s);
     },
     undo() {
       if (typeof i.undo != "function")
@@ -1985,49 +2121,49 @@ function ce(b, e) {
       return typeof i.canRedo != "function" ? !1 : i.canRedo();
     },
     async finalize() {
-      const a = this.getDesign(), o = e.apiUrl || "https://api.varianta.io";
+      const s = this.getDesign(), r = e.apiUrl || "https://api.varianta.io";
       try {
-        const d = await fetch(`${o}/public/finalize`, {
+        const d = await fetch(`${r}/public/finalize`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json"
           },
           body: JSON.stringify({
-            templateId: e.templateId,
-            designJson: a
+            templateId: s.templateId || e.templateId,
+            designJson: s
           })
         });
         if (!d.ok) {
-          const f = await d.json().catch(() => ({
+          const m = await d.json().catch(() => ({
             message: "Finalization failed"
           }));
-          throw new Error(f.message || "Finalization failed");
+          throw new Error(m.message || "Finalization failed");
         }
         const l = await d.json();
-        let h = {
+        let c = {
           designId: l.designId,
           status: l.status,
           proofUrl: l.proofUrl ?? null,
           errorMessage: l.errorMessage ?? null
         };
-        const u = 1500, g = 40;
-        let m = 0;
-        for (; h.status === "processing" && m < g; ) {
-          await new Promise((v) => setTimeout(v, u)), m++;
-          const f = await fetch(
-            `${o}/public/designs/${h.designId}/status`
+        const u = 1500, p = 40;
+        let g = 0;
+        for (; c.status === "processing" && g < p; ) {
+          await new Promise((b) => setTimeout(b, u)), g++;
+          const m = await fetch(
+            `${r}/public/designs/${c.designId}/status`
           );
-          if (!f.ok)
+          if (!m.ok)
             throw new Error("Failed to check design status");
-          const y = await f.json();
-          h = {
-            designId: y.designId,
-            status: y.status,
-            proofUrl: y.proofUrl ?? null,
-            errorMessage: y.errorMessage ?? null
+          const v = await m.json();
+          c = {
+            designId: v.designId,
+            status: v.status,
+            proofUrl: v.proofUrl ?? null,
+            errorMessage: v.errorMessage ?? null
           };
         }
-        return h.status === "processing" && (h = { ...h, status: "failed", errorMessage: "Render timed out" }), e.onFinalize && e.onFinalize(h), h;
+        return c.status === "processing" && (c = { ...c, status: "failed", errorMessage: "Render timed out" }), e.onFinalize && e.onFinalize(c), c;
       } catch (d) {
         const l = {
           code: "FINALIZE_ERROR",
@@ -2037,341 +2173,82 @@ function ce(b, e) {
         throw e.onError && e.onError(l), d;
       }
     },
-    addTextLayer(a) {
+    addTextLayer(s) {
       if (typeof i.addTextLayer != "function")
         throw new Error("Editor not ready: addTextLayer method not available");
-      i.addTextLayer(a);
+      i.addTextLayer(s);
     },
-    async addImageLayer(a) {
+    async addImageLayer(s) {
       if (typeof i.addImageLayer != "function")
         throw new Error("Editor not ready: addImageLayer method not available");
-      return i.addImageLayer(a);
+      return i.addImageLayer(s);
     },
-    removeLayer(a) {
+    removeLayer(s) {
       if (typeof i.removeLayer != "function")
         throw new Error("Editor not ready: removeLayer method not available");
-      i.removeLayer(a);
+      i.removeLayer(s);
     },
-    selectLayer(a) {
+    selectLayer(s) {
       if (typeof i.selectLayer != "function")
         throw new Error("Editor not ready: selectLayer method not available");
-      i.selectLayer(a);
+      i.selectLayer(s);
     },
     getSelectedLayerId() {
       return typeof i.getSelectedLayerId != "function" ? null : i.getSelectedLayerId();
     },
-    setTheme(a) {
-      i.setAttribute("theme", a);
+    getActiveView() {
+      return typeof i.getActiveView != "function" ? null : i.getActiveView();
+    },
+    getViews() {
+      return typeof i.getViews != "function" ? [] : i.getViews();
+    },
+    setActiveView(s) {
+      if (typeof i.setActiveView != "function")
+        throw new Error("Editor not ready: setActiveView method not available");
+      i.setActiveView(s);
     },
-    setMode(a) {
-      i.setAttribute("mode", a);
+    setTheme(s) {
+      i.setAttribute("theme", s);
+    },
+    setMode(s) {
+      i.setAttribute("mode", s);
     },
     destroy() {
-      n.forEach(({ event: a, handler: o }) => {
-        i.removeEventListener(a, o);
+      n.forEach(({ event: s, handler: r }) => {
+        i.removeEventListener(s, r);
       }), i.parentNode && i.parentNode.removeChild(i);
     },
     getElement() {
       return i;
     }
   };
-  return e.onReady && r("ready", (() => {
-    e.onReady?.(s);
-  })), e.onChange && r("change", ((a) => {
-    const o = a.detail.design;
-    e.onChange?.(o);
-  })), e.onLayerSelect && r("layer:select", ((a) => {
-    e.onLayerSelect?.(a.detail.layerId);
-  })), e.onLayerAdd && r("layer:add", ((a) => {
-    e.onLayerAdd?.(a.detail.layerId);
-  })), e.onLayerRemove && r("layer:remove", ((a) => {
-    e.onLayerRemove?.(a.detail.layerId);
-  })), e.onLayerUpdate && r("layer:update", ((a) => {
-    e.onLayerUpdate?.(a.detail.layerId);
-  })), e.onError && r("error", ((a) => {
-    const o = a.detail.error;
-    e.onError?.(o);
+  return e.onReady && a("ready", (() => {
+    e.onReady?.(o);
+  })), e.onChange && a("change", ((s) => {
+    const r = s.detail.design;
+    e.onChange?.(r);
+  })), e.onLayerSelect && a("layer:select", ((s) => {
+    e.onLayerSelect?.(s.detail.layerId);
+  })), e.onLayerAdd && a("layer:add", ((s) => {
+    e.onLayerAdd?.(s.detail.layerId);
+  })), e.onLayerRemove && a("layer:remove", ((s) => {
+    e.onLayerRemove?.(s.detail.layerId);
+  })), e.onLayerUpdate && a("layer:update", ((s) => {
+    e.onLayerUpdate?.(s.detail.layerId);
+  })), e.onError && a("error", ((s) => {
+    const r = s.detail.error;
+    e.onError?.(r);
+  })), e.onViewChange && a("view-change", ((s) => {
+    e.onViewChange?.(s.detail.viewName);
   })), e.initialDesign && i.addEventListener(
     "ready",
     () => {
       e.initialDesign && i.setDesign(e.initialDesign);
     },
     { once: !0 }
-  ), e.debug && (console.log("[Customizer SDK] Initialized with options:", e), console.log("[Customizer SDK] Instance:", s)), s;
-}
-const ue = Z(
-  (b, e) => {
-    const {
-      templateId: t,
-      apiUrl: i,
-      theme: n = "light",
-      mode: r = "edit",
-      debug: s = !1,
-      className: a,
-      style: o,
-      initialDesign: d,
-      onReady: l,
-      onChange: h,
-      onLayerSelect: u,
-      onLayerAdd: g,
-      onLayerRemove: m,
-      onLayerUpdate: f,
-      onError: y,
-      onFinalize: v
-    } = b, w = k(null), p = k(null), C = k({
-      onReady: l,
-      onChange: h,
-      onLayerSelect: u,
-      onLayerAdd: g,
-      onLayerRemove: m,
-      onLayerUpdate: f,
-      onError: y,
-      onFinalize: v
-    });
-    return L(() => {
-      C.current = {
-        onReady: l,
-        onChange: h,
-        onLayerSelect: u,
-        onLayerAdd: g,
-        onLayerRemove: m,
-        onLayerUpdate: f,
-        onError: y,
-        onFinalize: v
-      };
-    }, [l, h, u, g, m, f, y, v]), L(() => {
-      if (!w.current) return;
-      const I = {
-        templateId: t,
-        apiUrl: i,
-        theme: n,
-        mode: r,
-        debug: s,
-        initialDesign: d,
-        // Use callback refs to always get latest callbacks
-        onReady: () => C.current.onReady?.(),
-        onChange: (x) => C.current.onChange?.(x),
-        onLayerSelect: (x) => C.current.onLayerSelect?.(x),
-        onLayerAdd: (x) => C.current.onLayerAdd?.(x),
-        onLayerRemove: (x) => C.current.onLayerRemove?.(x),
-        onLayerUpdate: (x) => C.current.onLayerUpdate?.(x),
-        onError: (x) => C.current.onError?.(x),
-        onFinalize: (x) => C.current.onFinalize?.(x)
-      };
-      try {
-        const x = ce(w.current, I);
-        p.current = x;
-      } catch (x) {
-        console.error("[Customizer React] Failed to initialize:", x), C.current.onError?.({
-          code: "INIT_ERROR",
-          message: x instanceof Error ? x.message : "Unknown error",
-          details: x
-        });
-      }
-      return () => {
-        p.current && (p.current.destroy(), p.current = null);
-      };
-    }, [t, i, s, d]), L(() => {
-      p.current && p.current.setTheme(n);
-    }, [n]), L(() => {
-      p.current && p.current.setMode(r);
-    }, [r]), q(
-      e,
-      () => ({
-        getDesign: () => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          return p.current.getDesign();
-        },
-        setDesign: (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.setDesign(I);
-        },
-        undo: () => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.undo();
-        },
-        redo: () => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.redo();
-        },
-        canUndo: () => p.current ? p.current.canUndo() : !1,
-        canRedo: () => p.current ? p.current.canRedo() : !1,
-        finalize: async () => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          return p.current.finalize();
-        },
-        addTextLayer: (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.addTextLayer(I);
-        },
-        addImageLayer: async (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          return p.current.addImageLayer(I);
-        },
-        removeLayer: (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.removeLayer(I);
-        },
-        selectLayer: (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.selectLayer(I);
-        },
-        getSelectedLayerId: () => p.current ? p.current.getSelectedLayerId() : null,
-        setTheme: (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.setTheme(I);
-        },
-        setMode: (I) => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          p.current.setMode(I);
-        },
-        destroy: () => {
-          p.current && (p.current.destroy(), p.current = null);
-        },
-        getElement: () => {
-          if (!p.current)
-            throw new Error("Editor not initialized");
-          return p.current.getElement();
-        }
-      }),
-      []
-      // Empty deps is OK - we always read from instanceRef.current
-    ), /* @__PURE__ */ $(
-      "div",
-      {
-        ref: w,
-        className: a,
-        style: {
-          width: "100%",
-          height: "100%",
-          ...o
-        }
-      }
-    );
-  }
-);
-ue.displayName = "Customizer";
-function me(b = {}) {
-  const {
-    autoSave: e = !1,
-    autoSaveKey: t = "customizer-design",
-    autoSaveDebounce: i = 1e3
-  } = b, n = k(null), [r, s] = S(null), [a, o] = S(!1), [d, l] = S(!1), [h, u] = S(null), [g, m] = S(!1), [f, y] = S(
-    null
-  ), v = k(void 0);
-  L(() => {
-    if (!(!e || !r))
-      return v.current && clearTimeout(v.current), v.current = setTimeout(() => {
-        try {
-          localStorage.setItem(t, JSON.stringify(r));
-        } catch (E) {
-          console.error("[useCustomizer] Auto-save failed:", E);
-        }
-      }, i), () => {
-        v.current && clearTimeout(v.current);
-      };
-  }, [r, e, t, i]);
-  const w = M(() => {
-    if (!n.current) return null;
-    try {
-      return n.current.getDesign();
-    } catch (E) {
-      return console.error("[useCustomizer] getDesign failed:", E), null;
-    }
-  }, []), p = M((E) => {
-    if (n.current)
-      try {
-        n.current.setDesign(E), s(E);
-      } catch (z) {
-        console.error("[useCustomizer] setDesign failed:", z);
-      }
-  }, []), C = M(() => {
-    if (n.current)
-      try {
-        n.current.undo(), o(n.current.canUndo()), l(n.current.canRedo());
-      } catch (E) {
-        console.error("[useCustomizer] undo failed:", E);
-      }
-  }, []), I = M(() => {
-    if (n.current)
-      try {
-        n.current.redo(), o(n.current.canUndo()), l(n.current.canRedo());
-      } catch (E) {
-        console.error("[useCustomizer] redo failed:", E);
-      }
-  }, []), x = M(async () => {
-    if (!n.current || g) return null;
-    m(!0);
-    try {
-      const E = await n.current.finalize();
-      return y(E), E;
-    } catch (E) {
-      return console.error("[useCustomizer] finalize failed:", E), null;
-    } finally {
-      m(!1);
-    }
-  }, [g]), R = M((E) => {
-    if (n.current)
-      try {
-        n.current.addTextLayer(E);
-      } catch (z) {
-        console.error("[useCustomizer] addTextLayer failed:", z);
-      }
-  }, []), D = M(async (E) => {
-    if (n.current)
-      try {
-        await n.current.addImageLayer(E);
-      } catch (z) {
-        console.error("[useCustomizer] addImageLayer failed:", z);
-      }
-  }, []), U = M((E) => {
-    if (n.current)
-      try {
-        n.current.removeLayer(E);
-      } catch (z) {
-        console.error("[useCustomizer] removeLayer failed:", z);
-      }
-  }, []), N = M((E) => {
-    if (n.current)
-      try {
-        n.current.selectLayer(E), u(E);
-      } catch (z) {
-        console.error("[useCustomizer] selectLayer failed:", z);
-      }
-  }, []);
-  return {
-    customizerRef: n,
-    design: r,
-    canUndo: a,
-    canRedo: d,
-    selectedLayerId: h,
-    isFinalizing: g,
-    finalizeResult: f,
-    getDesign: w,
-    setDesign: p,
-    undo: C,
-    redo: I,
-    finalize: x,
-    addTextLayer: R,
-    addImageLayer: D,
-    removeLayer: U,
-    selectLayer: N
-  };
+  ), e.debug && (console.log("[Customizer SDK] Initialized with options:", e), console.log("[Customizer SDK] Instance:", o)), o;
 }
 export {
-  ue as Customizer,
-  ce as initCustomizer,
-  me as useCustomizer
+  te as initCustomizer
 };
 //# sourceMappingURL=index.esm.js.map