@snowcone-app/canvas 0.18.1 → 0.19.1

package/dist/template-fields-DgoBtajp.js

@@ -1,668 +0,0 @@
-import { jsxs as rt, jsx as _ } from "react/jsx-runtime";
-import { p as z, o as P, U as it } from "./MenuButton-CeoEAtzP.js";
-import { d as at, u as Q, c as T, b as $, g as L } from "./EditorContext-5QpqAhjh.js";
-import { useCallback as w, useEffect as st, useMemo as H, useRef as R, useState as X } from "react";
-import { c as ct, y as K, T as B, I as Z, z as lt } from "./FontAnalyzer-DIlqmyuf.js";
-import { a as dt, o as E, b as f, n as ft, l as b, u as V, c as ht } from "./CanvasStateV1-Bq48qhv5.js";
-const _t = () => {
-  const { undo: t, redo: e, canUndo: n, canRedo: o } = at();
-  return /* @__PURE__ */ rt("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
-    /* @__PURE__ */ _(
-      z,
-      {
-        icon: P.undo,
-        onClick: t,
-        disabled: !n,
-        tooltip: "Undo",
-        "aria-label": "Undo"
-      }
-    ),
-    /* @__PURE__ */ _(
-      z,
-      {
-        icon: P.redo,
-        onClick: e,
-        disabled: !o,
-        tooltip: "Redo",
-        "aria-label": "Redo"
-      }
-    )
-  ] });
-}, j = ct("useCommands");
-function zt() {
-  const t = Q(), {
-    undo: e,
-    redo: n,
-    canUndo: o,
-    canRedo: i,
-    executeElementUpdate: r,
-    executeAddElement: a,
-    executeRemoveElement: s,
-    executeReorderElement: l,
-    executeCommandBatch: c,
-    executeCreateArtboard: m,
-    executeDeleteArtboard: u,
-    executeUpdateArtboard: h
-  } = t, g = w(() => {
-    j.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), N = w((k) => {
-    j.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
-  }, []);
-  return {
-    // Undo/Redo
-    undo: e,
-    redo: n,
-    canUndo: o,
-    canRedo: i,
-    // History management
-    clearHistory: g,
-    clearArtboardHistory: N,
-    // Command execution
-    executeElementUpdate: r,
-    executeAddElement: a,
-    executeRemoveElement: s,
-    executeReorderElement: l,
-    executeCreateArtboard: m,
-    executeDeleteArtboard: u,
-    executeUpdateArtboard: h,
-    // Batch execution
-    executeCommandBatch: c
-  };
-}
-function Pt() {
-  const { selectedElement: t } = Q();
-  return t ?? null;
-}
-const mt = 3e3, G = {
-  text: "useTextBinding",
-  image: "useImageBinding",
-  font: "useFontBinding"
-}, ut = {
-  text: "setText",
-  image: "setImageUrl",
-  font: "setFontFamily"
-}, gt = {
-  text: "text",
-  image: "image",
-  font: "text"
-}, S = /* @__PURE__ */ new Set();
-function J(t) {
-  return t instanceof B ? "text" : t instanceof Z ? "image" : "other";
-}
-function pt(t, e, n) {
-  const o = `[${G[t]}]`, i = `the binding is dead (isConnected: false, ${ut[t]} is a no-op)`, r = gt[t], a = n.getAllByName(e);
-  if (a.length > 0) {
-    const c = [...new Set(a.map(J))], m = r === "text" ? "image" : "text", u = c.length === 1 && c[0] === m ? ` Bind it with ${G[m]}("${e}") instead.` : "";
-    return `${o} the layer named "${e}" is ${c.join("/")}, not ${r} — ${i}.${u}`;
-  }
-  const s = n.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${J(c)})`), l = 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().${r}(…, { name: '${e}' }) or the element's \`name\` property.`;
-  return `${o} no ${r} layer named "${e}" exists — ${i}. ${l}`;
-}
-function U(t, e, n, o) {
-  st(() => {
-    var a;
-    if (o || typeof K > "u" || ((a = K.env) == null ? void 0 : a.NODE_ENV) === "production") return;
-    const i = `${t}:${e}`;
-    if (S.has(i)) return;
-    const r = setTimeout(() => {
-      S.has(i) || (S.add(i), console.warn(pt(t, e, n)));
-    }, mt);
-    return () => clearTimeout(r);
-  }, [t, e, n, o]);
-}
-const yt = () => {
-}, bt = [];
-function Lt(t) {
-  const { elementStore: e } = T(), { executeElementUpdate: n } = $(), o = H(() => e.getAllByName(t).filter((a) => a instanceof B), [e, t]), i = w(
-    (r) => {
-      for (const a of o) {
-        const s = a.clone();
-        s.setText(r), n(a, s);
-      }
-    },
-    [o, n]
-  );
-  return U("text", t, e, o.length > 0), o.length === 0 ? { text: "", setText: yt, element: null, elements: bt, isConnected: !1 } : {
-    text: o[0].getText(),
-    setText: i,
-    element: o[0],
-    elements: o,
-    isConnected: !0
-  };
-}
-const xt = () => {
-}, Ct = [];
-function wt(t, e, n) {
-  const o = t / e;
-  if (n >= o) {
-    const i = e, r = i * n, a = t / r;
-    return {
-      width: r,
-      height: i,
-      cropX: (1 - a) / 2,
-      cropY: 0,
-      cropWidth: a,
-      cropHeight: 1
-    };
-  } else {
-    const i = t, r = i / n, a = e / r;
-    return {
-      width: i,
-      height: r,
-      cropX: 0,
-      cropY: (1 - a) / 2,
-      cropWidth: 1,
-      cropHeight: a
-    };
-  }
-}
-function Xt(t, e) {
-  const n = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: o, setElements: i } = T(), { executeElementUpdate: r } = $(), a = H(() => o.getAllByName(t).filter((g) => g instanceof Z), [o, t]), s = R(/* @__PURE__ */ new Map());
-  for (const h of a)
-    if (!s.current.has(h.id)) {
-      const g = h.transformData;
-      s.current.set(h.id, {
-        width: g.width * g.cropWidth,
-        height: g.height * g.cropHeight
-      });
-    }
-  const l = R(a);
-  l.current = a;
-  const c = R(r);
-  c.current = r;
-  const m = R(i);
-  m.current = i;
-  const u = w(
-    (h) => {
-      const g = l.current, N = c.current;
-      for (const k of g) {
-        const W = s.current.get(k.id);
-        if (!W) continue;
-        const { width: I, height: Y } = W, p = k.clone();
-        p.imageLoaded = !1, p.imageElement = null, p.isCropping = !1, p.imageUrl = h, n === "cover" ? (p.preserveDimensions = !0, p.onLoadCallback = (d) => {
-          const D = d.imageAspectRatio || 1, y = wt(I, Y, D);
-          d.transformData.width = y.width, d.transformData.height = y.height, d.transformData.cropX = y.cropX, d.transformData.cropY = y.cropY, d.transformData.cropWidth = y.cropWidth, d.transformData.cropHeight = y.cropHeight, N(k, d);
-        }) : (p.preserveDimensions = !1, p.onLoadCallback = (d) => {
-          const D = d.transformData.width, y = d.transformData.height, v = Math.min(I / D, Y / y, 1);
-          v < 1 && (d.transformData.width = D * v, d.transformData.height = y * v), d.transformData.cropX = 0, d.transformData.cropY = 0, d.transformData.cropWidth = 1, d.transformData.cropHeight = 1, N(k, d);
-        }), p.loadImage(h);
-      }
-    },
-    [n]
-    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
-  );
-  return U("image", t, o, a.length > 0), a.length === 0 ? { imageUrl: "", setImageUrl: xt, element: null, elements: Ct, isConnected: !1 } : {
-    imageUrl: a[0].imageUrl,
-    setImageUrl: u,
-    element: a[0],
-    elements: a,
-    isConnected: !0
-  };
-}
-const kt = [];
-function A(t) {
-  let e = t.trim().toUpperCase();
-  return e.length === 4 && e.startsWith("#") && (e = "#" + e[1] + e[1] + e[2] + e[2] + e[3] + e[3]), e;
-}
-function x(t, e) {
-  return typeof t == "string" && A(t) === e;
-}
-function tt(t, e) {
-  var o, i, r;
-  const n = t;
-  return x(n.color, e) || x((o = n.transformData) == null ? void 0 : o.fillColor, e) || x((i = n.transformData) == null ? void 0 : i.strokeColor, e) || ((r = n.stroke) == null ? void 0 : r.enabled) === !0 && x(n.stroke.color, e);
-}
-function Et(t, e, n) {
-  var a, s, l;
-  if (!tt(t, e)) return null;
-  const o = t.clone(), i = t, r = o;
-  return x(i.color, e) && (typeof r.setColor == "function" ? r.setColor(n) : r.color = n), x((a = i.transformData) == null ? void 0 : a.fillColor, e) && (r.transformData = { ...r.transformData, fillColor: n }), x((s = i.transformData) == null ? void 0 : s.strokeColor, e) && (r.transformData = { ...r.transformData, strokeColor: n }), ((l = i.stroke) == null ? void 0 : l.enabled) === !0 && x(i.stroke.color, e) && (r.stroke = { ...r.stroke, color: n }), o;
-}
-function Kt(t) {
-  const { elementStore: e } = T(), { executeElementUpdate: n } = $(), [o, i] = X(() => A(t)), [r, a] = X(t);
-  t !== r && (a(t), i(A(t)));
-  const s = H(
-    () => e.getAll().filter((c) => tt(c, o)),
-    [e, o]
-  ), l = w(
-    (c) => {
-      const m = A(c);
-      if (m !== o) {
-        for (const u of e.getAll()) {
-          const h = Et(u, o, c);
-          h && n(u, h);
-        }
-        i(m);
-      }
-    },
-    [e, o, n]
-  );
-  return s.length === 0 ? { color: o, setColor: l, elements: kt, isConnected: !1 } : { color: o, setColor: l, elements: s, isConnected: !0 };
-}
-const Tt = () => {
-}, Nt = [];
-function Vt(t) {
-  const { elementStore: e } = T(), { executeElementUpdate: n } = $(), o = H(() => e.getAllByName(t).filter((a) => a instanceof B), [e, t]), i = w(
-    (r) => {
-      it.loadGoogleFontByName(r);
-      for (const a of o) {
-        if (a.fontFamily === r) continue;
-        lt.clearCache(a.fontFamily);
-        const s = a.clone();
-        s.fontFamily = r, n(a, s);
-      }
-    },
-    [o, n]
-  );
-  return U("font", t, e, o.length > 0), o.length === 0 ? { fontFamily: "", setFontFamily: Tt, element: null, elements: Nt, isConnected: !1 } : {
-    fontFamily: o[0].fontFamily,
-    setFontFamily: i,
-    element: o[0],
-    elements: o,
-    isConnected: !0
-  };
-}
-function jt(t) {
-  const { elementStore: e } = T();
-  return t ? e.getByName(t) ?? null : null;
-}
-const Dt = 1;
-function C(t) {
-  return typeof t == "number" && Number.isFinite(t) ? Math.round(t * 100) / 100 : t;
-}
-function et(t) {
-  return {
-    ...t,
-    ...t.x !== void 0 && { x: C(t.x) },
-    ...t.y !== void 0 && { y: C(t.y) },
-    ...t.width !== void 0 && { width: C(t.width) },
-    ...t.height !== void 0 && { height: C(t.height) },
-    ...t.rotation !== void 0 && { rotation: C(t.rotation) }
-  };
-}
-function Rt(t) {
-  var o;
-  const e = (o = t.artboards) != null && o.length ? t.artboards : [{ name: "Front", width: 800, height: 800 }], n = e.map(() => []);
-  for (const i of t.elements || []) {
-    const r = i == null ? void 0 : i.artboard, a = typeof r == "string" ? e.findIndex((s) => (s.name || "Front") === r) : -1;
-    n[a >= 0 ? a : 0].push(At(i));
-  }
-  return {
-    schemaVersion: Dt,
-    artboards: e.map((i, r) => ({
-      id: `artboard-${r + 1}`,
-      name: i.name || "Front",
-      x: 0,
-      y: 0,
-      width: C(i.width || 800),
-      height: C(i.height || 800),
-      backgroundColor: i.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: i.exportBackground ?? !1,
-      elements: n[r],
-      distressTexture: i.distressTexture,
-      imageMask: i.imageMask
-    }))
-  };
-}
-function At(t) {
-  const e = t.type || t.transformType;
-  if (e === "image")
-    return $t(t);
-  const { artboard: n, ...o } = t;
-  return et({
-    ...o,
-    type: e
-  });
-}
-function $t(t) {
-  var c;
-  const e = t.transformData || {}, n = t.masks && t.masks.length > 0, o = e.width || 0, i = e.height || 0, r = n ? o : o * (e.cropWidth ?? 1), a = n ? i : i * (e.cropHeight ?? 1), s = {
-    id: t.id,
-    type: "image",
-    x: t.x || 0,
-    y: t.y || 0,
-    width: r,
-    height: a,
-    rotation: t.rotation || 0,
-    imageUrl: t.imageUrl,
-    imageAspectRatio: t.imageAspectRatio
-  };
-  return !n && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (s.cropX = e.cropX, s.cropY = e.cropY, s.cropWidth = e.cropWidth, s.cropHeight = e.cropHeight, s.needsCropPixelConversion = !0), e.flipHorizontal && (s.flipHorizontal = e.flipHorizontal), e.flipVertical && (s.flipVertical = e.flipVertical), e.borderRadius && (s.borderRadius = e.borderRadius), t.opacity !== void 0 && (s.opacity = t.opacity), t.distressEffect && (s.distressEffect = t.distressEffect), ((c = t.masks) == null ? void 0 : c.length) > 0 && (s.masks = t.masks), t.blendMode && (s.blendMode = t.blendMode), t.knockoutParts && (s.knockoutParts = t.knockoutParts), t.stroke && (s.stroke = t.stroke), et(s);
-}
-const q = "center", nt = Symbol.for("snowcone.canvas.layerToken");
-function Gt(t) {
-  return typeof t == "object" && t !== null && t[nt] === !0 && typeof t.name == "string" && (t.kind === "text" || t.kind === "image");
-}
-function Ht(t, e) {
-  return Object.freeze({ kind: t, name: e, [nt]: !0 });
-}
-function O(t) {
-  const e = t.transformType;
-  return e === "image" ? "image" : e === "shape" || e === "group" || e === "path" ? null : "text";
-}
-function vt(t) {
-  return t === "top-left" || t === "left" || t === "bottom-left" ? "left" : t === "top-right" || t === "right" || t === "bottom-right" ? "right" : "center";
-}
-function St(t) {
-  return t === "top-left" || t === "top" || t === "top-right" ? "top" : t === "bottom-left" || t === "bottom" || t === "bottom-right" ? "bottom" : "middle";
-}
-function F(t, e, n, o, i, r) {
-  const a = vt(t), s = St(t), l = a === "left" ? e / 2 + r : a === "right" ? o - e / 2 - r : o / 2, c = s === "top" ? n / 2 + r : s === "bottom" ? i - n / 2 - r : i / 2;
-  return { x: l, y: c };
-}
-function Ft(t, e, n) {
-  const o = e / n;
-  if (t >= o) {
-    const a = n * t, s = e / a;
-    return {
-      width: a,
-      height: n,
-      cropX: (1 - s) / 2,
-      cropY: 0,
-      cropWidth: s,
-      cropHeight: 1
-    };
-  }
-  const i = e / t, r = n / i;
-  return {
-    width: e,
-    height: i,
-    cropX: 0,
-    cropY: (1 - r) / 2,
-    cropWidth: 1,
-    cropHeight: r
-  };
-}
-class M {
-  constructor(e) {
-    if (this.els = [], this.idCounter = 0, !(e.width > 0) || !(e.height > 0))
-      throw new Error("design(): artboard width and height must be positive numbers");
-    this.artboard = {
-      name: e.name || "Front",
-      width: e.width,
-      height: e.height,
-      backgroundColor: e.backgroundColor
-    };
-  }
-  /**
-   * Seed a builder from a previously saved canvas state — the editor shape
-   * `<SnowconeCanvas onChange>` emits (and `toJSON()` produces).
-   *
-   * This is how a saved editable template re-enters the turnkey embed path:
-   * load the template's state JSON, lift it back into a `DesignBuilder`, and
-   * hand it to `<RealtimeEmbed design={…}>`. The active artboard becomes the
-   * builder's artboard; elements tagged for other artboards are skipped
-   * (untagged elements are assumed to belong to the active one).
-   */
-  static fromState(e) {
-    const n = e.artboards.find((i) => i.name === e.activeArtboard) ?? e.artboards[0];
-    if (!n)
-      throw new Error("DesignBuilder.fromState(): state has no artboards");
-    const o = new M({
-      name: n.name,
-      width: n.width,
-      height: n.height,
-      backgroundColor: n.backgroundColor
-    });
-    for (const i of e.elements)
-      i.artboard && i.artboard !== n.name || o.els.push({ ...i });
-    return o;
-  }
-  nextId(e) {
-    return `${e}-${++this.idCounter}`;
-  }
-  background(e, n = {}) {
-    const { width: o, height: i } = this.artboard;
-    let r;
-    if (n.aspectRatio && n.aspectRatio > 0) {
-      const s = Ft(n.aspectRatio, o, i);
-      r = {
-        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
-      r = {
-        type: "image",
-        width: o,
-        height: i,
-        cropX: 0,
-        cropY: 0,
-        cropWidth: 1,
-        cropHeight: 1,
-        flipHorizontal: !1,
-        flipVertical: !1,
-        borderRadius: 0
-      };
-    const a = {
-      id: this.nextId("bg"),
-      transformType: "image",
-      x: o / 2,
-      y: i / 2,
-      rotation: 0,
-      opacity: n.opacity ?? 1,
-      imageUrl: e,
-      imageAspectRatio: n.aspectRatio,
-      transformData: r,
-      name: n.name ?? "Background"
-    };
-    return this.els.unshift(a), this;
-  }
-  image(e, n = {}) {
-    const { width: o, height: i } = this.artboard, r = n.width ?? Math.round(o / 3), a = n.height ?? (n.aspectRatio ? Math.round(r / n.aspectRatio) : r), { x: s, y: l } = F(n.anchor ?? q, r, a, o, i, n.padding ?? 0), c = {
-      id: this.nextId("img"),
-      transformType: "image",
-      x: s,
-      y: l,
-      rotation: n.rotation ?? 0,
-      opacity: n.opacity ?? 1,
-      imageUrl: e,
-      imageAspectRatio: n.aspectRatio,
-      transformData: {
-        type: "image",
-        width: r,
-        height: a,
-        cropX: 0,
-        cropY: 0,
-        cropWidth: 1,
-        cropHeight: 1,
-        flipHorizontal: !1,
-        flipVertical: !1,
-        borderRadius: 0
-      },
-      ...n.name ? { name: n.name } : {}
-    };
-    return this.els.push(c), this;
-  }
-  text(e, n = {}) {
-    const { width: o, height: i } = this.artboard, r = n.fontSize ?? Math.round(this.artboard.height / 12), { x: a, y: s } = F(n.anchor ?? "top", 0, r, o, i, n.padding ?? Math.round(i / 20)), l = {
-      id: this.nextId("text"),
-      transformType: "custom",
-      x: a,
-      y: s,
-      rotation: n.rotation ?? 0,
-      text: e,
-      fontSize: r,
-      fontFamily: n.fontFamily ?? "Anton",
-      color: n.color ?? "#ffffff",
-      textAlign: n.textAlign ?? "center",
-      bold: n.bold ?? !1,
-      italic: n.italic ?? !1,
-      transformData: { type: "custom" },
-      ...n.name ? { name: n.name } : {}
-    };
-    return this.els.push(l), this;
-  }
-  /**
-   * Mint a {@link LayerToken} for a named layer — the only currency
-   * `Editor.TextField` accepts (ADR-0085 §1). Compile time: `name` is
-   * constrained to this design's declared layer names, kind inferred from
-   * which per-kind union it falls in. Runtime: validated EAGERLY against the
-   * built elements (nearest the mistake), so CMS/JSON-loaded designs get the
-   * same protection with `string` typing.
-   *
-   * @throws EditorError `E_LAYER_NOT_FOUND` — no layer with this name; lists
-   *   the valid names per kind.
-   * @throws EditorError `E_LAYER_WRONG_KIND` — the name matches a layer that
-   *   is not bindable (shape/group/path).
-   * @experimental ADR-0085; subject to change until the P4 gate.
-   */
-  layer(e) {
-    const n = this.els.find((i) => i.name === e);
-    if (!n) {
-      const i = this.layerNamesOfKind("text"), r = this.layerNamesOfKind("image");
-      throw new L(
-        "E_LAYER_NOT_FOUND",
-        `no layer "${e}" in this design. Text layers: ${JSON.stringify(i)}; image layers: ${JSON.stringify(r)}. Fix the name, or add the layer first — e.g. design(…).text('…', { name: '${e}' }).`,
-        { layerName: e, validNames: [...i, ...r], textNames: i, imageNames: r, docSlug: "embed-mode" }
-      );
-    }
-    const o = O(n);
-    if (!o)
-      throw new L(
-        "E_LAYER_WRONG_KIND",
-        `layer "${e}" is a ${n.transformType} element — only text and image layers are bindable. Bindable layers: ${JSON.stringify([...this.layerNamesOfKind("text"), ...this.layerNamesOfKind("image")])}.`,
-        { layerName: e, actualType: n.transformType, docSlug: "embed-mode" }
-      );
-    return Ht(o, e);
-  }
-  /** Names of bindable layers of one kind, in stack order. @internal */
-  layerNamesOfKind(e) {
-    return this.els.filter((n) => O(n) === e).map((n) => n.name).filter((n) => !!n);
-  }
-  /** An anchored vector shape. */
-  shape(e, n = {}) {
-    const { width: o, height: i } = this.artboard, r = n.size ?? Math.round(o / 6), a = typeof r == "number" ? r : r.width, s = typeof r == "number" ? r : r.height, { x: l, y: c } = F(n.anchor ?? q, a, s, o, i, n.padding ?? 0), m = {
-      type: "shape",
-      shapeType: e,
-      width: a,
-      height: s,
-      fillColor: n.fill ?? "#000000",
-      fillOpacity: n.opacity ?? 1,
-      ...n.points !== void 0 ? { points: n.points } : {},
-      ...n.sides !== void 0 ? { sides: n.sides } : {}
-    }, u = {
-      id: this.nextId("shape"),
-      transformType: "shape",
-      x: l,
-      y: c,
-      rotation: n.rotation ?? 0,
-      transformData: m,
-      ...n.name ? { name: n.name } : {}
-    };
-    return this.els.push(u), this;
-  }
-  /** The composed elements, in render order (background first). Editor shape. */
-  get elements() {
-    return this.els.map((e) => ({ ...e }));
-  }
-  /** Editor-shape canvas state for `<SnowconeCanvas initialElements=… />` and
-   *  `serializeStateForServer`. `activeArtboard` is the artboard name. */
-  toJSON() {
-    return {
-      elements: this.elements,
-      artboards: [{
-        name: this.artboard.name,
-        width: this.artboard.width,
-        height: this.artboard.height,
-        // A background set on a design is part of the design: flag it
-        // renderable so exports and server renders paint it, matching the
-        // editor (the export worker skips it without `exportBackground`).
-        ...this.artboard.backgroundColor ? {
-          backgroundColor: this.artboard.backgroundColor,
-          exportBackground: this.artboard.backgroundColor !== "transparent"
-        } : {}
-      }],
-      activeArtboard: this.artboard.name
-    };
-  }
-  /** Server-render payload for `RenderSession.renderState(placement, …)`.
-   *  Equivalent to `serializeStateForServer(design.toJSON())`. */
-  toServerRequest() {
-    return Rt(this.toJSON());
-  }
-}
-function Jt(t) {
-  return new M(t);
-}
-function qt(t) {
-  return O(t);
-}
-const ot = "personalization", Ot = dt("type", [
-  E({
-    type: b("text"),
-    name: f().min(1),
-    label: f(),
-    placeholder: f().optional(),
-    maxLength: ft().int().positive().optional(),
-    group: f().optional()
-  }),
-  E({
-    type: b("image"),
-    name: f().min(1),
-    label: f(),
-    placeholder: f().optional(),
-    fit: V([b("cover"), b("contain")]).optional(),
-    group: f().optional()
-  }),
-  E({
-    type: b("color"),
-    color: f().min(1),
-    label: f(),
-    group: f().optional()
-  }),
-  E({
-    type: b("select"),
-    name: f().min(1),
-    label: f(),
-    property: V([b("text"), b("imageUrl"), b("fontFamily")]),
-    options: ht(E({ label: f(), value: f() })).min(1),
-    group: f().optional()
-  })
-]);
-function Qt(t) {
-  if (!t || typeof t != "object") return [];
-  const e = t[ot];
-  if (!Array.isArray(e)) return [];
-  const n = [];
-  for (const o of e) {
-    if (!o || typeof o != "object") continue;
-    const i = "type" in o ? o : { ...o, type: "text" }, r = Ot.safeParse(i);
-    r.success && n.push(r.data);
-  }
-  return n;
-}
-function Zt(t, e) {
-  return { ...t, [ot]: e };
-}
-export {
-  Dt as C,
-  M as D,
-  ot as T,
-  _t as U,
-  zt as a,
-  jt as b,
-  Vt as c,
-  Jt as d,
-  Xt as e,
-  Pt as f,
-  Lt as g,
-  Gt as i,
-  qt as l,
-  Qt as r,
-  Rt as s,
-  Kt as u,
-  Zt as w
-};
-//# sourceMappingURL=template-fields-DgoBtajp.js.map