@snowcone-app/canvas 0.37.0 → 0.38.0

package/dist/template-fields-CBLHgW7G.js

@@ -0,0 +1,556 @@
+import { t as v, p as V, T, I as M, x as st } from "./FontAnalyzer-DWHS41ba.js";
+import { l as G, b as ot, i as it, u as O, a as B, h as rt } from "./design-builder-CoCtjIwj.js";
+import { toOptionAttributes as at, toCombinations as ct, getMissingSelections as lt, validateProductSelection as mt, findBestCombination as F, computeDisabledChoices as ft } from "@snowcone-app/sdk";
+import { useEffect as ut, useContext as Z, useId as dt, useLayoutEffect as ht, useRef as C, useMemo as A, useCallback as _, useState as q } from "react";
+import { E as tt, U as gt } from "./useCommands-x8J7_Mzy.js";
+import { b as pt, o as $, c as f, n as bt, l as p, u as J, e as yt } from "./CanvasStateV1-C9LQt2J0.js";
+function R(s) {
+  return s.text;
+}
+function x(s) {
+  return s.name;
+}
+class Pt {
+  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 e = /* @__PURE__ */ new Map();
+    for (const o of t.elements) {
+      const n = x(o), i = R(o);
+      n && typeof i == "string" && e.set(n, i);
+    }
+    this.seedTextByName = e;
+  }
+  /** 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 e = this.state.elements.find((o) => x(o) === t);
+    return e ? R(e) : 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 e = this.state.elements.find((o) => x(o) === t);
+    return e ? G(e) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((t) => G(t) !== null).map(x).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, e) {
+    let o = !1;
+    const n = this.state.elements.map((i) => x(i) !== t ? i : (o = !0, { ...i, text: e }));
+    if (!o)
+      throw new v(
+        "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: n });
+  }
+  /** Artboard names in author order — the first is the base (ADR-0101). */
+  artboardNames() {
+    return this.state.artboards.map((t) => t.name);
+  }
+  /**
+   * Split a placement out of the base (ADR-0101): clone the FIRST artboard
+   * and every element on it into a new artboard named `label`. Elements get
+   * fresh ids and the new artboard's membership tag. No-op when `label`
+   * already has an artboard. Used when NO canvas is mounted — with one, the
+   * editor document does the same through the CanvasBridge and the result
+   * lands here via `setState`.
+   */
+  splitArtboard(t) {
+    const { artboards: e, elements: o } = this.state, n = e[0];
+    if (!n || e.some((c) => c.name === t)) return;
+    const i = n.name, a = (c) => {
+      const l = c.artboard;
+      return l === void 0 || l === i;
+    }, r = o.filter(a).map((c, l) => ({
+      ...c,
+      id: `${String(c.id ?? "el")}__${t}__${l}`,
+      artboard: t
+    }));
+    this.setState({
+      ...this.state,
+      artboards: [...e, { ...n, name: t }],
+      elements: [...o, ...r]
+    });
+  }
+  /**
+   * Re-link a placement (ADR-0101): drop the artboard named `label` and every
+   * element tagged to it, so the placement inherits the base again. No-op for
+   * an unknown label. Refuses the base itself — that is what the others
+   * inherit (`E_LINK_BASE`).
+   */
+  removeArtboard(t) {
+    var n;
+    const { artboards: e, elements: o } = this.state;
+    if (((n = e[0]) == null ? void 0 : n.name) === t)
+      throw new v(
+        "E_LINK_BASE",
+        `"${t}" is the base artboard — every linked placement inherits it, so it cannot be re-linked. Link a split placement instead, or call linkAll(). Artboards: ${JSON.stringify(this.artboardNames())}.`,
+        { artboardName: t, validNames: this.artboardNames().slice(1), docSlug: "embed-mode" }
+      );
+    e.some((i) => i.name === t) && this.setState({
+      ...this.state,
+      artboards: e.filter((i) => i.name !== t),
+      elements: o.filter((i) => i.artboard !== t),
+      activeArtboard: this.state.activeArtboard === t ? e[0].name : this.state.activeArtboard
+    });
+  }
+  /** ≥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 e = t.transformType;
+      if (e === "image") return !!t.imageUrl;
+      if (e === "shape" || e === "group" || e === "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 e = t.find((n) => n.variantId === s.variantId);
+  if (!e) return {};
+  const o = {};
+  for (const [n, i] of Object.entries(e))
+    n === "variantId" || n === "price" || (typeof i == "string" ? o[n] = i : typeof i == "number" && (o[n] = String(i)));
+  return o;
+}
+class Wt {
+  constructor(t) {
+    this.quantity = 1, this.version = 0, this.listeners = /* @__PURE__ */ new Set(), this.getVersion = () => this.version, this.subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e)), 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, e) {
+    const o = this.attrs[t];
+    if (!o)
+      throw new v(
+        "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 n = X(o);
+    if (n.length > 0 && !n.includes(e))
+      throw new v(
+        "E_UNKNOWN_OPTION",
+        `"${e}" is not a choice of option "${t}" on product ${this.product.productId}. Valid choices: ${JSON.stringify(n)}.`,
+        { key: t, choice: e, validChoices: n, docSlug: "embed-mode" }
+      );
+    this.selection[t] !== e && (this.selection = { ...this.selection, [t]: e }, 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 : mt(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 [e, o] of Object.entries(this.attrs))
+      t[e] = { ...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 jt() {
+  const { selectedElement: s } = ot();
+  return s ?? null;
+}
+const Nt = 3e3, z = {
+  text: "useTextBinding",
+  image: "useImageBinding",
+  font: "useFontBinding"
+}, $t = {
+  text: "setText",
+  image: "setImageUrl",
+  font: "setFontFamily"
+}, xt = {
+  text: "text",
+  image: "image",
+  font: "text"
+}, U = /* @__PURE__ */ new Set();
+function Q(s) {
+  return s instanceof T ? "text" : s instanceof M ? "image" : "other";
+}
+function Ct(s, t, e) {
+  const o = `[${z[s]}]`, n = `the binding is dead (isConnected: false, ${$t[s]} is a no-op)`, i = xt[s], a = e.getAllByName(t);
+  if (a.length > 0) {
+    const l = [...new Set(a.map(Q))], m = i === "text" ? "image" : "text", N = l.length === 1 && l[0] === m ? ` Bind it with ${z[m]}("${t}") instead.` : "";
+    return `${o} the layer named "${t}" is ${l.join("/")}, not ${i} — ${n}.${N}`;
+  }
+  const r = e.getAll().filter((l) => l.name).map((l) => `"${l.name}" (${Q(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().${i}(…, { name: '${t}' }) or the element's \`name\` property.`;
+  return `${o} no ${i} layer named "${t}" exists — ${n}. ${c}`;
+}
+function Y(s, t, e, o) {
+  ut(() => {
+    var a;
+    if (o || typeof V > "u" || ((a = V.env) == null ? void 0 : a.NODE_ENV) === "production") return;
+    const n = `${s}:${t}`;
+    if (U.has(n)) return;
+    const i = setTimeout(() => {
+      U.has(n) || (U.add(n), console.warn(Ct(s, t, e)));
+    }, Nt);
+    return () => clearTimeout(i);
+  }, [s, t, e, o]);
+}
+function k(s) {
+  const t = Z(tt), e = dt();
+  ht(() => {
+    if (t)
+      return t.registry.requireCanvas(e, s);
+  }, [t, e, s]);
+}
+function L(s) {
+  return s instanceof T ? "text" : s instanceof M ? "image" : null;
+}
+const Ot = {
+  text: "useTextBinding / useFontBinding",
+  image: "useImageBinding"
+};
+function P(s, t, e) {
+  const o = it(s), n = o ? s.name : s, i = Z(tt), a = C(null);
+  if (o && s.kind !== t)
+    throw new v(
+      "E_LAYER_WRONG_KIND",
+      `layer "${n}" is a ${s.kind} token — this hook binds ${t} layers only (use ${Ot[s.kind]}).`,
+      { layerName: n, actualKind: s.kind, expectedKind: t, docSlug: "embed-mode" }
+    );
+  if (o && i && a.current !== n) {
+    const r = e.getAll();
+    if (r.length > 0) {
+      const c = e.getAllByName(n);
+      if (c.length === 0) {
+        const l = r.map((m) => ({ name: m.name, kind: L(m) })).filter((m) => !!m.name && m.kind !== null);
+        throw new v(
+          "E_LAYER_NOT_FOUND",
+          `no layer "${n}" 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: n, validNames: l.map((m) => m.name), docSlug: "embed-mode" }
+        );
+      }
+      if (!c.some((l) => L(l) === t)) {
+        const l = L(c[0]) ?? "unbindable";
+        throw new v(
+          "E_LAYER_WRONG_KIND",
+          `layer "${n}" is ${l === "unbindable" ? "not a bindable kind" : `an ${l} layer`} — this hook binds ${t} layers only.`,
+          { layerName: n, actualKind: l, expectedKind: t, docSlug: "embed-mode" }
+        );
+      }
+      a.current = n;
+    }
+  }
+  return n;
+}
+const St = () => {
+}, Dt = [];
+function Kt(s) {
+  const { elementStore: t } = O();
+  k("useTextBinding()");
+  const e = P(s, "text", t), { executeElementUpdate: o } = B(), n = A(() => t.getAllByName(e).filter((r) => r instanceof T), [t, e]), i = _(
+    (a) => {
+      for (const r of n) {
+        const c = r.clone();
+        c.setText(a), o(r, c);
+      }
+    },
+    [n, o]
+  );
+  return Y("text", e, t, n.length > 0), n.length === 0 ? { text: "", setText: St, element: null, elements: Dt, isConnected: !1 } : {
+    text: n[0].getText(),
+    setText: i,
+    element: n[0],
+    elements: n,
+    isConnected: !0
+  };
+}
+const Et = () => {
+}, It = [];
+function Tt(s, t, e) {
+  const o = s / t;
+  if (e >= o) {
+    const n = t, i = n * e, a = s / i;
+    return {
+      width: i,
+      height: n,
+      cropX: (1 - a) / 2,
+      cropY: 0,
+      cropWidth: a,
+      cropHeight: 1
+    };
+  } else {
+    const n = s, i = n / e, a = t / i;
+    return {
+      width: n,
+      height: i,
+      cropX: 0,
+      cropY: (1 - a) / 2,
+      cropWidth: 1,
+      cropHeight: a
+    };
+  }
+}
+function Ht(s, t) {
+  k("useImageBinding()");
+  const e = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: n } = O(), i = P(s, "image", o), { executeElementUpdate: a } = B(), r = A(() => o.getAllByName(i).filter((b) => b instanceof M), [o, i]), c = C(/* @__PURE__ */ new Map());
+  for (const d of r)
+    if (!c.current.has(d.id)) {
+      const b = d.transformData;
+      c.current.set(d.id, {
+        width: b.width * b.cropWidth,
+        height: b.height * b.cropHeight
+      });
+    }
+  const l = C(r);
+  l.current = r;
+  const m = C(a);
+  m.current = a;
+  const N = C(n);
+  N.current = n;
+  const S = _(
+    (d) => {
+      const b = l.current, W = m.current;
+      for (const D of b) {
+        const j = c.current.get(D.id);
+        if (!j) continue;
+        const { width: K, height: H } = j, h = D.clone();
+        h.imageLoaded = !1, h.imageElement = null, h.isCropping = !1, h.imageUrl = d, e === "cover" ? (h.preserveDimensions = !0, h.onLoadCallback = (u) => {
+          const E = u.imageAspectRatio || 1, g = Tt(K, H, E);
+          u.transformData.width = g.width, u.transformData.height = g.height, u.transformData.cropX = g.cropX, u.transformData.cropY = g.cropY, u.transformData.cropWidth = g.cropWidth, u.transformData.cropHeight = g.cropHeight, W(D, u);
+        }) : (h.preserveDimensions = !1, h.onLoadCallback = (u) => {
+          const E = u.transformData.width, g = u.transformData.height, w = Math.min(K / E, H / g, 1);
+          w < 1 && (u.transformData.width = E * w, u.transformData.height = g * w), u.transformData.cropX = 0, u.transformData.cropY = 0, u.transformData.cropWidth = 1, u.transformData.cropHeight = 1, W(D, u);
+        }), h.loadImage(d);
+      }
+    },
+    [e]
+    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
+  );
+  return Y("image", i, o, r.length > 0), r.length === 0 ? { imageUrl: "", setImageUrl: Et, element: null, elements: It, isConnected: !1 } : {
+    imageUrl: r[0].imageUrl,
+    setImageUrl: S,
+    element: r[0],
+    elements: r,
+    isConnected: !0
+  };
+}
+const Bt = [];
+function I(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 y(s, t) {
+  return typeof s == "string" && I(s) === t;
+}
+function et(s, t) {
+  var o, n, i;
+  const e = s;
+  return y(e.color, t) || y((o = e.transformData) == null ? void 0 : o.fillColor, t) || y((n = e.transformData) == null ? void 0 : n.strokeColor, t) || ((i = e.stroke) == null ? void 0 : i.enabled) === !0 && y(e.stroke.color, t);
+}
+function At(s, t, e) {
+  var a, r, c;
+  if (!et(s, t)) return null;
+  const o = s.clone(), n = s, i = o;
+  return y(n.color, t) && (typeof i.setColor == "function" ? i.setColor(e) : i.color = e), y((a = n.transformData) == null ? void 0 : a.fillColor, t) && (i.transformData = { ...i.transformData, fillColor: e }), y((r = n.transformData) == null ? void 0 : r.strokeColor, t) && (i.transformData = { ...i.transformData, strokeColor: e }), ((c = n.stroke) == null ? void 0 : c.enabled) === !0 && y(n.stroke.color, t) && (i.stroke = { ...i.stroke, color: e }), o;
+}
+function Vt(s) {
+  const t = rt(s) ? s.value : s, { elementStore: e } = O(), { executeElementUpdate: o } = B();
+  k("useColorBinding()");
+  const [n, i] = q(() => I(t)), [a, r] = q(t);
+  t !== a && (r(t), i(I(t)));
+  const c = A(
+    () => e.getAll().filter((m) => et(m, n)),
+    [e, n]
+  ), l = _(
+    (m) => {
+      const N = I(m);
+      if (N !== n) {
+        for (const S of e.getAll()) {
+          const d = At(S, n, m);
+          d && o(S, d);
+        }
+        i(N);
+      }
+    },
+    [e, n, o]
+  );
+  return c.length === 0 ? { color: n, setColor: l, elements: Bt, isConnected: !1 } : { color: n, setColor: l, elements: c, isConnected: !0 };
+}
+const _t = () => {
+}, kt = [];
+function Gt(s) {
+  const { elementStore: t } = O();
+  k("useFontBinding()");
+  const e = P(s, "text", t), { executeElementUpdate: o } = B(), n = A(() => t.getAllByName(e).filter((r) => r instanceof T), [t, e]), i = _(
+    (a) => {
+      gt.loadGoogleFontByName(a);
+      for (const r of n) {
+        if (r.fontFamily === a) continue;
+        st.clearCache(r.fontFamily);
+        const c = r.clone();
+        c.fontFamily = a, o(r, c);
+      }
+    },
+    [n, o]
+  );
+  return Y("font", e, t, n.length > 0), n.length === 0 ? { fontFamily: "", setFontFamily: _t, element: null, elements: kt, isConnected: !1 } : {
+    fontFamily: n[0].fontFamily,
+    setFontFamily: i,
+    element: n[0],
+    elements: n,
+    isConnected: !0
+  };
+}
+function qt(s) {
+  const { elementStore: t } = O();
+  return s ? t.getByName(s) ?? null : null;
+}
+const nt = "personalization", wt = pt("type", [
+  $({
+    type: p("text"),
+    name: f().min(1),
+    label: f(),
+    placeholder: f().optional(),
+    maxLength: bt().int().positive().optional(),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  }),
+  $({
+    type: p("image"),
+    name: f().min(1),
+    label: f(),
+    placeholder: f().optional(),
+    fit: J([p("cover"), p("contain")]).optional(),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  }),
+  $({
+    type: p("color"),
+    color: f().min(1),
+    label: f(),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  }),
+  $({
+    type: p("select"),
+    name: f().min(1),
+    label: f(),
+    property: J([p("text"), p("imageUrl"), p("fontFamily")]),
+    options: yt($({ label: f(), value: f() })).min(1),
+    artboard: f().min(1).optional(),
+    group: f().optional()
+  })
+]);
+function Jt(s) {
+  if (!s || typeof s != "object") return [];
+  const t = s[nt];
+  if (!Array.isArray(t)) return [];
+  const e = [];
+  for (const o of t) {
+    if (!o || typeof o != "object") continue;
+    const n = "type" in o ? o : { ...o, type: "text" }, i = wt.safeParse(n);
+    i.success && e.push(i.data);
+  }
+  return e;
+}
+function Xt(s, t) {
+  return { ...s, [nt]: t };
+}
+export {
+  Wt as C,
+  Pt as D,
+  nt as T,
+  qt as a,
+  Gt as b,
+  Ht as c,
+  jt as d,
+  Kt as e,
+  X as f,
+  Jt as r,
+  Vt as u,
+  Xt as w
+};
+//# sourceMappingURL=template-fields-CBLHgW7G.js.map