@snowcone-app/canvas 0.29.0 → 0.31.0

package/dist/state/CanvasStateV1.d.ts

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { ArtboardManager } from '../core/ArtboardManager.js';
 import { ArtboardElement } from '../core/ArtboardElement.js';
 import { BaseElement } from '../core/BaseElement.js';
+import { CustomFont } from '../utils/custom-fonts.js';
 declare const StrokeConfigSchema: z.ZodObject<{
     enabled: z.ZodBoolean;
     color: z.ZodString;
@@ -145,6 +146,11 @@ declare const AnyTransformDataSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     flipHorizontal: z.ZodBoolean;
     flipVertical: z.ZodBoolean;
     borderRadius: z.ZodNumber;
+    adjustments: z.ZodOptional<z.ZodObject<{
+        brightness: z.ZodNumber;
+        contrast: z.ZodNumber;
+        saturation: z.ZodNumber;
+    }, z.core.$strip>>;
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"group">;
 }, z.core.$strip>, z.ZodObject<{
@@ -266,6 +272,15 @@ declare const SerializedArtboardSchema: z.ZodObject<{
     }>>;
     elementIds: z.ZodArray<z.ZodString>;
 }, z.core.$strip>;
+/**
+ * A custom (brand) font dependency of the design — `{ family, url }` of a
+ * host-stored font binary plus optional weight/style descriptors. Saved
+ * designs carry these so every consumer (live editor, export worker, server
+ * render) can load the exact file. Families are stored as-is; a family that
+ * collides with a Google Fonts family deterministically SHADOWS it (see
+ * `utils/custom-fonts.ts` for the resolution contract).
+ */
+declare const CustomFontSchema: z.ZodType<CustomFont>;
 /**
  * Top-level CanvasStateV1 schema.
  *
@@ -273,6 +288,7 @@ declare const SerializedArtboardSchema: z.ZodObject<{
  * - `artboards` contains serialized artboard configs with `elementIds`.
  * - `elements` is a flat array of all elements across all artboards.
  * - `activeArtboardId` identifies which artboard is currently active.
+ * - `customFonts` (optional) lists the design's custom-font dependencies.
  */
 declare const CanvasStateV1Schema: z.ZodObject<{
     version: z.ZodLiteral<1>;
@@ -324,6 +340,7 @@ declare const CanvasStateV1Schema: z.ZodObject<{
     }, z.core.$strip>>;
     elements: z.ZodArray<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
     activeArtboardId: z.ZodString;
+    customFonts: z.ZodOptional<z.ZodArray<z.ZodType<CustomFont, unknown, z.core.$ZodTypeInternals<CustomFont, unknown>>>>;
 }, z.core.$strip>;
 /** A serialized artboard (artboard config + elementIds, no nested elements). */
 type SerializedArtboard = z.infer<typeof SerializedArtboardSchema>;
@@ -331,19 +348,35 @@ type SerializedArtboard = z.infer<typeof SerializedArtboardSchema>;
 type SerializedElement = z.infer<typeof AnyElementConfigSchema>;
 /** The full versioned state document. */
 type CanvasStateV1 = z.infer<typeof CanvasStateV1Schema>;
+/** Options for {@link serializeState}. */
+interface SerializeStateOptions {
+    /**
+     * Custom-font dependencies to embed in the document. When omitted, the
+     * default is CORRECT, not empty: the registered custom fonts whose family
+     * is actually used by the serialized elements are included automatically,
+     * so a host that uploaded a brand font cannot forget to persist it.
+     * Pass `[]` explicitly to serialize without custom fonts.
+     */
+    customFonts?: readonly CustomFont[];
+}
 /**
  * Serialize the current editor state into a `CanvasStateV1` document.
  *
  * @param artboardManager - The ArtboardManager instance (provides artboard list + active ID).
  * @param elements        - All elements currently in the editor (across all artboards).
+ * @param options         - See {@link SerializeStateOptions} (`customFonts` defaults to
+ *                          the registered custom fonts the elements actually use).
  * @returns A validated CanvasStateV1 object ready for JSON.stringify().
  */
