@snowcone-app/canvas 0.19.0 → 0.20.0

package/dist/embed-uALcVSYN.js

@@ -0,0 +1,1117 @@
+import { E as ye, o as be, p as ve, C as xe, q, r as we, t as Ee, v as Se, w as ke, x as Ie, g as Re, e as Ce } from "./UnifiedFontService-B1PGVu8O.js";
+import { y as N } from "./FontAnalyzer-BpsTYowD.js";
+import { jsx as s, jsxs as k, Fragment as oe } from "react/jsx-runtime";
+import { useContext as Oe, createContext as Ne, useRef as C, useState as I, useMemo as O, useSyncExternalStore as B, useEffect as A, Component as Te, forwardRef as se, useId as X, useLayoutEffect as W, useCallback as j } from "react";
+import { assertVariantSelected as $e, RenderSession as _e, createCartDetail as De } from "@snowcone-app/sdk";
+import { i as ie, g as F, B as Ve, E as Ae, r as Fe } from "./editorErrors-CK1RISFa.js";
+import { u as Be, p as Ue } from "./usePieceGuideBundle-Ctnu5k2D.js";
+import { s as Z, i as Le } from "./design-builder-DMKx9UXD.js";
+import { D as Pe, C as je, g as qe, e as Me } from "./template-fields-B9RagVpT.js";
+import "./CanvasStateV1-BFabcAKC.js";
+const ae = Ne(void 0);
+function G() {
+  const t = Oe(ae);
+  if (!t)
+    throw new Error(
+      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
+    );
+  return t;
+}
+const ze = "[RealtimeEmbed]";
+function He(t) {
+  var r, o;
+  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(
+    (((o = t == null ? void 0 : t.options) == null ? void 0 : o.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 ce({ shop: t, product: e, design: n, hasGrant: r }) {
+  var l, m;
+  const o = [];
+  if (t || o.push({
+    severity: "error",
+    issue: "missing-shop",
+    message: "`shop` is required (your publishable shop id)."
+  }), r || o.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."
+  }), (l = e == null ? void 0 : e.mockupIds) != null && l.length || o.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 {
+      $e(e);
+    } catch (f) {
+      o.push({
+        severity: "error",
+        issue: "variant-required",
+        message: f instanceof Error ? f.message : String(f)
+      });
+    }
+  const a = n.toJSON(), c = a.activeArtboard, u = He(e);
+  u.length > 1 && o.push({
+    severity: "error",
+    issue: "multi-placement",
+    message: `product ${e.productId} requires placements [${u.join(", ")}] but this embed renders a single placement ("${c}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  }), (m = e == null ? void 0 : e.placements) != null && m.length && !e.placements.includes(c) && o.push({
+    severity: "error",
+    issue: "placement-mismatch",
+    message: `the design's placement "${c}" 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 d = a.elements.map((f) => f.name).filter((f) => !!f), i = d.filter((f, h) => d.indexOf(f) !== h);
+  return i.length && o.push({
+    severity: "warn",
+    issue: "duplicate-layer-names",
+    message: `duplicate layer name(s) [${[...new Set(i)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+  }), o;
+}
+function Ke(t) {
+  for (const e of ce(t))
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ze} ${e.message}`);
+}
+const le = 8e3;
+function We(t) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(le / 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 Ge(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 de({ error: t, onRetry: e }) {
+  const n = ie(t) ? t.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ k(
+    "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__ */ k("p", { style: { margin: 0, fontWeight: 700 }, children: [
+          "Editor failed: ",
+          n
+        ] }),
+        /* @__PURE__ */ s("p", { style: { margin: "4px 0 0" }, children: t.message }),
+        e ? /* @__PURE__ */ s(
+          "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 Qe extends Te {
+  constructor() {
+    super(...arguments), this.state = { caught: null };
+  }
+  static getDerivedStateFromError(e) {
+    return { caught: e };
+  }
+  componentDidCatch(e) {
+    var n;
+    Fe(e), typeof N < "u" && ((n = N.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+  }
+  render() {
+    return this.state.caught ? /* @__PURE__ */ s(de, { error: this.state.caught }) : this.props.children;
+  }
+}
+function Je({ reportedError: t, onRetry: e, children: n }) {
+  if (t) {
+    const r = ie(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ s(de, { error: t, onRetry: r ? e : void 0 });
+  }
+  return /* @__PURE__ */ s(Qe, { reportedError: null, onRetry: e, children: n });
+}
+function Ye(t) {
+  const {
+    shop: e,
+    product: n,
+    design: r,
+    throttleMs: o = 200,
+    onMockups: a,
+    onRenderError: c,
+    wsUrl: u,
+    services: d,
+    children: i,
+    internals: l,
+    __validation: m = "throw"
+  } = t, f = O(() => r.toJSON().activeArtboard, [r]);
+  B(
+    l.commerce.subscribe,
+    l.commerce.getVersion,
+    l.commerce.getVersion
+  );
+  const h = l.commerce.resolvedVariantId(), p = Be(h ?? n.variantId ?? n.defaultGvid), w = O(() => {
+    if (!p) return null;
+    const g = r.toJSON().artboards[0];
+    return Ue(p, g) ?? null;
+  }, [p, r]), E = C(a), b = C(c);
+  E.current = a, b.current = c;
+  const [T, R] = I([]), [D, x] = I(!0), [$, _] = I(null), U = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), P = Ge(t), pe = "grantUrl" in P ? P.grantUrl : "getToken", ee = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, M = `${e}|${ee}|${f}|${U}`;
+  O(() => {
+    var S;
+    if (m !== "throw") return;
+    const g = ce({ shop: e, product: n, design: r, hasGrant: U }), y = g.find((L) => L.severity === "error");
+    if (y)
+      throw new F("E_EMBED_CONFIG", y.message, {
+        issue: y.issue,
+        docSlug: "embed-mode"
+      });
+    for (const L of g)
+      typeof N < "u" && ((S = N.env) == null ? void 0 : S.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${L.message}`);
+  }, [M, m]);
+  const te = C(null);
+  A(() => {
+    var g;
+    if (m === "warn" && typeof N < "u" && ((g = N.env) == null ? void 0 : g.NODE_ENV) !== "production") {
+      if (te.current === M) return;
+      te.current = M, Ke({ shop: e, product: n, design: r, hasGrant: U });
+    }
+  }, [M, m]);
+  const z = O(
+    () => {
+      try {
+        return { session: new _e({ shop: e, product: n, wsUrl: u, ...P }) };
+      } catch (g) {
+        return { error: g instanceof Error ? g.message : String(g) };
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, ee, f, u, pe]
+  ), v = "session" in z ? z.session : null, H = "error" in z ? z.error : null, K = O(() => (g, y = o) => {
+    v && (_(null), x(!0), v.renderState(f, g, y).catch((S) => {
+      var re;
+      const L = S instanceof Error ? S.message : String(S);
+      _(L), x(!1), (re = b.current) == null || re.call(b, L);
+    }));
+  }, [v, f, o]);
+  A(() => {
+    var g;
+    if (H) {
+      _(H), x(!1), (g = b.current) == null || g.call(b, H);
+      return;
+    }
+    if (v)
+      return v.onMockups((y) => {
+        var S;
+        R(y), x(!1), (S = E.current) == null || S.call(E, y);
+      }), v.onError((y) => {
+        var S;
+        _(y), x(!1), (S = b.current) == null || S.call(b, y);
+      }), K(r.toServerRequest()), () => v.close();
+  }, [v, H]);
+  const Q = C({
+    session: null,
+    variantId: void 0
+  });
+  A(() => {
+    if (!v || !h) return;
+    const g = Q.current, y = g.session === v ? g.variantId : n.variantId;
+    if (h === y) {
+      Q.current = { session: v, variantId: y };
+      return;
+    }
+    Q.current = { session: v, variantId: h }, v.setProduct({ ...n, variantId: h }), K(Z(l.store.getState()));
+  }, [v, h]), A(() => {
+    var y;
+    if (!D || typeof N > "u" || ((y = N.env) == null ? void 0 : y.NODE_ENV) === "production") return;
+    const g = setTimeout(() => console.warn(We(f)), le);
+    return () => clearTimeout(g);
+  }, [D, f]);
+  const ge = O(
+    () => ({
+      session: v,
+      design: r,
+      placement: f,
+      product: n,
+      mockups: T,
+      isRendering: D,
+      error: $,
+      throttleMs: o,
+      pieceGuides: w,
+      pushRender: K,
+      stateStore: l.store
+    }),
+    [v, r, f, n, T, D, $, o, w, K, l.store]
+  ), he = B(
+    l.registry.subscribe,
+    l.registry.getVersion,
+    l.registry.getVersion
+  );
+  O(() => l.registry.validate(), [l.registry, he]);
+  const ne = /* @__PURE__ */ s(ve.Provider, { value: l, children: /* @__PURE__ */ s(ae.Provider, { value: ge, children: /* @__PURE__ */ s(Ve.Provider, { value: l.registry, children: /* @__PURE__ */ s(Ae, { children: i }) }) }) });
+  return d ? /* @__PURE__ */ s(xe, { services: d, children: ne }) : ne;
+}
+function ue(t) {
+  const { design: e, product: n } = t, r = `${n.productId}|${n.variantId ?? ""}`, o = C(null), a = C(null), [c, u] = I(null);
+  (o.current === null || o.current.design !== e) && (o.current = {
+    design: e,
+    internals: {
+      store: new Pe(e.toJSON()),
+      registry: new ye()
+    }
+  }), (a.current === null || a.current.productIdentity !== r) && (a.current = { productIdentity: r, commerce: new je(n) });
+  const d = O(
+    () => ({
+      ...o.current.internals,
+      commerce: a.current.commerce,
+      ...be(u)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [o.current.internals, a.current.commerce]
+  );
+  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__ */ s("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ s(Je, { reportedError: c, onRetry: () => u(null), children: /* @__PURE__ */ s(Ye, { ...t, internals: d }) }) })
+  );
+}
+let Xe = () => import("./EditorCanvasImpl-UBKdG0c0.js").then((t) => t.EditorCanvasImpl);
+function me() {
+  return Xe();
+}
+const Ze = se(function({ children: e, maxHeight: n, className: r, style: o }, a) {
+  const c = q("Editor.Canvas"), u = X();
+  W(() => c.registry.registerCanvas(u), [c.registry, u]);
+  const [d, i] = I(null);
+  return A(() => {
+    let l = !1;
+    return me().then(
+      (m) => {
+        l || i(() => m);
+      },
+      (m) => {
+        l || c.reportRuntimeError(
+          new F(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's rendering chunk failed to load (${m instanceof Error ? m.message : String(m)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: m instanceof Error ? m.message : String(m), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      l = !0;
+    };
+  }, [c]), d ? (
+    // `builtinControls`: the canvas owns the floating contextual toolbar
+    // unless a docked <Editor.Controls> is mounted (ADR-0085 §5). Only here —
+    // the legacy <RealtimeCanvas> wrapper stays chrome-less.
+    /* @__PURE__ */ s(d, { ref: a, kit: "embed-only", partAttr: "canvas", builtinControls: !0, maxHeight: n, className: r, style: o, children: e })
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      "data-sc-part": "canvas",
+      "data-sc-state": "loading",
+      className: r,
+      style: { minHeight: n ?? 200, ...o },
+      "aria-busy": "true"
+    }
+  );
+}), et = 1.2, J = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function tt(t) {
+  for (const e of J)
+    if (e >= t) return e;
+  return J[J.length - 1];
+}
+function nt(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * et) return null;
+  const n = tt(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 fe({
+  mockupId: t,
+  fallback: e = null,
+  alt: n = "Live product mockup",
+  className: r,
+  style: o
+}) {
+  const { mockups: a, error: c } = G(), u = C(/* @__PURE__ */ new Set()), d = t ? a.find((l) => l.mockupId === t && l.imageUrl) : a.find((l) => l.imageUrl);
+  if (!(d != null && d.imageUrl))
+    return c ? /* @__PURE__ */ s("div", { "data-sc-part": "preview-error", role: "alert", "data-sc-error": c, className: r, style: o, children: e ?? `Render failed: ${c}` }) : /* @__PURE__ */ s(oe, { children: e });
+  const i = (l) => {
+    var w;
+    if (typeof N > "u" || ((w = N.env) == null ? void 0 : w.NODE_ENV) === "production" || typeof window > "u" || u.current.has(d.mockupId)) return;
+    const m = l.currentTarget, f = m.getBoundingClientRect().width;
+    if (f <= 0) return;
+    const h = Math.round(f * (window.devicePixelRatio || 1)), p = nt(m.naturalWidth, h);
+    p && (u.current.add(d.mockupId), console.warn(p));
+  };
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ s(
+      "img",
+      {
+        "data-sc-part": "preview",
+        src: d.imageUrl,
+        alt: n,
+        className: r,
+        style: o,
+        onLoad: i
+      }
+    )
+  );
+}
+function rt(t) {
+  const { layer: e, optional: n = !1, placeholder: r, className: o, style: a } = t, c = q("Editor.TextField"), { pushRender: u, throttleMs: d, stateStore: i } = G(), l = X(), m = C(null);
+  if (!Le(e))
+    throw new F(
+      "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 (m.current !== e.name) {
+    const p = i.layerKindOf(e.name);
+    if (p === void 0)
+      throw new F(
+        "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(i.bindableLayerNames())}.`,
+        { layerName: e.name, validNames: i.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    if (p !== "text")
+      throw new F(
+        "E_LAYER_WRONG_KIND",
+        `layer "${e.name}" is ${p === null ? "not a bindable kind" : `an ${p} layer`} — <Editor.TextField> binds text layers only.`,
+        { layerName: e.name, actualKind: p, docSlug: "embed-mode" }
+      );
+    m.current = e.name;
+  }
+  W(() => c.registry.registerTextField(l, { name: e.name, optional: n }), [c.registry, l, e.name, n]);
+  const f = B(
+    i.subscribe,
+    () => i.textOf(e.name) ?? "",
+    () => i.textOf(e.name) ?? ""
+  ), h = j(
+    (p) => {
+      const w = p.target.value, E = c.registry.getCanvasBridge();
+      if (E) {
+        E.setTextByName(e.name, w) || c.reportInvariant(
+          new F(
+            "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;
+      }
+      i.updateTextLayer(e.name, w), u(Z(i.getState()), d);
+    },
+    [c, e.name, i, u, d]
+  );
+  return /* @__PURE__ */ s(
+    "input",
+    {
+      "data-sc-part": "textfield",
+      "data-sc-layer": e.name,
+      type: "text",
+      value: f,
+      onChange: h,
+      placeholder: r,
+      "aria-label": t["aria-label"] ?? e.name,
+      className: o,
+      style: a
+    }
+  );
+}
+function ot(t) {
+  const e = [];
+  for (const n of t.missingOptionKeys)
+    e.push(`option:${n}`);
+  t.missingOptionKeys.length === 0 && !t.selectionValid && 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 o = (t.seedTextOf(n.name) ?? "").trim();
+    o.length > 0 && r === o && 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 st(t, e) {
+  const n = e.getCombinations(), r = e.getAttributes();
+  if (Object.keys(r).length === 0 || n.length === 0) return null;
+  const o = Object.fromEntries(
+    Object.entries(r).map(([a, c]) => [a, { ...c, choices: qe(c) }])
+  );
+  return De({
+    productId: t.productId,
+    quantity: e.getQuantity(),
+    selection: e.getSelection(),
+    combinations: n,
+    attributes: o
+  });
+}
+function it(t) {
+  const { onAddToCart: e, defaultQuantity: n, children: r, className: o, style: a } = t, c = q("Editor.Buy"), { product: u, stateStore: d } = G(), i = c.commerce;
+  if (!(u != null && u.productId))
+    throw new F(
+      "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 l = C(!1);
+  W(() => {
+    l.current || (l.current = !0, typeof n == "number" && i.setQuantity(n));
+  }, [i]);
+  const m = B(d.subscribe, d.getState, d.getState), f = B(i.subscribe, i.getVersion, i.getVersion), h = B(
+    c.registry.subscribe,
+    c.registry.getVersion,
+    c.registry.getVersion
+  ), p = i.getQuantity(), w = O(
+    () => ot({
+      quantity: p,
+      missingOptionKeys: i.missingOptionKeys(),
+      selectionValid: i.selectionValid(),
+      textFields: c.registry.getTextFields(),
+      textOf: (x) => d.textOf(x),
+      seedTextOf: (x) => d.seedTextOf(x),
+      hasRenderableElement: d.hasRenderableElement()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i, p, m, f, h]
+  ), E = w.length === 0, [b, T] = I(!1), R = C(!1), D = j(() => {
+    if (R.current || !E) return;
+    R.current = !0, T(!0);
+    const x = d.getState(), $ = i.resolvedVariantId(), _ = {
+      productId: u.productId,
+      ...$ ? { variantId: $ } : {},
+      quantity: i.getQuantity(),
+      selection: i.getSelection(),
+      cartDetail: st(u, i),
+      designState: x,
+      serverRequest: Z(x)
+    };
+    let U;
+    try {
+      U = e(_);
+    } catch (P) {
+      throw R.current = !1, T(!1), P;
+    }
+    Promise.resolve(U).finally(() => {
+      R.current = !1, T(!1);
+    });
+  }, [E, u, i, d, e]);
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      "data-sc-part": "buy",
+      "data-sc-buy-state": b ? "busy" : E ? "ready" : "incomplete",
+      "data-sc-buy-missing": w.join(",") || void 0,
+      disabled: !E || b,
+      "aria-busy": b || void 0,
+      onClick: D,
+      className: o,
+      style: a,
+      children: r ?? "Add to cart"
+    }
+  );
+}
+function at({
+  placement: t = "docked",
+  className: e,
+  style: n
+}) {
+  const r = q("Editor.Controls");
+  we("Editor.Controls");
+  const o = X();
+  W(
+    () => r.registry.registerControls(o, t),
+    [r.registry, o, t]
+  );
+  const a = t === "docked", [c, u] = I(null);
+  return A(() => {
+    if (!a) return;
+    let d = !1;
+    return import("./ContextualToolbars--vTtorNg.js").then((i) => i.x).then(
+      (i) => {
+        d || u(() => i.ContextualToolbars);
+      },
+      (i) => {
+        d || r.reportRuntimeError(
+          new F(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's controls chunk failed to load (${i instanceof Error ? i.message : String(i)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: i instanceof Error ? i.message : String(i), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      d = !0;
+    };
+  }, [a, r]), a ? /* @__PURE__ */ s(
+    "div",
+    {
+      "data-sc-part": "controls",
+      "data-sc-placement": "docked",
+      className: e,
+      style: n,
+      "aria-busy": c ? void 0 : "true",
+      children: c ? /* @__PURE__ */ s(c, { mode: "embedded" }) : null
+    }
+  ) : null;
+}
+function ct() {
+  const e = q("useProductSelection").commerce, n = B(e.subscribe, e.getVersion, e.getVersion), r = j((a, c) => e.select(a, c), [e]), o = j((a) => e.setQuantity(a), [e]);
+  return O(
+    () => ({
+      attributes: e.getAttributes(),
+      selection: e.getSelection(),
+      select: r,
+      disabledChoices: e.disabledChoices(),
+      variantId: e.resolvedVariantId(),
+      price: e.resolvedPrice(),
+      quantity: e.getQuantity(),
+      setQuantity: o,
+      complete: e.selectionValid(),
+      missing: e.missingOptionKeys()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, r, o, n]
+  );
+}
+const V = {
+  /** The one provider boundary — session, design, live state, error boundary. */
+  Root: ue,
+  /** The editable artboard (the ONE lazy renderer boundary — D9). */
+  Canvas: Ze,
+  /** Live product mockup. ×N under one Root is valid. */
+  Preview: fe,
+  /** Form input bound to a design text layer by typed token (T1). */
+  TextField: rt,
+  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
+  Buy: it,
+  /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
+  Layers: Ie,
+  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
+  Controls: at,
+  /** Undo/redo controls. Requires Editor.Canvas. */
+  History: ke,
+  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
+  Menu: Se,
+  /** The ⊕ add-element menu. Requires Editor.Canvas. */
+  Add: Ee
+};
+function Rt(t) {
+  return /* @__PURE__ */ s(ue, { ...t, __validation: "warn" });
+}
+const Ct = se(
+  function(e, n) {
+    const { children: r, className: o, style: a, maxHeight: c, ...u } = e, [d, i] = I(null);
+    return A(() => {
+      let l = !1;
+      return me().then(
+        (m) => {
+          l || i(() => m);
+        },
+        (m) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", m);
+        }
+      ), () => {
+        l = !0;
+      };
+    }, []), d ? /* @__PURE__ */ s(d, { ref: n, selfScope: !0, maxHeight: c, className: o, style: a, ...u, children: r }) : /* @__PURE__ */ s(
+      "div",
+      {
+        className: `sc-root${o ? ` ${o}` : ""}`,
+        style: { minHeight: c ?? 200, ...a },
+        "aria-busy": "true"
+      }
+    );
+  }
+);
+function Ot(t) {
+  return /* @__PURE__ */ s(fe, { ...t });
+}
+function Nt() {
+  const { mockups: t, isRendering: e, error: n } = G();
+  return { mockups: t, isRendering: e, error: n };
+}
+function lt(t) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: t % 100 === 0 ? 0 : 2,
+    maximumFractionDigits: t % 100 === 0 ? 0 : 2
+  }).format(t / 100);
+}
+const dt = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  padding: 0,
+  borderRadius: 9999,
+  border: "none",
+  background: "transparent",
+  color: "var(--sc-color-foreground, #111)",
+  font: "inherit",
+  fontSize: 16,
+  lineHeight: 1,
+  cursor: "pointer"
+}, ut = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  width: "100%",
+  padding: "8px 10px",
+  borderRadius: 8,
+  border: "none",
+  background: "transparent",
+  color: "inherit",
+  font: "inherit",
+  fontSize: 12,
+  fontWeight: 500,
+  textAlign: "left",
+  cursor: "pointer"
+};
+function Y({
+  label: t,
+  onSelect: e
+}) {
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "data-sc-part": "snowcone-editor-menu-item",
+      style: ut,
+      onClick: e,
+      children: t
+    }
+  );
+}
+function mt({
+  fullscreen: t,
+  onToggleFullscreen: e,
+  viewCount: n,
+  viewIndex: r,
+  onSelectView: o,
+  onExport: a
+}) {
+  const [c, u] = I(!1), d = () => u(!1);
+  return /* @__PURE__ */ k("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Editor menu",
+        "aria-haspopup": "menu",
+        "aria-expanded": c,
+        "data-sc-part": "snowcone-editor-menu",
+        style: dt,
+        onClick: () => u((i) => !i),
+        children: "⋮"
+      }
+    ),
+    c ? /* @__PURE__ */ k(oe, { children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 39 },
+          onClick: d,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ k(
+        "div",
+        {
+          role: "menu",
+          "data-sc-part": "snowcone-editor-menu-list",
+          style: {
+            position: "absolute",
+            right: 0,
+            top: "100%",
+            marginTop: 4,
+            minWidth: 176,
+            padding: 4,
+            borderRadius: 12,
+            background: "var(--sc-color-surface, #fff)",
+            boxShadow: "0 8px 24px rgba(0,0,0,0.14)",
+            border: "1px solid rgba(0,0,0,0.08)",
+            zIndex: 40
+          },
+          children: [
+            /* @__PURE__ */ s(
+              Y,
+              {
+                label: t ? "Exit fullscreen" : "Fullscreen",
+                onSelect: () => {
+                  d(), e();
+                }
+              }
+            ),
+            n > 1 ? Array.from({ length: n }, (i, l) => /* @__PURE__ */ s(
+              Y,
+              {
+                label: `View ${l + 1}${l === r ? " ✓" : ""}`,
+                onSelect: () => {
+                  d(), o(l);
+                }
+              },
+              l
+            )) : null,
+            /* @__PURE__ */ s(
+              Y,
+              {
+                label: "Export PNG",
+                onSelect: () => {
+                  d(), a();
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] });
+}
+function ft() {
+  const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Re({ previewSize: 96 });
+  return A(() => {
+    t.length > 0 && n();
+  }, [t.length, n]), /* @__PURE__ */ k(
+    "div",
+    {
+      "data-sc-part": "snowcone-editor-idle-dock",
+      style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 8, minHeight: 44 },
+      children: [
+        /* @__PURE__ */ s(V.Add, {}),
+        t.length > 0 ? /* @__PURE__ */ s("div", { style: { width: 1, height: 28, background: "rgba(0,0,0,0.1)", flexShrink: 0 }, "aria-hidden": "true" }) : null,
+        t.map((r) => /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            "data-sc-part": "snowcone-editor-layer-thumb",
+            "aria-label": `Select ${r.name}`,
+            onClick: () => e(r.id),
+            style: {
+              width: 44,
+              height: 44,
+              padding: 2,
+              borderRadius: 12,
+              border: "1px solid rgba(0,0,0,0.1)",
+              background: "var(--sc-color-surface, #fff)",
+              overflow: "hidden",
+              cursor: "pointer",
+              flexShrink: 0,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: r.previewUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ s("img", { src: r.previewUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "contain" } })
+            ) : /* @__PURE__ */ s(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  fontWeight: 600,
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: r.name
+              }
+            )
+          },
+          r.id
+        ))
+      ]
+    }
+  );
+}
+function pt({
+  onAddToCart: t,
+  defaultQuantity: e
+}) {
+  const { price: n, complete: r } = ct();
+  return /* @__PURE__ */ k(
+    V.Buy,
+    {
+      onAddToCart: t,
+      ...typeof e == "number" ? { defaultQuantity: e } : {},
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "7px 16px",
+        marginLeft: 4,
+        borderRadius: 9999,
+        border: "none",
+        background: "var(--sc-color-foreground, #111)",
+        color: "var(--sc-color-surface, #fff)",
+        font: "inherit",
+        fontSize: 12,
+        fontWeight: 700,
+        whiteSpace: "nowrap",
+        cursor: r ? "pointer" : "not-allowed",
+        opacity: r ? 1 : 0.5
+      },
+      children: [
+        "Add to cart",
+        typeof n == "number" ? ` · ${lt(n)}` : ""
+      ]
+    }
+  );
+}
+function gt({
+  title: t,
+  height: e,
+  mockupIds: n,
+  onAddToCart: r,
+  defaultQuantity: o,
+  className: a,
+  style: c
+}) {
+  const [u, d] = I(!1), [i, l] = I(0), [m, f] = I(!1), h = C(null), p = Me(), w = n[Math.min(i, n.length - 1)], E = j(async () => {
+    var _;
+    const R = await ((_ = h.current) == null ? void 0 : _.exportArtboards({ format: "dataUrl" }));
+    if (!R) return;
+    const [D, x] = Object.entries(R)[0] ?? [];
+    if (typeof x != "string") return;
+    const $ = document.createElement("a");
+    $.href = x, $.download = `${D ?? "design"}.png`, $.click();
+  }, []), b = {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    background: "var(--sc-color-surface, #fff)",
+    color: "var(--sc-color-foreground, #111)",
+    fontFamily: "ui-sans-serif, system-ui, sans-serif",
+    ...u ? {
+      position: "fixed",
+      inset: 0,
+      zIndex: 9999,
+      height: "100dvh",
+      paddingBottom: "env(safe-area-inset-bottom)"
+    } : {
+      position: "relative",
+      height: e,
+      borderRadius: 16,
+      border: "1px solid rgba(0,0,0,0.08)",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.08)"
+    },
+    ...c
+  }, T = {
+    position: "absolute",
+    top: 8,
+    right: 12,
+    width: 96,
+    aspectRatio: "2 / 3",
+    borderRadius: 12,
+    overflow: "hidden",
+    border: "1px solid rgba(0,0,0,0.1)",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
+    background: "var(--sc-color-surface, #fff)",
+    padding: 0,
+    cursor: "pointer",
+    zIndex: 2
+  };
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      "data-sc-part": "snowcone-editor",
+      "data-sc-fullscreen": u ? "true" : void 0,
+      className: a,
+      style: b,
+      children: [
+        /* @__PURE__ */ k(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              padding: "10px 12px 4px 16px",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ s("span", { style: { fontSize: 14, fontWeight: 700, marginRight: "auto" }, children: t }),
+              /* @__PURE__ */ s(V.History, {}),
+              /* @__PURE__ */ s(
+                mt,
+                {
+                  fullscreen: u,
+                  onToggleFullscreen: () => d((R) => !R),
+                  viewCount: n.length,
+                  viewIndex: i,
+                  onSelectView: l,
+                  onExport: () => void E()
+                }
+              ),
+              /* @__PURE__ */ s(pt, { onAddToCart: r, defaultQuantity: o })
+            ]
+          }
+        ),
+        /* @__PURE__ */ k(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-stage",
+            style: { position: "relative", flex: 1, minHeight: 0, padding: "4px 12px" },
+            children: [
+              /* @__PURE__ */ s(V.Canvas, { ref: h, style: { height: "100%" } }),
+              m ? (
+                // Swapped: the mockup IS the stage; the corner chip returns to the
+                // artwork. The canvas stays mounted underneath (no document
+                // teardown), just covered.
+                /* @__PURE__ */ k(
+                  "div",
+                  {
+                    "data-sc-part": "snowcone-editor-swap-stage",
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      zIndex: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: "var(--sc-color-surface, #fff)",
+                      padding: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ s(
+                        V.Preview,
+                        {
+                          mockupId: w,
+                          alt: "Product mockup",
+                          fallback: /* @__PURE__ */ s("div", { "aria-busy": "true", children: "Rendering…" }),
+                          style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain", borderRadius: 12 }
+                        }
+                      ),
+                      /* @__PURE__ */ s(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Back to artwork",
+                          "data-sc-part": "snowcone-editor-swap-back",
+                          onClick: () => f(!1),
+                          style: {
+                            ...T,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: 11,
+                            fontWeight: 600,
+                            color: "inherit",
+                            border: "1px dashed rgba(0,0,0,0.25)"
+                          },
+                          children: "artwork"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ) : /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Show product mockup",
+                  "data-sc-part": "snowcone-editor-pip",
+                  onClick: () => f(!0),
+                  style: T,
+                  children: /* @__PURE__ */ s(
+                    V.Preview,
+                    {
+                      mockupId: w,
+                      alt: "Product mockup preview",
+                      fallback: /* @__PURE__ */ s("span", { style: { fontSize: 10, opacity: 0.5 }, "aria-busy": "true", children: "mockup…" }),
+                      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ k(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-zone",
+            "data-sc-zone-state": p ? "selected" : "idle",
+            style: { flexShrink: 0, padding: "4px 16px 14px" },
+            children: [
+              /* @__PURE__ */ s("div", { style: { display: p ? void 0 : "none" }, children: /* @__PURE__ */ s(V.Controls, { placement: "docked" }) }),
+              p ? null : /* @__PURE__ */ s(ft, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Tt(t) {
+  const {
+    onAddToCart: e,
+    defaultQuantity: n,
+    title: r = "Editor",
+    height: o = 480,
+    className: a,
+    style: c,
+    ...u
+  } = t;
+  return /* @__PURE__ */ s(V.Root, { ...u, children: /* @__PURE__ */ s(
+    gt,
+    {
+      title: r,
+      height: o,
+      mockupIds: u.product.mockupIds,
+      onAddToCart: e,
+      ...typeof n == "number" ? { defaultQuantity: n } : {},
+      className: a,
+      style: c
+    }
+  ) });
+}
+Ce();
+export {
+  V as E,
+  Ct as R,
+  Tt as S,
+  Rt as a,
+  Ot as b,
+  ce as c,
+  ct as d,
+  Nt as e,
+  lt as f,
+  G as u,
+  Ke as v
+};
+//# sourceMappingURL=embed-uALcVSYN.js.map