@littlepartytime/dev-kit 1.18.0 → 1.18.2

package/dist/webapp/utils/captureScreen.ts

@@ -10,6 +10,21 @@ const CAPTURE_H = 751; // 844 - 59 - 34
  *
  * 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:
+ *
+ * - `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.
+ *
+ * Fix: in the `onclone` callback, neutralise all three properties on ancestor
+ * elements of the *cloned* document. The original DOM is never touched.
  */
 export async function captureScreen(): Promise<string> {
   const el = document.getElementById('devkit-game-screen');
@@ -23,6 +38,18 @@ export async function captureScreen(): Promise<string> {
     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.0",
+  "version": "1.18.2",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",