@snowcone-app/canvas 0.8.1 → 0.11.0

package/dist/design-builder-CM5wSK5w.js

@@ -1,1467 +0,0 @@
-import { c as _, y as X, z as Fe, I as Mt, T as te } from "./HybridHistoryManager-DANuzx7G.js";
-import { jsxs as q, jsx as x, Fragment as ee } from "react/jsx-runtime";
-import { useCallback as B, useMemo as pt, useRef as M, useEffect as k, Component as He, useState as ot, forwardRef as re, useImperativeHandle as $e } from "react";
-import { u as ne, T as Xt, E as We, c as Tt, b as oe } from "./ThemeContext-U-VDtIiS.js";
-import { af as Vt, ag as jt, a7 as Be, a8 as Kt, a4 as Pe, N as Le, w as Ue, x as ze, z as Oe, G as Ye, j as Xe, p as Ve, a2 as je, Q as Gt, q as Ke, k as Ge, s as qe, r as Je, v as Qe, u as Ze, f as _e, W as tr, L as er, a as rr, m as nr } from "./validation-CZ4CZV5B.js";
-import { C as Rt, E as or } from "./ImportManager-NCtkY5Z0.js";
-const qt = _("useCommands");
-function ar() {
-  const t = ne(), {
-    undo: e,
-    redo: r,
-    canUndo: o,
-    canRedo: n,
-    executeElementUpdate: a,
-    executeAddElement: i,
-    executeRemoveElement: s,
-    executeReorderElement: c,
-    executeCommandBatch: u,
-    executeCreateArtboard: E,
-    executeDeleteArtboard: D,
-    executeUpdateArtboard: C
-  } = t, R = B(() => {
-    qt.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), T = B((g) => {
-    qt.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
-  }, []);
-  return {
-    // Undo/Redo
-    undo: e,
-    redo: r,
-    canUndo: o,
-    canRedo: n,
-    // History management
-    clearHistory: R,
-    clearArtboardHistory: T,
-    // Command execution
-    executeElementUpdate: a,
-    executeAddElement: i,
-    executeRemoveElement: s,
-    executeReorderElement: c,
-    executeCreateArtboard: E,
-    executeDeleteArtboard: D,
-    executeUpdateArtboard: C,
-    // Batch execution
-    executeCommandBatch: u
-  };
-}
-const ir = () => {
-  const { undo: t, redo: e, canUndo: r, canRedo: o } = ar();
-  return /* @__PURE__ */ q("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
-    /* @__PURE__ */ x(
-      Vt,
-      {
-        icon: jt.undo,
-        onClick: t,
-        disabled: !r,
-        tooltip: "Undo",
-        "aria-label": "Undo"
-      }
-    ),
-    /* @__PURE__ */ x(
-      Vt,
-      {
-        icon: jt.redo,
-        onClick: e,
-        disabled: !o,
-        tooltip: "Redo",
-        "aria-label": "Redo"
-      }
-    )
-  ] });
-}, ae = _("KitLayout"), nt = "canvas", St = 320;
-let Jt = !1;
-function sr() {
-  Jt || (Jt = !0, Be({
-    LayersPanel: Le,
-    EffectsPanel: Ue,
-    ExportPanel: ze,
-    ImagePanel: Oe,
-    GlyphPanel: Ye,
-    ArtboardTabs: Xe,
-    ContextualToolbars: Ve,
-    ZoomControls: je,
-    MenuButton: Gt,
-    CropPanel: Ke
-  }), Kt("add-element-menu", {
-    component: Gt,
-    label: "Add Element",
-    icon: "gravity-ui:plus",
-    position: "topbar"
-  }), Kt("undo-redo-controls", {
-    component: ir,
-    label: "Undo / Redo",
-    icon: "lucide:undo-2",
-    position: "topbar"
-  }));
-}
-function gt({ ids: t }) {
-  return !t || t.length === 0 ? null : /* @__PURE__ */ x(ee, { children: t.map((e) => {
-    var n;
-    if (e === nt) return null;
-    const r = Pe(e);
-    if (!r)
-      return typeof X < "u" && ((n = X.env) == null ? void 0 : n.NODE_ENV) === "development" && ae.warn(
-        `Kit layout references unknown section "${e}" — skipping. Register it with registerSection("${e}", { ... }).`
-      ), null;
-    const o = r.component;
-    return /* @__PURE__ */ x(o, {}, e);
-  }) });
-}
-function cr({ kit: t, canvas: e }) {
-  var D, C, R, T;
-  sr();
-  const r = t.layout.slots, o = !!((D = r.topbar) != null && D.some((g) => g !== nt)), n = !!((C = r.left) != null && C.some((g) => g !== nt)), a = !!((R = r.right) != null && R.some((g) => g !== nt)), i = !!((T = r.bottombar) != null && T.some((g) => g !== nt)), s = pt(
-    () => !o && !n && !a && !i,
-    [o, n, a, i]
-  ), c = M(null), u = o || n || a || i, E = M(!1);
-  return k(() => {
-    var p;
-    if (typeof X > "u" || ((p = X.env) == null ? void 0 : p.NODE_ENV) !== "development" || !u) return;
-    const g = c.current;
-    if (!g || typeof ResizeObserver > "u") return;
-    const F = (w) => {
-      w > 0 && w < St && !E.current ? (E.current = !0, ae.warn(
-        `Kit "${t.name}" declares chrome (toolbar / panels) but its container is only ${Math.round(w)}px wide — below the ~${St}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.`
-      )) : w >= St && (E.current = !1);
-    };
-    F(g.getBoundingClientRect().width);
-    const S = new ResizeObserver((w) => {
-      for (const v of w) F(v.contentRect.width);
-    });
-    return S.observe(g), () => S.disconnect();
-  }, [u, t.name]), s ? /* @__PURE__ */ x(ee, { children: e }) : /* @__PURE__ */ q("div", { ref: c, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    o && /* @__PURE__ */ x(
-      "div",
-      {
-        className: "sc-kit-topbar toolbar",
-        style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", flexShrink: 0 },
-        children: /* @__PURE__ */ x(gt, { ids: r.topbar })
-      }
-    ),
-    /* @__PURE__ */ q("div", { className: "sc-kit-body", style: { display: "flex", flex: 1, minHeight: 0 }, children: [
-      n && /* @__PURE__ */ x("div", { className: "sc-kit-left", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ x(gt, { ids: r.left }) }),
-      /* @__PURE__ */ x("div", { className: "sc-kit-canvas", style: { flex: 1, minWidth: 0, position: "relative" }, children: e }),
-      a && /* @__PURE__ */ x("div", { className: "sc-kit-right", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ x(gt, { ids: r.right }) })
-    ] }),
-    i && /* @__PURE__ */ x(
-      "div",
-      {
-        className: "sc-kit-bottombar toolbar",
-        style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 },
-        children: /* @__PURE__ */ x(gt, { ids: r.bottombar })
-      }
-    )
-  ] });
-}
-const lr = _("ErrorBoundary");
-class dr 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, r) {
-    if (lr.error("Caught error:", e, r), this.props.onError && this.props.onError(e, r), this.props.onCanvasError) {
-      const o = {
-        category: "unknown",
-        message: e.message,
-        originalError: e,
-        recoverable: !1
-      };
-      this.props.onCanvasError(o);
-    }
-  }
-  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__ */ q(
-      "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__ */ x("h2", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 }, children: "Something went wrong" }),
-          /* @__PURE__ */ x(
-            "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__ */ x(
-            "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 ur = _("useAutoExport");
-function hr(t) {
-  const { config: e, historyManager: r, artboards: o, elements: n, onExport: a, onExportScheduled: i, isCanvasReady: s = !1 } = t, c = M(null), u = M(!1), E = M({
-    totalExports: 0,
-    skippedExports: 0,
-    lastExportTime: null,
-    avgExportInterval: 0
-  }), [D, C] = ot(E.current), R = M(a);
-  R.current = a, k(() => {
-    const p = new Ge({
-      ...qe,
-      ...e
-    });
-    return p.onExport(async () => {
-      try {
-        await R.current(), E.current = p.getStats();
-      } catch (w) {
-        ur.error("[useAutoExport] Export failed:", w);
-      }
-    }), c.current = p, () => {
-      p.destroy();
-    };
-  }, []), k(() => {
-    s && u.current && c.current && (u.current = !1, c.current.forceExport());
-  }, [s]), k(() => {
-    c.current && e && c.current.updateConfig(e);
-  }, [e == null ? void 0 : e.enabled, e == null ? void 0 : e.debounceMs, e == null ? void 0 : e.maxWaitMs]), k(() => {
-    c.current && i && c.current.onExportScheduled(i);
-  }, [i]), k(() => {
-    if (!r || !c.current)
-      return;
-    const p = r.onCommandExecuted(() => {
-      if (c.current) {
-        if (!s) {
-          u.current = !0;
-          return;
-        }
-        c.current.scheduleExport();
-      }
-    });
-    return () => {
-      p();
-    };
-  }, [r, s]), k(() => {
-    if (c.current) {
-      if (!s) {
-        u.current = !0;
-        return;
-      }
-      c.current.scheduleExport();
-    }
-  }, [n, o, s]), k(() => Fe((w) => {
-    if (!c.current || !s) return;
-    n.some((W) => W.id === w) && c.current.scheduleExport();
-  }), [n, s]);
-  const T = B((p) => {
-    c.current && c.current.updateConfig(p);
-  }, []), g = B(async () => {
-    c.current && (await c.current.forceExport(), E.current = c.current.getStats(), C(E.current));
-  }, []), F = B(() => {
-    c.current && (c.current.resetStats(), E.current = c.current.getStats(), C(E.current));
-  }, []), S = B(() => {
-    c.current && c.current.resetChangeDetection();
-  }, []);
-  return {
-    stats: D,
-    updateConfig: T,
-    forceExport: g,
-    resetStats: F,
-    resetChangeDetection: S
-  };
-}
-const ie = _("useContentReady");
-function fr(t) {
-  var r;
-  const e = /* @__PURE__ */ new Set();
-  for (const o of t)
-    if ("fontFamily" in o && typeof o.fontFamily == "string" && o.fontFamily && e.add(o.fontFamily), "getRichText" in o && typeof o.getRichText == "function")
-      try {
-        const n = o.getRichText();
-        if (n != null && n.spans)
-          for (const a of n.spans)
-            (r = a.style) != null && r.fontFamily && e.add(a.style.fontFamily);
-      } catch {
-      }
-  return Array.from(e);
-}
-async function mr(t) {
-  if (t.length === 0 || typeof document > "u" || !document.fonts) return;
-  const e = [];
-  for (const r of t) {
-    const o = `16px "${r}"`;
-    e.push(document.fonts.load(o));
-  }
-  await Promise.all(e), document.fonts.ready && await Promise.race([
-    document.fonts.ready,
-    new Promise((r) => setTimeout(r, 250))
-  ]), ie.debug(`Awaited ${e.length} font(s)`);
-}
-function gr() {
-  return new Promise((t) => requestAnimationFrame(() => t()));
-}
-function pr(t) {
-  const { isCanvasReady: e, elements: r, hasInitialElements: o, initialElementsLoaded: n } = t, [a, i] = ot(!1), s = M(!1);
-  return k(() => {
-    if (a || !e || o && !n || o && r.length === 0 || s.current) return;
-    s.current = !0;
-    let c = !1;
-    return (async () => {
-      try {
-        const u = fr(r);
-        if (u.length > 0 && (await mr(u), c) || (await gr(), c)) return;
-        i(!0);
-      } catch (u) {
-        ie.error("Error during content readiness check:", u), c || i(!0);
-      } finally {
-        s.current = !1;
-      }
-    })(), () => {
-      c = !0, s.current = !1;
-    };
-  }, [e, r, o, n, a]), a;
-}
-const br = {
-  // 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 yr(t) {
-  return t && br[t] || "c";
-}
-function vr(t, e) {
-  const r = e.scaleMode || "cover", o = (r === "contain" ? e.marginTop : 0) || 0, n = (r === "contain" ? e.marginRight : 0) || 0, a = (r === "contain" ? e.marginBottom : 0) || 0, i = (r === "contain" ? e.marginLeft : 0) || 0, s = e.width - i - n, c = e.height - o - a, u = s / t.width, E = c / t.height, D = r === "contain" ? Math.min(u, E) : Math.max(u, E), C = e.scale || 1, R = D * C, T = t.width * R, g = t.height * R, F = e.align || "c";
-  let S = 0, p = 0;
-  const w = T - s, v = g - c;
-  switch (F) {
-    // Top row
-    case "tl":
-      S = 0, p = 0;
-      break;
-    case "t":
-      S = -w / 2, p = 0;
-      break;
-    case "tr":
-      S = -w, p = 0;
-      break;
-    // Middle row
-    case "l":
-      S = 0, p = -v / 2;
-      break;
-    case "c":
-    // Center (default)
-    default:
-      S = -w / 2, p = -v / 2;
-      break;
-    case "r":
-      S = -w, p = -v / 2;
-      break;
-    // Bottom row
-    case "bl":
-      S = 0, p = -v;
-      break;
-    case "b":
-      S = -w / 2, p = -v;
-      break;
-    case "br":
-      S = -w, p = -v;
-      break;
-  }
-  S += i, p += o;
-  const W = e.offsetX || 0, H = e.offsetY || 0, O = w, at = v;
-  return S += W * O, p += H * at, S = Math.round(S), p = Math.round(p), {
-    // Final scale to apply to artwork
-    scale: R,
-    // Final artwork dimensions after scaling
-    width: Math.round(T),
-    height: Math.round(g),
-    // Position to draw artwork (relative to artboard origin)
-    x: S,
-    y: p,
-    // Debug info
-    debug: {
-      coverScale: D,
-      userScale: C,
-      overflow: { x: w, y: v },
-      alignment: F,
-      appliedOffset: { x: W * O, y: H * at }
-    }
-  };
-}
-const xr = {
-  timeout: 3e4,
-  retries: 1,
-  retryDelay: 1e3,
-  validateUrl: !0
-};
-function wr(t) {
-  try {
-    const e = new URL(t);
-    return ["http:", "https:", "data:", "blob:"].includes(e.protocol);
-  } catch {
-    return !1;
-  }
-}
-async function Er(t, e = {}) {
-  const r = { ...xr, ...e };
-  if (r.validateUrl && !wr(t))
-    return {
-      success: !1,
-      error: new Error(`Invalid image URL: ${t}`)
-    };
-  let o;
-  for (let n = 0; n <= r.retries; n++)
-    try {
-      return await Ar(t, r.timeout);
-    } catch (a) {
-      o = a instanceof Error ? a : new Error(String(a)), n < r.retries && await Sr(r.retryDelay);
-    }
-  return {
-    success: !1,
-    error: o || new Error("Failed to load image after retries")
-  };
-}
-function Ar(t, e) {
-  return new Promise((r) => {
-    const o = new Image();
-    o.crossOrigin = "anonymous";
-    let n = null, a = !1;
-    const i = () => {
-      n && (clearTimeout(n), n = null);
-    }, s = () => {
-      if (a) return;
-      a = !0, i();
-      const u = o.naturalWidth || o.width, E = o.naturalHeight || o.height;
-      r({
-        success: !0,
-        element: o,
-        width: u,
-        height: E,
-        aspectRatio: E > 0 ? u / E : 1
-      });
-    }, c = (u) => {
-      a || (a = !0, i(), r({
-        success: !1,
-        error: new Error(u)
-      }));
-    };
-    o.onload = s, o.onerror = () => {
-      c(`Failed to load image: ${t}`);
-    }, n = setTimeout(() => {
-      c(`Image load timed out after ${e}ms: ${t}`);
-    }, e), o.src = t;
-  });
-}
-async function Rr(t, e, r = {}, o = {}) {
-  var C, R, T, g, F, S, p;
-  const n = await Er(t, o);
-  if (!n.success || !n.width || !n.height)
-    return {
-      success: !1,
-      error: n.error || new Error("Failed to get image dimensions")
-    };
-  const a = {
-    width: e.artboard.width,
-    height: e.artboard.height,
-    scale: e.scale,
-    align: yr(e.alignment),
-    offsetX: e.offsetX,
-    offsetY: e.offsetY,
-    scaleMode: e.scaleMode,
-    marginTop: e.marginTop,
-    marginRight: e.marginRight,
-    marginBottom: e.marginBottom,
-    marginLeft: e.marginLeft
-  }, i = vr(
-    { width: n.width, height: n.height },
-    a
-  ), s = e.artboard.x + i.x, c = e.artboard.y + i.y, u = s + i.width / 2, E = c + i.height / 2;
-  return {
-    success: !0,
-    element: new Mt({
-      ...r,
-      x: u,
-      y: E,
-      imageUrl: t,
-      imageAspectRatio: n.aspectRatio,
-      preserveDimensions: !0,
-      // Don't recalculate dimensions on image load
-      transformData: {
-        type: "image",
-        width: i.width,
-        height: i.height,
-        cropX: ((C = r.transformData) == null ? void 0 : C.cropX) ?? 0,
-        cropY: ((R = r.transformData) == null ? void 0 : R.cropY) ?? 0,
-        cropWidth: ((T = r.transformData) == null ? void 0 : T.cropWidth) ?? 1,
-        cropHeight: ((g = r.transformData) == null ? void 0 : g.cropHeight) ?? 1,
-        flipHorizontal: ((F = r.transformData) == null ? void 0 : F.flipHorizontal) ?? !1,
-        flipVertical: ((S = r.transformData) == null ? void 0 : S.flipVertical) ?? !1,
-        borderRadius: ((p = r.transformData) == null ? void 0 : p.borderRadius) ?? 0
-      }
-    }),
-    placement: {
-      artworkSize: { width: n.width, height: n.height },
-      finalSize: { width: i.width, height: i.height },
-      position: { x: u, y: E },
-      scale: i.scale
-    }
-  };
-}
-function Sr(t) {
-  return new Promise((e) => setTimeout(e, t));
-}
-const K = _("SnowconeCanvas");
-function kt(t, e, r, o) {
-  if (o <= 0 || !isFinite(o))
-    return r;
-  const n = t * r, a = e * r;
-  if (Math.max(n, a) <= o)
-    return r;
-  const s = Math.max(t, e), c = o / s;
-  return Math.min(c, r);
-}
-const se = re((t, e) => {
-  const {
-    exportConfig: r,
-    imageConfig: o,
-    layoutConfig: n,
-    kit: a,
-    artboards: i,
-    activeArtboard: s,
-    onArtboardChange: c,
-    initialElements: u,
-    onChange: E,
-    onSelectionChange: D,
-    autoExportInterval: C,
-    onExport: R,
-    onExportScheduled: T,
-    onExportStatus: g,
-    onExportReady: F,
-    onImageLoad: S,
-    onImageError: p,
-    onError: w,
-    onReady: v,
-    className: W,
-    style: H,
-    enableShortcuts: O,
-    overlay: at
-  } = t, Nt = C, tt = t.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), J = t.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", bt = t.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, V = t.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, L = t.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, it = t.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", st = t.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, U = t.initialImage ?? (o == null ? void 0 : o.src), Dt = t.initialImageAlignment ?? (o == null ? void 0 : o.alignment) ?? "center", Ft = t.initialImageScale ?? (o == null ? void 0 : o.scale) ?? 1, Ht = t.initialImageScaleMode ?? (o == null ? void 0 : o.scaleMode) ?? "cover", de = t.width ?? (n == null ? void 0 : n.width) ?? 1200, ue = t.height ?? (n == null ? void 0 : n.height) ?? 1200, he = t.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, fe = t.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, me = t.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), ge = t.maxHeight ?? (n == null ? void 0 : n.maxHeight), pe = t.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, be = t.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, $t = t.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), Wt = t.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), ye = t.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), Bt = t.pieceGuides, ve = t.pieceFocus, xe = O ?? !0, et = pt(() => Je(a ?? "pro-studio"), [a]);
-  k(() => {
-    var l;
-    if (typeof X < "u" && ((l = X.env) == null ? void 0 : l.NODE_ENV) === "development" && et) {
-      const d = Qe(et);
-      d.valid || K.warn("Kit validation warnings:", d.errors), d.warnings.length > 0 && K.warn("Kit validation warnings:", d.warnings);
-    }
-  }, [et]);
-  const ct = M(w);
-  ct.current = w;
-  const P = B((l) => {
-    var d;
-    K.error(`[${l.category}] ${l.message}`, l.originalError), (d = ct.current) == null || d.call(ct, l);
-  }, []);
-  k(() => (Rt.onRenderError = P, () => {
-    Rt.onRenderError === P && (Rt.onRenderError = null);
-  }), [P]);
-  const {
-    elements: j,
-    setElements: lt,
-    selectedId: Pt,
-    artboardManager: I,
-    refreshArtboards: we,
-    historyManager: Ee,
-    isCanvasReady: yt,
-    setCanvasReady: dt
-  } = ne(), { createArtboard: Ae, selectArtboard: Re, artboards: $ } = Ze(), { exportArtboard: Q, exportAllArtboards: ut, exportArtboardAsBlob: Z, exportAllArtboardsAsBlobs: ht } = _e();
-  $e(e, () => ({
-    exportArtboards: async (l = {}) => {
-      const d = l.format || J, A = l.scale || V, h = l.all ?? !1;
-      let m = A;
-      if (L > 0 && isFinite(L))
-        for (const b of $) {
-          const y = kt(b.width, b.height, A, L);
-          m = Math.min(m, y);
-        }
-      const f = { scale: m, format: it, quality: st };
-      if (h) {
-        const b = d === "blob" ? await ht(f) : await ut(f), y = {};
-        for (const [N, z] of Object.entries(b)) {
-          const Y = $.find((rt) => rt.id === N);
-          Y && (y[Y.name] = z);
-        }
-        return y;
-      } else {
-        const b = I.getActiveArtboard();
-        if (!b)
-          throw new Error("[SnowconeCanvas] No active artboard found");
-        if (d === "blob") {
-          const y = await Z(b.id, f);
-          return { [b.name]: y };
-        } else {
-          const y = await Q(b.id, f);
-          return { [b.name]: y };
-        }
-      }
-    }
-  }), [Q, ut, Z, ht, J, V, L, it, st, I, $]), k(() => {
-    F && F(async () => {
-      const d = I.getActiveArtboard();
-      if (!d)
-        throw new Error("[SnowconeCanvas] No active artboard found");
-      const A = kt(
-        d.width,
-        d.height,
-        V,
-        L
-      ), h = J === "blob" ? await Z(d.id, { scale: A }) : await Q(d.id, { scale: A });
-      return { [d.name]: h };
-    });
-  }, [F, Q, Z, I, J, V, L]);
-  const [Lt, ft] = ot("idle"), [Ut, vt] = ot(null), xt = M(void 0), wt = M(!1), zt = M(!1), [Se, ke] = ot(!1), Ce = M(0), Ie = M(0), Et = M(!1);
-  k(() => {
-    if (wt.current) return;
-    wt.current = !0;
-    const l = i || [{ name: "Design", width: de, height: ue }], d = I.getAllArtboards();
-    if (d.length > 0) {
-      const A = l[0], h = d[0], m = Bt ? "transparent" : void 0;
-      h.name = A.name, h.width = A.width, h.height = A.height, h.clipShape = A.clipShape, A.backgroundColor ? h.backgroundColor = A.backgroundColor : m && (h.backgroundColor = m);
-      for (let f = 1; f < l.length; f++)
-        Ae(l[f].width, l[f].height, {
-          name: l[f].name,
-          backgroundColor: l[f].backgroundColor ?? m,
-          clipShape: l[f].clipShape
-        });
-      !s && l.length > 1 && I.setActiveArtboard(h.id);
-    }
-    we();
-  }, []), k(() => {
-    if (!(!u || u.length === 0) && !zt.current && wt.current) {
-      zt.current = !0, ke(!0);
-      try {
-        const l = or.createManyFromJSON(u), d = I.getAllArtboards();
-        if (d.length > 0) {
-          const h = new Map(d.map((m) => [m.name, m]));
-          l.forEach((m, f) => {
-            var N;
-            const b = (N = u[f]) == null ? void 0 : N.artboard, y = b && h.get(b) || d[0];
-            I.addElementToArtboard(m.id, y.id);
-          });
-        }
-        lt(l);
-        const A = /* @__PURE__ */ new Set();
-        for (const h of l) {
-          const m = h.fontFamily;
-          typeof m == "string" && m.trim().length > 0 && A.add(m);
-        }
-        if (A.size > 0 && typeof document < "u") {
-          const h = document.fonts ?? null, m = Array.from(A).map((f) => {
-            const b = `font-${f.replace(/\s+/g, "-").toLowerCase()}`;
-            let y = document.getElementById(b);
-            return y || (y = document.createElement("link"), y.id = b, y.rel = "stylesheet", y.href = `https://fonts.googleapis.com/css2?family=${f.replace(
-              /\s+/g,
-              "+"
-            )}:wght@400;700&display=swap`, document.head.appendChild(y)), new Promise((N) => {
-              if (y.sheet) {
-                N(f);
-                return;
-              }
-              const z = () => N(f);
-              y.addEventListener("load", z, { once: !0 }), y.addEventListener("error", z, { once: !0 }), setTimeout(z, 4e3);
-            });
-          });
-          Promise.all(m).then((f) => {
-            if (h)
-              return Promise.all(
-                f.flatMap((b) => [
-                  h.load(`400 16px "${b}"`).catch(() => {
-                  }),
-                  h.load(`700 16px "${b}"`).catch(() => {
-                  })
-                ])
-              );
-          }).then(() => {
-            lt((f) => f.slice());
-          });
-        }
-      } catch (l) {
-        K.error("Failed to load initial elements:", l);
-        const d = l instanceof Error ? l : new Error(String(l));
-        P({
-          category: "import",
-          message: `Failed to load initial elements: ${d.message}`,
-          originalError: d,
-          recoverable: !0
-        });
-      }
-    }
-  }, [u, I, lt, P]), k(() => {
-    if (!s) {
-      Et.current = !0;
-      return;
-    }
-    const l = $.find((d) => d.name === s);
-    if (l) {
-      const d = I.getActiveArtboard();
-      (d == null ? void 0 : d.name) !== s && Re(l.id), Et.current = !0;
-    }
-  }, [s, $]), k(() => {
-    if (!U || xt.current === U) return;
-    if (j.length > 0) {
-      xt.current = U;
-      return;
-    }
-    xt.current = U, (async () => {
-      ft("loading"), vt(null);
-      try {
-        const d = I.getAllArtboards();
-        if (d.length === 0)
-          throw new Error("No artboards available");
-        const A = [];
-        for (const h of d) {
-          const m = i == null ? void 0 : i.find((y) => y.name === h.name), f = (m == null ? void 0 : m.scaleMode) || Ht, b = await Rr(
-            U,
-            {
-              artboard: {
-                width: h.width,
-                height: h.height,
-                x: h.x,
-                y: h.y
-              },
-              alignment: (m == null ? void 0 : m.fitAlign) || Dt,
-              scale: Ft,
-              scaleMode: f,
-              marginTop: m == null ? void 0 : m.fitMarginTop,
-              marginRight: m == null ? void 0 : m.fitMarginRight,
-              marginBottom: m == null ? void 0 : m.fitMarginBottom,
-              marginLeft: m == null ? void 0 : m.fitMarginLeft
-            }
-          );
-          b.success && b.element ? (I.addElementToArtboard(b.element.id, h.id), A.push(b.element)) : K.error("Failed to load image for artboard:", h.name, b.error);
-        }
-        if (A.length > 0)
-          lt((h) => [...h, ...A]), ft("success"), S == null || S(U);
-        else {
-          const h = new Error("Failed to load image into any artboard");
-          ft("error"), vt(h), p == null || p(U, h), P({
-            category: "image",
-            message: h.message,
-            originalError: h,
-            recoverable: !0
-          });
-        }
-      } catch (d) {
-        const A = d instanceof Error ? d : new Error(String(d));
-        ft("error"), vt(A), p == null || p(U, A), P({
-          category: "image",
-          message: A.message,
-          originalError: A,
-          recoverable: !0
-        });
-      }
-    })();
-  }, [U, Dt, Ft, Ht]);
-  const mt = M(D);
-  mt.current = D, k(() => {
-    var l;
-    (l = mt.current) == null || l.call(mt, Pt);
-  }, [Pt]);
-  const Ot = M(E);
-  Ot.current = E, k(() => {
-    const l = Ot.current;
-    if (!l) return;
-    const d = I.getActiveArtboard(), A = {
-      // 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: j.map((h) => {
-        const m = h.toJSON(), f = I.getArtboardForElement(h.id);
-        return f ? { ...m, artboard: f.name } : m;
-      }),
-      artboards: $.map((h) => ({
-        name: h.name,
-        width: h.width,
-        height: h.height,
-        clipShape: h.clipShape,
-        backgroundColor: h.backgroundColor
-      })),
-      activeArtboard: (d == null ? void 0 : d.name) || "Design"
-    };
-    l(A);
-  }, [j, $]), k(() => {
-    if (!c || !Et.current) return;
-    const l = I.getActiveArtboard();
-    l && c(l.name);
-  }, [I.getActiveArtboardId()]);
-  const Me = B(async () => {
-    if (!R && !g) return;
-    const l = ++Ie.current, d = Date.now();
-    let A = V;
-    if (L > 0 && isFinite(L))
-      for (const f of $) {
-        const b = kt(f.width, f.height, V, L);
-        A = Math.min(A, b);
-      }
-    const h = I.getActiveArtboard(), m = (h == null ? void 0 : h.id) ?? "unknown";
-    g == null || g({ status: "rendering", artboardId: m }), Ce.current = d;
-    try {
-      let f;
-      const b = {
-        format: it,
-        scale: A,
-        quality: st
-      };
-      if (J === "blob")
-        if (bt) {
-          const y = await ht(b);
-          f = {};
-          for (const [N, z] of Object.entries(y)) {
-            const Y = $.find((rt) => rt.id === N);
-            Y && (f[Y.name] = z);
-          }
-        } else {
-          const y = I.getActiveArtboard();
-          if (!y) return;
-          const N = await Z(y.id, b);
-          f = { [y.name]: N };
-        }
-      else if (bt) {
-        const y = await ut(b);
-        f = {};
-        for (const [N, z] of Object.entries(y)) {
-          const Y = $.find((rt) => rt.id === N);
-          Y && (f[Y.name] = z);
-        }
-      } else {
-        const y = I.getActiveArtboard();
-        if (!y) return;
-        const N = await Q(y.id, b);
-        f = { [y.name]: N };
-      }
-      R == null || R(f), g == null || g({ status: "complete", artboardId: m, result: f });
-    } catch (f) {
-      const b = f instanceof Error ? f.message : String(f);
-      if (b.includes("Canvas ref not available"))
-        return;
-      const y = Date.now() - d;
-      K.error("Export failed (export #" + l + "):", {
-        duration: `${y}ms`,
-        error: b
-      });
-      const N = f instanceof Error ? f : new Error(b);
-      g == null || g({ status: "error", artboardId: m, error: N }), P({
-        category: "export",
-        message: N.message,
-        originalError: N,
-        artboardId: m,
-        recoverable: !0
-      });
-    }
-  }, [R, g, bt, J, V, L, it, st, Q, ut, Z, ht, $, I, j, tt, P]);
-  k(() => {
-    Nt !== void 0 && Nt > 0 && K.warn(
-      "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
-    );
-  }, []), k(() => {
-  }, [j]);
-  const Te = B(() => {
-    if (T == null || T(), g) {
-      const l = I.getActiveArtboard();
-      g({ status: "scheduled", artboardId: (l == null ? void 0 : l.id) ?? "unknown" });
-    }
-  }, [T, g, I]), Ne = !!u && u.length > 0, At = pr({
-    isCanvasReady: yt,
-    elements: j,
-    hasInitialElements: Ne,
-    initialElementsLoaded: Se
-  }), Yt = M(!1);
-  k(() => {
-    At && !Yt.current && (Yt.current = !0, v == null || v());
-  }, [At, v]), hr({
-    config: tt ? {
-      enabled: tt.enabled ?? !0,
-      debounceMs: tt.debounceMs ?? 100,
-      maxWaitMs: tt.maxWaitMs ?? 1e3
-    } : {
-      enabled: !1
-      // Only use smart export if autoExportConfig is provided
-    },
-    historyManager: Ee,
-    artboards: $,
-    elements: j,
-    onExport: Me,
-    onExportScheduled: Te,
-    isCanvasReady: At
-    // Gate exports until content is fully ready (fonts loaded, elements deserialized)
-  }), k(() => {
-    if ($.length > 0 && !yt) {
-      const l = requestAnimationFrame(() => {
-        dt(!0);
-      });
-      return () => cancelAnimationFrame(l);
-    }
-  }, [$.length, yt, dt]), k(() => () => {
-    dt(!1);
-  }, [dt]);
-  const De = B((l) => {
-    P({
-      category: "unknown",
-      message: l.message,
-      originalError: l,
-      recoverable: !1
-    });
-  }, [P]);
-  return Lt === "loading" ? /* @__PURE__ */ x(
-    "div",
-    {
-      className: W,
-      style: {
-        ...H,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "var(--surface, #f5f5f5)"
-      },
-      children: /* @__PURE__ */ x(tr, { size: 48 })
-    }
-  ) : Lt === "error" && Ut ? /* @__PURE__ */ x(
-    "div",
-    {
-      className: W,
-      style: {
-        ...H,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "var(--surface, #f5f5f5)",
-        color: "var(--danger, #dc2626)",
-        padding: "1rem"
-      },
-      children: /* @__PURE__ */ q("div", { className: "text-center", children: [
-        /* @__PURE__ */ x("div", { className: "font-medium", children: "Failed to load image" }),
-        /* @__PURE__ */ x("div", { className: "text-sm mt-1 opacity-70", children: Ut.message })
-      ] })
-    }
-  ) : /* @__PURE__ */ x(er, { kit: et, children: /* @__PURE__ */ x("div", { className: `app-modern ${W || ""}`, style: { ...H, position: "relative" }, children: /* @__PURE__ */ q(
-    dr,
-    {
-      onError: De,
-      fallback: (l, d) => /* @__PURE__ */ q(
-        "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__ */ x("div", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Something went wrong" }),
-            /* @__PURE__ */ x("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: l.message }),
-            /* @__PURE__ */ x(
-              "button",
-              {
-                onClick: d,
-                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: [
-        !be && /* @__PURE__ */ (() => {
-          const l = /* @__PURE__ */ x(
-            nr,
-            {
-              style: { width: "100%" },
-              fitPadding: he,
-              artboardBorderRadius: fe,
-              fixedMargin: me,
-              maxHeight: ge,
-              showRotationHandle: pe,
-              enableShortcuts: xe,
-              canvasCutouts: ye,
-              pieceGuides: Bt,
-              pieceFocus: ve
-            }
-          );
-          return /* @__PURE__ */ x(cr, { kit: et, canvas: $t || Wt ? /* @__PURE__ */ x("div", { className: $t, style: Wt, children: l }) : l });
-        })(),
-        at
-      ]
-    }
-  ) }) });
-});
-se.displayName = "SnowconeCanvasInner";
-const kr = re((t, e) => {
-  var c;
-  const { inheritTheme: r, externalProvider: o, services: n } = t, a = t.viewPadding ?? ((c = t.layoutConfig) == null ? void 0 : c.viewPadding), i = /* @__PURE__ */ x(se, { ref: e, ...t }), s = o ? /* @__PURE__ */ x(Xt, { defaultTheme: "light", passive: r, children: i }) : /* @__PURE__ */ x(Xt, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ x(We, { viewPadding: a, children: i }) });
-  return n ? /* @__PURE__ */ x(rr, { services: n, children: s }) : s;
-});
-kr.displayName = "SnowconeCanvas";
-const Cr = 3e3, Qt = {
-  text: "useTextBinding",
-  image: "useImageBinding"
-}, Ir = {
-  text: "setText",
-  image: "setImageUrl"
-}, Ct = /* @__PURE__ */ new Set();
-function Zt(t) {
-  return t instanceof te ? "text" : t instanceof Mt ? "image" : "other";
-}
-function Mr(t, e, r) {
-  const o = `[${Qt[t]}]`, n = `the binding is dead (isConnected: false, ${Ir[t]} is a no-op)`, a = r.getAllByName(e);
-  if (a.length > 0) {
-    const c = [...new Set(a.map(Zt))], u = t === "text" ? "image" : "text", E = c.length === 1 && c[0] === u ? ` Bind it with ${Qt[u]}("${e}") instead.` : "";
-    return `${o} the layer named "${e}" is ${c.join("/")}, not ${t} — ${n}.${E}`;
-  }
-  const i = r.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${Zt(c)})`), s = i.length ? `Named layers on this canvas: ${i.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${t}(…, { name: '${e}' }) or the element's \`name\` property.`;
-  return `${o} no ${t} layer named "${e}" exists — ${n}. ${s}`;
-}
-function ce(t, e, r, o) {
-  k(() => {
-    var i;
-    if (o || typeof X > "u" || ((i = X.env) == null ? void 0 : i.NODE_ENV) === "production") return;
-    const n = `${t}:${e}`;
-    if (Ct.has(n)) return;
-    const a = setTimeout(() => {
-      Ct.has(n) || (Ct.add(n), console.warn(Mr(t, e, r)));
-    }, Cr);
-    return () => clearTimeout(a);
-  }, [t, e, r, o]);
-}
-const Tr = () => {
-}, Nr = [];
-function qr(t) {
-  const { elementStore: e } = Tt(), { executeElementUpdate: r } = oe(), o = pt(() => e.getAllByName(t).filter((i) => i instanceof te), [e, t]), n = B(
-    (a) => {
-      for (const i of o) {
-        const s = i.clone();
-        s.setText(a), r(i, s);
-      }
-    },
-    [o, r]
-  );
-  return ce("text", t, e, o.length > 0), o.length === 0 ? { text: "", setText: Tr, element: null, elements: Nr, isConnected: !1 } : {
-    text: o[0].getText(),
-    setText: n,
-    element: o[0],
-    elements: o,
-    isConnected: !0
-  };
-}
-const Dr = () => {
-}, Fr = [];
-function Hr(t, e, r) {
-  const o = t / e;
-  if (r >= o) {
-    const n = e, a = n * r, i = t / a;
-    return {
-      width: a,
-      height: n,
-      cropX: (1 - i) / 2,
-      cropY: 0,
-      cropWidth: i,
-      cropHeight: 1
-    };
-  } else {
-    const n = t, a = n / r, i = e / a;
-    return {
-      width: n,
-      height: a,
-      cropX: 0,
-      cropY: (1 - i) / 2,
-      cropWidth: 1,
-      cropHeight: i
-    };
-  }
-}
-function Jr(t, e) {
-  const r = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: o, setElements: n } = Tt(), { executeElementUpdate: a } = oe(), i = pt(() => o.getAllByName(t).filter((R) => R instanceof Mt), [o, t]), s = M(/* @__PURE__ */ new Map());
-  for (const C of i)
-    if (!s.current.has(C.id)) {
-      const R = C.transformData;
-      s.current.set(C.id, {
-        width: R.width * R.cropWidth,
-        height: R.height * R.cropHeight
-      });
-    }
-  const c = M(i);
-  c.current = i;
-  const u = M(a);
-  u.current = a;
-  const E = M(n);
-  E.current = n;
-  const D = B(
-    (C) => {
-      const R = c.current, T = u.current;
-      for (const g of R) {
-        const F = s.current.get(g.id);
-        if (!F) continue;
-        const { width: S, height: p } = F, w = g.clone();
-        w.imageLoaded = !1, w.imageElement = null, w.isCropping = !1, w.imageUrl = C, r === "cover" ? (w.preserveDimensions = !0, w.onLoadCallback = (v) => {
-          const W = v.imageAspectRatio || 1, H = Hr(S, p, W);
-          v.transformData.width = H.width, v.transformData.height = H.height, v.transformData.cropX = H.cropX, v.transformData.cropY = H.cropY, v.transformData.cropWidth = H.cropWidth, v.transformData.cropHeight = H.cropHeight, T(g, v);
-        }) : (w.preserveDimensions = !1, w.onLoadCallback = (v) => {
-          const W = v.transformData.width, H = v.transformData.height, O = Math.min(S / W, p / H, 1);
-          O < 1 && (v.transformData.width = W * O, v.transformData.height = H * O), v.transformData.cropX = 0, v.transformData.cropY = 0, v.transformData.cropWidth = 1, v.transformData.cropHeight = 1, T(g, v);
-        }), w.loadImage(C);
-      }
-    },
-    [r]
-    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
-  );
-  return ce("image", t, o, i.length > 0), i.length === 0 ? { imageUrl: "", setImageUrl: Dr, element: null, elements: Fr, isConnected: !1 } : {
-    imageUrl: i[0].imageUrl,
-    setImageUrl: D,
-    element: i[0],
-    elements: i,
-    isConnected: !0
-  };
-}
-function Qr(t) {
-  const { elementStore: e } = Tt();
-  return t ? e.getByName(t) ?? null : null;
-}
-const $r = 1;
-function G(t) {
-  return typeof t == "number" && Number.isFinite(t) ? Math.round(t * 100) / 100 : t;
-}
-function le(t) {
-  return {
-    ...t,
-    ...t.x !== void 0 && { x: G(t.x) },
-    ...t.y !== void 0 && { y: G(t.y) },
-    ...t.width !== void 0 && { width: G(t.width) },
-    ...t.height !== void 0 && { height: G(t.height) },
-    ...t.rotation !== void 0 && { rotation: G(t.rotation) }
-  };
-}
-function Wr(t) {
-  var o;
-  const e = (o = t.artboards) != null && o.length ? t.artboards : [{ name: "Front", width: 800, height: 800 }], r = e.map(() => []);
-  for (const n of t.elements || []) {
-    const a = n == null ? void 0 : n.artboard, i = typeof a == "string" ? e.findIndex((s) => (s.name || "Front") === a) : -1;
-    r[i >= 0 ? i : 0].push(Br(n));
-  }
-  return {
-    schemaVersion: $r,
-    artboards: e.map((n, a) => ({
-      id: `artboard-${a + 1}`,
-      name: n.name || "Front",
-      x: 0,
-      y: 0,
-      width: G(n.width || 800),
-      height: G(n.height || 800),
-      backgroundColor: n.backgroundColor || "transparent",
-      exportBackground: !1,
-      elements: r[a],
-      distressTexture: n.distressTexture,
-      imageMask: n.imageMask
-    }))
-  };
-}
-function Br(t) {
-  const e = t.type || t.transformType;
-  if (e === "image")
-    return Pr(t);
-  const { artboard: r, ...o } = t;
-  return le({
-    ...o,
-    type: e
-  });
-}
-function Pr(t) {
-  var u;
-  const e = t.transformData || {}, r = t.masks && t.masks.length > 0, o = e.width || 0, n = e.height || 0, a = r ? o : o * (e.cropWidth ?? 1), i = r ? n : n * (e.cropHeight ?? 1), s = {
-    id: t.id,
-    type: "image",
-    x: t.x || 0,
-    y: t.y || 0,
-    width: a,
-    height: i,
-    rotation: t.rotation || 0,
-    imageUrl: t.imageUrl,
-    imageAspectRatio: t.imageAspectRatio
-  };
-  return !r && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (s.cropX = e.cropX, s.cropY = e.cropY, s.cropWidth = e.cropWidth, s.cropHeight = e.cropHeight, s.needsCropPixelConversion = !0), e.flipHorizontal && (s.flipHorizontal = e.flipHorizontal), e.flipVertical && (s.flipVertical = e.flipVertical), e.borderRadius && (s.borderRadius = e.borderRadius), t.opacity !== void 0 && (s.opacity = t.opacity), t.distressEffect && (s.distressEffect = t.distressEffect), ((u = t.masks) == null ? void 0 : u.length) > 0 && (s.masks = t.masks), t.blendMode && (s.blendMode = t.blendMode), t.knockoutParts && (s.knockoutParts = t.knockoutParts), t.stroke && (s.stroke = t.stroke), le(s);
-}
-const _t = "center";
-function Lr(t) {
-  return t === "top-left" || t === "left" || t === "bottom-left" ? "left" : t === "top-right" || t === "right" || t === "bottom-right" ? "right" : "center";
-}
-function Ur(t) {
-  return t === "top-left" || t === "top" || t === "top-right" ? "top" : t === "bottom-left" || t === "bottom" || t === "bottom-right" ? "bottom" : "middle";
-}
-function It(t, e, r, o, n, a) {
-  const i = Lr(t), s = Ur(t), c = i === "left" ? e / 2 + a : i === "right" ? o - e / 2 - a : o / 2, u = s === "top" ? r / 2 + a : s === "bottom" ? n - r / 2 - a : n / 2;
-  return { x: c, y: u };
-}
-function zr(t, e, r) {
-  const o = e / r;
-  if (t >= o) {
-    const i = r * t, s = e / i;
-    return {
-      width: i,
-      height: r,
-      cropX: (1 - s) / 2,
-      cropY: 0,
-      cropWidth: s,
-      cropHeight: 1
-    };
-  }
-  const n = e / t, a = r / n;
-  return {
-    width: e,
-    height: n,
-    cropX: 0,
-    cropY: (1 - a) / 2,
-    cropWidth: 1,
-    cropHeight: a
-  };
-}
-class Or {
-  constructor(e) {
-    if (this.els = [], this.idCounter = 0, !(e.width > 0) || !(e.height > 0))
-      throw new Error("design(): artboard width and height must be positive numbers");
-    this.artboard = {
-      name: e.name || "Front",
-      width: e.width,
-      height: e.height,
-      backgroundColor: e.backgroundColor
-    };
-  }
-  nextId(e) {
-    return `${e}-${++this.idCounter}`;
-  }
-  /** Full-bleed background image (fills the whole artboard). Cover-fit (no
-   *  distortion) when `aspectRatio` is supplied. Inserted at the bottom of the
-   *  stack regardless of call order. */
-  background(e, r = {}) {
-    const { width: o, height: n } = this.artboard;
-    let a;
-    if (r.aspectRatio && r.aspectRatio > 0) {
-      const s = zr(r.aspectRatio, o, n);
-      a = {
-        type: "image",
-        width: s.width,
-        height: s.height,
-        cropX: s.cropX,
-        cropY: s.cropY,
-        cropWidth: s.cropWidth,
-        cropHeight: s.cropHeight,
-        flipHorizontal: !1,
-        flipVertical: !1,
-        borderRadius: 0
-      };
-    } else
-      a = {
-        type: "image",
-        width: o,
-        height: n,
-        cropX: 0,
-        cropY: 0,
-        cropWidth: 1,
-        cropHeight: 1,
-        flipHorizontal: !1,
-        flipVertical: !1,
-        borderRadius: 0
-      };
-    const i = {
-      id: this.nextId("bg"),
-      transformType: "image",
-      x: o / 2,
-      y: n / 2,
-      rotation: 0,
-      opacity: r.opacity ?? 1,
-      imageUrl: e,
-      imageAspectRatio: r.aspectRatio,
-      transformData: a,
-      name: r.name ?? "Background"
-    };
-    return this.els.unshift(i), this;
-  }
-  /** An anchored image element (not full-bleed). */
-  image(e, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.width ?? Math.round(o / 3), i = r.height ?? (r.aspectRatio ? Math.round(a / r.aspectRatio) : a), { x: s, y: c } = It(r.anchor ?? _t, a, i, o, n, r.padding ?? 0), u = {
-      id: this.nextId("img"),
-      transformType: "image",
-      x: s,
-      y: c,
-      rotation: r.rotation ?? 0,
-      opacity: r.opacity ?? 1,
-      imageUrl: e,
-      imageAspectRatio: r.aspectRatio,
-      transformData: {
-        type: "image",
-        width: a,
-        height: i,
-        cropX: 0,
-        cropY: 0,
-        cropWidth: 1,
-        cropHeight: 1,
-        flipHorizontal: !1,
-        flipVertical: !1,
-        borderRadius: 0
-      },
-      ...r.name ? { name: r.name } : {}
-    };
-    return this.els.push(u), this;
-  }
-  /** An anchored text layer. Horizontal centring is exact (textAlign); vertical
-   *  anchoring uses the font size as the line-height estimate. */
-  text(e, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.fontSize ?? Math.round(this.artboard.height / 12), { x: i, y: s } = It(r.anchor ?? "top", 0, a, o, n, r.padding ?? Math.round(n / 20)), c = {
-      id: this.nextId("text"),
-      transformType: "custom",
-      x: i,
-      y: s,
-      rotation: r.rotation ?? 0,
-      text: e,
-      fontSize: a,
-      fontFamily: r.fontFamily ?? "Anton",
-      color: r.color ?? "#ffffff",
-      textAlign: r.textAlign ?? "center",
-      bold: r.bold ?? !1,
-      italic: r.italic ?? !1,
-      transformData: { type: "custom" },
-      ...r.name ? { name: r.name } : {}
-    };
-    return this.els.push(c), this;
-  }
-  /** An anchored vector shape. */
-  shape(e, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.size ?? Math.round(o / 6), i = typeof a == "number" ? a : a.width, s = typeof a == "number" ? a : a.height, { x: c, y: u } = It(r.anchor ?? _t, i, s, o, n, r.padding ?? 0), E = {
-      type: "shape",
-      shapeType: e,
-      width: i,
-      height: s,
-      fillColor: r.fill ?? "#000000",
-      fillOpacity: r.opacity ?? 1,
-      ...r.points !== void 0 ? { points: r.points } : {},
-      ...r.sides !== void 0 ? { sides: r.sides } : {}
-    }, D = {
-      id: this.nextId("shape"),
-      transformType: "shape",
-      x: c,
-      y: u,
-      rotation: r.rotation ?? 0,
-      transformData: E,
-      ...r.name ? { name: r.name } : {}
-    };
-    return this.els.push(D), this;
-  }
-  /** The composed elements, in render order (background first). Editor shape. */
-  get elements() {
-    return this.els.map((e) => ({ ...e }));
-  }
-  /** Editor-shape canvas state for `<SnowconeCanvas initialElements=… />` and
-   *  `serializeStateForServer`. `activeArtboard` is the artboard name. */
-  toJSON() {
-    return {
-      elements: this.elements,
-      artboards: [{
-        name: this.artboard.name,
-        width: this.artboard.width,
-        height: this.artboard.height,
-        ...this.artboard.backgroundColor ? { backgroundColor: this.artboard.backgroundColor } : {}
-      }],
-      activeArtboard: this.artboard.name
-    };
-  }
-  /** Server-render payload for `RenderSession.renderState(placement, …)`.
-   *  Equivalent to `serializeStateForServer(design.toJSON())`. */
-  toServerRequest() {
-    return Wr(this.toJSON());
-  }
-}
-function Zr(t) {
-  return new Or(t);
-}
-export {
-  $r as C,
-  Or as D,
-  dr as E,
-  kr as S,
-  ar as a,
-  pr as b,
-  Qr as c,
-  Zr as d,
-  Jr as e,
-  qr as f,
-  Wr as s,
-  hr as u
-};
-//# sourceMappingURL=design-builder-CM5wSK5w.js.map