@snowcone-app/canvas 0.36.7 → 0.37.1

package/dist/embed-CLz3CTcX.js

@@ -0,0 +1,1799 @@
+import { E as Ke, p as Ge, q as We, C as He, r as te, t as ne, v as Je, w as Qe, x as Ye, y as Xe, z as Ze, h as et, e as tt } from "./useCommands-CQi4Pyd2.js";
+import { E as I, y as Ce, z as P } from "./FontAnalyzer-CEYA_6fY.js";
+import { jsx as c, jsxs as F, Fragment as nt } from "react/jsx-runtime";
+import { useContext as rt, createContext as it, useRef as O, useState as T, useMemo as L, useCallback as K, useLayoutEffect as re, useEffect as U, useSyncExternalStore as J, Component as st, forwardRef as $e, useId as ge, memo as ot, isValidElement as Oe } from "react";
+import { assertVariantSelected as at, RenderSession as dt, createCartDetail as lt } from "@snowcone-app/sdk";
+import { s as de, B as ct, E as ut, r as mt, i as pt } from "./design-builder-CqgTpp9B.js";
+import { u as ft, p as ht } from "./usePieceGuideBundle-BUQKb0Ja.js";
+import { D as gt, C as yt, f as bt, d as vt } from "./template-fields-D8uOutD4.js";
+import "./ExportManager-CDX5_up8.js";
+import "./CanvasStateV1-DLE5d1-d.js";
+const Ne = it(void 0);
+function Q() {
+  const e = rt(Ne);
+  if (!e)
+    throw new Error(
+      "useRealtimeMockups / <RealtimeCanvas> / <RealtimeMockup> must be rendered inside <RealtimeEmbed>. Wrap them: <RealtimeEmbed shop=… product=… design=… grantUrl=…>…</RealtimeEmbed>"
+    );
+  return e;
+}
+function _e(e) {
+  var t;
+  return Array.isArray((t = e.bundle) == null ? void 0 : t.members) && e.bundle.members.length > 0;
+}
+const G = "bundles";
+function wt(e) {
+  return Object.keys(e).sort().map((t) => `${t}:${e[t]}`).join(",");
+}
+function ye(e) {
+  const t = e.indexOf(".");
+  return t <= 0 || t === e.length - 1 ? null : { role: e.slice(0, t), key: e.slice(t + 1) };
+}
+function Et(e) {
+  return e.type !== "color" && typeof e.width == "number" && e.width > 0 && typeof e.height == "number" && e.height > 0;
+}
+function kt(e, t) {
+  var i, s;
+  const n = (s = (i = e.options) == null ? void 0 : i.combinations) == null ? void 0 : s.find((o) => o.variantId === t);
+  if (!n) return t;
+  const r = Object.entries(n).filter(([o, l]) => o !== "variantId" && o !== "price" && (typeof l == "string" || typeof l == "number")).map(([o, l]) => `${o} ${String(l)}`);
+  return r.length > 0 ? r.join(" · ") : t;
+}
+function yn(e, t = {}) {
+  var E, A, C, D, V;
+  if (!_e(e))
+    throw new I(
+      "E_NOT_A_BUNDLE",
+      `product ${e.id} has no bundle block — picks / variants are bundle parameters the server refuses on a single product (E_NOT_A_BUNDLE). Use productToRenderConfig() for it.`,
+      { productId: e.id, docSlug: G }
+    );
+  const n = e.bundle.members, r = n.map((m) => m.role);
+  for (const [m, R] of [
+    ["picks", t.picks],
+    ["variants", t.variants]
+  ])
+    for (const N of Object.keys(R ?? {}))
+      if (!r.includes(N))
+        throw new I(
+          "E_BUNDLE_ROLE_NOT_FOUND",
+          `bundle ${e.id} has no role "${N}" (in ${m}). Roles: [${r.join(", ")}].`,
+          { productId: e.id, field: m, role: N, validNames: r, docSlug: G }
+        );
+  const i = {}, s = {}, o = {}, l = e.placements ?? [], u = [];
+  for (const m of n) {
+    const R = m.products.map((w) => w.productId), N = (E = t.picks) == null ? void 0 : E[m.role], _ = N === void 0 ? m.products[0] : m.products.find((w) => w.productId === N);
+    if (!_)
+      throw new I(
+        "E_BUNDLE_PICK_NOT_FOUND",
+        `bundle ${e.id} role "${m.role}" has no alternative "${N}". Alternatives: [${R.join(", ")}] — pass picks: { ${m.role}: "${R[0]}" }.`,
+        { productId: e.id, role: m.role, requested: N, validNames: R, docSlug: G }
+      );
+    i[m.role] = _.productId;
+    const Y = (_.variants ?? []).map((w) => w.gvid).filter((w) => typeof w == "string" && w !== ""), q = Y.length > 0 ? Y : _.defaultGvid ? [_.defaultGvid] : [], M = ((A = t.variants) == null ? void 0 : A[m.role]) ?? _.defaultGvid ?? Y[0];
+    if (!M || !q.includes(M)) {
+      const w = (C = t.variants) == null ? void 0 : C[m.role];
+      throw new I(
+        "E_BUNDLE_VARIANT_NOT_FOUND",
+        q.length === 0 ? `bundle ${e.id} role "${m.role}": alternative ${_.productId} publishes no variant — nothing can render this slot (catalog data is incomplete).` : `bundle ${e.id} role "${m.role}" (${_.productId}) has no variant "${w}". Variants: [${q.join(", ")}] — pass variants: { ${m.role}: "${q[0]}" }.`,
+        {
+          productId: e.id,
+          role: m.role,
+          memberProductId: _.productId,
+          requested: w,
+          validNames: q,
+          docSlug: G
+        }
+      );
+    }
+    s[m.role] = M, o[m.role] = ((V = (D = _.variants) == null ? void 0 : D.find((w) => w.gvid === M)) == null ? void 0 : V.gvidForMockup) || M;
+    const ie = l.filter(
+      (w) => w.role === m.role && w.memberProductId === _.productId && typeof w.key == "string" && w.key !== "" && Et(w)
+    ).map((w) => ({
+      key: w.key,
+      role: m.role,
+      label: w.label,
+      memberProductId: _.productId,
+      width: w.width,
+      height: w.height,
+      aspectRatio: w.width / w.height
+    }));
+    u.push({
+      role: m.role,
+      required: m.required !== !1,
+      alternatives: R,
+      pick: _.productId,
+      variantId: M,
+      variantChoices: q.map((w) => ({ gvid: w, label: kt(_, w) })),
+      placements: ie
+    });
+  }
+  const a = new Set(u.flatMap((m) => m.placements.map((R) => R.key))), h = new Map(u.flatMap((m) => m.placements.map((R) => [R.key, R]))), p = [];
+  for (const m of l) {
+    if (typeof m.key != "string" || !a.has(m.key)) continue;
+    const R = h.get(m.key);
+    R && !p.includes(R) && p.push(R);
+  }
+  const b = p.map((m) => m.key);
+  let k;
+  if (t.placement !== void 0) {
+    if (!ye(t.placement))
+      throw new I(
+        "E_BUNDLE_ROLE_REQUIRED",
+        `placement "${t.placement}" names no role — on bundle ${e.id} a placement is addressed by its role-scoped key. Keys: [${b.join(", ")}].`,
+        { productId: e.id, requested: t.placement, validNames: b, docSlug: G }
+      );
+    if (k = p.find((m) => m.key === t.placement), !k)
+      throw new I(
+        "E_PRODUCT_NOT_RENDERABLE",
+        `bundle ${e.id} has no renderable placement "${t.placement}" for picks ${JSON.stringify(i)}. Keys: [${b.join(", ")}].`,
+        { productId: e.id, requested: t.placement, picks: i, validNames: b, docSlug: G }
+      );
+  } else
+    k = p[0];
+  if (!k)
+    throw new I(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `bundle ${e.id} has no renderable image placement for picks ${JSON.stringify(i)} (a role-scoped, non-color placement with width/height). The catalog payload may be incomplete — fetch it via getProduct(), not a search hit.`,
+      { productId: e.id, picks: i, docSlug: G }
+    );
+  const d = e.mockups ?? [], v = d.filter(
+    (m) => !m.picks || Object.entries(m.picks).every(([R, N]) => i[R] === N)
+  ), g = (v.length > 0 ? v : d).map((m) => m.id);
+  if (g.length === 0)
+    throw new I(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `bundle ${e.id} has no mockup scenes — nothing to render a preview into.`,
+      { productId: e.id, docSlug: G }
+    );
+  const f = (e.requiredPlacements ?? []).filter((m) => typeof m.key == "string" && m.key !== "" && a.has(m.key)).map((m) => ({ label: m.key, key: m.key, type: m.type, autoFilledByVariant: m.autoFilledByVariant }));
+  return {
+    kind: "bundle",
+    product: {
+      productId: e.id,
+      mockupIds: g,
+      picks: i,
+      variants: s,
+      placements: b,
+      mockups: d,
+      ...f.length > 0 ? { requiredPlacements: f } : {},
+      ...typeof t.width == "number" ? { width: t.width } : {}
+    },
+    picks: i,
+    variants: s,
+    variantToken: wt(o),
+    roles: u,
+    placement: k,
+    placements: p,
+    placementKeys: b,
+    roleNames: r,
+    primaryMockupId: g[0]
+  };
+}
+const Rt = "[RealtimeEmbed]";
+function Te(e) {
+  var r, i;
+  if ((r = e == null ? void 0 : e.requiredPlacements) != null && r.length)
+    return e.requiredPlacements.filter((s) => !s.autoFilledByVariant).map((s) => s.label);
+  const t = new Set(
+    (((i = e == null ? void 0 : e.options) == null ? void 0 : i.combinations) ?? []).map((s) => s.variantId).filter((s) => typeof s == "string" && s !== "")
+  );
+  return !!(e != null && e.variantId) || t.size > 1 ? [] : (e == null ? void 0 : e.placements) ?? [];
+}
+function xt(e) {
+  return !!(e != null && e.picks) || !!(e != null && e.variants);
+}
+function It(e) {
+  const t = /* @__PURE__ */ new Set();
+  for (const n of e.placements ?? []) {
+    const r = ye(n);
+    r && t.add(r.role);
+  }
+  for (const n of Object.keys(e.picks ?? {})) t.add(n);
+  for (const n of Object.keys(e.variants ?? {})) t.add(n);
+  return [...t];
+}
+function Ae({ shop: e, product: t, design: n, hasGrant: r }) {
+  var d, v;
+  const i = [];
+  if (e || 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."
+  }), (d = t == null ? void 0 : t.mockupIds) != null && d.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"].'
+  }), t != null && t.options)
+    try {
+      at(t);
+    } catch (g) {
+      i.push({
+        severity: "error",
+        issue: "variant-required",
+        message: g instanceof Error ? g.message : String(g)
+      });
+    }
+  const s = n.toJSON(), o = s.artboards.map((g) => g.name), l = xt(t);
+  let u = [];
+  if (l) {
+    const g = t.placements ?? [];
+    u = o.filter((E) => !ye(E)), u.length > 0 && i.push({
+      severity: "error",
+      issue: "bundle-role-required",
+      message: `product ${t.productId} is a bundle, but the design's artboard(s) [${u.join(", ")}] name no role. On a bundle every placement is addressed by its role-scoped key (<role>.<key>)${g.length ? ` — keys: [${g.join(", ")}]` : ""}. Seed the design from bundleToRenderConfig(product).placement.key, not from a bare label.`
+    }), t.variantId && i.push({
+      severity: "error",
+      issue: "bundle-role-required",
+      message: `product ${t.productId} is a bundle, but product.variantId ("${t.variantId}") names no slot — the server refuses it (E_BUNDLE_ROLE_REQUIRED). Name the variant per role instead: product.variants = { <role>: <gvid> } (bundleToRenderConfig fills it), and leave variantId unset.`
+    });
+    const S = It(t).filter((E) => {
+      var A;
+      return !((A = t.variants) != null && A[E]);
+    });
+    S.length > 0 && i.push({
+      severity: "error",
+      issue: "bundle-variant-required",
+      message: `product ${t.productId} is a bundle, but role(s) [${S.join(", ")}] have no entry in product.variants (${JSON.stringify(t.variants ?? {})}). Every role needs a variant — the server keys the render on the per-role set. Build the product with bundleToRenderConfig(product, { picks, variants }), which fills each slot's default.`
+    });
+  }
+  const a = Te(t), h = a.filter((g) => !o.includes(g));
+  a.length > 1 && o.length > 1 && h.length > 0 && i.push({
+    severity: "error",
+    issue: "multi-placement",
+    message: `product ${t.productId} requires placements [${a.join(", ")}] but the design only has artboards [${o.join(", ")}] — missing [${h.join(", ")}]. The render would time out waiting for the missing canvas_states. Add each missing placement to the seed: design(…).artboard('` + h[0] + "', { width, height })… (ADR-0088), or use the eject path — see https://developers.snowcone.app/embed-mode#eject."
+  });
+  const p = (v = t == null ? void 0 : t.placements) != null && v.length ? o.filter((g) => !t.placements.includes(g) && !u.includes(g)) : [];
+  p.length > 0 && i.push({
+    severity: "error",
+    issue: "placement-mismatch",
+    message: `the design's artboard(s) [${p.join(", ")}] are not in product.placements [${t.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 b = s.elements.map((g) => g.name).filter((g) => !!g), k = b.filter((g, f) => b.indexOf(g) !== f);
+  return k.length && i.push({
+    severity: "warn",
+    issue: "duplicate-layer-names",
+    message: `duplicate layer name(s) [${[...new Set(k)].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 St(e) {
+  for (const t of Ae(e))
+    (t.severity === "error" && t.issue !== "placement-mismatch" ? console.error : console.warn)(`${Rt} ${t.message}`);
+}
+function De({ registry: e, store: t, product: n }) {
+  const r = [], i = e.getParts(), s = e.getTextFields(), o = e.requiresCanvasPartNames();
+  o.length > 0 && !e.hasCanvas() && r.push({
+    code: "A_REQUIRES_CANVAS",
+    severity: "error",
+    message: `${o.join(", ")} ${o.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 ${o.join(", ")}. Canvas-free parts: Editor.Preview, Editor.Buy, Editor.TextField, Editor.Layers.`
+  });
+  const l = i.filter((d) => d.name === "Editor.Canvas").some((d) => d.meta.floatingToolbar !== !1);
+  e.hasDockedControls() && l && 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 d = i.filter((v) => v.name === "Editor.Preview" && v.meta.mockupId === void 0);
+    d.length > 0 && r.push({
+      code: "A_PREVIEW_AMBIGUOUS",
+      severity: "warn",
+      message: `${d.length} <Editor.Preview> part${d.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((d) => d.name === "Editor.Buy");
+  if (s.length > 0 && !a) {
+    const d = s.map((v) => v.name);
+    r.push({
+      code: "A_NO_BUY",
+      severity: "info",
+      message: `<Editor.TextField> parts are mounted (layers [${d.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 h = [];
+  for (const d of s)
+    t.layerKindOf(d.name) === void 0 ? r.push({
+      code: "A_LAYER_UNMATCHED",
+      severity: "error",
+      message: `<Editor.TextField layer={design.layer("${d.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(t.bindableLayerNames())}.`,
+      fix: `Restore a text layer named "${d.name}" to the design, or bind the field to an existing layer: layer={design.layer(<one of ${JSON.stringify(t.bindableLayerNames())}>)}.`
+    }) : h.push(d);
+  const p = h.filter((d) => !d.optional);
+  if (p.length > 0 && p.every((d) => t.textOf(d.name) === t.seedTextOf(d.name))) {
+    const d = p.map((v) => v.name);
+    r.push({
+      code: "A_TEXT_AT_SEED",
+      severity: "info",
+      message: `every required <Editor.TextField> still equals its seed value (layers [${d.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>."
+    });
+  }
+  t.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 b = /* @__PURE__ */ new Map();
+  for (const d of i) b.set(d.name, (b.get(d.name) ?? 0) + 1);
+  const k = [...b.entries()].map(([d, v]) => ({ name: d, count: v })).sort((d, v) => d.name.localeCompare(v.name));
+  return { findings: r, parts: k };
+}
+const ee = [];
+function Ct(e) {
+  return ee.push(e), () => {
+    const t = ee.indexOf(e);
+    t !== -1 && ee.splice(t, 1);
+  };
+}
+function bn() {
+  const e = ee[ee.length - 1];
+  if (!e)
+    throw new I(
+      "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 e.compute();
+}
+const Be = 8e3;
+function $t(e) {
+  return `[RealtimeEmbed] No mockup after ${Math.round(Be / 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 "${e}" — 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 "${e}" not existing on the product. The render may still arrive — this is a heads-up, not a failure.`;
+}
+function Ot(e) {
+  if ("grantUrl" in e && e.grantUrl)
+    return { grantUrl: e.grantUrl };
+  const t = e.grant;
+  return typeof t == "function" ? { getToken: t } : { getToken: () => Promise.resolve(t) };
+}
+function Le({ error: e, onRetry: t }) {
+  const n = Ce(e) ? e.code : "EDITOR_ERROR";
+  return /* @__PURE__ */ F(
+    "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__ */ F("p", { style: { margin: 0, fontWeight: 700 }, children: [
+          "Editor failed: ",
+          n
+        ] }),
+        /* @__PURE__ */ c("p", { style: { margin: "4px 0 0" }, children: e.message }),
+        t ? /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            "data-sc-part": "error-retry",
+            onClick: t,
+            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 st {
+  constructor() {
+    super(...arguments), this.state = { caught: null };
+  }
+  static getDerivedStateFromError(t) {
+    return { caught: t };
+  }
+  componentDidCatch(t) {
+    var n;
+    mt(t), typeof P < "u" && ((n = P.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.error("[Editor.Root] contained a composition error:", t);
+  }
+  render() {
+    return this.state.caught ? /* @__PURE__ */ c(Le, { error: this.state.caught }) : this.props.children;
+  }
+}
+function _t({ reportedError: e, onRetry: t, children: n }) {
+  if (e) {
+    const r = Ce(e) && e.code === "E_CHUNK_LOAD_FAILED";
+    return /* @__PURE__ */ c(Le, { error: e, onRetry: r ? t : void 0 });
+  }
+  return /* @__PURE__ */ c(Nt, { reportedError: null, onRetry: t, children: n });
+}
+function Tt(e) {
+  const {
+    shop: t,
+    product: n,
+    design: r,
+    throttleMs: i = 200,
+    onMockups: s,
+    onRenderError: o,
+    onIssue: l,
+    wsUrl: u,
+    services: a,
+    children: h,
+    internals: p,
+    recordAudit: b,
+    __validation: k = "throw"
+  } = e, d = L(() => r.toJSON().activeArtboard, [r]), v = L(() => r.toJSON().artboards.map((y) => y.name), [r]), [g, f] = T(null), S = g && g.design === r ? g.label : d, E = L(
+    () => (y) => {
+      if (!v.includes(y))
+        throw new I(
+          "E_UNKNOWN_PLACEMENT",
+          `no placement "${y}" in this design — its artboards are ${JSON.stringify(v)}. Add it to the seed with design(…).artboard('${y}', { width, height }) (ADR-0088).`,
+          { placement: y, validNames: v, docSlug: "embed-mode" }
+        );
+      f({ design: r, label: y });
+    },
+    [r, v]
+  ), A = L(() => {
+    const y = r.toJSON().artboards[0];
+    if (y)
+      return {
+        name: y.name,
+        width: y.width,
+        height: y.height,
+        ...y.backgroundColor ? { backgroundColor: y.backgroundColor } : {}
+      };
+  }, [r]);
+  J(
+    p.commerce.subscribe,
+    p.commerce.getVersion,
+    p.commerce.getVersion
+  );
+  const C = p.commerce.renderVariantId(), D = ft(C ?? n.variantId ?? n.defaultGvid), V = L(() => {
+    if (!D) return null;
+    const y = r.toJSON().artboards[0];
+    return ht(D, y) ?? null;
+  }, [D, r]), m = O(s), R = O(o), N = O(l);
+  m.current = s, R.current = o, N.current = l;
+  const [_, Y] = T([]), [q, M] = T(!0), [ie, w] = T(null), le = !!("grantUrl" in e && e.grantUrl || "grant" in e && e.grant), ce = Ot(e), qe = "grantUrl" in ce ? ce.grantUrl : "getToken", be = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, X = n.picks || n.variants ? JSON.stringify([n.picks ?? null, n.variants ?? null]) : "", H = `${t}|${be}|${X}|${d}|${le}`, ue = L(() => {
+    var B;
+    const y = Ae({ shop: t, product: n, design: r, hasGrant: le });
+    if (k !== "throw") return y;
+    const $ = y.find((z) => z.severity === "error");
+    if ($)
+      throw new I("E_EMBED_CONFIG", $.message, {
+        issue: $.issue,
+        docSlug: "embed-mode"
+      });
+    for (const z of y)
+      typeof P < "u" && ((B = P.env) == null ? void 0 : B.NODE_ENV) !== "production" && console.warn(`[Editor.Root] ${z.message}`);
+    return y;
+  }, [H, k]), ve = O(null);
+  U(() => {
+    var y;
+    if (ue.length !== 0 && ve.current !== H) {
+      ve.current = H;
+      for (const $ of ue) (y = N.current) == null || y.call(N, $);
+    }
+  }, [ue, H]);
+  const we = O(null);
+  U(() => {
+    var y;
+    if (k === "warn" && typeof P < "u" && ((y = P.env) == null ? void 0 : y.NODE_ENV) !== "production") {
+      if (we.current === H) return;
+      we.current = H, St({ shop: t, product: n, design: r, hasGrant: le });
+    }
+  }, [H, k]);
+  const se = L(
+    () => {
+      try {
+        return { session: new dt({ shop: t, product: n, wsUrl: u, ...ce }) };
+      } catch (y) {
+        return { error: y instanceof Error ? y.message : String(y) };
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, be, d, u, qe]
+  ), x = "session" in se ? se.session : null, oe = "error" in se ? se.error : null, Z = L(() => (y, $ = i) => {
+    if (!x) return;
+    w(null), M(!0);
+    const B = (j) => {
+      var Ie;
+      const ae = j instanceof Error ? j.message : String(j);
+      w(ae), M(!1), (Ie = R.current) == null || Ie.call(R, ae);
+    }, z = (j, ae) => void x.renderState(j, { schemaVersion: y.schemaVersion, artboards: [ae] }, $).catch(B), pe = y.artboards ?? [];
+    if (pe.length > 1) {
+      for (const j of pe)
+        z(typeof j.name == "string" && j.name ? j.name : d, j);
+      return;
+    }
+    const Re = Te(n), xe = pe[0];
+    if (xe && Re.length > 1) {
+      for (const j of Re)
+        z(j, { ...xe, name: j });
+      return;
+    }
+    x.renderState(d, y, $).catch(B);
+  }, [x, d, n, i]);
+  U(() => {
+    var y;
+    if (oe) {
+      w(oe), M(!1), (y = R.current) == null || y.call(R, oe);
+      return;
+    }
+    if (x)
+      return x.onMockups(($) => {
+        var B;
+        Y($), M(!1), (B = m.current) == null || B.call(m, $);
+      }), x.onError(($) => {
+        var B;
+        w($), M(!1), (B = R.current) == null || B.call(R, $);
+      }), Z(r.toServerRequest()), () => x.close();
+  }, [x, oe]);
+  const me = O({
+    session: null,
+    variantId: void 0
+  });
+  U(() => {
+    if (!x || !C) return;
+    const y = me.current, $ = y.session === x ? y.variantId : n.variantId;
+    if (C === $) {
+      me.current = { session: x, variantId: $ };
+      return;
+    }
+    me.current = { session: x, variantId: C }, x.setProduct({ ...n, variantId: C }), Z(de(p.store.getState()));
+  }, [x, C]);
+  const Ee = O({ session: null, key: "" });
+  U(() => {
+    if (!x || !X) return;
+    const y = Ee.current;
+    if (y.session === x && y.key === X) return;
+    const $ = y.session !== x;
+    Ee.current = { session: x, key: X }, !$ && (x.setProduct(n), Z(de(p.store.getState())));
+  }, [x, X]), U(() => {
+    if (!q) return;
+    const y = setTimeout(() => {
+      var B, z;
+      const $ = $t(d);
+      typeof P < "u" && ((B = P.env) == null ? void 0 : B.NODE_ENV) !== "production" && console.warn($), (z = N.current) == null || z.call(N, { severity: "warn", issue: "slow-render", message: $ });
+    }, Be);
+    return () => clearTimeout(y);
+  }, [q, d]);
+  const Pe = L(
+    () => ({
+      session: x,
+      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: v,
+      selectPlacement: E,
+      product: n,
+      mockups: _,
+      isRendering: q,
+      error: ie,
+      throttleMs: i,
+      pieceGuides: V,
+      pushRender: Z,
+      stateStore: p.store
+    }),
+    [x, r, S, v, E, n, _, q, ie, i, V, Z, p.store]
+  ), ze = J(
+    p.registry.subscribe,
+    p.registry.getVersion,
+    p.registry.getVersion
+  );
+  L(() => {
+    b(
+      De({ registry: p.registry, store: p.store, product: n })
+    ), p.registry.validate();
+  }, [p.registry, ze]);
+  const ke = /* @__PURE__ */ c(We.Provider, { value: p, children: /* @__PURE__ */ c(Ne.Provider, { value: Pe, children: /* @__PURE__ */ c(ct.Provider, { value: p.registry, children: /* @__PURE__ */ c(
+    ut,
+    {
+      ...A ? { initialArtboardConfig: A } : {},
+      children: h
+    }
+  ) }) }) });
+  return a ? /* @__PURE__ */ c(He, { services: a, children: ke }) : ke;
+}
+function Ue(e) {
+  const { design: t, product: n, onAudit: r } = e, i = `${n.productId}|${n.variantId ?? ""}`, s = O(null), o = O(null), [l, u] = T(null);
+  (s.current === null || s.current.design !== t) && (s.current = {
+    design: t,
+    internals: {
+      store: new gt(t.toJSON()),
+      registry: new Ke()
+    }
+  }), (o.current === null || o.current.productIdentity !== i) && (o.current = { productIdentity: i, commerce: new yt(n) });
+  const a = L(
+    () => ({
+      ...s.current.internals,
+      commerce: o.current.commerce,
+      ...Ge(u)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s.current.internals, o.current.commerce]
+  ), h = O(n);
+  h.current = n;
+  const p = O(r);
+  p.current = r;
+  const b = O(null), k = K((g) => {
+    b.current = g;
+  }, []), d = K(
+    () => De({
+      registry: s.current.internals.registry,
+      store: s.current.internals.store,
+      product: h.current
+    }),
+    []
+  );
+  re(() => Ct({ compute: d }), [d]);
+  const v = O(!1);
+  return U(() => {
+    let g = !1;
+    return queueMicrotask(() => {
+      var f;
+      g || v.current || (v.current = !0, (f = p.current) == null || f.call(p, b.current ?? d()));
+    }), () => {
+      g = !0;
+    };
+  }, [d]), // `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(_t, { reportedError: l, onRetry: () => u(null), children: /* @__PURE__ */ c(Tt, { ...e, internals: a, recordAudit: k }) }) });
+}
+let At = () => import("./EditorCanvasImpl-BRdFWZA5.js").then((e) => e.EditorCanvasImpl);
+function Fe() {
+  return At();
+}
+const Dt = $e(function({ children: t, maxHeight: n, floatingToolbar: r = !0, className: i, style: s }, o) {
+  const l = te("Editor.Canvas");
+  ne("Editor.Canvas", { floatingToolbar: r });
+  const u = ge();
+  re(() => l.registry.registerCanvas(u), [l.registry, u]);
+  const [a, h] = T(null);
+  return U(() => {
+    let p = !1;
+    return Fe().then(
+      (b) => {
+        p || h(() => b);
+      },
+      (b) => {
+        p || l.reportRuntimeError(
+          new I(
+            "E_CHUNK_LOAD_FAILED",
+            `the editor's rendering chunk failed to load (${b instanceof Error ? b.message : String(b)}). This is a network/CDN failure, not a composition mistake — retry, or check the deployment serves the @snowcone-app/canvas lazy chunks.`,
+            { cause: b instanceof Error ? b.message : String(b), docSlug: "embed-mode" }
+          )
+        );
+      }
+    ), () => {
+      p = !0;
+    };
+  }, [l]), 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__ */ c(
+      a,
+      {
+        ref: o,
+        kit: "embed-only",
+        partAttr: "canvas",
+        builtinControls: r,
+        maxHeight: n,
+        className: i,
+        style: s,
+        children: t
+      }
+    )
+  ) : /* @__PURE__ */ c(
+    "div",
+    {
+      "data-sc-part": "canvas",
+      "data-sc-state": "loading",
+      className: i,
+      style: { minHeight: n ?? 200, ...s },
+      "aria-busy": "true"
+    }
+  );
+});
+function Bt() {
+  const { placements: e, placement: t, selectPlacement: n } = Q();
+  return L(
+    () => ({
+      placements: e.map((r) => ({ label: r, active: r === t })),
+      activePlacement: t,
+      select: n
+    }),
+    [e, t, n]
+  );
+}
+function Lt({ className: e, style: t }) {
+  const { placements: n, select: r } = Bt();
+  return n.length < 2 ? null : /* @__PURE__ */ c(
+    "div",
+    {
+      "data-sc-part": "placements",
+      className: e,
+      style: { display: "flex", alignItems: "center", gap: "4px", ...t },
+      children: n.map(({ label: i, active: s }) => /* @__PURE__ */ c(
+        "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 Ut = 200, Ft = 400;
+function Vt() {
+  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 Se = !1;
+function jt() {
+  if (!(Se || typeof CSS > "u" || typeof CSS.registerProperty != "function")) {
+    Se = !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 Ve = ot(function({
+  visible: t = !0,
+  onExited: n,
+  variant: r = "dark"
+}) {
+  jt();
+  const [i, s] = T([]);
+  U(() => {
+    s(Vt());
+  }, []);
+  const [o, l] = T(!1);
+  U(() => {
+    const h = requestAnimationFrame(() => l(!0));
+    return () => cancelAnimationFrame(h);
+  }, []);
+  const u = K(
+    (h) => {
+      h.propertyName === "background-color" && (t || n == null || n());
+    },
+    [t, n]
+  );
+  let a = "";
+  return t ? o && (a = "sc-prism-fade-in") : a = "sc-prism-fade-out", /* @__PURE__ */ F(
+    "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 }, (h, p) => /* @__PURE__ */ c("div", { className: "sc-prism-band" }, `b-${p}`)),
+        i.map((h, p) => /* @__PURE__ */ c(
+          "div",
+          {
+            className: "sc-prism-particle",
+            style: {
+              left: `${h.left}%`,
+              top: `${h.top}%`,
+              animationDelay: `${h.delay}s`,
+              animationDuration: `${h.duration}s`,
+              width: `${h.size}px`,
+              height: `${h.size}px`
+            }
+          },
+          `p-${p}`
+        ))
+      ]
+    }
+  );
+});
+function je(e) {
+  const [t, n] = T(!1), [r, i] = T(!1), s = O(null), o = O(null), l = O(!1);
+  l.current = t, U(() => (e ? (i(!1), o.current && clearTimeout(o.current), s.current = setTimeout(() => n(!0), Ut)) : (s.current && (clearTimeout(s.current), s.current = null), l.current && (i(!0), o.current = setTimeout(() => i(!1), Ft))), () => {
+    s.current && clearTimeout(s.current), o.current && clearTimeout(o.current);
+  }), [e]);
+  const u = K(() => n(!1), []);
+  return {
+    showOverlay: t,
+    overlayVisible: e || r,
+    handleExited: u
+  };
+}
+const Mt = 1.2, fe = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function qt(e) {
+  for (const t of fe)
+    if (t >= e) return t;
+  return fe[fe.length - 1];
+}
+function Pt(e, t) {
+  if (!(e > 0) || !(t > 0) || t <= e * Mt) return null;
+  const n = qt(t);
+  return `[RealtimeMockup] mockup rendered at ${e}px but displayed at ~${t} device px — the preview will look soft. Pass \`product.width\` (e.g. ${n}) on the embed for a crisp preview.`;
+}
+function zt(e) {
+  if (e === void 0 || e === !0 || e === "dark") return "dark";
+  if (e === "light" || e === "host-owned" || Oe(e)) return e;
+  throw new I(
+    "E_PREVIEW_NO_LOADER",
+    `Editor.Preview: invalid loadingOverlay value ${JSON.stringify(e)}. 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 Me({
+  mockupId: e,
+  fallback: t = null,
+  alt: n = "Live product mockup",
+  loadingOverlay: r,
+  className: i,
+  style: s
+}) {
+  const { mockups: o, error: l, isRendering: u } = Q();
+  ne("Editor.Preview", { ...e !== void 0 ? { mockupId: e } : {} });
+  const a = zt(r), h = a === "dark" || a === "light" ? a : null, p = Oe(a) ? a : null, b = a !== "host-owned", { showOverlay: k, overlayVisible: d, handleExited: v } = je(
+    b && u
+  ), g = O(/* @__PURE__ */ new Set()), f = e ? o.find((E) => E.mockupId === e && E.imageUrl) : o.find((E) => E.imageUrl), S = (E) => {
+    var m;
+    if (!f || typeof P > "u" || ((m = P.env) == null ? void 0 : m.NODE_ENV) === "production" || typeof window > "u" || g.current.has(f.mockupId)) return;
+    const A = E.currentTarget, C = A.getBoundingClientRect().width;
+    if (C <= 0) return;
+    const D = Math.round(C * (window.devicePixelRatio || 1)), V = Pt(A.naturalWidth, D);
+    V && (g.current.add(f.mockupId), console.warn(V));
+  };
+  if (b) {
+    const E = f != null && f.imageUrl ? u ? "rendering" : "ready" : l ? "error" : "rendering";
+    return /* @__PURE__ */ F(
+      "div",
+      {
+        "data-sc-part": "preview",
+        "data-sc-preview-state": E,
+        "aria-busy": E === "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__ */ c("img", { "data-sc-part": "preview-image", src: f.imageUrl, alt: n, onLoad: S })
+          ) : l ? /* @__PURE__ */ c("div", { "data-sc-part": "preview-error", role: "alert", "data-sc-error": l, children: t ?? `Render failed: ${l}` }) : t,
+          p ? (
+            // Custom indicator: same show-delay + linger window; no exit fade
+            // (the host owns its animation), so it unmounts when the window
+            // closes.
+            k && d ? /* @__PURE__ */ c(
+              "div",
+              {
+                "data-sc-part": "preview-loading",
+                className: "sc-preview-custom-loading",
+                "aria-hidden": "true",
+                children: p
+              }
+            ) : null
+          ) : k && h ? /* @__PURE__ */ c(
+            Ve,
+            {
+              visible: d,
+              variant: h,
+              onExited: v
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return f != null && f.imageUrl ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ c(
+      "img",
+      {
+        "data-sc-part": "preview",
+        "data-sc-preview-state": u ? "rendering" : "ready",
+        src: f.imageUrl,
+        alt: n,
+        className: i,
+        style: s,
+        onLoad: S
+      }
+    )
+  ) : l ? /* @__PURE__ */ c(
+    "div",
+    {
+      "data-sc-part": "preview-error",
+      "data-sc-preview-state": "error",
+      role: "alert",
+      "data-sc-error": l,
+      className: i,
+      style: s,
+      children: t ?? `Render failed: ${l}`
+    }
+  ) : /* @__PURE__ */ c("div", { "data-sc-part": "preview", "data-sc-preview-state": "rendering", "aria-busy": "true", style: { display: "contents" }, children: t });
+}
+function Kt(e) {
+  const { layer: t, optional: n = !1, placeholder: r, className: i, style: s } = e, o = te("Editor.TextField");
+  ne("Editor.TextField");
+  const { pushRender: l, throttleMs: u, stateStore: a } = Q(), h = ge(), p = O(null);
+  if (!pt(t))
+    throw new I(
+      "E_LAYER_TOKEN_REQUIRED",
+      `the \`layer\` prop must be a token minted by the design — pass layer={design.layer("name")}, not ${typeof t == "string" ? `the bare string "${t}"` : "a plain value"}. Tokens validate the name against the design's layers at mint time.`,
+      { received: typeof t == "string" ? t : typeof t, docSlug: "embed-mode" }
+    );
+  if (p.current !== t.name) {
+    const d = a.layerKindOf(t.name);
+    if (d === void 0)
+      throw new I(
+        "E_LAYER_NOT_FOUND",
+        `no layer "${t.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: t.name, validNames: a.bindableLayerNames(), docSlug: "embed-mode" }
+      );
+    if (d !== "text")
+      throw new I(
+        "E_LAYER_WRONG_KIND",
+        `layer "${t.name}" is ${d === null ? "not a bindable kind" : `an ${d} layer`} — <Editor.TextField> binds text layers only.`,
+        { layerName: t.name, actualKind: d, docSlug: "embed-mode" }
+      );
+    p.current = t.name;
+  }
+  re(() => o.registry.registerTextField(h, { name: t.name, optional: n }), [o.registry, h, t.name, n]);
+  const b = J(
+    a.subscribe,
+    () => a.textOf(t.name) ?? "",
+    () => a.textOf(t.name) ?? ""
+  ), k = K(
+    (d) => {
+      const v = d.target.value, g = o.registry.getCanvasBridge();
+      if (g) {
+        g.setTextByName(t.name, v) || o.reportInvariant(
+          new I(
+            "E_LAYER_NOT_FOUND",
+            `layer "${t.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: t.name, docSlug: "embed-mode" }
+          )
+        );
+        return;
+      }
+      a.updateTextLayer(t.name, v), l(de(a.getState()), u);
+    },
+    [o, t.name, a, l, u]
+  );
+  return /* @__PURE__ */ c(
+    "input",
+    {
+      "data-sc-part": "textfield",
+      "data-sc-layer": t.name,
+      type: "text",
+      value: b,
+      onChange: k,
+      placeholder: r,
+      "aria-label": e["aria-label"] ?? t.name,
+      className: i,
+      style: s
+    }
+  );
+}
+function Gt(e) {
+  const t = [];
+  for (const n of e.missingOptionKeys)
+    t.push(`option:${n}`);
+  e.missingOptionKeys.length === 0 && !e.selectionValid && t.push("variant");
+  for (const n of e.textFields) {
+    if (n.optional) continue;
+    const r = (e.textOf(n.name) ?? "").trim();
+    if (r.length === 0) {
+      t.push(`layer:${n.name}`);
+      continue;
+    }
+    const i = (e.seedTextOf(n.name) ?? "").trim();
+    i.length > 0 && r === i && t.push(`layer-seed:${n.name}`);
+  }
+  return e.hasRenderableElement || t.push("empty-design"), (!Number.isInteger(e.quantity) || e.quantity < 1) && t.push("quantity"), t;
+}
+function Wt(e, t) {
+  const n = t.getCombinations(), r = t.getAttributes();
+  if (Object.keys(r).length === 0 || n.length === 0) return null;
+  const i = Object.fromEntries(
+    Object.entries(r).map(([s, o]) => [s, { ...o, choices: bt(o) }])
+  );
+  return lt({
+    productId: e.productId,
+    quantity: t.getQuantity(),
+    selection: t.getSelection(),
+    combinations: n,
+    attributes: i
+  });
+}
+function Ht(e) {
+  const { onAddToCart: t, defaultQuantity: n, children: r, className: i, style: s } = e, o = te("Editor.Buy");
+  ne("Editor.Buy");
+  const { product: l, stateStore: u } = Q(), a = o.commerce;
+  if (!(l != null && l.productId))
+    throw new I(
+      "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 h = O(!1);
+  re(() => {
+    h.current || (h.current = !0, typeof n == "number" && a.setQuantity(n));
+  }, [a]);
+  const p = J(u.subscribe, u.getState, u.getState), b = J(a.subscribe, a.getVersion, a.getVersion), k = J(
+    o.registry.subscribe,
+    o.registry.getVersion,
+    o.registry.getVersion
+  ), d = a.getQuantity(), v = L(
+    () => Gt({
+      quantity: d,
+      missingOptionKeys: a.missingOptionKeys(),
+      selectionValid: a.selectionValid(),
+      textFields: o.registry.getTextFields(),
+      textOf: (C) => u.textOf(C),
+      seedTextOf: (C) => u.seedTextOf(C),
+      hasRenderableElement: u.hasRenderableElement()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, d, p, b, k]
+  ), g = v.length === 0, [f, S] = T(!1), E = O(!1), A = K(() => {
+    if (E.current || !g) return;
+    E.current = !0, S(!0);
+    const C = u.getState(), D = a.resolvedVariantId(), V = {
+      productId: l.productId,
+      ...D ? { variantId: D } : {},
+      quantity: a.getQuantity(),
+      selection: a.getSelection(),
+      cartDetail: Wt(l, a),
+      designState: C,
+      serverRequest: de(C)
+    };
+    let m;
+    try {
+      m = t(V);
+    } catch (R) {
+      throw E.current = !1, S(!1), R;
+    }
+    Promise.resolve(m).finally(() => {
+      E.current = !1, S(!1);
+    });
+  }, [g, l, a, u, t]);
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      "data-sc-part": "buy",
+      "data-sc-buy-state": f ? "busy" : g ? "ready" : "incomplete",
+      "data-sc-buy-missing": v.join(",") || void 0,
+      disabled: !g || f,
+      "aria-busy": f || void 0,
+      onClick: A,
+      className: i,
+      style: s,
+      children: r ?? "Add to cart"
+    }
+  );
+}
+function Jt({
+  placement: e = "docked",
+  className: t,
+  style: n
+}) {
+  const r = te("Editor.Controls");
+  Je("Editor.Controls"), ne("Editor.Controls");
+  const i = ge();
+  re(
+    () => r.registry.registerControls(i, e),
+    [r.registry, i, e]
+  );
+  const s = e === "docked", [o, l] = T(null);
+  return U(() => {
+    if (!s) return;
+    let u = !1;
+    return import("./ContextualToolbars-CG5Gmv_i.js").then((a) => a.s).then(
+      (a) => {
+        u || l(() => a.ContextualToolbars);
+      },
+      (a) => {
+        u || r.reportRuntimeError(
+          new I(
+            "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__ */ c(
+    "div",
+    {
+      "data-sc-part": "controls",
+      "data-sc-placement": "docked",
+      className: t,
+      style: n,
+      "aria-busy": o ? void 0 : "true",
+      children: o ? /* @__PURE__ */ c(o, { mode: "embedded" }) : null
+    }
+  ) : null;
+}
+function Qt({
+  variant: e = "dark",
+  className: t,
+  style: n
+}) {
+  const { isRendering: r } = Q(), { showOverlay: i, overlayVisible: s, handleExited: o } = je(r);
+  return i ? /* @__PURE__ */ c(
+    "div",
+    {
+      "data-sc-part": "loading-overlay",
+      className: `sc-loading-overlay-host${t ? ` ${t}` : ""}`,
+      style: n,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ c(Ve, { visible: s, variant: e, onExited: o })
+    }
+  ) : null;
+}
+function Yt() {
+  const t = te("useProductSelection").commerce, n = J(t.subscribe, t.getVersion, t.getVersion), r = K((s, o) => t.select(s, o), [t]), i = K((s) => t.setQuantity(s), [t]);
+  return L(
+    () => ({
+      attributes: t.getAttributes(),
+      selection: t.getSelection(),
+      select: r,
+      disabledChoices: t.disabledChoices(),
+      variantId: t.resolvedVariantId(),
+      price: t.resolvedPrice(),
+      quantity: t.getQuantity(),
+      setQuantity: i,
+      complete: t.selectionValid(),
+      missing: t.missingOptionKeys()
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, r, i, n]
+  );
+}
+const W = {
+  /** The one provider boundary — session, design, live state, error boundary. */
+  Root: Ue,
+  /** The editable artboard (the ONE lazy renderer boundary — D9). */
+  Canvas: Dt,
+  /** Live product mockup. ×N under one Root is valid. */
+  Preview: Me,
+  /** Placement switcher tabs (ADR-0088). Renders nothing for a
+   *  single-placement design; headless floor = usePlacements(). */
+  Placements: Lt,
+  /** Form input bound to a design text layer by typed token (T1). */
+  TextField: Kt,
+  /** 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: Ze,
+  /** Morphing contextual zone — ONE coarse part; placement docked|floating (§5). */
+  Controls: Jt,
+  /** Undo/redo controls. Requires Editor.Canvas. */
+  History: Xe,
+  /** The one ⋯ overflow menu. Requires Editor.Canvas. */
+  Menu: Ye,
+  /** The ⊕ add-element menu. Requires Editor.Canvas. */
+  Add: Qe,
+  /** Standalone render-in-flight rainbow for host-owned preview surfaces.
+   *  Fills its positioned parent; rides the session (canvas-free). */
+  LoadingOverlay: Qt
+};
+function vn(e) {
+  return /* @__PURE__ */ c(Ue, { ...e, __validation: "warn" });
+}
+const wn = $e(
+  function(t, n) {
+    const { children: r, className: i, style: s, maxHeight: o, ...l } = t, [u, a] = T(null);
+    return U(() => {
+      let h = !1;
+      return Fe().then(
+        (p) => {
+          h || a(() => p);
+        },
+        (p) => {
+          console.error("[RealtimeCanvas] failed to load the rendering chunk:", p);
+        }
+      ), () => {
+        h = !0;
+      };
+    }, []), u ? /* @__PURE__ */ c(u, { ref: n, selfScope: !0, maxHeight: o, className: i, style: s, ...l, children: r }) : /* @__PURE__ */ c(
+      "div",
+      {
+        className: `sc-root${i ? ` ${i}` : ""}`,
+        style: { minHeight: o ?? 200, ...s },
+        "aria-busy": "true"
+      }
+    );
+  }
+);
+function En(e) {
+  return /* @__PURE__ */ c(Me, { ...e });
+}
+function kn() {
+  const { mockups: e, isRendering: t, error: n } = Q();
+  return { mockups: e, isRendering: t, error: n };
+}
+function Xt(e) {
+  return e.type !== "color" && typeof e.width == "number" && e.width > 0 && typeof e.height == "number" && e.height > 0;
+}
+function Rn(e, t = {}) {
+  var b, k, d, v, g;
+  if (_e(e))
+    throw new I(
+      "E_BUNDLE_CONFIG_REQUIRED",
+      `product ${e.id} is a bundle (roles: [${e.bundle.members.map((f) => f.role).join(", ")}]) — it has per-role variants and role-scoped placement keys, which the single-product config cannot describe. Use bundleToRenderConfig(product, { picks?, variants?, placement?, width? }) instead.`,
+      {
+        productId: e.id,
+        validNames: e.bundle.members.map((f) => f.role),
+        docSlug: "bundles"
+      }
+    );
+  const n = (e.placements ?? []).filter(Xt), r = n.map((f) => f.label), i = t.placement ? n.find((f) => f.label === t.placement) : n[0];
+  if (!i)
+    throw t.placement ? new I(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `product ${e.id} has no renderable placement "${t.placement}". Renderable image placements: [${r.join(", ")}].`,
+      { productId: e.id, requested: t.placement, validNames: r, docSlug: "embed-mode" }
+    ) : new I(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `product ${e.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: e.id, docSlug: "embed-mode" }
+    );
+  const s = ((b = e.options) == null ? void 0 : b.attributes) ?? {}, l = Object.values(s).some(
+    (f) => {
+      var S;
+      return (S = f == null ? void 0 : f.choices) == null ? void 0 : S.some((E) => E == null ? void 0 : E.hex);
+    }
+  ) ? (v = (d = (k = e.options) == null ? void 0 : k.combinations) == null ? void 0 : d.find(
+    (f) => typeof f.variantId == "string" && f.variantId !== ""
+  )) == null ? void 0 : v.variantId : void 0, u = e.mockups ?? [], a = l ? u.filter((f) => {
+    var S;
+    return (S = f.gvids) == null ? void 0 : S.includes(l);
+  }) : u, h = (a.length > 0 ? a : u).map((f) => f.id);
+  if (h.length === 0)
+    throw new I(
+      "E_PRODUCT_NOT_RENDERABLE",
+      `product ${e.id} has no mockup scenes — nothing to render a preview into.`,
+      { productId: e.id, docSlug: "embed-mode" }
+    );
+  return {
+    product: {
+      productId: e.id,
+      mockupIds: h,
+      ...typeof l == "string" ? { variantId: l } : {},
+      options: e.options,
+      placements: (g = e.placements) == null ? void 0 : g.map((f) => f.label),
+      mockups: u,
+      requiredPlacements: e.requiredPlacements,
+      ...e.defaultGvid ? { defaultGvid: e.defaultGvid } : {},
+      ...typeof t.width == "number" ? { width: t.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: h[0],
+    variantId: l
+  };
+}
+function Zt(e) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: e % 100 === 0 ? 0 : 2,
+    maximumFractionDigits: e % 100 === 0 ? 0 : 2
+  }).format(e / 100);
+}
+const en = {
+  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"
+}, tn = {
+  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 he({
+  label: e,
+  onSelect: t
+}) {
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "data-sc-part": "snowcone-editor-menu-item",
+      style: tn,
+      onClick: t,
+      children: e
+    }
+  );
+}
+function nn({
+  fullscreen: e,
+  onToggleFullscreen: t,
+  viewCount: n,
+  viewIndex: r,
+  onSelectView: i,
+  onExport: s
+}) {
+  const [o, l] = T(!1), u = () => l(!1);
+  return /* @__PURE__ */ F("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Editor menu",
+        "aria-haspopup": "menu",
+        "aria-expanded": o,
+        "data-sc-part": "snowcone-editor-menu",
+        style: en,
+        onClick: () => l((a) => !a),
+        children: "⋮"
+      }
+    ),
+    o ? /* @__PURE__ */ F(nt, { children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 39 },
+          onClick: u,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ F(
+        "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__ */ c(
+              he,
+              {
+                label: e ? "Exit fullscreen" : "Fullscreen",
+                onSelect: () => {
+                  u(), t();
+                }
+              }
+            ),
+            n > 1 ? Array.from({ length: n }, (a, h) => /* @__PURE__ */ c(
+              he,
+              {
+                label: `View ${h + 1}${h === r ? " ✓" : ""}`,
+                onSelect: () => {
+                  u(), i(h);
+                }
+              },
+              h
+            )) : null,
+            /* @__PURE__ */ c(
+              he,
+              {
+                label: "Export PNG",
+                onSelect: () => {
+                  u(), s();
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] });
+}
+function rn() {
+  const { flatLayers: e, selectLayer: t, generateAllPreviews: n } = et({ previewSize: 96 });
+  return U(() => {
+    e.length > 0 && n();
+  }, [e.length, n]), /* @__PURE__ */ F(
+    "div",
+    {
+      "data-sc-part": "snowcone-editor-idle-dock",
+      style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 8, minHeight: 44 },
+      children: [
+        /* @__PURE__ */ c(W.Add, {}),
+        e.length > 0 ? /* @__PURE__ */ c("div", { style: { width: 1, height: 28, background: "rgba(0,0,0,0.1)", flexShrink: 0 }, "aria-hidden": "true" }) : null,
+        e.map((r) => /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            "data-sc-part": "snowcone-editor-layer-thumb",
+            "aria-label": `Select ${r.name}`,
+            onClick: () => t(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__ */ c("img", { src: r.previewUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "contain" } })
+            ) : /* @__PURE__ */ c(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  fontWeight: 600,
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: r.name
+              }
+            )
+          },
+          r.id
+        ))
+      ]
+    }
+  );
+}
+function sn({
+  onAddToCart: e,
+  defaultQuantity: t
+}) {
+  const { price: n, complete: r } = Yt();
+  return /* @__PURE__ */ F(
+    W.Buy,
+    {
+      onAddToCart: e,
+      ...typeof t == "number" ? { defaultQuantity: t } : {},
+      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" ? ` · ${Zt(n)}` : ""
+      ]
+    }
+  );
+}
+function on({
+  title: e,
+  height: t,
+  mockupIds: n,
+  onAddToCart: r,
+  defaultQuantity: i,
+  className: s,
+  style: o
+}) {
+  const [l, u] = T(!1), [a, h] = T(0), [p, b] = T(!1), k = O(null), d = vt(), v = n[Math.min(a, n.length - 1)], g = K(async () => {
+    var V;
+    const E = await ((V = k.current) == null ? void 0 : V.exportArtboards({ format: "dataUrl" }));
+    if (!E) return;
+    const [A, C] = Object.entries(E)[0] ?? [];
+    if (typeof C != "string") return;
+    const D = document.createElement("a");
+    D.href = C, D.download = `${A ?? "design"}.png`, D.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",
+    ...l ? {
+      position: "fixed",
+      inset: 0,
+      zIndex: 9999,
+      height: "100dvh",
+      paddingBottom: "env(safe-area-inset-bottom)"
+    } : {
+      position: "relative",
+      height: t,
+      borderRadius: 16,
+      border: "1px solid rgba(0,0,0,0.08)",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.08)"
+    },
+    ...o
+  }, 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__ */ F(
+    "div",
+    {
+      "data-sc-part": "snowcone-editor",
+      "data-sc-fullscreen": l ? "true" : void 0,
+      className: s,
+      style: f,
+      children: [
+        /* @__PURE__ */ F(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              padding: "10px 12px 4px 16px",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ c("span", { style: { fontSize: 14, fontWeight: 700, marginRight: "auto" }, children: e }),
+              /* @__PURE__ */ c(W.History, {}),
+              /* @__PURE__ */ c(
+                nn,
+                {
+                  fullscreen: l,
+                  onToggleFullscreen: () => u((E) => !E),
+                  viewCount: n.length,
+                  viewIndex: a,
+                  onSelectView: h,
+                  onExport: () => void g()
+                }
+              ),
+              /* @__PURE__ */ c(sn, { onAddToCart: r, defaultQuantity: i })
+            ]
+          }
+        ),
+        /* @__PURE__ */ F(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-stage",
+            style: { position: "relative", flex: 1, minHeight: 0, padding: "4px 12px" },
+            children: [
+              /* @__PURE__ */ c(W.Canvas, { ref: k, style: { height: "100%" } }),
+              p ? (
+                // Swapped: the mockup IS the stage; the corner chip returns to the
+                // artwork. The canvas stays mounted underneath (no document
+                // teardown), just covered.
+                /* @__PURE__ */ F(
+                  "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__ */ c(
+                        W.Preview,
+                        {
+                          mockupId: v,
+                          alt: "Product mockup",
+                          loadingOverlay: !0,
+                          fallback: /* @__PURE__ */ c("div", { "aria-busy": "true", children: "Rendering…" }),
+                          style: { maxWidth: "100%", maxHeight: "100%", borderRadius: 12 }
+                        }
+                      ),
+                      /* @__PURE__ */ c(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Back to artwork",
+                          "data-sc-part": "snowcone-editor-swap-back",
+                          onClick: () => b(!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__ */ c(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Show product mockup",
+                  "data-sc-part": "snowcone-editor-pip",
+                  onClick: () => b(!0),
+                  style: S,
+                  children: /* @__PURE__ */ c(
+                    W.Preview,
+                    {
+                      mockupId: v,
+                      alt: "Product mockup preview",
+                      loadingOverlay: !0,
+                      fallback: /* @__PURE__ */ c("span", { style: { fontSize: 10, opacity: 0.5 }, "aria-busy": "true", children: "mockup…" }),
+                      style: { width: "100%", height: "100%", display: "block" }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ F(
+          "div",
+          {
+            "data-sc-part": "snowcone-editor-zone",
+            "data-sc-zone-state": d ? "selected" : "idle",
+            style: { flexShrink: 0, padding: "4px 16px 14px" },
+            children: [
+              /* @__PURE__ */ c("div", { style: { display: d ? void 0 : "none" }, children: /* @__PURE__ */ c(W.Controls, { placement: "docked" }) }),
+              d ? null : /* @__PURE__ */ c(rn, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function xn(e) {
+  const {
+    onAddToCart: t,
+    defaultQuantity: n,
+    title: r = "Editor",
+    height: i = 480,
+    className: s,
+    style: o,
+    ...l
+  } = e;
+  return /* @__PURE__ */ c(W.Root, { ...l, children: /* @__PURE__ */ c(
+    on,
+    {
+      title: r,
+      height: i,
+      mockupIds: l.product.mockupIds,
+      onAddToCart: t,
+      ...typeof n == "number" ? { defaultQuantity: n } : {},
+      className: s,
+      style: o
+    }
+  ) });
+}
+tt();
+export {
+  W as E,
+  wn as R,
+  xn as S,
+  vn as a,
+  En as b,
+  bn as c,
+  yn as d,
+  wt as e,
+  Ae as f,
+  Zt as g,
+  xt as h,
+  _e as i,
+  Bt as j,
+  Yt as k,
+  kn as l,
+  Rn as p,
+  ye as s,
+  Q as u,
+  St as v
+};
+//# sourceMappingURL=embed-CLz3CTcX.js.map