@snowcone-app/canvas 0.37.0 → 0.38.0

package/dist/SnowconeCanvas-BaFR8QXs.js

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