@snowcone-app/canvas 0.11.0 → 0.12.0

package/dist/template-fields-IgDV7PRY.js

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