refactor: flatten monorepo to single web package (#12)

Flatten the pnpm monorepo (apps/web + packages/*) into a single web package at the repo root.

- Move app/lib/components/scripts/public to root; drop apps/web and packages/* wrappers
- Rewrite tsconfig paths (@infiplot/*) to ./lib/*; turbopack.root = __dirname
- Update Vercel (no root-directory) and Cloudflare (pnpm build:cf at root) deploy paths
- Regenerate pnpm-lock.yaml to drop stale workspace importers
- Bump engines.node to >=22 to match wrangler

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

lib/annotateClient.ts

@@ -0,0 +1,80 @@
+const TARGET_WIDTH = 768;
+
+// Browser-side equivalent of the former engine/src/annotate.ts. Redraws the
+// scene image with the player's click marker on a Canvas 2D and returns the
+// raw PNG base64 (no `data:` prefix) — interpretClick wraps it back into a
+// data URL before posting to the vision LLM.
+//
+// crossOrigin="anonymous" + the CDN's Access-Control-Allow-Origin header are
+// both required to keep the canvas un-tainted; without them toDataURL throws
+// SecurityError. Runware's image CDN supports anonymous CORS; data: URIs
+// (MOCK_IMAGE mode) load without CORS.
+export async function annotateClick(
+  imageUrl: string,
+  click: { x: number; y: number },
+): Promise<string> {
+  const img = await loadImage(imageUrl);
+
+  const scale = Math.min(1, TARGET_WIDTH / img.naturalWidth);
+  const w = Math.max(1, Math.round(img.naturalWidth * scale));
+  const h = Math.max(1, Math.round(img.naturalHeight * scale));
+
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context unavailable");
+
+  ctx.drawImage(img, 0, 0, w, h);
+
+  const cx = Math.round(click.x * w);
+  const cy = Math.round(click.y * h);
+  const r = Math.max(8, Math.round(Math.min(w, h) * 0.025));
+  const stroke = Math.max(2, Math.round(r * 0.25));
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fillStyle = "rgba(255,40,40,0.55)";
+  ctx.fill();
+  ctx.lineWidth = stroke;
+  ctx.strokeStyle = "rgba(255,255,255,0.95)";
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, Math.max(2, Math.round(r * 0.25)), 0, Math.PI * 2);
+  ctx.fillStyle = "rgba(255,255,255,1)";
+  ctx.fill();
+
+  const dataUrl = canvas.toDataURL("image/png");
+  return dataUrl.replace(/^data:image\/png;base64,/, "");
+}
+
+// 10s timeout mirrors the old server-side annotator's 5s fetch budget +
+// headroom for browser decode. Without it a hung CDN response would strand
+// the player in `vision-thinking` forever.
+function loadImage(
+  url: string,
+  timeoutMs = 10_000,
+): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const timer = setTimeout(() => {
+      // removeAttribute, not `src = ""` — setting empty string can trigger
+      // a navigation to the current document URL in some browsers.
+      img.removeAttribute("src");
+      reject(new Error(`Image load timed out after ${timeoutMs}ms`));
+    }, timeoutMs);
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      clearTimeout(timer);
+      resolve(img);
+    };
+    img.onerror = () => {
+      clearTimeout(timer);
+      reject(
+        new Error(`Failed to load image for annotation: ${url.slice(0, 80)}`),
+      );
+    };
+    img.src = url;
+  });
+}