@varianta/sdk 0.1.1 → 0.1.3

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { jsx as Z } from "react/jsx-runtime";
-import { forwardRef as $, useRef as k, useEffect as L, useImperativeHandle as q, useState as S, useCallback as M } from "react";
+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 {
   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 = () => {
@@ -198,24 +198,24 @@ class B {
       return null;
     const { location: n } = t, { x: r, y: s, width: a, height: o } = 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, b = s + o / 2 + d.y;
+      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;
       return {
         x: m - u / 2,
-        y: b - g / 2,
+        y: f - g / 2,
         width: u,
         height: g,
         rotation: h,
         centerX: m,
-        centerY: b
+        centerY: f
       };
     } 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 b, y;
-      g > m ? (b = a, y = a / g) : (y = o, b = o * g);
-      const v = b * h, w = y * h, p = r + a / 2 + l.x, C = s + o / 2 + l.y;
+      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;
       return {
         x: p - v / 2,
         y: C - w / 2,
@@ -260,8 +260,8 @@ 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, b = u * h + g * l;
-    return m >= -s / 2 && m <= s / 2 && b >= -a / 2 && b <= a / 2;
+    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;
   }
   /**
    * Get handle positions for the selected content
@@ -276,22 +276,22 @@ 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), b = (v, w) => ({
+    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 = [];
     if (i.type === "image" && t.imageOptions?.allowScaling || i.type === "text" && t.textOptions?.allowScaling) {
-      const v = a / 2, w = o / 2, p = b(-v, -w);
+      const v = a / 2, w = o / 2, p = f(-v, -w);
       y.push({ type: "nw", ...p, radius: l });
-      const C = b(v, -w);
+      const C = f(v, -w);
       y.push({ type: "ne", ...C, radius: l });
-      const I = b(v, w);
+      const I = f(v, w);
       y.push({ type: "se", ...I, radius: l });
-      const x = b(-v, w);
+      const x = f(-v, w);
       y.push({ type: "sw", ...x, radius: l });
     }
     if (i.type === "image" && t.imageOptions?.allowRotation || i.type === "text" && t.textOptions?.allowRotation) {
-      const v = b(0, -o / 2 - h);
+      const v = f(0, -o / 2 - h);
       y.push({ type: "rotate", ...v, radius: l });
     }
     return y;
@@ -353,7 +353,7 @@ class B {
       const h = this.getContentBounds(l.id);
       if (!h)
         continue;
-      const { centerX: u, centerY: g, width: m, height: b, rotation: y } = h, v = y * Math.PI / 180, w = Math.abs(Math.cos(v)), p = Math.abs(Math.sin(v)), C = m * w + b * p, I = m * p + b * w, x = u - C / 2, R = g - I / 2, D = u + C / 2, U = g + I / 2;
+      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);
     }
     return this.safeAreaViolations = new Set(e), this.requestRender(), e;
@@ -447,8 +447,8 @@ class B {
       const l = this.areas.find((y) => y.id === e);
       if (!l)
         return;
-      const { ctx: h } = this, { x: u, y: g, width: m, height: b } = l.location;
-      h.save(), h.strokeStyle = "#3b82f6", h.lineWidth = 2 / this.zoom, h.setLineDash([]), h.strokeRect(u, g, m, b), h.restore();
+      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();
       return;
     }
     const { ctx: i } = this, { centerX: n, centerY: r, width: s, height: a, rotation: o } = t;
@@ -539,9 +539,9 @@ class B {
     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 b, y;
-    g > m ? (b = o, y = o / g) : (y = d, b = d * g);
-    const v = b * h, w = y * h, p = s + o / 2 + l.x, C = a + d / 2 + l.y;
+    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();
   }
   /**
@@ -569,29 +569,29 @@ class B {
           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 b;
+        let f;
         switch (d.align) {
           case "left":
-            e.textAlign = "left", b = -a / 2 + 10;
+            e.textAlign = "left", f = -a / 2 + 10;
             break;
           case "right":
-            e.textAlign = "right", b = a / 2 - 10;
+            e.textAlign = "right", f = a / 2 - 10;
             break;
           case "center":
           default:
-            e.textAlign = "center", b = 0;
+            e.textAlign = "center", f = 0;
             break;
         }
-        e.fillText(d.text, b, 0), e.restore();
+        e.fillText(d.text, f, 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, b = a / o;
+        const m = l.naturalWidth / l.naturalHeight, f = a / o;
         let y, v;
-        m > b ? (y = a, v = a / m) : (v = o, y = o * m);
+        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();
       }
@@ -604,8 +604,8 @@ class B {
     this.stop(), this.bgImageElement = null, this.loadedImages.clear(), this.loadingImages.clear(), this.eventListeners.clear();
   }
 }
-function P(f) {
-  const e = f.textOptions;
+function P(b) {
+  const e = b.textOptions;
   return {
     type: "text",
     text: e?.defaultText || "",
@@ -615,11 +615,11 @@ function P(f) {
     align: e?.defaultAlign || "center"
   };
 }
-function A(f) {
-  return f.contentType === "text" || f.contentType === "both";
+function A(b) {
+  return b.contentType === "text" || b.contentType === "both";
 }
-function O(f) {
-  return f.contentType === "image" || f.contentType === "both";
+function O(b) {
+  return b.contentType === "image" || b.contentType === "both";
 }
 const Y = 50;
 class j {
@@ -1157,23 +1157,23 @@ class J {
     }
   }
 }
-function c(f, e, ...t) {
-  const i = document.createElement(f);
+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));
   }), t.forEach((n) => {
     typeof n == "string" ? i.appendChild(document.createTextNode(n)) : i.appendChild(n);
   }), i;
 }
-function V(f, e) {
+function V(b, e) {
   let t = null, i = null;
   const n = (...r) => {
     i = r, t && clearTimeout(t), t = setTimeout(() => {
-      i && f(...i), t = null, i = null;
+      i && b(...i), t = null, i = null;
     }, e);
   };
   return n.flush = () => {
-    t && (clearTimeout(t), t = null), i && (f(...i), i = null);
+    t && (clearTimeout(t), t = null), i && (b(...i), i = null);
   }, n.cancel = () => {
     t && (clearTimeout(t), t = null), i = null;
   }, n;
@@ -1510,16 +1510,16 @@ function re() {
 function ae() {
   return re() ? "meta" : "ctrl";
 }
-function se(f, e, t, i) {
-  const n = f / t, r = e / i;
+function se(b, e, t, i) {
+  const n = b / t, r = e / i;
   return Math.min(n, r);
 }
-function oe(f, e, t = 8, i = 10, n = 300) {
-  const r = se(f, e, t, i), s = r >= n;
+function oe(b, e, t = 8, i = 10, n = 300) {
+  const r = se(b, e, t, i), s = r >= n;
   return {
     actualDPI: Math.round(r),
     targetDPI: n,
-    width: f,
+    width: b,
     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.`
@@ -1945,11 +1945,11 @@ class he extends HTMLElement {
   }
 }
 customElements.get("customizer-editor") || customElements.define("customizer-editor", he);
-function ce(f, e) {
-  const t = typeof f == "string" ? document.querySelector(f) : f;
+function ce(b, e) {
+  const t = typeof b == "string" ? document.querySelector(b) : b;
   if (!t)
     throw new Error(
-      `Container not found: ${typeof f == "string" ? f : "provided element is null"}`
+      `Container not found: ${typeof b == "string" ? b : "provided element is null"}`
     );
   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%";
@@ -1994,17 +1994,40 @@ function ce(f, e) {
           },
           body: JSON.stringify({
             templateId: e.templateId,
-            design: a
+            designJson: a
           })
         });
         if (!d.ok) {
-          const h = await d.json().catch(() => ({
+          const f = await d.json().catch(() => ({
             message: "Finalization failed"
           }));
-          throw new Error(h.message || "Finalization failed");
+          throw new Error(f.message || "Finalization failed");
         }
         const l = await d.json();
-        return e.onFinalize && e.onFinalize(l), l;
+        let h = {
+          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`
+          );
+          if (!f.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
+          };
+        }
+        return h.status === "processing" && (h = { ...h, status: "failed", errorMessage: "Render timed out" }), e.onFinalize && e.onFinalize(h), h;
       } catch (d) {
         const l = {
           code: "FINALIZE_ERROR",
@@ -2076,8 +2099,8 @@ function ce(f, e) {
     { once: !0 }
   ), e.debug && (console.log("[Customizer SDK] Initialized with options:", e), console.log("[Customizer SDK] Instance:", s)), s;
 }
-const ue = $(
-  (f, e) => {
+const ue = Z(
+  (b, e) => {
     const {
       templateId: t,
       apiUrl: i,
@@ -2092,16 +2115,16 @@ const ue = $(
       onLayerSelect: u,
       onLayerAdd: g,
       onLayerRemove: m,
-      onLayerUpdate: b,
+      onLayerUpdate: f,
       onError: y,
       onFinalize: v
-    } = f, w = k(null), p = k(null), C = k({
+    } = b, w = k(null), p = k(null), C = k({
       onReady: l,
       onChange: h,
       onLayerSelect: u,
       onLayerAdd: g,
       onLayerRemove: m,
-      onLayerUpdate: b,
+      onLayerUpdate: f,
       onError: y,
       onFinalize: v
     });
@@ -2112,11 +2135,11 @@ const ue = $(
         onLayerSelect: u,
         onLayerAdd: g,
         onLayerRemove: m,
-        onLayerUpdate: b,
+        onLayerUpdate: f,
         onError: y,
         onFinalize: v
       };
-    }, [l, h, u, g, m, b, y, v]), L(() => {
+    }, [l, h, u, g, m, f, y, v]), L(() => {
       if (!w.current) return;
       const I = {
         templateId: t,
@@ -2224,7 +2247,7 @@ const ue = $(
       }),
       []
       // Empty deps is OK - we always read from instanceRef.current
-    ), /* @__PURE__ */ Z(
+    ), /* @__PURE__ */ $(
       "div",
       {
         ref: w,
@@ -2239,12 +2262,12 @@ const ue = $(
   }
 );
 ue.displayName = "Customizer";
-function me(f = {}) {
+function me(b = {}) {
   const {
     autoSave: e = !1,
     autoSaveKey: t = "customizer-design",
     autoSaveDebounce: i = 1e3
-  } = f, n = k(null), [r, s] = S(null), [a, o] = S(!1), [d, l] = S(!1), [h, u] = S(null), [g, m] = S(!1), [b, y] = S(
+  } = 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(() => {
@@ -2334,7 +2357,7 @@ function me(f = {}) {
     canRedo: d,
     selectedLayerId: h,
     isFinalizing: g,
-    finalizeResult: b,
+    finalizeResult: f,
     getDesign: w,
     setDesign: p,
     undo: C,