@snowcone-app/canvas 0.16.0 → 0.17.0

package/dist/SnowconeCanvas-C3eZ9PP8.js

@@ -0,0 +1,1047 @@
+import { y as Q, c as re, aw as yt, I as wt } from "./HybridHistoryManager-Bht98XRv.js";
+import { jsxs as Y, jsx as p, Fragment as Ke } from "react/jsx-runtime";
+import { useMemo as Ye, useRef as M, useEffect as E, Component as xt, useState as te, useCallback as z, forwardRef as je, useImperativeHandle as Et } from "react";
+import { u as St, E as At } from "./EditorContext-CyanYzo2.js";
+import { T as $e } from "./ThemeContext-Rjz25x9X.js";
+import { ag as He, ah as Ue, a6 as kt, L as Rt, t as It, u as Mt, I as Ct, G as Ft, h as Nt, o as Tt, a1 as Pt, J as ze, p as Bt, a7 as Oe, a3 as Lt, i as Dt, q as Wt, r as $t, v as Ht, U as Ut, z as zt, l as Ot } from "./validation-DEd6EOCP.js";
+import { C as Xt, u as Kt, f as Yt } from "./UnifiedFontService-BAtqqkU4.js";
+import { a as jt } from "./template-fields-GOM4MNfq.js";
+import { C as Ee } from "./ImportManager-kRYfIX-D.js";
+import { f as Vt } from "./ElementFactory-C05JJkRp.js";
+const Gt = () => {
+  const { undo: n, redo: t, canUndo: e, canRedo: a } = jt();
+  return /* @__PURE__ */ Y("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
+    /* @__PURE__ */ p(
+      He,
+      {
+        icon: Ue.undo,
+        onClick: n,
+        disabled: !e,
+        tooltip: "Undo",
+        "aria-label": "Undo"
+      }
+    ),
+    /* @__PURE__ */ p(
+      He,
+      {
+        icon: Ue.redo,
+        onClick: t,
+        disabled: !a,
+        tooltip: "Redo",
+        "aria-label": "Redo"
+      }
+    )
+  ] });
+}, Ve = re("KitLayout"), ee = "canvas", Se = 320;
+let Xe = !1;
+function Jt() {
+  Xe || (Xe = !0, kt({
+    LayersPanel: Rt,
+    EffectsPanel: It,
+    ExportPanel: Mt,
+    ImagePanel: Ct,
+    GlyphPanel: Ft,
+    ArtboardTabs: Nt,
+    ContextualToolbars: Tt,
+    ZoomControls: Pt,
+    MenuButton: ze,
+    CropPanel: Bt
+  }), Oe("add-element-menu", {
+    component: ze,
+    label: "Add Element",
+    icon: "gravity-ui:plus",
+    position: "topbar"
+  }), Oe("undo-redo-controls", {
+    component: Gt,
+    label: "Undo / Redo",
+    icon: "lucide:undo-2",
+    position: "topbar"
+  }));
+}
+function he({ ids: n }) {
+  return !n || n.length === 0 ? null : /* @__PURE__ */ p(Ke, { children: n.map((t) => {
+    var r;
+    if (t === ee) return null;
+    const e = Lt(t);
+    if (!e)
+      return typeof Q < "u" && ((r = Q.env) == null ? void 0 : r.NODE_ENV) === "development" && Ve.warn(
+        `Kit layout references unknown section "${t}" — skipping. Register it with registerSection("${t}", { ... }).`
+      ), null;
+    const a = e.component;
+    return /* @__PURE__ */ p(a, {}, t);
+  }) });
+}
+function Qt({ kit: n, canvas: t }) {
+  var B, P, I, F;
+  Jt();
+  const e = n.layout.slots, a = !!((B = e.topbar) != null && B.some((b) => b !== ee)), r = !!((P = e.left) != null && P.some((b) => b !== ee)), g = !!((I = e.right) != null && I.some((b) => b !== ee)), m = !!((F = e.bottombar) != null && F.some((b) => b !== ee)), v = Ye(
+    () => !a && !r && !g && !m,
+    [a, r, g, m]
+  ), l = M(null), w = a || r || g || m, S = M(!1);
+  return E(() => {
+    var f;
+    if (typeof Q > "u" || ((f = Q.env) == null ? void 0 : f.NODE_ENV) !== "development" || !w) return;
+    const b = l.current;
+    if (!b || typeof ResizeObserver > "u") return;
+    const N = (A) => {
+      A > 0 && A < Se && !S.current ? (S.current = !0, Ve.warn(
+        `Kit "${n.name}" declares chrome (toolbar / panels) but its container is only ${Math.round(A)}px wide — below the ~${Se}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.`
+      )) : A >= Se && (S.current = !1);
+    };
+    N(b.getBoundingClientRect().width);
+    const x = new ResizeObserver((A) => {
+      for (const C of A) N(C.contentRect.width);
+    });
+    return x.observe(b), () => x.disconnect();
+  }, [w, n.name]), v ? /* @__PURE__ */ p(Ke, { children: t }) : /* @__PURE__ */ Y("div", { ref: l, 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(he, { ids: e.topbar })
+      }
+    ),
+    /* @__PURE__ */ Y("div", { className: "sc-kit-body", style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+      r && /* @__PURE__ */ p("div", { className: "sc-kit-left", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ p(he, { ids: e.left }) }),
+      /* @__PURE__ */ p("div", { className: "sc-kit-canvas", style: { flex: 1, minWidth: 0, position: "relative" }, children: t }),
+      g && /* @__PURE__ */ p("div", { className: "sc-kit-right", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ p(he, { ids: e.right }) })
+    ] }),
+    m && /* @__PURE__ */ p(
+      "div",
+      {
+        className: "sc-kit-bottombar sc-toolbar",
+        style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 },
+        children: /* @__PURE__ */ p(he, { ids: e.bottombar })
+      }
+    )
+  ] });
+}
+const qt = re("ErrorBoundary");
+class Zt extends xt {
+  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, e) {
+    if (qt.error("Caught error:", t, e), this.props.onError && this.props.onError(t, e), 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__ */ Y(
+      "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;
+  }
+}
+const _t = re("useAutoExport");
+function er(n) {
+  const { config: t, historyManager: e, artboards: a, elements: r, onExport: g, onExportScheduled: m, isCanvasReady: v = !1 } = n, l = M(null), w = M(!1), S = M({
+    totalExports: 0,
+    skippedExports: 0,
+    lastExportTime: null,
+    avgExportInterval: 0
+  }), [B, P] = te(S.current), I = M(g);
+  I.current = g, E(() => {
+    const f = new Dt({
+      ...Wt,
+      ...t
+    });
+    return f.onExport(async () => {
+      try {
+        await I.current(), S.current = f.getStats();
+      } catch (A) {
+        _t.error("[useAutoExport] Export failed:", A);
+      }
+    }), l.current = f, () => {
+      f.destroy();
+    };
+  }, []), E(() => {
+    v && w.current && l.current && (w.current = !1, l.current.forceExport());
+  }, [v]), E(() => {
+    l.current && t && l.current.updateConfig(t);
+  }, [t == null ? void 0 : t.enabled, t == null ? void 0 : t.debounceMs, t == null ? void 0 : t.maxWaitMs]), E(() => {
+    l.current && m && l.current.onExportScheduled(m);
+  }, [m]), E(() => {
+    if (!e || !l.current)
+      return;
+    const f = e.onCommandExecuted(() => {
+      if (l.current) {
+        if (!v) {
+          w.current = !0;
+          return;
+        }
+        l.current.scheduleExport();
+      }
+    });
+    return () => {
+      f();
+    };
+  }, [e, v]), E(() => {
+    if (l.current) {
+      if (!v) {
+        w.current = !0;
+        return;
+      }
+      l.current.scheduleExport();
+    }
+  }, [r, a, v]), E(() => yt((A) => {
+    if (!l.current || !v) return;
+    r.some((H) => H.id === A) && l.current.scheduleExport();
+  }), [r, v]);
+  const F = z((f) => {
+    l.current && l.current.updateConfig(f);
+  }, []), b = z(async () => {
+    l.current && (await l.current.forceExport(), S.current = l.current.getStats(), P(S.current));
+  }, []), N = z(() => {
+    l.current && (l.current.resetStats(), S.current = l.current.getStats(), P(S.current));
+  }, []), x = z(() => {
+    l.current && l.current.resetChangeDetection();
+  }, []);
+  return {
+    stats: B,
+    updateConfig: F,
+    forceExport: b,
+    resetStats: N,
+    resetChangeDetection: x
+  };
+}
+const Ge = re("useContentReady");
+function tr(n) {
+  var e;
+  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 r = a.getRichText();
+        if (r != null && r.spans)
+          for (const g of r.spans)
+            (e = g.style) != null && e.fontFamily && t.add(g.style.fontFamily);
+      } catch {
+      }
+  return Array.from(t);
+}
+async function rr(n) {
+  if (n.length === 0 || typeof document > "u" || !document.fonts) return;
+  const t = [];
+  for (const e of n) {
+    const a = `16px "${e}"`;
+    t.push(document.fonts.load(a));
+  }
+  await Promise.all(t), document.fonts.ready && await Promise.race([
+    document.fonts.ready,
+    new Promise((e) => setTimeout(e, 250))
+  ]), Ge.debug(`Awaited ${t.length} font(s)`);
+}
+function nr() {
+  return new Promise((n) => requestAnimationFrame(() => n()));
+}
+function ar(n) {
+  const { isCanvasReady: t, elements: e, hasInitialElements: a, initialElementsLoaded: r } = n, [g, m] = te(!1), v = M(!1);
+  return E(() => {
+    if (g || !t || a && !r || a && e.length === 0 || v.current) return;
+    v.current = !0;
+    let l = !1;
+    return (async () => {
+      try {
+        const w = tr(e);
+        if (w.length > 0 && (await rr(w), l) || (await nr(), l)) return;
+        m(!0);
+      } catch (w) {
+        Ge.error("Error during content readiness check:", w), l || m(!0);
+      } finally {
+        v.current = !1;
+      }
+    })(), () => {
+      l = !0, v.current = !1;
+    };
+  }, [t, e, a, r, g]), g;
+}
+const or = {
+  // 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 sr(n) {
+  return n && or[n] || "c";
+}
+function ir(n, t) {
+  const e = t.scaleMode || "cover", a = (e === "contain" ? t.marginTop : 0) || 0, r = (e === "contain" ? t.marginRight : 0) || 0, g = (e === "contain" ? t.marginBottom : 0) || 0, m = (e === "contain" ? t.marginLeft : 0) || 0, v = t.width - m - r, l = t.height - a - g, w = v / n.width, S = l / n.height, B = e === "contain" ? Math.min(w, S) : Math.max(w, S), P = t.scale || 1, I = B * P, F = n.width * I, b = n.height * I, N = t.align || "c";
+  let x = 0, f = 0;
+  const A = F - v, C = b - l;
+  switch (N) {
+    // Top row
+    case "tl":
+      x = 0, f = 0;
+      break;
+    case "t":
+      x = -A / 2, f = 0;
+      break;
+    case "tr":
+      x = -A, f = 0;
+      break;
+    // Middle row
+    case "l":
+      x = 0, f = -C / 2;
+      break;
+    case "c":
+    // Center (default)
+    default:
+      x = -A / 2, f = -C / 2;
+      break;
+    case "r":
+      x = -A, f = -C / 2;
+      break;
+    // Bottom row
+    case "bl":
+      x = 0, f = -C;
+      break;
+    case "b":
+      x = -A / 2, f = -C;
+      break;
+    case "br":
+      x = -A, f = -C;
+      break;
+  }
+  x += m, f += a;
+  const H = t.offsetX || 0, j = t.offsetY || 0, ne = A, ae = C;
+  return x += H * ne, f += j * ae, x = Math.round(x), f = Math.round(f), {
+    // Final scale to apply to artwork
+    scale: I,
+    // Final artwork dimensions after scaling
+    width: Math.round(F),
+    height: Math.round(b),
+    // Position to draw artwork (relative to artboard origin)
+    x,
+    y: f,
+    // Debug info
+    debug: {
+      coverScale: B,
+      userScale: P,
+      overflow: { x: A, y: C },
+      alignment: N,
+      appliedOffset: { x: H * ne, y: j * ae }
+    }
+  };
+}
+const cr = {
+  timeout: 3e4,
+  retries: 1,
+  retryDelay: 1e3,
+  validateUrl: !0
+};
+function lr(n) {
+  try {
+    const t = new URL(n);
+    return ["http:", "https:", "data:", "blob:"].includes(t.protocol);
+  } catch {
+    return !1;
+  }
+}
+async function dr(n, t = {}) {
+  const e = { ...cr, ...t };
+  if (e.validateUrl && !lr(n))
+    return {
+      success: !1,
+      error: new Error(`Invalid image URL: ${n}`)
+    };
+  let a;
+  for (let r = 0; r <= e.retries; r++)
+    try {
+      return await ur(n, e.timeout);
+    } catch (g) {
+      a = g instanceof Error ? g : new Error(String(g)), r < e.retries && await mr(e.retryDelay);
+    }
+  return {
+    success: !1,
+    error: a || new Error("Failed to load image after retries")
+  };
+}
+function ur(n, t) {
+  return new Promise((e) => {
+    const a = new Image();
+    a.crossOrigin = "anonymous";
+    let r = null, g = !1;
+    const m = () => {
+      r && (clearTimeout(r), r = null);
+    }, v = () => {
+      if (g) return;
+      g = !0, m();
+      const w = a.naturalWidth || a.width, S = a.naturalHeight || a.height;
+      e({
+        success: !0,
+        element: a,
+        width: w,
+        height: S,
+        aspectRatio: S > 0 ? w / S : 1
+      });
+    }, l = (w) => {
+      g || (g = !0, m(), e({
+        success: !1,
+        error: new Error(w)
+      }));
+    };
+    a.onload = v, a.onerror = () => {
+      l(`Failed to load image: ${n}`);
+    }, r = setTimeout(() => {
+      l(`Image load timed out after ${t}ms: ${n}`);
+    }, t), a.src = n;
+  });
+}
+async function fr(n, t, e = {}, a = {}) {
+  var P, I, F, b, N, x, f;
+  const r = await dr(n, a);
+  if (!r.success || !r.width || !r.height)
+    return {
+      success: !1,
+      error: r.error || new Error("Failed to get image dimensions")
+    };
+  const g = {
+    width: t.artboard.width,
+    height: t.artboard.height,
+    scale: t.scale,
+    align: sr(t.alignment),
+    offsetX: t.offsetX,
+    offsetY: t.offsetY,
+    scaleMode: t.scaleMode,
+    marginTop: t.marginTop,
+    marginRight: t.marginRight,
+    marginBottom: t.marginBottom,
+    marginLeft: t.marginLeft
+  }, m = ir(
+    { width: r.width, height: r.height },
+    g
+  ), v = t.artboard.x + m.x, l = t.artboard.y + m.y, w = v + m.width / 2, S = l + m.height / 2;
+  return {
+    success: !0,
+    element: new wt({
+      ...e,
+      x: w,
+      y: S,
+      imageUrl: n,
+      imageAspectRatio: r.aspectRatio,
+      preserveDimensions: !0,
+      // Don't recalculate dimensions on image load
+      transformData: {
+        type: "image",
+        width: m.width,
+        height: m.height,
+        cropX: ((P = e.transformData) == null ? void 0 : P.cropX) ?? 0,
+        cropY: ((I = e.transformData) == null ? void 0 : I.cropY) ?? 0,
+        cropWidth: ((F = e.transformData) == null ? void 0 : F.cropWidth) ?? 1,
+        cropHeight: ((b = e.transformData) == null ? void 0 : b.cropHeight) ?? 1,
+        flipHorizontal: ((N = e.transformData) == null ? void 0 : N.flipHorizontal) ?? !1,
+        flipVertical: ((x = e.transformData) == null ? void 0 : x.flipVertical) ?? !1,
+        borderRadius: ((f = e.transformData) == null ? void 0 : f.borderRadius) ?? 0
+      }
+    }),
+    placement: {
+      artworkSize: { width: r.width, height: r.height },
+      finalSize: { width: m.width, height: m.height },
+      position: { x: w, y: S },
+      scale: m.scale
+    }
+  };
+}
+function mr(n) {
+  return new Promise((t) => setTimeout(t, n));
+}
+const K = re("SnowconeCanvas");
+function Ae(n, t, e, a) {
+  if (a <= 0 || !isFinite(a))
+    return e;
+  const r = n * e, g = t * e;
+  if (Math.max(r, g) <= a)
+    return e;
+  const v = Math.max(n, t), l = a / v;
+  return Math.min(l, e);
+}
+const Je = je((n, t) => {
+  const {
+    exportConfig: e,
+    imageConfig: a,
+    layoutConfig: r,
+    kit: g,
+    artboards: m,
+    activeArtboard: v,
+    onArtboardChange: l,
+    initialElements: w,
+    onChange: S,
+    onSelectionChange: B,
+    autoExportInterval: P,
+    onExport: I,
+    onExportScheduled: F,
+    onExportStatus: b,
+    onExportReady: N,
+    onImageLoad: x,
+    onImageError: f,
+    onError: A,
+    onReady: C,
+    className: H,
+    style: j,
+    enableShortcuts: ne,
+    overlay: ae
+  } = n, ke = P, q = n.autoExportConfig ?? (e == null ? void 0 : e.autoExportConfig), V = n.autoExportFormat ?? (e == null ? void 0 : e.format) ?? "dataUrl", ge = n.autoExportAll ?? (e == null ? void 0 : e.exportAll) ?? !1, O = n.exportScale ?? (e == null ? void 0 : e.scale) ?? 2, D = n.maxExportSize ?? (e == null ? void 0 : e.maxSize) ?? 4e3, oe = n.exportImageFormat ?? (e == null ? void 0 : e.imageFormat) ?? "png", se = n.exportImageQuality ?? (e == null ? void 0 : e.imageQuality) ?? 0.92, W = n.initialImage ?? (a == null ? void 0 : a.src), Re = n.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", Ie = n.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, Me = n.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", Qe = n.width ?? (r == null ? void 0 : r.width) ?? 1200, qe = n.height ?? (r == null ? void 0 : r.height) ?? 1200, Ze = n.viewPadding ?? (r == null ? void 0 : r.viewPadding) ?? 0.9, _e = n.artboardBorderRadius ?? (r == null ? void 0 : r.artboardBorderRadius) ?? 0, et = n.fixedMargin ?? (r == null ? void 0 : r.fixedMargin), tt = n.maxHeight ?? (r == null ? void 0 : r.maxHeight), rt = n.showRotationHandle ?? (r == null ? void 0 : r.showRotationHandle) ?? !0, nt = n.hideCanvas ?? (r == null ? void 0 : r.hideCanvas) ?? !1, Ce = n.canvasWrapperClassName ?? (r == null ? void 0 : r.canvasWrapperClassName), Fe = n.canvasWrapperStyle ?? (r == null ? void 0 : r.canvasWrapperStyle), at = n.canvasCutouts ?? (r == null ? void 0 : r.canvasCutouts), Ne = n.pieceGuides, ot = n.pieceFocus, st = ne ?? !0, Z = Ye(() => $t(g ?? "pro-studio"), [g]);
+  E(() => {
+    var o;
+    if (typeof Q < "u" && ((o = Q.env) == null ? void 0 : o.NODE_ENV) === "development" && Z) {
+      const s = Ht(Z);
+      s.valid || K.warn("Kit validation warnings:", s.errors), s.warnings.length > 0 && K.warn("Kit validation warnings:", s.warnings);
+    }
+  }, [Z]);
+  const ie = M(A);
+  ie.current = A;
+  const L = z((o) => {
+    var s;
+    K.error(`[${o.category}] ${o.message}`, o.originalError), (s = ie.current) == null || s.call(ie, o);
+  }, []);
+  E(() => (Ee.onRenderError = L, () => {
+    Ee.onRenderError === L && (Ee.onRenderError = null);
+  }), [L]);
+  const {
+    elements: X,
+    setElements: ce,
+    selectedId: Te,
+    artboardManager: k,
+    refreshArtboards: it,
+    historyManager: ct,
+    isCanvasReady: pe,
+    setCanvasReady: le
+  } = St(), { createArtboard: lt, selectArtboard: dt, artboards: T } = Kt(), { exportArtboard: G, exportAllArtboards: de, exportArtboardAsBlob: J, exportAllArtboardsAsBlobs: ue } = Yt();
+  Et(t, () => ({
+    exportArtboards: async (o = {}) => {
+      const s = o.format || V, y = o.scale || O, i = o.all ?? !1;
+      let d = y;
+      if (D > 0 && isFinite(D))
+        for (const c of T) {
+          const h = Ae(c.width, c.height, y, D);
+          d = Math.min(d, h);
+        }
+      const u = { scale: d, format: oe, quality: se };
+      if (i) {
+        const c = s === "blob" ? await ue(u) : await de(u), h = {};
+        for (const [R, $] of Object.entries(c)) {
+          const U = T.find((_) => _.id === R);
+          U && (h[U.name] = $);
+        }
+        return h;
+      } else {
+        const c = k.getActiveArtboard();
+        if (!c)
+          throw new Error("[SnowconeCanvas] No active artboard found");
+        if (s === "blob") {
+          const h = await J(c.id, u);
+          return { [c.name]: h };
+        } else {
+          const h = await G(c.id, u);
+          return { [c.name]: h };
+        }
+      }
+    }
+  }), [G, de, J, ue, V, O, D, oe, se, k, T]), E(() => {
+    N && N(async () => {
+      const s = k.getActiveArtboard();
+      if (!s)
+        throw new Error("[SnowconeCanvas] No active artboard found");
+      const y = Ae(
+        s.width,
+        s.height,
+        O,
+        D
+      ), i = V === "blob" ? await J(s.id, { scale: y }) : await G(s.id, { scale: y });
+      return { [s.name]: i };
+    });
+  }, [N, G, J, k, V, O, D]);
+  const [Pe, fe] = te("idle"), [Be, be] = te(null), ve = M(void 0), ye = M(!1), Le = M(!1), [ut, ft] = te(!1), mt = M(0), ht = M(0), we = M(!1);
+  E(() => {
+    if (ye.current) return;
+    ye.current = !0;
+    const o = m || [{ name: "Design", width: Qe, height: qe }], s = k.getAllArtboards();
+    if (s.length > 0) {
+      const y = o[0], i = s[0], d = Ne ? "transparent" : void 0, u = (c) => c.exportBackground ?? (!!c.backgroundColor && c.backgroundColor !== "transparent");
+      i.name = y.name, i.width = y.width, i.height = y.height, i.clipShape = y.clipShape, i.exportBackground = u(y), y.backgroundColor ? i.backgroundColor = y.backgroundColor : d && (i.backgroundColor = d);
+      for (let c = 1; c < o.length; c++)
+        lt(o[c].width, o[c].height, {
+          name: o[c].name,
+          backgroundColor: o[c].backgroundColor ?? d,
+          exportBackground: u(o[c]),
+          clipShape: o[c].clipShape
+        });
+      !v && o.length > 1 && k.setActiveArtboard(i.id);
+    }
+    it();
+  }, []), E(() => {
+    if (!(!w || w.length === 0) && !Le.current && ye.current) {
+      Le.current = !0, ft(!0);
+      try {
+        const o = Vt.createManyFromJSON(w), s = k.getAllArtboards();
+        if (s.length > 0) {
+          const i = new Map(s.map((d) => [d.name, d]));
+          o.forEach((d, u) => {
+            var R;
+            const c = (R = w[u]) == null ? void 0 : R.artboard, h = c && i.get(c) || s[0];
+            k.addElementToArtboard(d.id, h.id);
+          });
+        }
+        ce(o);
+        const y = /* @__PURE__ */ new Set();
+        for (const i of o) {
+          const d = i.fontFamily;
+          typeof d == "string" && d.trim().length > 0 && y.add(d);
+        }
+        if (y.size > 0 && typeof document < "u") {
+          const i = document.fonts ?? null, d = Array.from(y).map((u) => {
+            const c = `font-${u.replace(/\s+/g, "-").toLowerCase()}`;
+            let h = document.getElementById(c);
+            return h || (h = document.createElement("link"), h.id = c, h.rel = "stylesheet", h.href = `https://fonts.googleapis.com/css2?family=${u.replace(
+              /\s+/g,
+              "+"
+            )}:wght@400;700&display=swap`, document.head.appendChild(h)), new Promise((R) => {
+              if (h.sheet) {
+                R(u);
+                return;
+              }
+              const $ = () => R(u);
+              h.addEventListener("load", $, { once: !0 }), h.addEventListener("error", $, { once: !0 }), setTimeout($, 4e3);
+            });
+          });
+          Promise.all(d).then((u) => {
+            if (i)
+              return Promise.all(
+                u.flatMap((c) => [
+                  i.load(`400 16px "${c}"`).catch(() => {
+                  }),
+                  i.load(`700 16px "${c}"`).catch(() => {
+                  })
+                ])
+              );
+          }).then(() => {
+            ce((u) => u.slice());
+          });
+        }
+      } catch (o) {
+        K.error("Failed to load initial elements:", o);
+        const s = o instanceof Error ? o : new Error(String(o));
+        L({
+          category: "import",
+          message: `Failed to load initial elements: ${s.message}`,
+          originalError: s,
+          recoverable: !0
+        });
+      }
+    }
+  }, [w, k, ce, L]), E(() => {
+    if (!v) {
+      we.current = !0;
+      return;
+    }
+    const o = T.find((s) => s.name === v);
+    if (o) {
+      const s = k.getActiveArtboard();
+      (s == null ? void 0 : s.name) !== v && dt(o.id), we.current = !0;
+    }
+  }, [v, T]), E(() => {
+    if (!W || ve.current === W) return;
+    if (X.length > 0) {
+      ve.current = W;
+      return;
+    }
+    ve.current = W, (async () => {
+      fe("loading"), be(null);
+      try {
+        const s = k.getAllArtboards();
+        if (s.length === 0)
+          throw new Error("No artboards available");
+        const y = [];
+        for (const i of s) {
+          const d = m == null ? void 0 : m.find((h) => h.name === i.name), u = (d == null ? void 0 : d.scaleMode) || Me, c = await fr(
+            W,
+            {
+              artboard: {
+                width: i.width,
+                height: i.height,
+                x: i.x,
+                y: i.y
+              },
+              alignment: (d == null ? void 0 : d.fitAlign) || Re,
+              scale: Ie,
+              scaleMode: u,
+              marginTop: d == null ? void 0 : d.fitMarginTop,
+              marginRight: d == null ? void 0 : d.fitMarginRight,
+              marginBottom: d == null ? void 0 : d.fitMarginBottom,
+              marginLeft: d == null ? void 0 : d.fitMarginLeft
+            }
+          );
+          c.success && c.element ? (k.addElementToArtboard(c.element.id, i.id), y.push(c.element)) : K.error("Failed to load image for artboard:", i.name, c.error);
+        }
+        if (y.length > 0)
+          ce((i) => [...i, ...y]), fe("success"), x == null || x(W);
+        else {
+          const i = new Error("Failed to load image into any artboard");
+          fe("error"), be(i), f == null || f(W, i), L({
+            category: "image",
+            message: i.message,
+            originalError: i,
+            recoverable: !0
+          });
+        }
+      } catch (s) {
+        const y = s instanceof Error ? s : new Error(String(s));
+        fe("error"), be(y), f == null || f(W, y), L({
+          category: "image",
+          message: y.message,
+          originalError: y,
+          recoverable: !0
+        });
+      }
+    })();
+  }, [W, Re, Ie, Me]);
+  const me = M(B);
+  me.current = B, E(() => {
+    var o;
+    (o = me.current) == null || o.call(me, Te);
+  }, [Te]);
+  const De = M(S);
+  De.current = S, E(() => {
+    const o = De.current;
+    if (!o) return;
+    const s = k.getActiveArtboard(), y = {
+      // 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: X.map((i) => {
+        const d = i.toJSON(), u = k.getArtboardForElement(i.id);
+        return u ? { ...d, artboard: u.name } : d;
+      }),
+      artboards: T.map((i) => ({
+        name: i.name,
+        width: i.width,
+        height: i.height,
+        clipShape: i.clipShape,
+        backgroundColor: i.backgroundColor,
+        // Carried so serializeStateForServer / saved states keep an
+        // explicitly-set background renderable (mockup matches editor).
+        exportBackground: i.exportBackground
+      })),
+      activeArtboard: (s == null ? void 0 : s.name) || "Design"
+    };
+    o(y);
+  }, [X, T]), E(() => {
+    if (!l || !we.current) return;
+    const o = k.getActiveArtboard();
+    o && l(o.name);
+  }, [k.getActiveArtboardId()]);
+  const gt = z(async () => {
+    if (!I && !b) return;
+    const o = ++ht.current, s = Date.now();
+    let y = O;
+    if (D > 0 && isFinite(D))
+      for (const u of T) {
+        const c = Ae(u.width, u.height, O, D);
+        y = Math.min(y, c);
+      }
+    const i = k.getActiveArtboard(), d = (i == null ? void 0 : i.id) ?? "unknown";
+    b == null || b({ status: "rendering", artboardId: d }), mt.current = s;
+    try {
+      let u;
+      const c = {
+        format: oe,
+        scale: y,
+        quality: se
+      };
+      if (V === "blob")
+        if (ge) {
+          const h = await ue(c);
+          u = {};
+          for (const [R, $] of Object.entries(h)) {
+            const U = T.find((_) => _.id === R);
+            U && (u[U.name] = $);
+          }
+        } else {
+          const h = k.getActiveArtboard();
+          if (!h) return;
+          const R = await J(h.id, c);
+          u = { [h.name]: R };
+        }
+      else if (ge) {
+        const h = await de(c);
+        u = {};
+        for (const [R, $] of Object.entries(h)) {
+          const U = T.find((_) => _.id === R);
+          U && (u[U.name] = $);
+        }
+      } else {
+        const h = k.getActiveArtboard();
+        if (!h) return;
+        const R = await G(h.id, c);
+        u = { [h.name]: R };
+      }
+      I == null || I(u), b == null || b({ status: "complete", artboardId: d, result: u });
+    } catch (u) {
+      const c = u instanceof Error ? u.message : String(u);
+      if (c.includes("Canvas ref not available"))
+        return;
+      const h = Date.now() - s;
+      K.error("Export failed (export #" + o + "):", {
+        duration: `${h}ms`,
+        error: c
+      });
+      const R = u instanceof Error ? u : new Error(c);
+      b == null || b({ status: "error", artboardId: d, error: R }), L({
+        category: "export",
+        message: R.message,
+        originalError: R,
+        artboardId: d,
+        recoverable: !0
+      });
+    }
+  }, [I, b, ge, V, O, D, oe, se, G, de, J, ue, T, k, X, q, L]);
+  E(() => {
+    ke !== void 0 && ke > 0 && K.warn(
+      "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
+    );
+  }, []), E(() => {
+  }, [X]);
+  const pt = z(() => {
+    if (F == null || F(), b) {
+      const o = k.getActiveArtboard();
+      b({ status: "scheduled", artboardId: (o == null ? void 0 : o.id) ?? "unknown" });
+    }
+  }, [F, b, k]), bt = !!w && w.length > 0, xe = ar({
+    isCanvasReady: pe,
+    elements: X,
+    hasInitialElements: bt,
+    initialElementsLoaded: ut
+  }), We = M(!1);
+  E(() => {
+    xe && !We.current && (We.current = !0, C == null || C());
+  }, [xe, C]), er({
+    config: q ? {
+      enabled: q.enabled ?? !0,
+      debounceMs: q.debounceMs ?? 100,
+      maxWaitMs: q.maxWaitMs ?? 1e3
+    } : {
+      enabled: !1
+      // Only use smart export if autoExportConfig is provided
+    },
+    historyManager: ct,
+    artboards: T,
+    elements: X,
+    onExport: gt,
+    onExportScheduled: pt,
+    isCanvasReady: xe
+    // Gate exports until content is fully ready (fonts loaded, elements deserialized)
+  }), E(() => {
+    if (T.length > 0 && !pe) {
+      const o = requestAnimationFrame(() => {
+        le(!0);
+      });
+      return () => cancelAnimationFrame(o);
+    }
+  }, [T.length, pe, le]), E(() => () => {
+    le(!1);
+  }, [le]);
+  const vt = z((o) => {
+    L({
+      category: "unknown",
+      message: o.message,
+      originalError: o,
+      recoverable: !1
+    });
+  }, [L]);
+  return Pe === "loading" ? /* @__PURE__ */ p(
+    "div",
+    {
+      className: H,
+      style: {
+        ...j,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--surface, #f5f5f5)"
+      },
+      children: /* @__PURE__ */ p(Ut, { size: 48 })
+    }
+  ) : Pe === "error" && Be ? /* @__PURE__ */ p(
+    "div",
+    {
+      className: H,
+      style: {
+        ...j,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--surface, #f5f5f5)",
+        color: "var(--danger, #dc2626)",
+        padding: "1rem"
+      },
+      children: /* @__PURE__ */ Y("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: Be.message })
+      ] })
+    }
+  ) : /* @__PURE__ */ p(zt, { kit: Z, children: /* @__PURE__ */ p("div", { className: `sc-root ${H || ""}`, style: { ...j, position: "relative" }, children: /* @__PURE__ */ Y(
+    Zt,
+    {
+      onError: vt,
+      fallback: (o, s) => /* @__PURE__ */ Y(
+        "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: o.message }),
+            /* @__PURE__ */ p(
+              "button",
+              {
+                onClick: s,
+                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: [
+        !nt && /* @__PURE__ */ (() => {
+          const o = /* @__PURE__ */ p(
+            Ot,
+            {
+              style: { width: "100%" },
+              fitPadding: Ze,
+              artboardBorderRadius: _e,
+              fixedMargin: et,
+              maxHeight: tt,
+              showRotationHandle: rt,
+              enableShortcuts: st,
+              canvasCutouts: at,
+              pieceGuides: Ne,
+              pieceFocus: ot
+            }
+          );
+          return /* @__PURE__ */ p(Qt, { kit: Z, canvas: Ce || Fe ? /* @__PURE__ */ p("div", { className: Ce, style: Fe, children: o }) : o });
+        })(),
+        ae
+      ]
+    }
+  ) }) });
+});
+Je.displayName = "SnowconeCanvasInner";
+const hr = je((n, t) => {
+  var l;
+  const { inheritTheme: e, externalProvider: a, services: r } = n, g = n.viewPadding ?? ((l = n.layoutConfig) == null ? void 0 : l.viewPadding), m = /* @__PURE__ */ p(Je, { ref: t, ...n }), v = a ? /* @__PURE__ */ p($e, { defaultTheme: "light", passive: e, children: m }) : /* @__PURE__ */ p($e, { defaultTheme: "light", passive: e, children: /* @__PURE__ */ p(At, { viewPadding: g, children: m }) });
+  return r ? /* @__PURE__ */ p(Xt, { services: r, children: v }) : v;
+});
+hr.displayName = "SnowconeCanvas";
+export {
+  Zt as E,
+  hr as S,
+  ar as a,
+  er as u
+};
+//# sourceMappingURL=SnowconeCanvas-C3eZ9PP8.js.map