@littlepartytime/dev-kit 1.18.2 → 1.18.4

package/dist/webapp/components/PhoneFrame.tsx

@@ -46,6 +46,7 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
       <div style={{ width: BODY_W * scale, height: BODY_H * scale, flexShrink: 0 }}>
         {/* Phone body at original pixel size, visually scaled */}
         <div
+          id="devkit-phone"
           style={{
             position: 'relative',
             width: BODY_W,

package/dist/webapp/utils/captureScreen.ts

@@ -1,55 +1,50 @@
 import html2canvas from 'html2canvas';
 
-// Must match PhoneFrame constants: SCREEN_W=390, SAFE_AREA_TOP=59, SAFE_AREA_BOTTOM=34, SCREEN_H=844
-const CAPTURE_W = 390;
-const CAPTURE_H = 751; // 844 - 59 - 34
+// PhoneFrame body width (bezel included): 390 + 8*2
+const PHONE_W = 406;
 
 /**
- * Captures the game content area (safe area only, no phone bezel).
- * Returns a base64-encoded PNG data URL.
+ * Captures the phone model (game content + bezel frame) as a PNG.
+ * Returns a base64-encoded data URL.
  *
  * Also exposed on window.__devkit__.captureScreen() for LLM/Playwright callers:
  *   await page.evaluate(() => window.__devkit__.captureScreen())
  *
- * ## Why onclone?
- * html2canvas clones the entire document before rendering. The PhoneFrame DOM
- * has three CSS properties that break the capture:
+ * ## Strategy: capture from documentElement with visual crop
  *
- * - `contain: paint` on Screen div and safe-area div — html2canvas uses
- *   getBoundingClientRect() to compute clip rects, which returns the *visual*
- *   (post-transform) size, clipping the output to ~half height.
- * - `transform: scale(x)` on the phone body — same getBoundingClientRect
- *   mismatch; intrinsic size is 390×751 but visual rect is smaller.
- * - `overflow: hidden` on ancestors — once transform is removed, the full-size
- *   phone body overflows its scaled wrapper and gets clipped.
+ * The phone body lives inside transform:scale(x) + contain:paint, which makes
+ * its getBoundingClientRect() return the *visual* (scaled) size. Previous
+ * attempts to target the game element directly all failed because html2canvas
+ * reads the target's bounding rect first, then clones — the crop coordinates
+ * never agree with the clone's layout.
  *
- * Fix: in the `onclone` callback, neutralise all three properties on ancestor
- * elements of the *cloned* document. The original DOM is never touched.
+ * By targeting document.documentElement and passing the phone body's visual
+ * bounding rect as an explicit crop, html2canvas renders the full page as-is
+ * (all CSS respected) and simply cuts out the phone region. Crop coordinates
+ * equal visual coordinates — no mismatch possible.
  */
 export async function captureScreen(): Promise<string> {
-  const el = document.getElementById('devkit-game-screen');
-  if (!el) throw new Error('[devkit] #devkit-game-screen not found — is the Preview page active?');
+  const phone = document.getElementById('devkit-phone');
+  if (!phone) throw new Error('[devkit] #devkit-phone not found — is the Preview page active?');
 
-  const canvas = await html2canvas(el, {
-    width: CAPTURE_W,
-    height: CAPTURE_H,
-    scale: 2,
+  const rect = phone.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    throw new Error('[devkit] phone frame has zero dimensions');
+  }
+
+  // Upsample so the output matches the phone's natural size at 2× retina.
+  const outputScale = (PHONE_W * 2) / rect.width;
+
+  const canvas = await html2canvas(document.documentElement, {
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY,
+    width: rect.width,
+    height: rect.height,
+    scale: outputScale,
     logging: false,
     backgroundColor: null,
     useCORS: true,
     allowTaint: true,
-    onclone: (clonedDoc: Document) => {
-      const clonedEl = clonedDoc.getElementById('devkit-game-screen');
-      if (!clonedEl) return;
-
-      let node: HTMLElement | null = clonedEl;
-      while (node && node !== clonedDoc.body) {
-        node.style.contain = '';
-        node.style.transform = 'none';
-        node.style.overflow = 'visible';
-        node = node.parentElement;
-      }
-    },
   });
 
   return canvas.toDataURL('image/png');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.18.2",
+  "version": "1.18.4",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",