@yoamigo.com/core 0.1.8 → 0.1.9

package/dist/index.js

@@ -198,6 +198,11 @@ var BuilderSelectionManager = class {
         case "CLEAR_SELECTIONS":
           this.clearAllSelections();
           break;
+        case "REQUEST_REGION_SCREENSHOT":
+          if (data.region) {
+            this.captureRegionScreenshot(data.region);
+          }
+          break;
       }
     });
   }
@@ -278,6 +283,9 @@ var BuilderSelectionManager = class {
         this.sendToParent({ type: "SHIFT_KEY_PRESSED" });
       }
     }
+    if (e.key === "Escape") {
+      this.sendToParent({ type: "ESCAPE_KEY_PRESSED" });
+    }
   };
   /**
    * Check if element matches any selectable selector
@@ -564,6 +572,72 @@ var BuilderSelectionManager = class {
       container.style.height = `${rect.height}px`;
     });
   };
+  /**
+   * Capture a region of the page as a screenshot
+   * Uses html2canvas to render the page and then crops to the specified region
+   */
+  async captureRegionScreenshot(region) {
+    try {
+      console.log("[BuilderSelection] Capturing region screenshot:", region);
+      const html2canvas = (await import("html2canvas")).default;
+      const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
+      overlays.forEach((el) => {
+        ;
+        el.style.display = "none";
+      });
+      const canvas = await html2canvas(document.body, {
+        scale: window.devicePixelRatio || 1,
+        logging: false,
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: null
+        // Preserve transparency if any
+      });
+      overlays.forEach((el) => {
+        ;
+        el.style.display = "";
+      });
+      const scale = window.devicePixelRatio || 1;
+      const scaledRegion = {
+        x: Math.round(region.x * scale),
+        y: Math.round(region.y * scale),
+        width: Math.round(region.width * scale),
+        height: Math.round(region.height * scale)
+      };
+      const croppedCanvas = document.createElement("canvas");
+      croppedCanvas.width = scaledRegion.width;
+      croppedCanvas.height = scaledRegion.height;
+      const ctx = croppedCanvas.getContext("2d");
+      if (!ctx) {
+        throw new Error("Failed to get canvas context");
+      }
+      ctx.drawImage(
+        canvas,
+        scaledRegion.x,
+        scaledRegion.y,
+        scaledRegion.width,
+        scaledRegion.height,
+        0,
+        0,
+        scaledRegion.width,
+        scaledRegion.height
+      );
+      const dataUrl = croppedCanvas.toDataURL("image/png", 0.9);
+      console.log("[BuilderSelection] Region screenshot captured, size:", dataUrl.length);
+      this.sendToParent({
+        type: "REGION_SCREENSHOT_READY",
+        dataUrl,
+        region
+      });
+    } catch (error) {
+      console.error("[BuilderSelection] Region screenshot failed:", error);
+      this.sendToParent({
+        type: "REGION_SCREENSHOT_ERROR",
+        error: error instanceof Error ? error.message : "Screenshot capture failed",
+        region
+      });
+    }
+  }
   renderSelectionIndicator(element, selectionId, color) {
     const rect = element.getBoundingClientRect();
     const container = document.createElement("div");

package/dist/lib.js

@@ -157,6 +157,11 @@ var BuilderSelectionManager = class {
         case "CLEAR_SELECTIONS":
           this.clearAllSelections();
           break;
+        case "REQUEST_REGION_SCREENSHOT":
+          if (data.region) {
+            this.captureRegionScreenshot(data.region);
+          }
+          break;
       }
     });
   }
@@ -237,6 +242,9 @@ var BuilderSelectionManager = class {
         this.sendToParent({ type: "SHIFT_KEY_PRESSED" });
       }
     }
+    if (e.key === "Escape") {
+      this.sendToParent({ type: "ESCAPE_KEY_PRESSED" });
+    }
   };
   /**
    * Check if element matches any selectable selector
@@ -523,6 +531,72 @@ var BuilderSelectionManager = class {
       container.style.height = `${rect.height}px`;
     });
   };
+  /**
+   * Capture a region of the page as a screenshot
+   * Uses html2canvas to render the page and then crops to the specified region
+   */
+  async captureRegionScreenshot(region) {
+    try {
+      console.log("[BuilderSelection] Capturing region screenshot:", region);
+      const html2canvas = (await import("html2canvas")).default;
+      const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
+      overlays.forEach((el) => {
+        ;
+        el.style.display = "none";
+      });
+      const canvas = await html2canvas(document.body, {
+        scale: window.devicePixelRatio || 1,
+        logging: false,
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: null
+        // Preserve transparency if any
+      });
+      overlays.forEach((el) => {
+        ;
+        el.style.display = "";
+      });
+      const scale = window.devicePixelRatio || 1;
+      const scaledRegion = {
+        x: Math.round(region.x * scale),
+        y: Math.round(region.y * scale),
+        width: Math.round(region.width * scale),
+        height: Math.round(region.height * scale)
+      };
+      const croppedCanvas = document.createElement("canvas");
+      croppedCanvas.width = scaledRegion.width;
+      croppedCanvas.height = scaledRegion.height;
+      const ctx = croppedCanvas.getContext("2d");
+      if (!ctx) {
+        throw new Error("Failed to get canvas context");
+      }
+      ctx.drawImage(
+        canvas,
+        scaledRegion.x,
+        scaledRegion.y,
+        scaledRegion.width,
+        scaledRegion.height,
+        0,
+        0,
+        scaledRegion.width,
+        scaledRegion.height
+      );
+      const dataUrl = croppedCanvas.toDataURL("image/png", 0.9);
+      console.log("[BuilderSelection] Region screenshot captured, size:", dataUrl.length);
+      this.sendToParent({
+        type: "REGION_SCREENSHOT_READY",
+        dataUrl,
+        region
+      });
+    } catch (error) {
+      console.error("[BuilderSelection] Region screenshot failed:", error);
+      this.sendToParent({
+        type: "REGION_SCREENSHOT_ERROR",
+        error: error instanceof Error ? error.message : "Screenshot capture failed",
+        region
+      });
+    }
+  }
   renderSelectionIndicator(element, selectionId, color) {
     const rect = element.getBoundingClientRect();
     const container = document.createElement("div");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/core",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Core components, router, and utilities for YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "html2canvas": "^1.4.1",
     "preact": "^10.27.2",
     "wouter": "^3.8.0"
   },
@@ -87,18 +88,18 @@
     "vite": "^7.2.4"
   },
   "peerDependencies": {
-    "@vitejs/plugin-react": "^5.0.0",
     "@preact/preset-vite": "^2.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "@tiptap/core": "^3.0.0",
     "@tiptap/extension-link": "^3.0.0",
     "@tiptap/extension-text-style": "^3.0.0",
     "@tiptap/pm": "^3.0.0",
     "@tiptap/react": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",
-    "dompurify": "^3.0.0"
+    "@vitejs/plugin-react": "^5.0.0",
+    "dompurify": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "peerDependenciesMeta": {
     "react": {