-declare function serializeState(artboardManager: ArtboardManager, elements: BaseElement[]): CanvasStateV1;
+declare function serializeState(artboardManager: ArtboardManager, elements: BaseElement[], options?: SerializeStateOptions): CanvasStateV1;
 /** Result of deserializing a CanvasStateV1 document. */
 interface DeserializeResult {
     artboards: ArtboardElement[];
     elements: BaseElement[];
     activeArtboardId: string;
+    /** The design's custom-font dependencies (already registered with
+     *  `customFontRegistry` as a side effect of deserializing). */
+    customFonts: CustomFont[];
 }
 /**
  * Deserialize a validated `CanvasStateV1` document back into runtime objects.
@@ -384,5 +417,5 @@ declare function validateState(data: unknown): ValidationResult;
  * @throws Error if the data cannot be migrated.
  */
 declare function migrateState(data: unknown): CanvasStateV1;
-export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, serializeState, deserializeState, validateState, migrateState, };
-export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, };
+export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, CustomFontSchema, serializeState, deserializeState, validateState, migrateState, };
+export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, SerializeStateOptions, CustomFont, };

package/dist/state/index.d.ts

@@ -6,5 +6,5 @@
  *
  * @module
  */
-export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, serializeState, deserializeState, validateState, migrateState, } from './CanvasStateV1.js';
-export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, } from './CanvasStateV1.js';
+export { CanvasStateV1Schema, SerializedArtboardSchema, AnyElementConfigSchema, AnyTransformDataSchema, StrokeConfigSchema, KnockoutConfigSchema, DistressEffectSchema, MaskDefinitionSchema, CharacterStyleSchema, TextSpanSchema, RichTextSchema, ClipShapeSchema, CustomFontSchema, serializeState, deserializeState, validateState, migrateState, } from './CanvasStateV1.js';
+export type { CanvasStateV1, SerializedArtboard, SerializedElement, DeserializeResult, ValidationResult, SerializeStateOptions, CustomFont, } from './CanvasStateV1.js';

package/dist/template-fields-CvFcr5zy.js

