@snowcone-app/canvas 0.17.3 → 0.18.1

package/dist/embed-Cdbjay9i.js

@@ -0,0 +1,961 @@
+import { C as Se, L as Re, I as re, o as q, M as Ce, D as Ie, k as ke, A as Te, l as Oe, T as Ne, h as _e, B as $e, i as De, S as Ae, e as Le } from "./MenuButton-CeoEAtzP.js";
+import { y as S } from "./FontAnalyzer-DIlqmyuf.js";
+import { jsx as l, jsxs as L, Fragment as Be } from "react/jsx-runtime";
+import { useContext as se, createContext as ie, useId as P, useLayoutEffect as V, useRef as k, useState as R, useMemo as I, useEffect as _, useSyncExternalStore as $, Component as Ue, forwardRef as ae, useCallback as oe } from "react";
+import { assertVariantSelected as le, RenderSession as Fe, createCartDetail as Me } from "@snowcone-app/sdk";
+import { g as w, i as qe, h as de, B as Pe, E as Ve, j as je } from "./EditorContext-5QpqAhjh.js";
+import { u as He, p as ze } from "./usePieceGuideBundle-DVOISsB1.js";
+import { r as ce } from "./editorErrors-DXNfVXtD.js";
+import { l as ne, i as Ke, s as ue, U as Ge } from "./template-fields-DgoBtajp.js";
+import "./CanvasStateV1-Bq48qhv5.js";
+const me = ie(void 0);
+function j() {
+  const t = se(me);
+  if (!t)
+    throw new Error(
+      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
+    );
+  return t;
+}
+const We = "[RealtimeEmbed]";
+function Ye(t) {
+  var r, s;
+  if ((r = t == null ? void 0 : t.requiredPlacements) != null && r.length)
+    return t.requiredPlacements.filter((i) => !i.autoFilledByVariant).map((i) => i.label);
+  const e = new Set(
+    (((s = t == null ? void 0 : t.options) == null ? void 0 : s.combinations) ?? []).map((i) => i.variantId).filter((i) => typeof i == "string" && i !== "")
+  );
+  return !!(t != null && t.variantId) || e.size > 1 ? [] : (t == null ? void 0 : t.placements) ?? [];
+}
+function he({ shop: t, product: e, design: n, hasGrant: r }) {
+  var m, u;
+  const s = [];
+  if (t || s.push({
+    severity: "error",
+    issue: "missing-shop",
+    message: "`shop` is required (your publishable shop id)."
+  }), r || s.push({
+    severity: "error",
+    issue: "missing-grant",
+    message: "no grant source — pass `grantUrl` (a proxy to mintRealtimeGrant) or `grant`. Without it the session can never authorize and no mockup renders."
+  }), (m = e == null ? void 0 : e.mockupIds) != null && m.length || s.push({
+    severity: "error",
+    issue: "empty-mockup-ids",
+    message: 'product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].'
+  }), e != null && e.options)
+    try {
+      le(e);
+    } catch (h) {
+      s.push({
+        severity: "error",
+        issue: "variant-required",
+        message: h instanceof Error ? h.message : String(h)
+      });
+    }
+  const i = n.toJSON(), d = i.activeArtboard, o = Ye(e);
+  o.length > 1 && s.push({
+    severity: "error",
+    issue: "multi-placement",
+    message: `product ${e.productId} requires placements [${o.join(", ")}] but this embed renders a single placement ("${d}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  }), (u = e == null ? void 0 : e.placements) != null && u.length && !e.placements.includes(d) && s.push({
+    severity: "error",
+    issue: "placement-mismatch",
+    message: `the design's placement "${d}" is not in product.placements [${e.placements.join(", ")}]. The canvas artboard name and renderState placement must equal a real product placement label, or the server renders a blank mockup. Fix the \`name\` passed to design({ name }).`
+  });
+  const c = i.elements.map((h) => h.name).filter((h) => !!h), a = c.filter((h, y) => c.indexOf(h) !== y);
+  return a.length && s.push({
+    severity: "warn",
+    issue: "duplicate-layer-names",
+    message: `duplicate layer name(s) [${[...new Set(a)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+  }), s;
+}
+function Je(t) {
+  for (const e of he(t))
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${We} ${e.message}`);
+}
+function Y(t) {
+  return t.text;
+}
+function A(t) {
+  return t.name;
+}
+class Qe {
+  constructor(e) {
+    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (r) => (this.listeners.add(r), () => this.listeners.delete(r)), this.state = e;
+    const n = /* @__PURE__ */ new Map();
+    for (const r of e.elements) {
+      const s = A(r), i = Y(r);
+      s && typeof i == "string" && n.set(s, i);
+    }
+    this.seedTextByName = n;
+  }
+  /** Replace the whole state (the canvas `onChange` path). */
+  setState(e) {
+    this.state = e, this.emit();
+  }
+  /** The seed value of a named text layer (for completeness rule C3). */
+  seedTextOf(e) {
+    return this.seedTextByName.get(e);
+  }
+  /** Current text of a named text layer, or undefined when absent. */
+  textOf(e) {
+    const n = this.state.elements.find((r) => A(r) === e);
+    return n ? Y(n) : void 0;
+  }
+  /** Kind of the named layer in the CURRENT state ('text' | 'image' | null
+   *  for unbindable), or undefined when no layer has the name. */
+  layerKindOf(e) {
+    const n = this.state.elements.find((r) => A(r) === e);
+    return n ? ne(n) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((e) => ne(e) !== null).map(A).filter((e) => !!e);
+  }
+  /**
+   * Direct write path for `Editor.TextField` when NO canvas is mounted (with
+   * one, writes route through the editor command path and arrive back here
+   * via `setState`). Immutable update; last-write-wins.
+   */
+  updateTextLayer(e, n) {
+    let r = !1;
+    const s = this.state.elements.map((i) => A(i) !== e ? i : (r = !0, { ...i, text: n }));
+    if (!r)
+      throw new w(
+        "E_LAYER_NOT_FOUND",
+        `no layer "${e}" in the current design state. Bindable layers: ${JSON.stringify(this.bindableLayerNames())}.`,
+        { layerName: e, validNames: this.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    this.setState({ ...this.state, elements: s });
+  }
+  /** ≥1 element with visible content (completeness rule C4): non-empty text,
+   *  an image with a URL, or a shape. Hidden elements don't count. */
+  hasRenderableElement() {
+    return this.state.elements.some((e) => {
+      if (e.visible === !1) return !1;
+      const n = e.transformType;
+      if (n === "image") return !!e.imageUrl;
+      if (n === "shape" || n === "group" || n === "path") return !0;
+      const r = Y(e);
+      return typeof r == "string" && r.trim().length > 0;
+    });
+  }
+  emit() {
+    for (const e of [...this.listeners]) e();
+  }
+}
+class Xe {
+  constructor() {
+    this.canvasIds = /* @__PURE__ */ new Set(), this.requirements = /* @__PURE__ */ new Map(), this.textFields = /* @__PURE__ */ new Map(), this.controls = /* @__PURE__ */ new Map(), this.bridge = null, this.listeners = /* @__PURE__ */ new Set(), this.version = 0, this.getVersion = () => this.version, this.subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e));
+  }
+  registerCanvas(e) {
+    return this.canvasIds.add(e), this.bump(), () => {
+      this.canvasIds.delete(e), this.bump();
+    };
+  }
+  hasCanvas() {
+    return this.canvasIds.size > 0;
+  }
+  /** Declare that a part is meaningless without a mounted Canvas (ADR-0085 §4
+   *  table). Validated by Root once per commit. */
+  requireCanvas(e, n) {
+    return this.requirements.set(e, n), this.bump(), () => {
+      this.requirements.delete(e), this.bump();
+    };
+  }
+  /** Run by Root during RENDER, re-triggered by every registry change — by
+   *  then the whole commit's registrations are in, so there is no race
+   *  against the lazy chunk (ADR-0085 §4). Throws land in Root's boundary. */
+  validate() {
+    if (this.canvasIds.size > 1)
+      throw new w(
+        "E_DUPLICATE_CANVAS",
+        "two <Editor.Canvas> parts are mounted under one <Editor.Root>. A Root owns exactly one editable artboard — remove one Canvas, or mount a second <Editor.Root> for a second editor. (Multiple <Editor.Preview> parts ARE valid.)",
+        { docSlug: "embed-mode" }
+      );
+    if (this.requirements.size > 0 && !this.hasCanvas()) {
+      const e = [...new Set(this.requirements.values())];
+      throw new w(
+        "E_REQUIRES_CANVAS",
+        `${e.join(", ")} require${e.length === 1 ? "s" : ""} an <Editor.Canvas> under the same <Editor.Root> — they operate on the editable artboard (selection, editor commands). Mount <Editor.Canvas/>, or remove the part. Canvas-free parts: Editor.Preview, Editor.Buy, Editor.TextField, Editor.Layers.`,
+        { parts: e, docSlug: "embed-mode" }
+      );
+    }
+  }
+  registerTextField(e, n) {
+    return this.textFields.set(e, n), this.bump(), () => {
+      this.textFields.delete(e), this.bump();
+    };
+  }
+  /** Mounted TextField registrations — Buy's required-layer list (C2/C3).
+   *  Unmounted (incl. conditionally hidden) fields are absent by construction. */
+  getTextFields() {
+    return [...this.textFields.values()];
+  }
+  /** Bound-layer lookup for the mutation guard (ADR-0085 §3 /
+   *  `E_BOUND_LAYER_MUTATION`): a layer is bound while ANY mounted
+   *  `Editor.TextField` carries its name. Satisfies `BoundLayerGuard`
+   *  structurally (subscribe/getVersion above). */
+  getBoundLayer(e) {
+    for (const n of this.textFields.values())
+      if (n.name === e) return { part: "Editor.TextField" };
+    return null;
+  }
+  /** `Editor.Controls` registration (ADR-0085 §5): a mounted DOCKED Controls
+   *  suppresses the canvas's built-in floating contextual toolbar — one
+   *  contextual zone at a time. `placement="floating"` registers without
+   *  suppressing (it declares today's default explicitly). */
+  registerControls(e, n) {
+    return this.controls.set(e, n), this.bump(), () => {
+      this.controls.delete(e), this.bump();
+    };
+  }
+  hasDockedControls() {
+    for (const e of this.controls.values())
+      if (e === "docked") return !0;
+    return !1;
+  }
+  registerCanvasBridge(e) {
+    return this.bridge = e, this.bump(), () => {
+      this.bridge === e && (this.bridge = null), this.bump();
+    };
+  }
+  getCanvasBridge() {
+    return this.bridge;
+  }
+  bump() {
+    this.version++;
+    for (const e of [...this.listeners]) e();
+  }
+}
+const fe = ie(null);
+function D(t) {
+  const e = se(fe);
+  if (!e)
+    throw new w(
+      "E_OUTSIDE_ROOT",
+      `<${t}> must be rendered inside <Editor.Root>. Wrap it: <Editor.Root shop={…} product={…} design={…} grantUrl={…}><${t}/></Editor.Root>`,
+      { part: t, docSlug: "embed-mode" }
+    );
+  return e;
+}
+function H(t) {
+  const e = D(t), n = P();
+  V(
+    () => e.registry.requireCanvas(n, t),
+    [e.registry, n, t]
+  );
+}
+function Ze(t) {
+  return {
+    reportInvariant(e) {
+      if (qe()) throw e;
+      t(e);
+    },
+    reportRuntimeError(e) {
+      ce(e), t(e);
+    }
+  };
+}
+const pe = 8e3;
+function et(t) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(pe / 1e3)}s. Common causes: a variant product missing \`variantId\` (pass \`product.options\` so the embed can flag it up front), a multi-placement product (the server waits for every required placement but <RealtimeEmbed> sends only "${t}" — pass \`product.requiredPlacements\` so this is flagged at mount; such products need the eject path), an unreachable or non-public asset URL in the design, or the placement "${t}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
+}
+function tt(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 ge({ error: t, onRetry: e }) {
+  const n = de(t) ? t.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ L(
+    "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__ */ L("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 nt extends Ue {
+  constructor() {
+    super(...arguments), this.state = { caught: null };
+  }
+  static getDerivedStateFromError(e) {
+    return { caught: e };
+  }
+  componentDidCatch(e) {
+    var n;
+    ce(e), typeof S < "u" && ((n = S.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+  }
+  render() {
+    return this.state.caught ? /* @__PURE__ */ l(ge, { error: this.state.caught }) : this.props.children;
+  }
+}
+function rt({ reportedError: t, onRetry: e, children: n }) {
+  if (t) {
+    const r = de(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ l(ge, { error: t, onRetry: r ? e : void 0 });
+  }
+  return /* @__PURE__ */ l(nt, { reportedError: null, onRetry: e, children: n });
+}
+function st(t) {
+  const {
+    shop: e,
+    product: n,
+    design: r,
+    throttleMs: s = 200,
+    onMockups: i,
+    onRenderError: d,
+    wsUrl: o,
+    services: c,
+    children: a,
+    internals: m,
+    __validation: u = "throw"
+  } = t, h = I(() => r.toJSON().activeArtboard, [r]), y = He(n.variantId ?? n.defaultGvid), p = I(() => {
+    if (!y) return null;
+    const f = r.toJSON().artboards[0];
+    return ze(y, f) ?? null;
+  }, [y, r]), b = k(i), g = k(d);
+  b.current = i, g.current = d;
+  const [C, z] = R([]), [T, O] = R(!0), [Q, B] = R(null), K = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), G = tt(t), Ee = "grantUrl" in G ? G.grantUrl : "getToken", X = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, U = `${e}|${X}|${h}|${K}`;
+  I(() => {
+    var E;
+    if (u !== "throw") return;
+    const f = he({ shop: e, product: n, design: r, hasGrant: K }), v = f.find((N) => N.severity === "error");
+    if (v)
+      throw new w("E_EMBED_CONFIG", v.message, {
+        issue: v.issue,
+        docSlug: "embed-mode"
+      });
+    for (const N of f)
+      typeof S < "u" && ((E = S.env) == null ? void 0 : E.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${N.message}`);
+  }, [U, u]);
+  const Z = k(null);
+  _(() => {
+    var f;
+    if (u === "warn" && typeof S < "u" && ((f = S.env) == null ? void 0 : f.NODE_ENV) !== "production") {
+      if (Z.current === U) return;
+      Z.current = U, Je({ shop: e, product: n, design: r, hasGrant: K });
+    }
+  }, [U, u]);
+  const F = I(
+    () => {
+      try {
+        return { session: new Fe({ shop: e, product: n, wsUrl: o, ...G }) };
+      } catch (f) {
+        return { error: f instanceof Error ? f.message : String(f) };
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, X, h, o, Ee]
+  ), x = "session" in F ? F.session : null, M = "error" in F ? F.error : null, W = I(() => (f, v = s) => {
+    x && (B(null), O(!0), x.renderState(h, f, v).catch((E) => {
+      var te;
+      const N = E instanceof Error ? E.message : String(E);
+      B(N), O(!1), (te = g.current) == null || te.call(g, N);
+    }));
+  }, [x, h, s]);
+  _(() => {
+    var f;
+    if (M) {
+      B(M), O(!1), (f = g.current) == null || f.call(g, M);
+      return;
+    }
+    if (x)
+      return x.onMockups((v) => {
+        var E;
+        z(v), O(!1), (E = b.current) == null || E.call(b, v);
+      }), x.onError((v) => {
+        var E;
+        B(v), O(!1), (E = g.current) == null || E.call(g, v);
+      }), W(r.toServerRequest()), () => x.close();
+  }, [x, M]), _(() => {
+    var v;
+    if (!T || typeof S > "u" || ((v = S.env) == null ? void 0 : v.NODE_ENV) === "production") return;
+    const f = setTimeout(() => console.warn(et(h)), pe);
+    return () => clearTimeout(f);
+  }, [T, h]);
+  const we = I(
+    () => ({
+      session: x,
+      design: r,
+      placement: h,
+      product: n,
+      mockups: C,
+      isRendering: T,
+      error: Q,
+      throttleMs: s,
+      pieceGuides: p,
+      pushRender: W,
+      stateStore: m.store
+    }),
+    [x, r, h, n, C, T, Q, s, p, W, m.store]
+  ), xe = $(
+    m.registry.subscribe,
+    m.registry.getVersion,
+    m.registry.getVersion
+  );
+  I(() => m.registry.validate(), [m.registry, xe]);
+  const ee = /* @__PURE__ */ l(fe.Provider, { value: m, children: /* @__PURE__ */ l(me.Provider, { value: we, children: /* @__PURE__ */ l(Pe.Provider, { value: m.registry, children: /* @__PURE__ */ l(Ve, { children: a }) }) }) });
+  return c ? /* @__PURE__ */ l(Se, { services: c, children: ee }) : ee;
+}
+function ye(t) {
+  const { design: e } = t, n = k(null), [r, s] = R(null);
+  (n.current === null || n.current.design !== e) && (n.current = {
+    design: e,
+    internals: {
+      store: new Qe(e.toJSON()),
+      registry: new Xe()
+    }
+  });
+  const i = I(
+    () => ({
+      ...n.current.internals,
+      ...Ze(s)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [n.current.internals]
+  );
+  return (
+    // `display: contents` — the .sc-root scope without a layout box, so the
+    // host's grid/flex sees the parts directly (and the legacy RealtimeEmbed
+    // wrapper, which had no DOM at all, stays layout-identical).
+    /* @__PURE__ */ l("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ l(rt, { reportedError: r, onRetry: () => s(null), children: /* @__PURE__ */ l(st, { ...t, internals: i }) }) })
+  );
+}
+let it = () => import("./EditorCanvasImpl-Bv4yagew.js").then((t) => t.EditorCanvasImpl);
+function ve() {
+  return it();
+}
+const at = ae(function({ children: e, maxHeight: n, className: r, style: s }, i) {
+  const d = D("Editor.Canvas"), o = P();
+  V(() => d.registry.registerCanvas(o), [d.registry, o]);
+  const [c, a] = R(null);
+  return _(() => {
+    let m = !1;
+    return ve().then(
+      (u) => {
+        m || a(() => u);
+      },
+      (u) => {
+        m || d.reportRuntimeError(
+          new w(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's rendering chunk failed to load (${u instanceof Error ? u.message : String(u)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: u instanceof Error ? u.message : String(u), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      m = !0;
+    };
+  }, [d]), c ? (
+    // `builtinControls`: the canvas owns the floating contextual toolbar
+    // unless a docked <Editor.Controls> is mounted (ADR-0085 §5). Only here —
+    // the legacy <RealtimeCanvas> wrapper stays chrome-less.
+    /* @__PURE__ */ l(c, { ref: i, kit: "embed-only", partAttr: "canvas", builtinControls: !0, maxHeight: n, className: r, style: s, children: e })
+  ) : /* @__PURE__ */ l(
+    "div",
+    {
+      "data-sc-part": "canvas",
+      "data-sc-state": "loading",
+      className: r,
+      style: { minHeight: n ?? 200, ...s },
+      "aria-busy": "true"
+    }
+  );
+}), ot = 1.2, J = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function lt(t) {
+  for (const e of J)
+    if (e >= t) return e;
+  return J[J.length - 1];
+}
+function dt(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * ot) return null;
+  const n = lt(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 be({
+  mockupId: t,
+  fallback: e = null,
+  alt: n = "Live product mockup",
+  className: r,
+  style: s
+}) {
+  const { mockups: i } = j(), d = k(/* @__PURE__ */ new Set()), o = t ? i.find((a) => a.mockupId === t && a.imageUrl) : i.find((a) => a.imageUrl);
+  if (!(o != null && o.imageUrl))
+    return /* @__PURE__ */ l(Be, { children: e });
+  const c = (a) => {
+    var p;
+    if (typeof S > "u" || ((p = S.env) == null ? void 0 : p.NODE_ENV) === "production" || typeof window > "u" || d.current.has(o.mockupId)) return;
+    const m = a.currentTarget, u = m.getBoundingClientRect().width;
+    if (u <= 0) return;
+    const h = Math.round(u * (window.devicePixelRatio || 1)), y = dt(m.naturalWidth, h);
+    y && (d.current.add(o.mockupId), console.warn(y));
+  };
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ l(
+      "img",
+      {
+        "data-sc-part": "preview",
+        src: o.imageUrl,
+        alt: n,
+        className: r,
+        style: s,
+        onLoad: c
+      }
+    )
+  );
+}
+function ct(t) {
+  const { layer: e, optional: n = !1, placeholder: r, className: s, style: i } = t, d = D("Editor.TextField"), { pushRender: o, throttleMs: c, stateStore: a } = j(), m = P(), u = k(null);
+  if (!Ke(e))
+    throw new w(
+      "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 (u.current !== e.name) {
+    const p = a.layerKindOf(e.name);
+    if (p === void 0)
+      throw new w(
+        "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 (p !== "text")
+      throw new w(
+        "E_LAYER_WRONG_KIND",
+        `layer "${e.name}" is ${p === null ? "not a bindable kind" : `an ${p} layer`} — <Editor.TextField> binds text layers only.`,
+        { layerName: e.name, actualKind: p, docSlug: "embed-mode" }
+      );
+    u.current = e.name;
+  }
+  V(() => d.registry.registerTextField(m, { name: e.name, optional: n }), [d.registry, m, e.name, n]);
+  const h = $(
+    a.subscribe,
+    () => a.textOf(e.name) ?? "",
+    () => a.textOf(e.name) ?? ""
+  ), y = oe(
+    (p) => {
+      const b = p.target.value, g = d.registry.getCanvasBridge();
+      if (g) {
+        g.setTextByName(e.name, b) || d.reportInvariant(
+          new w(
+            "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, b), o(ue(a.getState()), c);
+    },
+    [d, e.name, a, o, c]
+  );
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      "data-sc-part": "textfield",
+      "data-sc-layer": e.name,
+      type: "text",
+      value: h,
+      onChange: y,
+      placeholder: r,
+      "aria-label": t["aria-label"] ?? e.name,
+      className: s,
+      style: i
+    }
+  );
+}
+function ut(t) {
+  const e = [];
+  if (t.product.options)
+    try {
+      le(t.product);
+    } catch {
+      e.push("variant");
+    }
+  for (const n of t.textFields) {
+    if (n.optional) continue;
+    const r = (t.textOf(n.name) ?? "").trim();
+    if (r.length === 0) {
+      e.push(`layer:${n.name}`);
+      continue;
+    }
+    const s = (t.seedTextOf(n.name) ?? "").trim();
+    s.length > 0 && r === s && e.push(`layer-seed:${n.name}`);
+  }
+  return t.hasRenderableElement || e.push("empty-design"), (!Number.isInteger(t.quantity) || t.quantity < 1) && e.push("quantity"), e;
+}
+function mt(t, e) {
+  const n = t.options, r = n == null ? void 0 : n.combinations;
+  if (!n || !(r != null && r.length)) return null;
+  const s = r.find((o) => o.variantId && o.variantId === t.variantId) ?? r[0];
+  if (!s) return null;
+  const i = {};
+  for (const [o, c] of Object.entries(s))
+    o === "variantId" || o === "price" || (typeof c == "string" ? i[o] = c : typeof c == "number" && (i[o] = String(c)));
+  const d = Object.fromEntries(
+    Object.keys(i).map((o) => [
+      o,
+      { key: o, affectsCombinations: !0, choices: [...new Set(r.map((c) => String(c[o] ?? "")))] }
+    ])
+  );
+  return Me({
+    productId: t.productId,
+    quantity: e,
+    selection: i,
+    combinations: r,
+    attributes: d
+  });
+}
+function ht(t) {
+  const { onAddToCart: e, quantity: n = 1, children: r, className: s, style: i } = t, d = D("Editor.Buy"), { product: o, stateStore: c } = j();
+  if (!(o != null && o.productId))
+    throw new w(
+      "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 a = $(c.subscribe, c.getState, c.getState), m = $(
+    d.registry.subscribe,
+    d.registry.getVersion,
+    d.registry.getVersion
+  ), u = I(
+    () => ut({
+      product: o,
+      quantity: n,
+      textFields: d.registry.getTextFields(),
+      textOf: (C) => c.textOf(C),
+      seedTextOf: (C) => c.seedTextOf(C),
+      hasRenderableElement: c.hasRenderableElement()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [o, n, a, m]
+  ), h = u.length === 0, [y, p] = R(!1), b = k(!1), g = oe(() => {
+    if (b.current || !h) return;
+    b.current = !0, p(!0);
+    const C = c.getState(), z = {
+      productId: o.productId,
+      ...o.variantId ? { variantId: o.variantId } : {},
+      quantity: n,
+      cartDetail: mt(o, n),
+      designState: C,
+      serverRequest: ue(C)
+    };
+    let T;
+    try {
+      T = e(z);
+    } catch (O) {
+      throw b.current = !1, p(!1), O;
+    }
+    Promise.resolve(T).finally(() => {
+      b.current = !1, p(!1);
+    });
+  }, [h, o, n, c, e]);
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      "data-sc-part": "buy",
+      "data-sc-buy-state": y ? "busy" : h ? "ready" : "incomplete",
+      "data-sc-buy-missing": u.join(",") || void 0,
+      disabled: !h || y,
+      "aria-busy": y || void 0,
+      onClick: g,
+      className: s,
+      style: i,
+      children: r ?? "Add to cart"
+    }
+  );
+}
+function ft(t) {
+  const { elements: e } = t.getState();
+  return e.map((n, r) => {
+    const s = n, i = s.transformType ?? "custom", d = s.name ?? i.charAt(0).toUpperCase() + i.slice(1);
+    return {
+      key: `${r}:${s.name ?? ""}`,
+      name: d,
+      kind: i,
+      visible: s.visible !== !1
+    };
+  });
+}
+function pt(t) {
+  const e = k(null), n = () => {
+    var i;
+    const r = ft(t), s = r.map((d) => `${d.key}|${d.kind}|${d.visible}`).join(`
+`);
+    return ((i = e.current) == null ? void 0 : i.key) !== s && (e.current = { key: s, rows: r }), e.current.rows;
+  };
+  return $(t.subscribe, n, n);
+}
+function gt(t) {
+  return t === "image" ? q.image : t === "shape" ? q.shapes : t === "group" ? "lucide:folder-open" : q.text;
+}
+function yt({
+  store: t,
+  direction: e
+}) {
+  const r = [...pt(t)].reverse();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: e === "horizontal" ? "row" : "column",
+        gap: 4
+      },
+      children: r.length === 0 ? /* @__PURE__ */ l("div", { style: { padding: 12, fontSize: 12, color: "var(--text-secondary, #999)" }, children: "No layers" }) : r.map((s) => /* @__PURE__ */ L(
+        "div",
+        {
+          "data-sc-part": "layers-item",
+          "data-sc-layer-kind": s.kind,
+          "data-sc-hidden": s.visible ? void 0 : "true",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "6px 8px",
+            minHeight: 36,
+            opacity: s.visible ? 1 : 0.4
+          },
+          children: [
+            /* @__PURE__ */ l(re, { icon: gt(s.kind), style: { fontSize: 18, color: "var(--text-secondary, #888)", flexShrink: 0 } }),
+            /* @__PURE__ */ l(
+              "span",
+              {
+                style: {
+                  fontSize: 13,
+                  color: "var(--foreground, #333)",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: s.name
+              }
+            )
+          ]
+        },
+        s.key
+      ))
+    }
+  );
+}
+function vt({
+  direction: t = "vertical",
+  className: e,
+  style: n
+}) {
+  const r = D("Editor.Layers"), { registry: s } = r, i = $(
+    s.subscribe,
+    () => s.hasCanvas(),
+    () => s.hasCanvas()
+  );
+  return /* @__PURE__ */ l("div", { "data-sc-part": "layers", "data-sc-direction": t, className: e, style: n, children: i ? /* @__PURE__ */ l(Re, { style: { width: "100%" } }) : /* @__PURE__ */ l(yt, { store: r.store, direction: t }) });
+}
+function bt({
+  placement: t = "docked",
+  className: e,
+  style: n
+}) {
+  const r = D("Editor.Controls");
+  H("Editor.Controls");
+  const s = P();
+  V(
+    () => r.registry.registerControls(s, t),
+    [r.registry, s, t]
+  );
+  const i = t === "docked", [d, o] = R(null);
+  return _(() => {
+    if (!i) return;
+    let c = !1;
+    return import("./ContextualToolbars-CkLjHNPn.js").then((a) => a.x).then(
+      (a) => {
+        c || o(() => a.ContextualToolbars);
+      },
+      (a) => {
+        c || r.reportRuntimeError(
+          new w(
+            "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" }
+          )
+        );
+      }
+    ), () => {
+      c = !0;
+    };
+  }, [i, r]), i ? /* @__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 Et({ className: t, style: e }) {
+  return H("Editor.History"), /* @__PURE__ */ l("div", { "data-sc-part": "history", className: t, style: e, children: /* @__PURE__ */ l(Ge, {}) });
+}
+function wt({ className: t, style: e }) {
+  return H("Editor.Menu"), /* @__PURE__ */ l("div", { "data-sc-part": "menu", className: t, style: e, children: /* @__PURE__ */ l(Ce, {}) });
+}
+function xt({ className: t, style: e }) {
+  H("Editor.Add");
+  const { get: n } = je(), [r, s] = R(!1), [i, d] = R(!1), o = async (a) => {
+    if (s(!1), a === "shape") {
+      d(!0);
+      return;
+    }
+    await n().handleAddElement(a);
+  }, c = async (a) => {
+    d(!1), await n().handleAddElement("shape", { shapeType: a });
+  };
+  return /* @__PURE__ */ L("div", { "data-sc-part": "add", className: t, style: e, children: [
+    /* @__PURE__ */ l(
+      Ie,
+      {
+        trigger: /* @__PURE__ */ L(Ne, { delayDuration: 0, children: [
+          /* @__PURE__ */ l(_e, { asChild: !0, children: /* @__PURE__ */ l($e, { variant: "ghost", size: "icon", "aria-label": "Add element", children: /* @__PURE__ */ l(re, { icon: q.plus, className: "sc:size-6" }) }) }),
+          /* @__PURE__ */ l(De, { children: /* @__PURE__ */ l("p", { children: "Add element" }) })
+        ] }),
+        isOpen: r,
+        onToggle: s,
+        position: "bottom",
+        align: "start",
+        children: /* @__PURE__ */ l(ke, { minWidth: "180px", children: Te.map((a) => /* @__PURE__ */ l(
+          Oe,
+          {
+            icon: a.icon,
+            label: a.label,
+            onClick: () => o(a.type)
+          },
+          a.type
+        )) })
+      }
+    ),
+    /* @__PURE__ */ l(
+      Ae,
+      {
+        isOpen: i,
+        onClose: () => d(!1),
+        onSelectType: c
+      }
+    )
+  ] });
+}
+const Dt = {
+  /** The one provider boundary — session, design, live state, error boundary. */
+  Root: ye,
+  /** The editable artboard (the ONE lazy renderer boundary — D9). */
+  Canvas: at,
+  /** Live product mockup. ×N under one Root is valid. */
+  Preview: be,
+  /** Form input bound to a design text layer by typed token (T1). */
+  TextField: ct,
+  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
+  Buy: ht,
+  /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
+  Layers: vt,
+  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
+  Controls: bt,
+  /** Undo/redo controls. Requires Editor.Canvas. */
+  History: Et,
+  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
+  Menu: wt,
+  /** The ⊕ add-element menu. Requires Editor.Canvas. */
+  Add: xt
+};
+function At(t) {
+  return /* @__PURE__ */ l(ye, { ...t, __validation: "warn" });
+}
+const Lt = ae(
+  function(e, n) {
+    const { children: r, className: s, style: i, maxHeight: d, ...o } = e, [c, a] = R(null);
+    return _(() => {
+      let m = !1;
+      return ve().then(
+        (u) => {
+          m || a(() => u);
+        },
+        (u) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", u);
+        }
+      ), () => {
+        m = !0;
+      };
+    }, []), c ? /* @__PURE__ */ l(c, { ref: n, selfScope: !0, maxHeight: d, className: s, style: i, ...o, children: r }) : /* @__PURE__ */ l(
+      "div",
+      {
+        className: `sc-root${s ? ` ${s}` : ""}`,
+        style: { minHeight: d ?? 200, ...i },
+        "aria-busy": "true"
+      }
+    );
+  }
+);
+function Bt(t) {
+  return /* @__PURE__ */ l(be, { ...t });
+}
+function Ut() {
+  const { mockups: t, isRendering: e, error: n } = j();
+  return { mockups: t, isRendering: e, error: n };
+}
+Le();
+export {
+  Qe as D,
+  fe as E,
+  Lt as R,
+  Dt as a,
+  At as b,
+  Bt as c,
+  he as d,
+  Ut as e,
+  j as u,
+  Je as v
+};
+//# sourceMappingURL=embed-Cdbjay9i.js.map