@snowcone-app/canvas 0.22.0 → 0.26.0

package/dist/embed-DXGydZOT.js

@@ -0,0 +1,1586 @@
+import { E as Le, o as Ve, p as Be, C as Fe, q as H, r as J, t as Ue, v as Me, w as je, x as qe, y as ze, g as Ke, e as We } from "./UnifiedFontService-Bx2MxFfy.js";
+import { y as L } from "./FontAnalyzer-CwIpgTGd.js";
+import { jsx as l, jsxs as N, Fragment as Ge } from "react/jsx-runtime";
+import { useContext as He, createContext as Je, useRef as x, useState as C, useMemo as O, useCallback as F, useLayoutEffect as Q, useEffect as $, useSyncExternalStore as z, Component as Qe, forwardRef as be, useId as de, memo as Ye, isValidElement as we } from "react";
+import { assertVariantSelected as Xe, RenderSession as Ze, createCartDetail as et } from "@snowcone-app/sdk";
+import { g as T, i as Ee, B as tt, E as nt, r as rt } from "./editorErrors-B2mb1sVN.js";
+import { u as ot, p as it } from "./usePieceGuideBundle-CbJJg66S.js";
+import { s as le, i as st } from "./design-builder-U7Su9MMC.js";
+import { D as at, C as dt, g as lt, e as ct } from "./template-fields-DJ157D3E.js";
+import "./CanvasStateV1-DmZ1Qvvn.js";
+const xe = Je(void 0);
+function K() {
+  const t = He(xe);
+  if (!t)
+    throw new Error(
+      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
+    );
+  return t;
+}
+const ut = "[RealtimeEmbed]";
+function mt(t) {
+  var r, i;
+  if ((r = t == null ? void 0 : t.requiredPlacements) != null && r.length)
+    return t.requiredPlacements.filter((s) => !s.autoFilledByVariant).map((s) => s.label);
+  const e = new Set(
+    (((i = t == null ? void 0 : t.options) == null ? void 0 : i.combinations) ?? []).map((s) => s.variantId).filter((s) => typeof s == "string" && s !== "")
+  );
+  return !!(t != null && t.variantId) || e.size > 1 ? [] : (t == null ? void 0 : t.placements) ?? [];
+}
+function Re({ shop: t, product: e, design: n, hasGrant: r }) {
+  var y, b;
+  const i = [];
+  if (t || i.push({
+    severity: "error",
+    issue: "missing-shop",
+    message: "`shop` is required (your publishable shop id)."
+  }), r || i.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."
+  }), (y = e == null ? void 0 : e.mockupIds) != null && y.length || i.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 {
+      Xe(e);
+    } catch (o) {
+      i.push({
+        severity: "error",
+        issue: "variant-required",
+        message: o instanceof Error ? o.message : String(o)
+      });
+    }
+  const s = n.toJSON(), d = s.artboards.map((o) => o.name), c = mt(e), u = c.filter((o) => !d.includes(o));
+  c.length > 1 && u.length > 0 && i.push({
+    severity: "error",
+    issue: "multi-placement",
+    message: `product ${e.productId} requires placements [${c.join(", ")}] but the design only has artboards [${d.join(", ")}] — missing [${u.join(", ")}]. The render would time out waiting for the missing canvas_states. Add each missing placement to the seed: design(…).artboard('` + u[0] + "', { width, height })… (ADR-0088), or use the eject path — see https://developers.snowcone.app/embed-mode#eject."
+  });
+  const a = (b = e == null ? void 0 : e.placements) != null && b.length ? d.filter((o) => !e.placements.includes(o)) : [];
+  a.length > 0 && i.push({
+    severity: "error",
+    issue: "placement-mismatch",
+    message: `the design's artboard(s) [${a.join(", ")}] are not in product.placements [${e.placements.join(", ")}]. Every artboard name must equal a real product placement label (renderState targets placements by that name), or the server renders a blank mockup. Fix the \`name\` passed to design({ name }) / design().artboard(name, …).`
+  });
+  const p = s.elements.map((o) => o.name).filter((o) => !!o), m = p.filter((o, g) => p.indexOf(o) !== g);
+  return m.length && i.push({
+    severity: "warn",
+    issue: "duplicate-layer-names",
+    message: `duplicate layer name(s) [${[...new Set(m)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+  }), i;
+}
+function ft(t) {
+  for (const e of Re(t))
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ut} ${e.message}`);
+}
+function Se({ registry: t, store: e, product: n }) {
+  const r = [], i = t.getParts(), s = t.getTextFields(), d = t.requiresCanvasPartNames();
+  d.length > 0 && !t.hasCanvas() && r.push({
+    code: "A_REQUIRES_CANVAS",
+    severity: "error",
+    message: `${d.join(", ")} ${d.length === 1 ? "is" : "are"} mounted with no <Editor.Canvas> under this Root — they operate on the editable artboard (selection, editor commands) and throw E_REQUIRES_CANVAS.`,
+    fix: `Mount <Editor.Canvas/> under the same <Editor.Root>, or remove ${d.join(", ")}. Canvas-free parts: Editor.Preview, Editor.Buy, Editor.TextField, Editor.Layers.`
+  });
+  const c = i.filter((o) => o.name === "Editor.Canvas").some((o) => o.meta.floatingToolbar !== !1);
+  t.hasDockedControls() && c && r.push({
+    code: "A_CONTROLS_INERT",
+    severity: "warn",
+    message: "a docked <Editor.Controls> is mounted while <Editor.Canvas> still has floatingToolbar={true} (the default) — both contextual zones are armed, and the floating toolbar is suppressed only as a side effect of the docked Controls being mounted this frame (it silently reappears when the Controls unmounts).",
+    fix: 'Declare contextual-zone ownership in the type surface: pass floatingToolbar={false} on <Editor.Canvas> when a <Editor.Controls placement="docked"> owns the zone.'
+  });
+  const u = (n == null ? void 0 : n.mockupIds) ?? [];
+  if (u.length > 1) {
+    const o = i.filter((g) => g.name === "Editor.Preview" && g.meta.mockupId === void 0);
+    o.length > 0 && r.push({
+      code: "A_PREVIEW_AMBIGUOUS",
+      severity: "warn",
+      message: `${o.length} <Editor.Preview> part${o.length === 1 ? " has" : "s have"} no mockupId while the product renders ${u.length} mockup scenes [${u.join(", ")}] — each shows whichever scene renders first, an ambiguous fan-out.`,
+      fix: `Pin each <Editor.Preview> to a scene: mockupId="${u[0]}" (one of product.mockupIds).`
+    });
+  }
+  const a = i.some((o) => o.name === "Editor.Buy");
+  if (s.length > 0 && !a) {
+    const o = s.map((g) => g.name);
+    r.push({
+      code: "A_NO_BUY",
+      severity: "info",
+      message: `<Editor.TextField> parts are mounted (layers [${o.join(", ")}]) but no <Editor.Buy> — personalization has no commerce gate, so nothing enforces completeness (C2/C3) before the design is bought.`,
+      fix: "Mount <Editor.Buy onAddToCart={…}/> under the same <Editor.Root> (it assembles the payload and gates on completeness), or ignore if this composition is deliberately non-commerce."
+    });
+  }
+  const p = [];
+  for (const o of s)
+    e.layerKindOf(o.name) === void 0 ? r.push({
+      code: "A_LAYER_UNMATCHED",
+      severity: "error",
+      message: `<Editor.TextField layer={design.layer("${o.name}")}> matches zero elements in the current design state — the layer was removed or renamed after the field mounted, so the binding is dead and writes will fail. Bindable layers now: ${JSON.stringify(e.bindableLayerNames())}.`,
+      fix: `Restore a text layer named "${o.name}" to the design, or bind the field to an existing layer: layer={design.layer(<one of ${JSON.stringify(e.bindableLayerNames())}>)}.`
+    }) : p.push(o);
+  const m = p.filter((o) => !o.optional);
+  if (m.length > 0 && m.every((o) => e.textOf(o.name) === e.seedTextOf(o.name))) {
+    const o = m.map((g) => g.name);
+    r.push({
+      code: "A_TEXT_AT_SEED",
+      severity: "info",
+      message: `every required <Editor.TextField> still equals its seed value (layers [${o.join(", ")}]) — <Editor.Buy>'s completeness rule C3 gates checkout until the shopper's text differs from the seed (placeholder text must not be bought).`,
+      fix: "Nothing to change for a fresh mount — this clears when the shopper edits the fields. For a field that should NOT gate Buy, pass optional on that <Editor.TextField>."
+    });
+  }
+  e.hasRenderableElement() || r.push({
+    code: "A_EMPTY_DESIGN",
+    severity: "warn",
+    message: "the design state has zero renderable elements (no non-empty text, no image with a URL, no shape) — every mockup renders blank.",
+    fix: "Seed content on the builder passed to <Editor.Root design={…}> — design({…}).text(…)/.background(…)/.shape(…) — or add elements through <Editor.Add>."
+  });
+  const y = /* @__PURE__ */ new Map();
+  for (const o of i) y.set(o.name, (y.get(o.name) ?? 0) + 1);
+  const b = [...y.entries()].map(([o, g]) => ({ name: o, count: g })).sort((o, g) => o.name.localeCompare(g.name));
+  return { findings: r, parts: b };
+}
+const G = [];
+function pt(t) {
+  return G.push(t), () => {
+    const e = G.indexOf(t);
+    e !== -1 && G.splice(e, 1);
+  };
+}
+function rn() {
+  const t = G[G.length - 1];
+  if (!t)
+    throw new T(
+      "E_AUDIT_NO_ROOT",
+      "auditEditor() found no mounted <Editor.Root>. Mount a Root first — or, to audit at mount time, pass onAudit on the Root: <Editor.Root onAudit={(report) => …}>.",
+      { docSlug: "embed-mode" }
+    );
+  return t.compute();
+}
+const ke = 8e3;
+function ht(t) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(ke / 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 gt(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 Ce({ error: t, onRetry: e }) {
+  const n = Ee(t) ? t.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ N(
+    "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__ */ N("p", { style: { margin: 0, fontWeight: 700 }, children: [
+          "Editor failed: ",
+          n
+        ] }),
+        /* @__PURE__ */ l("p", { style: { margin: "4px 0 0" }, children: t.message }),
+        e ? /* @__PURE__ */ l(
+          "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 yt extends Qe {
+  constructor() {
+    super(...arguments), this.state = { caught: null };
+  }
+  static getDerivedStateFromError(e) {
+    return { caught: e };
+  }
+  componentDidCatch(e) {
+    var n;
+    rt(e), typeof L < "u" && ((n = L.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+  }
+  render() {
+    return this.state.caught ? /* @__PURE__ */ l(Ce, { error: this.state.caught }) : this.props.children;
+  }
+}
+function vt({ reportedError: t, onRetry: e, children: n }) {
+  if (t) {
+    const r = Ee(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ l(Ce, { error: t, onRetry: r ? e : void 0 });
+  }
+  return /* @__PURE__ */ l(yt, { reportedError: null, onRetry: e, children: n });
+}
+function bt(t) {
+  const {
+    shop: e,
+    product: n,
+    design: r,
+    throttleMs: i = 200,
+    onMockups: s,
+    onRenderError: d,
+    onIssue: c,
+    wsUrl: u,
+    services: a,
+    children: p,
+    internals: m,
+    recordAudit: y,
+    __validation: b = "throw"
+  } = t, o = O(() => r.toJSON().activeArtboard, [r]), g = O(() => r.toJSON().artboards.map((h) => h.name), [r]), [w, f] = C(null), S = w && w.design === r ? w.label : o, v = O(
+    () => (h) => {
+      if (!g.includes(h))
+        throw new T(
+          "E_UNKNOWN_PLACEMENT",
+          `no placement "${h}" in this design — its artboards are ${JSON.stringify(g)}. Add it to the seed with design(…).artboard('${h}', { width, height }) (ADR-0088).`,
+          { placement: h, validNames: g, docSlug: "embed-mode" }
+        );
+      f({ design: r, label: h });
+    },
+    [r, g]
+  ), V = O(() => {
+    const h = r.toJSON().artboards[0];
+    if (h)
+      return {
+        name: h.name,
+        width: h.width,
+        height: h.height,
+        ...h.backgroundColor ? { backgroundColor: h.backgroundColor } : {}
+      };
+  }, [r]);
+  z(
+    m.commerce.subscribe,
+    m.commerce.getVersion,
+    m.commerce.getVersion
+  );
+  const R = m.commerce.renderVariantId(), _ = ot(R ?? n.variantId ?? n.defaultGvid), D = O(() => {
+    if (!_) return null;
+    const h = r.toJSON().artboards[0];
+    return it(_, h) ?? null;
+  }, [_, r]), P = x(s), A = x(d), j = x(c);
+  P.current = s, A.current = d, j.current = c;
+  const [ce, _e] = C([]), [Y, W] = C(!0), [ue, X] = C(null), ne = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), re = gt(t), Ae = "grantUrl" in re ? re.grantUrl : "getToken", me = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, q = `${e}|${me}|${o}|${ne}`, oe = O(() => {
+    var I;
+    const h = Re({ shop: e, product: n, design: r, hasGrant: ne });
+    if (b !== "throw") return h;
+    const E = h.find((B) => B.severity === "error");
+    if (E)
+      throw new T("E_EMBED_CONFIG", E.message, {
+        issue: E.issue,
+        docSlug: "embed-mode"
+      });
+    for (const B of h)
+      typeof L < "u" && ((I = L.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${B.message}`);
+    return h;
+  }, [q, b]), fe = x(null);
+  $(() => {
+    var h;
+    if (oe.length !== 0 && fe.current !== q) {
+      fe.current = q;
+      for (const E of oe) (h = j.current) == null || h.call(j, E);
+    }
+  }, [oe, q]);
+  const pe = x(null);
+  $(() => {
+    var h;
+    if (b === "warn" && typeof L < "u" && ((h = L.env) == null ? void 0 : h.NODE_ENV) !== "production") {
+      if (pe.current === q) return;
+      pe.current = q, ft({ shop: e, product: n, design: r, hasGrant: ne });
+    }
+  }, [q, b]);
+  const Z = O(
+    () => {
+      try {
+        return { session: new Ze({ shop: e, product: n, wsUrl: u, ...re }) };
+      } catch (h) {
+        return { error: h instanceof Error ? h.message : String(h) };
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, me, o, u, Ae]
+  ), k = "session" in Z ? Z.session : null, ee = "error" in Z ? Z.error : null, te = O(() => (h, E = i) => {
+    if (!k) return;
+    X(null), W(!0);
+    const I = (U) => {
+      var ye;
+      const ge = U instanceof Error ? U.message : String(U);
+      X(ge), W(!1), (ye = A.current) == null || ye.call(A, ge);
+    }, B = h.artboards ?? [];
+    if (B.length > 1) {
+      for (const U of B)
+        k.renderState(
+          typeof U.name == "string" && U.name ? U.name : o,
+          { schemaVersion: h.schemaVersion, artboards: [U] },
+          E
+        ).catch(I);
+      return;
+    }
+    k.renderState(o, h, E).catch(I);
+  }, [k, o, i]);
+  $(() => {
+    var h;
+    if (ee) {
+      X(ee), W(!1), (h = A.current) == null || h.call(A, ee);
+      return;
+    }
+    if (k)
+      return k.onMockups((E) => {
+        var I;
+        _e(E), W(!1), (I = P.current) == null || I.call(P, E);
+      }), k.onError((E) => {
+        var I;
+        X(E), W(!1), (I = A.current) == null || I.call(A, E);
+      }), te(r.toServerRequest()), () => k.close();
+  }, [k, ee]);
+  const ie = x({
+    session: null,
+    variantId: void 0
+  });
+  $(() => {
+    if (!k || !R) return;
+    const h = ie.current, E = h.session === k ? h.variantId : n.variantId;
+    if (R === E) {
+      ie.current = { session: k, variantId: E };
+      return;
+    }
+    ie.current = { session: k, variantId: R }, k.setProduct({ ...n, variantId: R }), te(le(m.store.getState()));
+  }, [k, R]), $(() => {
+    if (!Y) return;
+    const h = setTimeout(() => {
+      var I, B;
+      const E = ht(o);
+      typeof L < "u" && ((I = L.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(E), (B = j.current) == null || B.call(j, { severity: "warn", issue: "slow-render", message: E });
+    }, ke);
+    return () => clearTimeout(h);
+  }, [Y, o]);
+  const De = O(
+    () => ({
+      session: k,
+      design: r,
+      // The ACTIVE placement (ADR-0088): Editor.Canvas follows it as its
+      // controlled artboard; single-placement designs never see it move.
+      placement: S,
+      placements: g,
+      selectPlacement: v,
+      product: n,
+      mockups: ce,
+      isRendering: Y,
+      error: ue,
+      throttleMs: i,
+      pieceGuides: D,
+      pushRender: te,
+      stateStore: m.store
+    }),
+    [k, r, S, g, v, n, ce, Y, ue, i, D, te, m.store]
+  ), Pe = z(
+    m.registry.subscribe,
+    m.registry.getVersion,
+    m.registry.getVersion
+  );
+  O(() => {
+    y(
+      Se({ registry: m.registry, store: m.store, product: n })
+    ), m.registry.validate();
+  }, [m.registry, Pe]);
+  const he = /* @__PURE__ */ l(Be.Provider, { value: m, children: /* @__PURE__ */ l(xe.Provider, { value: De, children: /* @__PURE__ */ l(tt.Provider, { value: m.registry, children: /* @__PURE__ */ l(
+    nt,
+    {
+      ...V ? { initialArtboardConfig: V } : {},
+      children: p
+    }
+  ) }) }) });
+  return a ? /* @__PURE__ */ l(Fe, { services: a, children: he }) : he;
+}
+function Ie(t) {
+  const { design: e, product: n, onAudit: r } = t, i = `${n.productId}|${n.variantId ?? ""}`, s = x(null), d = x(null), [c, u] = C(null);
+  (s.current === null || s.current.design !== e) && (s.current = {
+    design: e,
+    internals: {
+      store: new at(e.toJSON()),
+      registry: new Le()
+    }
+  }), (d.current === null || d.current.productIdentity !== i) && (d.current = { productIdentity: i, commerce: new dt(n) });
+  const a = O(
+    () => ({
+      ...s.current.internals,
+      commerce: d.current.commerce,
+      ...Ve(u)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s.current.internals, d.current.commerce]
+  ), p = x(n);
+  p.current = n;
+  const m = x(r);
+  m.current = r;
+  const y = x(null), b = F((w) => {
+    y.current = w;
+  }, []), o = F(
+    () => Se({
+      registry: s.current.internals.registry,
+      store: s.current.internals.store,
+      product: p.current
+    }),
+    []
+  );
+  Q(() => pt({ compute: o }), [o]);
+  const g = x(!1);
+  return $(() => {
+    let w = !1;
+    return queueMicrotask(() => {
+      var f;
+      w || g.current || (g.current = !0, (f = m.current) == null || f.call(m, y.current ?? o()));
+    }), () => {
+      w = !0;
+    };
+  }, [o]), // `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__ */ l("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ l(vt, { reportedError: c, onRetry: () => u(null), children: /* @__PURE__ */ l(bt, { ...t, internals: a, recordAudit: b }) }) });
+}
+let wt = () => import("./EditorCanvasImpl-BLZV_el0.js").then((t) => t.EditorCanvasImpl);
+function Oe() {
+  return wt();
+}
+const Et = be(function({ children: e, maxHeight: n, floatingToolbar: r = !0, className: i, style: s }, d) {
+  const c = H("Editor.Canvas");
+  J("Editor.Canvas", { floatingToolbar: r });
+  const u = de();
+  Q(() => c.registry.registerCanvas(u), [c.registry, u]);
+  const [a, p] = C(null);
+  return $(() => {
+    let m = !1;
+    return Oe().then(
+      (y) => {
+        m || p(() => y);
+      },
+      (y) => {
+        m || c.reportRuntimeError(
+          new T(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's rendering chunk failed to load (${y instanceof Error ? y.message : String(y)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: y instanceof Error ? y.message : String(y), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      m = !0;
+    };
+  }, [c]), a ? (
+    // `builtinControls`: the canvas owns the floating contextual toolbar
+    // 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__ */ l(
+      a,
+      {
+        ref: d,
+        kit: "embed-only",
+        partAttr: "canvas",
+        builtinControls: r,
+        maxHeight: n,
+        className: i,
+        style: s,
+        children: e
+      }
+    )
+  ) : /* @__PURE__ */ l(
+    "div",
+    {
+      "data-sc-part": "canvas",
+      "data-sc-state": "loading",
+      className: i,
+      style: { minHeight: n ?? 200, ...s },
+      "aria-busy": "true"
+    }
+  );
+});
+function xt() {
+  const { placements: t, placement: e, selectPlacement: n } = K();
+  return O(
+    () => ({
+      placements: t.map((r) => ({ label: r, active: r === e })),
+      activePlacement: e,
+      select: n
+    }),
+    [t, e, n]
+  );
+}
+function Rt({ className: t, style: e }) {
+  const { placements: n, select: r } = xt();
+  return n.length < 2 ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      "data-sc-part": "placements",
+      className: t,
+      style: { display: "flex", alignItems: "center", gap: "4px", ...e },
+      children: n.map(({ label: i, active: s }) => /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          "data-sc-part": "placements-item",
+          "data-sc-active": s ? "true" : "false",
+          "aria-pressed": s,
+          onClick: () => r(i),
+          style: {
+            font: "inherit",
+            fontSize: "13px",
+            fontWeight: s ? 700 : 400,
+            color: "var(--sc-color-foreground, inherit)",
+            background: "transparent",
+            border: "none",
+            borderRadius: "9999px",
+            padding: "2px 8px",
+            cursor: s ? "default" : "pointer",
+            textDecoration: s ? "underline" : "none",
+            textUnderlineOffset: "4px"
+          },
+          children: i
+        },
+        i
+      ))
+    }
+  );
+}
+const St = 200, kt = 400;
+function Ct() {
+  return Array.from({ length: 10 }, () => ({
+    left: 2 + Math.random() * 96,
+    top: 2 + Math.random() * 96,
+    delay: (Math.random() * 3.5).toFixed(1),
+    duration: (3 + Math.random() * 2).toFixed(1),
+    size: 3 + Math.random() * 5
+  }));
+}
+let ve = !1;
+function It() {
+  if (!(ve || typeof CSS > "u" || typeof CSS.registerProperty != "function")) {
+    ve = !0;
+    try {
+      CSS.registerProperty({ name: "--sc-prism-mount", syntax: "<number>", initialValue: "0", inherits: !0 });
+    } catch {
+    }
+    try {
+      CSS.registerProperty({ name: "--sc-prism-band", syntax: "<number>", initialValue: "0", inherits: !1 });
+    } catch {
+    }
+  }
+}
+const Ne = Ye(function({
+  visible: e = !0,
+  onExited: n,
+  variant: r = "dark"
+}) {
+  It();
+  const [i, s] = C([]);
+  $(() => {
+    s(Ct());
+  }, []);
+  const [d, c] = C(!1);
+  $(() => {
+    const p = requestAnimationFrame(() => c(!0));
+    return () => cancelAnimationFrame(p);
+  }, []);
+  const u = F(
+    (p) => {
+      p.propertyName === "background-color" && (e || n == null || n());
+    },
+    [e, n]
+  );
+  let a = "";
+  return e ? d && (a = "sc-prism-fade-in") : a = "sc-prism-fade-out", /* @__PURE__ */ N(
+    "div",
+    {
+      "data-sc-part": "preview-loading",
+      className: ["sc-prism-overlay", r === "light" ? "sc-prism-on-light" : "", a].filter(Boolean).join(" "),
+      onTransitionEnd: u,
+      "aria-hidden": "true",
+      children: [
+        Array.from({ length: 6 }, (p, m) => /* @__PURE__ */ l("div", { className: "sc-prism-band" }, `b-${m}`)),
+        i.map((p, m) => /* @__PURE__ */ l(
+          "div",
+          {
+            className: "sc-prism-particle",
+            style: {
+              left: `${p.left}%`,
+              top: `${p.top}%`,
+              animationDelay: `${p.delay}s`,
+              animationDuration: `${p.duration}s`,
+              width: `${p.size}px`,
+              height: `${p.size}px`
+            }
+          },
+          `p-${m}`
+        ))
+      ]
+    }
+  );
+});
+function Te(t) {
+  const [e, n] = C(!1), [r, i] = C(!1), s = x(null), d = x(null), c = x(!1);
+  c.current = e, $(() => (t ? (i(!1), d.current && clearTimeout(d.current), s.current = setTimeout(() => n(!0), St)) : (s.current && (clearTimeout(s.current), s.current = null), c.current && (i(!0), d.current = setTimeout(() => i(!1), kt))), () => {
+    s.current && clearTimeout(s.current), d.current && clearTimeout(d.current);
+  }), [t]);
+  const u = F(() => n(!1), []);
+  return {
+    showOverlay: e,
+    overlayVisible: t || r,
+    handleExited: u
+  };
+}
+const Ot = 1.2, se = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function Nt(t) {
+  for (const e of se)
+    if (e >= t) return e;
+  return se[se.length - 1];
+}
+function Tt(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * Ot) return null;
+  const n = Nt(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 $t(t) {
+  if (t === void 0 || t === !0 || t === "dark") return "dark";
+  if (t === "light" || t === "host-owned" || we(t)) return t;
+  throw new T(
+    "E_PREVIEW_NO_LOADER",
+    `Editor.Preview: invalid loadingOverlay value ${JSON.stringify(t)}. A mockup preview always has a render-in-flight treatment (the loader paints over the still-visible previous mockup). Omit the prop for the default rainbow overlay, pass "dark" | "light", pass a custom ReactElement, or declare "host-owned" if the host renders its own indicator off data-sc-preview-state / <Editor.LoadingOverlay>.`,
+    { docSlug: "preview-loading-overlay" }
+  );
+}
+function $e({
+  mockupId: t,
+  fallback: e = null,
+  alt: n = "Live product mockup",
+  loadingOverlay: r,
+  className: i,
+  style: s
+}) {
+  const { mockups: d, error: c, isRendering: u } = K();
+  J("Editor.Preview", { ...t !== void 0 ? { mockupId: t } : {} });
+  const a = $t(r), p = a === "dark" || a === "light" ? a : null, m = we(a) ? a : null, y = a !== "host-owned", { showOverlay: b, overlayVisible: o, handleExited: g } = Te(
+    y && u
+  ), w = x(/* @__PURE__ */ new Set()), f = t ? d.find((v) => v.mockupId === t && v.imageUrl) : d.find((v) => v.imageUrl), S = (v) => {
+    var P;
+    if (!f || typeof L > "u" || ((P = L.env) == null ? void 0 : P.NODE_ENV) === "production" || typeof window > "u" || w.current.has(f.mockupId)) return;
+    const V = v.currentTarget, R = V.getBoundingClientRect().width;
+    if (R <= 0) return;
+    const _ = Math.round(R * (window.devicePixelRatio || 1)), D = Tt(V.naturalWidth, _);
+    D && (w.current.add(f.mockupId), console.warn(D));
+  };
+  if (y) {
+    const v = f != null && f.imageUrl ? u ? "rendering" : "ready" : c ? "error" : "rendering";
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        "data-sc-part": "preview",
+        "data-sc-preview-state": v,
+        "aria-busy": v === "rendering" || void 0,
+        className: `sc-preview-frame${i ? ` ${i}` : ""}`,
+        style: s,
+        children: [
+          f != null && f.imageUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ l("img", { "data-sc-part": "preview-image", src: f.imageUrl, alt: n, onLoad: S })
+          ) : c ? /* @__PURE__ */ l("div", { "data-sc-part": "preview-error", role: "alert", "data-sc-error": c, children: e ?? `Render failed: ${c}` }) : e,
+          m ? (
+            // Custom indicator: same show-delay + linger window; no exit fade
+            // (the host owns its animation), so it unmounts when the window
+            // closes.
+            b && o ? /* @__PURE__ */ l(
+              "div",
+              {
+                "data-sc-part": "preview-loading",
+                className: "sc-preview-custom-loading",
+                "aria-hidden": "true",
+                children: m
+              }
+            ) : null
+          ) : b && p ? /* @__PURE__ */ l(
+            Ne,
+            {
+              visible: o,
+              variant: p,
+              onExited: g
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return f != null && f.imageUrl ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ l(
+      "img",
+      {
+        "data-sc-part": "preview",
+        "data-sc-preview-state": u ? "rendering" : "ready",
+        src: f.imageUrl,
+        alt: n,
+        className: i,
+        style: s,
+        onLoad: S
+      }
+    )
+  ) : c ? /* @__PURE__ */ l(
+    "div",
+    {
+      "data-sc-part": "preview-error",
+      "data-sc-preview-state": "error",
+      role: "alert",
+      "data-sc-error": c,
+      className: i,
+      style: s,
+      children: e ?? `Render failed: ${c}`
+    }
+  ) : /* @__PURE__ */ l("div", { "data-sc-part": "preview", "data-sc-preview-state": "rendering", "aria-busy": "true", style: { display: "contents" }, children: e });
+}
+function _t(t) {
+  const { layer: e, optional: n = !1, placeholder: r, className: i, style: s } = t, d = H("Editor.TextField");
+  J("Editor.TextField");
+  const { pushRender: c, throttleMs: u, stateStore: a } = K(), p = de(), m = x(null);
+  if (!st(e))
+    throw new T(
+      "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 o = a.layerKindOf(e.name);
+    if (o === void 0)
+      throw new T(
+        "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(a.bindableLayerNames())}.`,
+        { layerName: e.name, validNames: a.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    if (o !== "text")
+      throw new T(
+        "E_LAYER_WRONG_KIND",
+        `layer "${e.name}" is ${o === null ? "not a bindable kind" : `an ${o} layer`} — <Editor.TextField> binds text layers only.`,
+        { layerName: e.name, actualKind: o, docSlug: "embed-mode" }
+      );
+    m.current = e.name;
+  }
+  Q(() => d.registry.registerTextField(p, { name: e.name, optional: n }), [d.registry, p, e.name, n]);
+  const y = z(
+    a.subscribe,
+    () => a.textOf(e.name) ?? "",
+    () => a.textOf(e.name) ?? ""
+  ), b = F(
+    (o) => {
+      const g = o.target.value, w = d.registry.getCanvasBridge();
+      if (w) {
+        w.setTextByName(e.name, g) || d.reportInvariant(
+          new T(
+            "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;
+      }
+      a.updateTextLayer(e.name, g), c(le(a.getState()), u);
+    },
+    [d, e.name, a, c, u]
+  );
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      "data-sc-part": "textfield",
+      "data-sc-layer": e.name,
+      type: "text",
+      value: y,
+      onChange: b,
+      placeholder: r,
+      "aria-label": t["aria-label"] ?? e.name,
+      className: i,
+      style: s
+    }
+  );
+}
+function At(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 i = (t.seedTextOf(n.name) ?? "").trim();
+    i.length > 0 && r === i && 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 Dt(t, e) {
+  const n = e.getCombinations(), r = e.getAttributes();
+  if (Object.keys(r).length === 0 || n.length === 0) return null;
+  const i = Object.fromEntries(
+    Object.entries(r).map(([s, d]) => [s, { ...d, choices: lt(d) }])
+  );
+  return et({
+    productId: t.productId,
+    quantity: e.getQuantity(),
+    selection: e.getSelection(),
+    combinations: n,
+    attributes: i
+  });
+}
+function Pt(t) {
+  const { onAddToCart: e, defaultQuantity: n, children: r, className: i, style: s } = t, d = H("Editor.Buy");
+  J("Editor.Buy");
+  const { product: c, stateStore: u } = K(), a = d.commerce;
+  if (!(c != null && c.productId))
+    throw new T(
+      "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 p = x(!1);
+  Q(() => {
+    p.current || (p.current = !0, typeof n == "number" && a.setQuantity(n));
+  }, [a]);
+  const m = z(u.subscribe, u.getState, u.getState), y = z(a.subscribe, a.getVersion, a.getVersion), b = z(
+    d.registry.subscribe,
+    d.registry.getVersion,
+    d.registry.getVersion
+  ), o = a.getQuantity(), g = O(
+    () => At({
+      quantity: o,
+      missingOptionKeys: a.missingOptionKeys(),
+      selectionValid: a.selectionValid(),
+      textFields: d.registry.getTextFields(),
+      textOf: (R) => u.textOf(R),
+      seedTextOf: (R) => u.seedTextOf(R),
+      hasRenderableElement: u.hasRenderableElement()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, o, m, y, b]
+  ), w = g.length === 0, [f, S] = C(!1), v = x(!1), V = F(() => {
+    if (v.current || !w) return;
+    v.current = !0, S(!0);
+    const R = u.getState(), _ = a.resolvedVariantId(), D = {
+      productId: c.productId,
+      ..._ ? { variantId: _ } : {},
+      quantity: a.getQuantity(),
+      selection: a.getSelection(),
+      cartDetail: Dt(c, a),
+      designState: R,
+      serverRequest: le(R)
+    };
+    let P;
+    try {
+      P = e(D);
+    } catch (A) {
+      throw v.current = !1, S(!1), A;
+    }
+    Promise.resolve(P).finally(() => {
+      v.current = !1, S(!1);
+    });
+  }, [w, c, a, u, e]);
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      "data-sc-part": "buy",
+      "data-sc-buy-state": f ? "busy" : w ? "ready" : "incomplete",
+      "data-sc-buy-missing": g.join(",") || void 0,
+      disabled: !w || f,
+      "aria-busy": f || void 0,
+      onClick: V,
+      className: i,
+      style: s,
+      children: r ?? "Add to cart"
+    }
+  );
+}
+function Lt({
+  placement: t = "docked",
+  className: e,
+  style: n
+}) {
+  const r = H("Editor.Controls");
+  Ue("Editor.Controls"), J("Editor.Controls");
+  const i = de();
+  Q(
+    () => r.registry.registerControls(i, t),
+    [r.registry, i, t]
+  );
+  const s = t === "docked", [d, c] = C(null);
+  return $(() => {
+    if (!s) return;
+    let u = !1;
+    return import("./ContextualToolbars-DUhBKVxe.js").then((a) => a.s).then(
+      (a) => {
+        u || c(() => a.ContextualToolbars);
+      },
+      (a) => {
+        u || r.reportRuntimeError(
+          new T(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's controls chunk failed to load (${a instanceof Error ? a.message : String(a)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: a instanceof Error ? a.message : String(a), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      u = !0;
+    };
+  }, [s, r]), s ? /* @__PURE__ */ l(
+    "div",
+    {
+      "data-sc-part": "controls",
+      "data-sc-placement": "docked",
+      className: e,
+      style: n,
+      "aria-busy": d ? void 0 : "true",
+      children: d ? /* @__PURE__ */ l(d, { mode: "embedded" }) : null
+    }
+  ) : null;
+}
+function Vt({
+  variant: t = "dark",
+  className: e,
+  style: n
+}) {
+  const { isRendering: r } = K(), { showOverlay: i, overlayVisible: s, handleExited: d } = Te(r);
+  return i ? /* @__PURE__ */ l(
+    "div",
+    {
+      "data-sc-part": "loading-overlay",
+      className: `sc-loading-overlay-host${e ? ` ${e}` : ""}`,
+      style: n,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ l(Ne, { visible: s, variant: t, onExited: d })
+    }
+  ) : null;
+}
+function Bt() {
+  const e = H("useProductSelection").commerce, n = z(e.subscribe, e.getVersion, e.getVersion), r = F((s, d) => e.select(s, d), [e]), i = F((s) => e.setQuantity(s), [e]);
+  return O(
+    () => ({
+      attributes: e.getAttributes(),
+      selection: e.getSelection(),
+      select: r,
+      disabledChoices: e.disabledChoices(),
+      variantId: e.resolvedVariantId(),
+      price: e.resolvedPrice(),
+      quantity: e.getQuantity(),
+      setQuantity: i,
+      complete: e.selectionValid(),
+      missing: e.missingOptionKeys()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, r, i, n]
+  );
+}
+const M = {
+  /** The one provider boundary — session, design, live state, error boundary. */
+  Root: Ie,
+  /** The editable artboard (the ONE lazy renderer boundary — D9). */
+  Canvas: Et,
+  /** Live product mockup. ×N under one Root is valid. */
+  Preview: $e,
+  /** Placement switcher tabs (ADR-0088). Renders nothing for a
+   *  single-placement design; headless floor = usePlacements(). */
+  Placements: Rt,
+  /** Form input bound to a design text layer by typed token (T1). */
+  TextField: _t,
+  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
+  Buy: Pt,
+  /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
+  Layers: ze,
+  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
+  Controls: Lt,
+  /** Undo/redo controls. Requires Editor.Canvas. */
+  History: qe,
+  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
+  Menu: je,
+  /** The ⊕ add-element menu. Requires Editor.Canvas. */
+  Add: Me,
+  /** Standalone render-in-flight rainbow for host-owned preview surfaces.
+   *  Fills its positioned parent; rides the session (canvas-free). */
+  LoadingOverlay: Vt
+};
+function on(t) {
+  return /* @__PURE__ */ l(Ie, { ...t, __validation: "warn" });
+}
+const sn = be(
+  function(e, n) {
+    const { children: r, className: i, style: s, maxHeight: d, ...c } = e, [u, a] = C(null);
+    return $(() => {
+      let p = !1;
+      return Oe().then(
+        (m) => {
+          p || a(() => m);
+        },
+        (m) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", m);
+        }
+      ), () => {
+        p = !0;
+      };
+    }, []), u ? /* @__PURE__ */ l(u, { ref: n, selfScope: !0, maxHeight: d, className: i, style: s, ...c, children: r }) : /* @__PURE__ */ l(
+      "div",
+      {
+        className: `sc-root${i ? ` ${i}` : ""}`,
+        style: { minHeight: d ?? 200, ...s },
+        "aria-busy": "true"
+      }
+    );
+  }
+);
+function an(t) {
+  return /* @__PURE__ */ l($e, { ...t });
+}
+function dn() {
+  const { mockups: t, isRendering: e, error: n } = K();
+  return { mockups: t, isRendering: e, error: n };
+}
+function Ft(t) {
+  return t.type !== "color" && typeof t.width == "number" && t.width > 0 && typeof t.height == "number" && t.height > 0;
+}
+function ln(t, e = {}) {
+  var y, b, o, g, w;
+  const n = (t.placements ?? []).filter(Ft), r = n.map((f) => f.label), i = e.placement ? n.find((f) => f.label === e.placement) : n[0];
+  if (!i)
+    throw e.placement ? new T(
+      "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 T(
+      "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 s = ((y = t.options) == null ? void 0 : y.attributes) ?? {}, c = Object.values(s).some(
+    (f) => {
+      var S;
+      return (S = f == null ? void 0 : f.choices) == null ? void 0 : S.some((v) => v == null ? void 0 : v.hex);
+    }
+  ) ? (g = (o = (b = t.options) == null ? void 0 : b.combinations) == null ? void 0 : o.find(
+    (f) => typeof f.variantId == "string" && f.variantId !== ""
+  )) == null ? void 0 : g.variantId : void 0, u = t.mockups ?? [], a = c ? u.filter((f) => {
+    var S;
+    return (S = f.gvids) == null ? void 0 : S.includes(c);
+  }) : u, p = (a.length > 0 ? a : u).map((f) => f.id);
+  if (p.length === 0)
+    throw new T(
+      "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: p,
+      ...typeof c == "string" ? { variantId: c } : {},
+      options: t.options,
+      placements: (w = t.placements) == null ? void 0 : w.map((f) => f.label),
+      mockups: u,
+      requiredPlacements: t.requiredPlacements,
+      ...t.defaultGvid ? { defaultGvid: t.defaultGvid } : {},
+      ...typeof e.width == "number" ? { width: e.width } : {}
+    },
+    placement: {
+      label: i.label,
+      width: i.width,
+      height: i.height,
+      aspectRatio: i.width / i.height
+    },
+    placementLabels: r,
+    placements: n.map((f) => ({
+      label: f.label,
+      width: f.width,
+      height: f.height,
+      aspectRatio: f.width / f.height
+    })),
+    primaryMockupId: p[0],
+    variantId: c
+  };
+}
+function Ut(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 Mt = {
+  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"
+}, jt = {
+  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 ae({
+  label: t,
+  onSelect: e
+}) {
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "data-sc-part": "snowcone-editor-menu-item",
+      style: jt,
+      onClick: e,
+      children: t
+    }
+  );
+}
+function qt({
+  fullscreen: t,
+  onToggleFullscreen: e,
+  viewCount: n,
+  viewIndex: r,
+  onSelectView: i,
+  onExport: s
+}) {
+  const [d, c] = C(!1), u = () => c(!1);
+  return /* @__PURE__ */ N("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Editor menu",
+        "aria-haspopup": "menu",
+        "aria-expanded": d,
+        "data-sc-part": "snowcone-editor-menu",
+        style: Mt,
+        onClick: () => c((a) => !a),
+        children: "⋮"
+      }
+    ),
+    d ? /* @__PURE__ */ N(Ge, { children: [
+      /* @__PURE__ */ l(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 39 },
+          onClick: u,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ N(
+        "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__ */ l(
+              ae,
+              {
+                label: t ? "Exit fullscreen" : "Fullscreen",
+                onSelect: () => {
+                  u(), e();
+                }
+              }
+            ),
+            n > 1 ? Array.from({ length: n }, (a, p) => /* @__PURE__ */ l(
+              ae,
+              {
+                label: `View ${p + 1}${p === r ? " ✓" : ""}`,
+                onSelect: () => {
+                  u(), i(p);
+                }
+              },
+              p
+            )) : null,
+            /* @__PURE__ */ l(
+              ae,
+              {
+                label: "Export PNG",
+                onSelect: () => {
+                  u(), s();
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] });
+}
+function zt() {
+  const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Ke({ previewSize: 96 });
+  return $(() => {
+    t.length > 0 && n();
+  }, [t.length, n]), /* @__PURE__ */ N(
+    "div",
+    {
+      "data-sc-part": "snowcone-editor-idle-dock",
+      style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 8, minHeight: 44 },
+      children: [
+        /* @__PURE__ */ l(M.Add, {}),
+        t.length > 0 ? /* @__PURE__ */ l("div", { style: { width: 1, height: 28, background: "rgba(0,0,0,0.1)", flexShrink: 0 }, "aria-hidden": "true" }) : null,
+        t.map((r) => /* @__PURE__ */ l(
+          "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__ */ l("img", { src: r.previewUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "contain" } })
+            ) : /* @__PURE__ */ l(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  fontWeight: 600,
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: r.name
+              }
+            )
+          },
+          r.id
+        ))
+      ]
+    }
+  );
+}
+function Kt({
+  onAddToCart: t,
+  defaultQuantity: e
+}) {
+  const { price: n, complete: r } = Bt();
+  return /* @__PURE__ */ N(
+    M.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" ? ` · ${Ut(n)}` : ""
+      ]
+    }
+  );
+}
+function Wt({
+  title: t,
+  height: e,
+  mockupIds: n,
+  onAddToCart: r,
+  defaultQuantity: i,
+  className: s,
+  style: d
+}) {
+  const [c, u] = C(!1), [a, p] = C(0), [m, y] = C(!1), b = x(null), o = ct(), g = n[Math.min(a, n.length - 1)], w = F(async () => {
+    var D;
+    const v = await ((D = b.current) == null ? void 0 : D.exportArtboards({ format: "dataUrl" }));
+    if (!v) return;
+    const [V, R] = Object.entries(v)[0] ?? [];
+    if (typeof R != "string") return;
+    const _ = document.createElement("a");
+    _.href = R, _.download = `${V ?? "design"}.png`, _.click();
+  }, []), f = {
+    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",
+    ...c ? {
+      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)"
+    },
+    ...d
+  }, S = {
+    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__ */ N(
+    "div",
+    {
+      "data-sc-part": "snowcone-editor",
+      "data-sc-fullscreen": c ? "true" : void 0,
+      className: s,
+      style: f,
+      children: [
+        /* @__PURE__ */ N(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              padding: "10px 12px 4px 16px",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ l("span", { style: { fontSize: 14, fontWeight: 700, marginRight: "auto" }, children: t }),
+              /* @__PURE__ */ l(M.History, {}),
+              /* @__PURE__ */ l(
+                qt,
+                {
+                  fullscreen: c,
+                  onToggleFullscreen: () => u((v) => !v),
+                  viewCount: n.length,
+                  viewIndex: a,
+                  onSelectView: p,
+                  onExport: () => void w()
+                }
+              ),
+              /* @__PURE__ */ l(Kt, { onAddToCart: r, defaultQuantity: i })
+            ]
+          }
+        ),
+        /* @__PURE__ */ N(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-stage",
+            style: { position: "relative", flex: 1, minHeight: 0, padding: "4px 12px" },
+            children: [
+              /* @__PURE__ */ l(M.Canvas, { ref: b, 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__ */ N(
+                  "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__ */ l(
+                        M.Preview,
+                        {
+                          mockupId: g,
+                          alt: "Product mockup",
+                          loadingOverlay: !0,
+                          fallback: /* @__PURE__ */ l("div", { "aria-busy": "true", children: "Rendering…" }),
+                          style: { maxWidth: "100%", maxHeight: "100%", borderRadius: 12 }
+                        }
+                      ),
+                      /* @__PURE__ */ l(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Back to artwork",
+                          "data-sc-part": "snowcone-editor-swap-back",
+                          onClick: () => y(!1),
+                          style: {
+                            ...S,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: 11,
+                            fontWeight: 600,
+                            color: "inherit",
+                            border: "1px dashed rgba(0,0,0,0.25)"
+                          },
+                          children: "artwork"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ) : /* @__PURE__ */ l(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Show product mockup",
+                  "data-sc-part": "snowcone-editor-pip",
+                  onClick: () => y(!0),
+                  style: S,
+                  children: /* @__PURE__ */ l(
+                    M.Preview,
+                    {
+                      mockupId: g,
+                      alt: "Product mockup preview",
+                      loadingOverlay: !0,
+                      fallback: /* @__PURE__ */ l("span", { style: { fontSize: 10, opacity: 0.5 }, "aria-busy": "true", children: "mockup…" }),
+                      style: { width: "100%", height: "100%", display: "block" }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ N(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-zone",
+            "data-sc-zone-state": o ? "selected" : "idle",
+            style: { flexShrink: 0, padding: "4px 16px 14px" },
+            children: [
+              /* @__PURE__ */ l("div", { style: { display: o ? void 0 : "none" }, children: /* @__PURE__ */ l(M.Controls, { placement: "docked" }) }),
+              o ? null : /* @__PURE__ */ l(zt, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function cn(t) {
+  const {
+    onAddToCart: e,
+    defaultQuantity: n,
+    title: r = "Editor",
+    height: i = 480,
+    className: s,
+    style: d,
+    ...c
+  } = t;
+  return /* @__PURE__ */ l(M.Root, { ...c, children: /* @__PURE__ */ l(
+    Wt,
+    {
+      title: r,
+      height: i,
+      mockupIds: c.product.mockupIds,
+      onAddToCart: e,
+      ...typeof n == "number" ? { defaultQuantity: n } : {},
+      className: s,
+      style: d
+    }
+  ) });
+}
+We();
+export {
+  M as E,
+  sn as R,
+  cn as S,
+  on as a,
+  an as b,
+  rn as c,
+  Re as d,
+  xt as e,
+  Ut as f,
+  Bt as g,
+  dn as h,
+  ln as p,
+  K as u,
+  ft as v
+};
+//# sourceMappingURL=embed-DXGydZOT.js.map