@snowcone-app/canvas 0.17.0 → 0.17.2

package/dist/{embed-Bdj4PKUA.js → embed-32ZVWfmj.js}

@@ -1,16 +1,15 @@
-import { C as Ee, e as Re } from "./UnifiedFontService-BAtqqkU4.js";
-import { y as x } from "./HybridHistoryManager-Bht98XRv.js";
+import { C as Ee, e as Re } from "./UnifiedFontService-Dsu5cwfT.js";
+import { y as x } from "./FontAnalyzer-CLv7_msL.js";
 import { jsx as f, jsxs as Q, Fragment as we } from "react/jsx-runtime";
-import { useContext as Z, createContext as ee, useRef as T, useState as O, useMemo as I, useEffect as $, useSyncExternalStore as A, Component as xe, forwardRef as te, useId as ne, useLayoutEffect as re, useCallback as se } from "react";
+import { useContext as Z, createContext as ee, useRef as N, useState as O, useMemo as I, useEffect as $, useSyncExternalStore as L, Component as xe, forwardRef as te, useId as re, useLayoutEffect as ne, useCallback as se } from "react";
 import { assertVariantSelected as ie, RenderSession as Se, createCartDetail as Ie } from "@snowcone-app/sdk";
-import { u as Ce, p as Ne } from "./usePieceGuideBundle-CGERAQJl.js";
-import { E as R, i as Te, a as ae } from "./editorError-DMENTZ-3.js";
-import { r as oe } from "./editorErrors-DbIEtCTt.js";
-import { l as X, i as Oe, s as le } from "./template-fields-GOM4MNfq.js";
-import "./EditorContext-CyanYzo2.js";
-import "./CanvasStateV1-C6i6vU6p.js";
+import { g as R, i as Ce, h as ae, B as Te, E as Ne } from "./EditorContext-CGkfmbgo.js";
+import { u as Oe, p as ke } from "./usePieceGuideBundle-C1ipFnZd.js";
+import { r as oe } from "./editorErrors-BY4Pdg7a.js";
+import { l as X, i as _e, s as le } from "./template-fields-Z9x13sjM.js";
+import "./CanvasStateV1-BG2hEc3-.js";
 const de = ee(void 0);
