@snowcone-app/canvas 0.21.3 → 0.22.0

package/dist/{embed-QBZkgWDr.js → embed-8ecUMMH-.js}

@@ -1,91 +1,91 @@
-import { E as be, o as ve, p as xe, C as we, q, r as Ee, t as ke, v as Se, w as Ie, x as Re, g as Ce, e as Oe } from "./UnifiedFontService-CC3CSmH5.js";
+import { E as Ee, o as xe, p as ke, C as Ie, q as M, r as Re, t as Se, v as Ce, w as Oe, x as Ne, g as Te, e as _e } from "./UnifiedFontService-CC3CSmH5.js";
 import { y as $ } from "./FontAnalyzer-CwIpgTGd.js";
-import { jsx as s, jsxs as R, Fragment as se } from "react/jsx-runtime";
-import { useContext as Ne, createContext as Te, useRef as N, useState as C, useMemo as O, useSyncExternalStore as B, useEffect as D, Component as $e, forwardRef as ie, useId as Z, useLayoutEffect as W, useCallback as j } from "react";
-import { assertVariantSelected as _e, RenderSession as De, createCartDetail as Ve } from "@snowcone-app/sdk";
-import { i as ae, g as V, B as Ae, E as Fe, r as Be } from "./editorErrors-B2mb1sVN.js";
-import { u as Ue, p as Le } from "./usePieceGuideBundle-CbJJg66S.js";
-import { s as ee, i as Pe } from "./design-builder-CT4DHIPe.js";
-import { D as je, C as qe, g as Me, e as ze } from "./template-fields-C2pSfMBh.js";
+import { jsx as o, jsxs as C, Fragment as $e } from "react/jsx-runtime";
+import { useContext as De, createContext as Ae, useRef as R, useState as O, useMemo as T, useSyncExternalStore as j, useEffect as B, Component as Be, forwardRef as ce, useId as ne, useLayoutEffect as W, useCallback as q } from "react";
+import { assertVariantSelected as Le, RenderSession as Ve, createCartDetail as Ue } from "@snowcone-app/sdk";
+import { i as le, g as _, B as Fe, E as je, r as qe } from "./editorErrors-B2mb1sVN.js";
+import { u as Me, p as ze } from "./usePieceGuideBundle-CbJJg66S.js";
+import { s as re, i as Pe } from "./design-builder-CT4DHIPe.js";
+import { D as He, C as Ke, g as Ge, e as We } from "./template-fields-C2pSfMBh.js";
 import "./CanvasStateV1-DmZ1Qvvn.js";
