@snowcone-app/canvas 0.15.0 → 0.17.0

package/dist/embed-Bdj4PKUA.js

@@ -0,0 +1,737 @@
+import { C as Ee, e as Re } from "./UnifiedFontService-BAtqqkU4.js";
+import { y as x } from "./HybridHistoryManager-Bht98XRv.js";
+import { jsx as f, jsxs as Q, Fragment as we } from "react/jsx-runtime";
+import { useContext as Z, createContext as ee, useRef as T, useState as O, useMemo as I, useEffect as $, useSyncExternalStore as A, Component as xe, forwardRef as te, useId as ne, useLayoutEffect as re, useCallback as se } from "react";
+import { assertVariantSelected as ie, RenderSession as Se, createCartDetail as Ie } from "@snowcone-app/sdk";
+import { u as Ce, p as Ne } from "./usePieceGuideBundle-CGERAQJl.js";
+import { E as R, i as Te, a as ae } from "./editorError-DMENTZ-3.js";
+import { r as oe } from "./editorErrors-DbIEtCTt.js";
+import { l as X, i as Oe, s as le } from "./template-fields-GOM4MNfq.js";
+import "./EditorContext-CyanYzo2.js";
+import "./CanvasStateV1-C6i6vU6p.js";
+const de = ee(void 0);
+function L() {
+  const t = Z(de);
+  if (!t)
+    throw new Error(
+      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
+    );
+  return t;
+}
+const ke = "[RealtimeEmbed]";
+function _e(t) {
+  var r, s;
+  if ((r = t == null ? void 0 : t.requiredPlacements) != null && r.length)
+    return t.requiredPlacements.filter((a) => !a.autoFilledByVariant).map((a) => a.label);
+  const e = new Set(
+    (((s = t == null ? void 0 : t.options) == null ? void 0 : s.combinations) ?? []).map((a) => a.variantId).filter((a) => typeof a == "string" && a !== "")
+  );
+  return !!(t != null && t.variantId) || e.size > 1 ? [] : (t == null ? void 0 : t.placements) ?? [];
+}
+function ue({ shop: t, product: e, design: n, hasGrant: r }) {
+  var m, d;
+  const s = [];
+  if (t || s.push({
+    severity: "error",
+    issue: "missing-shop",
+    message: "`shop` is required (your publishable shop id)."
+  }), r || s.push({
+    severity: "error",
+    issue: "missing-grant",
+    message: "no grant source — pass `grantUrl` (a proxy to mintRealtimeGrant) or `grant`. Without it the session can never authorize and no mockup renders."
+  }), (m = e == null ? void 0 : e.mockupIds) != null && m.length || s.push({
+    severity: "error",
+    issue: "empty-mockup-ids",
+    message: 'product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].'
+  }), e != null && e.options)
+    try {
+      ie(e);
+    } catch (c) {
+      s.push({
+        severity: "error",
+        issue: "variant-required",
+        message: c instanceof Error ? c.message : String(c)
+      });
+    }
+  const a = n.toJSON(), l = a.activeArtboard, i = _e(e);
+  i.length > 1 && s.push({
+    severity: "error",
+    issue: "multi-placement",
+    message: `product ${e.productId} requires placements [${i.join(", ")}] but this embed renders a single placement ("${l}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  }), (d = e == null ? void 0 : e.placements) != null && d.length && !e.placements.includes(l) && s.push({
+    severity: "error",
+    issue: "placement-mismatch",
+    message: `the design's placement "${l}" is not in product.placements [${e.placements.join(", ")}]. The canvas artboard name and renderState placement must equal a real product placement label, or the server renders a blank mockup. Fix the \`name\` passed to design({ name }).`
+  });
+  const o = a.elements.map((c) => c.name).filter((c) => !!c), u = o.filter((c, y) => o.indexOf(c) !== y);
+  return u.length && s.push({
+    severity: "warn",
+    issue: "duplicate-layer-names",
+    message: `duplicate layer name(s) [${[...new Set(u)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+  }), s;
+}
+function $e(t) {
+  for (const e of ue(t))
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ke} ${e.message}`);
+}
+function j(t) {
+  return t.text;
+}
+function _(t) {
+  return t.name;
+}
+class Be {
+  constructor(e) {
+    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (r) => (this.listeners.add(r), () => this.listeners.delete(r)), this.state = e;
+    const n = /* @__PURE__ */ new Map();
+    for (const r of e.elements) {
+      const s = _(r), a = j(r);
+      s && typeof a == "string" && n.set(s, a);
+    }
+    this.seedTextByName = n;
+  }
+  /** Replace the whole state (the canvas `onChange` path). */
+  setState(e) {
+    this.state = e, this.emit();
+  }
+  /** The seed value of a named text layer (for completeness rule C3). */
+  seedTextOf(e) {
+    return this.seedTextByName.get(e);
+  }
+  /** Current text of a named text layer, or undefined when absent. */
+  textOf(e) {
+    const n = this.state.elements.find((r) => _(r) === e);
+    return n ? j(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(e) {
+    const n = this.state.elements.find((r) => _(r) === e);
+    return n ? X(n) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((e) => X(e) !== null).map(_).filter((e) => !!e);
+  }
+  /**
+   * 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(e, n) {
+    let r = !1;
+    const s = this.state.elements.map((a) => _(a) !== e ? a : (r = !0, { ...a, text: n }));
+    if (!r)
+      throw new R(
+        "E_LAYER_NOT_FOUND",
+        `no layer "${e}" in the current design state. Bindable layers: ${JSON.stringify(this.bindableLayerNames())}.`,
+        { layerName: e, validNames: this.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    this.setState({ ...this.state, elements: s });
+  }
+  /** ≥1 element with visible content (completeness rule C4): non-empty text,
+   *  an image with a URL, or a shape. */
+  hasRenderableElement() {
+    return this.state.elements.some((e) => {
+      const n = e.transformType;
+      if (n === "image") return !!e.imageUrl;
+      if (n === "shape" || n === "group" || n === "path") return !0;
+      const r = j(e);
+      return typeof r == "string" && r.trim().length > 0;
+    });
+  }
+  emit() {
+    for (const e of [...this.listeners]) e();
+  }
+}
+class De {
+  constructor() {
+    this.canvasIds = /* @__PURE__ */ new Set(), this.requirements = /* @__PURE__ */ new Map(), this.textFields = /* @__PURE__ */ new Map(), this.bridge = null, this.listeners = /* @__PURE__ */ new Set(), this.version = 0, this.getVersion = () => this.version, this.subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e));
+  }
+  registerCanvas(e) {
+    return this.canvasIds.add(e), this.bump(), () => {
+      this.canvasIds.delete(e), this.bump();
+    };
+  }
+  hasCanvas() {
+    return this.canvasIds.size > 0;
+  }
+  /** Declare that a part is meaningless without a mounted Canvas (ADR-0085 §4
+   *  table). Validated by Root once per commit. */
+  requireCanvas(e, n) {
+    return this.requirements.set(e, n), this.bump(), () => {
+      this.requirements.delete(e), this.bump();
+    };
+  }
+  /** Run by Root during RENDER, re-triggered by every registry change — by
+   *  then the whole commit's registrations are in, so there is no race
+   *  against the lazy chunk (ADR-0085 §4). Throws land in Root's boundary. */
+  validate() {
+    if (this.canvasIds.size > 1)
+      throw new R(
+        "E_DUPLICATE_CANVAS",
+        "two <Editor.Canvas> parts are mounted under one <Editor.Root>. A Root owns exactly one editable artboard — remove one Canvas, or mount a second <Editor.Root> for a second editor. (Multiple <Editor.Preview> parts ARE valid.)",
+        { docSlug: "embed-mode" }
+      );
+    if (this.requirements.size > 0 && !this.hasCanvas()) {
+      const e = [...new Set(this.requirements.values())];
+      throw new R(
+        "E_REQUIRES_CANVAS",
+        `${e.join(", ")} require${e.length === 1 ? "s" : ""} an <Editor.Canvas> under the same <Editor.Root> — they operate on the editable artboard (selection, editor commands). Mount <Editor.Canvas/>, or remove the part. Canvas-free parts: Editor.Preview, Editor.Buy, Editor.TextField, Editor.Layers.`,
+        { parts: e, docSlug: "embed-mode" }
+      );
+    }
+  }
+  registerTextField(e, n) {
+    return this.textFields.set(e, n), this.bump(), () => {
+      this.textFields.delete(e), this.bump();
+    };
+  }
+  /** Mounted TextField registrations — Buy's required-layer list (C2/C3).
+   *  Unmounted (incl. conditionally hidden) fields are absent by construction. */
+  getTextFields() {
+    return [...this.textFields.values()];
+  }
+  registerCanvasBridge(e) {
+    return this.bridge = e, this.bump(), () => {
+      this.bridge === e && (this.bridge = null), this.bump();
+    };
+  }
+  getCanvasBridge() {
+    return this.bridge;
+  }
+  bump() {
+    this.version++;
+    for (const e of [...this.listeners]) e();
+  }
+}
+const ce = ee(null);
+function G(t) {
+  const e = Z(ce);
+  if (!e)
+    throw new R(
+      "E_OUTSIDE_ROOT",
+      `<${t}> must be rendered inside <Editor.Root>. Wrap it: <Editor.Root shop={…} product={…} design={…} grantUrl={…}><${t}/></Editor.Root>`,
+      { part: t, docSlug: "embed-mode" }
+    );
+  return e;
+}
+function Fe(t) {
+  return {
+    reportInvariant(e) {
+      if (Te()) throw e;
+      t(e);
+    },
+    reportRuntimeError(e) {
+      oe(e), t(e);
+    }
+  };
+}
+const me = 8e3;
+function Ue(t) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(me / 1e3)}s. Common causes: a variant product missing \`variantId\` (pass \`product.options\` so the embed can flag it up front), a multi-placement product (the server waits for every required placement but <RealtimeEmbed> sends only "${t}" — pass \`product.requiredPlacements\` so this is flagged at mount; such products need the eject path), an unreachable or non-public asset URL in the design, or the placement "${t}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
+}
+function Ae(t) {
+  if ("grantUrl" in t && t.grantUrl)
+    return { grantUrl: t.grantUrl };
+  const e = t.grant;
+  return typeof e == "function" ? { getToken: e } : { getToken: () => Promise.resolve(e) };
+}
+function fe({ error: t, onRetry: e }) {
+  const n = ae(t) ? t.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ Q(
+    "div",
+    {
+      "data-sc-part": "error",
+      role: "alert",
+      style: {
+        padding: "16px",
+        borderRadius: "12px",
+        border: "1px solid var(--sc-color-destructive, #b91c1c)",
+        background: "var(--sc-color-surface, #fef2f2)",
+        color: "var(--sc-color-foreground, #7f1d1d)",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        fontSize: "13px",
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ Q("p", { style: { margin: 0, fontWeight: 700 }, children: [
+          "Editor failed: ",
+          n
+        ] }),
+        /* @__PURE__ */ f("p", { style: { margin: "4px 0 0" }, children: t.message }),
+        e ? /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            "data-sc-part": "error-retry",
+            onClick: e,
+            style: {
+              marginTop: "10px",
+              padding: "6px 14px",
+              borderRadius: "9999px",
+              border: "1px solid currentColor",
+              background: "transparent",
+              color: "inherit",
+              font: "inherit",
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: "Retry"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+class Le extends xe {
+  constructor() {
+    super(...arguments), this.state = { caught: null };
+  }
+  static getDerivedStateFromError(e) {
+    return { caught: e };
+  }
+  componentDidCatch(e) {
+    var n;
+    oe(e), typeof x < "u" && ((n = x.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+  }
+  render() {
+    return this.state.caught ? /* @__PURE__ */ f(fe, { error: this.state.caught }) : this.props.children;
+  }
+}
+function qe({ reportedError: t, onRetry: e, children: n }) {
+  if (t) {
+    const r = ae(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ f(fe, { error: t, onRetry: r ? e : void 0 });
+  }
+  return /* @__PURE__ */ f(Le, { reportedError: null, onRetry: e, children: n });
+}
+function Me(t) {
+  const {
+    shop: e,
+    product: n,
+    design: r,
+    throttleMs: s = 200,
+    onMockups: a,
+    onRenderError: l,
+    wsUrl: i,
+    services: o,
+    children: u,
+    internals: m,
+    __validation: d = "throw"
+  } = t, c = I(() => r.toJSON().activeArtboard, [r]), y = Ce(n.variantId ?? n.defaultGvid), g = I(() => {
+    if (!y) return null;
+    const h = r.toJSON().artboards[0];
+    return Ne(y, h) ?? null;
+  }, [y, r]), b = T(a), p = T(l);
+  b.current = a, p.current = l;
+  const [S, q] = O([]), [C, N] = O(!0), [H, B] = O(null), M = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), V = Ae(t), ye = "grantUrl" in V ? V.grantUrl : "getToken", W = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, D = `${e}|${W}|${c}|${M}`;
+  I(() => {
+    var E;
+    if (d !== "throw") return;
+    const h = ue({ shop: e, product: n, design: r, hasGrant: M }), v = h.find((k) => k.severity === "error");
+    if (v)
+      throw new R("E_EMBED_CONFIG", v.message, {
+        issue: v.issue,
+        docSlug: "embed-mode"
+      });
+    for (const k of h)
+      typeof x < "u" && ((E = x.env) == null ? void 0 : E.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${k.message}`);
+  }, [D, d]);
+  const z = T(null);
+  $(() => {
+    var h;
+    if (d === "warn" && typeof x < "u" && ((h = x.env) == null ? void 0 : h.NODE_ENV) !== "production") {
+      if (z.current === D) return;
+      z.current = D, $e({ shop: e, product: n, design: r, hasGrant: M });
+    }
+  }, [D, d]);
+  const F = I(
+    () => {
+      try {
+        return { session: new Se({ shop: e, product: n, wsUrl: i, ...V }) };
+      } catch (h) {
+        return { error: h instanceof Error ? h.message : String(h) };
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, W, c, i, ye]
+  ), w = "session" in F ? F.session : null, U = "error" in F ? F.error : null, P = I(() => (h, v = s) => {
+    w && (B(null), N(!0), w.renderState(c, h, v).catch((E) => {
+      var Y;
+      const k = E instanceof Error ? E.message : String(E);
+      B(k), N(!1), (Y = p.current) == null || Y.call(p, k);
+    }));
+  }, [w, c, s]);
+  $(() => {
+    var h;
+    if (U) {
+      B(U), N(!1), (h = p.current) == null || h.call(p, U);
+      return;
+    }
+    if (w)
+      return w.onMockups((v) => {
+        var E;
+        q(v), N(!1), (E = b.current) == null || E.call(b, v);
+      }), w.onError((v) => {
+        var E;
+        B(v), N(!1), (E = p.current) == null || E.call(p, v);
+      }), P(r.toServerRequest()), () => w.close();
+  }, [w, U]), $(() => {
+    var v;
+    if (!C || typeof x > "u" || ((v = x.env) == null ? void 0 : v.NODE_ENV) === "production") return;
+    const h = setTimeout(() => console.warn(Ue(c)), me);
+    return () => clearTimeout(h);
+  }, [C, c]);
+  const ve = I(
+    () => ({
+      session: w,
+      design: r,
+      placement: c,
+      product: n,
+      mockups: S,
+      isRendering: C,
+      error: H,
+      throttleMs: s,
+      pieceGuides: g,
+      pushRender: P,
+      stateStore: m.store
+    }),
+    [w, r, c, n, S, C, H, s, g, P, m.store]
+  ), be = A(
+    m.registry.subscribe,
+    m.registry.getVersion,
+    m.registry.getVersion
+  );
+  I(() => m.registry.validate(), [m.registry, be]);
+  const J = /* @__PURE__ */ f(ce.Provider, { value: m, children: /* @__PURE__ */ f(de.Provider, { value: ve, children: u }) });
+  return o ? /* @__PURE__ */ f(Ee, { services: o, children: J }) : J;
+}
+function he(t) {
+  const { design: e } = t, n = T(null), [r, s] = O(null);
+  (n.current === null || n.current.design !== e) && (n.current = {
+    design: e,
+    internals: {
+      store: new Be(e.toJSON()),
+      registry: new De()
+    }
+  });
+  const a = I(
+    () => ({
+      ...n.current.internals,
+      ...Fe(s)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [n.current.internals]
+  );
+  return (
+    // `display: contents` — the .sc-root scope without a layout box, so the
+    // host's grid/flex sees the parts directly (and the legacy RealtimeEmbed
+    // wrapper, which had no DOM at all, stays layout-identical).
+    /* @__PURE__ */ f("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ f(qe, { reportedError: r, onRetry: () => s(null), children: /* @__PURE__ */ f(Me, { ...t, internals: a }) }) })
+  );
+}
+let Ve = () => import("./EditorCanvasImpl-DkgE5-C2.js").then((t) => t.EditorCanvasImpl);
+function ge() {
+  return Ve();
+}
+const Pe = te(function({ children: e, maxHeight: n, className: r, style: s }, a) {
+  const l = G("Editor.Canvas"), i = ne();
+  re(() => l.registry.registerCanvas(i), [l.registry, i]);
+  const [o, u] = O(null);
+  return $(() => {
+    let m = !1;
+    return ge().then(
+      (d) => {
+        m || u(() => d);
+      },
+      (d) => {
+        m || l.reportRuntimeError(
+          new R(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's rendering chunk failed to load (${d instanceof Error ? d.message : String(d)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: d instanceof Error ? d.message : String(d), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      m = !0;
+    };
+  }, [l]), o ? /* @__PURE__ */ f(o, { ref: a, kit: "embed-only", partAttr: "canvas", maxHeight: n, className: r, style: s, children: e }) : /* @__PURE__ */ f(
+    "div",
+    {
+      "data-sc-part": "canvas",
+      "data-sc-state": "loading",
+      className: r,
+      style: { minHeight: n ?? 200, ...s },
+      "aria-busy": "true"
+    }
+  );
+}), je = 1.2, K = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function Ke(t) {
+  for (const e of K)
+    if (e >= t) return e;
+  return K[K.length - 1];
+}
+function Ge(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * je) return null;
+  const n = Ke(e);
+  return `[RealtimeMockup] mockup rendered at ${t}px but displayed at ~${e} device px — the preview will look soft. Pass \`product.width\` (e.g. ${n}) on the embed for a crisp preview.`;
+}
+function pe({
+  mockupId: t,
+  fallback: e = null,
+  alt: n = "Live product mockup",
+  className: r,
+  style: s
+}) {
+  const { mockups: a } = L(), l = T(/* @__PURE__ */ new Set()), i = t ? a.find((u) => u.mockupId === t && u.imageUrl) : a.find((u) => u.imageUrl);
+  if (!(i != null && i.imageUrl))
+    return /* @__PURE__ */ f(we, { children: e });
+  const o = (u) => {
+    var g;
+    if (typeof x > "u" || ((g = x.env) == null ? void 0 : g.NODE_ENV) === "production" || typeof window > "u" || l.current.has(i.mockupId)) return;
+    const m = u.currentTarget, d = m.getBoundingClientRect().width;
+    if (d <= 0) return;
+    const c = Math.round(d * (window.devicePixelRatio || 1)), y = Ge(m.naturalWidth, c);
+    y && (l.current.add(i.mockupId), console.warn(y));
+  };
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ f(
+      "img",
+      {
+        "data-sc-part": "preview",
+        src: i.imageUrl,
+        alt: n,
+        className: r,
+        style: s,
+        onLoad: o
+      }
+    )
+  );
+}
+function He(t) {
+  const { layer: e, optional: n = !1, placeholder: r, className: s, style: a } = t, l = G("Editor.TextField"), { pushRender: i, throttleMs: o, stateStore: u } = L(), m = ne(), d = T(null);
+  if (!Oe(e))
+    throw new R(
+      "E_LAYER_TOKEN_REQUIRED",
+      `the \`layer\` prop must be a token minted by the design — pass layer={design.layer("name")}, not ${typeof e == "string" ? `the bare string "${e}"` : "a plain value"}. Tokens validate the name against the design's layers at mint time.`,
+      { received: typeof e == "string" ? e : typeof e, docSlug: "embed-mode" }
+    );
+  if (d.current !== e.name) {
+    const g = u.layerKindOf(e.name);
+    if (g === void 0)
+      throw new R(
+        "E_LAYER_NOT_FOUND",
+        `no layer "${e.name}" in this Root's design — the token was minted from a different design than the one passed to <Editor.Root design={…}>. Bindable layers here: ${JSON.stringify(u.bindableLayerNames())}.`,
+        { layerName: e.name, validNames: u.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    if (g !== "text")
+      throw new R(
+        "E_LAYER_WRONG_KIND",
+        `layer "${e.name}" is ${g === null ? "not a bindable kind" : `an ${g} layer`} — <Editor.TextField> binds text layers only.`,
+        { layerName: e.name, actualKind: g, docSlug: "embed-mode" }
+      );
+    d.current = e.name;
+  }
+  re(() => l.registry.registerTextField(m, { name: e.name, optional: n }), [l.registry, m, e.name, n]);
+  const c = A(
+    u.subscribe,
+    () => u.textOf(e.name) ?? "",
+    () => u.textOf(e.name) ?? ""
+  ), y = se(
+    (g) => {
+      const b = g.target.value, p = l.registry.getCanvasBridge();
+      if (p) {
+        p.setTextByName(e.name, b) || l.reportInvariant(
+          new R(
+            "E_LAYER_NOT_FOUND",
+            `layer "${e.name}" no longer exists in the mounted canvas — it was removed or renamed after this <Editor.TextField> bound to it. Bound layers must not be renamed or deleted while a field is mounted (ADR-0085 §3).`,
+            { layerName: e.name, docSlug: "embed-mode" }
+          )
+        );
+        return;
+      }
+      u.updateTextLayer(e.name, b), i(le(u.getState()), o);
+    },
+    [l, e.name, u, i, o]
+  );
+  return /* @__PURE__ */ f(
+    "input",
+    {
+      "data-sc-part": "textfield",
+      "data-sc-layer": e.name,
+      type: "text",
+      value: c,
+      onChange: y,
+      placeholder: r,
+      "aria-label": t["aria-label"] ?? e.name,
+      className: s,
+      style: a
+    }
+  );
+}
+function We(t) {
+  const e = [];
+  if (t.product.options)
+    try {
+      ie(t.product);
+    } catch {
+      e.push("variant");
+    }
+  for (const n of t.textFields) {
+    if (n.optional) continue;
+    const r = (t.textOf(n.name) ?? "").trim();
+    if (r.length === 0) {
+      e.push(`layer:${n.name}`);
+      continue;
+    }
+    const s = (t.seedTextOf(n.name) ?? "").trim();
+    s.length > 0 && r === s && e.push(`layer-seed:${n.name}`);
+  }
+  return t.hasRenderableElement || e.push("empty-design"), (!Number.isInteger(t.quantity) || t.quantity < 1) && e.push("quantity"), e;
+}
+function ze(t, e) {
+  const n = t.options, r = n == null ? void 0 : n.combinations;
+  if (!n || !(r != null && r.length)) return null;
+  const s = r.find((i) => i.variantId && i.variantId === t.variantId) ?? r[0];
+  if (!s) return null;
+  const a = {};
+  for (const [i, o] of Object.entries(s))
+    i === "variantId" || i === "price" || (typeof o == "string" ? a[i] = o : typeof o == "number" && (a[i] = String(o)));
+  const l = Object.fromEntries(
+    Object.keys(a).map((i) => [
+      i,
+      { key: i, affectsCombinations: !0, choices: [...new Set(r.map((o) => String(o[i] ?? "")))] }
+    ])
+  );
+  return Ie({
+    productId: t.productId,
+    quantity: e,
+    selection: a,
+    combinations: r,
+    attributes: l
+  });
+}
+function Je(t) {
+  const { onAddToCart: e, quantity: n = 1, children: r, className: s, style: a } = t, l = G("Editor.Buy"), { product: i, stateStore: o } = L();
+  if (!(i != null && i.productId))
+    throw new R(
+      "E_BUY_NO_PRODUCT",
+      "<Editor.Buy> has no product context — pass `product` (with `productId`) on <Editor.Root product={…}>. Buy assembles its cart payload from the Root product and the live design state.",
+      { docSlug: "embed-mode" }
+    );
+  const u = A(o.subscribe, o.getState, o.getState), m = A(
+    l.registry.subscribe,
+    l.registry.getVersion,
+    l.registry.getVersion
+  ), d = I(
+    () => We({
+      product: i,
+      quantity: n,
+      textFields: l.registry.getTextFields(),
+      textOf: (S) => o.textOf(S),
+      seedTextOf: (S) => o.seedTextOf(S),
+      hasRenderableElement: o.hasRenderableElement()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i, n, u, m]
+  ), c = d.length === 0, [y, g] = O(!1), b = T(!1), p = se(() => {
+    if (b.current || !c) return;
+    b.current = !0, g(!0);
+    const S = o.getState(), q = {
+      productId: i.productId,
+      ...i.variantId ? { variantId: i.variantId } : {},
+      quantity: n,
+      cartDetail: ze(i, n),
+      designState: S,
+      serverRequest: le(S)
+    };
+    let C;
+    try {
+      C = e(q);
+    } catch (N) {
+      throw b.current = !1, g(!1), N;
+    }
+    Promise.resolve(C).finally(() => {
+      b.current = !1, g(!1);
+    });
+  }, [c, i, n, o, e]);
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      type: "button",
+      "data-sc-part": "buy",
+      "data-sc-buy-state": y ? "busy" : c ? "ready" : "incomplete",
+      "data-sc-buy-missing": d.join(",") || void 0,
+      disabled: !c || y,
+      "aria-busy": y || void 0,
+      onClick: p,
+      className: s,
+      style: a,
+      children: r ?? "Add to cart"
+    }
+  );
+}
+const ot = {
+  /** The one provider boundary — session, design, live state, error boundary. */
+  Root: he,
+  /** The editable artboard (the ONE lazy renderer boundary — D9). */
+  Canvas: Pe,
+  /** Live product mockup. ×N under one Root is valid. */
+  Preview: pe,
+  /** Form input bound to a design text layer by typed token (T1). */
+  TextField: He,
+  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
+  Buy: Je
+};
+function lt(t) {
+  return /* @__PURE__ */ f(he, { ...t, __validation: "warn" });
+}
+const dt = te(
+  function(e, n) {
+    const { children: r, className: s, style: a, maxHeight: l, ...i } = e, [o, u] = O(null);
+    return $(() => {
+      let m = !1;
+      return ge().then(
+        (d) => {
+          m || u(() => d);
+        },
+        (d) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", d);
+        }
+      ), () => {
+        m = !0;
+      };
+    }, []), o ? /* @__PURE__ */ f(o, { ref: n, selfScope: !0, maxHeight: l, className: s, style: a, ...i, children: r }) : /* @__PURE__ */ f(
+      "div",
+      {
+        className: `sc-root${s ? ` ${s}` : ""}`,
+        style: { minHeight: l ?? 200, ...a },
+        "aria-busy": "true"
+      }
+    );
+  }
+);
+function ut(t) {
+  return /* @__PURE__ */ f(pe, { ...t });
+}
+function ct() {
+  const { mockups: t, isRendering: e, error: n } = L();
+  return { mockups: t, isRendering: e, error: n };
+}
+Re();
+export {
+  Be as D,
+  ce as E,
+  dt as R,
+  ot as a,
+  lt as b,
+  ut as c,
+  ue as d,
+  ct as e,
+  L as u,
+  $e as v
+};
+//# sourceMappingURL=embed-Bdj4PKUA.js.map