Merge upstream PR benjitaylor#114: Polish drawing UX

Cherry-pick of benjitaylor#114 by stevysmith (includes draw-wip branch).
Adds freehand drawing mode, screenshot capture, drawing context, webhook integration.
Polish: loosens circle detection, adds pencil cursor, fixes Escape key behavior.

# Conflicts:
#	package/src/components/page-toolbar-css/index.tsx
#	package/src/components/page-toolbar-css/styles.module.scss
#	package/src/types.ts

Author: alexgorbatchev

mcp/src/server/http.ts

@@ -10,7 +10,7 @@ import {
   CallToolRequestSchema,
   ListToolsRequestSchema,
 } from "@modelcontextprotocol/sdk/types.js";
-import { TOOLS, handleTool, error as toolError } from "./mcp.js";
+import { TOOLS, handleTool, error as toolError, saveScreenshotToDisk } from "./mcp.js";
 import {
   createSession,
   getSession,
@@ -367,6 +367,17 @@ const addAnnotationHandler: RouteHandler = async (req, res, params) => {
       return sendError(res, 400, "comment, element, and elementPath are required");
     }
 
+    // Save screenshot to disk and replace base64 with file path before storing.
+    // This way the SSE event and stored record both have the path, never the blob.
+    if (body.drawingContext?.screenshot) {
+      const fileId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+      const screenshotPath = saveScreenshotToDisk(fileId, body.drawingContext.screenshot);
+      if (screenshotPath) {
+        (body.drawingContext as any).screenshotPath = screenshotPath;
+      }
+      delete (body.drawingContext as any).screenshot;
+    }
+
     const annotation = addAnnotation(params.id, body);
 
     if (!annotation) {