@@ -0,0 +1,505 @@
+import { E as x, z as V, T as B, I as M, C as st } from "./FontAnalyzer-BYhwxDhe.js";
+import { l as q, u as ot, i as it, e as O, c as S, j as rt } from "./design-builder-CBG2hKc8.js";
+import { toOptionAttributes as at, toCombinations as ct, getMissingSelections as lt, validateProductSelection as ut, findBestCombination as F, computeDisabledChoices as ft } from "@snowcone-app/sdk";
+import { useEffect as mt, useContext as Z, useId as dt, useLayoutEffect as ht, useRef as C, useMemo as w, useCallback as k, useState as G } from "react";
+import { q as tt, U as gt } from "./useCommands-bPXY9rCh.js";
+import { a as pt, o as N, b as f, n as yt, l as p, u as z, c as bt } from "./CanvasStateV1-jLOibojY.js";
+function R(s) {
+  return s.text;
+}
+function $(s) {
+  return s.name;
+}
+class jt {
+  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 e = $(o), i = R(o);
+      e && typeof i == "string" && n.set(e, i);
+    }
+    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) => $(o) === t);
+    return n ? R(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) => $(o) === t);
+    return n ? q(n) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((t) => q(t) !== null).map($).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 e = this.state.elements.map((i) => $(i) !== t ? i : (o = !0, { ...i, text: n }));
+    if (!o)
+      throw new x(
+        "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: e });
+  }
+  /** ≥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 = R(t);
+      return typeof o == "string" && o.trim().length > 0;
+    });
+  }
+  emit() {
+    for (const t of [...this.listeners]) t();
+  }
+}
+function X(s) {
+  return (s.choices ?? []).map((t) => typeof t == "string" ? t : t.label ?? "").filter((t) => t !== "");
+}
+function vt(s, t) {
+  if (!s.variantId) return {};
+  const n = t.find((e) => e.variantId === s.variantId);
+  if (!n) return {};
+  const o = {};
+  for (const [e, i] of Object.entries(n))
+    e === "variantId" || e === "price" || (typeof i == "string" ? o[e] = i : typeof i == "number" && (o[e] = String(i)));
+  return o;
+}
+class Pt {
+  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 = at({ options: t.options }), this.combos = ct({ options: t.options }), this.selection = vt(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 x(
+        "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 e = X(o);
+    if (e.length > 0 && !e.includes(n))
+      throw new x(
+        "E_UNKNOWN_OPTION",
+        `"${n}" is not a choice of option "${t}" on product ${this.product.productId}. Valid choices: ${JSON.stringify(e)}.`,
+        { key: t, choice: n, validChoices: e, 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 ? [] : lt(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 : ut(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 = F(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 = F(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 = F(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: X(o) };
+    return ft(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 Wt() {
+  const { selectedElement: s } = ot();
+  return s ?? null;
+}
+const xt = 3e3, J = {
+  text: "useTextBinding",
+  image: "useImageBinding",
+  font: "useFontBinding"
+}, Nt = {
+  text: "setText",
+  image: "setImageUrl",
+  font: "setFontFamily"
+}, $t = {
+  text: "text",
+  image: "image",
+  font: "text"
+}, U = /* @__PURE__ */ new Set();
+function Q(s) {
+  return s instanceof B ? "text" : s instanceof M ? "image" : "other";
+}
+function Ct(s, t, n) {
+  const o = `[${J[s]}]`, e = `the binding is dead (isConnected: false, ${Nt[s]} is a no-op)`, i = $t[s], a = n.getAllByName(t);
+  if (a.length > 0) {
+    const c = [...new Set(a.map(Q))], u = i === "text" ? "image" : "text", v = c.length === 1 && c[0] === u ? ` Bind it with ${J[u]}("${t}") instead.` : "";
+    return `${o} the layer named "${t}" is ${c.join("/")}, not ${i} — ${e}.${v}`;
+  }
+  const r = n.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${Q(c)})`), l = 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().${i}(…, { name: '${t}' }) or the element's \`name\` property.`;
+  return `${o} no ${i} layer named "${t}" exists — ${e}. ${l}`;
+}
+function Y(s, t, n, o) {
+  mt(() => {
+    var a;
+    if (o || typeof V > "u" || ((a = V.env) == null ? void 0 : a.NODE_ENV) === "production") return;
+    const e = `${s}:${t}`;
+    if (U.has(e)) return;
+    const i = setTimeout(() => {
+      U.has(e) || (U.add(e), console.warn(Ct(s, t, n)));
+    }, xt);
+    return () => clearTimeout(i);
+  }, [s, t, n, o]);
+}
+function A(s) {
+  const t = Z(tt), n = dt();
+  ht(() => {
+    if (t)
+      return t.registry.requireCanvas(n, s);
+  }, [t, n, s]);
+}
+function L(s) {
+  return s instanceof B ? "text" : s instanceof M ? "image" : null;
+}
+const Ot = {
+  text: "useTextBinding / useFontBinding",
+  image: "useImageBinding"
+};
+function j(s, t, n) {
+  const o = it(s), e = o ? s.name : s, i = Z(tt), a = C(null);
+  if (o && s.kind !== t)
+    throw new x(
+      "E_LAYER_WRONG_KIND",
+      `layer "${e}" is a ${s.kind} token — this hook binds ${t} layers only (use ${Ot[s.kind]}).`,
+      { layerName: e, actualKind: s.kind, expectedKind: t, docSlug: "embed-mode" }
+    );
+  if (o && i && a.current !== e) {
+    const r = n.getAll();
+    if (r.length > 0) {
+      const l = n.getAllByName(e);
+      if (l.length === 0) {
+        const c = r.map((u) => ({ name: u.name, kind: L(u) })).filter((u) => !!u.name && u.kind !== null);
+        throw new x(
+          "E_LAYER_NOT_FOUND",
+          `no layer "${e}" 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(c.map((u) => u.name))}.`,
+          { layerName: e, validNames: c.map((u) => u.name), docSlug: "embed-mode" }
+        );
+      }
+      if (!l.some((c) => L(c) === t)) {
+        const c = L(l[0]) ?? "unbindable";
+        throw new x(
+          "E_LAYER_WRONG_KIND",
+          `layer "${e}" is ${c === "unbindable" ? "not a bindable kind" : `an ${c} layer`} — this hook binds ${t} layers only.`,
+          { layerName: e, actualKind: c, expectedKind: t, docSlug: "embed-mode" }
+        );
+      }
+      a.current = e;
+    }
+  }
+  return e;
+}
+const Dt = () => {
+}, It = [];
+function Kt(s) {
+  const { elementStore: t } = O();
+  A("useTextBinding()");
+  const n = j(s, "text", t), { executeElementUpdate: o } = S(), e = w(() => t.getAllByName(n).filter((r) => r instanceof B), [t, n]), i = k(
+    (a) => {
+      for (const r of e) {
+        const l = r.clone();
+        l.setText(a), o(r, l);
+      }
+    },
+    [e, o]
+  );
+  return Y("text", n, t, e.length > 0), e.length === 0 ? { text: "", setText: Dt, element: null, elements: It, isConnected: !1 } : {
+    text: e[0].getText(),
+    setText: i,
+    element: e[0],
+    elements: e,
+    isConnected: !0
+  };
+}
+const Tt = () => {
+}, Et = [];
+function Bt(s, t, n) {
+  const o = s / t;
+  if (n >= o) {
+    const e = t, i = e * n, a = s / i;
+    return {
+      width: i,
+      height: e,
+      cropX: (1 - a) / 2,
+      cropY: 0,
+      cropWidth: a,
+      cropHeight: 1
+    };
+  } else {
+    const e = s, i = e / n, a = t / i;
+    return {
+      width: e,
+      height: i,
+      cropX: 0,
+      cropY: (1 - a) / 2,
+      cropWidth: 1,
+      cropHeight: a
+    };
+  }
+}
+function Ht(s, t) {
+  A("useImageBinding()");
+  const n = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: e } = O(), i = j(s, "image", o), { executeElementUpdate: a } = S(), r = w(() => o.getAllByName(i).filter((y) => y instanceof M), [o, i]), l = C(/* @__PURE__ */ new Map());
+  for (const d of r)
+    if (!l.current.has(d.id)) {
+      const y = d.transformData;
+      l.current.set(d.id, {
+        width: y.width * y.cropWidth,
+        height: y.height * y.cropHeight
+      });
+    }
+  const c = C(r);
+  c.current = r;
+  const u = C(a);
+  u.current = a;
+  const v = C(e);
+  v.current = e;
+  const D = k(
+    (d) => {
+      const y = c.current, P = u.current;
+      for (const I of y) {
+        const W = l.current.get(I.id);
+        if (!W) continue;
+        const { width: K, height: H } = W, h = I.clone();
+        h.imageLoaded = !1, h.imageElement = null, h.isCropping = !1, h.imageUrl = d, n === "cover" ? (h.preserveDimensions = !0, h.onLoadCallback = (m) => {
+          const T = m.imageAspectRatio || 1, g = Bt(K, H, T);
+          m.transformData.width = g.width, m.transformData.height = g.height, m.transformData.cropX = g.cropX, m.transformData.cropY = g.cropY, m.transformData.cropWidth = g.cropWidth, m.transformData.cropHeight = g.cropHeight, P(I, m);
+        }) : (h.preserveDimensions = !1, h.onLoadCallback = (m) => {
+          const T = m.transformData.width, g = m.transformData.height, _ = Math.min(K / T, H / g, 1);
+          _ < 1 && (m.transformData.width = T * _, m.transformData.height = g * _), m.transformData.cropX = 0, m.transformData.cropY = 0, m.transformData.cropWidth = 1, m.transformData.cropHeight = 1, P(I, m);
+        }), h.loadImage(d);
+      }
+    },
+    [n]
+    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
+  );
+  return Y("image", i, o, r.length > 0), r.length === 0 ? { imageUrl: "", setImageUrl: Tt, element: null, elements: Et, isConnected: !1 } : {
+    imageUrl: r[0].imageUrl,
+    setImageUrl: D,
+    element: r[0],
+    elements: r,
+    isConnected: !0
+  };
+}
+const St = [];
+function E(s) {
+  let t = s.trim().toUpperCase();
+  return t.length === 4 && t.startsWith("#") && (t = "#" + t[1] + t[1] + t[2] + t[2] + t[3] + t[3]), t;
+}
+function b(s, t) {
+  return typeof s == "string" && E(s) === t;
+}
+function et(s, t) {
+  var o, e, i;
+  const n = s;
+  return b(n.color, t) || b((o = n.transformData) == null ? void 0 : o.fillColor, t) || b((e = n.transformData) == null ? void 0 : e.strokeColor, t) || ((i = n.stroke) == null ? void 0 : i.enabled) === !0 && b(n.stroke.color, t);
+}
+function wt(s, t, n) {
+  var a, r, l;
+  if (!et(s, t)) return null;
+  const o = s.clone(), e = s, i = o;
+  return b(e.color, t) && (typeof i.setColor == "function" ? i.setColor(n) : i.color = n), b((a = e.transformData) == null ? void 0 : a.fillColor, t) && (i.transformData = { ...i.transformData, fillColor: n }), b((r = e.transformData) == null ? void 0 : r.strokeColor, t) && (i.transformData = { ...i.transformData, strokeColor: n }), ((l = e.stroke) == null ? void 0 : l.enabled) === !0 && b(e.stroke.color, t) && (i.stroke = { ...i.stroke, color: n }), o;
+}
+function Vt(s) {
+  const t = rt(s) ? s.value : s, { elementStore: n } = O(), { executeElementUpdate: o } = S();
+  A("useColorBinding()");
+  const [e, i] = G(() => E(t)), [a, r] = G(t);
+  t !== a && (r(t), i(E(t)));
+  const l = w(
+    () => n.getAll().filter((u) => et(u, e)),
+    [n, e]
+  ), c = k(
+    (u) => {
+      const v = E(u);
+      if (v !== e) {
+        for (const D of n.getAll()) {
+          const d = wt(D, e, u);
+          d && o(D, d);
+        }
+        i(v);
+      }
+    },
+    [n, e, o]
+  );
+  return l.length === 0 ? { color: e, setColor: c, elements: St, isConnected: !1 } : { color: e, setColor: c, elements: l, isConnected: !0 };
+}
+const kt = () => {
+}, At = [];
+function qt(s) {
+  const { elementStore: t } = O();
+  A("useFontBinding()");
+  const n = j(s, "text", t), { executeElementUpdate: o } = S(), e = w(() => t.getAllByName(n).filter((r) => r instanceof B), [t, n]), i = k(
+    (a) => {
+      gt.loadGoogleFontByName(a);
+      for (const r of e) {
+        if (r.fontFamily === a) continue;
+        st.clearCache(r.fontFamily);
+        const l = r.clone();
+        l.fontFamily = a, o(r, l);
+      }
+    },
+    [e, o]
+  );
+  return Y("font", n, t, e.length > 0), e.length === 0 ? { fontFamily: "", setFontFamily: kt, element: null, elements: At, isConnected: !1 } : {
+    fontFamily: e[0].fontFamily,
+    setFontFamily: i,
+    element: e[0],
+    elements: e,
+    isConnected: !0
+  };
+}
+function Gt(s) {
+  const { elementStore: t } = O();
+  return s ? t.getByName(s) ?? null : null;
+}
+const nt = "personalization", _t = pt("type", [
+  N({
+    type: p("text"),
+    name: f().min(1),
+    label: f(),
+    placeholder: f().optional(),
+    maxLength: yt().int().positive().optional(),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  }),
+  N({
+    type: p("image"),
+    name: f().min(1),
+    label: f(),
+    placeholder: f().optional(),
+    fit: z([p("cover"), p("contain")]).optional(),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  }),
+  N({
+    type: p("color"),
+    color: f().min(1),
+    label: f(),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  }),
+  N({
+    type: p("select"),
+    name: f().min(1),
+    label: f(),
+    property: z([p("text"), p("imageUrl"), p("fontFamily")]),
+    options: bt(N({ label: f(), value: f() })).min(1),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  })
+]);
+function zt(s) {
+  if (!s || typeof s != "object") return [];
+  const t = s[nt];
+  if (!Array.isArray(t)) return [];
+  const n = [];
+  for (const o of t) {
+    if (!o || typeof o != "object") continue;
+    const e = "type" in o ? o : { ...o, type: "text" }, i = _t.safeParse(e);
+    i.success && n.push(i.data);
+  }
+  return n;
+}
+function Xt(s, t) {
+  return { ...s, [nt]: t };
+}
+export {
+  Pt as C,
+  jt as D,
+  nt as T,
+  Gt as a,
+  qt as b,
+  Ht as c,
+  Wt as d,
+  Kt as e,
+  X as f,
+  zt as r,
+  Vt as u,
+  Xt as w
+};
+//# sourceMappingURL=template-fields-CvFcr5zy.js.map