@snowcone-app/canvas 0.37.0 → 0.38.0

package/dist/template-fields-D8uOutD4.js

@@ -1,505 +0,0 @@
-import { E as x, z as V, T as B, I as M, C as st } from "./FontAnalyzer-CEYA_6fY.js";
-import { l as q, u as ot, i as it, e as O, c as S, j as rt } from "./design-builder-CqgTpp9B.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-CQi4Pyd2.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-DLE5d1-d.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-D8uOutD4.js.map