-const ce = Te(void 0);
-function G() {
-  const t = Ne(ce);
+const ue = Ae(void 0);
+function Q() {
+  const t = De(ue);
   if (!t)
     throw new Error(
       "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
     );
   return t;
 }
-const He = "[RealtimeEmbed]";
-function Ke(t) {
-  var r, o;
+const Qe = "[RealtimeEmbed]";
+function Je(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(
-    (((o = t == null ? void 0 : t.options) == null ? void 0 : o.combinations) ?? []).map((a) => a.variantId).filter((a) => typeof a == "string" && a !== "")
+    (((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 le({ shop: t, product: e, design: n, hasGrant: r }) {
-  var l, m;
-  const o = [];
-  if (t || o.push({
+function me({ shop: t, product: e, design: n, hasGrant: r }) {
+  var f, u;
+  const s = [];
+  if (t || s.push({
     severity: "error",
     issue: "missing-shop",
     message: "`shop` is required (your publishable shop id)."
-  }), r || o.push({
+  }), 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."
-  }), (l = e == null ? void 0 : e.mockupIds) != null && l.length || o.push({
+  }), (f = e == null ? void 0 : e.mockupIds) != null && f.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 {
-      _e(e);
-    } catch (f) {
-      o.push({
+      Le(e);
+    } catch (m) {
+      s.push({
         severity: "error",
         issue: "variant-required",
-        message: f instanceof Error ? f.message : String(f)
+        message: m instanceof Error ? m.message : String(m)
       });
     }
-  const a = n.toJSON(), c = a.activeArtboard, u = Ke(e);
-  u.length > 1 && o.push({
+  const a = n.toJSON(), d = a.activeArtboard, c = Je(e);
+  c.length > 1 && s.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({
+    message: `product ${e.productId} requires placements [${c.join(", ")}] but this embed renders a single placement ("${d}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  }), (u = e == null ? void 0 : e.placements) != null && u.length && !e.placements.includes(d) && s.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 }).`
+    message: `the design's placement "${d}" 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, w) => d.indexOf(f) !== w);
-  return i.length && o.push({
+  const l = a.elements.map((m) => m.name).filter((m) => !!m), i = l.filter((m, y) => l.indexOf(m) !== y);
+  return i.length && s.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;
+  }), s;
 }
-function We(t) {
-  for (const e of le(t))
-    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${He} ${e.message}`);
+function Ye(t) {
+  for (const e of me(t))
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${Qe} ${e.message}`);
 }
-const de = 8e3;
-function Ge(t) {
-  return `[RealtimeEmbed] No mockup after ${Math.round(de / 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.`;
+const pe = 8e3;
+function Xe(t) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(pe / 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 Qe(t) {
+function Ze(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 ue({ error: t, onRetry: e }) {
-  const n = ae(t) ? t.code : "EDITOR_ERROR";
-  return /* @__PURE__ */ R(
+function fe({ error: t, onRetry: e }) {
+  const n = le(t) ? t.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ C(
     "div",
     {
       "data-sc-part": "error",
@@ -101,12 +101,12 @@ function ue({ error: t, onRetry: e }) {
         lineHeight: 1.5
       },
       children: [
-        /* @__PURE__ */ R("p", { style: { margin: 0, fontWeight: 700 }, children: [
+        /* @__PURE__ */ C("p", { style: { margin: 0, fontWeight: 700 }, children: [
           "Editor failed: ",
           n
         ] }),
-        /* @__PURE__ */ s("p", { style: { margin: "4px 0 0" }, children: t.message }),
-        e ? /* @__PURE__ */ s(
+        /* @__PURE__ */ o("p", { style: { margin: "4px 0 0" }, children: t.message }),
+        e ? /* @__PURE__ */ o(
           "button",
           {
             type: "button",
@@ -130,7 +130,7 @@ function ue({ error: t, onRetry: e }) {
     }
   );
 }
-class Je extends $e {
+class et extends Be {
   constructor() {
     super(...arguments), this.state = { caught: null };
   }
@@ -139,33 +139,34 @@ class Je extends $e {
   }
   componentDidCatch(e) {
     var n;
-    Be(e), typeof $ < "u" && ((n = $.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+    qe(e), typeof $ < "u" && ((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(ue, { error: this.state.caught }) : this.props.children;
+    return this.state.caught ? /* @__PURE__ */ o(fe, { error: this.state.caught }) : this.props.children;
   }
 }
-function Ye({ reportedError: t, onRetry: e, children: n }) {
+function tt({ reportedError: t, onRetry: e, children: n }) {
   if (t) {
-    const r = ae(t) && t.code === "E_CHUNK_LOAD_FAILED";
-    return /* @__PURE__ */ s(ue, { error: t, onRetry: r ? e : void 0 });
+    const r = le(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ o(fe, { error: t, onRetry: r ? e : void 0 });
   }
-  return /* @__PURE__ */ s(Je, { reportedError: null, onRetry: e, children: n });
+  return /* @__PURE__ */ o(et, { reportedError: null, onRetry: e, children: n });
 }
-function Xe(t) {
+function nt(t) {
   const {
     shop: e,
     product: n,
     design: r,
-    throttleMs: o = 200,
+    throttleMs: s = 200,
     onMockups: a,
-    onRenderError: c,
-    wsUrl: u,
-    services: d,
-    children: i,
-    internals: l,
+    onRenderError: d,
+    onIssue: c,
+    wsUrl: l,
+    services: i,
+    children: f,
+    internals: u,
     __validation: m = "throw"
-  } = t, f = O(() => r.toJSON().activeArtboard, [r]), w = O(() => {
+  } = t, y = T(() => r.toJSON().activeArtboard, [r]), b = T(() => {
     const p = r.toJSON().artboards[0];
     if (p)
       return {
@@ -175,160 +176,171 @@ function Xe(t) {
         ...p.backgroundColor ? { backgroundColor: p.backgroundColor } : {}
       };
   }, [r]);
-  B(
-    l.commerce.subscribe,
-    l.commerce.getVersion,
-    l.commerce.getVersion
+  j(
+    u.commerce.subscribe,
+    u.commerce.getVersion,
+    u.commerce.getVersion
   );
-  const g = l.commerce.renderVariantId(), v = Ue(g ?? n.variantId ?? n.defaultGvid), E = O(() => {
-    if (!v) return null;
+  const v = u.commerce.renderVariantId(), w = Me(v ?? n.variantId ?? n.defaultGvid), h = T(() => {
+    if (!w) return null;
     const p = r.toJSON().artboards[0];
-    return Le(v, p) ?? null;
-  }, [v, r]), T = N(a), h = N(c);
-  T.current = a, h.current = c;
-  const [k, L] = C([]), [x, S] = C(!0), [A, F] = C(null), P = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), Q = Qe(t), ge = "grantUrl" in Q ? Q.grantUrl : "getToken", te = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, M = `${e}|${te}|${f}|${P}`;
-  O(() => {
+    return ze(w, p) ?? null;
+  }, [w, r]), x = R(a), g = R(d), N = R(c);
+  x.current = a, g.current = d, N.current = c;
+  const [S, L] = O([]), [D, V] = O(!0), [z, P] = O(null), J = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), Y = Ze(t), be = "grantUrl" in Y ? Y.grantUrl : "getToken", ie = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, F = `${e}|${ie}|${y}|${J}`, X = T(() => {
     var I;
-    if (m !== "throw") return;
-    const p = le({ shop: e, product: n, design: r, hasGrant: P }), y = p.find((U) => U.severity === "error");
-    if (y)
-      throw new V("E_EMBED_CONFIG", y.message, {
-        issue: y.issue,
+    const p = me({ shop: e, product: n, design: r, hasGrant: J });
+    if (m !== "throw") return p;
+    const E = p.find((A) => A.severity === "error");
+    if (E)
+      throw new _("E_EMBED_CONFIG", E.message, {
+        issue: E.issue,
         docSlug: "embed-mode"
       });
-    for (const U of p)
-      typeof $ < "u" && ((I = $.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${U.message}`);
-  }, [M, m]);
-  const ne = N(null);
-  D(() => {
+    for (const A of p)
+      typeof $ < "u" && ((I = $.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${A.message}`);
+    return p;
+  }, [F, m]), se = R(null);
+  B(() => {
+    var p;
+    if (X.length !== 0 && se.current !== F) {
+      se.current = F;
+      for (const E of X) (p = N.current) == null || p.call(N, E);
+    }
+  }, [X, F]);
+  const oe = R(null);
+  B(() => {
     var p;
     if (m === "warn" && typeof $ < "u" && ((p = $.env) == null ? void 0 : p.NODE_ENV) !== "production") {
-      if (ne.current === M) return;
-      ne.current = M, We({ shop: e, product: n, design: r, hasGrant: P });
+      if (oe.current === F) return;
+      oe.current = F, Ye({ shop: e, product: n, design: r, hasGrant: J });
     }
-  }, [M, m]);
-  const z = O(
+  }, [F, m]);
+  const H = T(
     () => {
       try {
-        return { session: new De({ shop: e, product: n, wsUrl: u, ...Q }) };
+        return { session: new Ve({ shop: e, product: n, wsUrl: l, ...Y }) };
       } catch (p) {
         return { error: p instanceof Error ? p.message : String(p) };
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [e, te, f, u, ge]
-  ), b = "session" in z ? z.session : null, H = "error" in z ? z.error : null, K = O(() => (p, y = o) => {
-    b && (F(null), S(!0), b.renderState(f, p, y).catch((I) => {
-      var oe;
-      const U = I instanceof Error ? I.message : String(I);
-      F(U), S(!1), (oe = h.current) == null || oe.call(h, U);
+    [e, ie, y, l, be]
+  ), k = "session" in H ? H.session : null, K = "error" in H ? H.error : null, G = T(() => (p, E = s) => {
+    k && (P(null), V(!0), k.renderState(y, p, E).catch((I) => {
+      var de;
+      const A = I instanceof Error ? I.message : String(I);
+      P(A), V(!1), (de = g.current) == null || de.call(g, A);
     }));
-  }, [b, f, o]);
-  D(() => {
+  }, [k, y, s]);
+  B(() => {
     var p;
-    if (H) {
-      F(H), S(!1), (p = h.current) == null || p.call(h, H);
+    if (K) {
+      P(K), V(!1), (p = g.current) == null || p.call(g, K);
       return;
     }
-    if (b)
-      return b.onMockups((y) => {
+    if (k)
+      return k.onMockups((E) => {
         var I;
-        L(y), S(!1), (I = T.current) == null || I.call(T, y);
-      }), b.onError((y) => {
+        L(E), V(!1), (I = x.current) == null || I.call(x, E);
+      }), k.onError((E) => {
         var I;
-        F(y), S(!1), (I = h.current) == null || I.call(h, y);
-      }), K(r.toServerRequest()), () => b.close();
-  }, [b, H]);
-  const J = N({
+        P(E), V(!1), (I = g.current) == null || I.call(g, E);
+      }), G(r.toServerRequest()), () => k.close();
+  }, [k, K]);
+  const Z = R({
     session: null,
     variantId: void 0
   });
-  D(() => {
-    if (!b || !g) return;
-    const p = J.current, y = p.session === b ? p.variantId : n.variantId;
-    if (g === y) {
-      J.current = { session: b, variantId: y };
+  B(() => {
+    if (!k || !v) return;
+    const p = Z.current, E = p.session === k ? p.variantId : n.variantId;
+    if (v === E) {
+      Z.current = { session: k, variantId: E };
       return;
     }
-    J.current = { session: b, variantId: g }, b.setProduct({ ...n, variantId: g }), K(ee(l.store.getState()));
-  }, [b, g]), D(() => {
-    var y;
-    if (!x || typeof $ > "u" || ((y = $.env) == null ? void 0 : y.NODE_ENV) === "production") return;
-    const p = setTimeout(() => console.warn(Ge(f)), de);
+    Z.current = { session: k, variantId: v }, k.setProduct({ ...n, variantId: v }), G(re(u.store.getState()));
+  }, [k, v]), B(() => {
+    if (!D) return;
+    const p = setTimeout(() => {
+      var I, A;
+      const E = Xe(y);
+      typeof $ < "u" && ((I = $.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(E), (A = N.current) == null || A.call(N, { severity: "warn", issue: "slow-render", message: E });
+    }, pe);
     return () => clearTimeout(p);
-  }, [x, f]);
-  const he = O(
+  }, [D, y]);
+  const ve = T(
     () => ({
-      session: b,
+      session: k,
       design: r,
-      placement: f,
+      placement: y,
       product: n,
-      mockups: k,
-      isRendering: x,
-      error: A,
-      throttleMs: o,
-      pieceGuides: E,
-      pushRender: K,
-      stateStore: l.store
+      mockups: S,
+      isRendering: D,
+      error: z,
+      throttleMs: s,
+      pieceGuides: h,
+      pushRender: G,
+      stateStore: u.store
     }),
-    [b, r, f, n, k, x, A, o, E, K, l.store]
-  ), ye = B(
-    l.registry.subscribe,
-    l.registry.getVersion,
-    l.registry.getVersion
+    [k, r, y, n, S, D, z, s, h, G, u.store]
+  ), we = j(
+    u.registry.subscribe,
+    u.registry.getVersion,
+    u.registry.getVersion
   );
-  O(() => l.registry.validate(), [l.registry, ye]);
-  const re = /* @__PURE__ */ s(xe.Provider, { value: l, children: /* @__PURE__ */ s(ce.Provider, { value: he, children: /* @__PURE__ */ s(Ae.Provider, { value: l.registry, children: /* @__PURE__ */ s(
-    Fe,
+  T(() => u.registry.validate(), [u.registry, we]);
+  const ae = /* @__PURE__ */ o(ke.Provider, { value: u, children: /* @__PURE__ */ o(ue.Provider, { value: ve, children: /* @__PURE__ */ o(Fe.Provider, { value: u.registry, children: /* @__PURE__ */ o(
+    je,
     {
-      ...w ? { initialArtboardConfig: w } : {},
-      children: i
+      ...b ? { initialArtboardConfig: b } : {},
+      children: f
     }
   ) }) }) });
-  return d ? /* @__PURE__ */ s(we, { services: d, children: re }) : re;
+  return i ? /* @__PURE__ */ o(Ie, { services: i, children: ae }) : ae;
 }
-function me(t) {
-  const { design: e, product: n } = t, r = `${n.productId}|${n.variantId ?? ""}`, o = N(null), a = N(null), [c, u] = C(null);
-  (o.current === null || o.current.design !== e) && (o.current = {
+function he(t) {
+  const { design: e, product: n } = t, r = `${n.productId}|${n.variantId ?? ""}`, s = R(null), a = R(null), [d, c] = O(null);
+  (s.current === null || s.current.design !== e) && (s.current = {
     design: e,
     internals: {
-      store: new je(e.toJSON()),
-      registry: new be()
+      store: new He(e.toJSON()),
+      registry: new Ee()
     }
-  }), (a.current === null || a.current.productIdentity !== r) && (a.current = { productIdentity: r, commerce: new qe(n) });
-  const d = O(
+  }), (a.current === null || a.current.productIdentity !== r) && (a.current = { productIdentity: r, commerce: new Ke(n) });
+  const l = T(
     () => ({
-      ...o.current.internals,
+      ...s.current.internals,
       commerce: a.current.commerce,
-      ...ve(u)
+      ...xe(c)
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [o.current.internals, a.current.commerce]
+    [s.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(Ye, { reportedError: c, onRetry: () => u(null), children: /* @__PURE__ */ s(Xe, { ...t, internals: d }) }) })
+    /* @__PURE__ */ o("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ o(tt, { reportedError: d, onRetry: () => c(null), children: /* @__PURE__ */ o(nt, { ...t, internals: l }) }) })
   );
 }
-let Ze = () => import("./EditorCanvasImpl-M7rw1c1k.js").then((t) => t.EditorCanvasImpl);
-function fe() {
-  return Ze();
+let rt = () => import("./EditorCanvasImpl-BH_bKy-F.js").then((t) => t.EditorCanvasImpl);
+function ge() {
+  return rt();
 }
-const et = ie(function({ children: e, maxHeight: n, className: r, style: o }, a) {
-  const c = q("Editor.Canvas"), u = Z();
-  W(() => c.registry.registerCanvas(u), [c.registry, u]);
-  const [d, i] = C(null);
-  return D(() => {
-    let l = !1;
-    return fe().then(
+const it = ce(function({ children: e, maxHeight: n, floatingToolbar: r = !0, className: s, style: a }, d) {
+  const c = M("Editor.Canvas"), l = ne();
+  W(() => c.registry.registerCanvas(l), [c.registry, l]);
+  const [i, f] = O(null);
+  return B(() => {
+    let u = !1;
+    return ge().then(
       (m) => {
-        l || i(() => m);
+        u || f(() => m);
       },
       (m) => {
-        l || c.reportRuntimeError(
-          new V(
+        u || c.reportRuntimeError(
+          new _(
             "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" }
@@ -336,102 +348,127 @@ const et = ie(function({ children: e, maxHeight: n, className: r, style: o }, a)
         );
       }
     ), () => {
-      l = !0;
+      u = !0;
     };
-  }, [c]), d ? (
+  }, [c]), i ? (
     // `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(
+    // unless the host opts out via `floatingToolbar={false}` or a docked
+    // <Editor.Controls> is mounted (ADR-0085 §5). Only here — the legacy
+    // <RealtimeCanvas> wrapper stays chrome-less.
+    /* @__PURE__ */ o(
+      i,
+      {
+        ref: d,
+        kit: "embed-only",
+        partAttr: "canvas",
+        builtinControls: r,
+        maxHeight: n,
+        className: s,
+        style: a,
+        children: e
+      }
+    )
+  ) : /* @__PURE__ */ o(
     "div",
     {
       "data-sc-part": "canvas",
       "data-sc-state": "loading",
-      className: r,
-      style: { minHeight: n ?? 200, ...o },
+      className: s,
+      style: { minHeight: n ?? 200, ...a },
       "aria-busy": "true"
     }
   );
-}), tt = 1.2, Y = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
-function nt(t) {
-  for (const e of Y)
+}), st = 1.2, ee = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function ot(t) {
+  for (const e of ee)
     if (e >= t) return e;
-  return Y[Y.length - 1];
+  return ee[ee.length - 1];
 }
-function rt(t, e) {
-  if (!(t > 0) || !(e > 0) || e <= t * tt) return null;
-  const n = nt(e);
+function at(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * st) return null;
+  const n = ot(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({
+function ye({
   mockupId: t,
   fallback: e = null,
   alt: n = "Live product mockup",
   className: r,
-  style: o
+  style: s
 }) {
-  const { mockups: a, error: c } = G(), u = N(/* @__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(se, { children: e });
-  const i = (l) => {
-    var v;
-    if (typeof $ > "u" || ((v = $.env) == null ? void 0 : v.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 w = Math.round(f * (window.devicePixelRatio || 1)), g = rt(m.naturalWidth, w);
-    g && (u.current.add(d.mockupId), console.warn(g));
+  const { mockups: a, error: d, isRendering: c } = Q(), l = R(/* @__PURE__ */ new Set()), i = t ? a.find((u) => u.mockupId === t && u.imageUrl) : a.find((u) => u.imageUrl);
+  if (!(i != null && i.imageUrl))
+    return d ? /* @__PURE__ */ o(
+      "div",
+      {
+        "data-sc-part": "preview-error",
+        "data-sc-preview-state": "error",
+        role: "alert",
+        "data-sc-error": d,
+        className: r,
+        style: s,
+        children: e ?? `Render failed: ${d}`
+      }
+    ) : /* @__PURE__ */ o("div", { "data-sc-part": "preview", "data-sc-preview-state": "rendering", "aria-busy": "true", style: { display: "contents" }, children: e });
+  const f = (u) => {
+    var w;
+    if (typeof $ > "u" || ((w = $.env) == null ? void 0 : w.NODE_ENV) === "production" || typeof window > "u" || l.current.has(i.mockupId)) return;
+    const m = u.currentTarget, y = m.getBoundingClientRect().width;
+    if (y <= 0) return;
+    const b = Math.round(y * (window.devicePixelRatio || 1)), v = at(m.naturalWidth, b);
+    v && (l.current.add(i.mockupId), console.warn(v));
   };
   return (
     // eslint-disable-next-line @next/next/no-img-element
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ o(
       "img",
       {
         "data-sc-part": "preview",
-        src: d.imageUrl,
+        "data-sc-preview-state": c ? "rendering" : "ready",
+        src: i.imageUrl,
         alt: n,
         className: r,
-        style: o,
-        onLoad: i
+        style: s,
+        onLoad: f
       }
     )
   );
 }
-function ot(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 = Z(), m = N(null);
+function dt(t) {
+  const { layer: e, optional: n = !1, placeholder: r, className: s, style: a } = t, d = M("Editor.TextField"), { pushRender: c, throttleMs: l, stateStore: i } = Q(), f = ne(), u = R(null);
   if (!Pe(e))
-    throw new V(
+    throw new _(
       "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 g = i.layerKindOf(e.name);
-    if (g === void 0)
-      throw new V(
+  if (u.current !== e.name) {
+    const b = i.layerKindOf(e.name);
+    if (b === void 0)
+      throw new _(
         "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 (g !== "text")
-      throw new V(
+    if (b !== "text")
+      throw new _(
         "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" }
+        `layer "${e.name}" is ${b === null ? "not a bindable kind" : `an ${b} layer`} — <Editor.TextField> binds text layers only.`,
+        { layerName: e.name, actualKind: b, docSlug: "embed-mode" }
       );
-    m.current = e.name;
+    u.current = e.name;
   }
-  W(() => c.registry.registerTextField(l, { name: e.name, optional: n }), [c.registry, l, e.name, n]);
-  const f = B(
+  W(() => d.registry.registerTextField(f, { name: e.name, optional: n }), [d.registry, f, e.name, n]);
+  const m = j(
     i.subscribe,
     () => i.textOf(e.name) ?? "",
     () => i.textOf(e.name) ?? ""
-  ), w = j(
-    (g) => {
-      const v = g.target.value, E = c.registry.getCanvasBridge();
-      if (E) {
-        E.setTextByName(e.name, v) || c.reportInvariant(
-          new V(
+  ), y = q(
+    (b) => {
+      const v = b.target.value, w = d.registry.getCanvasBridge();
+      if (w) {
+        w.setTextByName(e.name, v) || d.reportInvariant(
+          new _(
             "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" }
@@ -439,26 +476,26 @@ function ot(t) {
         );
         return;
       }
-      i.updateTextLayer(e.name, v), u(ee(i.getState()), d);
+      i.updateTextLayer(e.name, v), c(re(i.getState()), l);
     },
-    [c, e.name, i, u, d]
+    [d, e.name, i, c, l]
   );
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "input",
     {
       "data-sc-part": "textfield",
       "data-sc-layer": e.name,
       type: "text",
-      value: f,
-      onChange: w,
+      value: m,
+      onChange: y,
       placeholder: r,
       "aria-label": t["aria-label"] ?? e.name,
-      className: o,
+      className: s,
       style: a
     }
   );
 }
-function st(t) {
+function ct(t) {
   const e = [];
   for (const n of t.missingOptionKeys)
     e.push(`option:${n}`);
@@ -470,114 +507,114 @@ function st(t) {
       e.push(`layer:${n.name}`);
       continue;
     }
-    const o = (t.seedTextOf(n.name) ?? "").trim();
-    o.length > 0 && r === o && e.push(`layer-seed:${n.name}`);
+    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 it(t, e) {
+function lt(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: Me(c) }])
+  const s = Object.fromEntries(
+    Object.entries(r).map(([a, d]) => [a, { ...d, choices: Ge(d) }])
   );
-  return Ve({
+  return Ue({
     productId: t.productId,
     quantity: e.getQuantity(),
     selection: e.getSelection(),
     combinations: n,
-    attributes: o
+    attributes: s
   });
 }
-function at(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 V(
+function ut(t) {
+  const { onAddToCart: e, defaultQuantity: n, children: r, className: s, style: a } = t, d = M("Editor.Buy"), { product: c, stateStore: l } = Q(), i = d.commerce;
+  if (!(c != null && c.productId))
+    throw new _(
       "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 = N(!1);
+  const f = R(!1);
   W(() => {
-    l.current || (l.current = !0, typeof n == "number" && i.setQuantity(n));
+    f.current || (f.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), w = B(
-    c.registry.subscribe,
-    c.registry.getVersion,
-    c.registry.getVersion
-  ), g = i.getQuantity(), v = O(
-    () => st({
-      quantity: g,
+  const u = j(l.subscribe, l.getState, l.getState), m = j(i.subscribe, i.getVersion, i.getVersion), y = j(
+    d.registry.subscribe,
+    d.registry.getVersion,
+    d.registry.getVersion
+  ), b = i.getQuantity(), v = T(
+    () => ct({
+      quantity: b,
       missingOptionKeys: i.missingOptionKeys(),
       selectionValid: i.selectionValid(),
-      textFields: c.registry.getTextFields(),
-      textOf: (x) => d.textOf(x),
-      seedTextOf: (x) => d.seedTextOf(x),
-      hasRenderableElement: d.hasRenderableElement()
+      textFields: d.registry.getTextFields(),
+      textOf: (S) => l.textOf(S),
+      seedTextOf: (S) => l.seedTextOf(S),
+      hasRenderableElement: l.hasRenderableElement()
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [i, g, m, f, w]
-  ), E = v.length === 0, [T, h] = C(!1), k = N(!1), L = j(() => {
-    if (k.current || !E) return;
-    k.current = !0, h(!0);
-    const x = d.getState(), S = i.resolvedVariantId(), A = {
-      productId: u.productId,
-      ...S ? { variantId: S } : {},
+    [i, b, u, m, y]
+  ), w = v.length === 0, [h, x] = O(!1), g = R(!1), N = q(() => {
+    if (g.current || !w) return;
+    g.current = !0, x(!0);
+    const S = l.getState(), L = i.resolvedVariantId(), D = {
+      productId: c.productId,
+      ...L ? { variantId: L } : {},
       quantity: i.getQuantity(),
       selection: i.getSelection(),
-      cartDetail: it(u, i),
-      designState: x,
-      serverRequest: ee(x)
+      cartDetail: lt(c, i),
+      designState: S,
+      serverRequest: re(S)
     };
-    let F;
+    let V;
     try {
-      F = e(A);
-    } catch (P) {
-      throw k.current = !1, h(!1), P;
+      V = e(D);
+    } catch (z) {
+      throw g.current = !1, x(!1), z;
     }
-    Promise.resolve(F).finally(() => {
-      k.current = !1, h(!1);
+    Promise.resolve(V).finally(() => {
+      g.current = !1, x(!1);
     });
-  }, [E, u, i, d, e]);
-  return /* @__PURE__ */ s(
+  }, [w, c, i, l, e]);
+  return /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       "data-sc-part": "buy",
-      "data-sc-buy-state": T ? "busy" : E ? "ready" : "incomplete",
+      "data-sc-buy-state": h ? "busy" : w ? "ready" : "incomplete",
       "data-sc-buy-missing": v.join(",") || void 0,
-      disabled: !E || T,
-      "aria-busy": T || void 0,
-      onClick: L,
-      className: o,
+      disabled: !w || h,
+      "aria-busy": h || void 0,
+      onClick: N,
+      className: s,
       style: a,
       children: r ?? "Add to cart"
     }
   );
 }
-function ct({
+function mt({
   placement: t = "docked",
   className: e,
   style: n
 }) {
-  const r = q("Editor.Controls");
-  Ee("Editor.Controls");
-  const o = Z();
+  const r = M("Editor.Controls");
+  Re("Editor.Controls");
+  const s = ne();
   W(
-    () => r.registry.registerControls(o, t),
-    [r.registry, o, t]
+    () => r.registry.registerControls(s, t),
+    [r.registry, s, t]
   );
-  const a = t === "docked", [c, u] = C(null);
-  return D(() => {
+  const a = t === "docked", [d, c] = O(null);
+  return B(() => {
     if (!a) return;
-    let d = !1;
+    let l = !1;
     return import("./ContextualToolbars-BDEt9ND0.js").then((i) => i.s).then(
       (i) => {
-        d || u(() => i.ContextualToolbars);
+        l || c(() => i.ContextualToolbars);
       },
       (i) => {
-        d || r.reportRuntimeError(
-          new V(
+        l || r.reportRuntimeError(
+          new _(
             "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" }
@@ -585,23 +622,23 @@ function ct({
         );
       }
     ), () => {
-      d = !0;
+      l = !0;
     };
-  }, [a, r]), a ? /* @__PURE__ */ s(
+  }, [a, r]), a ? /* @__PURE__ */ o(
     "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
+      "aria-busy": d ? void 0 : "true",
+      children: d ? /* @__PURE__ */ o(d, { mode: "embedded" }) : null
     }
   ) : null;
 }
-function lt() {
-  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(
+function pt() {
+  const e = M("useProductSelection").commerce, n = j(e.subscribe, e.getVersion, e.getVersion), r = q((a, d) => e.select(a, d), [e]), s = q((a) => e.setQuantity(a), [e]);
+  return T(
     () => ({
       attributes: e.getAttributes(),
       selection: e.getSelection(),
@@ -610,72 +647,128 @@ function lt() {
       variantId: e.resolvedVariantId(),
       price: e.resolvedPrice(),
       quantity: e.getQuantity(),
-      setQuantity: o,
+      setQuantity: s,
       complete: e.selectionValid(),
       missing: e.missingOptionKeys()
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [e, r, o, n]
+    [e, r, s, n]
   );
 }
-const _ = {
+const U = {
   /** The one provider boundary — session, design, live state, error boundary. */
-  Root: me,
+  Root: he,
   /** The editable artboard (the ONE lazy renderer boundary — D9). */
-  Canvas: et,
+  Canvas: it,
   /** Live product mockup. ×N under one Root is valid. */
-  Preview: pe,
+  Preview: ye,
   /** Form input bound to a design text layer by typed token (T1). */
-  TextField: ot,
+  TextField: dt,
   /** Smart commerce part: completeness + payload assembly; submit = host callback. */
-  Buy: at,
+  Buy: ut,
   /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
-  Layers: Re,
+  Layers: Ne,
   /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
-  Controls: ct,
+  Controls: mt,
   /** Undo/redo controls. Requires Editor.Canvas. */
-  History: Ie,
+  History: Oe,
   /** The one ⋯ overflow menu. Requires Editor.Canvas. */
-  Menu: Se,
+  Menu: Ce,
   /** The ⊕ add-element menu. Requires Editor.Canvas. */
-  Add: ke
+  Add: Se
 };
-function Ct(t) {
-  return /* @__PURE__ */ s(me, { ...t, __validation: "warn" });
+function $t(t) {
+  return /* @__PURE__ */ o(he, { ...t, __validation: "warn" });
 }
-const Ot = ie(
+const Dt = ce(
   function(e, n) {
-    const { children: r, className: o, style: a, maxHeight: c, ...u } = e, [d, i] = C(null);
-    return D(() => {
-      let l = !1;
-      return fe().then(
-        (m) => {
-          l || i(() => m);
+    const { children: r, className: s, style: a, maxHeight: d, ...c } = e, [l, i] = O(null);
+    return B(() => {
+      let f = !1;
+      return ge().then(
+        (u) => {
+          f || i(() => u);
         },
-        (m) => {
-          console.error("[RealtimeCanvas] failed to load the rendering chunk:", m);
+        (u) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", u);
         }
       ), () => {
-        l = !0;
+        f = !0;
       };
-    }, []), d ? /* @__PURE__ */ s(d, { ref: n, selfScope: !0, maxHeight: c, className: o, style: a, ...u, children: r }) : /* @__PURE__ */ s(
+    }, []), l ? /* @__PURE__ */ o(l, { ref: n, selfScope: !0, maxHeight: d, className: s, style: a, ...c, children: r }) : /* @__PURE__ */ o(
       "div",
       {
-        className: `sc-root${o ? ` ${o}` : ""}`,
-        style: { minHeight: c ?? 200, ...a },
+        className: `sc-root${s ? ` ${s}` : ""}`,
+        style: { minHeight: d ?? 200, ...a },
         "aria-busy": "true"
       }
     );
   }
 );
-function Nt(t) {
-  return /* @__PURE__ */ s(pe, { ...t });
+function At(t) {
+  return /* @__PURE__ */ o(ye, { ...t });
 }
-function Tt() {
-  const { mockups: t, isRendering: e, error: n } = G();
+function Bt() {
+  const { mockups: t, isRendering: e, error: n } = Q();
   return { mockups: t, isRendering: e, error: n };
 }
-function dt(t) {
+function ft(t) {
+  return t.type !== "color" && typeof t.width == "number" && t.width > 0 && typeof t.height == "number" && t.height > 0;
+}
+function Lt(t, e = {}) {
+  var m, y, b, v, w;
+  const n = (t.placements ?? []).filter(ft), r = n.map((h) => h.label), s = e.placement ? n.find((h) => h.label === e.placement) : n[0];
+  if (!s)
+    throw e.placement ? new _(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `product ${t.id} has no renderable placement "${e.placement}". Renderable image placements: [${r.join(", ")}].`,
+      { productId: t.id, requested: e.placement, validNames: r, docSlug: "embed-mode" }
+    ) : new _(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `product ${t.id} has no renderable image placement (a non-color placement with width/height). The catalog payload may be incomplete — fetch it via getProduct(), not a search hit.`,
+      { productId: t.id, docSlug: "embed-mode" }
+    );
+  const a = ((m = t.options) == null ? void 0 : m.attributes) ?? {}, c = Object.values(a).some(
+    (h) => {
+      var x;
+      return (x = h == null ? void 0 : h.choices) == null ? void 0 : x.some((g) => g == null ? void 0 : g.hex);
+    }
+  ) ? (v = (b = (y = t.options) == null ? void 0 : y.combinations) == null ? void 0 : b.find(
+    (h) => typeof h.variantId == "string" && h.variantId !== ""
+  )) == null ? void 0 : v.variantId : void 0, l = t.mockups ?? [], i = c ? l.filter((h) => {
+    var x;
+    return (x = h.gvids) == null ? void 0 : x.includes(c);
+  }) : l, f = (i.length > 0 ? i : l).map((h) => h.id);
+  if (f.length === 0)
+    throw new _(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `product ${t.id} has no mockup scenes — nothing to render a preview into.`,
+      { productId: t.id, docSlug: "embed-mode" }
+    );
+  return {
+    product: {
+      productId: t.id,
+      mockupIds: f,
+      ...typeof c == "string" ? { variantId: c } : {},
+      options: t.options,
+      placements: (w = t.placements) == null ? void 0 : w.map((h) => h.label),
+      mockups: l,
+      requiredPlacements: t.requiredPlacements,
+      ...t.defaultGvid ? { defaultGvid: t.defaultGvid } : {},
+      ...typeof e.width == "number" ? { width: e.width } : {}
+    },
+    placement: {
+      label: s.label,
+      width: s.width,
+      height: s.height,
+      aspectRatio: s.width / s.height
+    },
+    placementLabels: r,
+    primaryMockupId: f[0],
+    variantId: c
+  };
+}
+function ht(t) {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
@@ -683,7 +776,7 @@ function dt(t) {
     maximumFractionDigits: t % 100 === 0 ? 0 : 2
   }).format(t / 100);
 }
-const ut = {
+const gt = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -698,7 +791,7 @@ const ut = {
   fontSize: 16,
   lineHeight: 1,
   cursor: "pointer"
-}, mt = {
+}, yt = {
   display: "flex",
   alignItems: "center",
   gap: 10,
@@ -714,55 +807,55 @@ const ut = {
   textAlign: "left",
   cursor: "pointer"
 };
-function X({
+function te({
   label: t,
   onSelect: e
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       role: "menuitem",
       "data-sc-part": "snowcone-editor-menu-item",
-      style: mt,
+      style: yt,
       onClick: e,
       children: t
     }
   );
 }
-function ft({
+function bt({
   fullscreen: t,
   onToggleFullscreen: e,
   viewCount: n,
   viewIndex: r,
-  onSelectView: o,
+  onSelectView: s,
   onExport: a
 }) {
-  const [c, u] = C(!1), d = () => u(!1);
-  return /* @__PURE__ */ R("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ s(
+  const [d, c] = O(!1), l = () => c(!1);
+  return /* @__PURE__ */ C("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ o(
       "button",
       {
         type: "button",
         "aria-label": "Editor menu",
         "aria-haspopup": "menu",
-        "aria-expanded": c,
+        "aria-expanded": d,
         "data-sc-part": "snowcone-editor-menu",
-        style: ut,
-        onClick: () => u((i) => !i),
+        style: gt,
+        onClick: () => c((i) => !i),
         children: "⋮"
       }
     ),
-    c ? /* @__PURE__ */ R(se, { children: [
-      /* @__PURE__ */ s(
+    d ? /* @__PURE__ */ C($e, { children: [
+      /* @__PURE__ */ o(
         "div",
         {
           style: { position: "fixed", inset: 0, zIndex: 39 },
-          onClick: d,
+          onClick: l,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ R(
+      /* @__PURE__ */ C(
         "div",
         {
           role: "menu",
@@ -781,31 +874,31 @@ function ft({
             zIndex: 40
           },
           children: [
-            /* @__PURE__ */ s(
-              X,
+            /* @__PURE__ */ o(
+              te,
               {
                 label: t ? "Exit fullscreen" : "Fullscreen",
                 onSelect: () => {
-                  d(), e();
+                  l(), e();
                 }
               }
             ),
-            n > 1 ? Array.from({ length: n }, (i, l) => /* @__PURE__ */ s(
-              X,
+            n > 1 ? Array.from({ length: n }, (i, f) => /* @__PURE__ */ o(
+              te,
               {
-                label: `View ${l + 1}${l === r ? " ✓" : ""}`,
+                label: `View ${f + 1}${f === r ? " ✓" : ""}`,
                 onSelect: () => {
-                  d(), o(l);
+                  l(), s(f);
                 }
               },
-              l
+              f
             )) : null,
-            /* @__PURE__ */ s(
-              X,
+            /* @__PURE__ */ o(
+              te,
               {
                 label: "Export PNG",
                 onSelect: () => {
-                  d(), a();
+                  l(), a();
                 }
               }
             )
@@ -815,19 +908,19 @@ function ft({
     ] }) : null
   ] });
 }
-function pt() {
-  const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Ce({ previewSize: 96 });
-  return D(() => {
+function vt() {
+  const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Te({ previewSize: 96 });
+  return B(() => {
     t.length > 0 && n();
-  }, [t.length, n]), /* @__PURE__ */ R(
+  }, [t.length, n]), /* @__PURE__ */ C(
     "div",
     {
       "data-sc-part": "snowcone-editor-idle-dock",
       style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 8, minHeight: 44 },
       children: [
-        /* @__PURE__ */ s(_.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(
+        /* @__PURE__ */ o(U.Add, {}),
+        t.length > 0 ? /* @__PURE__ */ o("div", { style: { width: 1, height: 28, background: "rgba(0,0,0,0.1)", flexShrink: 0 }, "aria-hidden": "true" }) : null,
+        t.map((r) => /* @__PURE__ */ o(
           "button",
           {
             type: "button",
@@ -850,8 +943,8 @@ function pt() {
             },
             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(
+              /* @__PURE__ */ o("img", { src: r.previewUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "contain" } })
+            ) : /* @__PURE__ */ o(
               "span",
               {
                 style: {
@@ -872,13 +965,13 @@ function pt() {
     }
   );
 }
-function gt({
+function wt({
   onAddToCart: t,
   defaultQuantity: e
 }) {
-  const { price: n, complete: r } = lt();
-  return /* @__PURE__ */ R(
-    _.Buy,
+  const { price: n, complete: r } = pt();
+  return /* @__PURE__ */ C(
+    U.Buy,
     {
       onAddToCart: t,
       ...typeof e == "number" ? { defaultQuantity: e } : {},
@@ -901,36 +994,36 @@ function gt({
       },
       children: [
         "Add to cart",
-        typeof n == "number" ? ` · ${dt(n)}` : ""
+        typeof n == "number" ? ` · ${ht(n)}` : ""
       ]
     }
   );
 }
-function ht({
+function Et({
   title: t,
   height: e,
   mockupIds: n,
   onAddToCart: r,
-  defaultQuantity: o,
+  defaultQuantity: s,
   className: a,
-  style: c
+  style: d
 }) {
-  const [u, d] = C(!1), [i, l] = C(0), [m, f] = C(!1), w = N(null), g = ze(), v = n[Math.min(i, n.length - 1)], E = j(async () => {
-    var A;
-    const k = await ((A = w.current) == null ? void 0 : A.exportArtboards({ format: "dataUrl" }));
-    if (!k) return;
-    const [L, x] = Object.entries(k)[0] ?? [];
-    if (typeof x != "string") return;
-    const S = document.createElement("a");
-    S.href = x, S.download = `${L ?? "design"}.png`, S.click();
-  }, []), T = {
+  const [c, l] = O(!1), [i, f] = O(0), [u, m] = O(!1), y = R(null), b = We(), v = n[Math.min(i, n.length - 1)], w = q(async () => {
+    var D;
+    const g = await ((D = y.current) == null ? void 0 : D.exportArtboards({ format: "dataUrl" }));
+    if (!g) return;
+    const [N, S] = Object.entries(g)[0] ?? [];
+    if (typeof S != "string") return;
+    const L = document.createElement("a");
+    L.href = S, L.download = `${N ?? "design"}.png`, L.click();
+  }, []), h = {
     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 ? {
+    ...c ? {
       position: "fixed",
       inset: 0,
       zIndex: 9999,
@@ -943,8 +1036,8 @@ function ht({
       border: "1px solid rgba(0,0,0,0.08)",
       boxShadow: "0 1px 3px rgba(0,0,0,0.08)"
     },
-    ...c
-  }, h = {
+    ...d
+  }, x = {
     position: "absolute",
     top: 8,
     right: 12,
@@ -959,15 +1052,15 @@ function ht({
     cursor: "pointer",
     zIndex: 2
   };
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ C(
     "div",
     {
       "data-sc-part": "snowcone-editor",
-      "data-sc-fullscreen": u ? "true" : void 0,
+      "data-sc-fullscreen": c ? "true" : void 0,
       className: a,
-      style: T,
+      style: h,
       children: [
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ C(
           "div",
           {
             "data-sc-part": "snowcone-editor-header",
@@ -979,35 +1072,35 @@ function ht({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ s("span", { style: { fontSize: 14, fontWeight: 700, marginRight: "auto" }, children: t }),
-              /* @__PURE__ */ s(_.History, {}),
-              /* @__PURE__ */ s(
-                ft,
+              /* @__PURE__ */ o("span", { style: { fontSize: 14, fontWeight: 700, marginRight: "auto" }, children: t }),
+              /* @__PURE__ */ o(U.History, {}),
+              /* @__PURE__ */ o(
+                bt,
                 {
-                  fullscreen: u,
-                  onToggleFullscreen: () => d((k) => !k),
+                  fullscreen: c,
+                  onToggleFullscreen: () => l((g) => !g),
                   viewCount: n.length,
                   viewIndex: i,
-                  onSelectView: l,
-                  onExport: () => void E()
+                  onSelectView: f,
+                  onExport: () => void w()
                 }
               ),
-              /* @__PURE__ */ s(gt, { onAddToCart: r, defaultQuantity: o })
+              /* @__PURE__ */ o(wt, { onAddToCart: r, defaultQuantity: s })
             ]
           }
         ),
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ C(
           "div",
           {
             "data-sc-part": "snowcone-editor-stage",
             style: { position: "relative", flex: 1, minHeight: 0, padding: "4px 12px" },
             children: [
-              /* @__PURE__ */ s(_.Canvas, { ref: w, style: { height: "100%" } }),
-              m ? (
+              /* @__PURE__ */ o(U.Canvas, { ref: y, style: { height: "100%" } }),
+              u ? (
                 // Swapped: the mockup IS the stage; the corner chip returns to the
                 // artwork. The canvas stays mounted underneath (no document
                 // teardown), just covered.
-                /* @__PURE__ */ R(
+                /* @__PURE__ */ C(
                   "div",
                   {
                     "data-sc-part": "snowcone-editor-swap-stage",
@@ -1022,24 +1115,24 @@ function ht({
                       padding: 8
                     },
                     children: [
-                      /* @__PURE__ */ s(
-                        _.Preview,
+                      /* @__PURE__ */ o(
+                        U.Preview,
                         {
                           mockupId: v,
                           alt: "Product mockup",
-                          fallback: /* @__PURE__ */ s("div", { "aria-busy": "true", children: "Rendering…" }),
+                          fallback: /* @__PURE__ */ o("div", { "aria-busy": "true", children: "Rendering…" }),
                           style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain", borderRadius: 12 }
                         }
                       ),
-                      /* @__PURE__ */ s(
+                      /* @__PURE__ */ o(
                         "button",
                         {
                           type: "button",
                           "aria-label": "Back to artwork",
                           "data-sc-part": "snowcone-editor-swap-back",
-                          onClick: () => f(!1),
+                          onClick: () => m(!1),
                           style: {
-                            ...h,
+                            ...x,
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
@@ -1054,20 +1147,20 @@ function ht({
                     ]
                   }
                 )
-              ) : /* @__PURE__ */ s(
+              ) : /* @__PURE__ */ o(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Show product mockup",
                   "data-sc-part": "snowcone-editor-pip",
-                  onClick: () => f(!0),
-                  style: h,
-                  children: /* @__PURE__ */ s(
-                    _.Preview,
+                  onClick: () => m(!0),
+                  style: x,
+                  children: /* @__PURE__ */ o(
+                    U.Preview,
                     {
                       mockupId: v,
                       alt: "Product mockup preview",
-                      fallback: /* @__PURE__ */ s("span", { style: { fontSize: 10, opacity: 0.5 }, "aria-busy": "true", children: "mockup…" }),
+                      fallback: /* @__PURE__ */ o("span", { style: { fontSize: 10, opacity: 0.5 }, "aria-busy": "true", children: "mockup…" }),
                       style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
                     }
                   )
@@ -1076,15 +1169,15 @@ function ht({
             ]
           }
         ),
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ C(
           "div",
           {
             "data-sc-part": "snowcone-editor-zone",
-            "data-sc-zone-state": g ? "selected" : "idle",
+            "data-sc-zone-state": b ? "selected" : "idle",
             style: { flexShrink: 0, padding: "4px 16px 14px" },
             children: [
-              /* @__PURE__ */ s("div", { style: { display: g ? void 0 : "none" }, children: /* @__PURE__ */ s(_.Controls, { placement: "docked" }) }),
-              g ? null : /* @__PURE__ */ s(pt, {})
+              /* @__PURE__ */ o("div", { style: { display: b ? void 0 : "none" }, children: /* @__PURE__ */ o(U.Controls, { placement: "docked" }) }),
+              b ? null : /* @__PURE__ */ o(vt, {})
             ]
           }
         )
@@ -1092,41 +1185,42 @@ function ht({
     }
   );
 }
-function $t(t) {
+function Vt(t) {
   const {
     onAddToCart: e,
     defaultQuantity: n,
     title: r = "Editor",
-    height: o = 480,
+    height: s = 480,
     className: a,
-    style: c,
-    ...u
+    style: d,
+    ...c
   } = t;
-  return /* @__PURE__ */ s(_.Root, { ...u, children: /* @__PURE__ */ s(
-    ht,
+  return /* @__PURE__ */ o(U.Root, { ...c, children: /* @__PURE__ */ o(
+    Et,
     {
       title: r,
-      height: o,
-      mockupIds: u.product.mockupIds,
+      height: s,
+      mockupIds: c.product.mockupIds,
       onAddToCart: e,
       ...typeof n == "number" ? { defaultQuantity: n } : {},
       className: a,
-      style: c
+      style: d
     }
   ) });
 }
-Oe();
+_e();
 export {
-  _ as E,
-  Ot as R,
-  $t as S,
-  Ct as a,
-  Nt as b,
-  le as c,
-  lt as d,
-  Tt as e,
-  dt as f,
-  G as u,
-  We as v
+  U as E,
+  Dt as R,
+  Vt as S,
+  $t as a,
+  At as b,
+  me as c,
+  pt as d,
+  Bt as e,
+  ht as f,
+  Lt as p,
+  Q as u,
+  Ye as v
 };
-//# sourceMappingURL=embed-QBZkgWDr.js.map
+//# sourceMappingURL=embed-8ecUMMH-.js.map