-function L() {
+function A() {
   const t = Z(de);
   if (!t)
     throw new Error(
@@ -18,42 +17,42 @@ function L() {
     );
   return t;
 }
-const ke = "[RealtimeEmbed]";
-function _e(t) {
-  var r, s;
-  if ((r = t == null ? void 0 : t.requiredPlacements) != null && r.length)
+const $e = "[RealtimeEmbed]";
+function Be(t) {
+  var n, s;
+  if ((n = t == null ? void 0 : t.requiredPlacements) != null && n.length)
     return t.requiredPlacements.filter((a) => !a.autoFilledByVariant).map((a) => a.label);
   const e = new Set(
     (((s = t == null ? void 0 : t.options) == null ? void 0 : s.combinations) ?? []).map((a) => a.variantId).filter((a) => typeof a == "string" && a !== "")
   );
   return !!(t != null && t.variantId) || e.size > 1 ? [] : (t == null ? void 0 : t.placements) ?? [];
 }
-function ue({ shop: t, product: e, design: n, hasGrant: r }) {
-  var m, d;
+function ue({ shop: t, product: e, design: r, hasGrant: n }) {
+  var c, d;
   const s = [];
   if (t || s.push({
     severity: "error",
     issue: "missing-shop",
     message: "`shop` is required (your publishable shop id)."
-  }), r || s.push({
+  }), n || s.push({
     severity: "error",
     issue: "missing-grant",
     message: "no grant source — pass `grantUrl` (a proxy to mintRealtimeGrant) or `grant`. Without it the session can never authorize and no mockup renders."
-  }), (m = e == null ? void 0 : e.mockupIds) != null && m.length || s.push({
+  }), (c = e == null ? void 0 : e.mockupIds) != null && c.length || s.push({
     severity: "error",
     issue: "empty-mockup-ids",
     message: 'product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].'
   }), e != null && e.options)
     try {
       ie(e);
-    } catch (c) {
+    } catch (m) {
       s.push({
         severity: "error",
         issue: "variant-required",
-        message: c instanceof Error ? c.message : String(c)
+        message: m instanceof Error ? m.message : String(m)
       });
     }
-  const a = n.toJSON(), l = a.activeArtboard, i = _e(e);
+  const a = r.toJSON(), l = a.activeArtboard, i = Be(e);
   i.length > 1 && s.push({
     severity: "error",
     issue: "multi-placement",
@@ -63,16 +62,16 @@ function ue({ shop: t, product: e, design: n, hasGrant: r }) {
     issue: "placement-mismatch",
     message: `the design's placement "${l}" is not in product.placements [${e.placements.join(", ")}]. The canvas artboard name and renderState placement must equal a real product placement label, or the server renders a blank mockup. Fix the \`name\` passed to design({ name }).`
   });
-  const o = a.elements.map((c) => c.name).filter((c) => !!c), u = o.filter((c, y) => o.indexOf(c) !== y);
+  const o = a.elements.map((m) => m.name).filter((m) => !!m), u = o.filter((m, y) => o.indexOf(m) !== y);
   return u.length && s.push({
     severity: "warn",
     issue: "duplicate-layer-names",
     message: `duplicate layer name(s) [${[...new Set(u)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
   }), s;
 }
-function $e(t) {
+function Fe(t) {
   for (const e of ue(t))
-    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ke} ${e.message}`);
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${$e} ${e.message}`);
 }
 function j(t) {
   return t.text;
@@ -80,15 +79,15 @@ function j(t) {
 function _(t) {
   return t.name;
 }
-class Be {
+class De {
   constructor(e) {
-    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (r) => (this.listeners.add(r), () => this.listeners.delete(r)), this.state = e;
-    const n = /* @__PURE__ */ new Map();
-    for (const r of e.elements) {
-      const s = _(r), a = j(r);
-      s && typeof a == "string" && n.set(s, a);
+    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (n) => (this.listeners.add(n), () => this.listeners.delete(n)), this.state = e;
+    const r = /* @__PURE__ */ new Map();
+    for (const n of e.elements) {
+      const s = _(n), a = j(n);
+      s && typeof a == "string" && r.set(s, a);
     }
-    this.seedTextByName = n;
+    this.seedTextByName = r;
   }
   /** Replace the whole state (the canvas `onChange` path). */
   setState(e) {
@@ -100,14 +99,14 @@ class Be {
   }
   /** Current text of a named text layer, or undefined when absent. */
   textOf(e) {
-    const n = this.state.elements.find((r) => _(r) === e);
-    return n ? j(n) : void 0;
+    const r = this.state.elements.find((n) => _(n) === e);
+    return r ? j(r) : void 0;
   }
   /** Kind of the named layer in the CURRENT state ('text' | 'image' | null
    *  for unbindable), or undefined when no layer has the name. */
   layerKindOf(e) {
-    const n = this.state.elements.find((r) => _(r) === e);
-    return n ? X(n) : void 0;
+    const r = this.state.elements.find((n) => _(n) === e);
+    return r ? X(r) : void 0;
   }
   /** Names of bindable layers in the current state, for error messages. */
   bindableLayerNames() {
@@ -118,10 +117,10 @@ class Be {
    * one, writes route through the editor command path and arrive back here
    * via `setState`). Immutable update; last-write-wins.
    */
-  updateTextLayer(e, n) {
-    let r = !1;
-    const s = this.state.elements.map((a) => _(a) !== e ? a : (r = !0, { ...a, text: n }));
-    if (!r)
+  updateTextLayer(e, r) {
+    let n = !1;
+    const s = this.state.elements.map((a) => _(a) !== e ? a : (n = !0, { ...a, text: r }));
+    if (!n)
       throw new R(
         "E_LAYER_NOT_FOUND",
         `no layer "${e}" in the current design state. Bindable layers: ${JSON.stringify(this.bindableLayerNames())}.`,
@@ -130,21 +129,22 @@ class Be {
     this.setState({ ...this.state, elements: s });
   }
   /** ≥1 element with visible content (completeness rule C4): non-empty text,
-   *  an image with a URL, or a shape. */
+   *  an image with a URL, or a shape. Hidden elements don't count. */
   hasRenderableElement() {
     return this.state.elements.some((e) => {
-      const n = e.transformType;
-      if (n === "image") return !!e.imageUrl;
-      if (n === "shape" || n === "group" || n === "path") return !0;
-      const r = j(e);
-      return typeof r == "string" && r.trim().length > 0;
+      if (e.visible === !1) return !1;
+      const r = e.transformType;
+      if (r === "image") return !!e.imageUrl;
+      if (r === "shape" || r === "group" || r === "path") return !0;
+      const n = j(e);
+      return typeof n == "string" && n.trim().length > 0;
     });
   }
   emit() {
     for (const e of [...this.listeners]) e();
   }
 }
-class De {
+class Ue {
   constructor() {
     this.canvasIds = /* @__PURE__ */ new Set(), this.requirements = /* @__PURE__ */ new Map(), this.textFields = /* @__PURE__ */ new Map(), this.bridge = null, this.listeners = /* @__PURE__ */ new Set(), this.version = 0, this.getVersion = () => this.version, this.subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e));
   }
@@ -158,8 +158,8 @@ class De {
   }
   /** Declare that a part is meaningless without a mounted Canvas (ADR-0085 §4
    *  table). Validated by Root once per commit. */
-  requireCanvas(e, n) {
-    return this.requirements.set(e, n), this.bump(), () => {
+  requireCanvas(e, r) {
+    return this.requirements.set(e, r), this.bump(), () => {
       this.requirements.delete(e), this.bump();
     };
   }
@@ -182,8 +182,8 @@ class De {
       );
     }
   }
-  registerTextField(e, n) {
-    return this.textFields.set(e, n), this.bump(), () => {
+  registerTextField(e, r) {
+    return this.textFields.set(e, r), this.bump(), () => {
       this.textFields.delete(e), this.bump();
     };
   }
@@ -192,6 +192,15 @@ class De {
   getTextFields() {
     return [...this.textFields.values()];
   }
+  /** Bound-layer lookup for the mutation guard (ADR-0085 §3 /
+   *  `E_BOUND_LAYER_MUTATION`): a layer is bound while ANY mounted
+   *  `Editor.TextField` carries its name. Satisfies `BoundLayerGuard`
+   *  structurally (subscribe/getVersion above). */
+  getBoundLayer(e) {
+    for (const r of this.textFields.values())
+      if (r.name === e) return { part: "Editor.TextField" };
+    return null;
+  }
   registerCanvasBridge(e) {
     return this.bridge = e, this.bump(), () => {
       this.bridge === e && (this.bridge = null), this.bump();
@@ -206,7 +215,7 @@ class De {
   }
 }
 const ce = ee(null);
-function G(t) {
+function K(t) {
   const e = Z(ce);
   if (!e)
     throw new R(
@@ -216,10 +225,10 @@ function G(t) {
     );
   return e;
 }
-function Fe(t) {
+function Le(t) {
   return {
     reportInvariant(e) {
-      if (Te()) throw e;
+      if (Ce()) throw e;
       t(e);
     },
     reportRuntimeError(e) {
@@ -228,17 +237,17 @@ function Fe(t) {
   };
 }
 const me = 8e3;
-function Ue(t) {
+function Ae(t) {
   return `[RealtimeEmbed] No mockup after ${Math.round(me / 1e3)}s. Common causes: a variant product missing \`variantId\` (pass \`product.options\` so the embed can flag it up front), a multi-placement product (the server waits for every required placement but <RealtimeEmbed> sends only "${t}" — pass \`product.requiredPlacements\` so this is flagged at mount; such products need the eject path), an unreachable or non-public asset URL in the design, or the placement "${t}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
 }
-function Ae(t) {
+function qe(t) {
   if ("grantUrl" in t && t.grantUrl)
     return { grantUrl: t.grantUrl };
   const e = t.grant;
   return typeof e == "function" ? { getToken: e } : { getToken: () => Promise.resolve(e) };
 }
 function fe({ error: t, onRetry: e }) {
-  const n = ae(t) ? t.code : "EDITOR_ERROR";
+  const r = ae(t) ? t.code : "EDITOR_ERROR";
   return /* @__PURE__ */ Q(
     "div",
     {
@@ -257,7 +266,7 @@ function fe({ error: t, onRetry: e }) {
       children: [
         /* @__PURE__ */ Q("p", { style: { margin: 0, fontWeight: 700 }, children: [
           "Editor failed: ",
-          n
+          r
         ] }),
         /* @__PURE__ */ f("p", { style: { margin: "4px 0 0" }, children: t.message }),
         e ? /* @__PURE__ */ f(
@@ -284,7 +293,7 @@ function fe({ error: t, onRetry: e }) {
     }
   );
 }
-class Le extends xe {
+class Me extends xe {
   constructor() {
     super(...arguments), this.state = { caught: null };
   }
@@ -292,44 +301,44 @@ class Le extends xe {
     return { caught: e };
   }
   componentDidCatch(e) {
-    var n;
-    oe(e), typeof x < "u" && ((n = x.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+    var r;
+    oe(e), typeof x < "u" && ((r = x.env) == null ? void 0 : r.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
   }
   render() {
     return this.state.caught ? /* @__PURE__ */ f(fe, { error: this.state.caught }) : this.props.children;
   }
 }
-function qe({ reportedError: t, onRetry: e, children: n }) {
+function Ve({ reportedError: t, onRetry: e, children: r }) {
   if (t) {
-    const r = ae(t) && t.code === "E_CHUNK_LOAD_FAILED";
-    return /* @__PURE__ */ f(fe, { error: t, onRetry: r ? e : void 0 });
+    const n = ae(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ f(fe, { error: t, onRetry: n ? e : void 0 });
   }
-  return /* @__PURE__ */ f(Le, { reportedError: null, onRetry: e, children: n });
+  return /* @__PURE__ */ f(Me, { reportedError: null, onRetry: e, children: r });
 }
-function Me(t) {
+function Pe(t) {
   const {
     shop: e,
-    product: n,
-    design: r,
+    product: r,
+    design: n,
     throttleMs: s = 200,
     onMockups: a,
     onRenderError: l,
     wsUrl: i,
     services: o,
     children: u,
-    internals: m,
+    internals: c,
     __validation: d = "throw"
-  } = t, c = I(() => r.toJSON().activeArtboard, [r]), y = Ce(n.variantId ?? n.defaultGvid), g = I(() => {
+  } = t, m = I(() => n.toJSON().activeArtboard, [n]), y = Oe(r.variantId ?? r.defaultGvid), g = I(() => {
     if (!y) return null;
-    const h = r.toJSON().artboards[0];
-    return Ne(y, h) ?? null;
-  }, [y, r]), b = T(a), p = T(l);
+    const h = n.toJSON().artboards[0];
+    return ke(y, h) ?? null;
+  }, [y, n]), b = N(a), p = N(l);
   b.current = a, p.current = l;
-  const [S, q] = O([]), [C, N] = O(!0), [H, B] = O(null), M = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), V = Ae(t), ye = "grantUrl" in V ? V.grantUrl : "getToken", W = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, D = `${e}|${W}|${c}|${M}`;
+  const [S, q] = O([]), [C, T] = O(!0), [H, B] = O(null), M = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), V = qe(t), ye = "grantUrl" in V ? V.grantUrl : "getToken", W = `${r.productId}|${r.mockupIds.join(",")}|${r.variantId ?? ""}`, F = `${e}|${W}|${m}|${M}`;
   I(() => {
     var E;
     if (d !== "throw") return;
-    const h = ue({ shop: e, product: n, design: r, hasGrant: M }), v = h.find((k) => k.severity === "error");
+    const h = ue({ shop: e, product: r, design: n, hasGrant: M }), v = h.find((k) => k.severity === "error");
     if (v)
       throw new R("E_EMBED_CONFIG", v.message, {
         issue: v.issue,
@@ -337,116 +346,116 @@ function Me(t) {
       });
     for (const k of h)
       typeof x < "u" && ((E = x.env) == null ? void 0 : E.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${k.message}`);
-  }, [D, d]);
-  const z = T(null);
+  }, [F, d]);
+  const z = N(null);
   $(() => {
     var h;
     if (d === "warn" && typeof x < "u" && ((h = x.env) == null ? void 0 : h.NODE_ENV) !== "production") {
-      if (z.current === D) return;
-      z.current = D, $e({ shop: e, product: n, design: r, hasGrant: M });
+      if (z.current === F) return;
+      z.current = F, Fe({ shop: e, product: r, design: n, hasGrant: M });
     }
-  }, [D, d]);
-  const F = I(
+  }, [F, d]);
+  const D = I(
     () => {
       try {
-        return { session: new Se({ shop: e, product: n, wsUrl: i, ...V }) };
+        return { session: new Se({ shop: e, product: r, wsUrl: i, ...V }) };
       } catch (h) {
         return { error: h instanceof Error ? h.message : String(h) };
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [e, W, c, i, ye]
-  ), w = "session" in F ? F.session : null, U = "error" in F ? F.error : null, P = I(() => (h, v = s) => {
-    w && (B(null), N(!0), w.renderState(c, h, v).catch((E) => {
+    [e, W, m, i, ye]
+  ), w = "session" in D ? D.session : null, U = "error" in D ? D.error : null, P = I(() => (h, v = s) => {
+    w && (B(null), T(!0), w.renderState(m, h, v).catch((E) => {
       var Y;
       const k = E instanceof Error ? E.message : String(E);
-      B(k), N(!1), (Y = p.current) == null || Y.call(p, k);
+      B(k), T(!1), (Y = p.current) == null || Y.call(p, k);
     }));
-  }, [w, c, s]);
+  }, [w, m, s]);
   $(() => {
     var h;
     if (U) {
-      B(U), N(!1), (h = p.current) == null || h.call(p, U);
+      B(U), T(!1), (h = p.current) == null || h.call(p, U);
       return;
     }
     if (w)
       return w.onMockups((v) => {
         var E;
-        q(v), N(!1), (E = b.current) == null || E.call(b, v);
+        q(v), T(!1), (E = b.current) == null || E.call(b, v);
       }), w.onError((v) => {
         var E;
-        B(v), N(!1), (E = p.current) == null || E.call(p, v);
-      }), P(r.toServerRequest()), () => w.close();
+        B(v), T(!1), (E = p.current) == null || E.call(p, v);
+      }), P(n.toServerRequest()), () => w.close();
   }, [w, U]), $(() => {
     var v;
     if (!C || typeof x > "u" || ((v = x.env) == null ? void 0 : v.NODE_ENV) === "production") return;
-    const h = setTimeout(() => console.warn(Ue(c)), me);
+    const h = setTimeout(() => console.warn(Ae(m)), me);
     return () => clearTimeout(h);
-  }, [C, c]);
+  }, [C, m]);
   const ve = I(
     () => ({
       session: w,
-      design: r,
-      placement: c,
-      product: n,
+      design: n,
+      placement: m,
+      product: r,
       mockups: S,
       isRendering: C,
       error: H,
       throttleMs: s,
       pieceGuides: g,
       pushRender: P,
-      stateStore: m.store
+      stateStore: c.store
     }),
-    [w, r, c, n, S, C, H, s, g, P, m.store]
-  ), be = A(
-    m.registry.subscribe,
-    m.registry.getVersion,
-    m.registry.getVersion
+    [w, n, m, r, S, C, H, s, g, P, c.store]
+  ), be = L(
+    c.registry.subscribe,
+    c.registry.getVersion,
+    c.registry.getVersion
   );
-  I(() => m.registry.validate(), [m.registry, be]);
-  const J = /* @__PURE__ */ f(ce.Provider, { value: m, children: /* @__PURE__ */ f(de.Provider, { value: ve, children: u }) });
+  I(() => c.registry.validate(), [c.registry, be]);
+  const J = /* @__PURE__ */ f(ce.Provider, { value: c, children: /* @__PURE__ */ f(de.Provider, { value: ve, children: /* @__PURE__ */ f(Te.Provider, { value: c.registry, children: /* @__PURE__ */ f(Ne, { children: u }) }) }) });
   return o ? /* @__PURE__ */ f(Ee, { services: o, children: J }) : J;
 }
 function he(t) {
-  const { design: e } = t, n = T(null), [r, s] = O(null);
-  (n.current === null || n.current.design !== e) && (n.current = {
+  const { design: e } = t, r = N(null), [n, s] = O(null);
+  (r.current === null || r.current.design !== e) && (r.current = {
     design: e,
     internals: {
-      store: new Be(e.toJSON()),
-      registry: new De()
+      store: new De(e.toJSON()),
+      registry: new Ue()
     }
   });
   const a = I(
     () => ({
-      ...n.current.internals,
-      ...Fe(s)
+      ...r.current.internals,
+      ...Le(s)
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [n.current.internals]
+    [r.current.internals]
   );
   return (
     // `display: contents` — the .sc-root scope without a layout box, so the
     // host's grid/flex sees the parts directly (and the legacy RealtimeEmbed
     // wrapper, which had no DOM at all, stays layout-identical).
-    /* @__PURE__ */ f("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ f(qe, { reportedError: r, onRetry: () => s(null), children: /* @__PURE__ */ f(Me, { ...t, internals: a }) }) })
+    /* @__PURE__ */ f("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ f(Ve, { reportedError: n, onRetry: () => s(null), children: /* @__PURE__ */ f(Pe, { ...t, internals: a }) }) })
   );
 }
-let Ve = () => import("./EditorCanvasImpl-DkgE5-C2.js").then((t) => t.EditorCanvasImpl);
+let je = () => import("./EditorCanvasImpl-DgXvuWXX.js").then((t) => t.EditorCanvasImpl);
 function ge() {
-  return Ve();
+  return je();
 }
-const Pe = te(function({ children: e, maxHeight: n, className: r, style: s }, a) {
-  const l = G("Editor.Canvas"), i = ne();
-  re(() => l.registry.registerCanvas(i), [l.registry, i]);
+const Ge = te(function({ children: e, maxHeight: r, className: n, style: s }, a) {
+  const l = K("Editor.Canvas"), i = re();
+  ne(() => l.registry.registerCanvas(i), [l.registry, i]);
   const [o, u] = O(null);
   return $(() => {
-    let m = !1;
+    let c = !1;
     return ge().then(
       (d) => {
-        m || u(() => d);
+        c || u(() => d);
       },
       (d) => {
-        m || l.reportRuntimeError(
+        c || l.reportRuntimeError(
           new R(
             "E_CHUNK_LOAD_FAILED",
             `the editor's rendering chunk failed to load (${d instanceof Error ? d.message : String(d)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
@@ -455,45 +464,45 @@ const Pe = te(function({ children: e, maxHeight: n, className: r, style: s }, a)
         );
       }
     ), () => {
-      m = !0;
+      c = !0;
     };
-  }, [l]), o ? /* @__PURE__ */ f(o, { ref: a, kit: "embed-only", partAttr: "canvas", maxHeight: n, className: r, style: s, children: e }) : /* @__PURE__ */ f(
+  }, [l]), o ? /* @__PURE__ */ f(o, { ref: a, kit: "embed-only", partAttr: "canvas", maxHeight: r, className: n, style: s, children: e }) : /* @__PURE__ */ f(
     "div",
     {
       "data-sc-part": "canvas",
       "data-sc-state": "loading",
-      className: r,
-      style: { minHeight: n ?? 200, ...s },
+      className: n,
+      style: { minHeight: r ?? 200, ...s },
       "aria-busy": "true"
     }
   );
-}), je = 1.2, K = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
-function Ke(t) {
-  for (const e of K)
+}), Ke = 1.2, G = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function He(t) {
+  for (const e of G)
     if (e >= t) return e;
-  return K[K.length - 1];
+  return G[G.length - 1];
 }
-function Ge(t, e) {
-  if (!(t > 0) || !(e > 0) || e <= t * je) return null;
-  const n = Ke(e);
-  return `[RealtimeMockup] mockup rendered at ${t}px but displayed at ~${e} device px — the preview will look soft. Pass \`product.width\` (e.g. ${n}) on the embed for a crisp preview.`;
+function We(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * Ke) return null;
+  const r = He(e);
+  return `[RealtimeMockup] mockup rendered at ${t}px but displayed at ~${e} device px — the preview will look soft. Pass \`product.width\` (e.g. ${r}) on the embed for a crisp preview.`;
 }
 function pe({
   mockupId: t,
   fallback: e = null,
-  alt: n = "Live product mockup",
-  className: r,
+  alt: r = "Live product mockup",
+  className: n,
   style: s
 }) {
-  const { mockups: a } = L(), l = T(/* @__PURE__ */ new Set()), i = t ? a.find((u) => u.mockupId === t && u.imageUrl) : a.find((u) => u.imageUrl);
+  const { mockups: a } = A(), l = N(/* @__PURE__ */ new Set()), i = t ? a.find((u) => u.mockupId === t && u.imageUrl) : a.find((u) => u.imageUrl);
   if (!(i != null && i.imageUrl))
     return /* @__PURE__ */ f(we, { children: e });
   const o = (u) => {
     var g;
     if (typeof x > "u" || ((g = x.env) == null ? void 0 : g.NODE_ENV) === "production" || typeof window > "u" || l.current.has(i.mockupId)) return;
-    const m = u.currentTarget, d = m.getBoundingClientRect().width;
+    const c = u.currentTarget, d = c.getBoundingClientRect().width;
     if (d <= 0) return;
-    const c = Math.round(d * (window.devicePixelRatio || 1)), y = Ge(m.naturalWidth, c);
+    const m = Math.round(d * (window.devicePixelRatio || 1)), y = We(c.naturalWidth, m);
     y && (l.current.add(i.mockupId), console.warn(y));
   };
   return (
@@ -503,17 +512,17 @@ function pe({
       {
         "data-sc-part": "preview",
         src: i.imageUrl,
-        alt: n,
-        className: r,
+        alt: r,
+        className: n,
         style: s,
         onLoad: o
       }
     )
   );
 }
-function He(t) {
-  const { layer: e, optional: n = !1, placeholder: r, className: s, style: a } = t, l = G("Editor.TextField"), { pushRender: i, throttleMs: o, stateStore: u } = L(), m = ne(), d = T(null);
-  if (!Oe(e))
+function ze(t) {
+  const { layer: e, optional: r = !1, placeholder: n, className: s, style: a } = t, l = K("Editor.TextField"), { pushRender: i, throttleMs: o, stateStore: u } = A(), c = re(), d = N(null);
+  if (!_e(e))
     throw new R(
       "E_LAYER_TOKEN_REQUIRED",
       `the \`layer\` prop must be a token minted by the design — pass layer={design.layer("name")}, not ${typeof e == "string" ? `the bare string "${e}"` : "a plain value"}. Tokens validate the name against the design's layers at mint time.`,
@@ -535,8 +544,8 @@ function He(t) {
       );
     d.current = e.name;
   }
-  re(() => l.registry.registerTextField(m, { name: e.name, optional: n }), [l.registry, m, e.name, n]);
-  const c = A(
+  ne(() => l.registry.registerTextField(c, { name: e.name, optional: r }), [l.registry, c, e.name, r]);
+  const m = L(
     u.subscribe,
     () => u.textOf(e.name) ?? "",
     () => u.textOf(e.name) ?? ""
@@ -563,16 +572,16 @@ function He(t) {
       "data-sc-part": "textfield",
       "data-sc-layer": e.name,
       type: "text",
-      value: c,
+      value: m,
       onChange: y,
-      placeholder: r,
+      placeholder: n,
       "aria-label": t["aria-label"] ?? e.name,
       className: s,
       style: a
     }
   );
 }
-function We(t) {
+function Je(t) {
   const e = [];
   if (t.product.options)
     try {
@@ -580,22 +589,22 @@ function We(t) {
     } catch {
       e.push("variant");
     }
-  for (const n of t.textFields) {
-    if (n.optional) continue;
-    const r = (t.textOf(n.name) ?? "").trim();
-    if (r.length === 0) {
-      e.push(`layer:${n.name}`);
+  for (const r of t.textFields) {
+    if (r.optional) continue;
+    const n = (t.textOf(r.name) ?? "").trim();
+    if (n.length === 0) {
+      e.push(`layer:${r.name}`);
       continue;
     }
-    const s = (t.seedTextOf(n.name) ?? "").trim();
-    s.length > 0 && r === s && e.push(`layer-seed:${n.name}`);
+    const s = (t.seedTextOf(r.name) ?? "").trim();
+    s.length > 0 && n === s && e.push(`layer-seed:${r.name}`);
   }
   return t.hasRenderableElement || e.push("empty-design"), (!Number.isInteger(t.quantity) || t.quantity < 1) && e.push("quantity"), e;
 }
-function ze(t, e) {
-  const n = t.options, r = n == null ? void 0 : n.combinations;
-  if (!n || !(r != null && r.length)) return null;
-  const s = r.find((i) => i.variantId && i.variantId === t.variantId) ?? r[0];
+function Ye(t, e) {
+  const r = t.options, n = r == null ? void 0 : r.combinations;
+  if (!r || !(n != null && n.length)) return null;
+  const s = n.find((i) => i.variantId && i.variantId === t.variantId) ?? n[0];
   if (!s) return null;
   const a = {};
   for (const [i, o] of Object.entries(s))
@@ -603,108 +612,108 @@ function ze(t, e) {
   const l = Object.fromEntries(
     Object.keys(a).map((i) => [
       i,
-      { key: i, affectsCombinations: !0, choices: [...new Set(r.map((o) => String(o[i] ?? "")))] }
+      { key: i, affectsCombinations: !0, choices: [...new Set(n.map((o) => String(o[i] ?? "")))] }
     ])
   );
   return Ie({
     productId: t.productId,
     quantity: e,
     selection: a,
-    combinations: r,
+    combinations: n,
     attributes: l
   });
 }
-function Je(t) {
-  const { onAddToCart: e, quantity: n = 1, children: r, className: s, style: a } = t, l = G("Editor.Buy"), { product: i, stateStore: o } = L();
+function Qe(t) {
+  const { onAddToCart: e, quantity: r = 1, children: n, className: s, style: a } = t, l = K("Editor.Buy"), { product: i, stateStore: o } = A();
   if (!(i != null && i.productId))
     throw new R(
       "E_BUY_NO_PRODUCT",
       "<Editor.Buy> has no product context — pass `product` (with `productId`) on <Editor.Root product={…}>. Buy assembles its cart payload from the Root product and the live design state.",
       { docSlug: "embed-mode" }
     );
-  const u = A(o.subscribe, o.getState, o.getState), m = A(
+  const u = L(o.subscribe, o.getState, o.getState), c = L(
     l.registry.subscribe,
     l.registry.getVersion,
     l.registry.getVersion
   ), d = I(
-    () => We({
+    () => Je({
       product: i,
-      quantity: n,
+      quantity: r,
       textFields: l.registry.getTextFields(),
       textOf: (S) => o.textOf(S),
       seedTextOf: (S) => o.seedTextOf(S),
       hasRenderableElement: o.hasRenderableElement()
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [i, n, u, m]
-  ), c = d.length === 0, [y, g] = O(!1), b = T(!1), p = se(() => {
-    if (b.current || !c) return;
+    [i, r, u, c]
+  ), m = d.length === 0, [y, g] = O(!1), b = N(!1), p = se(() => {
+    if (b.current || !m) return;
     b.current = !0, g(!0);
     const S = o.getState(), q = {
       productId: i.productId,
       ...i.variantId ? { variantId: i.variantId } : {},
-      quantity: n,
-      cartDetail: ze(i, n),
+      quantity: r,
+      cartDetail: Ye(i, r),
       designState: S,
       serverRequest: le(S)
     };
     let C;
     try {
       C = e(q);
-    } catch (N) {
-      throw b.current = !1, g(!1), N;
+    } catch (T) {
+      throw b.current = !1, g(!1), T;
     }
     Promise.resolve(C).finally(() => {
       b.current = !1, g(!1);
     });
-  }, [c, i, n, o, e]);
+  }, [m, i, r, o, e]);
   return /* @__PURE__ */ f(
     "button",
     {
       type: "button",
       "data-sc-part": "buy",
-      "data-sc-buy-state": y ? "busy" : c ? "ready" : "incomplete",
+      "data-sc-buy-state": y ? "busy" : m ? "ready" : "incomplete",
       "data-sc-buy-missing": d.join(",") || void 0,
-      disabled: !c || y,
+      disabled: !m || y,
       "aria-busy": y || void 0,
       onClick: p,
       className: s,
       style: a,
-      children: r ?? "Add to cart"
+      children: n ?? "Add to cart"
     }
   );
 }
-const ot = {
+const lt = {
   /** The one provider boundary — session, design, live state, error boundary. */
   Root: he,
   /** The editable artboard (the ONE lazy renderer boundary — D9). */
-  Canvas: Pe,
+  Canvas: Ge,
   /** Live product mockup. ×N under one Root is valid. */
   Preview: pe,
   /** Form input bound to a design text layer by typed token (T1). */
-  TextField: He,
+  TextField: ze,
   /** Smart commerce part: completeness + payload assembly; submit = host callback. */
-  Buy: Je
+  Buy: Qe
 };
-function lt(t) {
+function dt(t) {
   return /* @__PURE__ */ f(he, { ...t, __validation: "warn" });
 }
-const dt = te(
-  function(e, n) {
-    const { children: r, className: s, style: a, maxHeight: l, ...i } = e, [o, u] = O(null);
+const ut = te(
+  function(e, r) {
+    const { children: n, className: s, style: a, maxHeight: l, ...i } = e, [o, u] = O(null);
     return $(() => {
-      let m = !1;
+      let c = !1;
       return ge().then(
         (d) => {
-          m || u(() => d);
+          c || u(() => d);
         },
         (d) => {
           console.error("[RealtimeCanvas] failed to load the rendering chunk:", d);
         }
       ), () => {
-        m = !0;
+        c = !0;
       };
-    }, []), o ? /* @__PURE__ */ f(o, { ref: n, selfScope: !0, maxHeight: l, className: s, style: a, ...i, children: r }) : /* @__PURE__ */ f(
+    }, []), o ? /* @__PURE__ */ f(o, { ref: r, selfScope: !0, maxHeight: l, className: s, style: a, ...i, children: n }) : /* @__PURE__ */ f(
       "div",
       {
         className: `sc-root${s ? ` ${s}` : ""}`,
@@ -714,24 +723,24 @@ const dt = te(
     );
   }
 );
-function ut(t) {
+function ct(t) {
   return /* @__PURE__ */ f(pe, { ...t });
 }
-function ct() {
-  const { mockups: t, isRendering: e, error: n } = L();
-  return { mockups: t, isRendering: e, error: n };
+function mt() {
+  const { mockups: t, isRendering: e, error: r } = A();
+  return { mockups: t, isRendering: e, error: r };
 }
 Re();
 export {
-  Be as D,
+  De as D,
   ce as E,
-  dt as R,
-  ot as a,
-  lt as b,
-  ut as c,
+  ut as R,
+  lt as a,
+  dt as b,
+  ct as c,
   ue as d,
-  ct as e,
-  L as u,
-  $e as v
+  mt as e,
+  A as u,
+  Fe as v
 };
-//# sourceMappingURL=embed-Bdj4PKUA.js.map
+//# sourceMappingURL=embed-32ZVWfmj.js.map