@snowcone-app/canvas 0.17.1 → 0.17.3

package/dist/SnowconeCanvas-C3eZ9PP8.js

@@ -1,1047 +0,0 @@
-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