@snowcone-app/canvas 0.21.0 → 0.21.2

package/README.md

@@ -36,8 +36,10 @@ npm install @snowcone-app/canvas
 The fastest path to a working integration. A live product preview, one
 personalized text layer, and a completeness-gated add-to-cart — the full
 design editor never loads. This file ships in this package at
-[`example/src/Widget.tsx`](./example/src/Widget.tsx); copy it and change the
-design, the product ids, and the parts.
+[`example/src/Widget.tsx`](./example/src/Widget.tsx) (reading this in the
+monorepo instead of the npm tarball? It lives at
+`packages/canvas/fixtures/no-canvas-widget/` there — `example/` is assembled at
+publish); copy it and change the design, the product ids, and the parts.
 
 <!-- canonical-example (verbatim from example/src/Widget.tsx; drift-gated) -->
 
@@ -60,6 +62,9 @@ const product = {
   productId: 'BEEB77',
   mockupIds: ['FV1qjO'],
   placements: ['Front'],
+  // BEEB77 has a COLOR axis (Frame) — a color product REQUIRES variantId, or
+  // a live render times out. Read real ids from the catalog with getProduct().
+  variantId: 'Pv1sLC',
 };
 
 export function PersonalizationWidget({

package/dist/{CanvasRenderer-CwiYq8qg.js → CanvasRenderer-B0szG0Us.js}

@@ -1,5 +1,5 @@
-import { V as ee, X as ne, ap as tt, Y as zt, aC as se, aA as oe, at as Vt, az as ie, as as ht, aD as ae, aE as Ft, aF as re, aG as le, c as $t, G as he, I as jt, P as ce, S as de, T as fe, aH as ge, aI as ue, aJ as pe, aK as ye, a3 as qt, $ as Ut, a5 as ft, a0 as Zt, a1 as Ht, a4 as be, a7 as Se, aL as Ot, aM as me, aN as Te, aO as ve, aP as we, aQ as Ce, aR as Q } from "./FontAnalyzer-BpsTYowD.js";
-import { T as Bt, a as Me, t as xe, J as Re, y as kt, K as Gt, L as ke, M as Pe } from "./ExportManager-DK7CdI-G.js";
+import { V as ee, X as ne, ar as tt, Y as zt, aE as se, aC as oe, av as Vt, aB as ie, au as ht, aF as ae, aG as Ft, aH as re, aI as le, c as $t, G as he, I as jt, P as ce, S as de, T as fe, aJ as ge, aK as ue, aL as pe, aM as ye, a3 as qt, $ as Ut, a5 as ft, a0 as Zt, a1 as Ht, a4 as be, a7 as Se, aN as Ot, aO as me, aP as Te, aQ as ve, aR as we, aS as Ce, aT as Q } from "./FontAnalyzer-CwIpgTGd.js";
+import { T as Bt, a as Me, u as xe, K as Re, z as kt, L as Gt, M as ke, N as Pe, O as Ae } from "./ExportManager-DoU4VK6h.js";
 const it = {
   // Canvas-specific
   canvas: {
@@ -14,30 +14,30 @@ const it = {
     spacingLabelFontSize: 11,
     spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
   }
-}, Ae = 2, Mt = 6, Ee = 16, Ie = 5, He = 5, Jt = 0.5;
+}, Ee = 2, Mt = 6, Ie = 16, He = 5, Be = 5, Jt = 0.5;
 function Yt(C) {
-  return Ae / C;
+  return Ee / C;
 }
-function Ge(C) {
+function Ye(C) {
   return Mt / C;
 }
-function Be(C) {
-  return Ee / C;
+function Le(C) {
+  return Ie / C;
 }
-function Ye(C) {
-  return [Ie / C, He / C];
+function Xe(C) {
+  return [He / C, Be / C];
 }
-function Le(C, t, e, o) {
+function We(C, t, e, o) {
   C.save();
   const n = Jt / o;
   C.translate(t, e), C.scale(n, n), C.strokeStyle = "#000", C.lineWidth = 1.5, C.lineCap = "round", C.lineJoin = "round", C.translate(-12, -12), C.beginPath(), C.moveTo(21, 12), C.arc(12, 12, 9, 0, -Math.PI / 2, !0), C.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), C.stroke(), C.beginPath(), C.moveTo(3, 3), C.lineTo(3, 8), C.lineTo(8, 8), C.stroke(), C.beginPath(), C.moveTo(3, 12), C.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), C.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), C.stroke(), C.beginPath(), C.moveTo(16, 16), C.lineTo(21, 16), C.lineTo(21, 21), C.stroke(), C.restore();
 }
-function Xe(C, t, e, o = 1, n = "#3b82f6", s = !1) {
-  const i = Be(o);
-  C.save(), C.fillStyle = "#fff", C.strokeStyle = n, C.lineWidth = s ? Yt(o) * 1.25 : Yt(o), C.beginPath(), C.arc(t, e, i, 0, Math.PI * 2), C.fill(), C.stroke(), Le(C, t, e, o), C.restore();
+function Ne(C, t, e, o = 1, n = "#3b82f6", s = !1) {
+  const i = Le(o);
+  C.save(), C.fillStyle = "#fff", C.strokeStyle = n, C.lineWidth = s ? Yt(o) * 1.25 : Yt(o), C.beginPath(), C.arc(t, e, i, 0, Math.PI * 2), C.fill(), C.stroke(), We(C, t, e, o), C.restore();
 }
 const Xt = Mt * 2;
-class Ne {
+class Ke {
   constructor() {
     this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
   }
@@ -153,7 +153,7 @@ class Ne {
     );
   }
 }
-class We {
+class De {
   /**
    * Calculate new dimensions and position for a resize operation
    */
@@ -275,7 +275,7 @@ class We {
     return n;
   }
 }
-class De {
+class _e {
   constructor() {
     this.hooks = {
       beforeResize: [],
@@ -330,7 +330,7 @@ class De {
    */
   executeResize(t) {
     const e = this.runHooks("beforeResize", t);
-    let o = We.calculateResize({
+    let o = De.calculateResize({
       ...e,
       snapSystem: t.snapSystem
     });
@@ -345,8 +345,8 @@ class De {
     return this.runHooks("afterPositionUpdate", o).position;
   }
 }
-const Ke = new De();
-class $e {
+const $e = new _e();
+class je {
   constructor(t = null) {
     this.state = "IDLE", this.context = {
       mode: null,
@@ -882,7 +882,7 @@ function Pt(C, t) {
   const e = C.transformData;
   return e && "height" in e ? (e.height = t, !0) : !1;
 }
-class je {
+class qe {
   constructor(t = {}) {
     this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || it.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
       x: null,
@@ -1512,7 +1512,7 @@ class je {
     return t;
   }
 }
-class qe {
+class Ue {
   constructor(t = {}) {
     this.lastSnapTarget = null, this.detectionThreshold = t.detectionThreshold || 100, this.minDistance = t.minDistance || 10, this.enabled = t.enabled !== !1, this.showLabels = t.showLabels !== !1, this.indicators = [];
   }
@@ -1944,7 +1944,7 @@ class qe {
     }
   }
 }
-const Lt = $t("ArtboardRenderer"), _e = {
+const Lt = $t("ArtboardRenderer"), ze = {
   showLabel: !0,
   showBorder: !0,
   borderColor: "",
@@ -1964,7 +1964,7 @@ const Lt = $t("ArtboardRenderer"), _e = {
 };
 class Qt {
   constructor(t = {}) {
-    this.options = { ..._e, ...t };
+    this.options = { ...ze, ...t };
   }
   /**
    * Render an artboard
@@ -2155,19 +2155,19 @@ class Qt {
     return !!(this.options.showPreviewBackground && t.previewBackgroundColor && t.previewBackgroundColor !== "transparent");
   }
 }
-function Ue(C) {
+function Ze(C) {
   return C instanceof fe;
 }
-function ze(C) {
+function Ve(C) {
   return C instanceof jt;
 }
 function Wt(C) {
   return C instanceof he;
 }
-function Ze(C) {
+function Je(C) {
   return C instanceof de;
 }
-function Je(C) {
+function Qe(C) {
   return C instanceof ce;
 }
 class mt {
@@ -2951,7 +2951,8 @@ class Dt {
     }
   }
 }
-const Ve = $t("CanvasRenderer"), K = class K {
+Ae();
+const Fe = $t("CanvasRenderer"), K = class K {
   /**
    * Get a pooled offscreen canvas for clipping content, only recreating
    * when dimensions change. Eliminates per-frame canvas allocation.
@@ -2975,7 +2976,7 @@ const Ve = $t("CanvasRenderer"), K = class K {
       e.render(t, o, n);
     } catch (s) {
       const i = s instanceof Error ? s : new Error(String(s));
-      Ve.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
+      Fe.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
         category: "render",
         message: `Failed to render element: ${i.message}`,
         originalError: i,
@@ -3350,7 +3351,7 @@ const Ve = $t("CanvasRenderer"), K = class K {
       const m = t.getTransform().a / b, T = g.x * b * m, v = g.y * b * m;
       t.setTransform(m, 0, 0, m, T, v);
     }
-    if (e && ze(e) && e.isCropping)
+    if (e && Ve(e) && e.isCropping)
       o && Dt.renderCropBoxLayer(t, e, o, b);
     else if (!l && n && mt.renderSelectionLayer(t, e, n, b), o && n && mt.renderPositionSizeInfo(t, e, o, n, b), !l && o && n && mt.renderHandlesLayer(
       t,
@@ -3376,22 +3377,22 @@ const Ve = $t("CanvasRenderer"), K = class K {
 K._contentCanvas = null, K._contentCanvasSize = { width: 0, height: 0 }, K._maskCanvas = null, K._maskCanvasSize = { width: 0, height: 0 }, K._cachedElementsRef = null, K._cachedElementConfigs = null, K._cachedElementMap = null, K._knockoutRenderedIds = /* @__PURE__ */ new Set(), K.onRenderError = null;
 let Kt = K;
 export {
-  je as A,
+  qe as A,
   Kt as C,
-  $e as I,
-  De as R,
-  qe as S,
-  Ne as T,
-  ze as a,
-  Je as b,
-  Ze as c,
-  Ue as d,
+  je as I,
+  _e as R,
+  Ue as S,
+  Ke as T,
+  Ve as a,
+  Qe as b,
+  Je as c,
+  Ze as d,
   Qt as e,
-  Ye as f,
+  Xe as f,
   Yt as g,
-  Ge as h,
+  Ye as h,
   Wt as i,
-  Ke as j,
-  Xe as r
+  $e as j,
+  Ne as r
 };
-//# sourceMappingURL=CanvasRenderer-CwiYq8qg.js.map
+//# sourceMappingURL=CanvasRenderer-B0szG0Us.js.map