Annotator (#1861)

<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Adds an in-app screenshot annotator to the Preview panel for Pro users
so you can capture the current app view, draw or add text, and submit an
annotated image to chat.

- **New Features**
- Pen button in PreviewIframe to toggle annotator; captures a screenshot
via worker messaging and displays it in a Konva canvas.
- Tools: select, freehand draw, and draggable text; supports undo/redo,
delete, and resizing with Transformer. Canvas scales to the container.
Includes a color picker.
- Submit exports a PNG and attaches it to the chat via useAttachments;
prefills the chat input; annotator auto-closes after submit.
  - Pro-only: non-Pro users see an upsell screen.
- State atoms added: annotatorModeAtom, screenshotDataUrlAtom,
attachmentsAtom; PreviewIframe now handles dyad-screenshot-response
messages.

- **Dependencies**
  - Added konva, react-konva, perfect-freehand, and html-to-image.
- Proxy now injects html-to-image and the new dyad-screenshot-client.js
for screenshot capture.

<sup>Written for commit 580aca271c5993a0dc7426e36e34393e073bd67b.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

worker/dyad-screenshot-client.js

@@ -0,0 +1,56 @@
+(() => {
+  async function captureScreenshot() {
+    try {
+      // Use html-to-image if available
+      if (typeof htmlToImage !== "undefined") {
+        return await htmlToImage.toPng(document.body, {
+          width: document.documentElement.scrollWidth,
+          height: document.documentElement.scrollHeight,
+        });
+      }
+      throw new Error("html-to-image library not found");
+    } catch (error) {
+      console.error("[dyad-screenshot] Failed to capture screenshot:", error);
+      throw error;
+    }
+  }
+  async function handleScreenshotRequest() {
+    try {
+      console.debug("[dyad-screenshot] Capturing screenshot...");
+
+      const dataUrl = await captureScreenshot();
+
+      console.debug("[dyad-screenshot] Screenshot captured successfully");
+
+      // Send success response to parent
+      window.parent.postMessage(
+        {
+          type: "dyad-screenshot-response",
+          success: true,
+          dataUrl: dataUrl,
+        },
+        "*",
+      );
+    } catch (error) {
+      console.error("[dyad-screenshot] Screenshot capture failed:", error);
+
+      // Send error response to parent
+      window.parent.postMessage(
+        {
+          type: "dyad-screenshot-response",
+          success: false,
+          error: error.message,
+        },
+        "*",
+      );
+    }
+  }
+
+  window.addEventListener("message", (event) => {
+    if (event.source !== window.parent) return;
+
+    if (event.data.type === "dyad-take-screenshot") {
+      handleScreenshotRequest();
+    }
+  });
+})();