@snowcone-app/canvas 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1138 @@
+import { A as ft, D as mt, r as ht, v as gt, u as pt, a as bt, S as vt, K as xt, C as Xe, e as wt } from "./compose-DQ1FZS3O.js";
+import { b as pr, c as br, E as vr, M as xr, P as wr, d as Er, f as yr, g as Ar } from "./compose-DQ1FZS3O.js";
+import { c as _, s as Et, I as Ke, p as yt, T as At } from "./HybridHistoryManager-BV6XV0nD.js";
+import { jsxs as de, jsx as C } from "react/jsx-runtime";
+import { Component as St, useRef as T, useState as q, useEffect as R, useCallback as B, forwardRef as je, useMemo as ye, useImperativeHandle as Rt } from "react";
+import { u as ue, T as Oe, E as It, a as Ae, b as Ge, c as kt } from "./ThemeContext-H0Z-MqqR.js";
+import { C as we, E as Ct } from "./ElementFactory-uJTXU-nP.js";
+import { d as Rr, m as Ir, s as kr, v as Cr } from "./CanvasStateV1-ejb4d_LM.js";
+const Mt = _("ErrorBoundary");
+class Tt extends St {
+  constructor(e) {
+    super(e), this.resetError = () => {
+      this.setState({
+        hasError: !1,
+        error: null
+      });
+    }, this.state = {
+      hasError: !1,
+      error: null
+    };
+  }
+  static getDerivedStateFromError(e) {
+    return {
+      hasError: !0,
+      error: e
+    };
+  }
+  componentDidCatch(e, r) {
+    if (Mt.error("Caught error:", e, r), this.props.onError && this.props.onError(e, r), this.props.onCanvasError) {
+      const a = {
+        category: "unknown",
+        message: e.message,
+        originalError: e,
+        recoverable: !1
+      };
+      this.props.onCanvasError(a);
+    }
+  }
+  render() {
+    return this.state.hasError && this.state.error ? this.props.renderError ? this.props.renderError(this.state.error, this.resetError) : this.props.fallback ? typeof this.props.fallback == "function" ? this.props.fallback(this.state.error, this.resetError) : this.props.fallback : /* @__PURE__ */ de(
+      "div",
+      {
+        style: {
+          padding: "24px",
+          border: "2px solid var(--danger)",
+          borderRadius: "8px",
+          backgroundColor: "color-mix(in oklch, var(--danger) 10%, var(--background))",
+          color: "var(--danger)",
+          fontFamily: "system-ui, sans-serif"
+        },
+        children: [
+          /* @__PURE__ */ C("h2", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 }, children: "Something went wrong" }),
+          /* @__PURE__ */ C(
+            "pre",
+            {
+              style: {
+                margin: "0 0 16px 0",
+                padding: "12px",
+                backgroundColor: "color-mix(in oklch, var(--danger) 15%, var(--background))",
+                borderRadius: "4px",
+                fontSize: "14px",
+                overflow: "auto",
+                maxHeight: "200px"
+              },
+              children: this.state.error.message
+            }
+          ),
+          /* @__PURE__ */ C(
+            "button",
+            {
+              onClick: this.resetError,
+              style: {
+                padding: "8px 16px",
+                backgroundColor: "var(--danger)",
+                color: "var(--danger-foreground)",
+                border: "none",
+                borderRadius: "4px",
+                fontSize: "14px",
+                fontWeight: 500,
+                cursor: "pointer"
+              },
+              children: "Try again"
+            }
+          )
+        ]
+      }
+    ) : this.props.children;
+  }
+}
+const Dt = _("useAutoExport");
+function Ft(t) {
+  const { config: e, historyManager: r, artboards: a, elements: n, onExport: c, onExportScheduled: o, isCanvasReady: i = !1 } = t, l = T(null), p = T(!1), A = T({
+    totalExports: 0,
+    skippedExports: 0,
+    lastExportTime: null,
+    avgExportInterval: 0
+  }), [P, I] = q(A.current), E = T(c);
+  E.current = c, R(() => {
+    const m = new ft({
+      ...mt,
+      ...e
+    });
+    return m.onExport(async () => {
+      try {
+        await E.current(), A.current = m.getStats();
+      } catch (S) {
+        Dt.error("[useAutoExport] Export failed:", S);
+      }
+    }), l.current = m, () => {
+      m.destroy();
+    };
+  }, []), R(() => {
+    i && p.current && l.current && (p.current = !1, l.current.forceExport());
+  }, [i]), R(() => {
+    l.current && e && l.current.updateConfig(e);
+  }, [e == null ? void 0 : e.enabled, e == null ? void 0 : e.debounceMs, e == null ? void 0 : e.maxWaitMs]), R(() => {
+    l.current && o && l.current.onExportScheduled(o);
+  }, [o]), R(() => {
+    if (!r || !l.current)
+      return;
+    const m = r.onCommandExecuted(() => {
+      if (l.current) {
+        if (!i) {
+          p.current = !0;
+          return;
+        }
+        l.current.scheduleExport();
+      }
+    });
+    return () => {
+      m();
+    };
+  }, [r, i]), R(() => {
+    if (l.current) {
+      if (!i) {
+        p.current = !0;
+        return;
+      }
+      l.current.scheduleExport();
+    }
+  }, [n, a, i]), R(() => Et((S) => {
+    if (!l.current || !i) return;
+    n.some((W) => W.id === S) && l.current.scheduleExport();
+  }), [n, i]);
+  const M = B((m) => {
+    l.current && l.current.updateConfig(m);
+  }, []), w = B(async () => {
+    l.current && (await l.current.forceExport(), A.current = l.current.getStats(), I(A.current));
+  }, []), H = B(() => {
+    l.current && (l.current.resetStats(), A.current = l.current.getStats(), I(A.current));
+  }, []), y = B(() => {
+    l.current && l.current.resetChangeDetection();
+  }, []);
+  return {
+    stats: P,
+    updateConfig: M,
+    forceExport: w,
+    resetStats: H,
+    resetChangeDetection: y
+  };
+}
+const Qe = _("useContentReady");
+function Pt(t) {
+  var r;
+  const e = /* @__PURE__ */ new Set();
+  for (const a of t)
+    if ("fontFamily" in a && typeof a.fontFamily == "string" && a.fontFamily && e.add(a.fontFamily), "getRichText" in a && typeof a.getRichText == "function")
+      try {
+        const n = a.getRichText();
+        if (n != null && n.spans)
+          for (const c of n.spans)
+            (r = c.style) != null && r.fontFamily && e.add(c.style.fontFamily);
+      } catch {
+      }
+  return Array.from(e);
+}
+async function Ht(t) {
+  if (t.length === 0 || typeof document > "u" || !document.fonts) return;
+  const e = [];
+  for (const r of t) {
+    const a = `16px "${r}"`;
+    e.push(document.fonts.load(a));
+  }
+  await Promise.all(e), document.fonts.ready && await Promise.race([
+    document.fonts.ready,
+    new Promise((r) => setTimeout(r, 250))
+  ]), Qe.debug(`Awaited ${e.length} font(s)`);
+}
+function Lt() {
+  return new Promise((t) => requestAnimationFrame(() => t()));
+}
+function Wt(t) {
+  const { isCanvasReady: e, elements: r, hasInitialElements: a, initialElementsLoaded: n } = t, [c, o] = q(!1), i = T(!1);
+  return R(() => {
+    if (c || !e || a && !n || a && r.length === 0 || i.current) return;
+    i.current = !0;
+    let l = !1;
+    return (async () => {
+      try {
+        const p = Pt(r);
+        if (p.length > 0 && (await Ht(p), l) || (await Lt(), l)) return;
+        o(!0);
+      } catch (p) {
+        Qe.error("Error during content readiness check:", p), l || o(!0);
+      } finally {
+        i.current = !1;
+      }
+    })(), () => {
+      l = !0, i.current = !1;
+    };
+  }, [e, r, a, n, c]), c;
+}
+const Bt = {
+  // Vertical alignments (map to top/center/bottom center)
+  "far-top": "t",
+  top: "t",
+  center: "c",
+  bottom: "b",
+  "far-bottom": "b",
+  // Horizontal alignments (map to left/center/right middle)
+  "far-left": "l",
+  left: "l",
+  right: "r",
+  "far-right": "r",
+  // Direct 9-point values
+  tl: "tl",
+  t: "t",
+  tr: "tr",
+  l: "l",
+  c: "c",
+  r: "r",
+  bl: "bl",
+  b: "b",
+  br: "br"
+};
+function Nt(t) {
+  return t && Bt[t] || "c";
+}
+function Ut(t, e) {
+  const r = e.scaleMode || "cover", a = (r === "contain" ? e.marginTop : 0) || 0, n = (r === "contain" ? e.marginRight : 0) || 0, c = (r === "contain" ? e.marginBottom : 0) || 0, o = (r === "contain" ? e.marginLeft : 0) || 0, i = e.width - o - n, l = e.height - a - c, p = i / t.width, A = l / t.height, P = r === "contain" ? Math.min(p, A) : Math.max(p, A), I = e.scale || 1, E = P * I, M = t.width * E, w = t.height * E, H = e.align || "c";
+  let y = 0, m = 0;
+  const S = M - i, v = w - l;
+  switch (H) {
+    // Top row
+    case "tl":
+      y = 0, m = 0;
+      break;
+    case "t":
+      y = -S / 2, m = 0;
+      break;
+    case "tr":
+      y = -S, m = 0;
+      break;
+    // Middle row
+    case "l":
+      y = 0, m = -v / 2;
+      break;
+    case "c":
+    // Center (default)
+    default:
+      y = -S / 2, m = -v / 2;
+      break;
+    case "r":
+      y = -S, m = -v / 2;
+      break;
+    // Bottom row
+    case "bl":
+      y = 0, m = -v;
+      break;
+    case "b":
+      y = -S / 2, m = -v;
+      break;
+    case "br":
+      y = -S, m = -v;
+      break;
+  }
+  y += o, m += a;
+  const W = e.offsetX || 0, D = e.offsetY || 0, $ = S, ee = v;
+  return y += W * $, m += D * ee, y = Math.round(y), m = Math.round(m), {
+    // Final scale to apply to artwork
+    scale: E,
+    // Final artwork dimensions after scaling
+    width: Math.round(M),
+    height: Math.round(w),
+    // Position to draw artwork (relative to artboard origin)
+    x: y,
+    y: m,
+    // Debug info
+    debug: {
+      coverScale: P,
+      userScale: I,
+      overflow: { x: S, y: v },
+      alignment: H,
+      appliedOffset: { x: W * $, y: D * ee }
+    }
+  };
+}
+const zt = {
+  timeout: 3e4,
+  retries: 1,
+  retryDelay: 1e3,
+  validateUrl: !0
+};
+function Yt(t) {
+  try {
+    const e = new URL(t);
+    return ["http:", "https:", "data:", "blob:"].includes(e.protocol);
+  } catch {
+    return !1;
+  }
+}
+async function $t(t, e = {}) {
+  const r = { ...zt, ...e };
+  if (r.validateUrl && !Yt(t))
+    return {
+      success: !1,
+      error: new Error(`Invalid image URL: ${t}`)
+    };
+  let a;
+  for (let n = 0; n <= r.retries; n++)
+    try {
+      return await Xt(t, r.timeout);
+    } catch (c) {
+      a = c instanceof Error ? c : new Error(String(c)), n < r.retries && await Vt(r.retryDelay);
+    }
+  return {
+    success: !1,
+    error: a || new Error("Failed to load image after retries")
+  };
+}
+function Xt(t, e) {
+  return new Promise((r) => {
+    const a = new Image();
+    a.crossOrigin = "anonymous";
+    let n = null, c = !1;
+    const o = () => {
+      n && (clearTimeout(n), n = null);
+    }, i = () => {
+      if (c) return;
+      c = !0, o();
+      const p = a.naturalWidth || a.width, A = a.naturalHeight || a.height;
+      r({
+        success: !0,
+        element: a,
+        width: p,
+        height: A,
+        aspectRatio: A > 0 ? p / A : 1
+      });
+    }, l = (p) => {
+      c || (c = !0, o(), r({
+        success: !1,
+        error: new Error(p)
+      }));
+    };
+    a.onload = i, a.onerror = () => {
+      l(`Failed to load image: ${t}`);
+    }, n = setTimeout(() => {
+      l(`Image load timed out after ${e}ms: ${t}`);
+    }, e), a.src = t;
+  });
+}
+async function Ot(t, e, r = {}, a = {}) {
+  var I, E, M, w, H, y, m;
+  const n = await $t(t, a);
+  if (!n.success || !n.width || !n.height)
+    return {
+      success: !1,
+      error: n.error || new Error("Failed to get image dimensions")
+    };
+  const c = {
+    width: e.artboard.width,
+    height: e.artboard.height,
+    scale: e.scale,
+    align: Nt(e.alignment),
+    offsetX: e.offsetX,
+    offsetY: e.offsetY,
+    scaleMode: e.scaleMode,
+    marginTop: e.marginTop,
+    marginRight: e.marginRight,
+    marginBottom: e.marginBottom,
+    marginLeft: e.marginLeft
+  }, o = Ut(
+    { width: n.width, height: n.height },
+    c
+  ), i = e.artboard.x + o.x, l = e.artboard.y + o.y, p = i + o.width / 2, A = l + o.height / 2;
+  return {
+    success: !0,
+    element: new Ke({
+      ...r,
+      x: p,
+      y: A,
+      imageUrl: t,
+      imageAspectRatio: n.aspectRatio,
+      preserveDimensions: !0,
+      // Don't recalculate dimensions on image load
+      transformData: {
+        type: "image",
+        width: o.width,
+        height: o.height,
+        cropX: ((I = r.transformData) == null ? void 0 : I.cropX) ?? 0,
+        cropY: ((E = r.transformData) == null ? void 0 : E.cropY) ?? 0,
+        cropWidth: ((M = r.transformData) == null ? void 0 : M.cropWidth) ?? 1,
+        cropHeight: ((w = r.transformData) == null ? void 0 : w.cropHeight) ?? 1,
+        flipHorizontal: ((H = r.transformData) == null ? void 0 : H.flipHorizontal) ?? !1,
+        flipVertical: ((y = r.transformData) == null ? void 0 : y.flipVertical) ?? !1,
+        borderRadius: ((m = r.transformData) == null ? void 0 : m.borderRadius) ?? 0
+      }
+    }),
+    placement: {
+      artworkSize: { width: n.width, height: n.height },
+      finalSize: { width: o.width, height: o.height },
+      position: { x: p, y: A },
+      scale: o.scale
+    }
+  };
+}
+function Vt(t) {
+  return new Promise((e) => setTimeout(e, t));
+}
+const K = _("SnowconeCanvas");
+function Ee(t, e, r, a) {
+  if (a <= 0 || !isFinite(a))
+    return r;
+  const n = t * r, c = e * r;
+  if (Math.max(n, c) <= a)
+    return r;
+  const i = Math.max(t, e), l = a / i;
+  return Math.min(l, r);
+}
+const Je = je((t, e) => {
+  const {
+    exportConfig: r,
+    imageConfig: a,
+    layoutConfig: n,
+    kit: c,
+    artboards: o,
+    activeArtboard: i,
+    onArtboardChange: l,
+    initialElements: p,
+    onChange: A,
+    onSelectionChange: P,
+    autoExportInterval: I,
+    onExport: E,
+    onExportScheduled: M,
+    onExportStatus: w,
+    onExportReady: H,
+    onImageLoad: y,
+    onImageError: m,
+    onError: S,
+    onReady: v,
+    className: W,
+    style: D,
+    enableShortcuts: $,
+    overlay: ee
+  } = t, Se = I, J = t.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), j = t.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", fe = t.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, O = t.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, U = t.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, te = t.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", re = t.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, z = t.initialImage ?? (a == null ? void 0 : a.src), Re = t.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", Ie = t.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, ke = t.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", Ze = t.width ?? (n == null ? void 0 : n.width) ?? 1200, qe = t.height ?? (n == null ? void 0 : n.height) ?? 1200, Ce = t.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, Me = t.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, Te = t.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), De = t.maxHeight ?? (n == null ? void 0 : n.maxHeight), Fe = t.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, _e = t.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, Pe = t.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), He = t.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), Le = t.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), me = t.pieceGuides, We = t.pieceFocus, Be = $ ?? !0, ne = ye(() => ht(c ?? "pro-studio"), [c]);
+  R(() => {
+    if (yt.env.NODE_ENV === "development" && ne) {
+      const s = gt(ne);
+      s.valid || K.warn("Kit validation warnings:", s.errors), s.warnings.length > 0 && K.warn("Kit validation warnings:", s.warnings);
+    }
+  }, [ne]);
+  const ae = T(S);
+  ae.current = S;
+  const N = B((s) => {
+    var d;
+    K.error(`[${s.category}] ${s.message}`, s.originalError), (d = ae.current) == null || d.call(ae, s);
+  }, []);
+  R(() => (we.onRenderError = N, () => {
+    we.onRenderError === N && (we.onRenderError = null);
+  }), [N]);
+  const {
+    elements: V,
+    setElements: oe,
+    selectedId: Ne,
+    artboardManager: k,
+    refreshArtboards: et,
+    historyManager: tt,
+    isCanvasReady: he,
+    setCanvasReady: se
+  } = ue(), { createArtboard: rt, selectArtboard: nt, artboards: L } = pt(), { exportArtboard: G, exportAllArtboards: ie, exportArtboardAsBlob: Q, exportAllArtboardsAsBlobs: ce } = bt();
+  Rt(e, () => ({
+    exportArtboards: async (s = {}) => {
+      const d = s.format || j, h = s.scale || O, g = s.all ?? !1;
+      let f = h;
+      if (U > 0 && isFinite(U))
+        for (const x of L) {
+          const b = Ee(x.width, x.height, h, U);
+          f = Math.min(f, b);
+        }
+      const u = { scale: f, format: te, quality: re };
+      if (g) {
+        const x = d === "blob" ? await ce(u) : await ie(u), b = {};
+        for (const [F, Y] of Object.entries(x)) {
+          const X = L.find((Z) => Z.id === F);
+          X && (b[X.name] = Y);
+        }
+        return b;
+      } else {
+        const x = k.getActiveArtboard();
+        if (!x)
+          throw new Error("[SnowconeCanvas] No active artboard found");
+        if (d === "blob") {
+          const b = await Q(x.id, u);
+          return { [x.name]: b };
+        } else {
+          const b = await G(x.id, u);
+          return { [x.name]: b };
+        }
+      }
+    }
+  }), [G, ie, Q, ce, j, O, U, te, re, k, L]), R(() => {
+    H && H(async () => {
+      const d = k.getActiveArtboard();
+      if (!d)
+        throw new Error("[SnowconeCanvas] No active artboard found");
+      const h = Ee(
+        d.width,
+        d.height,
+        O,
+        U
+      ), g = j === "blob" ? await Q(d.id, { scale: h }) : await G(d.id, { scale: h });
+      return { [d.name]: g };
+    });
+  }, [H, G, Q, k, j, O, U]);
+  const [Ue, le] = q("idle"), [ze, ge] = q(null), pe = T(void 0), be = T(!1), Ye = T(!1), [at, ot] = q(!1), st = T(0), it = T(0), ve = T(!1);
+  R(() => {
+    if (be.current) return;
+    be.current = !0;
+    const s = o || [{ name: "Design", width: Ze, height: qe }], d = k.getAllArtboards();
+    if (d.length > 0) {
+      const h = s[0], g = d[0], f = me ? "transparent" : void 0;
+      g.name = h.name, g.width = h.width, g.height = h.height, g.clipShape = h.clipShape, h.backgroundColor ? g.backgroundColor = h.backgroundColor : f && (g.backgroundColor = f);
+      for (let u = 1; u < s.length; u++)
+        rt(s[u].width, s[u].height, {
+          name: s[u].name,
+          backgroundColor: s[u].backgroundColor ?? f,
+          clipShape: s[u].clipShape
+        });
+    }
+    et();
+  }, []), R(() => {
+    if (!(!p || p.length === 0) && !Ye.current && be.current) {
+      Ye.current = !0, ot(!0);
+      try {
+        const s = Ct.createManyFromJSON(p), d = k.getAllArtboards();
+        if (d.length > 0) {
+          const g = d[0];
+          for (const f of s)
+            k.addElementToArtboard(f.id, g.id);
+        }
+        oe(s);
+        const h = /* @__PURE__ */ new Set();
+        for (const g of s) {
+          const f = g.fontFamily;
+          typeof f == "string" && f.trim().length > 0 && h.add(f);
+        }
+        if (h.size > 0 && typeof document < "u") {
+          const g = document.fonts ?? null, f = Array.from(h).map((u) => {
+            const x = `font-${u.replace(/\s+/g, "-").toLowerCase()}`;
+            let b = document.getElementById(x);
+            return b || (b = document.createElement("link"), b.id = x, b.rel = "stylesheet", b.href = `https://fonts.googleapis.com/css2?family=${u.replace(
+              /\s+/g,
+              "+"
+            )}:wght@400;700&display=swap`, document.head.appendChild(b)), new Promise((F) => {
+              if (b.sheet) {
+                F(u);
+                return;
+              }
+              const Y = () => F(u);
+              b.addEventListener("load", Y, { once: !0 }), b.addEventListener("error", Y, { once: !0 }), setTimeout(Y, 4e3);
+            });
+          });
+          Promise.all(f).then((u) => {
+            if (g)
+              return Promise.all(
+                u.flatMap((x) => [
+                  g.load(`400 16px "${x}"`).catch(() => {
+                  }),
+                  g.load(`700 16px "${x}"`).catch(() => {
+                  })
+                ])
+              );
+          }).then(() => {
+            oe((u) => u.slice());
+          });
+        }
+      } catch (s) {
+        K.error("Failed to load initial elements:", s);
+        const d = s instanceof Error ? s : new Error(String(s));
+        N({
+          category: "import",
+          message: `Failed to load initial elements: ${d.message}`,
+          originalError: d,
+          recoverable: !0
+        });
+      }
+    }
+  }, [p, k, oe, N]), R(() => {
+    if (!i) {
+      ve.current = !0;
+      return;
+    }
+    const s = L.find((d) => d.name === i);
+    if (s) {
+      const d = k.getActiveArtboard();
+      (d == null ? void 0 : d.name) !== i && nt(s.id), ve.current = !0;
+    }
+  }, [i, L]), R(() => {
+    if (!z || pe.current === z) return;
+    if (V.length > 0) {
+      pe.current = z;
+      return;
+    }
+    pe.current = z, (async () => {
+      le("loading"), ge(null);
+      try {
+        const d = k.getAllArtboards();
+        if (d.length === 0)
+          throw new Error("No artboards available");
+        const h = [];
+        for (const g of d) {
+          const f = o == null ? void 0 : o.find((b) => b.name === g.name), u = (f == null ? void 0 : f.scaleMode) || ke, x = await Ot(
+            z,
+            {
+              artboard: {
+                width: g.width,
+                height: g.height,
+                x: g.x,
+                y: g.y
+              },
+              alignment: (f == null ? void 0 : f.fitAlign) || Re,
+              scale: Ie,
+              scaleMode: u,
+              marginTop: f == null ? void 0 : f.fitMarginTop,
+              marginRight: f == null ? void 0 : f.fitMarginRight,
+              marginBottom: f == null ? void 0 : f.fitMarginBottom,
+              marginLeft: f == null ? void 0 : f.fitMarginLeft
+            }
+          );
+          x.success && x.element ? (k.addElementToArtboard(x.element.id, g.id), h.push(x.element)) : K.error("Failed to load image for artboard:", g.name, x.error);
+        }
+        if (h.length > 0)
+          oe((g) => [...g, ...h]), le("success"), y == null || y(z);
+        else {
+          const g = new Error("Failed to load image into any artboard");
+          le("error"), ge(g), m == null || m(z, g), N({
+            category: "image",
+            message: g.message,
+            originalError: g,
+            recoverable: !0
+          });
+        }
+      } catch (d) {
+        const h = d instanceof Error ? d : new Error(String(d));
+        le("error"), ge(h), m == null || m(z, h), N({
+          category: "image",
+          message: h.message,
+          originalError: h,
+          recoverable: !0
+        });
+      }
+    })();
+  }, [z, Re, Ie, ke]), R(() => {
+    P == null || P(Ne);
+  }, [Ne, P]), R(() => {
+    if (!A) return;
+    const s = k.getActiveArtboard(), d = {
+      elements: V.map((h) => h.toJSON()),
+      artboards: L.map((h) => ({
+        name: h.name,
+        width: h.width,
+        height: h.height,
+        clipShape: h.clipShape,
+        backgroundColor: h.backgroundColor
+      })),
+      activeArtboard: (s == null ? void 0 : s.name) || "Design"
+    };
+    A(d);
+  }, [V, L, A]), R(() => {
+    if (!l || !ve.current) return;
+    const s = k.getActiveArtboard();
+    s && l(s.name);
+  }, [k.getActiveArtboardId()]);
+  const ct = B(async () => {
+    if (!E && !w) return;
+    const s = ++it.current, d = Date.now();
+    let h = O;
+    if (U > 0 && isFinite(U))
+      for (const u of L) {
+        const x = Ee(u.width, u.height, O, U);
+        h = Math.min(h, x);
+      }
+    const g = k.getActiveArtboard(), f = (g == null ? void 0 : g.id) ?? "unknown";
+    w == null || w({ status: "rendering", artboardId: f }), st.current = d;
+    try {
+      let u;
+      const x = {
+        format: te,
+        scale: h,
+        quality: re
+      };
+      if (j === "blob")
+        if (fe) {
+          const b = await ce(x);
+          u = {};
+          for (const [F, Y] of Object.entries(b)) {
+            const X = L.find((Z) => Z.id === F);
+            X && (u[X.name] = Y);
+          }
+        } else {
+          const b = k.getActiveArtboard();
+          if (!b) return;
+          const F = await Q(b.id, x);
+          u = { [b.name]: F };
+        }
+      else if (fe) {
+        const b = await ie(x);
+        u = {};
+        for (const [F, Y] of Object.entries(b)) {
+          const X = L.find((Z) => Z.id === F);
+          X && (u[X.name] = Y);
+        }
+      } else {
+        const b = k.getActiveArtboard();
+        if (!b) return;
+        const F = await G(b.id, x);
+        u = { [b.name]: F };
+      }
+      E == null || E(u), w == null || w({ status: "complete", artboardId: f, result: u });
+    } catch (u) {
+      const x = u instanceof Error ? u.message : String(u);
+      if (x.includes("Canvas ref not available"))
+        return;
+      const b = Date.now() - d;
+      K.error("Export failed (export #" + s + "):", {
+        duration: `${b}ms`,
+        error: x
+      });
+      const F = u instanceof Error ? u : new Error(x);
+      w == null || w({ status: "error", artboardId: f, error: F }), N({
+        category: "export",
+        message: F.message,
+        originalError: F,
+        artboardId: f,
+        recoverable: !0
+      });
+    }
+  }, [E, w, fe, j, O, U, te, re, G, ie, Q, ce, L, k, V, J, N]);
+  R(() => {
+    Se !== void 0 && Se > 0 && K.warn(
+      "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
+    );
+  }, []), R(() => {
+  }, [V]);
+  const lt = B(() => {
+    if (M == null || M(), w) {
+      const s = k.getActiveArtboard();
+      w({ status: "scheduled", artboardId: (s == null ? void 0 : s.id) ?? "unknown" });
+    }
+  }, [M, w, k]), dt = !!p && p.length > 0, xe = Wt({
+    isCanvasReady: he,
+    elements: V,
+    hasInitialElements: dt,
+    initialElementsLoaded: at
+  }), $e = T(!1);
+  R(() => {
+    xe && !$e.current && ($e.current = !0, v == null || v());
+  }, [xe, v]), Ft({
+    config: J ? {
+      enabled: J.enabled ?? !0,
+      debounceMs: J.debounceMs ?? 100,
+      maxWaitMs: J.maxWaitMs ?? 1e3
+    } : {
+      enabled: !1
+      // Only use smart export if autoExportConfig is provided
+    },
+    historyManager: tt,
+    artboards: L,
+    elements: V,
+    onExport: ct,
+    onExportScheduled: lt,
+    isCanvasReady: xe
+    // Gate exports until content is fully ready (fonts loaded, elements deserialized)
+  }), R(() => {
+    if (L.length > 0 && !he) {
+      const s = requestAnimationFrame(() => {
+        se(!0);
+      });
+      return () => cancelAnimationFrame(s);
+    }
+  }, [L.length, he, se]), R(() => () => {
+    se(!1);
+  }, [se]);
+  const ut = B((s) => {
+    N({
+      category: "unknown",
+      message: s.message,
+      originalError: s,
+      recoverable: !1
+    });
+  }, [N]);
+  return Ue === "loading" ? /* @__PURE__ */ C(
+    "div",
+    {
+      className: W,
+      style: {
+        ...D,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--surface, #f5f5f5)"
+      },
+      children: /* @__PURE__ */ C(vt, { size: 48 })
+    }
+  ) : Ue === "error" && ze ? /* @__PURE__ */ C(
+    "div",
+    {
+      className: W,
+      style: {
+        ...D,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--surface, #f5f5f5)",
+        color: "var(--danger, #dc2626)",
+        padding: "1rem"
+      },
+      children: /* @__PURE__ */ de("div", { className: "text-center", children: [
+        /* @__PURE__ */ C("div", { className: "font-medium", children: "Failed to load image" }),
+        /* @__PURE__ */ C("div", { className: "text-sm mt-1 opacity-70", children: ze.message })
+      ] })
+    }
+  ) : /* @__PURE__ */ C(xt, { kit: ne, children: /* @__PURE__ */ C("div", { className: `app-modern ${W || ""}`, style: { ...D, position: "relative" }, children: /* @__PURE__ */ de(
+    Tt,
+    {
+      onError: ut,
+      fallback: (s, d) => /* @__PURE__ */ de(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "24px",
+            minHeight: "200px",
+            backgroundColor: "var(--surface, #f5f5f5)",
+            color: "var(--foreground, #333)",
+            fontFamily: "system-ui, sans-serif",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ C("div", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Something went wrong" }),
+            /* @__PURE__ */ C("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: s.message }),
+            /* @__PURE__ */ C(
+              "button",
+              {
+                onClick: d,
+                style: {
+                  padding: "8px 20px",
+                  backgroundColor: "var(--primary, #333)",
+                  color: "var(--primary-foreground, #fff)",
+                  border: "none",
+                  borderRadius: "6px",
+                  fontSize: "14px",
+                  fontWeight: 500,
+                  cursor: "pointer"
+                },
+                children: "Try again"
+              }
+            )
+          ]
+        }
+      ),
+      children: [
+        !_e && (Pe || He ? /* @__PURE__ */ C("div", { className: Pe, style: He, children: /* @__PURE__ */ C(
+          Xe,
+          {
+            style: { width: "100%" },
+            fitPadding: Ce,
+            artboardBorderRadius: Me,
+            fixedMargin: Te,
+            maxHeight: De,
+            showRotationHandle: Fe,
+            enableShortcuts: Be,
+            canvasCutouts: Le,
+            pieceGuides: me,
+            pieceFocus: We
+          }
+        ) }) : /* @__PURE__ */ C(
+          Xe,
+          {
+            style: { width: "100%" },
+            fitPadding: Ce,
+            artboardBorderRadius: Me,
+            fixedMargin: Te,
+            maxHeight: De,
+            showRotationHandle: Fe,
+            enableShortcuts: Be,
+            canvasCutouts: Le,
+            pieceGuides: me,
+            pieceFocus: We
+          }
+        )),
+        ee
+      ]
+    }
+  ) }) });
+});
+Je.displayName = "SnowconeCanvasInner";
+const Kt = je((t, e) => {
+  var o;
+  const { inheritTheme: r, externalProvider: a } = t, n = t.viewPadding ?? ((o = t.layoutConfig) == null ? void 0 : o.viewPadding), c = /* @__PURE__ */ C(Je, { ref: e, ...t });
+  return a ? /* @__PURE__ */ C(Oe, { defaultTheme: "light", passive: r, children: c }) : /* @__PURE__ */ C(Oe, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ C(It, { viewPadding: n, children: c }) });
+});
+Kt.displayName = "SnowconeCanvas";
+const Ve = _("useCommands");
+function sr() {
+  const t = ue(), {
+    undo: e,
+    redo: r,
+    canUndo: a,
+    canRedo: n,
+    executeElementUpdate: c,
+    executeAddElement: o,
+    executeRemoveElement: i,
+    executeReorderElement: l,
+    executeCommandBatch: p,
+    executeCreateArtboard: A,
+    executeDeleteArtboard: P,
+    executeUpdateArtboard: I
+  } = t, E = B(() => {
+    Ve.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
+  }, []), M = B((w) => {
+    Ve.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
+  }, []);
+  return {
+    // Undo/Redo
+    undo: e,
+    redo: r,
+    canUndo: a,
+    canRedo: n,
+    // History management
+    clearHistory: E,
+    clearArtboardHistory: M,
+    // Command execution
+    executeElementUpdate: c,
+    executeAddElement: o,
+    executeRemoveElement: i,
+    executeReorderElement: l,
+    executeCreateArtboard: A,
+    executeDeleteArtboard: P,
+    executeUpdateArtboard: I,
+    // Batch execution
+    executeCommandBatch: p
+  };
+}
+function ir() {
+  const { selectedElement: t } = ue();
+  return t ?? null;
+}
+function cr() {
+  const { isCanvasReady: t } = ue();
+  return t;
+}
+const jt = () => {
+}, Gt = [];
+function lr(t) {
+  const { elementStore: e } = Ae(), { executeElementUpdate: r } = Ge(), a = ye(() => e.getAllByName(t).filter((o) => o instanceof At), [e, t]), n = B(
+    (c) => {
+      for (const o of a) {
+        const i = o.clone();
+        i.setText(c), r(o, i);
+      }
+    },
+    [a, r]
+  );
+  return a.length === 0 ? { text: "", setText: jt, element: null, elements: Gt, isConnected: !1 } : {
+    text: a[0].getText(),
+    setText: n,
+    element: a[0],
+    elements: a,
+    isConnected: !0
+  };
+}
+const Qt = () => {
+}, Jt = [];
+function Zt(t, e, r) {
+  const a = t / e;
+  if (r >= a) {
+    const n = e, c = n * r, o = t / c;
+    return {
+      width: c,
+      height: n,
+      cropX: (1 - o) / 2,
+      cropY: 0,
+      cropWidth: o,
+      cropHeight: 1
+    };
+  } else {
+    const n = t, c = n / r, o = e / c;
+    return {
+      width: n,
+      height: c,
+      cropX: 0,
+      cropY: (1 - o) / 2,
+      cropWidth: 1,
+      cropHeight: o
+    };
+  }
+}
+function dr(t, e) {
+  const r = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: a, setElements: n } = Ae(), { executeElementUpdate: c } = Ge(), o = ye(() => a.getAllByName(t).filter((E) => E instanceof Ke), [a, t]), i = T(/* @__PURE__ */ new Map());
+  for (const I of o)
+    if (!i.current.has(I.id)) {
+      const E = I.transformData;
+      i.current.set(I.id, {
+        width: E.width * E.cropWidth,
+        height: E.height * E.cropHeight
+      });
+    }
+  const l = T(o);
+  l.current = o;
+  const p = T(c);
+  p.current = c;
+  const A = T(n);
+  A.current = n;
+  const P = B(
+    (I) => {
+      const E = l.current, M = p.current;
+      A.current;
+      for (const w of E) {
+        const H = i.current.get(w.id);
+        if (!H) continue;
+        const { width: y, height: m } = H, S = w.clone();
+        S.imageLoaded = !1, S.imageElement = null, S.isCropping = !1, S.imageUrl = I, r === "cover" ? (S.preserveDimensions = !0, S.onLoadCallback = (v) => {
+          const W = v.imageAspectRatio || 1, D = Zt(y, m, W);
+          v.transformData.width = D.width, v.transformData.height = D.height, v.transformData.cropX = D.cropX, v.transformData.cropY = D.cropY, v.transformData.cropWidth = D.cropWidth, v.transformData.cropHeight = D.cropHeight, M(w, v);
+        }) : (S.preserveDimensions = !1, S.onLoadCallback = (v) => {
+          const W = v.transformData.width, D = v.transformData.height, $ = Math.min(y / W, m / D, 1);
+          $ < 1 && (v.transformData.width = W * $, v.transformData.height = D * $), v.transformData.cropX = 0, v.transformData.cropY = 0, v.transformData.cropWidth = 1, v.transformData.cropHeight = 1, M(w, v);
+        }), S.loadImage(I);
+      }
+    },
+    [r]
+    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
+  );
+  return o.length === 0 ? { imageUrl: "", setImageUrl: Qt, element: null, elements: Jt, isConnected: !1 } : {
+    imageUrl: o[0].imageUrl,
+    setImageUrl: P,
+    element: o[0],
+    elements: o,
+    isConnected: !0
+  };
+}
+function ur(t) {
+  const { elementStore: e } = Ae();
+  return t ? e.getByName(t) ?? null : null;
+}
+function fr() {
+  const { zoom: t, panOffset: e, zoomIn: r, zoomOut: a, zoomToFit: n, resetView: c, setZoom: o, setPanOffset: i } = kt();
+  return { zoom: t, panOffset: e, zoomIn: r, zoomOut: a, zoomToFit: n, resetView: c, setZoom: o, setPanOffset: i };
+}
+function mr(t) {
+  var a;
+  const e = ((a = t.artboards) == null ? void 0 : a[0]) || { name: "Front", width: 800, height: 800 }, r = (t.elements || []).map(qt);
+  return {
+    artboards: [{
+      id: "artboard-1",
+      name: e.name || "Front",
+      x: 0,
+      y: 0,
+      width: e.width || 800,
+      height: e.height || 800,
+      backgroundColor: e.backgroundColor || "transparent",
+      exportBackground: !1,
+      elements: r,
+      distressTexture: e.distressTexture,
+      imageMask: e.imageMask
+    }]
+  };
+}
+function qt(t) {
+  const e = t.type || t.transformType;
+  return e === "image" ? _t(t) : {
+    ...t,
+    type: e
+  };
+}
+function _t(t) {
+  var p;
+  const e = t.transformData || {}, r = t.masks && t.masks.length > 0, a = e.width || 0, n = e.height || 0, c = r ? a : a * (e.cropWidth ?? 1), o = r ? n : n * (e.cropHeight ?? 1), i = {
+    id: t.id,
+    type: "image",
+    x: t.x || 0,
+    y: t.y || 0,
+    width: c,
+    height: o,
+    rotation: t.rotation || 0,
+    imageUrl: t.imageUrl,
+    imageAspectRatio: t.imageAspectRatio
+  };
+  return !r && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (i.cropX = e.cropX, i.cropY = e.cropY, i.cropWidth = e.cropWidth, i.cropHeight = e.cropHeight, i.needsCropPixelConversion = !0), e.flipHorizontal && (i.flipHorizontal = e.flipHorizontal), e.flipVertical && (i.flipVertical = e.flipVertical), e.borderRadius && (i.borderRadius = e.borderRadius), t.opacity !== void 0 && (i.opacity = t.opacity), t.distressEffect && (i.distressEffect = t.distressEffect), ((p = t.masks) == null ? void 0 : p.length) > 0 && (i.masks = t.masks), t.blendMode && (i.blendMode = t.blendMode), t.knockoutParts && (i.knockoutParts = t.knockoutParts), t.stroke && (i.stroke = t.stroke), i;
+}
+wt();
+export {
+  pr as ALL_CAPABILITIES,
+  br as COMPACT_CUSTOMIZER,
+  vr as EMBED_ONLY,
+  Tt as ErrorBoundary,
+  xr as MINIMAL_CAPABILITIES,
+  wr as PRO_STUDIO,
+  Kt as SnowconeCanvas,
+  Er as createKit,
+  Kt as default,
+  Rr as deserializeState,
+  yr as extendKit,
+  Ir as migrateState,
+  ht as resolveKit,
+  kr as serializeState,
+  mr as serializeStateForServer,
+  pt as useArtboards,
+  Ft as useAutoExport,
+  cr as useCanvasReady,
+  sr as useCommands,
+  Wt as useContentReady,
+  ue as useEditor,
+  ur as useElementByName,
+  bt as useExport,
+  dr as useImageBinding,
+  Ar as useLayers,
+  ir as useSelectedElement,
+  lr as useTextBinding,
+  fr as useViewport,
+  gt as validateKit,
+  Cr as validateState
+};
+//# sourceMappingURL=index.mjs.map