@snowcone-app/canvas 0.11.0 → 0.12.0

package/dist/template-fields-C8Tj67ek.js

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