@snowcone-app/canvas 0.37.0 → 0.38.0

package/dist/SnowconeCanvas-CWSPyqqj.js

@@ -0,0 +1,1112 @@
+import { p as Y, c as Q, u as Te, I as Be, v as $e } from "./FontAnalyzer-DWHS41ba.js";
+import { jsx as p, Fragment as We, jsxs as X } from "react/jsx-runtime";
+import { useMemo as Se, useRef as M, useEffect as S, Component as He, useState as q, useCallback as K, useImperativeHandle as ze, forwardRef as Ae } from "react";
+import { a as Ke, b as Oe, c as Ue, G as je, d as Ve, Z as Ge, g as Xe, e as Ye, D as Qe, r as Je, v as Ze, S as qe, K as _e, f as et } from "./validation-BG-V98h0.js";
+import { ImagePanel as tt } from "./ImagePanel-BaX0UE-L.js";
+import { C as rt, a as nt } from "./ContextualToolbars-C62As-xY.js";
+import { n as at, o as ot, E as st, C as it, b as me, k as ct } from "./useCommands-x8J7_Mzy.js";
+import { C as lt, D as dt } from "./template-fields-CBLHgW7G.js";
+import { E as ut, b as ee } from "./design-builder-CoCtjIwj.js";
+import { T as xe } from "./ThemeContext-Rjz25x9X.js";
+import { c as mt, g as ft } from "./placement-Br5jI_-u.js";
+import { F as re, E as gt, G as ht } from "./ExportManager-BbBfO22S.js";
+import { C as le } from "./CanvasRenderer-D-E5WWLm.js";
+const fe = Q("KitLayout"), Z = "canvas", de = 320;
+let ye = !1;
+function pt() {
+  ye || (ye = !0, Ke({
+    EffectsPanel: Oe,
+    ExportPanel: Ue,
+    ImagePanel: tt,
+    GlyphPanel: je,
+    ArtboardTabs: Ve,
+    ContextualToolbars: rt,
+    ZoomControls: Ge,
+    CropPanel: nt
+  }));
+}
+function bt({ children: n }) {
+  const t = M(null);
+  if (t.current === null) {
+    const r = new at();
+    r.registerCanvas("legacy-kit-canvas"), t.current = {
+      store: new dt({ elements: [], artboards: [], activeArtboard: "" }),
+      commerce: new lt({ productId: "", mockupIds: [] }),
+      registry: r,
+      ...ot((a) => fe.error("[kit section]", a))
+    };
+  }
+  return /* @__PURE__ */ p(st.Provider, { value: t.current, children: n });
+}
+function ne({ ids: n }) {
+  return !n || n.length === 0 ? null : /* @__PURE__ */ p(bt, { children: n.map((t) => {
+    var e;
+    if (t === Z) return null;
+    const r = Xe(t);
+    if (!r)
+      return typeof Y < "u" && ((e = Y.env) == null ? void 0 : e.NODE_ENV) === "development" && fe.warn(
+        `Kit layout references unknown section "${t}" — skipping. Register it with registerSection("${t}", { ... }).`
+      ), null;
+    const a = r.component;
+    return /* @__PURE__ */ p(a, {}, t);
+  }) });
+}
+function vt({ kit: n, canvas: t }) {
+  var b, u, v, E;
+  pt();
+  const r = n.layout.slots, a = !!((b = r.topbar) != null && b.some((y) => y !== Z)), e = !!((u = r.left) != null && u.some((y) => y !== Z)), s = !!((v = r.right) != null && v.some((y) => y !== Z)), c = !!((E = r.bottombar) != null && E.some((y) => y !== Z)), l = Se(
+    () => !a && !e && !s && !c,
+    [a, e, s, c]
+  ), i = M(null), m = a || e || s || c, f = M(!1);
+  return S(() => {
+    var o;
+    if (typeof Y > "u" || ((o = Y.env) == null ? void 0 : o.NODE_ENV) !== "development" || !m) return;
+    const y = i.current;
+    if (!y || typeof ResizeObserver > "u") return;
+    const R = (d) => {
+      d > 0 && d < de && !f.current ? (f.current = !0, fe.warn(
+        `Kit "${n.name}" declares chrome (toolbar / panels) but its container is only ${Math.round(d)}px wide — below the ~${de}px needed to render it, so the toolbar / panels are suppressed and the editor looks like a bare canvas. Give the editor more container width, or pass kit="embed-only" if a chrome-less canvas is intended.`
+      )) : d >= de && (f.current = !1);
+    };
+    R(y.getBoundingClientRect().width);
+    const F = new ResizeObserver((d) => {
+      for (const h of d) R(h.contentRect.width);
+    });
+    return F.observe(y), () => F.disconnect();
+  }, [m, n.name]), l ? /* @__PURE__ */ p(We, { children: t }) : /* @__PURE__ */ X("div", { ref: i, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    a && /* @__PURE__ */ p(
+      "div",
+      {
+        className: "sc-kit-topbar sc-toolbar",
+        style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", flexShrink: 0 },
+        children: /* @__PURE__ */ p(ne, { ids: r.topbar })
+      }
+    ),
+    /* @__PURE__ */ X("div", { className: "sc-kit-body", style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+      e && /* @__PURE__ */ p("div", { className: "sc-kit-left", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ p(ne, { ids: r.left }) }),
+      /* @__PURE__ */ p("div", { className: "sc-kit-canvas", style: { flex: 1, minWidth: 0, position: "relative" }, children: t }),
+      s && /* @__PURE__ */ p("div", { className: "sc-kit-right", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ p(ne, { ids: r.right }) })
+    ] }),
+    c && /* @__PURE__ */ p(
+      "div",
+      {
+        className: "sc-kit-bottombar sc-toolbar",
+        style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 },
+        children: /* @__PURE__ */ p(ne, { ids: r.bottombar })
+      }
+    )
+  ] });
+}
+const Et = Q("ErrorBoundary");
+class xt extends He {
+  constructor(t) {
+    super(t), this.resetError = () => {
+      this.setState({
+        hasError: !1,
+        error: null
+      });
+    }, this.state = {
+      hasError: !1,
+      error: null
+    };
+  }
+  static getDerivedStateFromError(t) {
+    return {
+      hasError: !0,
+      error: t
+    };
+  }
+  componentDidCatch(t, r) {
+    if (Et.error("Caught error:", t, r), this.props.onError && this.props.onError(t, r), this.props.onCanvasError) {
+      const a = {
+        category: "unknown",
+        message: t.message,
+        originalError: t,
+        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__ */ X(
+      "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__ */ p("h2", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 }, children: "Something went wrong" }),
+          /* @__PURE__ */ p(
+            "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__ */ p(
+            "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;
+  }
+}
+function yt({
+  inheritTheme: n,
+  externalProvider: t,
+  services: r,
+  viewPadding: a,
+  children: e
+}) {
+  const s = t ? /* @__PURE__ */ p(xe, { defaultTheme: "light", passive: n, children: e }) : /* @__PURE__ */ p(xe, { defaultTheme: "light", passive: n, children: /* @__PURE__ */ p(ut, { viewPadding: a, children: e }) });
+  return r ? /* @__PURE__ */ p(it, { services: r, children: s }) : s;
+}
+const wt = Q("useAutoExport");
+function St(n) {
+  const { config: t, historyManager: r, artboards: a, elements: e, onExport: s, onExportScheduled: c, isCanvasReady: l = !1 } = n, i = M(null), m = M(!1), f = M({
+    totalExports: 0,
+    skippedExports: 0,
+    lastExportTime: null,
+    avgExportInterval: 0
+  }), [b, u] = q(f.current), v = M(s);
+  v.current = s, S(() => {
+    const o = new Ye({
+      ...Qe,
+      ...t
+    });
+    return o.onExport(async () => {
+      try {
+        await v.current(), f.current = o.getStats();
+      } catch (d) {
+        wt.error("[useAutoExport] Export failed:", d);
+      }
+    }), i.current = o, () => {
+      o.destroy();
+    };
+  }, []), S(() => {
+    l && m.current && i.current && (m.current = !1, i.current.forceExport());
+  }, [l]), S(() => {
+    i.current && t && i.current.updateConfig(t);
+  }, [t == null ? void 0 : t.enabled, t == null ? void 0 : t.debounceMs, t == null ? void 0 : t.maxWaitMs]), S(() => {
+    i.current && c && i.current.onExportScheduled(c);
+  }, [c]), S(() => {
+    if (!r || !i.current)
+      return;
+    const o = r.onCommandExecuted(() => {
+      if (i.current) {
+        if (!l) {
+          m.current = !0;
+          return;
+        }
+        i.current.scheduleExport();
+      }
+    });
+    return () => {
+      o();
+    };
+  }, [r, l]), S(() => {
+    if (i.current) {
+      if (!l) {
+        m.current = !0;
+        return;
+      }
+      i.current.scheduleExport();
+    }
+  }, [e, a, l]), S(() => Te((d) => {
+    if (!i.current || !l) return;
+    e.some((x) => x.id === d) && i.current.scheduleExport();
+  }), [e, l]);
+  const E = K((o) => {
+    i.current && i.current.updateConfig(o);
+  }, []), y = K(async () => {
+    i.current && (await i.current.forceExport(), f.current = i.current.getStats(), u(f.current));
+  }, []), R = K(() => {
+    i.current && (i.current.resetStats(), f.current = i.current.getStats(), u(f.current));
+  }, []), F = K(() => {
+    i.current && i.current.resetChangeDetection();
+  }, []);
+  return {
+    stats: b,
+    updateConfig: E,
+    forceExport: y,
+    resetStats: R,
+    resetChangeDetection: F
+  };
+}
+const Ie = Q("useContentReady");
+function At(n) {
+  var r;
+  const t = /* @__PURE__ */ new Set();
+  for (const a of n)
+    if ("fontFamily" in a && typeof a.fontFamily == "string" && a.fontFamily && t.add(a.fontFamily), "getRichText" in a && typeof a.getRichText == "function")
+      try {
+        const e = a.getRichText();
+        if (e != null && e.spans)
+          for (const s of e.spans)
+            (r = s.style) != null && r.fontFamily && t.add(s.style.fontFamily);
+      } catch {
+      }
+  return Array.from(t);
+}
+async function It(n) {
+  if (n.length === 0 || typeof document > "u" || !document.fonts) return;
+  const t = [];
+  for (const r of n) {
+    const a = `16px "${r}"`;
+    t.push(document.fonts.load(a));
+  }
+  await Promise.all(t), document.fonts.ready && await Promise.race([
+    document.fonts.ready,
+    new Promise((r) => setTimeout(r, 250))
+  ]), Ie.debug(`Awaited ${t.length} font(s)`);
+}
+function kt() {
+  return new Promise((n) => requestAnimationFrame(() => n()));
+}
+function Rt(n) {
+  const { isCanvasReady: t, elements: r, hasInitialElements: a, initialElementsLoaded: e } = n, [s, c] = q(!1), l = M(!1);
+  return S(() => {
+    if (s || !t || a && !e || a && r.length === 0 || l.current) return;
+    l.current = !0;
+    let i = !1;
+    return (async () => {
+      try {
+        const m = At(r);
+        if (m.length > 0 && (await It(m), i) || (await kt(), i)) return;
+        c(!0);
+      } catch (m) {
+        Ie.error("Error during content readiness check:", m), i || c(!0);
+      } finally {
+        l.current = !1;
+      }
+    })(), () => {
+      i = !0, l.current = !1;
+    };
+  }, [t, r, a, e, s]), s;
+}
+const Ct = {
+  timeout: 3e4,
+  retries: 1,
+  retryDelay: 1e3,
+  validateUrl: !0
+};
+function Ft(n) {
+  try {
+    const t = new URL(n);
+    return ["http:", "https:", "data:", "blob:"].includes(t.protocol);
+  } catch {
+    return !1;
+  }
+}
+async function Mt(n, t = {}) {
+  const r = { ...Ct, ...t };
+  if (r.validateUrl && !Ft(n))
+    return {
+      success: !1,
+      error: new Error(`Invalid image URL: ${n}`)
+    };
+  let a;
+  for (let e = 0; e <= r.retries; e++)
+    try {
+      return await Nt(n, r.timeout);
+    } catch (s) {
+      a = s instanceof Error ? s : new Error(String(s)), e < r.retries && await Lt(r.retryDelay);
+    }
+  return {
+    success: !1,
+    error: a || new Error("Failed to load image after retries")
+  };
+}
+function Nt(n, t) {
+  return new Promise((r) => {
+    const a = new Image();
+    a.crossOrigin = "anonymous";
+    let e = null, s = !1;
+    const c = () => {
+      e && (clearTimeout(e), e = null);
+    }, l = () => {
+      if (s) return;
+      s = !0, c();
+      const m = a.naturalWidth || a.width, f = a.naturalHeight || a.height;
+      r({
+        success: !0,
+        element: a,
+        width: m,
+        height: f,
+        aspectRatio: f > 0 ? m / f : 1
+      });
+    }, i = (m) => {
+      s || (s = !0, c(), r({
+        success: !1,
+        error: new Error(m)
+      }));
+    };
+    a.onload = l, a.onerror = () => {
+      i(`Failed to load image: ${n}`);
+    }, e = setTimeout(() => {
+      i(`Image load timed out after ${t}ms: ${n}`);
+    }, t), a.src = n;
+  });
+}
+async function Pt(n, t, r = {}, a = {}) {
+  var u, v, E, y, R, F, o;
+  const e = await Mt(n, a);
+  if (!e.success || !e.width || !e.height)
+    return {
+      success: !1,
+      error: e.error || new Error("Failed to get image dimensions")
+    };
+  const s = {
+    width: t.artboard.width,
+    height: t.artboard.height,
+    scale: t.scale,
+    align: ft(t.alignment),
+    offsetX: t.offsetX,
+    offsetY: t.offsetY,
+    scaleMode: t.scaleMode,
+    marginTop: t.marginTop,
+    marginRight: t.marginRight,
+    marginBottom: t.marginBottom,
+    marginLeft: t.marginLeft
+  }, c = mt(
+    { width: e.width, height: e.height },
+    s
+  ), l = t.artboard.x + c.x, i = t.artboard.y + c.y, m = l + c.width / 2, f = i + c.height / 2;
+  return {
+    success: !0,
+    element: new Be({
+      ...r,
+      x: m,
+      y: f,
+      imageUrl: n,
+      imageAspectRatio: e.aspectRatio,
+      preserveDimensions: !0,
+      // Don't recalculate dimensions on image load
+      transformData: {
+        type: "image",
+        width: c.width,
+        height: c.height,
+        cropX: ((u = r.transformData) == null ? void 0 : u.cropX) ?? 0,
+        cropY: ((v = r.transformData) == null ? void 0 : v.cropY) ?? 0,
+        cropWidth: ((E = r.transformData) == null ? void 0 : E.cropWidth) ?? 1,
+        cropHeight: ((y = r.transformData) == null ? void 0 : y.cropHeight) ?? 1,
+        flipHorizontal: ((R = r.transformData) == null ? void 0 : R.flipHorizontal) ?? !1,
+        flipVertical: ((F = r.transformData) == null ? void 0 : F.flipVertical) ?? !1,
+        borderRadius: ((o = r.transformData) == null ? void 0 : o.borderRadius) ?? 0
+      }
+    }),
+    placement: {
+      artworkSize: { width: e.width, height: e.height },
+      finalSize: { width: c.width, height: c.height },
+      position: { x: m, y: f },
+      scale: c.scale
+    }
+  };
+}
+function Lt(n) {
+  return new Promise((t) => setTimeout(t, n));
+}
+const _ = Q("SnowconeCanvas");
+function ue(n, t, r, a) {
+  if (a <= 0 || !isFinite(a))
+    return r;
+  const e = n * r, s = t * r;
+  if (Math.max(e, s) <= a)
+    return r;
+  const l = Math.max(n, t), i = a / l;
+  return Math.min(i, r);
+}
+function Dt(n) {
+  const t = M(n);
+  t.current = n;
+  const r = K((e) => {
+    var s;
+    _.error(`[${e.category}] ${e.message}`, e.originalError), (s = t.current) == null || s.call(t, e);
+  }, []);
+  S(() => (le.onRenderError = r, () => {
+    le.onRenderError === r && (le.onRenderError = null);
+  }), [r]);
+  const a = K((e) => {
+    r({
+      category: "unknown",
+      message: e.message,
+      originalError: e,
+      recoverable: !1
+    });
+  }, [r]);
+  return { emitError: r, handleBoundaryError: a };
+}
+function Tt(n) {
+  const {
+    artboardConfigs: t,
+    width: r,
+    height: a,
+    pieceGuides: e,
+    controlledActiveArtboard: s,
+    onArtboardChange: c,
+    resetDocumentOnMount: l
+  } = n, {
+    setElements: i,
+    setSelectedId: m,
+    setMultiSelection: f,
+    artboardManager: b,
+    refreshArtboards: u
+  } = ee(), { createArtboard: v, selectArtboard: E, artboards: y } = me(), R = M(!1), F = M(!1);
+  S(() => {
+    if (R.current) return;
+    R.current = !0;
+    const o = t || [{ name: "Design", width: r, height: a }], d = e ? "transparent" : void 0, h = (w) => w.exportBackground ?? (!!w.backgroundColor && w.backgroundColor !== "transparent");
+    if (l) {
+      b.clear(), i([]), m(null), f([]);
+      for (const g of o)
+        b.createArtboard({
+          name: g.name,
+          width: g.width,
+          height: g.height,
+          backgroundColor: g.backgroundColor ?? d,
+          exportBackground: h(g),
+          clipShape: g.clipShape,
+          role: g.role
+        });
+      const w = b.getAllArtboards();
+      w.length > 0 && !s && b.setActiveArtboard(w[0].id), u();
+      return;
+    }
+    const x = b.getAllArtboards();
+    if (x.length > 0) {
+      const w = o[0], g = x[0];
+      g.name = w.name, g.width = w.width, g.height = w.height, g.clipShape = w.clipShape, g.exportBackground = h(w), g.role = w.role, w.backgroundColor ? g.backgroundColor = w.backgroundColor : d && (g.backgroundColor = d);
+      for (let C = 1; C < o.length; C++)
+        v(o[C].width, o[C].height, {
+          name: o[C].name,
+          backgroundColor: o[C].backgroundColor ?? d,
+          exportBackground: h(o[C]),
+          clipShape: o[C].clipShape,
+          role: o[C].role
+        });
+      !s && o.length > 1 && b.setActiveArtboard(g.id);
+    }
+    u();
+  }, []), S(() => {
+    if (!s) {
+      F.current = !0;
+      return;
+    }
+    const o = y.find((d) => d.name === s);
+    if (o) {
+      const d = b.getActiveArtboard();
+      (d == null ? void 0 : d.name) !== s && E(o.id), F.current = !0;
+    }
+  }, [s, y]), S(() => {
+    if (!c || !F.current) return;
+    const o = b.getActiveArtboard();
+    o && c(o.name);
+  }, [b.getActiveArtboardId()]);
+}
+function Bt(n) {
+  const { initialElements: t, emitError: r, customFonts: a } = n, { setElements: e, artboardManager: s } = ee(), c = M(!1), [l, i] = q(!1), m = M(!0);
+  return S(() => (m.current = !0, () => {
+    m.current = !1;
+  }), []), S(() => {
+    if (!(!t || t.length === 0) && !c.current) {
+      c.current = !0, i(!0);
+      try {
+        a && a.length > 0 && re.register(a);
+        const f = gt.createManyFromJSON(t), b = s.getAllArtboards();
+        if (b.length > 0) {
+          const v = new Map(b.map((E) => [E.name, E]));
+          f.forEach((E, y) => {
+            var o;
+            const R = (o = t[y]) == null ? void 0 : o.artboard, F = R && v.get(R) || b[0];
+            s.addElementToArtboard(E.id, F.id);
+          });
+        }
+        e(f);
+        const u = /* @__PURE__ */ new Set();
+        for (const v of f) {
+          const E = v.fontFamily;
+          typeof E == "string" && E.trim().length > 0 && u.add(E);
+        }
+        if (u.size > 0 && typeof document < "u") {
+          const v = document.fonts ?? null, E = Array.from(u).filter(
+            (o) => re.has(o)
+          ), y = ht(
+            re.forFamilies(E),
+            {
+              onLoadError: (o) => {
+                m.current && r({
+                  category: "import",
+                  message: o.message,
+                  originalError: o,
+                  recoverable: !0
+                });
+              }
+            }
+          ), F = Array.from(u).filter(
+            (o) => !re.has(o)
+          ).map((o) => {
+            const d = `font-${o.replace(/\s+/g, "-").toLowerCase()}`;
+            let h = document.getElementById(d);
+            return h || (h = document.createElement("link"), h.id = d, h.rel = "stylesheet", h.href = `https://fonts.googleapis.com/css2?family=${o.replace(
+              /\s+/g,
+              "+"
+            )}:wght@400;700&display=swap`, document.head.appendChild(h)), new Promise((x) => {
+              if (h.sheet) {
+                x(o);
+                return;
+              }
+              const w = () => x(o);
+              h.addEventListener("load", w, { once: !0 }), h.addEventListener("error", w, { once: !0 }), setTimeout(w, 4e3);
+            });
+          });
+          Promise.all([Promise.all(F), y]).then(([o]) => {
+            if (!(!m.current || !v))
+              return Promise.all(
+                o.flatMap((d) => [
+                  v.load(`400 16px "${d}"`).catch(() => {
+                  }),
+                  v.load(`700 16px "${d}"`).catch(() => {
+                  })
+                ])
+              );
+          }).then(() => {
+            m.current && e((o) => o.slice());
+          });
+        }
+      } catch (f) {
+        _.error("Failed to load initial elements:", f);
+        const b = f instanceof Error ? f : new Error(String(f));
+        r({
+          category: "import",
+          message: `Failed to load initial elements: ${b.message}`,
+          originalError: b,
+          recoverable: !0
+        });
+      }
+    }
+  }, [t, s, e, r, a]), { initialElementsLoadedState: l };
+}
+function $t(n) {
+  const {
+    initialImage: t,
+    initialImageAlignment: r,
+    initialImageScale: a,
+    initialImageScaleMode: e,
+    artboardConfigs: s,
+    onImageLoad: c,
+    onImageError: l,
+    emitError: i
+  } = n, { elements: m, setElements: f, artboardManager: b } = ee(), [u, v] = q("idle"), [E, y] = q(null), R = M(void 0);
+  return S(() => {
+    if (!t || R.current === t) return;
+    if (m.length > 0) {
+      R.current = t;
+      return;
+    }
+    R.current = t, (async () => {
+      v("loading"), y(null);
+      try {
+        const o = b.getAllArtboards();
+        if (o.length === 0)
+          throw new Error("No artboards available");
+        const d = [];
+        for (const h of o) {
+          const x = s == null ? void 0 : s.find((C) => C.name === h.name), w = (x == null ? void 0 : x.scaleMode) || e, g = await Pt(
+            t,
+            {
+              artboard: {
+                width: h.width,
+                height: h.height,
+                x: h.x,
+                y: h.y
+              },
+              alignment: (x == null ? void 0 : x.fitAlign) || r,
+              scale: a,
+              scaleMode: w,
+              marginTop: x == null ? void 0 : x.fitMarginTop,
+              marginRight: x == null ? void 0 : x.fitMarginRight,
+              marginBottom: x == null ? void 0 : x.fitMarginBottom,
+              marginLeft: x == null ? void 0 : x.fitMarginLeft
+            }
+          );
+          g.success && g.element ? (b.addElementToArtboard(g.element.id, h.id), d.push(g.element)) : _.error("Failed to load image for artboard:", h.name, g.error);
+        }
+        if (d.length > 0)
+          f((h) => [...h, ...d]), v("success"), c == null || c(t);
+        else {
+          const h = new Error("Failed to load image into any artboard");
+          v("error"), y(h), l == null || l(t, h), i({
+            category: "image",
+            message: h.message,
+            originalError: h,
+            recoverable: !0
+          });
+        }
+      } catch (o) {
+        const d = o instanceof Error ? o : new Error(String(o));
+        v("error"), y(d), l == null || l(t, d), i({
+          category: "image",
+          message: d.message,
+          originalError: d,
+          recoverable: !0
+        });
+      }
+    })();
+  }, [t, r, a, e]), { imageLoadingState: u, imageError: E };
+}
+function Wt(n) {
+  const { onChange: t, onSelectionChange: r } = n, { elements: a, selectedId: e, artboardManager: s } = ee(), { artboards: c } = me(), l = M(r);
+  l.current = r, S(() => {
+    var m;
+    (m = l.current) == null || m.call(l, e);
+  }, [e]);
+  const i = M(t);
+  i.current = t, S(() => {
+    const m = i.current;
+    if (!m) return;
+    const f = s.getActiveArtboard(), b = {
+      // Stamp each element with the NAME of the artboard it lives on (the
+      // manager is the membership source of truth). Without this the public
+      // state is flat and a multi-placement design cannot round-trip: restore
+      // collapses everything onto the first artboard, and per-placement render
+      // states can't be derived from onChange. Pinned by
+      // SnowconeCanvas.artboard-membership.test.tsx.
+      elements: a.map((u) => {
+        const v = u.toJSON(), E = s.getArtboardForElement(u.id);
+        return E ? { ...v, artboard: E.name } : v;
+      }),
+      artboards: c.map((u) => ({
+        name: u.name,
+        width: u.width,
+        height: u.height,
+        clipShape: u.clipShape,
+        backgroundColor: u.backgroundColor,
+        // Carried so serializeStateForServer / saved states keep an
+        // explicitly-set background renderable (mockup matches editor).
+        exportBackground: u.exportBackground,
+        // Pacing role for multi-page templates (ADR-0086) — emitted only when
+        // set so non-template states stay byte-identical.
+        ...u.role ? { role: u.role } : {}
+      })),
+      activeArtboard: (f == null ? void 0 : f.name) || "Design"
+    };
+    m(b);
+  }, [a, c]);
+}
+function Ht(n, t) {
+  const {
+    autoExportInterval: r,
+    autoExportConfig: a,
+    autoExportFormat: e,
+    autoExportAll: s,
+    exportScale: c,
+    maxExportSize: l,
+    exportImageFormat: i,
+    exportImageQuality: m,
+    onExport: f,
+    onExportScheduled: b,
+    onExportStatus: u,
+    onExportReady: v,
+    onReady: E,
+    hasInitialElements: y,
+    initialElementsLoaded: R,
+    emitError: F
+  } = n, {
+    elements: o,
+    artboardManager: d,
+    historyManager: h,
+    isCanvasReady: x,
+    setCanvasReady: w
+  } = ee(), { artboards: g } = me(), { exportArtboard: C, exportAllArtboards: j, exportArtboardAsBlob: z, exportAllArtboardsAsBlobs: V } = ct(), ae = M(0), oe = M(0);
+  ze(t, () => ({
+    exportArtboards: async (P = {}) => {
+      const L = P.format || e, D = P.scale || c, W = P.all ?? !1;
+      let T = D;
+      if (l > 0 && isFinite(l))
+        for (const k of g) {
+          const I = ue(k.width, k.height, D, l);
+          T = Math.min(T, I);
+        }
+      const A = { scale: T, format: i, quality: m };
+      if (W) {
+        const k = L === "blob" ? await V(A) : await j(A), I = {};
+        for (const [N, O] of Object.entries(k)) {
+          const B = g.find((U) => U.id === N);
+          B && (I[B.name] = O);
+        }
+        return I;
+      } else {
+        const k = d.getActiveArtboard();
+        if (!k)
+          throw new Error("[SnowconeCanvas] No active artboard found");
+        if (L === "blob") {
+          const I = await z(k.id, A);
+          return { [k.name]: I };
+        } else {
+          const I = await C(k.id, A);
+          return { [k.name]: I };
+        }
+      }
+    }
+  }), [C, j, z, V, e, c, l, i, m, d, g]), S(() => {
+    v && v(async () => {
+      const L = d.getActiveArtboard();
+      if (!L)
+        throw new Error("[SnowconeCanvas] No active artboard found");
+      const D = ue(
+        L.width,
+        L.height,
+        c,
+        l
+      ), W = e === "blob" ? await z(L.id, { scale: D }) : await C(L.id, { scale: D });
+      return { [L.name]: W };
+    });
+  }, [v, C, z, d, e, c, l]);
+  const se = K(async () => {
+    if (!f && !u) return;
+    const P = ++oe.current, L = Date.now();
+    let D = c;
+    if (l > 0 && isFinite(l))
+      for (const A of g) {
+        const k = ue(A.width, A.height, c, l);
+        D = Math.min(D, k);
+      }
+    const W = d.getActiveArtboard(), T = (W == null ? void 0 : W.id) ?? "unknown";
+    u == null || u({ status: "rendering", artboardId: T }), ae.current = L;
+    try {
+      let A;
+      const k = {
+        format: i,
+        scale: D,
+        quality: m
+      };
+      if (e === "blob")
+        if (s) {
+          const I = await V(k);
+          A = {};
+          for (const [N, O] of Object.entries(I)) {
+            const B = g.find((U) => U.id === N);
+            B && (A[B.name] = O);
+          }
+        } else {
+          const I = d.getActiveArtboard();
+          if (!I) return;
+          const N = await z(I.id, k);
+          A = { [I.name]: N };
+        }
+      else if (s) {
+        const I = await j(k);
+        A = {};
+        for (const [N, O] of Object.entries(I)) {
+          const B = g.find((U) => U.id === N);
+          B && (A[B.name] = O);
+        }
+      } else {
+        const I = d.getActiveArtboard();
+        if (!I) return;
+        const N = await C(I.id, k);
+        A = { [I.name]: N };
+      }
+      f == null || f(A), u == null || u({ status: "complete", artboardId: T, result: A });
+    } catch (A) {
+      const k = A instanceof Error ? A.message : String(A);
+      if (k.includes("Canvas ref not available"))
+        return;
+      const I = Date.now() - L;
+      _.error("Export failed (export #" + P + "):", {
+        duration: `${I}ms`,
+        error: k
+      });
+      const N = A instanceof Error ? A : new Error(k);
+      u == null || u({ status: "error", artboardId: T, error: N }), F({
+        category: "export",
+        message: N.message,
+        originalError: N,
+        artboardId: T,
+        recoverable: !0
+      });
+    }
+  }, [f, u, s, e, c, l, i, m, C, j, z, V, g, d, o, a, F]);
+  S(() => {
+    r !== void 0 && r > 0 && _.warn(
+      "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
+    );
+  }, []);
+  const ie = K(() => {
+    if (b == null || b(), u) {
+      const P = d.getActiveArtboard();
+      u({ status: "scheduled", artboardId: (P == null ? void 0 : P.id) ?? "unknown" });
+    }
+  }, [b, u, d]), J = Rt({
+    isCanvasReady: x,
+    elements: o,
+    hasInitialElements: y,
+    initialElementsLoaded: R
+  }), te = M(!1);
+  S(() => {
+    J && !te.current && (te.current = !0, E == null || E());
+  }, [J, E]), St({
+    config: a ? {
+      enabled: a.enabled ?? !0,
+      debounceMs: a.debounceMs ?? 100,
+      maxWaitMs: a.maxWaitMs ?? 1e3
+    } : {
+      enabled: !1
+      // Only use smart export if autoExportConfig is provided
+    },
+    historyManager: h,
+    artboards: g,
+    elements: o,
+    onExport: se,
+    onExportScheduled: ie,
+    isCanvasReady: J
+    // Gate exports until content is fully ready (fonts loaded, elements deserialized)
+  }), S(() => {
+    if (g.length > 0 && !x) {
+      const P = requestAnimationFrame(() => {
+        w(!0);
+      });
+      return () => cancelAnimationFrame(P);
+    }
+  }, [g.length, x, w]), S(() => () => {
+    w(!1);
+  }, [w]);
+}
+const we = Q("SnowconeCanvas"), ke = Ae((n, t) => {
+  var Ee;
+  const {
+    exportConfig: r,
+    imageConfig: a,
+    layoutConfig: e,
+    kit: s,
+    artboards: c,
+    activeArtboard: l,
+    onArtboardChange: i,
+    initialElements: m,
+    customFonts: f,
+    onChange: b,
+    onSelectionChange: u,
+    autoExportInterval: v,
+    onExport: E,
+    onExportScheduled: y,
+    onExportStatus: R,
+    onExportReady: F,
+    onImageLoad: o,
+    onImageError: d,
+    onImageLoadError: h,
+    onError: x,
+    onReady: w,
+    className: g,
+    style: C,
+    enableShortcuts: j,
+    overlay: z,
+    resetDocumentOnMount: V
+  } = n, ae = v, oe = n.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), se = n.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", ie = n.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, J = n.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, te = n.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, P = n.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", L = n.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, D = n.initialImage ?? (a == null ? void 0 : a.src), W = n.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", T = n.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, A = n.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", k = n.width ?? (e == null ? void 0 : e.width) ?? 1200, I = n.height ?? (e == null ? void 0 : e.height) ?? 1200, N = n.viewPadding ?? (e == null ? void 0 : e.viewPadding) ?? 0.9, O = n.artboardBorderRadius ?? (e == null ? void 0 : e.artboardBorderRadius) ?? 0, B = n.fixedMargin ?? (e == null ? void 0 : e.fixedMargin), U = n.maxHeight ?? (e == null ? void 0 : e.maxHeight), Re = n.showRotationHandle ?? (e == null ? void 0 : e.showRotationHandle) ?? !0, Ce = n.hideCanvas ?? (e == null ? void 0 : e.hideCanvas) ?? !1, ge = n.canvasWrapperClassName ?? (e == null ? void 0 : e.canvasWrapperClassName), he = n.canvasWrapperStyle ?? (e == null ? void 0 : e.canvasWrapperStyle), Fe = n.canvasCutouts ?? (e == null ? void 0 : e.canvasCutouts), pe = n.pieceGuides, Me = n.pieceFocus, Ne = j ?? !0, G = Se(() => Je(s ?? "pro-studio"), [s]);
+  S(() => {
+    var H;
+    if (typeof Y < "u" && ((H = Y.env) == null ? void 0 : H.NODE_ENV) === "development" && G) {
+      const $ = Ze(G);
+      $.valid || we.warn("Kit validation warnings:", $.errors), $.warnings.length > 0 && we.warn("Kit validation warnings:", $.warnings);
+    }
+  }, [G]), S(() => {
+    if (h)
+      return $e(h);
+  }, [h]);
+  const { emitError: ce, handleBoundaryError: Pe } = Dt(x);
+  Tt({
+    artboardConfigs: c,
+    width: k,
+    height: I,
+    pieceGuides: pe,
+    controlledActiveArtboard: l,
+    onArtboardChange: i,
+    resetDocumentOnMount: V
+  });
+  const { initialElementsLoadedState: Le } = Bt({
+    initialElements: m,
+    customFonts: f,
+    emitError: ce
+  }), { imageLoadingState: be, imageError: ve } = $t({
+    initialImage: D,
+    initialImageAlignment: W,
+    initialImageScale: T,
+    initialImageScaleMode: A,
+    artboardConfigs: c,
+    onImageLoad: o,
+    onImageError: d,
+    emitError: ce
+  });
+  if (Wt({ onChange: b, onSelectionChange: u }), Ht(
+    {
+      autoExportInterval: ae,
+      autoExportConfig: oe,
+      autoExportFormat: se,
+      autoExportAll: ie,
+      exportScale: J,
+      maxExportSize: te,
+      exportImageFormat: P,
+      exportImageQuality: L,
+      onExport: E,
+      onExportScheduled: y,
+      onExportStatus: R,
+      onExportReady: F,
+      onReady: w,
+      hasInitialElements: !!m && m.length > 0,
+      initialElementsLoaded: Le,
+      emitError: ce
+    },
+    t
+  ), be === "loading")
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: g,
+        style: {
+          ...C,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "var(--surface, #f5f5f5)"
+        },
+        children: /* @__PURE__ */ p(qe, { size: 48 })
+      }
+    );
+  if (be === "error" && ve)
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: g,
+        style: {
+          ...C,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "var(--surface, #f5f5f5)",
+          color: "var(--danger, #dc2626)",
+          padding: "1rem"
+        },
+        children: /* @__PURE__ */ X("div", { className: "sc:text-center", children: [
+          /* @__PURE__ */ p("div", { className: "sc:font-medium", children: "Failed to load image" }),
+          /* @__PURE__ */ p("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children: ve.message })
+        ] })
+      }
+    );
+  const De = Object.entries(((Ee = G.layout) == null ? void 0 : Ee.slots) ?? {}).every(
+    ([H, $]) => H === "canvas" || !$ || $.length === 0
+  ) ? { "--color-canvas-bg": "transparent" } : void 0;
+  return /* @__PURE__ */ p(_e, { kit: G, children: /* @__PURE__ */ p("div", { className: `sc-root ${g || ""}`, style: { ...De, ...C, position: "relative" }, children: /* @__PURE__ */ X(
+    xt,
+    {
+      onError: Pe,
+      fallback: (H, $) => /* @__PURE__ */ X(
+        "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__ */ p("div", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Something went wrong" }),
+            /* @__PURE__ */ p("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: H.message }),
+            /* @__PURE__ */ p(
+              "button",
+              {
+                onClick: $,
+                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: [
+        !Ce && /* @__PURE__ */ (() => {
+          const H = /* @__PURE__ */ p(
+            et,
+            {
+              style: { width: "100%" },
+              fitPadding: N,
+              artboardBorderRadius: O,
+              fixedMargin: B,
+              maxHeight: U,
+              showRotationHandle: Re,
+              enableShortcuts: Ne,
+              canvasCutouts: Fe,
+              pieceGuides: pe,
+              pieceFocus: Me
+            }
+          );
+          return /* @__PURE__ */ p(vt, { kit: G, canvas: ge || he ? /* @__PURE__ */ p("div", { className: ge, style: he, children: H }) : H });
+        })(),
+        z
+      ]
+    }
+  ) }) });
+});
+ke.displayName = "SnowconeCanvasInner";
+const zt = Ae((n, t) => {
+  var c;
+  const { inheritTheme: r, externalProvider: a, services: e } = n, s = n.viewPadding ?? ((c = n.layoutConfig) == null ? void 0 : c.viewPadding);
+  return /* @__PURE__ */ p(
+    yt,
+    {
+      inheritTheme: r,
+      externalProvider: a,
+      services: e,
+      viewPadding: s,
+      children: /* @__PURE__ */ p(ke, { ref: t, ...n })
+    }
+  );
+});
+zt.displayName = "SnowconeCanvas";
+export {
+  xt as E,
+  zt as S,
+  Rt as a,
+  St as u
+};
+//# sourceMappingURL=SnowconeCanvas-CWSPyqqj.js.map