@snowcone-app/canvas 0.17.3 → 0.18.0

package/dist/SnowconeCanvas-C_O-aeaQ.js

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