@snowcone-app/canvas 0.18.0 → 0.19.0

package/dist/embed-D0HHwCIO.js

@@ -0,0 +1,1093 @@
+import { C as Re, L as Oe, I as le, o as G, M as ke, D as Te, k as Ne, A as $e, l as _e, T as Ae, h as De, B as Ve, i as Le, S as Be, e as Ue } from "./MenuButton-CeoEAtzP.js";
+import { y as O } from "./FontAnalyzer-DIlqmyuf.js";
+import { jsx as c, jsxs as M, Fragment as Fe } from "react/jsx-runtime";
+import { useContext as de, createContext as ue, useId as W, useLayoutEffect as P, useRef as x, useState as k, useMemo as R, useSyncExternalStore as T, useEffect as N, Component as qe, forwardRef as me, useCallback as Q } from "react";
+import { assertVariantSelected as Me, toOptionAttributes as Pe, toCombinations as je, getMissingSelections as Ke, validateProductSelection as He, findBestCombination as ae, computeDisabledChoices as ze, RenderSession as Ge, createCartDetail as Qe } from "@snowcone-app/sdk";
+import { g as E, i as We, h as he, B as Je, E as Ye, j as Xe } from "./EditorContext-5QpqAhjh.js";
+import { u as Ze, p as et } from "./usePieceGuideBundle-DVOISsB1.js";
+import { r as fe } from "./editorErrors-DXNfVXtD.js";
+import { l as ce, s as ne, i as tt } from "./design-builder-v4935TeS.js";
+import { U as nt } from "./template-fields-Dr3fMItw.js";
+import "./CanvasStateV1-Bq48qhv5.js";
+const pe = ue(void 0);
+function J() {
+  const t = de(pe);
+  if (!t)
+    throw new Error(
+      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
+    );
+  return t;
+}
+const rt = "[RealtimeEmbed]";
+function st(t) {
+  var s, r;
+  if ((s = t == null ? void 0 : t.requiredPlacements) != null && s.length)
+    return t.requiredPlacements.filter((i) => !i.autoFilledByVariant).map((i) => i.label);
+  const e = new Set(
+    (((r = t == null ? void 0 : t.options) == null ? void 0 : r.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 ge({ shop: t, product: e, design: n, hasGrant: s }) {
+  var d, m;
+  const r = [];
+  if (t || r.push({
+    severity: "error",
+    issue: "missing-shop",
+    message: "`shop` is required (your publishable shop id)."
+  }), s || r.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."
+  }), (d = e == null ? void 0 : e.mockupIds) != null && d.length || r.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 {
+      Me(e);
+    } catch (h) {
+      r.push({
+        severity: "error",
+        issue: "variant-required",
+        message: h instanceof Error ? h.message : String(h)
+      });
+    }
+  const i = n.toJSON(), a = i.activeArtboard, u = st(e);
+  u.length > 1 && r.push({
+    severity: "error",
+    issue: "multi-placement",
+    message: `product ${e.productId} requires placements [${u.join(", ")}] but this embed renders a single placement ("${a}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  }), (m = e == null ? void 0 : e.placements) != null && m.length && !e.placements.includes(a) && r.push({
+    severity: "error",
+    issue: "placement-mismatch",
+    message: `the design's placement "${a}" 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 l = i.elements.map((h) => h.name).filter((h) => !!h), o = l.filter((h, v) => l.indexOf(h) !== v);
+  return o.length && r.push({
+    severity: "warn",
+    issue: "duplicate-layer-names",
+    message: `duplicate layer name(s) [${[...new Set(o)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+  }), r;
+}
+function it(t) {
+  for (const e of ge(t))
+    (e.severity === "error" && e.issue !== "placement-mismatch" ? console.error : console.warn)(`${rt} ${e.message}`);
+}
+function Z(t) {
+  return t.text;
+}
+function q(t) {
+  return t.name;
+}
+class ot {
+  constructor(e) {
+    this.listeners = /* @__PURE__ */ new Set(), this.getState = () => this.state, this.subscribe = (s) => (this.listeners.add(s), () => this.listeners.delete(s)), this.state = e;
+    const n = /* @__PURE__ */ new Map();
+    for (const s of e.elements) {
+      const r = q(s), i = Z(s);
+      r && typeof i == "string" && n.set(r, 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((s) => q(s) === e);
+    return n ? Z(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((s) => q(s) === e);
+    return n ? ce(n) : void 0;
+  }
+  /** Names of bindable layers in the current state, for error messages. */
+  bindableLayerNames() {
+    return this.state.elements.filter((e) => ce(e) !== null).map(q).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 s = !1;
+    const r = this.state.elements.map((i) => q(i) !== e ? i : (s = !0, { ...i, text: n }));
+    if (!s)
+      throw new E(
+        "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: r });
+  }
+  /** ≥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 s = Z(e);
+      return typeof s == "string" && s.trim().length > 0;
+    });
+  }
+  emit() {
+    for (const e of [...this.listeners]) e();
+  }
+}
+function te(t) {
+  return (t.choices ?? []).map((e) => typeof e == "string" ? e : e.label ?? "").filter((e) => e !== "");
+}
+function at(t, e) {
+  if (!t.variantId) return {};
+  const n = e.find((r) => r.variantId === t.variantId);
+  if (!n) return {};
+  const s = {};
+  for (const [r, i] of Object.entries(n))
+    r === "variantId" || r === "price" || (typeof i == "string" ? s[r] = i : typeof i == "number" && (s[r] = String(i)));
+  return s;
+}
+class ct {
+  constructor(e) {
+    this.quantity = 1, this.version = 0, this.listeners = /* @__PURE__ */ new Set(), this.getVersion = () => this.version, this.subscribe = (n) => (this.listeners.add(n), () => this.listeners.delete(n)), this.product = e, this.attrs = Pe({ options: e.options }), this.combos = je({ options: e.options }), this.selection = at(e, this.combos);
+  }
+  getAttributes() {
+    return this.attrs;
+  }
+  getSelection() {
+    return this.selection;
+  }
+  getQuantity() {
+    return this.quantity;
+  }
+  /**
+   * Select a choice for a variant attribute. Strict + loud (D4/E3): an
+   * attribute key or choice that doesn't exist on the product is a wiring
+   * mistake, not user state — throws `E_UNKNOWN_OPTION` listing what IS valid.
+   */
+  select(e, n) {
+    const s = this.attrs[e];
+    if (!s)
+      throw new E(
+        "E_UNKNOWN_OPTION",
+        `product ${this.product.productId} has no option "${e}". Valid option keys: ${JSON.stringify(Object.keys(this.attrs))}.`,
+        { key: e, validKeys: Object.keys(this.attrs), docSlug: "embed-mode" }
+      );
+    const r = te(s);
+    if (r.length > 0 && !r.includes(n))
+      throw new E(
+        "E_UNKNOWN_OPTION",
+        `"${n}" is not a choice of option "${e}" on product ${this.product.productId}. Valid choices: ${JSON.stringify(r)}.`,
+        { key: e, choice: n, validChoices: r, docSlug: "embed-mode" }
+      );
+    this.selection[e] !== n && (this.selection = { ...this.selection, [e]: n }, this.bump());
+  }
+  /** Quantity is USER state (completeness rule C5 gates on it) — never throws. */
+  setQuantity(e) {
+    this.quantity !== e && (this.quantity = e, this.bump());
+  }
+  /** Attribute keys still required (non-optional) but unselected — Buy's
+   *  `option:<key>` reason codes. */
+  missingOptionKeys() {
+    return Object.keys(this.attrs).length === 0 ? [] : Ke(this.attrs, this.selection);
+  }
+  /** Full selection resolution (the C1 amendment): true when every required
+   *  attribute is selected AND the selection matches a valid combination. */
+  selectionValid() {
+    return Object.keys(this.attrs).length === 0 ? !0 : He(this.attrs, this.selection, this.combos);
+  }
+  /** The variant (gvid) the current selection resolves to. Falls back to the
+   *  product's initial `variantId` while nothing has been selected. */
+  resolvedVariantId() {
+    if (Object.keys(this.attrs).length === 0 || this.combos.length === 0)
+      return this.product.variantId;
+    if (!this.selectionValid()) return;
+    const e = ae(this.selection, this.combos, this.attrs);
+    return (typeof (e == null ? void 0 : e.variantId) == "string" && e.variantId !== "" ? e.variantId : void 0) ?? this.product.variantId;
+  }
+  /** Price of the resolved combination, when the catalog carries one. */
+  resolvedPrice() {
+    if (!this.selectionValid()) return;
+    const e = ae(this.selection, this.combos, this.attrs);
+    return typeof (e == null ? void 0 : e.price) == "number" ? e.price : void 0;
+  }
+  /** Choices invalid given the rest of the current selection — for hosts to
+   *  disable/grey out in their variant UI. */
+  disabledChoices() {
+    const e = {};
+    for (const [n, s] of Object.entries(this.attrs))
+      e[n] = { ...s, choices: te(s) };
+    return ze(this.selection, e, this.combos);
+  }
+  /** The combinations (for payload assembly via `createCartDetail`). */
+  getCombinations() {
+    return this.combos;
+  }
+  bump() {
+    this.version++;
+    for (const e of [...this.listeners]) e();
+  }
+}
+class lt {
+  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 E(
+        "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 E(
+        "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 ye = ue(null);
+function $(t) {
+  const e = de(ye);
+  if (!e)
+    throw new E(
+      "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 Y(t) {
+  const e = $(t), n = W();
+  P(
+    () => e.registry.requireCanvas(n, t),
+    [e.registry, n, t]
+  );
+}
+function dt(t) {
+  return {
+    reportInvariant(e) {
+      if (We()) throw e;
+      t(e);
+    },
+    reportRuntimeError(e) {
+      fe(e), t(e);
+    }
+  };
+}
+const ve = 8e3;
+function ut(t) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(ve / 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 mt(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 be({ error: t, onRetry: e }) {
+  const n = he(t) ? t.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ M(
+    "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__ */ M("p", { style: { margin: 0, fontWeight: 700 }, children: [
+          "Editor failed: ",
+          n
+        ] }),
+        /* @__PURE__ */ c("p", { style: { margin: "4px 0 0" }, children: t.message }),
+        e ? /* @__PURE__ */ c(
+          "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 ht extends qe {
+  constructor() {
+    super(...arguments), this.state = { caught: null };
+  }
+  static getDerivedStateFromError(e) {
+    return { caught: e };
+  }
+  componentDidCatch(e) {
+    var n;
+    fe(e), typeof O < "u" && ((n = O.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", e);
+  }
+  render() {
+    return this.state.caught ? /* @__PURE__ */ c(be, { error: this.state.caught }) : this.props.children;
+  }
+}
+function ft({ reportedError: t, onRetry: e, children: n }) {
+  if (t) {
+    const s = he(t) && t.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ c(be, { error: t, onRetry: s ? e : void 0 });
+  }
+  return /* @__PURE__ */ c(ht, { reportedError: null, onRetry: e, children: n });
+}
+function pt(t) {
+  const {
+    shop: e,
+    product: n,
+    design: s,
+    throttleMs: r = 200,
+    onMockups: i,
+    onRenderError: a,
+    wsUrl: u,
+    services: l,
+    children: o,
+    internals: d,
+    __validation: m = "throw"
+  } = t, h = R(() => s.toJSON().activeArtboard, [s]);
+  T(
+    d.commerce.subscribe,
+    d.commerce.getVersion,
+    d.commerce.getVersion
+  );
+  const v = d.commerce.resolvedVariantId(), p = Ze(v ?? n.variantId ?? n.defaultGvid), C = R(() => {
+    if (!p) return null;
+    const f = s.toJSON().artboards[0];
+    return et(p, f) ?? null;
+  }, [p, s]), S = x(i), b = x(a);
+  S.current = i, b.current = a;
+  const [_, A] = k([]), [D, w] = k(!0), [U, V] = k(null), L = !!("grantUrl" in t && t.grantUrl || "grant" in t && t.grant), F = mt(t), Ie = "grantUrl" in F ? F.grantUrl : "getToken", re = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, j = `${e}|${re}|${h}|${L}`;
+  R(() => {
+    var I;
+    if (m !== "throw") return;
+    const f = ge({ shop: e, product: n, design: s, hasGrant: L }), g = f.find((B) => B.severity === "error");
+    if (g)
+      throw new E("E_EMBED_CONFIG", g.message, {
+        issue: g.issue,
+        docSlug: "embed-mode"
+      });
+    for (const B of f)
+      typeof O < "u" && ((I = O.env) == null ? void 0 : I.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${B.message}`);
+  }, [j, m]);
+  const se = x(null);
+  N(() => {
+    var f;
+    if (m === "warn" && typeof O < "u" && ((f = O.env) == null ? void 0 : f.NODE_ENV) !== "production") {
+      if (se.current === j) return;
+      se.current = j, it({ shop: e, product: n, design: s, hasGrant: L });
+    }
+  }, [j, m]);
+  const K = R(
+    () => {
+      try {
+        return { session: new Ge({ shop: e, product: n, wsUrl: u, ...F }) };
+      } catch (f) {
+        return { error: f instanceof Error ? f.message : String(f) };
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, re, h, u, Ie]
+  ), y = "session" in K ? K.session : null, H = "error" in K ? K.error : null, z = R(() => (f, g = r) => {
+    y && (V(null), w(!0), y.renderState(h, f, g).catch((I) => {
+      var oe;
+      const B = I instanceof Error ? I.message : String(I);
+      V(B), w(!1), (oe = b.current) == null || oe.call(b, B);
+    }));
+  }, [y, h, r]);
+  N(() => {
+    var f;
+    if (H) {
+      V(H), w(!1), (f = b.current) == null || f.call(b, H);
+      return;
+    }
+    if (y)
+      return y.onMockups((g) => {
+        var I;
+        A(g), w(!1), (I = S.current) == null || I.call(S, g);
+      }), y.onError((g) => {
+        var I;
+        V(g), w(!1), (I = b.current) == null || I.call(b, g);
+      }), z(s.toServerRequest()), () => y.close();
+  }, [y, H]);
+  const X = x({
+    session: null,
+    variantId: void 0
+  });
+  N(() => {
+    if (!y || !v) return;
+    const f = X.current, g = f.session === y ? f.variantId : n.variantId;
+    if (v === g) {
+      X.current = { session: y, variantId: g };
+      return;
+    }
+    X.current = { session: y, variantId: v }, y.setProduct({ ...n, variantId: v }), z(ne(d.store.getState()));
+  }, [y, v]), N(() => {
+    var g;
+    if (!D || typeof O > "u" || ((g = O.env) == null ? void 0 : g.NODE_ENV) === "production") return;
+    const f = setTimeout(() => console.warn(ut(h)), ve);
+    return () => clearTimeout(f);
+  }, [D, h]);
+  const Ce = R(
+    () => ({
+      session: y,
+      design: s,
+      placement: h,
+      product: n,
+      mockups: _,
+      isRendering: D,
+      error: U,
+      throttleMs: r,
+      pieceGuides: C,
+      pushRender: z,
+      stateStore: d.store
+    }),
+    [y, s, h, n, _, D, U, r, C, z, d.store]
+  ), xe = T(
+    d.registry.subscribe,
+    d.registry.getVersion,
+    d.registry.getVersion
+  );
+  R(() => d.registry.validate(), [d.registry, xe]);
+  const ie = /* @__PURE__ */ c(ye.Provider, { value: d, children: /* @__PURE__ */ c(pe.Provider, { value: Ce, children: /* @__PURE__ */ c(Je.Provider, { value: d.registry, children: /* @__PURE__ */ c(Ye, { children: o }) }) }) });
+  return l ? /* @__PURE__ */ c(Re, { services: l, children: ie }) : ie;
+}
+function Ee(t) {
+  const { design: e, product: n } = t, s = `${n.productId}|${n.variantId ?? ""}`, r = x(null), i = x(null), [a, u] = k(null);
+  (r.current === null || r.current.design !== e) && (r.current = {
+    design: e,
+    internals: {
+      store: new ot(e.toJSON()),
+      registry: new lt()
+    }
+  }), (i.current === null || i.current.productIdentity !== s) && (i.current = { productIdentity: s, commerce: new ct(n) });
+  const l = R(
+    () => ({
+      ...r.current.internals,
+      commerce: i.current.commerce,
+      ...dt(u)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [r.current.internals, i.current.commerce]
+  );
+  return (
+    // `display: contents` — the .sc-root scope without a layout box, so the
+    // host's grid/flex sees the parts directly (and the legacy RealtimeEmbed
+    // wrapper, which had no DOM at all, stays layout-identical).
+    /* @__PURE__ */ c("div", { className: "sc-root", style: { display: "contents" }, "data-sc-part": "root", children: /* @__PURE__ */ c(ft, { reportedError: a, onRetry: () => u(null), children: /* @__PURE__ */ c(pt, { ...t, internals: l }) }) })
+  );
+}
+let gt = () => import("./EditorCanvasImpl-Cthm-KSe.js").then((t) => t.EditorCanvasImpl);
+function Se() {
+  return gt();
+}
+const yt = me(function({ children: e, maxHeight: n, className: s, style: r }, i) {
+  const a = $("Editor.Canvas"), u = W();
+  P(() => a.registry.registerCanvas(u), [a.registry, u]);
+  const [l, o] = k(null);
+  return N(() => {
+    let d = !1;
+    return Se().then(
+      (m) => {
+        d || o(() => m);
+      },
+      (m) => {
+        d || a.reportRuntimeError(
+          new E(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's rendering chunk failed to load (${m instanceof Error ? m.message : String(m)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: m instanceof Error ? m.message : String(m), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      d = !0;
+    };
+  }, [a]), l ? (
+    // `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__ */ c(l, { ref: i, kit: "embed-only", partAttr: "canvas", builtinControls: !0, maxHeight: n, className: s, style: r, children: e })
+  ) : /* @__PURE__ */ c(
+    "div",
+    {
+      "data-sc-part": "canvas",
+      "data-sc-state": "loading",
+      className: s,
+      style: { minHeight: n ?? 200, ...r },
+      "aria-busy": "true"
+    }
+  );
+}), vt = 1.2, ee = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function bt(t) {
+  for (const e of ee)
+    if (e >= t) return e;
+  return ee[ee.length - 1];
+}
+function Et(t, e) {
+  if (!(t > 0) || !(e > 0) || e <= t * vt) return null;
+  const n = bt(e);
+  return `[RealtimeMockup] mockup rendered at ${t}px but displayed at ~${e} device px — the preview will look soft. Pass \`product.width\` (e.g. ${n}) on the embed for a crisp preview.`;
+}
+function we({
+  mockupId: t,
+  fallback: e = null,
+  alt: n = "Live product mockup",
+  className: s,
+  style: r
+}) {
+  const { mockups: i, error: a } = J(), u = x(/* @__PURE__ */ new Set()), l = t ? i.find((d) => d.mockupId === t && d.imageUrl) : i.find((d) => d.imageUrl);
+  if (!(l != null && l.imageUrl))
+    return a ? /* @__PURE__ */ c("div", { "data-sc-part": "preview-error", role: "alert", "data-sc-error": a, className: s, style: r, children: e ?? `Render failed: ${a}` }) : /* @__PURE__ */ c(Fe, { children: e });
+  const o = (d) => {
+    var C;
+    if (typeof O > "u" || ((C = O.env) == null ? void 0 : C.NODE_ENV) === "production" || typeof window > "u" || u.current.has(l.mockupId)) return;
+    const m = d.currentTarget, h = m.getBoundingClientRect().width;
+    if (h <= 0) return;
+    const v = Math.round(h * (window.devicePixelRatio || 1)), p = Et(m.naturalWidth, v);
+    p && (u.current.add(l.mockupId), console.warn(p));
+  };
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ c(
+      "img",
+      {
+        "data-sc-part": "preview",
+        src: l.imageUrl,
+        alt: n,
+        className: s,
+        style: r,
+        onLoad: o
+      }
+    )
+  );
+}
+function St(t) {
+  const { layer: e, optional: n = !1, placeholder: s, className: r, style: i } = t, a = $("Editor.TextField"), { pushRender: u, throttleMs: l, stateStore: o } = J(), d = W(), m = x(null);
+  if (!tt(e))
+    throw new E(
+      "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 p = o.layerKindOf(e.name);
+    if (p === void 0)
+      throw new E(
+        "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(o.bindableLayerNames())}.`,
+        { layerName: e.name, validNames: o.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    if (p !== "text")
+      throw new E(
+        "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" }
+      );
+    m.current = e.name;
+  }
+  P(() => a.registry.registerTextField(d, { name: e.name, optional: n }), [a.registry, d, e.name, n]);
+  const h = T(
+    o.subscribe,
+    () => o.textOf(e.name) ?? "",
+    () => o.textOf(e.name) ?? ""
+  ), v = Q(
+    (p) => {
+      const C = p.target.value, S = a.registry.getCanvasBridge();
+      if (S) {
+        S.setTextByName(e.name, C) || a.reportInvariant(
+          new E(
+            "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;
+      }
+      o.updateTextLayer(e.name, C), u(ne(o.getState()), l);
+    },
+    [a, e.name, o, u, l]
+  );
+  return /* @__PURE__ */ c(
+    "input",
+    {
+      "data-sc-part": "textfield",
+      "data-sc-layer": e.name,
+      type: "text",
+      value: h,
+      onChange: v,
+      placeholder: s,
+      "aria-label": t["aria-label"] ?? e.name,
+      className: r,
+      style: i
+    }
+  );
+}
+function wt(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 s = (t.textOf(n.name) ?? "").trim();
+    if (s.length === 0) {
+      e.push(`layer:${n.name}`);
+      continue;
+    }
+    const r = (t.seedTextOf(n.name) ?? "").trim();
+    r.length > 0 && s === r && e.push(`layer-seed:${n.name}`);
+  }
+  return t.hasRenderableElement || e.push("empty-design"), (!Number.isInteger(t.quantity) || t.quantity < 1) && e.push("quantity"), e;
+}
+function It(t, e) {
+  const n = e.getCombinations(), s = e.getAttributes();
+  if (Object.keys(s).length === 0 || n.length === 0) return null;
+  const r = Object.fromEntries(
+    Object.entries(s).map(([i, a]) => [
+      i,
+      { ...a, choices: te(a) }
+    ])
+  );
+  return Qe({
+    productId: t.productId,
+    quantity: e.getQuantity(),
+    selection: e.getSelection(),
+    combinations: n,
+    attributes: r
+  });
+}
+function Ct(t) {
+  const { onAddToCart: e, defaultQuantity: n, children: s, className: r, style: i } = t, a = $("Editor.Buy"), { product: u, stateStore: l } = J(), o = a.commerce;
+  if (!(u != null && u.productId))
+    throw new E(
+      "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 d = x(!1);
+  P(() => {
+    d.current || (d.current = !0, typeof n == "number" && o.setQuantity(n));
+  }, [o]);
+  const m = T(l.subscribe, l.getState, l.getState), h = T(o.subscribe, o.getVersion, o.getVersion), v = T(
+    a.registry.subscribe,
+    a.registry.getVersion,
+    a.registry.getVersion
+  ), p = o.getQuantity(), C = R(
+    () => wt({
+      quantity: p,
+      missingOptionKeys: o.missingOptionKeys(),
+      selectionValid: o.selectionValid(),
+      textFields: a.registry.getTextFields(),
+      textOf: (w) => l.textOf(w),
+      seedTextOf: (w) => l.seedTextOf(w),
+      hasRenderableElement: l.hasRenderableElement()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [o, p, m, h, v]
+  ), S = C.length === 0, [b, _] = k(!1), A = x(!1), D = Q(() => {
+    if (A.current || !S) return;
+    A.current = !0, _(!0);
+    const w = l.getState(), U = o.resolvedVariantId(), V = {
+      productId: u.productId,
+      ...U ? { variantId: U } : {},
+      quantity: o.getQuantity(),
+      selection: o.getSelection(),
+      cartDetail: It(u, o),
+      designState: w,
+      serverRequest: ne(w)
+    };
+    let L;
+    try {
+      L = e(V);
+    } catch (F) {
+      throw A.current = !1, _(!1), F;
+    }
+    Promise.resolve(L).finally(() => {
+      A.current = !1, _(!1);
+    });
+  }, [S, u, o, l, e]);
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      "data-sc-part": "buy",
+      "data-sc-buy-state": b ? "busy" : S ? "ready" : "incomplete",
+      "data-sc-buy-missing": C.join(",") || void 0,
+      disabled: !S || b,
+      "aria-busy": b || void 0,
+      onClick: D,
+      className: r,
+      style: i,
+      children: s ?? "Add to cart"
+    }
+  );
+}
+function xt(t) {
+  const { elements: e } = t.getState();
+  return e.map((n, s) => {
+    const r = n, i = r.transformType ?? "custom", a = r.name ?? i.charAt(0).toUpperCase() + i.slice(1);
+    return {
+      key: `${s}:${r.name ?? ""}`,
+      name: a,
+      kind: i,
+      visible: r.visible !== !1
+    };
+  });
+}
+function Rt(t) {
+  const e = x(null), n = () => {
+    var i;
+    const s = xt(t), r = s.map((a) => `${a.key}|${a.kind}|${a.visible}`).join(`
+`);
+    return ((i = e.current) == null ? void 0 : i.key) !== r && (e.current = { key: r, rows: s }), e.current.rows;
+  };
+  return T(t.subscribe, n, n);
+}
+function Ot(t) {
+  return t === "image" ? G.image : t === "shape" ? G.shapes : t === "group" ? "lucide:folder-open" : G.text;
+}
+function kt({
+  store: t,
+  direction: e
+}) {
+  const s = [...Rt(t)].reverse();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: e === "horizontal" ? "row" : "column",
+        gap: 4
+      },
+      children: s.length === 0 ? /* @__PURE__ */ c("div", { style: { padding: 12, fontSize: 12, color: "var(--text-secondary, #999)" }, children: "No layers" }) : s.map((r) => /* @__PURE__ */ M(
+        "div",
+        {
+          "data-sc-part": "layers-item",
+          "data-sc-layer-kind": r.kind,
+          "data-sc-hidden": r.visible ? void 0 : "true",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "6px 8px",
+            minHeight: 36,
+            opacity: r.visible ? 1 : 0.4
+          },
+          children: [
+            /* @__PURE__ */ c(le, { icon: Ot(r.kind), style: { fontSize: 18, color: "var(--text-secondary, #888)", flexShrink: 0 } }),
+            /* @__PURE__ */ c(
+              "span",
+              {
+                style: {
+                  fontSize: 13,
+                  color: "var(--foreground, #333)",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: r.name
+              }
+            )
+          ]
+        },
+        r.key
+      ))
+    }
+  );
+}
+function Tt({
+  direction: t = "vertical",
+  className: e,
+  style: n
+}) {
+  const s = $("Editor.Layers"), { registry: r } = s, i = T(
+    r.subscribe,
+    () => r.hasCanvas(),
+    () => r.hasCanvas()
+  );
+  return /* @__PURE__ */ c("div", { "data-sc-part": "layers", "data-sc-direction": t, className: e, style: n, children: i ? /* @__PURE__ */ c(Oe, { style: { width: "100%" } }) : /* @__PURE__ */ c(kt, { store: s.store, direction: t }) });
+}
+function Nt({
+  placement: t = "docked",
+  className: e,
+  style: n
+}) {
+  const s = $("Editor.Controls");
+  Y("Editor.Controls");
+  const r = W();
+  P(
+    () => s.registry.registerControls(r, t),
+    [s.registry, r, t]
+  );
+  const i = t === "docked", [a, u] = k(null);
+  return N(() => {
+    if (!i) return;
+    let l = !1;
+    return import("./ContextualToolbars-CkLjHNPn.js").then((o) => o.x).then(
+      (o) => {
+        l || u(() => o.ContextualToolbars);
+      },
+      (o) => {
+        l || s.reportRuntimeError(
+          new E(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's controls chunk failed to load (${o instanceof Error ? o.message : String(o)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: o instanceof Error ? o.message : String(o), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      l = !0;
+    };
+  }, [i, s]), i ? /* @__PURE__ */ c(
+    "div",
+    {
+      "data-sc-part": "controls",
+      "data-sc-placement": "docked",
+      className: e,
+      style: n,
+      "aria-busy": a ? void 0 : "true",
+      children: a ? /* @__PURE__ */ c(a, { mode: "embedded" }) : null
+    }
+  ) : null;
+}
+function $t({ className: t, style: e }) {
+  return Y("Editor.History"), /* @__PURE__ */ c("div", { "data-sc-part": "history", className: t, style: e, children: /* @__PURE__ */ c(nt, {}) });
+}
+function _t({ className: t, style: e }) {
+  return Y("Editor.Menu"), /* @__PURE__ */ c("div", { "data-sc-part": "menu", className: t, style: e, children: /* @__PURE__ */ c(ke, {}) });
+}
+function At({ className: t, style: e }) {
+  Y("Editor.Add");
+  const { get: n } = Xe(), [s, r] = k(!1), [i, a] = k(!1), u = async (o) => {
+    if (r(!1), o === "shape") {
+      a(!0);
+      return;
+    }
+    await n().handleAddElement(o);
+  }, l = async (o) => {
+    a(!1), await n().handleAddElement("shape", { shapeType: o });
+  };
+  return /* @__PURE__ */ M("div", { "data-sc-part": "add", className: t, style: e, children: [
+    /* @__PURE__ */ c(
+      Te,
+      {
+        trigger: /* @__PURE__ */ M(Ae, { delayDuration: 0, children: [
+          /* @__PURE__ */ c(De, { asChild: !0, children: /* @__PURE__ */ c(Ve, { variant: "ghost", size: "icon", "aria-label": "Add element", children: /* @__PURE__ */ c(le, { icon: G.plus, className: "sc:size-6" }) }) }),
+          /* @__PURE__ */ c(Le, { children: /* @__PURE__ */ c("p", { children: "Add element" }) })
+        ] }),
+        isOpen: s,
+        onToggle: r,
+        position: "bottom",
+        align: "start",
+        children: /* @__PURE__ */ c(Ne, { minWidth: "180px", children: $e.map((o) => /* @__PURE__ */ c(
+          _e,
+          {
+            icon: o.icon,
+            label: o.label,
+            onClick: () => u(o.type)
+          },
+          o.type
+        )) })
+      }
+    ),
+    /* @__PURE__ */ c(
+      Be,
+      {
+        isOpen: i,
+        onClose: () => a(!1),
+        onSelectType: l
+      }
+    )
+  ] });
+}
+function Ht() {
+  const e = $("useProductSelection").commerce, n = T(e.subscribe, e.getVersion, e.getVersion), s = Q((i, a) => e.select(i, a), [e]), r = Q((i) => e.setQuantity(i), [e]);
+  return R(
+    () => ({
+      attributes: e.getAttributes(),
+      selection: e.getSelection(),
+      select: s,
+      disabledChoices: e.disabledChoices(),
+      variantId: e.resolvedVariantId(),
+      price: e.resolvedPrice(),
+      quantity: e.getQuantity(),
+      setQuantity: r,
+      complete: e.selectionValid(),
+      missing: e.missingOptionKeys()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, s, r, n]
+  );
+}
+const zt = {
+  /** The one provider boundary — session, design, live state, error boundary. */
+  Root: Ee,
+  /** The editable artboard (the ONE lazy renderer boundary — D9). */
+  Canvas: yt,
+  /** Live product mockup. ×N under one Root is valid. */
+  Preview: we,
+  /** Form input bound to a design text layer by typed token (T1). */
+  TextField: St,
+  /** Smart commerce part: completeness + payload assembly; submit = host callback. */
+  Buy: Ct,
+  /** Layer list. The one editor part that works canvas-free (ADR-0085 §4). */
+  Layers: Tt,
+  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
+  Controls: Nt,
+  /** Undo/redo controls. Requires Editor.Canvas. */
+  History: $t,
+  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
+  Menu: _t,
+  /** The ⊕ add-element menu. Requires Editor.Canvas. */
+  Add: At
+};
+function Gt(t) {
+  return /* @__PURE__ */ c(Ee, { ...t, __validation: "warn" });
+}
+const Qt = me(
+  function(e, n) {
+    const { children: s, className: r, style: i, maxHeight: a, ...u } = e, [l, o] = k(null);
+    return N(() => {
+      let d = !1;
+      return Se().then(
+        (m) => {
+          d || o(() => m);
+        },
+        (m) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", m);
+        }
+      ), () => {
+        d = !0;
+      };
+    }, []), l ? /* @__PURE__ */ c(l, { ref: n, selfScope: !0, maxHeight: a, className: r, style: i, ...u, children: s }) : /* @__PURE__ */ c(
+      "div",
+      {
+        className: `sc-root${r ? ` ${r}` : ""}`,
+        style: { minHeight: a ?? 200, ...i },
+        "aria-busy": "true"
+      }
+    );
+  }
+);
+function Wt(t) {
+  return /* @__PURE__ */ c(we, { ...t });
+}
+function Jt() {
+  const { mockups: t, isRendering: e, error: n } = J();
+  return { mockups: t, isRendering: e, error: n };
+}
+Ue();
+export {
+  ot as D,
+  ye as E,
+  Qt as R,
+  zt as a,
+  Gt as b,
+  Wt as c,
+  ge as d,
+  Ht as e,
+  Jt as f,
+  J as u,
+  it as v
+};
+//# sourceMappingURL=embed-D0HHwCIO.js.map