@snowcone-app/canvas 0.38.0 → 0.39.0

package/dist/{usePieceGuideBundle-C7r06a_x.js → usePieceGuideBundle-Cab2gRnn.js}

@@ -1,7 +1,7 @@
-import { p as r } from "./FontAnalyzer-DWHS41ba.js";
-import { useState as a, useEffect as h } from "react";
-const c = "https://api.snowcone.app";
-function d(e) {
+import { p as a } from "./FontAnalyzer-DWHS41ba.js";
+import { useState as s, useEffect as h } from "react";
+const d = "https://api.snowcone.app";
+function c(e) {
   const i = e.pieces.map((t) => ({
     id: t.id,
     x: t.x,
@@ -9,6 +9,9 @@ function d(e) {
     width: t.width,
     height: t.height,
     rotation: typeof t.rotation == "number" ? t.rotation : void 0,
+    // natural (unrotated) size — required at non-right angles (a bandana's 45° folded view)
+    naturalWidth: typeof t.naturalWidth == "number" ? t.naturalWidth : void 0,
+    naturalHeight: typeof t.naturalHeight == "number" ? t.naturalHeight : void 0,
     safeAreaInsetPx: typeof t.safeAreaInsetInches == "number" && t.safeAreaInsetInches > 0 ? t.safeAreaInsetInches * e.templateDpi : void 0
   }));
   return {
@@ -22,7 +25,7 @@ function d(e) {
   };
 }
 function g(e, i) {
-  var s;
+  var o;
   if (!i) return;
   const { pieces: t } = e.config;
   if (t.length > 1 && t.every(
@@ -30,36 +33,36 @@ function g(e, i) {
   ) && i.name && t.some((n) => n.id === i.name) && i.width === e.artboardWidth && i.height === e.artboardHeight)
     return { ...e.config, pieces: t.filter((n) => n.id === i.name) };
   if (i.width !== e.artboardWidth || i.height !== e.artboardHeight) {
-    typeof r < "u" && ((s = r.env) == null ? void 0 : s.NODE_ENV) !== "production" && console.warn(
+    typeof a < "u" && ((o = a.env) == null ? void 0 : o.NODE_ENV) !== "production" && console.warn(
       `[RealtimeEmbed] This product has printable-area guides (authored at ${e.artboardWidth}×${e.artboardHeight}), but the design's artboard is ${i.width}×${i.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 p(e, i = c) {
-  const [t, o] = a(null);
+function l(e, i = d) {
+  const [t, r] = s(null);
   return h(() => {
     if (!e) {
-      o(null);
+      r(null);
       return;
     }
-    let s = !1;
+    let o = !1;
     return fetch(`${i}/printables/by-gvid/${encodeURIComponent(e)}/piece-guides`).then(async (n) => {
       if (!n.ok) throw new Error(`status ${n.status}`);
       return await n.json();
     }).then((n) => {
-      s || o(d(n));
+      o || r(c(n));
     }).catch(() => {
-      s || o(null);
+      o || r(null);
     }), () => {
-      s = !0;
+      o = !0;
     };
   }, [e, i]), t;
 }
 export {
-  c as P,
+  d as P,
   g as p,
-  p as u
+  l as u
 };
-//# sourceMappingURL=usePieceGuideBundle-C7r06a_x.js.map
+//# sourceMappingURL=usePieceGuideBundle-Cab2gRnn.js.map

package/dist/usePieceGuideBundle-Cab2gRnn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePieceGuideBundle-Cab2gRnn.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    naturalWidth?: number;\n    naturalHeight?: 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    // natural (unrotated) size — required at non-right angles (a bandana's 45° folded view)\n    naturalWidth: typeof p.naturalWidth === 'number' ? p.naturalWidth : undefined,\n    naturalHeight: typeof p.naturalHeight === 'number' ? p.naturalHeight : 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; name?: string } | undefined,\n): PieceGuidesConfig | undefined {\n  if (!artboard) return undefined;\n  // A SEPARATE-mode printable (slides Left/Right, one print file per area)\n  // synthesizes one full-frame piece per placement — identical boxes\n  // stacked at (0,0). An artboard named for one of those placements draws\n  // ITS piece only: both stacked pieces would double-paint the bleed wash\n  // (ADR-0101 §6). Any other bundle (a real spread) draws every piece.\n  const { pieces } = bundle.config;\n  const stacked =\n    pieces.length > 1 &&\n    pieces.every(\n      (p) => p.x === 0 && p.y === 0 && p.width === bundle.artboardWidth && p.height === bundle.artboardHeight,\n    );\n  if (stacked && artboard.name && pieces.some((p) => p.id === artboard.name)) {\n    if (artboard.width === bundle.artboardWidth && artboard.height === bundle.artboardHeight) {\n      return { ...bundle.config, pieces: pieces.filter((p) => p.id === artboard.name) };\n    }\n  }\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;AAgC9B,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;AAAA,IAExD,cAAc,OAAOA,EAAE,gBAAiB,WAAWA,EAAE,eAAe;AAAA,IACpE,eAAe,OAAOA,EAAE,iBAAkB,WAAWA,EAAE,gBAAgB;AAAA,IACvE,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,MAAI,CAACA,EAAU;AAMf,QAAM,EAAE,QAAAJ,MAAWG,EAAO;AAM1B,MAJEH,EAAO,SAAS,KAChBA,EAAO;AAAA,IACL,CAACC,MAAMA,EAAE,MAAM,KAAKA,EAAE,MAAM,KAAKA,EAAE,UAAUE,EAAO,iBAAiBF,EAAE,WAAWE,EAAO;AAAA,EAAA,KAE9EC,EAAS,QAAQJ,EAAO,KAAK,CAACC,MAAMA,EAAE,OAAOG,EAAS,IAAI,KACnEA,EAAS,UAAUD,EAAO,iBAAiBC,EAAS,WAAWD,EAAO;AACxE,WAAO,EAAE,GAAGA,EAAO,QAAQ,QAAQH,EAAO,OAAO,CAACC,MAAMA,EAAE,OAAOG,EAAS,IAAI,EAAA;AAGlF,MAAIA,EAAS,UAAUD,EAAO,iBAAiBC,EAAS,WAAWD,EAAO,gBAAgB;AACxF,IAAI,OAAOE,IAAY,SAAeA,IAAAA,EAAQ,QAARA,gBAAAA,EAAa,cAAa,gBAC9D,QAAQ;AAAA,MACN,uEACKF,EAAO,aAAa,IAAIA,EAAO,cAAc,mCAC7CC,EAAS,KAAK,IAAIA,EAAS,MAAM;AAAA,IAAA;AAI1C;AAAA,EACF;AACA,SAAOD,EAAO;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/pieceRotation.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Setup-time piece rotation on the canvas (mirrors apps/backend/printables/rotation.ts): a piece is displayed turned
+ * `rotation`° CLOCKWISE (any multiple of 45 — 90 for sideways panels, 45 for a bandana's folded diamond); its
+ * `x, y, width, height` are the DISPLAYED bounding box; guides are authored in its NATURAL (unrotated) frame.
+ * Everything maps natural → displayed about the centre: translate(D/2) · rotate(θ) · translate(−N/2).
+ */
+/** Bounding box of a w×h rect turned `deg`° (swapped at 90/270, the diamond's square at 45). */
+export declare function rotatedBounds(w: number, h: number, deg: number): {
+    width: number;
+    height: number;
+};
+export interface RotatedPieceLike {
+    id?: string;
+    width: number;
+    height: number;
+    rotation?: number;
+    /** natural (unrotated) size — required for non-right angles, where it can't be recovered from the displayed box */
+    naturalWidth?: number;
+    naturalHeight?: number;
+}
+/**
+ * The piece's natural size: explicit when given; at right angles derived from the displayed box (swap at 90/270).
+ * A non-right angle without it throws — guessing would draw every guide at the wrong size.
+ */
+export declare function naturalDims(p: RotatedPieceLike): {
+    width: number;
+    height: number;
+};
+/** The natural → displayed transform as an SVG `transform` value ("" when unrotated). */
+export declare function pieceSvgTransform(p: RotatedPieceLike): string;
+/** Apply the natural → displayed transform to a 2D context (no-op when unrotated). */
+export declare function applyPieceRotation(ctx: {
+    translate(x: number, y: number): void;
+    rotate(a: number): void;
+}, p: RotatedPieceLike): void;