@snowcone-app/canvas 0.12.1 → 0.13.1

package/dist/api/advanced.d.ts

@@ -108,3 +108,15 @@ export type { VisualGuideOverlayProps, VisualGuideOverlayStyle, OverlayPiece, Pi
 export { renderPieceGuides } from '../rendering/PieceGuideRenderer.js';
 export type { PieceGuideRenderParams, PieceGuideRendererPiece, PieceGuideRendererStyle, PieceGuideVisibility, } from '../rendering/PieceGuideRenderer.js';
 export type { PieceGuidesConfig } from '../components/embed/SnowconeCanvas.js';
+/**
+ * Fetch a product's printable-area guides (dead zones, safe areas) for a raw
+ * `SnowconeCanvas` — the same overlay `<RealtimeEmbed>` shows automatically,
+ * but for an AUTHORING surface (your own `SnowconeCanvas` + `useLayers` panel)
+ * that doesn't go through the embed. Mirror of what www's route shell does:
+ * fetch by gvid, then `pieceGuidesForArtboard(bundle, artboard)` (which gates
+ * on the design's dims matching the print-file frame) → feed the result to the
+ * canvas's `pieceGuides` prop. So the DESIGNER sees the camera cutout while
+ * placing fields, not just the buyer afterward.
+ */
+export { usePieceGuideBundle, pieceGuidesForArtboard, PIECE_GUIDES_API_BASE, } from '../components/embed-realtime/usePieceGuideBundle.js';
+export type { PieceGuideBundle } from '../components/embed-realtime/usePieceGuideBundle.js';

package/dist/embed.mjs

@@ -1,13 +1,14 @@
-import { a as z, e as J } from "./validation-BpmNOvuY.js";
-import { b as Re, d as Te, f as xe } from "./validation-BpmNOvuY.js";
-import { y } from "./HybridHistoryManager-NL3zyEl4.js";
-import { jsx as $, Fragment as Y } from "react/jsx-runtime";
-import { createContext as Q, useContext as X, useState as x, useEffect as U, useMemo as I, useRef as M } from "react";
+import { a as J, e as z } from "./validation-BpmNOvuY.js";
+import { b as Re, d as Ie, f as Te } from "./validation-BpmNOvuY.js";
+import { y as w } from "./HybridHistoryManager-NL3zyEl4.js";
+import { jsx as y, Fragment as Y } from "react/jsx-runtime";
+import { createContext as Q, useContext as X, useMemo as S, useRef as x, useState as N, useEffect as G } from "react";
 import { assertVariantSelected as Z, RenderSession as ee } from "@snowcone-app/sdk";
-import { S as te, s as ne } from "./template-fields-IgDV7PRY.js";
-import { D as Me, T as Ae, d as Ce, r as Ge, a as Ne, e as Be, f as Pe, g as _e, h as Oe, w as qe } from "./template-fields-IgDV7PRY.js";
+import { u as ne, p as te } from "./usePieceGuideBundle-Cyl695jv.js";
+import { S as re, s as se } from "./template-fields-IgDV7PRY.js";
+import { D as Me, T as Ue, d as Be, r as Ce, a as Ne, e as Ge, f as Oe, g as qe, h as Fe, w as Pe } from "./template-fields-IgDV7PRY.js";
 const L = Q(void 0);
-function P() {
+function q() {
   const e = X(L);
   if (!e)
     throw new Error(
@@ -15,256 +16,203 @@ function P() {
     );
   return e;
 }
-const re = "https://api.snowcone.app";
-function se(e) {
-  const t = e.pieces.map((n) => ({
-    id: n.id,
-    x: n.x,
-    y: n.y,
-    width: n.width,
-    height: n.height,
-    rotation: typeof n.rotation == "number" ? n.rotation : void 0,
-    safeAreaInsetPx: typeof n.safeAreaInsetInches == "number" && n.safeAreaInsetInches > 0 ? n.safeAreaInsetInches * e.templateDpi : void 0
-  }));
-  return {
-    artboardWidth: e.artboardWidth,
-    artboardHeight: e.artboardHeight,
-    config: {
-      pieces: t,
-      guides: e.pieceGuides ?? {},
-      style: e.pieceGuidesStyle
-    }
-  };
-}
-function ie(e, t) {
-  var n;
-  if (t) {
-    if (t.width !== e.artboardWidth || t.height !== e.artboardHeight) {
-      typeof y < "u" && ((n = y.env) == null ? void 0 : n.NODE_ENV) !== "production" && console.warn(
-        `[RealtimeEmbed] This product has printable-area guides (authored at ${e.artboardWidth}×${e.artboardHeight}), but the design's artboard is ${t.width}×${t.height} — the dead-zone overlay is skipped because the coordinates wouldn't line up. Author the design at the placement's dimensions to get it.`
-      );
-      return;
-    }
-    return e.config;
-  }
-}
-function oe(e, t = re) {
-  const [n, s] = x(null);
-  return U(() => {
-    if (!e) {
-      s(null);
-      return;
-    }
-    let i = !1;
-    return fetch(`${t}/printables/by-gvid/${encodeURIComponent(e)}/piece-guides`).then(async (r) => {
-      if (!r.ok) throw new Error(`status ${r.status}`);
-      return await r.json();
-    }).then((r) => {
-      i || s(se(r));
-    }).catch(() => {
-      i || s(null);
-    }), () => {
-      i = !0;
-    };
-  }, [e, t]), n;
-}
 const E = "[RealtimeEmbed]";
 function ae(e) {
-  var s, i;
+  var s, l;
   if ((s = e == null ? void 0 : e.requiredPlacements) != null && s.length)
-    return e.requiredPlacements.filter((r) => !r.autoFilledByVariant).map((r) => r.label);
-  const t = new Set(
-    (((i = e == null ? void 0 : e.options) == null ? void 0 : i.combinations) ?? []).map((r) => r.variantId).filter((r) => typeof r == "string" && r !== "")
+    return e.requiredPlacements.filter((t) => !t.autoFilledByVariant).map((t) => t.label);
+  const n = new Set(
+    (((l = e == null ? void 0 : e.options) == null ? void 0 : l.combinations) ?? []).map((t) => t.variantId).filter((t) => typeof t == "string" && t !== "")
   );
-  return !!(e != null && e.variantId) || t.size > 1 ? [] : (e == null ? void 0 : e.placements) ?? [];
+  return !!(e != null && e.variantId) || n.size > 1 ? [] : (e == null ? void 0 : e.placements) ?? [];
 }
-function ce({ shop: e, product: t, design: n, hasGrant: s }) {
-  var l, a;
+function oe({ shop: e, product: n, design: r, hasGrant: s }) {
+  var u, o;
   if (e || console.error(`${E} \`shop\` is required (your publishable shop id).`), s || console.error(
     `${E} no grant source — pass \`grantUrl\` (a proxy to mintRealtimeGrant) or \`grant\`. Without it the session can never authorize and no mockup renders.`
-  ), (l = t == null ? void 0 : t.mockupIds) != null && l.length || console.error(
+  ), (u = n == null ? void 0 : n.mockupIds) != null && u.length || console.error(
     `${E} product.mockupIds is empty — pass the catalog scene codes (product.mockups[].id) you want rendered, e.g. ["FV1qjO"].`
-  ), t != null && t.options)
+  ), n != null && n.options)
     try {
-      Z(t);
-    } catch (o) {
-      console.error(`${E} ${o instanceof Error ? o.message : String(o)}`);
+      Z(n);
+    } catch (a) {
+      console.error(`${E} ${a instanceof Error ? a.message : String(a)}`);
     }
-  const i = n.toJSON(), r = i.activeArtboard, h = ae(t);
-  h.length > 1 && console.error(
-    `${E} product ${t.productId} requires placements [${h.join(", ")}] but <RealtimeEmbed> renders a single placement ("${r}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
-  ), (a = t == null ? void 0 : t.placements) != null && a.length && !t.placements.includes(r) && console.warn(
-    `${E} the design's placement "${r}" is not in product.placements [${t.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 = r.toJSON(), t = l.activeArtboard, f = ae(n);
+  f.length > 1 && console.error(
+    `${E} product ${n.productId} requires placements [${f.join(", ")}] but <RealtimeEmbed> renders a single placement ("${t}"). The render will time out waiting for the others. This product needs the eject path — see https://developers.snowcone.app/embed-mode#eject.`
+  ), (o = n == null ? void 0 : n.placements) != null && o.length && !n.placements.includes(t) && console.warn(
+    `${E} the design's placement "${t}" is not in product.placements [${n.placements.join(", ")}]. The canvas artboard name and renderState placement must equal a real product placement label, or the server renders a blank mockup. Fix the \`name\` passed to design({ name }).`
   );
-  const c = i.elements.map((o) => o.name).filter((o) => !!o), g = c.filter((o, p) => c.indexOf(o) !== p);
-  g.length && console.warn(
-    `${E} duplicate layer name(s) [${[...new Set(g)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
+  const i = l.elements.map((a) => a.name).filter((a) => !!a), h = i.filter((a, p) => i.indexOf(a) !== p);
+  h.length && console.warn(
+    `${E} duplicate layer name(s) [${[...new Set(h)].join(", ")}] — useTextBinding(name) / useImageBinding(name) bind to the FIRST match, so a duplicate name makes a control edit the wrong layer. Keep names unique.`
   );
 }
-function ue(e) {
+function ie(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) };
+  const n = e.grant;
+  return typeof n == "function" ? { getToken: n } : { getToken: () => Promise.resolve(n) };
 }
 const V = 8e3;
-function le(e) {
+function ce(e) {
   return `[RealtimeEmbed] No mockup after ${Math.round(V / 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 Ee(e) {
-  const { shop: t, product: n, design: s, throttleMs: i = 200, onMockups: r, onRenderError: h, wsUrl: c, services: g, children: l } = e, a = I(() => s.toJSON().activeArtboard, [s]), o = oe(n.variantId ?? n.defaultGvid), p = I(() => {
-    if (!o) return null;
-    const u = s.toJSON().artboards[0];
-    return ie(o, u) ?? null;
-  }, [o, s]), v = M(r), d = M(h);
-  v.current = r, d.current = h;
-  const [_, W] = x([]), [S, w] = x(!0), [O, k] = x(null), A = !!("grantUrl" in e && e.grantUrl || "grant" in e && e.grant), C = ue(e), H = "grantUrl" in C ? C.grantUrl : "getToken", G = `${n.productId}|${n.mockupIds.join(",")}|${n.variantId ?? ""}`, R = I(
+  const { shop: n, product: r, design: s, throttleMs: l = 200, onMockups: t, onRenderError: f, wsUrl: i, services: h, children: u } = e, o = S(() => s.toJSON().activeArtboard, [s]), a = ne(r.variantId ?? r.defaultGvid), p = S(() => {
+    if (!a) return null;
+    const c = s.toJSON().artboards[0];
+    return te(a, c) ?? null;
+  }, [a, s]), v = x(t), d = x(f);
+  v.current = t, d.current = f;
+  const [F, K] = N([]), [$, k] = N(!0), [P, R] = N(null), M = !!("grantUrl" in e && e.grantUrl || "grant" in e && e.grant), U = ie(e), W = "grantUrl" in U ? U.grantUrl : "getToken", B = `${r.productId}|${r.mockupIds.join(",")}|${r.variantId ?? ""}`, I = S(
     () => {
       try {
-        return { session: new ee({ shop: t, product: n, wsUrl: c, ...C }) };
-      } catch (u) {
-        return { error: u instanceof Error ? u.message : String(u) };
+        return { session: new ee({ shop: n, product: r, wsUrl: i, ...U }) };
+      } catch (c) {
+        return { error: c instanceof Error ? c.message : String(c) };
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, G, a, c, H]
-  ), f = "session" in R ? R.session : null, T = "error" in R ? R.error : null, q = M(null);
-  U(() => {
-    var u;
-    if (typeof y < "u" && ((u = y.env) == null ? void 0 : u.NODE_ENV) !== "production") {
-      const m = `${t}|${G}|${a}|${A}`;
-      if (q.current === m) return;
-      q.current = m, ce({ shop: t, product: n, design: s, hasGrant: A });
+    [n, B, o, i, W]
+  ), g = "session" in I ? I.session : null, T = "error" in I ? I.error : null, _ = x(null);
+  G(() => {
+    var c;
+    if (typeof w < "u" && ((c = w.env) == null ? void 0 : c.NODE_ENV) !== "production") {
+      const m = `${n}|${B}|${o}|${M}`;
+      if (_.current === m) return;
+      _.current = m, oe({ shop: n, product: r, design: s, hasGrant: M });
     }
-  }, [t, G, a, A]);
-  const N = I(() => (u, m = i) => {
-    f && (k(null), w(!0), f.renderState(a, u, m).catch((b) => {
-      var F;
-      const j = b instanceof Error ? b.message : String(b);
-      k(j), w(!1), (F = d.current) == null || F.call(d, j);
+  }, [n, B, o, M]);
+  const C = S(() => (c, m = l) => {
+    g && (R(null), k(!0), g.renderState(o, c, m).catch((b) => {
+      var D;
+      const A = b instanceof Error ? b.message : String(b);
+      R(A), k(!1), (D = d.current) == null || D.call(d, A);
     }));
-  }, [f, a, i]);
-  U(() => {
-    var u;
+  }, [g, o, l]);
+  G(() => {
+    var c;
     if (T) {
-      k(T), w(!1), (u = d.current) == null || u.call(d, T);
+      R(T), k(!1), (c = d.current) == null || c.call(d, T);
       return;
     }
-    if (f)
-      return f.onMockups((m) => {
+    if (g)
+      return g.onMockups((m) => {
         var b;
-        W(m), w(!1), (b = v.current) == null || b.call(v, m);
-      }), f.onError((m) => {
+        K(m), k(!1), (b = v.current) == null || b.call(v, m);
+      }), g.onError((m) => {
         var b;
-        k(m), w(!1), (b = d.current) == null || b.call(d, m);
-      }), N(s.toServerRequest()), () => f.close();
-  }, [f, T]), U(() => {
+        R(m), k(!1), (b = d.current) == null || b.call(d, m);
+      }), C(s.toServerRequest()), () => g.close();
+  }, [g, T]), G(() => {
     var m;
-    if (!S || typeof y > "u" || ((m = y.env) == null ? void 0 : m.NODE_ENV) === "production") return;
-    const u = setTimeout(() => console.warn(le(a)), V);
-    return () => clearTimeout(u);
-  }, [S, a]);
-  const K = I(
+    if (!$ || typeof w > "u" || ((m = w.env) == null ? void 0 : m.NODE_ENV) === "production") return;
+    const c = setTimeout(() => console.warn(ce(o)), V);
+    return () => clearTimeout(c);
+  }, [$, o]);
+  const H = S(
     () => ({
-      session: f,
+      session: g,
       design: s,
-      placement: a,
-      product: n,
-      mockups: _,
-      isRendering: S,
-      error: O,
-      throttleMs: i,
+      placement: o,
+      product: r,
+      mockups: F,
+      isRendering: $,
+      error: P,
+      throttleMs: l,
       pieceGuides: p,
-      pushRender: N
+      pushRender: C
     }),
-    [f, s, a, n, _, S, O, i, p, N]
-  ), D = /* @__PURE__ */ $(L.Provider, { value: K, children: l });
-  return g ? /* @__PURE__ */ $(z, { services: g, children: D }) : D;
+    [g, s, o, r, F, $, P, l, p, C]
+  ), j = /* @__PURE__ */ y(L.Provider, { value: H, children: u });
+  return h ? /* @__PURE__ */ y(J, { services: h, children: j }) : j;
 }
-function Ie({
+function Se({
   children: e,
-  kit: t = "embed-only",
-  inheritTheme: n = !0,
+  kit: n = "embed-only",
+  inheritTheme: r = !0,
   maxHeight: s,
-  services: i,
-  className: r,
-  style: h
+  services: l,
+  className: t,
+  style: f
 }) {
-  const { design: c, placement: g, throttleMs: l, pieceGuides: a, pushRender: o } = P(), p = I(() => c.toJSON(), [c]);
-  return /* @__PURE__ */ $("div", { className: `app-modern${r ? ` ${r}` : ""}`, style: h, children: /* @__PURE__ */ $(
-    te,
+  const { design: i, placement: h, throttleMs: u, pieceGuides: o, pushRender: a } = q(), p = S(() => i.toJSON(), [i]);
+  return /* @__PURE__ */ y("div", { className: `app-modern${t ? ` ${t}` : ""}`, style: f, children: /* @__PURE__ */ y(
+    re,
     {
-      kit: t,
-      inheritTheme: n,
-      services: i,
+      kit: n,
+      inheritTheme: r,
+      services: l,
       artboards: p.artboards,
-      activeArtboard: g,
+      activeArtboard: h,
       initialElements: p.elements,
       layoutConfig: s ? { maxHeight: s } : void 0,
       overlay: e,
-      pieceGuides: a ?? void 0,
-      onChange: (v) => o(ne(v), l)
+      pieceGuides: o ?? void 0,
+      onChange: (v) => a(se(v), u)
     }
   ) });
 }
-const de = 1.2, B = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
-function me(e) {
-  for (const t of B)
-    if (t >= e) return t;
-  return B[B.length - 1];
+const le = 1.2, O = [1200, 1400, 1600, 1800, 2e3, 2500, 3e3, 4e3];
+function ue(e) {
+  for (const n of O)
+    if (n >= e) return n;
+  return O[O.length - 1];
 }
-function he(e, t) {
-  if (!(e > 0) || !(t > 0) || t <= e * de) return null;
-  const n = me(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 <RealtimeEmbed> for a crisp preview.`;
+function de(e, n) {
+  if (!(e > 0) || !(n > 0) || n <= e * le) return null;
+  const r = ue(n);
+  return `[RealtimeMockup] mockup rendered at ${e}px but displayed at ~${n} device px — the preview will look soft. Pass \`product.width\` (e.g. ${r}) on <RealtimeEmbed> for a crisp preview.`;
 }
-function $e({
+function we({
   mockupId: e,
-  fallback: t = null,
-  alt: n = "Live product mockup",
+  fallback: n = null,
+  alt: r = "Live product mockup",
   className: s,
-  style: i
+  style: l
 }) {
-  const { mockups: r } = P(), h = M(/* @__PURE__ */ new Set()), c = e ? r.find((l) => l.mockupId === e && l.imageUrl) : r.find((l) => l.imageUrl);
-  if (!(c != null && c.imageUrl))
-    return /* @__PURE__ */ $(Y, { children: t });
-  const g = (l) => {
+  const { mockups: t } = q(), f = x(/* @__PURE__ */ new Set()), i = e ? t.find((u) => u.mockupId === e && u.imageUrl) : t.find((u) => u.imageUrl);
+  if (!(i != null && i.imageUrl))
+    return /* @__PURE__ */ y(Y, { children: n });
+  const h = (u) => {
     var d;
-    if (typeof y > "u" || ((d = y.env) == null ? void 0 : d.NODE_ENV) === "production" || typeof window > "u" || h.current.has(c.mockupId)) return;
-    const a = l.currentTarget, o = a.getBoundingClientRect().width;
-    if (o <= 0) return;
-    const p = Math.round(o * (window.devicePixelRatio || 1)), v = he(a.naturalWidth, p);
-    v && (h.current.add(c.mockupId), console.warn(v));
+    if (typeof w > "u" || ((d = w.env) == null ? void 0 : d.NODE_ENV) === "production" || typeof window > "u" || f.current.has(i.mockupId)) return;
+    const o = u.currentTarget, a = o.getBoundingClientRect().width;
+    if (a <= 0) return;
+    const p = Math.round(a * (window.devicePixelRatio || 1)), v = de(o.naturalWidth, p);
+    v && (f.current.add(i.mockupId), console.warn(v));
   };
   return (
     // eslint-disable-next-line @next/next/no-img-element
-    /* @__PURE__ */ $("img", { src: c.imageUrl, alt: n, className: s, style: i, onLoad: g })
+    /* @__PURE__ */ y("img", { src: i.imageUrl, alt: r, className: s, style: l, onLoad: h })
   );
 }
-function we() {
-  const { mockups: e, isRendering: t, error: n } = P();
-  return { mockups: e, isRendering: t, error: n };
+function ye() {
+  const { mockups: e, isRendering: n, error: r } = q();
+  return { mockups: e, isRendering: n, error: r };
 }
-J();
+z();
 export {
-  z as CanvasServicesProvider,
+  J as CanvasServicesProvider,
   Me as DesignBuilder,
-  Ie as RealtimeCanvas,
+  Se as RealtimeCanvas,
   Ee as RealtimeEmbed,
-  $e as RealtimeMockup,
-  Ae as TEMPLATE_FIELDS_KEY,
+  we as RealtimeMockup,
+  Ue as TEMPLATE_FIELDS_KEY,
   Re as createProxyGenerate,
-  Te as createProxyImageSearch,
-  Ce as design,
-  Ge as readTemplateFields,
-  xe as useCanvasServices,
+  Ie as createProxyImageSearch,
+  Be as design,
+  Ce as readTemplateFields,
+  Te as useCanvasServices,
   Ne as useColorBinding,
-  Be as useElementByName,
-  Pe as useFontBinding,
-  _e as useImageBinding,
-  we as useRealtimeMockups,
-  Oe as useTextBinding,
-  ce as validateEmbed,
-  qe as withTemplateFields
+  Ge as useElementByName,
+  Oe as useFontBinding,
+  qe as useImageBinding,
+  ye as useRealtimeMockups,
+  Fe as useTextBinding,
+  oe as validateEmbed,
+  Pe as withTemplateFields
 };
 //# sourceMappingURL=embed.mjs.map