@snowcone-app/canvas 0.29.0 → 0.30.0

package/dist/SnowconeCanvas-BWPBngvI.js

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