@snowcone-app/canvas 0.23.0 → 0.27.0

package/dist/template-fields-BXl29sgh.js

@@ -0,0 +1,716 @@
+import { g as C, u as ut, c as Y, b as W } from "./editorErrors-BhrZ_nwj.js";
+import { l as it, i as gt, a as Nt } from "./design-builder-cZY958Rw.js";
+import { toOptionAttributes as St, toCombinations as It, getMissingSelections as wt, validateProductSelection as Ot, findBestCombination as J, computeDisabledChoices as At } from "@snowcone-app/sdk";
+import { useRef as E, useCallback as I, useEffect as Tt, useContext as ht, useId as kt, useLayoutEffect as Dt, useMemo as V, useState as ot } from "react";
+import { G as Bt, I as z, P as _t, S as Ft, T as K, z as yt, U as st, c as Ut, y as rt } from "./FontAnalyzer-EF3gLPr8.js";
+import { p as pt, U as Rt } from "./UnifiedFontService-CHVYDBDW.js";
+import { a as Lt, o as R, b as d, n as Pt, l as b, u as at, c as Yt } from "./CanvasStateV1-BTbCD_xC.js";
+function X(e) {
+  return e.text;
+}
+function L(e) {
+  return e.name;
+}
+class $e {
+  constructor(t) {
+    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (o) => (this.listeners.add(o), () => this.listeners.delete(o)), this.state = t;
+    const n = /* @__PURE__ */ new Map();
+    for (const o of t.elements) {
+      const i = L(o), s = X(o);
+      i && typeof s == "string" && n.set(i, s);
+    }
+    this.seedTextByName = n;
+  }
+  /** Replace the whole state (the canvas `onChange` path). */
+  setState(t) {
+    this.state = t, this.emit();
+  }
+  /** The seed value of a named text layer (for completeness rule C3). */
+  seedTextOf(t) {
+    return this.seedTextByName.get(t);
+  }
+  /** Current text of a named text layer, or undefined when absent. */
+  textOf(t) {
+    const n = this.state.elements.find((o) => L(o) === t);
+    return n ? X(n) : void 0;
+  }
+  /** Kind of the named layer in the CURRENT state ('text' | 'image' | null
+   *  for unbindable), or undefined when no layer has the name. */
+  layerKindOf(t) {
+    const n = this.state.elements.find((o) => L(o) === t);
+    return n ? it(n) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((t) => it(t) !== null).map(L).filter((t) => !!t);
+  }
+  /**
+   * Direct write path for `Editor.TextField` when NO canvas is mounted (with
+   * one, writes route through the editor command path and arrive back here
+   * via `setState`). Immutable update; last-write-wins.
+   */
+  updateTextLayer(t, n) {
+    let o = !1;
+    const i = this.state.elements.map((s) => L(s) !== t ? s : (o = !0, { ...s, text: n }));
+    if (!o)
+      throw new C(
+        "E_LAYER_NOT_FOUND",
+        `no layer "${t}" in the current design state. Bindable layers: ${JSON.stringify(this.bindableLayerNames())}.`,
+        { layerName: t, validNames: this.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    this.setState({ ...this.state, elements: i });
+  }
+  /** ≥1 element with visible content (completeness rule C4): non-empty text,
+   *  an image with a URL, or a shape. Hidden elements don't count. */
+  hasRenderableElement() {
+    return this.state.elements.some((t) => {
+      if (t.visible === !1) return !1;
+      const n = t.transformType;
+      if (n === "image") return !!t.imageUrl;
+      if (n === "shape" || n === "group" || n === "path") return !0;
+      const o = X(t);
+      return typeof o == "string" && o.trim().length > 0;
+    });
+  }
+  emit() {
+    for (const t of [...this.listeners]) t();
+  }
+}
+function lt(e) {
+  return (e.choices ?? []).map((t) => typeof t == "string" ? t : t.label ?? "").filter((t) => t !== "");
+}
+function Kt(e, t) {
+  if (!e.variantId) return {};
+  const n = t.find((i) => i.variantId === e.variantId);
+  if (!n) return {};
+  const o = {};
+  for (const [i, s] of Object.entries(n))
+    i === "variantId" || i === "price" || (typeof s == "string" ? o[i] = s : typeof s == "number" && (o[i] = String(s)));
+  return o;
+}
+class Ce {
+  constructor(t) {
+    this.quantity = 1, this.version = 0, this.listeners = /* @__PURE__ */ new Set(), this.getVersion = () => this.version, this.subscribe = (n) => (this.listeners.add(n), () => this.listeners.delete(n)), this.product = t, this.attrs = St({ options: t.options }), this.combos = It({ options: t.options }), this.selection = Kt(t, this.combos);
+  }
+  getAttributes() {
+    return this.attrs;
+  }
+  getSelection() {
+    return this.selection;
+  }
+  getQuantity() {
+    return this.quantity;
+  }
+  /**
+   * Select a choice for a variant attribute. Strict + loud (D4/E3): an
+   * attribute key or choice that doesn't exist on the product is a wiring
+   * mistake, not user state — throws `E_UNKNOWN_OPTION` listing what IS valid.
+   */
+  select(t, n) {
+    const o = this.attrs[t];
+    if (!o)
+      throw new C(
+        "E_UNKNOWN_OPTION",
+        `product ${this.product.productId} has no option "${t}". Valid option keys: ${JSON.stringify(Object.keys(this.attrs))}.`,
+        { key: t, validKeys: Object.keys(this.attrs), docSlug: "embed-mode" }
+      );
+    const i = lt(o);
+    if (i.length > 0 && !i.includes(n))
+      throw new C(
+        "E_UNKNOWN_OPTION",
+        `"${n}" is not a choice of option "${t}" on product ${this.product.productId}. Valid choices: ${JSON.stringify(i)}.`,
+        { key: t, choice: n, validChoices: i, docSlug: "embed-mode" }
+      );
+    this.selection[t] !== n && (this.selection = { ...this.selection, [t]: n }, this.bump());
+  }
+  /** Quantity is USER state (completeness rule C5 gates on it) — never throws. */
+  setQuantity(t) {
+    this.quantity !== t && (this.quantity = t, this.bump());
+  }
+  /** Attribute keys still required (non-optional) but unselected — Buy's
+   *  `option:<key>` reason codes. */
+  missingOptionKeys() {
+    return Object.keys(this.attrs).length === 0 ? [] : wt(this.attrs, this.selection);
+  }
+  /** Full selection resolution (the C1 amendment): true when every required
+   *  attribute is selected AND the selection matches a valid combination. */
+  selectionValid() {
+    return Object.keys(this.attrs).length === 0 ? !0 : Ot(this.attrs, this.selection, this.combos);
+  }
+  /** The variant (gvid) the current selection resolves to. Falls back to the
+   *  product's initial `variantId` while nothing has been selected. */
+  resolvedVariantId() {
+    if (Object.keys(this.attrs).length === 0 || this.combos.length === 0)
+      return this.product.variantId;
+    if (!this.selectionValid()) return;
+    const t = J(this.selection, this.combos, this.attrs);
+    return (typeof (t == null ? void 0 : t.variantId) == "string" && t.variantId !== "" ? t.variantId : void 0) ?? this.product.variantId;
+  }
+  /**
+   * The variant (gvid) to RENDER with — deliberately looser than
+   * {@link resolvedVariantId}. That one is Buy's currency: it returns
+   * `undefined` while the selection is incomplete so completeness can gate.
+   * But the PRODUCT PHOTO must follow the shopper's picks immediately —
+   * "choose the Oak frame" should render Oak even while an unrelated axis
+   * (size, pocket) is still unselected. This resolves the best combination
+   * matching the CURRENT (possibly partial) selection, falling back to the
+   * product's initial variant. (Before this split, switching a color swatch
+   * with any axis unselected rendered nothing — the mockup silently stayed
+   * on the old color.)
+   */
+  renderVariantId() {
+    if (Object.keys(this.attrs).length === 0 || this.combos.length === 0)
+      return this.product.variantId;
+    const t = J(this.selection, this.combos, this.attrs);
+    return (typeof (t == null ? void 0 : t.variantId) == "string" && t.variantId !== "" ? t.variantId : void 0) ?? this.product.variantId;
+  }
+  /** Price of the resolved combination, when the catalog carries one. */
+  resolvedPrice() {
+    if (!this.selectionValid()) return;
+    const t = J(this.selection, this.combos, this.attrs);
+    return typeof (t == null ? void 0 : t.price) == "number" ? t.price : void 0;
+  }
+  /** Choices invalid given the rest of the current selection — for hosts to
+   *  disable/grey out in their variant UI. */
+  disabledChoices() {
+    const t = {};
+    for (const [n, o] of Object.entries(this.attrs))
+      t[n] = { ...o, choices: lt(o) };
+    return At(this.selection, t, this.combos);
+  }
+  /** The combinations (for payload assembly via `createCartDetail`). */
+  getCombinations() {
+    return this.combos;
+  }
+  bump() {
+    this.version++;
+    for (const t of [...this.listeners]) t();
+  }
+}
+function bt(e) {
+  return e instanceof K;
+}
+function Mt(e) {
+  return e instanceof z;
+}
+function Ht(e) {
+  return e instanceof Ft;
+}
+function jt(e) {
+  return e instanceof Bt;
+}
+function Wt(e) {
+  return e instanceof _t;
+}
+function Vt(e) {
+  return bt(e) ? "text" : Mt(e) ? "image" : Ht(e) ? "shape" : jt(e) ? "group" : Wt(e) ? "path" : null;
+}
+const P = ["x", "y", "rotation", "opacity", "name", "visible", "locked"], zt = ["text", "fontSize", "color", "fontFamily", "bold", "italic", "textAlign"], Gt = ["fillColor", "width", "height"], Jt = ["imageUrl", "width", "height"], Xt = {
+  text: [...P, ...zt],
+  shape: [...P, ...Gt],
+  image: [...P, ...Jt],
+  group: [...P],
+  path: [...P]
+}, q = ["left", "center", "right"];
+function S(e, t) {
+  return new C("E_INVALID_PATCH", e, { ...t, docSlug: "embed-mode" });
+}
+function Q(e, t, n) {
+  if (typeof t != "number" || !Number.isFinite(t))
+    throw S(
+      `patch key "${e}" must be a finite number, got ${JSON.stringify(t)} (element kind: ${n}).`,
+      { key: e, kind: n, value: t }
+    );
+}
+function ct(e, t, n, o) {
+  if (typeof t !== n)
+    throw S(
+      `patch key "${e}" must be a ${n}, got ${JSON.stringify(t)} (element kind: ${o}).`,
+      { key: e, kind: o, value: t }
+    );
+}
+function qt(e, t) {
+  const n = gt(t), o = n ? t.name : t;
+  if (!n) {
+    const r = e.get(o);
+    if (r) return r;
+  }
+  const i = e.getAllByName(o);
+  if (i.length > 0) return i[0];
+  const s = e.getAll(), a = s.map((r) => r.name).filter((r) => !!r);
+  throw new C(
+    "E_LAYER_NOT_FOUND",
+    `no element with ${n ? "layer name" : "id or layer name"} "${o}" in this document. Valid layer names: ${JSON.stringify(a)}; valid ids: ${JSON.stringify(s.map((r) => r.id))}.`,
+    { layerName: o, validNames: a, validIds: s.map((r) => r.id), docSlug: "embed-mode" }
+  );
+}
+function Qt(e, t) {
+  const n = Vt(e);
+  if (!n)
+    throw S("target is not a patchable editor element.", { kind: null });
+  const o = Xt[n];
+  for (const [i, s] of Object.entries(t))
+    if (s !== void 0) {
+      if (!o.includes(i))
+        throw S(
+          `patch key "${i}" does not apply to a ${n} element. Valid keys for ${n}: ${JSON.stringify(o)}.`,
+          { key: i, kind: n, validKeys: o }
+        );
+      switch (i) {
+        case "x":
+        case "y":
+        case "rotation":
+          Q(i, s, n);
+          break;
+        case "opacity":
+          if (Q(i, s, n), s < 0 || s > 1)
+            throw S(`opacity must be between 0 and 1, got ${s} (element kind: ${n}).`, {
+              key: i,
+              kind: n,
+              value: s
+            });
+          break;
+        case "fontSize":
+        case "width":
+        case "height":
+          if (Q(i, s, n), s <= 0)
+            throw S(`${i} must be > 0, got ${s} (element kind: ${n}).`, { key: i, kind: n, value: s });
+          break;
+        case "name":
+        case "text":
+        case "color":
+        case "fontFamily":
+        case "fillColor":
+        case "imageUrl":
+          ct(i, s, "string", n);
+          break;
+        case "visible":
+        case "locked":
+        case "bold":
+        case "italic":
+          ct(i, s, "boolean", n);
+          break;
+        case "textAlign":
+          if (typeof s != "string" || !q.includes(s))
+            throw S(
+              `textAlign must be one of ${JSON.stringify(q)}, got ${JSON.stringify(s)}.`,
+              { key: i, kind: n, value: s, validKeys: q }
+            );
+          break;
+      }
+    }
+  return n;
+}
+function Zt(e, t) {
+  let n = !1;
+  if (t.x !== void 0 && (e.x = t.x), t.y !== void 0 && (e.y = t.y), t.rotation !== void 0 && e.setRotation(t.rotation), t.opacity !== void 0 && (e.opacity = t.opacity), t.name !== void 0 && (e.name = t.name), t.visible !== void 0 && (e.visible = t.visible), t.locked !== void 0 && (e.locked = t.locked), bt(e))
+    return t.text !== void 0 && e.setText(t.text), t.fontSize !== void 0 && e.setFontSize(t.fontSize), t.color !== void 0 && e.setColor(t.color), t.fontFamily !== void 0 && t.fontFamily !== e.fontFamily && (yt.clearCache(e.fontFamily), e.fontFamily = t.fontFamily), t.bold !== void 0 && (e.bold = t.bold), t.italic !== void 0 && (e.italic = t.italic), t.textAlign !== void 0 && (e.textAlign = t.textAlign), { needsImageLoad: n };
+  const o = e;
+  if (t.width !== void 0 && (o.transformData.width = t.width), t.height !== void 0 && (o.transformData.height = t.height), t.fillColor !== void 0 && (e.transformData.fillColor = t.fillColor), t.imageUrl !== void 0) {
+    const i = e;
+    t.imageUrl !== i.imageUrl && (i.imageLoaded = !1, i.imageElement = null, i.isCropping = !1, i.imageUrl = t.imageUrl, i.preserveDimensions = t.width !== void 0 || t.height !== void 0, n = !0);
+  }
+  return { needsImageLoad: n };
+}
+const mt = Ut("useCommands");
+function Ne() {
+  const e = ut(), {
+    undo: t,
+    redo: n,
+    canUndo: o,
+    canRedo: i,
+    executeElementUpdate: s,
+    executeAddElement: a,
+    executeRemoveElement: r,
+    executeReorderElement: c,
+    executeCommandBatch: l,
+    executeCreateArtboard: m,
+    executeDeleteArtboard: v,
+    executeUpdateArtboard: w,
+    addElement: u,
+    elementStore: h,
+    artboardManager: O,
+    historyManager: x
+  } = e, _ = E(h);
+  _.current = h;
+  const A = E(s);
+  A.current = s;
+  const N = E(null), y = I(
+    (g, k, D) => {
+      const Et = _.current;
+      let p = qt(Et, g);
+      const M = O.getArtboardIdForElement(p.id) ?? O.getActiveArtboardId(), F = M ? x.peekArtboard(M) : null;
+      F instanceof st && F.elementId === p.id && F.newElement && (p = F.newElement), Qt(p, k);
+      const H = p.clone(), { needsImageLoad: $t } = Zt(H, k);
+      if ($t) {
+        const B = H;
+        B.onLoadCallback = (Ct) => {
+          A.current(p, Ct);
+        }, N.current = null, B.loadImage(B.imageUrl);
+        return;
+      }
+      const U = N.current;
+      if (D != null && D.coalesce && U && U.elementId === p.id && F === U.command) {
+        U.command.newElement = H, U.command.execute();
+        return;
+      }
+      if (A.current(p, H), D != null && D.coalesce && M) {
+        const B = x.peekArtboard(M);
+        N.current = B instanceof st ? { elementId: p.id, command: B } : null;
+      } else
+        N.current = null;
+    },
+    [O, x]
+  ), f = I(() => {
+    mt.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
+  }, []), T = I((g) => {
+    mt.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
+  }, []);
+  return {
+    // Undo/Redo
+    undo: t,
+    redo: n,
+    canUndo: o,
+    canRedo: i,
+    // History management
+    clearHistory: f,
+    clearArtboardHistory: T,
+    // Declarative element write path
+    updateElement: y,
+    addElement: u,
+    // Command execution
+    executeElementUpdate: s,
+    executeAddElement: a,
+    executeRemoveElement: r,
+    executeReorderElement: c,
+    executeCreateArtboard: m,
+    executeDeleteArtboard: v,
+    executeUpdateArtboard: w,
+    // Batch execution
+    executeCommandBatch: l
+  };
+}
+function Se() {
+  const { selectedElement: e } = ut();
+  return e ?? null;
+}
+const te = 3e3, ft = {
+  text: "useTextBinding",
+  image: "useImageBinding",
+  font: "useFontBinding"
+}, ee = {
+  text: "setText",
+  image: "setImageUrl",
+  font: "setFontFamily"
+}, ne = {
+  text: "text",
+  image: "image",
+  font: "text"
+}, Z = /* @__PURE__ */ new Set();
+function dt(e) {
+  return e instanceof K ? "text" : e instanceof z ? "image" : "other";
+}
+function ie(e, t, n) {
+  const o = `[${ft[e]}]`, i = `the binding is dead (isConnected: false, ${ee[e]} is a no-op)`, s = ne[e], a = n.getAllByName(t);
+  if (a.length > 0) {
+    const l = [...new Set(a.map(dt))], m = s === "text" ? "image" : "text", v = l.length === 1 && l[0] === m ? ` Bind it with ${ft[m]}("${t}") instead.` : "";
+    return `${o} the layer named "${t}" is ${l.join("/")}, not ${s} — ${i}.${v}`;
+  }
+  const r = n.getAll().filter((l) => l.name).map((l) => `"${l.name}" (${dt(l)})`), c = r.length ? `Named layers on this canvas: ${r.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${s}(…, { name: '${t}' }) or the element's \`name\` property.`;
+  return `${o} no ${s} layer named "${t}" exists — ${i}. ${c}`;
+}
+function et(e, t, n, o) {
+  Tt(() => {
+    var a;
+    if (o || typeof rt > "u" || ((a = rt.env) == null ? void 0 : a.NODE_ENV) === "production") return;
+    const i = `${e}:${t}`;
+    if (Z.has(i)) return;
+    const s = setTimeout(() => {
+      Z.has(i) || (Z.add(i), console.warn(ie(e, t, n)));
+    }, te);
+    return () => clearTimeout(s);
+  }, [e, t, n, o]);
+}
+function G(e) {
+  const t = ht(pt), n = kt();
+  Dt(() => {
+    if (t)
+      return t.registry.requireCanvas(n, e);
+  }, [t, n, e]);
+}
+function tt(e) {
+  return e instanceof K ? "text" : e instanceof z ? "image" : null;
+}
+const oe = {
+  text: "useTextBinding / useFontBinding",
+  image: "useImageBinding"
+};
+function nt(e, t, n) {
+  const o = gt(e), i = o ? e.name : e, s = ht(pt), a = E(null);
+  if (o && e.kind !== t)
+    throw new C(
+      "E_LAYER_WRONG_KIND",
+      `layer "${i}" is a ${e.kind} token — this hook binds ${t} layers only (use ${oe[e.kind]}).`,
+      { layerName: i, actualKind: e.kind, expectedKind: t, docSlug: "embed-mode" }
+    );
+  if (o && s && a.current !== i) {
+    const r = n.getAll();
+    if (r.length > 0) {
+      const c = n.getAllByName(i);
+      if (c.length === 0) {
+        const l = r.map((m) => ({ name: m.name, kind: tt(m) })).filter((m) => !!m.name && m.kind !== null);
+        throw new C(
+          "E_LAYER_NOT_FOUND",
+          `no layer "${i}" in this Root's document — the token was minted from a different design than the one passed to <Editor.Root design={…}>, or the layer was deleted. Bindable layers here: ${JSON.stringify(l.map((m) => m.name))}.`,
+          { layerName: i, validNames: l.map((m) => m.name), docSlug: "embed-mode" }
+        );
+      }
+      if (!c.some((l) => tt(l) === t)) {
+        const l = tt(c[0]) ?? "unbindable";
+        throw new C(
+          "E_LAYER_WRONG_KIND",
+          `layer "${i}" is ${l === "unbindable" ? "not a bindable kind" : `an ${l} layer`} — this hook binds ${t} layers only.`,
+          { layerName: i, actualKind: l, expectedKind: t, docSlug: "embed-mode" }
+        );
+      }
+      a.current = i;
+    }
+  }
+  return i;
+}
+const se = () => {
+}, re = [];
+function Ie(e) {
+  const { elementStore: t } = Y();
+  G("useTextBinding()");
+  const n = nt(e, "text", t), { executeElementUpdate: o } = W(), i = V(() => t.getAllByName(n).filter((r) => r instanceof K), [t, n]), s = I(
+    (a) => {
+      for (const r of i) {
+        const c = r.clone();
+        c.setText(a), o(r, c);
+      }
+    },
+    [i, o]
+  );
+  return et("text", n, t, i.length > 0), i.length === 0 ? { text: "", setText: se, element: null, elements: re, isConnected: !1 } : {
+    text: i[0].getText(),
+    setText: s,
+    element: i[0],
+    elements: i,
+    isConnected: !0
+  };
+}
+const ae = () => {
+}, le = [];
+function ce(e, t, n) {
+  const o = e / t;
+  if (n >= o) {
+    const i = t, s = i * n, a = e / s;
+    return {
+      width: s,
+      height: i,
+      cropX: (1 - a) / 2,
+      cropY: 0,
+      cropWidth: a,
+      cropHeight: 1
+    };
+  } else {
+    const i = e, s = i / n, a = t / s;
+    return {
+      width: i,
+      height: s,
+      cropX: 0,
+      cropY: (1 - a) / 2,
+      cropWidth: 1,
+      cropHeight: a
+    };
+  }
+}
+function we(e, t) {
+  G("useImageBinding()");
+  const n = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: i } = Y(), s = nt(e, "image", o), { executeElementUpdate: a } = W(), r = V(() => o.getAllByName(s).filter((h) => h instanceof z), [o, s]), c = E(/* @__PURE__ */ new Map());
+  for (const u of r)
+    if (!c.current.has(u.id)) {
+      const h = u.transformData;
+      c.current.set(u.id, {
+        width: h.width * h.cropWidth,
+        height: h.height * h.cropHeight
+      });
+    }
+  const l = E(r);
+  l.current = r;
+  const m = E(a);
+  m.current = a;
+  const v = E(i);
+  v.current = i;
+  const w = I(
+    (u) => {
+      const h = l.current, O = m.current;
+      for (const x of h) {
+        const _ = c.current.get(x.id);
+        if (!_) continue;
+        const { width: A, height: N } = _, y = x.clone();
+        y.imageLoaded = !1, y.imageElement = null, y.isCropping = !1, y.imageUrl = u, n === "cover" ? (y.preserveDimensions = !0, y.onLoadCallback = (f) => {
+          const T = f.imageAspectRatio || 1, g = ce(A, N, T);
+          f.transformData.width = g.width, f.transformData.height = g.height, f.transformData.cropX = g.cropX, f.transformData.cropY = g.cropY, f.transformData.cropWidth = g.cropWidth, f.transformData.cropHeight = g.cropHeight, O(x, f);
+        }) : (y.preserveDimensions = !1, y.onLoadCallback = (f) => {
+          const T = f.transformData.width, g = f.transformData.height, k = Math.min(A / T, N / g, 1);
+          k < 1 && (f.transformData.width = T * k, f.transformData.height = g * k), f.transformData.cropX = 0, f.transformData.cropY = 0, f.transformData.cropWidth = 1, f.transformData.cropHeight = 1, O(x, f);
+        }), y.loadImage(u);
+      }
+    },
+    [n]
+    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
+  );
+  return et("image", s, o, r.length > 0), r.length === 0 ? { imageUrl: "", setImageUrl: ae, element: null, elements: le, isConnected: !1 } : {
+    imageUrl: r[0].imageUrl,
+    setImageUrl: w,
+    element: r[0],
+    elements: r,
+    isConnected: !0
+  };
+}
+const me = [];
+function j(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 $(e, t) {
+  return typeof e == "string" && j(e) === t;
+}
+function vt(e, t) {
+  var o, i, s;
+  const n = e;
+  return $(n.color, t) || $((o = n.transformData) == null ? void 0 : o.fillColor, t) || $((i = n.transformData) == null ? void 0 : i.strokeColor, t) || ((s = n.stroke) == null ? void 0 : s.enabled) === !0 && $(n.stroke.color, t);
+}
+function fe(e, t, n) {
+  var a, r, c;
+  if (!vt(e, t)) return null;
+  const o = e.clone(), i = e, s = o;
+  return $(i.color, t) && (typeof s.setColor == "function" ? s.setColor(n) : s.color = n), $((a = i.transformData) == null ? void 0 : a.fillColor, t) && (s.transformData = { ...s.transformData, fillColor: n }), $((r = i.transformData) == null ? void 0 : r.strokeColor, t) && (s.transformData = { ...s.transformData, strokeColor: n }), ((c = i.stroke) == null ? void 0 : c.enabled) === !0 && $(i.stroke.color, t) && (s.stroke = { ...s.stroke, color: n }), o;
+}
+function Oe(e) {
+  const t = Nt(e) ? e.value : e, { elementStore: n } = Y(), { executeElementUpdate: o } = W();
+  G("useColorBinding()");
+  const [i, s] = ot(() => j(t)), [a, r] = ot(t);
+  t !== a && (r(t), s(j(t)));
+  const c = V(
+    () => n.getAll().filter((m) => vt(m, i)),
+    [n, i]
+  ), l = I(
+    (m) => {
+      const v = j(m);
+      if (v !== i) {
+        for (const w of n.getAll()) {
+          const u = fe(w, i, m);
+          u && o(w, u);
+        }
+        s(v);
+      }
+    },
+    [n, i, o]
+  );
+  return c.length === 0 ? { color: i, setColor: l, elements: me, isConnected: !1 } : { color: i, setColor: l, elements: c, isConnected: !0 };
+}
+const de = () => {
+}, ue = [];
+function Ae(e) {
+  const { elementStore: t } = Y();
+  G("useFontBinding()");
+  const n = nt(e, "text", t), { executeElementUpdate: o } = W(), i = V(() => t.getAllByName(n).filter((r) => r instanceof K), [t, n]), s = I(
+    (a) => {
+      Rt.loadGoogleFontByName(a);
+      for (const r of i) {
+        if (r.fontFamily === a) continue;
+        yt.clearCache(r.fontFamily);
+        const c = r.clone();
+        c.fontFamily = a, o(r, c);
+      }
+    },
+    [i, o]
+  );
+  return et("font", n, t, i.length > 0), i.length === 0 ? { fontFamily: "", setFontFamily: de, element: null, elements: ue, isConnected: !1 } : {
+    fontFamily: i[0].fontFamily,
+    setFontFamily: s,
+    element: i[0],
+    elements: i,
+    isConnected: !0
+  };
+}
+function Te(e) {
+  const { elementStore: t } = Y();
+  return e ? t.getByName(e) ?? null : null;
+}
+const xt = "personalization", ge = Lt("type", [
+  R({
+    type: b("text"),
+    name: d().min(1),
+    label: d(),
+    placeholder: d().optional(),
+    maxLength: Pt().int().positive().optional(),
+    artboard: d().min(1).optional(),
+    group: d().optional()
+  }),
+  R({
+    type: b("image"),
+    name: d().min(1),
+    label: d(),
+    placeholder: d().optional(),
+    fit: at([b("cover"), b("contain")]).optional(),
+    artboard: d().min(1).optional(),
+    group: d().optional()
+  }),
+  R({
+    type: b("color"),
+    color: d().min(1),
+    label: d(),
+    artboard: d().min(1).optional(),
+    group: d().optional()
+  }),
+  R({
+    type: b("select"),
+    name: d().min(1),
+    label: d(),
+    property: at([b("text"), b("imageUrl"), b("fontFamily")]),
+    options: Yt(R({ label: d(), value: d() })).min(1),
+    artboard: d().min(1).optional(),
+    group: d().optional()
+  })
+]);
+function ke(e) {
+  if (!e || typeof e != "object") return [];
+  const t = e[xt];
+  if (!Array.isArray(t)) return [];
+  const n = [];
+  for (const o of t) {
+    if (!o || typeof o != "object") continue;
+    const i = "type" in o ? o : { ...o, type: "text" }, s = ge.safeParse(i);
+    s.success && n.push(s.data);
+  }
+  return n;
+}
+function De(e, t) {
+  return { ...e, [xt]: t };
+}
+export {
+  Ce as C,
+  $e as D,
+  xt as T,
+  Ne as a,
+  Te as b,
+  Ae as c,
+  we as d,
+  Se as e,
+  Ie as f,
+  lt as g,
+  Vt as h,
+  jt as i,
+  Mt as j,
+  Wt as k,
+  Ht as l,
+  bt as m,
+  ke as r,
+  Oe as u,
+  De as w
+};
+//# sourceMappingURL=template-fields-BXl29sgh.js.map