@snowcone-app/canvas 0.22.0 → 0.23.0

package/dist/template-fields-CQ6n2P4V.js

@@ -0,0 +1,548 @@
+import { g as C, u as tt, c as O, b as S } from "./editorErrors-B2mb1sVN.js";
+import { l as V, i as it, a as rt } from "./design-builder-2VUjfmdt.js";
+import { toOptionAttributes as at, toCombinations as ct, getMissingSelections as lt, validateProductSelection as ut, findBestCombination as R, computeDisabledChoices as mt } from "@snowcone-app/sdk";
+import { useCallback as N, useEffect as ft, useContext as et, useId as dt, useLayoutEffect as ht, useRef as D, useMemo as A, useState as G } from "react";
+import { c as gt, y as q, T as w, I as Y, z as pt } from "./FontAnalyzer-CwIpgTGd.js";
+import { p as nt, U as yt } from "./UnifiedFontService-CC3CSmH5.js";
+import { a as bt, o as $, b as m, n as xt, l as y, u as z, c as vt } from "./CanvasStateV1-DmZ1Qvvn.js";
+function U(s) {
+  return s.text;
+}
+function E(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 = E(o), i = U(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) => E(o) === t);
+    return n ? U(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) => E(o) === t);
+    return n ? V(n) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((t) => V(t) !== null).map(E).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) => E(i) !== t ? i : (o = !0, { ...i, 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: 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 = U(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 Ct(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 Kt {
+  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 = Ct(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 e = X(o);
+    if (e.length > 0 && !e.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(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 = R(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 = R(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 = R(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 mt(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();
+  }
+}
+const J = gt("useCommands");
+function Vt() {
+  const s = tt(), {
+    undo: t,
+    redo: n,
+    canUndo: o,
+    canRedo: e,
+    executeElementUpdate: i,
+    executeAddElement: a,
+    executeRemoveElement: r,
+    executeReorderElement: l,
+    executeCommandBatch: c,
+    executeCreateArtboard: u,
+    executeDeleteArtboard: b,
+    executeUpdateArtboard: v
+  } = s, d = N(() => {
+    J.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
+  }, []), h = N((_) => {
+    J.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
+  }, []);
+  return {
+    // Undo/Redo
+    undo: t,
+    redo: n,
+    canUndo: o,
+    canRedo: e,
+    // History management
+    clearHistory: d,
+    clearArtboardHistory: h,
+    // Command execution
+    executeElementUpdate: i,
+    executeAddElement: a,
+    executeRemoveElement: r,
+    executeReorderElement: l,
+    executeCreateArtboard: u,
+    executeDeleteArtboard: b,
+    executeUpdateArtboard: v,
+    // Batch execution
+    executeCommandBatch: c
+  };
+}
+function Gt() {
+  const { selectedElement: s } = tt();
+  return s ?? null;
+}
+const Nt = 3e3, Q = {
+  text: "useTextBinding",
+  image: "useImageBinding",
+  font: "useFontBinding"
+}, $t = {
+  text: "setText",
+  image: "setImageUrl",
+  font: "setFontFamily"
+}, Et = {
+  text: "text",
+  image: "image",
+  font: "text"
+}, L = /* @__PURE__ */ new Set();
+function Z(s) {
+  return s instanceof w ? "text" : s instanceof Y ? "image" : "other";
+}
+function Dt(s, t, n) {
+  const o = `[${Q[s]}]`, e = `the binding is dead (isConnected: false, ${$t[s]} is a no-op)`, i = Et[s], a = n.getAllByName(t);
+  if (a.length > 0) {
+    const c = [...new Set(a.map(Z))], u = i === "text" ? "image" : "text", b = c.length === 1 && c[0] === u ? ` Bind it with ${Q[u]}("${t}") instead.` : "";
+    return `${o} the layer named "${t}" is ${c.join("/")}, not ${i} — ${e}.${b}`;
+  }
+  const r = n.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${Z(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 H(s, t, n, o) {
+  ft(() => {
+    var a;
+    if (o || typeof q > "u" || ((a = q.env) == null ? void 0 : a.NODE_ENV) === "production") return;
+    const e = `${s}:${t}`;
+    if (L.has(e)) return;
+    const i = setTimeout(() => {
+      L.has(e) || (L.add(e), console.warn(Dt(s, t, n)));
+    }, Nt);
+    return () => clearTimeout(i);
+  }, [s, t, n, o]);
+}
+function k(s) {
+  const t = et(nt), n = dt();
+  ht(() => {
+    if (t)
+      return t.registry.requireCanvas(n, s);
+  }, [t, n, s]);
+}
+function M(s) {
+  return s instanceof w ? "text" : s instanceof Y ? "image" : null;
+}
+const Ot = {
+  text: "useTextBinding / useFontBinding",
+  image: "useImageBinding"
+};
+function P(s, t, n) {
+  const o = it(s), e = o ? s.name : s, i = et(nt), a = D(null);
+  if (o && s.kind !== t)
+    throw new C(
+      "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: M(u) })).filter((u) => !!u.name && u.kind !== null);
+        throw new C(
+          "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) => M(c) === t)) {
+        const c = M(l[0]) ?? "unbindable";
+        throw new C(
+          "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 It = () => {
+}, Tt = [];
+function qt(s) {
+  const { elementStore: t } = O();
+  k("useTextBinding()");
+  const n = P(s, "text", t), { executeElementUpdate: o } = S(), e = A(() => t.getAllByName(n).filter((r) => r instanceof w), [t, n]), i = N(
+    (a) => {
+      for (const r of e) {
+        const l = r.clone();
+        l.setText(a), o(r, l);
+      }
+    },
+    [e, o]
+  );
+  return H("text", n, t, e.length > 0), e.length === 0 ? { text: "", setText: It, element: null, elements: Tt, isConnected: !1 } : {
+    text: e[0].getText(),
+    setText: i,
+    element: e[0],
+    elements: e,
+    isConnected: !0
+  };
+}
+const Bt = () => {
+}, St = [];
+function At(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 zt(s, t) {
+  k("useImageBinding()");
+  const n = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: e } = O(), i = P(s, "image", o), { executeElementUpdate: a } = S(), r = A(() => o.getAllByName(i).filter((h) => h instanceof Y), [o, i]), l = D(/* @__PURE__ */ new Map());
+  for (const d of r)
+    if (!l.current.has(d.id)) {
+      const h = d.transformData;
+      l.current.set(d.id, {
+        width: h.width * h.cropWidth,
+        height: h.height * h.cropHeight
+      });
+    }
+  const c = D(r);
+  c.current = r;
+  const u = D(a);
+  u.current = a;
+  const b = D(e);
+  b.current = e;
+  const v = N(
+    (d) => {
+      const h = c.current, _ = u.current;
+      for (const I of h) {
+        const W = l.current.get(I.id);
+        if (!W) continue;
+        const { width: j, height: K } = W, g = I.clone();
+        g.imageLoaded = !1, g.imageElement = null, g.isCropping = !1, g.imageUrl = d, n === "cover" ? (g.preserveDimensions = !0, g.onLoadCallback = (f) => {
+          const T = f.imageAspectRatio || 1, p = At(j, K, T);
+          f.transformData.width = p.width, f.transformData.height = p.height, f.transformData.cropX = p.cropX, f.transformData.cropY = p.cropY, f.transformData.cropWidth = p.cropWidth, f.transformData.cropHeight = p.cropHeight, _(I, f);
+        }) : (g.preserveDimensions = !1, g.onLoadCallback = (f) => {
+          const T = f.transformData.width, p = f.transformData.height, F = Math.min(j / T, K / p, 1);
+          F < 1 && (f.transformData.width = T * F, f.transformData.height = p * F), f.transformData.cropX = 0, f.transformData.cropY = 0, f.transformData.cropWidth = 1, f.transformData.cropHeight = 1, _(I, f);
+        }), g.loadImage(d);
+      }
+    },
+    [n]
+    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
+  );
+  return H("image", i, o, r.length > 0), r.length === 0 ? { imageUrl: "", setImageUrl: Bt, element: null, elements: St, isConnected: !1 } : {
+    imageUrl: r[0].imageUrl,
+    setImageUrl: v,
+    element: r[0],
+    elements: r,
+    isConnected: !0
+  };
+}
+const wt = [];
+function B(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 x(s, t) {
+  return typeof s == "string" && B(s) === t;
+}
+function st(s, t) {
+  var o, e, i;
+  const n = s;
+  return x(n.color, t) || x((o = n.transformData) == null ? void 0 : o.fillColor, t) || x((e = n.transformData) == null ? void 0 : e.strokeColor, t) || ((i = n.stroke) == null ? void 0 : i.enabled) === !0 && x(n.stroke.color, t);
+}
+function kt(s, t, n) {
+  var a, r, l;
+  if (!st(s, t)) return null;
+  const o = s.clone(), e = s, i = o;
+  return x(e.color, t) && (typeof i.setColor == "function" ? i.setColor(n) : i.color = n), x((a = e.transformData) == null ? void 0 : a.fillColor, t) && (i.transformData = { ...i.transformData, fillColor: n }), x((r = e.transformData) == null ? void 0 : r.strokeColor, t) && (i.transformData = { ...i.transformData, strokeColor: n }), ((l = e.stroke) == null ? void 0 : l.enabled) === !0 && x(e.stroke.color, t) && (i.stroke = { ...i.stroke, color: n }), o;
+}
+function Xt(s) {
+  const t = rt(s) ? s.value : s, { elementStore: n } = O(), { executeElementUpdate: o } = S();
+  k("useColorBinding()");
+  const [e, i] = G(() => B(t)), [a, r] = G(t);
+  t !== a && (r(t), i(B(t)));
+  const l = A(
+    () => n.getAll().filter((u) => st(u, e)),
+    [n, e]
+  ), c = N(
+    (u) => {
+      const b = B(u);
+      if (b !== e) {
+        for (const v of n.getAll()) {
+          const d = kt(v, e, u);
+          d && o(v, d);
+        }
+        i(b);
+      }
+    },
+    [n, e, o]
+  );
+  return l.length === 0 ? { color: e, setColor: c, elements: wt, isConnected: !1 } : { color: e, setColor: c, elements: l, isConnected: !0 };
+}
+const _t = () => {
+}, Ft = [];
+function Jt(s) {
+  const { elementStore: t } = O();
+  k("useFontBinding()");
+  const n = P(s, "text", t), { executeElementUpdate: o } = S(), e = A(() => t.getAllByName(n).filter((r) => r instanceof w), [t, n]), i = N(
+    (a) => {
+      yt.loadGoogleFontByName(a);
+      for (const r of e) {
+        if (r.fontFamily === a) continue;
+        pt.clearCache(r.fontFamily);
+        const l = r.clone();
+        l.fontFamily = a, o(r, l);
+      }
+    },
+    [e, o]
+  );
+  return H("font", n, t, e.length > 0), e.length === 0 ? { fontFamily: "", setFontFamily: _t, element: null, elements: Ft, isConnected: !1 } : {
+    fontFamily: e[0].fontFamily,
+    setFontFamily: i,
+    element: e[0],
+    elements: e,
+    isConnected: !0
+  };
+}
+function Qt(s) {
+  const { elementStore: t } = O();
+  return s ? t.getByName(s) ?? null : null;
+}
+const ot = "personalization", Rt = bt("type", [
+  $({
+    type: y("text"),
+    name: m().min(1),
+    label: m(),
+    placeholder: m().optional(),
+    maxLength: xt().int().positive().optional(),
+    artboard: m().min(1).optional(),
+    group: m().optional()
+  }),
+  $({
+    type: y("image"),
+    name: m().min(1),
+    label: m(),
+    placeholder: m().optional(),
+    fit: z([y("cover"), y("contain")]).optional(),
+    artboard: m().min(1).optional(),
+    group: m().optional()
+  }),
+  $({
+    type: y("color"),
+    color: m().min(1),
+    label: m(),
+    artboard: m().min(1).optional(),
+    group: m().optional()
+  }),
+  $({
+    type: y("select"),
+    name: m().min(1),
+    label: m(),
+    property: z([y("text"), y("imageUrl"), y("fontFamily")]),
+    options: vt($({ label: m(), value: m() })).min(1),
+    artboard: m().min(1).optional(),
+    group: m().optional()
+  })
+]);
+function Zt(s) {
+  if (!s || typeof s != "object") return [];
+  const t = s[ot];
+  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 = Rt.safeParse(e);
+    i.success && n.push(i.data);
+  }
+  return n;
+}
+function te(s, t) {
+  return { ...s, [ot]: t };
+}
+export {
+  Kt as C,
+  jt as D,
+  ot as T,
+  Vt as a,
+  Qt as b,
+  Jt as c,
+  zt as d,
+  Gt as e,
+  qt as f,
+  X as g,
+  Zt as r,
+  Xt as u,
+  te as w
+};
+//# sourceMappingURL=template-fields-CQ6n2P4V.js.map