@snowcone-app/canvas 0.21.3 → 0.23.0

package/dist/template-fields-C2pSfMBh.js

@@ -1,494 +0,0 @@
-import { g as _, u as G, c as D, b as I } from "./editorErrors-B2mb1sVN.js";
-import { l as H } from "./design-builder-CT4DHIPe.js";
-import { toOptionAttributes as Z, toCombinations as tt, getMissingSelections as et, validateProductSelection as nt, findBestCombination as w, computeDisabledChoices as st } from "@snowcone-app/sdk";
-import { useCallback as v, useEffect as ot, useMemo as A, useRef as S, useState as L } from "react";
-import { c as rt, y as W, T as k, I as q, z as it } from "./FontAnalyzer-CwIpgTGd.js";
-import { U as at } from "./UnifiedFontService-CC3CSmH5.js";
-import { a as ct, o as N, b as c, n as lt, l as y, u as Y, c as ft } from "./CanvasStateV1-DmZ1Qvvn.js";
-function U(s) {
-  return s.text;
-}
-function O(s) {
-  return s.name;
-}
-class Ut {
-  constructor(t) {
-    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e)), this.state = t;
-    const n = /* @__PURE__ */ new Map();
-    for (const e of t.elements) {
-      const r = O(e), o = U(e);
-      r && typeof o == "string" && n.set(r, o);
-    }
-    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((e) => O(e) === 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((e) => O(e) === t);
-    return n ? H(n) : void 0;
-  }
-  /** Names of bindable layers in the current state, for error messages. */
-  bindableLayerNames() {
-    return this.state.elements.filter((t) => H(t) !== null).map(O).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 e = !1;
-    const r = this.state.elements.map((o) => O(o) !== t ? o : (e = !0, { ...o, text: n }));
-    if (!e)
-      throw new _(
-        "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: r });
-  }
-  /** ≥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 e = U(t);
-      return typeof e == "string" && e.trim().length > 0;
-    });
-  }
-  emit() {
-    for (const t of [...this.listeners]) t();
-  }
-}
-function K(s) {
-  return (s.choices ?? []).map((t) => typeof t == "string" ? t : t.label ?? "").filter((t) => t !== "");
-}
-function ut(s, t) {
-  if (!s.variantId) return {};
-  const n = t.find((r) => r.variantId === s.variantId);
-  if (!n) return {};
-  const e = {};
-  for (const [r, o] of Object.entries(n))
-    r === "variantId" || r === "price" || (typeof o == "string" ? e[r] = o : typeof o == "number" && (e[r] = String(o)));
-  return e;
-}
-class Ft {
-  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 = Z({ options: t.options }), this.combos = tt({ options: t.options }), this.selection = ut(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 e = this.attrs[t];
-    if (!e)
-      throw new _(
-        "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 r = K(e);
-    if (r.length > 0 && !r.includes(n))
-      throw new _(
-        "E_UNKNOWN_OPTION",
-        `"${n}" is not a choice of option "${t}" on product ${this.product.productId}. Valid choices: ${JSON.stringify(r)}.`,
-        { key: t, choice: n, validChoices: r, 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 ? [] : et(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 : nt(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 = w(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 = w(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 = w(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, e] of Object.entries(this.attrs))
-      t[n] = { ...e, choices: K(e) };
-    return st(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 V = rt("useCommands");
-function _t() {
-  const s = G(), {
-    undo: t,
-    redo: n,
-    canUndo: e,
-    canRedo: r,
-    executeElementUpdate: o,
-    executeAddElement: i,
-    executeRemoveElement: a,
-    executeReorderElement: u,
-    executeCommandBatch: l,
-    executeCreateArtboard: h,
-    executeDeleteArtboard: b,
-    executeUpdateArtboard: m
-  } = s, d = v(() => {
-    V.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), $ = v((C) => {
-    V.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
-  }, []);
-  return {
-    // Undo/Redo
-    undo: t,
-    redo: n,
-    canUndo: e,
-    canRedo: r,
-    // History management
-    clearHistory: d,
-    clearArtboardHistory: $,
-    // Command execution
-    executeElementUpdate: o,
-    executeAddElement: i,
-    executeRemoveElement: a,
-    executeReorderElement: u,
-    executeCreateArtboard: h,
-    executeDeleteArtboard: b,
-    executeUpdateArtboard: m,
-    // Batch execution
-    executeCommandBatch: l
-  };
-}
-function kt() {
-  const { selectedElement: s } = G();
-  return s ?? null;
-}
-const mt = 3e3, z = {
-  text: "useTextBinding",
-  image: "useImageBinding",
-  font: "useFontBinding"
-}, dt = {
-  text: "setText",
-  image: "setImageUrl",
-  font: "setFontFamily"
-}, ht = {
-  text: "text",
-  image: "image",
-  font: "text"
-}, F = /* @__PURE__ */ new Set();
-function X(s) {
-  return s instanceof k ? "text" : s instanceof q ? "image" : "other";
-}
-function pt(s, t, n) {
-  const e = `[${z[s]}]`, r = `the binding is dead (isConnected: false, ${dt[s]} is a no-op)`, o = ht[s], i = n.getAllByName(t);
-  if (i.length > 0) {
-    const l = [...new Set(i.map(X))], h = o === "text" ? "image" : "text", b = l.length === 1 && l[0] === h ? ` Bind it with ${z[h]}("${t}") instead.` : "";
-    return `${e} the layer named "${t}" is ${l.join("/")}, not ${o} — ${r}.${b}`;
-  }
-  const a = n.getAll().filter((l) => l.name).map((l) => `"${l.name}" (${X(l)})`), u = a.length ? `Named layers on this canvas: ${a.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${o}(…, { name: '${t}' }) or the element's \`name\` property.`;
-  return `${e} no ${o} layer named "${t}" exists — ${r}. ${u}`;
-}
-function M(s, t, n, e) {
-  ot(() => {
-    var i;
-    if (e || typeof W > "u" || ((i = W.env) == null ? void 0 : i.NODE_ENV) === "production") return;
-    const r = `${s}:${t}`;
-    if (F.has(r)) return;
-    const o = setTimeout(() => {
-      F.has(r) || (F.add(r), console.warn(pt(s, t, n)));
-    }, mt);
-    return () => clearTimeout(o);
-  }, [s, t, n, e]);
-}
-const gt = () => {
-}, yt = [];
-function Mt(s) {
-  const { elementStore: t } = D(), { executeElementUpdate: n } = I(), e = A(() => t.getAllByName(s).filter((i) => i instanceof k), [t, s]), r = v(
-    (o) => {
-      for (const i of e) {
-        const a = i.clone();
-        a.setText(o), n(i, a);
-      }
-    },
-    [e, n]
-  );
-  return M("text", s, t, e.length > 0), e.length === 0 ? { text: "", setText: gt, element: null, elements: yt, isConnected: !1 } : {
-    text: e[0].getText(),
-    setText: r,
-    element: e[0],
-    elements: e,
-    isConnected: !0
-  };
-}
-const bt = () => {
-}, xt = [];
-function vt(s, t, n) {
-  const e = s / t;
-  if (n >= e) {
-    const r = t, o = r * n, i = s / o;
-    return {
-      width: o,
-      height: r,
-      cropX: (1 - i) / 2,
-      cropY: 0,
-      cropWidth: i,
-      cropHeight: 1
-    };
-  } else {
-    const r = s, o = r / n, i = t / o;
-    return {
-      width: r,
-      height: o,
-      cropX: 0,
-      cropY: (1 - i) / 2,
-      cropWidth: 1,
-      cropHeight: i
-    };
-  }
-}
-function Pt(s, t) {
-  const n = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: e, setElements: r } = D(), { executeElementUpdate: o } = I(), i = A(() => e.getAllByName(s).filter((d) => d instanceof q), [e, s]), a = S(/* @__PURE__ */ new Map());
-  for (const m of i)
-    if (!a.current.has(m.id)) {
-      const d = m.transformData;
-      a.current.set(m.id, {
-        width: d.width * d.cropWidth,
-        height: d.height * d.cropHeight
-      });
-    }
-  const u = S(i);
-  u.current = i;
-  const l = S(o);
-  l.current = o;
-  const h = S(r);
-  h.current = r;
-  const b = v(
-    (m) => {
-      const d = u.current, $ = l.current;
-      for (const C of d) {
-        const P = a.current.get(C.id);
-        if (!P) continue;
-        const { width: R, height: j } = P, p = C.clone();
-        p.imageLoaded = !1, p.imageElement = null, p.isCropping = !1, p.imageUrl = m, n === "cover" ? (p.preserveDimensions = !0, p.onLoadCallback = (f) => {
-          const E = f.imageAspectRatio || 1, g = vt(R, j, E);
-          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, $(C, f);
-        }) : (p.preserveDimensions = !1, p.onLoadCallback = (f) => {
-          const E = f.transformData.width, g = f.transformData.height, B = Math.min(R / E, j / g, 1);
-          B < 1 && (f.transformData.width = E * B, f.transformData.height = g * B), f.transformData.cropX = 0, f.transformData.cropY = 0, f.transformData.cropWidth = 1, f.transformData.cropHeight = 1, $(C, f);
-        }), p.loadImage(m);
-      }
-    },
-    [n]
-    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
-  );
-  return M("image", s, e, i.length > 0), i.length === 0 ? { imageUrl: "", setImageUrl: bt, element: null, elements: xt, isConnected: !1 } : {
-    imageUrl: i[0].imageUrl,
-    setImageUrl: b,
-    element: i[0],
-    elements: i,
-    isConnected: !0
-  };
-}
-const Ct = [];
-function T(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" && T(s) === t;
-}
-function J(s, t) {
-  var e, r, o;
-  const n = s;
-  return x(n.color, t) || x((e = n.transformData) == null ? void 0 : e.fillColor, t) || x((r = n.transformData) == null ? void 0 : r.strokeColor, t) || ((o = n.stroke) == null ? void 0 : o.enabled) === !0 && x(n.stroke.color, t);
-}
-function Nt(s, t, n) {
-  var i, a, u;
-  if (!J(s, t)) return null;
-  const e = s.clone(), r = s, o = e;
-  return x(r.color, t) && (typeof o.setColor == "function" ? o.setColor(n) : o.color = n), x((i = r.transformData) == null ? void 0 : i.fillColor, t) && (o.transformData = { ...o.transformData, fillColor: n }), x((a = r.transformData) == null ? void 0 : a.strokeColor, t) && (o.transformData = { ...o.transformData, strokeColor: n }), ((u = r.stroke) == null ? void 0 : u.enabled) === !0 && x(r.stroke.color, t) && (o.stroke = { ...o.stroke, color: n }), e;
-}
-function Rt(s) {
-  const { elementStore: t } = D(), { executeElementUpdate: n } = I(), [e, r] = L(() => T(s)), [o, i] = L(s);
-  s !== o && (i(s), r(T(s)));
-  const a = A(
-    () => t.getAll().filter((l) => J(l, e)),
-    [t, e]
-  ), u = v(
-    (l) => {
-      const h = T(l);
-      if (h !== e) {
-        for (const b of t.getAll()) {
-          const m = Nt(b, e, l);
-          m && n(b, m);
-        }
-        r(h);
-      }
-    },
-    [t, e, n]
-  );
-  return a.length === 0 ? { color: e, setColor: u, elements: Ct, isConnected: !1 } : { color: e, setColor: u, elements: a, isConnected: !0 };
-}
-const Ot = () => {
-}, Dt = [];
-function jt(s) {
-  const { elementStore: t } = D(), { executeElementUpdate: n } = I(), e = A(() => t.getAllByName(s).filter((i) => i instanceof k), [t, s]), r = v(
-    (o) => {
-      at.loadGoogleFontByName(o);
-      for (const i of e) {
-        if (i.fontFamily === o) continue;
-        it.clearCache(i.fontFamily);
-        const a = i.clone();
-        a.fontFamily = o, n(i, a);
-      }
-    },
-    [e, n]
-  );
-  return M("font", s, t, e.length > 0), e.length === 0 ? { fontFamily: "", setFontFamily: Ot, element: null, elements: Dt, isConnected: !1 } : {
-    fontFamily: e[0].fontFamily,
-    setFontFamily: r,
-    element: e[0],
-    elements: e,
-    isConnected: !0
-  };
-}
-function Ht(s) {
-  const { elementStore: t } = D();
-  return s ? t.getByName(s) ?? null : null;
-}
-const Q = "personalization", $t = ct("type", [
-  N({
-    type: y("text"),
-    name: c().min(1),
-    label: c(),
-    placeholder: c().optional(),
-    maxLength: lt().int().positive().optional(),
-    artboard: c().min(1).optional(),
-    group: c().optional()
-  }),
-  N({
-    type: y("image"),
-    name: c().min(1),
-    label: c(),
-    placeholder: c().optional(),
-    fit: Y([y("cover"), y("contain")]).optional(),
-    artboard: c().min(1).optional(),
-    group: c().optional()
-  }),
-  N({
-    type: y("color"),
-    color: c().min(1),
-    label: c(),
-    artboard: c().min(1).optional(),
-    group: c().optional()
-  }),
-  N({
-    type: y("select"),
-    name: c().min(1),
-    label: c(),
-    property: Y([y("text"), y("imageUrl"), y("fontFamily")]),
-    options: ft(N({ label: c(), value: c() })).min(1),
-    artboard: c().min(1).optional(),
-    group: c().optional()
-  })
-]);
-function Lt(s) {
-  if (!s || typeof s != "object") return [];
-  const t = s[Q];
-  if (!Array.isArray(t)) return [];
-  const n = [];
-  for (const e of t) {
-    if (!e || typeof e != "object") continue;
-    const r = "type" in e ? e : { ...e, type: "text" }, o = $t.safeParse(r);
-    o.success && n.push(o.data);
-  }
-  return n;
-}
-function Wt(s, t) {
-  return { ...s, [Q]: t };
-}
-export {
-  Ft as C,
-  Ut as D,
-  Q as T,
-  _t as a,
-  Ht as b,
-  jt as c,
-  Pt as d,
-  kt as e,
-  Mt as f,
-  K as g,
-  Lt as r,
-  Rt as u,
-  Wt as w
-};
-//# sourceMappingURL=template-fields-C2pSfMBh.js.map