@snowcone-app/canvas 0.36.4 → 0.37.0

package/dist/embed-DbCQZ8Q9.js

@@ -1,1588 +0,0 @@
-import { E as Ue, p as Me, q as qe, C as je, r as H, t as J, v as ze, w as Ke, x as We, y as Ge, z as He, h as Je, e as Qe } from "./useCommands-DC6ZPY1n.js";
-import { E as T, y as xe, z as V } from "./FontAnalyzer-CEYA_6fY.js";
-import { jsx as l, jsxs as N, Fragment as Ye } from "react/jsx-runtime";
-import { useContext as Xe, createContext as Ze, useRef as x, useState as C, useMemo as O, useCallback as U, useLayoutEffect as Q, useEffect as _, useSyncExternalStore as z, Component as et, forwardRef as Re, useId as ce, memo as tt, isValidElement as Se } from "react";
-import { assertVariantSelected as nt, RenderSession as rt, createCartDetail as ot } from "@snowcone-app/sdk";
-import { s as ue, B as it, E as st, r as at, i as dt } from "./design-builder-CqgTpp9B.js";
-import { u as lt, p as ct } from "./usePieceGuideBundle-BUQKb0Ja.js";
-import { D as ut, C as mt, f as ft, d as pt } from "./template-fields-CMK7aqCw.js";
-import "./ExportManager-CDX5_up8.js";
-import "./CanvasStateV1-DLE5d1-d.js";
-const ke = Ze(void 0);
-function K() {
-  const t = Xe(ke);
-  if (!t)
-    throw new Error(
-      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
-    );
-  return t;
-}
-const ht = "[RealtimeEmbed]";
-function Ce(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 Ie({ 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 {
-      nt(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 = Ce(e), u = c.filter((o) => !d.includes(o));
-  c.length > 1 && d.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 gt(t) {
-  for (const e of Ie(t))
-    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${ht} ${e.message}`);
-}
-function Oe({ 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 yt(t) {
-  return G.push(t), () => {
-    const e = G.indexOf(t);
-    e !== -1 && G.splice(e, 1);
-  };
-}
-function an() {
-  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 Ne = 8e3;
-function vt(t) {
-  return `[RealtimeEmbed] No mockup after ${Math.round(Ne / 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 bt(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 Te({ error: t, onRetry: e }) {
-  const n = xe(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 wt extends et {
-  constructor() {
-    super(...arguments), this.state = { caught: null };
-  }
-  static getDerivedStateFromError(e) {
-    return { caught: e };
-  }
-  componentDidCatch(e) {
-    var n;
-    at(e), typeof V < "u" && ((n = V.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
-  }
-  render() {
-    return this.state.caught ? /* @__PURE__ */ l(Te, { error: this.state.caught }) : this.props.children;
-  }
-}
-function Et({ reportedError: t, onRetry: e, children: n }) {
-  if (t) {
-    const r = xe(t) && t.code === "E_CHUNK_LOAD_FAILED";
-    return /* @__PURE__ */ l(Te, { error: t, onRetry: r ? e : void 0 });
-  }
-  return /* @__PURE__ */ l(wt, { reportedError: null, onRetry: e, children: n });
-}
-function xt(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]
-  ), B = 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(), A = lt(R ?? n.variantId ?? n.defaultGvid), P = O(() => {
-    if (!A) return null;
-    const h = r.toJSON().artboards[0];
-    return ct(A, h) ?? null;
-  }, [A, r]), L = x(s), D = x(d), q = x(c);
-  L.current = s, D.current = d, q.current = c;
-  const [me, Le] = C([]), [Y, W] = C(!0), [fe, X] = C(null), re = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), oe = bt(t), Ve = "grantUrl" in oe ? oe.grantUrl : "getToken", pe = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, j = `${e}|${pe}|${o}|${re}`, ie = O(() => {
-    var I;
-    const h = Ie({ shop: e, product: n, design: r, hasGrant: re });
-    if (b !== "throw") return h;
-    const E = h.find((F) => F.severity === "error");
-    if (E)
-      throw new T("E_EMBED_CONFIG", E.message, {
-        issue: E.issue,
-        docSlug: "embed-mode"
-      });
-    for (const F of h)
-      typeof V < "u" && ((I = V.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${F.message}`);
-    return h;
-  }, [j, b]), he = x(null);
-  _(() => {
-    var h;
-    if (ie.length !== 0 && he.current !== j) {
-      he.current = j;
-      for (const E of ie) (h = q.current) == null || h.call(q, E);
-    }
-  }, [ie, j]);
-  const ge = x(null);
-  _(() => {
-    var h;
-    if (b === "warn" && typeof V < "u" && ((h = V.env) == null ? void 0 : h.NODE_ENV) !== "production") {
-      if (ge.current === j) return;
-      ge.current = j, gt({ shop: e, product: n, design: r, hasGrant: re });
-    }
-  }, [j, b]);
-  const Z = O(
-    () => {
-      try {
-        return { session: new rt({ shop: e, product: n, wsUrl: u, ...oe }) };
-      } catch (h) {
-        return { error: h instanceof Error ? h.message : String(h) };
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [e, pe, o, u, Ve]
-  ), 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 = ($) => {
-      var we;
-      const ne = $ instanceof Error ? $.message : String($);
-      X(ne), W(!1), (we = D.current) == null || we.call(D, ne);
-    }, F = ($, ne) => void k.renderState($, { schemaVersion: h.schemaVersion, artboards: [ne] }, E).catch(I), ae = h.artboards ?? [];
-    if (ae.length > 1) {
-      for (const $ of ae)
-        F(typeof $.name == "string" && $.name ? $.name : o, $);
-      return;
-    }
-    const ve = Ce(n), be = ae[0];
-    if (be && ve.length > 1) {
-      for (const $ of ve)
-        F($, { ...be, name: $ });
-      return;
-    }
-    k.renderState(o, h, E).catch(I);
-  }, [k, o, n, i]);
-  _(() => {
-    var h;
-    if (ee) {
-      X(ee), W(!1), (h = D.current) == null || h.call(D, ee);
-      return;
-    }
-    if (k)
-      return k.onMockups((E) => {
-        var I;
-        Le(E), W(!1), (I = L.current) == null || I.call(L, E);
-      }), k.onError((E) => {
-        var I;
-        X(E), W(!1), (I = D.current) == null || I.call(D, E);
-      }), te(r.toServerRequest()), () => k.close();
-  }, [k, ee]);
-  const se = x({
-    session: null,
-    variantId: void 0
-  });
-  _(() => {
-    if (!k || !R) return;
-    const h = se.current, E = h.session === k ? h.variantId : n.variantId;
-    if (R === E) {
-      se.current = { session: k, variantId: E };
-      return;
-    }
-    se.current = { session: k, variantId: R }, k.setProduct({ ...n, variantId: R }), te(ue(m.store.getState()));
-  }, [k, R]), _(() => {
-    if (!Y) return;
-    const h = setTimeout(() => {
-      var I, F;
-      const E = vt(o);
-      typeof V < "u" && ((I = V.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(E), (F = q.current) == null || F.call(q, { severity: "warn", issue: "slow-render", message: E });
-    }, Ne);
-    return () => clearTimeout(h);
-  }, [Y, o]);
-  const Be = 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: me,
-      isRendering: Y,
-      error: fe,
-      throttleMs: i,
-      pieceGuides: P,
-      pushRender: te,
-      stateStore: m.store
-    }),
-    [k, r, S, g, v, n, me, Y, fe, i, P, te, m.store]
-  ), Fe = z(
-    m.registry.subscribe,
-    m.registry.getVersion,
-    m.registry.getVersion
-  );
-  O(() => {
-    y(
-      Oe({ registry: m.registry, store: m.store, product: n })
-    ), m.registry.validate();
-  }, [m.registry, Fe]);
-  const ye = /* @__PURE__ */ l(qe.Provider, { value: m, children: /* @__PURE__ */ l(ke.Provider, { value: Be, children: /* @__PURE__ */ l(it.Provider, { value: m.registry, children: /* @__PURE__ */ l(
-    st,
-    {
-      ...B ? { initialArtboardConfig: B } : {},
-      children: p
-    }
-  ) }) }) });
-  return a ? /* @__PURE__ */ l(je, { services: a, children: ye }) : ye;
-}
-function $e(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 ut(e.toJSON()),
-      registry: new Ue()
-    }
-  }), (d.current === null || d.current.productIdentity !== i) && (d.current = { productIdentity: i, commerce: new mt(n) });
-  const a = O(
-    () => ({
-      ...s.current.internals,
-      commerce: d.current.commerce,
-      ...Me(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 = U((w) => {
-    y.current = w;
-  }, []), o = U(
-    () => Oe({
-      registry: s.current.internals.registry,
-      store: s.current.internals.store,
-      product: p.current
-    }),
-    []
-  );
-  Q(() => yt({ 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(Et, { reportedError: c, onRetry: () => u(null), children: /* @__PURE__ */ l(xt, { ...t, internals: a, recordAudit: b }) }) });
-}
-let Rt = () => import("./EditorCanvasImpl-B43TaPgW.js").then((t) => t.EditorCanvasImpl);
-function _e() {
-  return Rt();
-}
-const St = Re(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 = ce();
-  Q(() => c.registry.registerCanvas(u), [c.registry, u]);
-  const [a, p] = C(null);
-  return _(() => {
-    let m = !1;
-    return _e().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 kt() {
-  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 Ct({ className: t, style: e }) {
-  const { placements: n, select: r } = kt();
-  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 It = 200, Ot = 400;
-function Nt() {
-  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 Ee = !1;
-function Tt() {
-  if (!(Ee || typeof CSS > "u" || typeof CSS.registerProperty != "function")) {
-    Ee = !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 Ae = tt(function({
-  visible: e = !0,
-  onExited: n,
-  variant: r = "dark"
-}) {
-  Tt();
-  const [i, s] = C([]);
-  _(() => {
-    s(Nt());
-  }, []);
-  const [d, c] = C(!1);
-  _(() => {
-    const p = requestAnimationFrame(() => c(!0));
-    return () => cancelAnimationFrame(p);
-  }, []);
-  const u = U(
-    (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 De(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), It)) : (s.current && (clearTimeout(s.current), s.current = null), c.current && (i(!0), d.current = setTimeout(() => i(!1), Ot))), () => {
-    s.current && clearTimeout(s.current), d.current && clearTimeout(d.current);
-  }), [t]);
-  const u = U(() => n(!1), []);
-  return {
-    showOverlay: e,
-    overlayVisible: t || r,
-    handleExited: u
-  };
-}
-const $t = 1.2, de = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
-function _t(t) {
-  for (const e of de)
-    if (e >= t) return e;
-  return de[de.length - 1];
-}
-function At(t, e) {
-  if (!(t > 0) || !(e > 0) || e <= t * $t) return null;
-  const n = _t(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 Dt(t) {
-  if (t === void 0 || t === !0 || t === "dark") return "dark";
-  if (t === "light" || t === "host-owned" || Se(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 Pe({
-  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 = Dt(r), p = a === "dark" || a === "light" ? a : null, m = Se(a) ? a : null, y = a !== "host-owned", { showOverlay: b, overlayVisible: o, handleExited: g } = De(
-    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 L;
-    if (!f || typeof V > "u" || ((L = V.env) == null ? void 0 : L.NODE_ENV) === "production" || typeof window > "u" || w.current.has(f.mockupId)) return;
-    const B = v.currentTarget, R = B.getBoundingClientRect().width;
-    if (R <= 0) return;
-    const A = Math.round(R * (window.devicePixelRatio || 1)), P = At(B.naturalWidth, A);
-    P && (w.current.add(f.mockupId), console.warn(P));
-  };
-  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(
-            Ae,
-            {
-              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 Pt(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 = ce(), m = x(null);
-  if (!dt(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 = U(
-    (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(ue(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 Lt(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 Vt(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: ft(d) }])
-  );
-  return ot({
-    productId: t.productId,
-    quantity: e.getQuantity(),
-    selection: e.getSelection(),
-    combinations: n,
-    attributes: i
-  });
-}
-function Bt(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(
-    () => Lt({
-      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), B = U(() => {
-    if (v.current || !w) return;
-    v.current = !0, S(!0);
-    const R = u.getState(), A = a.resolvedVariantId(), P = {
-      productId: c.productId,
-      ...A ? { variantId: A } : {},
-      quantity: a.getQuantity(),
-      selection: a.getSelection(),
-      cartDetail: Vt(c, a),
-      designState: R,
-      serverRequest: ue(R)
-    };
-    let L;
-    try {
-      L = e(P);
-    } catch (D) {
-      throw v.current = !1, S(!1), D;
-    }
-    Promise.resolve(L).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: B,
-      className: i,
-      style: s,
-      children: r ?? "Add to cart"
-    }
-  );
-}
-function Ft({
-  placement: t = "docked",
-  className: e,
-  style: n
-}) {
-  const r = H("Editor.Controls");
-  ze("Editor.Controls"), J("Editor.Controls");
-  const i = ce();
-  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-GAkUFq2m.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 Ut({
-  variant: t = "dark",
-  className: e,
-  style: n
-}) {
-  const { isRendering: r } = K(), { showOverlay: i, overlayVisible: s, handleExited: d } = De(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(Ae, { visible: s, variant: t, onExited: d })
-    }
-  ) : null;
-}
-function Mt() {
-  const e = H("useProductSelection").commerce, n = z(e.subscribe, e.getVersion, e.getVersion), r = U((s, d) => e.select(s, d), [e]), i = U((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: $e,
-  /** The editable artboard (the ONE lazy renderer boundary — D9). */
-  Canvas: St,
-  /** Live product mockup. ×N under one Root is valid. */
-  Preview: Pe,
-  /** Placement switcher tabs (ADR-0088). Renders nothing for a
-   *  single-placement design; headless floor = usePlacements(). */
-  Placements: Ct,
-  /** Form input bound to a design text layer by typed token (T1). */
-  TextField: Pt,
-  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
-  Buy: Bt,
-  /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
-  Layers: He,
-  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
-  Controls: Ft,
-  /** Undo/redo controls. Requires Editor.Canvas. */
-  History: Ge,
-  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
-  Menu: We,
-  /** The ⊕ add-element menu. Requires Editor.Canvas. */
-  Add: Ke,
-  /** Standalone render-in-flight rainbow for host-owned preview surfaces.
-   *  Fills its positioned parent; rides the session (canvas-free). */
-  LoadingOverlay: Ut
-};
-function dn(t) {
-  return /* @__PURE__ */ l($e, { ...t, __validation: "warn" });
-}
-const ln = Re(
-  function(e, n) {
-    const { children: r, className: i, style: s, maxHeight: d, ...c } = e, [u, a] = C(null);
-    return _(() => {
-      let p = !1;
-      return _e().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 cn(t) {
-  return /* @__PURE__ */ l(Pe, { ...t });
-}
-function un() {
-  const { mockups: t, isRendering: e, error: n } = K();
-  return { mockups: t, isRendering: e, error: n };
-}
-function qt(t) {
-  return t.type !== "color" && typeof t.width == "number" && t.width > 0 && typeof t.height == "number" && t.height > 0;
-}
-function mn(t, e = {}) {
-  var y, b, o, g, w;
-  const n = (t.placements ?? []).filter(qt), 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 jt(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 zt = {
-  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"
-}, Kt = {
-  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 le({
-  label: t,
-  onSelect: e
-}) {
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      type: "button",
-      role: "menuitem",
-      "data-sc-part": "snowcone-editor-menu-item",
-      style: Kt,
-      onClick: e,
-      children: t
-    }
-  );
-}
-function Wt({
-  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: zt,
-        onClick: () => c((a) => !a),
-        children: "⋮"
-      }
-    ),
-    d ? /* @__PURE__ */ N(Ye, { 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(
-              le,
-              {
-                label: t ? "Exit fullscreen" : "Fullscreen",
-                onSelect: () => {
-                  u(), e();
-                }
-              }
-            ),
-            n > 1 ? Array.from({ length: n }, (a, p) => /* @__PURE__ */ l(
-              le,
-              {
-                label: `View ${p + 1}${p === r ? " ✓" : ""}`,
-                onSelect: () => {
-                  u(), i(p);
-                }
-              },
-              p
-            )) : null,
-            /* @__PURE__ */ l(
-              le,
-              {
-                label: "Export PNG",
-                onSelect: () => {
-                  u(), s();
-                }
-              }
-            )
-          ]
-        }
-      )
-    ] }) : null
-  ] });
-}
-function Gt() {
-  const { flatLayers: t, selectLayer: e, generateAllPreviews: n } = Je({ 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 Ht({
-  onAddToCart: t,
-  defaultQuantity: e
-}) {
-  const { price: n, complete: r } = Mt();
-  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" ? ` · ${jt(n)}` : ""
-      ]
-    }
-  );
-}
-function Jt({
-  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 = pt(), g = n[Math.min(a, n.length - 1)], w = U(async () => {
-    var P;
-    const v = await ((P = b.current) == null ? void 0 : P.exportArtboards({ format: "dataUrl" }));
-    if (!v) return;
-    const [B, R] = Object.entries(v)[0] ?? [];
-    if (typeof R != "string") return;
-    const A = document.createElement("a");
-    A.href = R, A.download = `${B ?? "design"}.png`, A.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(
-                Wt,
-                {
-                  fullscreen: c,
-                  onToggleFullscreen: () => u((v) => !v),
-                  viewCount: n.length,
-                  viewIndex: a,
-                  onSelectView: p,
-                  onExport: () => void w()
-                }
-              ),
-              /* @__PURE__ */ l(Ht, { 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(Gt, {})
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function fn(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(
-    Jt,
-    {
-      title: r,
-      height: i,
-      mockupIds: c.product.mockupIds,
-      onAddToCart: e,
-      ...typeof n == "number" ? { defaultQuantity: n } : {},
-      className: s,
-      style: d
-    }
-  ) });
-}
-Qe();
-export {
-  M as E,
-  ln as R,
-  fn as S,
-  dn as a,
-  cn as b,
-  an as c,
-  Ie as d,
-  kt as e,
-  jt as f,
-  Mt as g,
-  un as h,
-  mn as p,
-  K as u,
-  gt as v
-};
-//# sourceMappingURL=embed-DbCQZ8Q9.js.map