@snowcone-app/canvas 0.15.0 → 0.17.0

package/dist/template-fields-coO73lV3.js

@@ -1,1632 +0,0 @@
-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 ue } from "react/jsx-runtime";
-import { useCallback as P, useMemo as ot, useRef as M, useEffect as C, Component as Xe, useState as _, forwardRef as fe, useImperativeHandle as Ve } from "react";
-import { u as Wt, T as te, E as je, c as dt, b as At } from "./ThemeContext-Cl1JPVLZ.js";
-import { aq as ee, ar as re, ag as Ke, ah as ne, ad as Ge, W as qe, J as Je, K as Qe, Q as Ze, O as _e, p as tr, z as er, ab as rr, Y as oe, F as nr, q as or, G as ar, r as sr, v as ir, u as cr, g as lr, a2 as dr, V as ur, a as fr, w as hr, as as mr } from "./validation-BahKiJWj.js";
-import { C as Tt, E as gr } from "./ImportManager-eotl7r5d.js";
-import { a as pr, o as ct, b as $, n as br, l as Y, u as ae, c as yr } from "./CanvasStateV1-BQD8fCBU.js";
-const se = nt("useCommands");
-function xr() {
-  const e = Wt(), {
-    undo: t,
-    redo: r,
-    canUndo: o,
-    canRedo: n,
-    executeElementUpdate: a,
-    executeAddElement: s,
-    executeRemoveElement: i,
-    executeReorderElement: c,
-    executeCommandBatch: d,
-    executeCreateArtboard: x,
-    executeDeleteArtboard: I,
-    executeUpdateArtboard: R
-  } = e, k = P(() => {
-    se.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), T = P((p) => {
-    se.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: s,
-    executeRemoveElement: i,
-    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(
-      ee,
-      {
-        icon: re.undo,
-        onClick: e,
-        disabled: !r,
-        tooltip: "Undo",
-        "aria-label": "Undo"
-      }
-    ),
-    /* @__PURE__ */ w(
-      ee,
-      {
-        icon: re.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: oe,
-    CropPanel: nr
-  }), ne("add-element-menu", {
-    component: oe,
-    label: "Add Element",
-    icon: "gravity-ui:plus",
-    position: "topbar"
-  }), ne("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(ue, { 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)), s = !!((T = r.bottombar) != null && T.some((p) => p !== lt)), i = ot(
-    () => !o && !n && !a && !s,
-    [o, n, a, s]
-  ), c = M(null), d = o || n || a || s, x = M(!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]), i ? /* @__PURE__ */ w(ue, { 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 sc-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 }) })
-    ] }),
-    s && /* @__PURE__ */ w(
-      "div",
-      {
-        className: "sc-kit-bottombar sc-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: s, isCanvasReady: i = !1 } = e, c = M(null), d = M(!1), x = M({
-    totalExports: 0,
-    skippedExports: 0,
-    lastExportTime: null,
-    avgExportInterval: 0
-  }), [I, R] = _(x.current), k = M(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(() => {
-    i && d.current && c.current && (d.current = !1, c.current.forceExport());
-  }, [i]), 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 && 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(() => Oe((E) => {
-    if (!c.current || !i) return;
-    n.some((W) => W.id === E) && c.current.scheduleExport();
-  }), [n, i]);
-  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 Fr() {
-  return new Promise((e) => requestAnimationFrame(() => e()));
-}
-function Mr(e) {
-  const { isCanvasReady: t, elements: r, hasInitialElements: o, initialElementsLoaded: n } = e, [a, s] = _(!1), i = M(!1);
-  return C(() => {
-    if (a || !t || o && !n || o && r.length === 0 || i.current) return;
-    i.current = !0;
-    let c = !1;
-    return (async () => {
-      try {
-        const d = Cr(r);
-        if (d.length > 0 && (await Ir(d), c) || (await Fr(), c)) return;
-        s(!0);
-      } catch (d) {
-        me.error("Error during content readiness check:", d), c || s(!0);
-      } finally {
-        i.current = !1;
-      }
-    })(), () => {
-      c = !0, i.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, s = (r === "contain" ? t.marginLeft : 0) || 0, i = t.width - s - n, c = t.height - o - a, d = i / 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 - i, 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 += s, 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 s = () => {
-      n && (clearTimeout(n), n = null);
-    }, i = () => {
-      if (a) return;
-      a = !0, s();
-      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, s(), r({
-        success: !1,
-        error: new Error(d)
-      }));
-    };
-    o.onload = i, 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
-  }, s = Nr(
-    { width: n.width, height: n.height },
-    a
-  ), i = t.artboard.x + s.x, c = t.artboard.y + s.y, d = i + s.width / 2, x = c + s.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: 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: ((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: s.width, height: s.height },
-      position: { x: d, y: x },
-      scale: s.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 i = Math.max(e, t), c = o / i;
-  return Math.min(c, r);
-}
-const ge = fe((e, t) => {
-  const {
-    exportConfig: r,
-    imageConfig: o,
-    layoutConfig: n,
-    kit: a,
-    artboards: s,
-    activeArtboard: i,
-    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, Lt = 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), Ot = e.initialImageAlignment ?? (o == null ? void 0 : o.alignment) ?? "center", Yt = e.initialImageScale ?? (o == null ? void 0 : o.scale) ?? 1, Xt = 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, Vt = e.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), jt = e.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), Ce = e.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), Kt = e.pieceGuides, Ie = e.pieceFocus, Fe = X ?? !0, st = ot(() => sr(a ?? "pro-studio"), [a]);
-  C(() => {
-    var l;
-    if (typeof K < "u" && ((l = K.env) == null ? void 0 : l.NODE_ENV) === "development" && st) {
-      const u = ir(st);
-      u.valid || J.warn("Kit validation warnings:", u.errors), u.warnings.length > 0 && J.warn("Kit validation warnings:", u.warnings);
-    }
-  }, [st]);
-  const mt = M(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: Gt,
-    artboardManager: F,
-    refreshArtboards: Me,
-    historyManager: Te,
-    isCanvasReady: St,
-    setCanvasReady: pt
-  } = Wt(), { 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((it) => it.id === D);
-          V && (y[V.name] = O);
-        }
-        return y;
-      } else {
-        const h = F.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, F, H]), C(() => {
-    N && N(async () => {
-      const u = F.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, F, tt, G, z]);
-  const [qt, xt] = _("idle"), [Jt, Rt] = _(null), Ct = M(void 0), It = M(!1), Qt = M(!1), [Be, $e] = _(!1), He = M(0), Pe = M(0), Ft = M(!1);
-  C(() => {
-    if (It.current) return;
-    It.current = !0;
-    const l = s || [{ name: "Design", width: xe, height: ve }], u = F.getAllArtboards();
-    if (u.length > 0) {
-      const A = l[0], f = u[0], m = Kt ? "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 && F.setActiveArtboard(f.id);
-    }
-    Me();
-  }, []), C(() => {
-    if (!(!d || d.length === 0) && !Qt.current && It.current) {
-      Qt.current = !0, $e(!0);
-      try {
-        const l = gr.createManyFromJSON(d), u = F.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];
-            F.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, F, gt, U]), C(() => {
-    if (!i) {
-      Ft.current = !0;
-      return;
-    }
-    const l = H.find((u) => u.name === i);
-    if (l) {
-      const u = F.getActiveArtboard();
-      (u == null ? void 0 : u.name) !== i && Ne(l.id), Ft.current = !0;
-    }
-  }, [i, 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 = F.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) || Xt, h = await Wr(
-            L,
-            {
-              artboard: {
-                width: f.width,
-                height: f.height,
-                x: f.x,
-                y: f.y
-              },
-              alignment: (m == null ? void 0 : m.fitAlign) || Ot,
-              scale: Yt,
-              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 ? (F.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, Ot, Yt, Xt]);
-  const vt = M(I);
-  vt.current = I, C(() => {
-    var l;
-    (l = vt.current) == null || l.call(vt, Gt);
-  }, [Gt]);
-  const Zt = M(x);
-  Zt.current = x, C(() => {
-    const l = Zt.current;
-    if (!l) return;
-    const u = F.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 = F.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 || !Ft.current) return;
-    const l = F.getActiveArtboard();
-    l && c(l.name);
-  }, [F.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 = F.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((it) => it.id === D);
-            V && (g[V.name] = O);
-          }
-        } else {
-          const y = F.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((it) => it.id === D);
-          V && (g[V.name] = O);
-        }
-      } else {
-        const y = F.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, F, q, at, U]);
-  C(() => {
-    Lt !== void 0 && Lt > 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 = F.getActiveArtboard();
-      p({ status: "scheduled", artboardId: (l == null ? void 0 : l.id) ?? "unknown" });
-    }
-  }, [T, p, F]), ze = !!d && d.length > 0, Mt = Mr({
-    isCanvasReady: St,
-    elements: q,
-    hasInitialElements: ze,
-    initialElementsLoaded: Be
-  }), _t = M(!1);
-  C(() => {
-    Mt && !_t.current && (_t.current = !0, v == null || v());
-  }, [Mt, 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: Mt
-    // 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 qt === "loading" ? /* @__PURE__ */ w(
-    "div",
-    {
-      className: W,
-      style: {
-        ...B,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "var(--surface, #f5f5f5)"
-      },
-      children: /* @__PURE__ */ w(dr, { size: 48 })
-    }
-  ) : qt === "error" && Jt ? /* @__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: "sc:text-center", children: [
-        /* @__PURE__ */ w("div", { className: "sc:font-medium", children: "Failed to load image" }),
-        /* @__PURE__ */ w("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children: Jt.message })
-      ] })
-    }
-  ) : /* @__PURE__ */ w(ur, { kit: st, children: /* @__PURE__ */ w("div", { className: `sc-root ${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: Fe,
-              canvasCutouts: Ce,
-              pieceGuides: Kt,
-              pieceFocus: Ie
-            }
-          );
-          return /* @__PURE__ */ w(Er, { kit: st, canvas: Vt || jt ? /* @__PURE__ */ w("div", { className: Vt, style: jt, children: l }) : l });
-        })(),
-        ut
-      ]
-    }
-  ) }) });
-});
-ge.displayName = "SnowconeCanvasInner";
-const zr = fe((e, t) => {
-  var c;
-  const { inheritTheme: r, externalProvider: o, services: n } = e, a = e.viewPadding ?? ((c = e.layoutConfig) == null ? void 0 : c.viewPadding), s = /* @__PURE__ */ w(ge, { ref: t, ...e }), i = o ? /* @__PURE__ */ w(te, { defaultTheme: "light", passive: r, children: s }) : /* @__PURE__ */ w(te, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ w(je, { viewPadding: a, children: s }) });
-  return n ? /* @__PURE__ */ w(fr, { services: n, children: i }) : i;
-});
-zr.displayName = "SnowconeCanvas";
-function pn() {
-  const { selectedElement: e } = Wt();
-  return e ?? null;
-}
-const Lr = 3e3, ce = {
-  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 le(e) {
-  return e instanceof Pt ? "text" : e instanceof Ht ? "image" : "other";
-}
-function Xr(e, t, r) {
-  const o = `[${ce[e]}]`, n = `the binding is dead (isConnected: false, ${Or[e]} is a no-op)`, a = Yr[e], s = r.getAllByName(t);
-  if (s.length > 0) {
-    const d = [...new Set(s.map(le))], x = a === "text" ? "image" : "text", I = d.length === 1 && d[0] === x ? ` Bind it with ${ce[x]}("${t}") instead.` : "";
-    return `${o} the layer named "${t}" is ${d.join("/")}, not ${a} — ${n}.${I}`;
-  }
-  const i = r.getAll().filter((d) => d.name).map((d) => `"${d.name}" (${le(d)})`), c = i.length ? `Named layers on this canvas: ${i.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${a}(…, { name: '${t}' }) or the element's \`name\` property.`;
-  return `${o} no ${a} layer named "${t}" exists — ${n}. ${c}`;
-}
-function Ut(e, t, r, o) {
-  C(() => {
-    var s;
-    if (o || typeof K > "u" || ((s = K.env) == null ? void 0 : s.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 bn(e) {
-  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((s) => s instanceof Pt), [t, e]), n = P(
-    (a) => {
-      for (const s of o) {
-        const i = s.clone();
-        i.setText(a), r(s, i);
-      }
-    },
-    [o, r]
-  );
-  return Ut("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, s = e / a;
-    return {
-      width: a,
-      height: n,
-      cropX: (1 - s) / 2,
-      cropY: 0,
-      cropWidth: s,
-      cropHeight: 1
-    };
-  } else {
-    const n = e, a = n / r, s = t / a;
-    return {
-      width: n,
-      height: a,
-      cropX: 0,
-      cropY: (1 - s) / 2,
-      cropWidth: 1,
-      cropHeight: s
-    };
-  }
-}
-function yn(e, t) {
-  const r = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: n } = dt(), { executeElementUpdate: a } = At(), s = ot(() => o.getAllByName(e).filter((k) => k instanceof Ht), [o, e]), 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 x = M(n);
-  x.current = n;
-  const I = P(
-    (R) => {
-      const k = c.current, T = d.current;
-      for (const p of k) {
-        const N = i.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 Ut("image", e, o, s.length > 0), s.length === 0 ? { imageUrl: "", setImageUrl: Kr, element: null, elements: Gr, isConnected: !1 } : {
-    imageUrl: s[0].imageUrl,
-    setImageUrl: I,
-    element: s[0],
-    elements: s,
-    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 s, i, 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((s = n.transformData) == null ? void 0 : s.fillColor, t) && (a.transformData = { ...a.transformData, fillColor: r }), j((i = n.transformData) == null ? void 0 : i.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 xn(e) {
-  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), [o, n] = _(() => Et(e)), [a, s] = _(e);
-  e !== a && (s(e), n(Et(e)));
-  const i = 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 i.length === 0 ? { color: o, setColor: c, elements: Jr, isConnected: !1 } : { color: o, setColor: c, elements: i, isConnected: !0 };
-}
-const Zr = () => {
-}, _r = [];
-function vn(e) {
-  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((s) => s instanceof Pt), [t, e]), n = P(
-    (a) => {
-      mr.loadGoogleFontByName(a);
-      for (const s of o) {
-        if (s.fontFamily === a) continue;
-        Ye.clearCache(s.fontFamily);
-        const i = s.clone();
-        i.fontFamily = a, r(s, i);
-      }
-    },
-    [o, r]
-  );
-  return Ut("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 wn(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, s = typeof a == "string" ? t.findIndex((i) => (i.name || "Front") === a) : -1;
-    r[s >= 0 ? s : 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), s = r ? n : n * (t.cropHeight ?? 1), i = {
-    id: e.id,
-    type: "image",
-    x: e.x || 0,
-    y: e.y || 0,
-    width: a,
-    height: s,
-    rotation: e.rotation || 0,
-    imageUrl: e.imageUrl,
-    imageAspectRatio: e.imageAspectRatio
-  };
-  return !r && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (i.cropX = t.cropX, i.cropY = t.cropY, i.cropWidth = t.cropWidth, i.cropHeight = t.cropHeight, i.needsCropPixelConversion = !0), t.flipHorizontal && (i.flipHorizontal = t.flipHorizontal), t.flipVertical && (i.flipVertical = t.flipVertical), t.borderRadius && (i.borderRadius = t.borderRadius), e.opacity !== void 0 && (i.opacity = e.opacity), e.distressEffect && (i.distressEffect = e.distressEffect), ((d = e.masks) == null ? void 0 : d.length) > 0 && (i.masks = e.masks), e.blendMode && (i.blendMode = e.blendMode), e.knockoutParts && (i.knockoutParts = e.knockoutParts), e.stroke && (i.stroke = e.stroke), be(i);
-}
-const de = "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 s = on(e), i = an(e), c = s === "left" ? t / 2 + a : s === "right" ? o - t / 2 - a : o / 2, d = i === "top" ? r / 2 + a : i === "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 s = r * e, i = t / s;
-    return {
-      width: s,
-      height: r,
-      cropX: (1 - i) / 2,
-      cropY: 0,
-      cropWidth: i,
-      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 zt {
-  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 zt({
-      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 i = sn(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: t,
-      imageAspectRatio: r.aspectRatio,
-      transformData: a,
-      name: r.name ?? "Background"
-    };
-    return this.els.unshift(s), 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), s = r.height ?? (r.aspectRatio ? Math.round(a / r.aspectRatio) : a), { x: i, y: c } = $t(r.anchor ?? de, 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: t,
-      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(t, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.fontSize ?? Math.round(this.artboard.height / 12), { x: s, y: i } = $t(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: 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), s = typeof a == "number" ? a : a.width, i = typeof a == "number" ? a : a.height, { x: c, y: d } = $t(r.anchor ?? de, s, i, o, n, r.padding ?? 0), x = {
-      type: "shape",
-      shapeType: t,
-      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 } : {}
-    }, 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 En(e) {
-  return new zt(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: ae([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: ae([Y("text"), Y("imageUrl"), Y("fontFamily")]),
-    options: yr(ct({ label: $(), value: $() })).min(1),
-    group: $().optional()
-  })
-]);
-function An(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 kn(e, t) {
-  return { ...e, [ye]: t };
-}
-export {
-  tn as C,
-  zt as D,
-  kr as E,
-  zr as S,
-  ye as T,
-  xn as a,
-  xr as b,
-  Mr as c,
-  En as d,
-  wn as e,
-  vn as f,
-  yn as g,
-  pn as h,
-  bn as i,
-  An as r,
-  en as s,
-  Rr as u,
-  kn as w
-};
-//# sourceMappingURL=template-fields-coO73lV3.js.map