@snowcone-app/canvas 0.31.0 → 0.33.0

package/dist/{usePieceGuideBundle-Bj98nPk0.js → usePieceGuideBundle-CnSmYrmM.js}

@@ -1,4 +1,4 @@
-import { z as r } from "./FontAnalyzer-BYhwxDhe.js";
+import { z as r } from "./FontAnalyzer-BrKY6XYn.js";
 import { useState as a, useEffect as d } from "react";
 const u = "https://api.snowcone.app";
 function h(e) {
@@ -58,4 +58,4 @@ export {
   l as p,
   p as u
 };
-//# sourceMappingURL=usePieceGuideBundle-Bj98nPk0.js.map
+//# sourceMappingURL=usePieceGuideBundle-CnSmYrmM.js.map

package/dist/{usePieceGuideBundle-Bj98nPk0.js.map → usePieceGuideBundle-CnSmYrmM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"usePieceGuideBundle-Bj98nPk0.js","sources":["../src/components/embed-realtime/usePieceGuideBundle.ts"],"sourcesContent":["'use client';\n\n/**\n * usePieceGuideBundle — fetch a product's printable-area guides for the embed.\n *\n * Some products hide part of the print file under hardware (a phone case's\n * camera module, a notebook's spine). snowcone.app's own editor draws the\n * printable-area / dead-zone overlay from the product's piece guides;\n * `<RealtimeEmbed>` uses this hook so embedders get the same overlay with\n * zero config — without it, a buyer can edit artwork the mockup will never\n * show, with no signal anywhere (#566).\n *\n * The endpoint is a public read (geometry only — piece rects, safe areas,\n * authored guides; same exposure class as the public catalog). Errors degrade\n * silently to \"no guides\": the editor keeps working, the overlay just doesn't\n * appear — same posture as snowcone.app's own loader.\n *\n * @module\n */\n\nimport { useEffect, useState } from 'react';\nimport type { PieceGuidesConfig } from '../embed/SnowconeCanvas.js';\nimport type {\n  PieceGuide,\n  PieceGuideRendererPiece,\n  PieceGuideRendererStyle,\n} from '../../rendering/PieceGuideRenderer.js';\n\n/** Backend base hosting `GET /printables/by-gvid/:gvid/piece-guides`. */\nexport const PIECE_GUIDES_API_BASE = 'https://api.snowcone.app';\n\n/** Wire shape of the piece-guides endpoint (the consumer-safe subset). */\ninterface RawPieceGuidesResponse {\n  artboardWidth: number;\n  artboardHeight: number;\n  /** Inches→px conversion factor for `safeAreaInsetInches`. */\n  templateDpi: number;\n  pieces: Array<{\n    id: string;\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n    rotation?: number;\n    safeAreaInsetInches?: number;\n  }>;\n  pieceGuides?: Record<string, PieceGuide>;\n  pieceGuidesStyle?: PieceGuideRendererStyle;\n}\n\n/** A fetched bundle: the overlay config plus the artboard frame it was authored in. */\nexport interface PieceGuideBundle {\n  /** The print-file frame the piece coords live in. */\n  artboardWidth: number;\n  artboardHeight: number;\n  config: PieceGuidesConfig;\n}\n\n/** Convert the wire response into a renderer-ready bundle (inches → px, etc.). */\nexport function transformPieceGuides(raw: RawPieceGuidesResponse): PieceGuideBundle {\n  const pieces: PieceGuideRendererPiece[] = raw.pieces.map((p) => ({\n    id: p.id,\n    x: p.x,\n    y: p.y,\n    width: p.width,\n    height: p.height,\n    rotation: typeof p.rotation === 'number' ? p.rotation : undefined,\n    safeAreaInsetPx:\n      typeof p.safeAreaInsetInches === 'number' && p.safeAreaInsetInches > 0\n        ? p.safeAreaInsetInches * raw.templateDpi\n        : undefined,\n  }));\n  return {\n    artboardWidth: raw.artboardWidth,\n    artboardHeight: raw.artboardHeight,\n    config: {\n      pieces,\n      guides: raw.pieceGuides ?? {},\n      style: raw.pieceGuidesStyle,\n    },\n  };\n}\n\n/**\n * Gate the bundle on the design's artboard matching the print-file frame the\n * guides were authored in — the same gate snowcone.app's editor applies. A\n * design authored at other dims would render the overlay misaligned, so it's\n * skipped (with a dev hint, since the fix — author at the placement's dims —\n * is on the embedder's side).\n */\nexport function pieceGuidesForArtboard(\n  bundle: PieceGuideBundle,\n  artboard: { width: number; height: number } | undefined,\n): PieceGuidesConfig | undefined {\n  if (!artboard) return undefined;\n  if (artboard.width !== bundle.artboardWidth || artboard.height !== bundle.artboardHeight) {\n    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(\n        `[RealtimeEmbed] This product has printable-area guides (authored at ` +\n          `${bundle.artboardWidth}×${bundle.artboardHeight}), but the design's artboard is ` +\n          `${artboard.width}×${artboard.height} — the dead-zone overlay is skipped because the ` +\n          `coordinates wouldn't line up. Author the design at the placement's dimensions to get it.`,\n      );\n    }\n    return undefined;\n  }\n  return bundle.config;\n}\n\n/**\n * Fetch the piece-guide bundle for a variant (gvid). Returns null while\n * loading, when `gvid` is undefined, and on any error (silent degrade).\n */\nexport function usePieceGuideBundle(\n  gvid: string | undefined,\n  apiBase: string = PIECE_GUIDES_API_BASE,\n): PieceGuideBundle | null {\n  const [bundle, setBundle] = useState<PieceGuideBundle | null>(null);\n\n  useEffect(() => {\n    if (!gvid) {\n      setBundle(null);\n      return;\n    }\n    let cancelled = false;\n    fetch(`${apiBase}/printables/by-gvid/${encodeURIComponent(gvid)}/piece-guides`)\n      .then(async (res) => {\n        if (!res.ok) throw new Error(`status ${res.status}`);\n        return (await res.json()) as RawPieceGuidesResponse;\n      })\n      .then((raw) => {\n        if (!cancelled) setBundle(transformPieceGuides(raw));\n      })\n      .catch(() => {\n        // No guides is a degraded state, not a failure — the editor keeps\n        // working, the overlay just doesn't appear.\n        if (!cancelled) setBundle(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [gvid, apiBase]);\n\n  return bundle;\n}\n"],"names":["PIECE_GUIDES_API_BASE","transformPieceGuides","raw","pieces","p","pieceGuidesForArtboard","bundle","artboard","process","usePieceGuideBundle","gvid","apiBase","setBundle","useState","useEffect","cancelled","res"],"mappings":";;AA6BO,MAAMA,IAAwB;AA8B9B,SAASC,EAAqBC,GAA+C;AAClF,QAAMC,IAAoCD,EAAI,OAAO,IAAI,CAACE,OAAO;AAAA,IAC/D,IAAIA,EAAE;AAAA,IACN,GAAGA,EAAE;AAAA,IACL,GAAGA,EAAE;AAAA,IACL,OAAOA,EAAE;AAAA,IACT,QAAQA,EAAE;AAAA,IACV,UAAU,OAAOA,EAAE,YAAa,WAAWA,EAAE,WAAW;AAAA,IACxD,iBACE,OAAOA,EAAE,uBAAwB,YAAYA,EAAE,sBAAsB,IACjEA,EAAE,sBAAsBF,EAAI,cAC5B;AAAA,EAAA,EACN;AACF,SAAO;AAAA,IACL,eAAeA,EAAI;AAAA,IACnB,gBAAgBA,EAAI;AAAA,IACpB,QAAQ;AAAA,MACN,QAAAC;AAAA,MACA,QAAQD,EAAI,eAAe,CAAA;AAAA,MAC3B,OAAOA,EAAI;AAAA,IAAA;AAAA,EACb;AAEJ;AASO,SAASG,EACdC,GACAC,GAC+B;;AAC/B,MAAKA,GACL;AAAA,QAAIA,EAAS,UAAUD,EAAO,iBAAiBC,EAAS,WAAWD,EAAO,gBAAgB;AACxF,MAAI,OAAOE,IAAY,SAAeA,IAAAA,EAAQ,QAARA,gBAAAA,EAAa,cAAa,gBAC9D,QAAQ;AAAA,QACN,uEACKF,EAAO,aAAa,IAAIA,EAAO,cAAc,mCAC7CC,EAAS,KAAK,IAAIA,EAAS,MAAM;AAAA,MAAA;AAI1C;AAAA,IACF;AACA,WAAOD,EAAO;AAAA;AAChB;AAMO,SAASG,EACdC,GACAC,IAAkBX,GACO;AACzB,QAAM,CAACM,GAAQM,CAAS,IAAIC,EAAkC,IAAI;AAElE,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,GAAM;AACT,MAAAE,EAAU,IAAI;AACd;AAAA,IACF;AACA,QAAIG,IAAY;AAChB,iBAAM,GAAGJ,CAAO,uBAAuB,mBAAmBD,CAAI,CAAC,eAAe,EAC3E,KAAK,OAAOM,MAAQ;AACnB,UAAI,CAACA,EAAI,GAAI,OAAM,IAAI,MAAM,UAAUA,EAAI,MAAM,EAAE;AACnD,aAAQ,MAAMA,EAAI,KAAA;AAAA,IACpB,CAAC,EACA,KAAK,CAACd,MAAQ;AACb,MAAKa,KAAWH,EAAUX,EAAqBC,CAAG,CAAC;AAAA,IACrD,CAAC,EACA,MAAM,MAAM;AAGX,MAAKa,KAAWH,EAAU,IAAI;AAAA,IAChC,CAAC,GACI,MAAM;AACX,MAAAG,IAAY;AAAA,IACd;AAAA,EACF,GAAG,CAACL,GAAMC,CAAO,CAAC,GAEXL;AACT;"}
+{"version":3,"file":"usePieceGuideBundle-CnSmYrmM.js","sources":["../src/components/embed-realtime/usePieceGuideBundle.ts"],"sourcesContent":["'use client';\n\n/**\n * usePieceGuideBundle — fetch a product's printable-area guides for the embed.\n *\n * Some products hide part of the print file under hardware (a phone case's\n * camera module, a notebook's spine). snowcone.app's own editor draws the\n * printable-area / dead-zone overlay from the product's piece guides;\n * `<RealtimeEmbed>` uses this hook so embedders get the same overlay with\n * zero config — without it, a buyer can edit artwork the mockup will never\n * show, with no signal anywhere (#566).\n *\n * The endpoint is a public read (geometry only — piece rects, safe areas,\n * authored guides; same exposure class as the public catalog). Errors degrade\n * silently to \"no guides\": the editor keeps working, the overlay just doesn't\n * appear — same posture as snowcone.app's own loader.\n *\n * @module\n */\n\nimport { useEffect, useState } from 'react';\nimport type { PieceGuidesConfig } from '../embed/SnowconeCanvas.js';\nimport type {\n  PieceGuide,\n  PieceGuideRendererPiece,\n  PieceGuideRendererStyle,\n} from '../../rendering/PieceGuideRenderer.js';\n\n/** Backend base hosting `GET /printables/by-gvid/:gvid/piece-guides`. */\nexport const PIECE_GUIDES_API_BASE = 'https://api.snowcone.app';\n\n/** Wire shape of the piece-guides endpoint (the consumer-safe subset). */\ninterface RawPieceGuidesResponse {\n  artboardWidth: number;\n  artboardHeight: number;\n  /** Inches→px conversion factor for `safeAreaInsetInches`. */\n  templateDpi: number;\n  pieces: Array<{\n    id: string;\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n    rotation?: number;\n    safeAreaInsetInches?: number;\n  }>;\n  pieceGuides?: Record<string, PieceGuide>;\n  pieceGuidesStyle?: PieceGuideRendererStyle;\n}\n\n/** A fetched bundle: the overlay config plus the artboard frame it was authored in. */\nexport interface PieceGuideBundle {\n  /** The print-file frame the piece coords live in. */\n  artboardWidth: number;\n  artboardHeight: number;\n  config: PieceGuidesConfig;\n}\n\n/** Convert the wire response into a renderer-ready bundle (inches → px, etc.). */\nexport function transformPieceGuides(raw: RawPieceGuidesResponse): PieceGuideBundle {\n  const pieces: PieceGuideRendererPiece[] = raw.pieces.map((p) => ({\n    id: p.id,\n    x: p.x,\n    y: p.y,\n    width: p.width,\n    height: p.height,\n    rotation: typeof p.rotation === 'number' ? p.rotation : undefined,\n    safeAreaInsetPx:\n      typeof p.safeAreaInsetInches === 'number' && p.safeAreaInsetInches > 0\n        ? p.safeAreaInsetInches * raw.templateDpi\n        : undefined,\n  }));\n  return {\n    artboardWidth: raw.artboardWidth,\n    artboardHeight: raw.artboardHeight,\n    config: {\n      pieces,\n      guides: raw.pieceGuides ?? {},\n      style: raw.pieceGuidesStyle,\n    },\n  };\n}\n\n/**\n * Gate the bundle on the design's artboard matching the print-file frame the\n * guides were authored in — the same gate snowcone.app's editor applies. A\n * design authored at other dims would render the overlay misaligned, so it's\n * skipped (with a dev hint, since the fix — author at the placement's dims —\n * is on the embedder's side).\n */\nexport function pieceGuidesForArtboard(\n  bundle: PieceGuideBundle,\n  artboard: { width: number; height: number } | undefined,\n): PieceGuidesConfig | undefined {\n  if (!artboard) return undefined;\n  if (artboard.width !== bundle.artboardWidth || artboard.height !== bundle.artboardHeight) {\n    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(\n        `[RealtimeEmbed] This product has printable-area guides (authored at ` +\n          `${bundle.artboardWidth}×${bundle.artboardHeight}), but the design's artboard is ` +\n          `${artboard.width}×${artboard.height} — the dead-zone overlay is skipped because the ` +\n          `coordinates wouldn't line up. Author the design at the placement's dimensions to get it.`,\n      );\n    }\n    return undefined;\n  }\n  return bundle.config;\n}\n\n/**\n * Fetch the piece-guide bundle for a variant (gvid). Returns null while\n * loading, when `gvid` is undefined, and on any error (silent degrade).\n */\nexport function usePieceGuideBundle(\n  gvid: string | undefined,\n  apiBase: string = PIECE_GUIDES_API_BASE,\n): PieceGuideBundle | null {\n  const [bundle, setBundle] = useState<PieceGuideBundle | null>(null);\n\n  useEffect(() => {\n    if (!gvid) {\n      setBundle(null);\n      return;\n    }\n    let cancelled = false;\n    fetch(`${apiBase}/printables/by-gvid/${encodeURIComponent(gvid)}/piece-guides`)\n      .then(async (res) => {\n        if (!res.ok) throw new Error(`status ${res.status}`);\n        return (await res.json()) as RawPieceGuidesResponse;\n      })\n      .then((raw) => {\n        if (!cancelled) setBundle(transformPieceGuides(raw));\n      })\n      .catch(() => {\n        // No guides is a degraded state, not a failure — the editor keeps\n        // working, the overlay just doesn't appear.\n        if (!cancelled) setBundle(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [gvid, apiBase]);\n\n  return bundle;\n}\n"],"names":["PIECE_GUIDES_API_BASE","transformPieceGuides","raw","pieces","p","pieceGuidesForArtboard","bundle","artboard","process","usePieceGuideBundle","gvid","apiBase","setBundle","useState","useEffect","cancelled","res"],"mappings":";;AA6BO,MAAMA,IAAwB;AA8B9B,SAASC,EAAqBC,GAA+C;AAClF,QAAMC,IAAoCD,EAAI,OAAO,IAAI,CAACE,OAAO;AAAA,IAC/D,IAAIA,EAAE;AAAA,IACN,GAAGA,EAAE;AAAA,IACL,GAAGA,EAAE;AAAA,IACL,OAAOA,EAAE;AAAA,IACT,QAAQA,EAAE;AAAA,IACV,UAAU,OAAOA,EAAE,YAAa,WAAWA,EAAE,WAAW;AAAA,IACxD,iBACE,OAAOA,EAAE,uBAAwB,YAAYA,EAAE,sBAAsB,IACjEA,EAAE,sBAAsBF,EAAI,cAC5B;AAAA,EAAA,EACN;AACF,SAAO;AAAA,IACL,eAAeA,EAAI;AAAA,IACnB,gBAAgBA,EAAI;AAAA,IACpB,QAAQ;AAAA,MACN,QAAAC;AAAA,MACA,QAAQD,EAAI,eAAe,CAAA;AAAA,MAC3B,OAAOA,EAAI;AAAA,IAAA;AAAA,EACb;AAEJ;AASO,SAASG,EACdC,GACAC,GAC+B;;AAC/B,MAAKA,GACL;AAAA,QAAIA,EAAS,UAAUD,EAAO,iBAAiBC,EAAS,WAAWD,EAAO,gBAAgB;AACxF,MAAI,OAAOE,IAAY,SAAeA,IAAAA,EAAQ,QAARA,gBAAAA,EAAa,cAAa,gBAC9D,QAAQ;AAAA,QACN,uEACKF,EAAO,aAAa,IAAIA,EAAO,cAAc,mCAC7CC,EAAS,KAAK,IAAIA,EAAS,MAAM;AAAA,MAAA;AAI1C;AAAA,IACF;AACA,WAAOD,EAAO;AAAA;AAChB;AAMO,SAASG,EACdC,GACAC,IAAkBX,GACO;AACzB,QAAM,CAACM,GAAQM,CAAS,IAAIC,EAAkC,IAAI;AAElE,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,GAAM;AACT,MAAAE,EAAU,IAAI;AACd;AAAA,IACF;AACA,QAAIG,IAAY;AAChB,iBAAM,GAAGJ,CAAO,uBAAuB,mBAAmBD,CAAI,CAAC,eAAe,EAC3E,KAAK,OAAOM,MAAQ;AACnB,UAAI,CAACA,EAAI,GAAI,OAAM,IAAI,MAAM,UAAUA,EAAI,MAAM,EAAE;AACnD,aAAQ,MAAMA,EAAI,KAAA;AAAA,IACpB,CAAC,EACA,KAAK,CAACd,MAAQ;AACb,MAAKa,KAAWH,EAAUX,EAAqBC,CAAG,CAAC;AAAA,IACrD,CAAC,EACA,MAAM,MAAM;AAGX,MAAKa,KAAWH,EAAU,IAAI;AAAA,IAChC,CAAC,GACI,MAAM;AACX,MAAAG,IAAY;AAAA,IACd;AAAA,EACF,GAAG,CAACL,GAAMC,CAAO,CAAC,GAEXL;AACT;"}

package/dist/utils/featureApplied.d.ts

@@ -6,6 +6,10 @@ export interface FeatureAppliedFlags {
     knockout: boolean;
     distress: boolean;
     imageMask: boolean;
+    /** Drop shadow enabled */
+    shadow: boolean;
+    /** Standard blend mode applied (multiply/screen/overlay/darken/lighten — NOT knockout/clip) */
+    blendMode: boolean;
     /** Image: `transformData.borderRadius`. */
     cornerRadius: boolean;
     /** Image: `transformData.adjustments` (brightness/contrast/saturation non-neutral). */

package/dist/{validation-CsTlSvJJ.js → validation-CSa86fDE.js}

@@ -1,17 +1,17 @@
 import { jsx as r, jsxs as y, Fragment as Pn } from "react/jsx-runtime";
 import * as $n from "react";
 import je, { useState as ce, useEffect as Pe, useCallback as ft, useMemo as xs, useContext as Pr, createContext as Ar, useRef as we, useImperativeHandle as nr, forwardRef as Nr } from "react";
-import { u as rs, k as sr, t as _s, v as $s, a as Ts, b as Dr, g as Br, h as Or } from "./design-builder-CBG2hKc8.js";
-import { h as rr, I as ze, k as zr, o as or, N as Fn, m as Qt, O as _e, z as Xr, x as Lr, y as Yr, w as Hr, P as _r, T as dn, i as un, j as hn, B as Ct, Q as $r, R as Fr, V as Wr, W as ir, g as Vr, u as ar } from "./useCommands-bPXY9rCh.js";
-import { I as Lt, G as Re, ay as Is, aa as ys, af as cr, az as Fs, aA as Kr, aB as Cn, aC as Ur, aD as us, P as wn, c as zn, aE as en, aF as ms, aG as Gr, T as Qe, ax as qr, aH as Jn, aI as jr, aJ as Zr, aK as Jr, aL as lr, aM as Qr, aN as Es, aO as eo, W as to, S as Qn, R as no, C as Bn } from "./FontAnalyzer-BYhwxDhe.js";
+import { u as rs, k as sr, t as _s, v as $s, a as Ts, b as Dr, g as Br, h as Or } from "./design-builder-BpbYUYtK.js";
+import { h as rr, I as ze, k as zr, o as or, N as Fn, m as Qt, O as _e, z as Xr, x as Lr, y as Yr, w as Hr, P as _r, T as dn, i as un, j as hn, B as Ct, Q as $r, R as Fr, V as Wr, W as ir, g as Vr, u as ar } from "./useCommands-DwnZHUg8.js";
+import { I as Lt, G as Re, aC as Is, ad as ys, ai as cr, aD as Fs, aE as Kr, aF as Cn, aG as Ur, aH as us, P as wn, c as zn, aI as en, aJ as ms, aK as Gr, T as Qe, aB as qr, aL as Jn, aM as jr, aN as Zr, aO as Jr, aP as lr, aQ as Qr, aR as Es, aS as eo, Z as to, S as Qn, R as no, C as Bn } from "./FontAnalyzer-BrKY6XYn.js";
 import { createPortal as dr } from "react-dom";
-import { g as _n, b as so, r as ro, c as oo, C as Ws, d as Vs, e as gs, T as io, a as ao, A as co, S as lo, I as uo } from "./CanvasRenderer-hpJ05JGO.js";
+import { g as _n, b as so, r as ro, c as oo, C as Ws, d as Vs, e as gs, T as io, a as ao, A as co, S as lo, I as uo } from "./CanvasRenderer-1j-twIbs.js";
 import { u as ho } from "./ThemeContext-Rjz25x9X.js";
 import { renderToStaticMarkup as fo } from "react-dom/server";
-import { D as Ps, n as As, o as ur, p as Ns, C as po, q as Mt } from "./ContextualToolbars-DRbuUE7W.js";
-import { L as Tt, S as hr, T as Ot, I as mo } from "./custom-icons-Co4rcW0S.js";
+import { D as Ps, n as As, o as ur, p as Ns, C as po, q as Mt } from "./ContextualToolbars-CLDFENZq.js";
+import { L as Tt, S as hr, T as Ot, I as mo } from "./custom-icons-DTWtkJ9N.js";
 import * as ts from "@radix-ui/react-radio-group";
-import { L as go, M as Ks, N as Us } from "./ExportManager-Bkzzyxgw.js";
+import { L as go, M as Ks, N as Us } from "./ExportManager-Ci81K6xA.js";
 import { cva as fr } from "class-variance-authority";
 import { debounce as Gs } from "lodash-es";
 const xo = {
@@ -5648,12 +5648,12 @@ async function qa() {
   ] = await Promise.all([
     Promise.resolve().then(() => xa),
     Promise.resolve().then(() => ba),
-    import("./ImagePanel-CEr0_FYy.js"),
+    import("./ImagePanel-ntJBepby.js"),
     Promise.resolve().then(() => Sa),
     Promise.resolve().then(() => ka),
-    import("./ContextualToolbars-DRbuUE7W.js").then((c) => c.s),
+    import("./ContextualToolbars-CLDFENZq.js").then((c) => c.s),
     Promise.resolve().then(() => Ra),
-    import("./ContextualToolbars-DRbuUE7W.js").then((c) => c.r)
+    import("./ContextualToolbars-CLDFENZq.js").then((c) => c.r)
   ]);
   It("effects-panel", {
     component: e,
@@ -8683,4 +8683,4 @@ export {
   Ga as u,
   nc as v
 };
-//# sourceMappingURL=validation-CsTlSvJJ.js.map
+//# sourceMappingURL=validation-CSa86fDE.js.map