@agent-native/core 0.80.6 → 0.80.8

package/corpus/templates/design/app/components/visual-editor/DrawOverlay.tsx

@@ -7,16 +7,14 @@ import {
   IconCursorText,
   IconX,
 } from "@tabler/icons-react";
-/**
- * NOTE: This is the new shared visual-editor DrawOverlay, mirrored from the
- * slides template so both apps share the same comment/draw/save UX.
- *
- * The legacy iframe-based design overlay still lives at
- * `app/components/design/DrawOverlay.tsx` and is currently wired into
- * `DesignCanvas`. Both exist for now; the legacy one can be migrated to use
- * this shared version in a follow-up. Don't import both in the same screen.
- */
-import { useState, useRef, useCallback, useEffect } from "react";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -41,6 +39,12 @@ export interface DrawAnnotation {
   lineWidth: number;
   /** Position relative to the canvas (text annotations only) */
   position: { x: number; y: number };
+  /**
+   * Creation timestamp (Date.now()) — used for unified undo ordering across
+   * strokes and text annotations. Optional so existing callers of DrawAnnotation
+   * don't need to supply it.
+   */
+  createdAt?: number;
 }
 
 interface DrawOverlayProps {
@@ -50,6 +54,13 @@ interface DrawOverlayProps {
   canvasInteractive?: boolean;
   /** Extra queued annotations owned by sibling tools, such as comment pins. */
   queuedAnnotationCount?: number;
+  /**
+   * Current zoom level (percentage, e.g. 100 = 100%). Used to convert
+   * getBoundingClientRect() visual-space coordinates to layout-space so that
+   * strokes and text labels stay anchored to their painted position across
+   * zoom changes.
+   */
+  zoom?: number;
   /** Called when the user submits the queued strokes/text to the agent */
   onSend: (
     annotations: DrawAnnotation[],
@@ -73,6 +84,12 @@ const LINE_WIDTHS = [
   { value: 8, label: "Thick" },
 ];
 
+/**
+ * A point stored as fractions (0..1) of the canvas visual rect.
+ * This makes coordinates zoom- and resize-stable: multiply by the current
+ * rect width/height to get visual pixels for canvas drawing, or multiply by
+ * rect/scale to get layout-space for CSS positioning and pathData output.
+ */
 interface Point {
   x: number;
   y: number;
@@ -80,9 +97,12 @@ interface Point {
 
 interface Stroke {
   id: string;
+  /** Points stored as fractions (0..1) of the canvas visual rect. */
   points: Point[];
   color: string;
   lineWidth: number;
+  /** Creation timestamp for unified undo ordering. */
+  createdAt: number;
 }
 
 /**
@@ -97,11 +117,22 @@ interface Stroke {
  * This component is canvas-agnostic — it overlays absolutely-positioned over
  * its parent, so the parent (a slide editor or design canvas) only needs to
  * be `position: relative`.
+ *
+ * Coordinate model
+ * ----------------
+ * All stroke points and text positions are stored as fractions (0..1) of the
+ * canvas's visual rect (getBoundingClientRect). This makes them stable across
+ * zoom and resize. When rendering:
+ *   - Canvas strokes: multiply by rect.width / rect.height (visual pixels).
+ *   - CSS text labels: multiply by rect.width/scale / rect.height/scale
+ *     (layout pixels inside the scaled wrapper).
+ *   - pathData in send(): layout pixels = fraction * rect.width / scale.
  */
 export function DrawOverlay({
   visible,
   canvasInteractive = true,
   queuedAnnotationCount = 0,
+  zoom = 100,
   onSend,
   onClose,
 }: DrawOverlayProps) {
@@ -112,34 +143,61 @@ export function DrawOverlay({
   const [lineWidth, setLineWidth] = useState(LINE_WIDTHS[1].value);
   const [strokes, setStrokes] = useState<Stroke[]>([]);
   const [textAnnotations, setTextAnnotations] = useState<DrawAnnotation[]>([]);
-  // Redo stack. Pushing here happens via undo(); a fresh stroke clears it
-  // (standard editor convention — once you draw something new, the redo
-  // history is no longer reachable).
-  const [redoStrokes, setRedoStrokes] = useState<Stroke[]>([]);
+  // Unified redo stack. Each entry is either a Stroke or a DrawAnnotation so
+  // undo/redo work in creation order across both types.
+  const [redoStack, setRedoStack] = useState<Array<Stroke | DrawAnnotation>>(
+    [],
+  );
   const [currentStroke, setCurrentStroke] = useState<Point[] | null>(null);
   const [textMode, setTextMode] = useState(false);
   const [textInput, setTextInput] = useState<{
-    x: number;
-    y: number;
+    /** Fractional x (0..1) of the visual rect. */
+    xFrac: number;
+    /** Fractional y (0..1) of the visual rect. */
+    yFrac: number;
     value: string;
   } | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(null);
   const [instruction, setInstruction] = useState("");
   const drawing = useRef(false);
   const canvasSizeRef = useRef({ w: 0, h: 0 });
+  // Resize tick: bumped by ResizeObserver so the redraw effect re-runs when
+  // the canvas element's CSS size changes (e.g. device frame switch).
+  const [resizeTick, setResizeTick] = useState(0);
+
+  const scale = zoom / 100;
 
   // Clear all state on hide so the next open starts fresh.
   useEffect(() => {
     if (!visible) {
       setStrokes([]);
       setTextAnnotations([]);
-      setRedoStrokes([]);
+      setRedoStack([]);
       setCurrentStroke(null);
       setTextInput(null);
       setInstruction("");
     }
   }, [visible]);
 
-  // Redraw canvas whenever strokes change.
+  useEffect(() => {
+    if (!textInput) return;
+    const id = window.requestAnimationFrame(() => {
+      textInputRef.current?.focus();
+    });
+    return () => window.cancelAnimationFrame(id);
+  }, [textInput?.xFrac, textInput?.yFrac]);
+
+  // ResizeObserver: bump resizeTick whenever the canvas changes CSS size so
+  // the redraw effect re-runs and the backing store is resized correctly.
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ro = new ResizeObserver(() => setResizeTick((t) => t + 1));
+    ro.observe(canvas);
+    return () => ro.disconnect();
+  }, []);
+
+  // Redraw canvas whenever strokes change or the canvas is resized.
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -159,31 +217,54 @@ export function DrawOverlay({
 
     ctx.clearRect(0, 0, rect.width, rect.height);
 
+    // Points are stored as fractions; multiply by current rect to get visual px.
     for (const stroke of strokes) {
-      drawStroke(ctx, stroke.points, stroke.color, stroke.lineWidth);
+      drawStroke(
+        ctx,
+        stroke.points.map((p) => ({
+          x: p.x * rect.width,
+          y: p.y * rect.height,
+        })),
+        stroke.color,
+        stroke.lineWidth,
+      );
     }
 
     if (currentStroke && currentStroke.length > 0) {
-      drawStroke(ctx, currentStroke, color, lineWidth);
+      drawStroke(
+        ctx,
+        currentStroke.map((p) => ({
+          x: p.x * rect.width,
+          y: p.y * rect.height,
+        })),
+        color,
+        lineWidth,
+      );
     }
-  }, [strokes, currentStroke, color, lineWidth]);
+    // `zoom` is a dependency because it scales the canvas via a CSS transform,
+    // which changes getBoundingClientRect() without firing ResizeObserver — the
+    // effect must re-run on zoom change to redraw the fraction-based strokes at
+    // the new visual size.
+  }, [strokes, currentStroke, color, lineWidth, resizeTick, zoom]);
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
       if (textMode) {
-        const rect = canvasRef.current?.getBoundingClientRect();
-        if (!rect) return;
         setTextInput({
-          x: e.clientX - rect.left,
-          y: e.clientY - rect.top,
+          xFrac: (e.clientX - rect.left) / rect.width,
+          yFrac: (e.clientY - rect.top) / rect.height,
           value: "",
         });
         return;
       }
       drawing.current = true;
-      const rect = canvasRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      // Store as fractions so the point survives zoom/resize changes.
+      const point = {
+        x: (e.clientX - rect.left) / rect.width,
+        y: (e.clientY - rect.top) / rect.height,
+      };
       setCurrentStroke([point]);
       (e.target as HTMLElement).setPointerCapture(e.pointerId);
     },
@@ -195,7 +276,10 @@ export function DrawOverlay({
       if (!drawing.current || textMode) return;
       const rect = canvasRef.current?.getBoundingClientRect();
       if (!rect) return;
-      const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      const point = {
+        x: (e.clientX - rect.left) / rect.width,
+        y: (e.clientY - rect.top) / rect.height,
+      };
       setCurrentStroke((prev) => (prev ? [...prev, point] : [point]));
     },
     [textMode],
@@ -212,9 +296,11 @@ export function DrawOverlay({
           points: currentStroke,
           color,
           lineWidth,
+          createdAt: Date.now(),
         },
       ]);
-      setRedoStrokes([]);
+      // A new stroke clears the redo stack (standard editor convention).
+      setRedoStack([]);
     }
     setCurrentStroke(null);
   }, [currentStroke, color, lineWidth]);
@@ -224,41 +310,65 @@ export function DrawOverlay({
     setCurrentStroke(null);
   }, []);
 
+  /**
+   * Undo removes the most recently created annotation (stroke or text) in
+   * creation order and pushes it onto the unified redo stack.
+   */
   const undo = () => {
-    setStrokes((prev) => {
-      if (prev.length === 0) return prev;
-      const last = prev[prev.length - 1];
-      setRedoStrokes((stack) => [...stack, last]);
-      return prev.slice(0, -1);
-    });
+    const lastStroke = strokes.length > 0 ? strokes[strokes.length - 1] : null;
+    const lastText =
+      textAnnotations.length > 0
+        ? textAnnotations[textAnnotations.length - 1]
+        : null;
+
+    if (!lastStroke && !lastText) return;
+
+    // Remove whichever was created most recently.
+    const strokeTime = lastStroke?.createdAt ?? -Infinity;
+    const textTime = lastText?.createdAt ?? 0;
+
+    if (lastStroke && strokeTime >= textTime) {
+      setStrokes((prev) => prev.slice(0, -1));
+      setRedoStack((stack) => [...stack, lastStroke]);
+    } else if (lastText) {
+      setTextAnnotations((prev) => prev.slice(0, -1));
+      setRedoStack((stack) => [...stack, lastText]);
+    }
   };
 
   const redo = () => {
-    setRedoStrokes((stack) => {
+    setRedoStack((stack) => {
       if (stack.length === 0) return stack;
       const top = stack[stack.length - 1];
-      setStrokes((prev) => [...prev, top]);
-      return stack.slice(0, -1);
+      const remaining = stack.slice(0, -1);
+      if ("points" in top) {
+        // It's a Stroke
+        setStrokes((prev) => [...prev, top as Stroke]);
+      } else {
+        // It's a DrawAnnotation (text)
+        setTextAnnotations((prev) => [...prev, top as DrawAnnotation]);
+      }
+      return remaining;
     });
   };
 
   const clear = () => {
     if (strokes.length === 0 && textAnnotations.length === 0) return;
-    // Snapshot for the toast's Undo. Using a toast (instead of an AlertDialog
-    // confirm) keeps Clear a single click for users who know what they want,
-    // while still letting an accidental click be recovered for the toast's
-    // lifetime.
     const prevStrokes = strokes;
     const prevTexts = textAnnotations;
+    const prevRedo = redoStack;
     setStrokes([]);
     setTextAnnotations([]);
-    setRedoStrokes([]);
+    setRedoStack([]);
     toast(t("visualEditor.clearedAllAnnotations"), {
       action: {
         label: t("visualEditor.undo"),
         onClick: () => {
-          setStrokes(prevStrokes);
-          setTextAnnotations(prevTexts);
+          // Merge snapshot with any strokes/texts drawn during the toast window
+          // so new work is not discarded; also restore the pre-clear redo stack.
+          setStrokes((cur) => [...prevStrokes, ...cur]);
+          setTextAnnotations((cur) => [...prevTexts, ...cur]);
+          setRedoStack(prevRedo);
         },
       },
       duration: 6000,
@@ -270,17 +380,19 @@ export function DrawOverlay({
       setTextInput(null);
       return;
     }
-    setTextAnnotations((prev) => [
-      ...prev,
-      {
-        id: crypto.randomUUID(),
-        type: "text",
-        text: textInput.value.trim(),
-        position: { x: textInput.x, y: textInput.y },
-        color,
-        lineWidth,
-      },
-    ]);
+    const ann: DrawAnnotation = {
+      id: crypto.randomUUID(),
+      type: "text",
+      text: textInput.value.trim(),
+      // Store fractional position so the label stays anchored across zoom changes.
+      position: { x: textInput.xFrac, y: textInput.yFrac },
+      color,
+      lineWidth,
+      createdAt: Date.now(),
+    };
+    setTextAnnotations((prev) => [...prev, ann]);
+    // A new text annotation also clears the redo stack.
+    setRedoStack([]);
     setTextInput(null);
   };
 
@@ -288,13 +400,18 @@ export function DrawOverlay({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const rect = canvas.getBoundingClientRect();
+    // Layout-space dimensions = visual rect / scale factor.
+    const layoutW = rect.width / scale;
+    const layoutH = rect.height / scale;
 
     const pathAnnotations: DrawAnnotation[] = strokes.map((s) => ({
       id: s.id,
       type: "path",
+      // Convert fractional points to layout-space absolute pixels for the agent.
       pathData: s.points
         .map(
-          (p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`,
+          (p, i) =>
+            `${i === 0 ? "M" : "L"}${(p.x * layoutW).toFixed(1)},${(p.y * layoutH).toFixed(1)}`,
         )
         .join(" "),
       color: s.color,
@@ -302,12 +419,23 @@ export function DrawOverlay({
       position: { x: 0, y: 0 },
     }));
 
-    const all = [...pathAnnotations, ...textAnnotations];
+    // Convert fractional text positions to layout-space absolute pixels.
+    const layoutTextAnnotations: DrawAnnotation[] = textAnnotations.map(
+      (a) => ({
+        ...a,
+        position: {
+          x: a.position.x * layoutW,
+          y: a.position.y * layoutH,
+        },
+      }),
+    );
+
+    const all = [...pathAnnotations, ...layoutTextAnnotations];
     if (all.length === 0 && !instruction.trim()) return;
 
     onSend(all, instruction.trim(), {
-      width: rect.width,
-      height: rect.height,
+      width: layoutW,
+      height: layoutH,
     });
   };
 
@@ -319,12 +447,194 @@ export function DrawOverlay({
     instruction.trim() ||
     queuedAnnotationCount > 0;
 
+  const canUndo = strokes.length > 0 || textAnnotations.length > 0;
+  const canRedo = redoStack.length > 0;
+
+  const toolbar = (
+    <div
+      data-draw-toolbar
+      className="pointer-events-auto fixed bottom-4 left-1/2 z-[110] flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
+    >
+      {/* Color picker */}
+      <div className="flex gap-1">
+        {PRESET_COLORS.map((preset) => (
+          <Tooltip key={preset.color}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={preset.label}
+                data-testid={`draw-color-${preset.label.toLowerCase()}`}
+                onClick={() => setColor(preset.color)}
+                className={cn(
+                  "h-5 w-5 cursor-pointer rounded-full",
+                  color === preset.color
+                    ? "ring-2 ring-foreground ring-offset-1 ring-offset-popover"
+                    : "ring-1 ring-border",
+                )}
+                style={{ backgroundColor: preset.color }}
+              />
+            </TooltipTrigger>
+            <TooltipContent>{preset.label}</TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+
+      <div className="mx-1 h-4 w-px bg-border" />
+
+      {/* Line widths */}
+      <div className="flex gap-1">
+        {LINE_WIDTHS.map((lw) => (
+          <Tooltip key={lw.value}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={lw.label}
+                data-testid={`draw-line-width-${lw.label.toLowerCase()}`}
+                onClick={() => setLineWidth(lw.value)}
+                className={cn(
+                  "flex h-6 w-6 cursor-pointer items-center justify-center rounded",
+                  lineWidth === lw.value
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <div
+                  className="rounded-full bg-current"
+                  style={{ width: lw.value + 2, height: lw.value + 2 }}
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{lw.label}</TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+
+      <div className="mx-1 h-4 w-px bg-border" />
+
+      {/* Text mode */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("visualEditor.typeAnywhereOnCanvas")}
+            data-testid="draw-text-mode"
+            onClick={() => setTextMode(!textMode)}
+            className={cn(
+              "flex h-6 w-6 cursor-pointer items-center justify-center rounded",
+              textMode
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            <IconCursorText className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {t("visualEditor.typeAnywhereOnCanvas")}
+        </TooltipContent>
+      </Tooltip>
+
+      {/* Undo last annotation (stroke or text) */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("visualEditor.undoStroke")}
+            data-testid="draw-undo"
+            onClick={undo}
+            disabled={!canUndo}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-30"
+          >
+            <IconArrowBackUp className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("visualEditor.undoStroke")}</TooltipContent>
+      </Tooltip>
+
+      {/* Redo */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("visualEditor.redoStroke")}
+            data-testid="draw-redo"
+            onClick={redo}
+            disabled={!canRedo}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-30"
+          >
+            <IconArrowForwardUp className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("visualEditor.redoStroke")}</TooltipContent>
+      </Tooltip>
+
+      {/* Clear all */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("visualEditor.clearAll")}
+            data-testid="draw-clear-all"
+            onClick={clear}
+            disabled={strokes.length === 0 && textAnnotations.length === 0}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-30"
+          >
+            <IconEraser className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("visualEditor.clearAll")}</TooltipContent>
+      </Tooltip>
+
+      <div className="mx-1 h-4 w-px bg-border" />
+
+      {/* Instruction input */}
+      <Input
+        value={instruction}
+        onChange={(e) => setInstruction(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && hasContent) send();
+          if (e.key === "Escape") onClose();
+        }}
+        placeholder={t("visualEditor.tellAgentWhatToDo")}
+        className="h-7 w-56 border-border bg-background text-xs"
+      />
+
+      {/* Send */}
+      <Button
+        size="sm"
+        data-testid="draw-send"
+        className="h-7 gap-1 px-3 text-[11px] cursor-pointer"
+        onClick={send}
+        disabled={!hasContent}
+      >
+        <IconSend className="h-3 w-3" />
+        {t("visualEditor.send")}
+      </Button>
+
+      {/* Close */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("visualEditor.exitDrawMode")}
+            data-testid="draw-exit"
+            onClick={onClose}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
+          >
+            <IconX className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("visualEditor.exitDrawMode")}</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+
   return (
     <div
       ref={containerRef}
       data-draw-overlay
       className={cn(
-        "absolute inset-0 z-30",
+        "absolute inset-0 z-[100]",
         canvasInteractive ? "pointer-events-auto" : "pointer-events-none",
       )}
     >
@@ -343,209 +653,88 @@ export function DrawOverlay({
         onPointerCancel={handlePointerCancel}
       />
 
-      {/* Rendered text annotations */}
-      {textAnnotations.map((ann) => (
-        <div
-          key={ann.id}
-          className="absolute pointer-events-none select-none whitespace-nowrap font-semibold"
-          style={{
-            left: ann.position.x,
-            top: ann.position.y,
-            color: ann.color,
-            fontSize: 14 + ann.lineWidth,
-          }}
-        >
-          {ann.text}
-        </div>
-      ))}
-
-      {/* Pending text input */}
-      {textInput && (
-        <div
-          className="pointer-events-auto absolute z-40"
-          style={{ left: textInput.x, top: textInput.y }}
-        >
-          <Input
-            value={textInput.value}
-            onChange={(e) =>
-              setTextInput((prev) =>
-                prev ? { ...prev, value: e.target.value } : null,
-              )
-            }
-            onBlur={commitTextAnnotation}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                commitTextAnnotation();
-              }
-              if (e.key === "Escape") setTextInput(null);
+      {/* Rendered text annotations.
+          Positions are stored as fractions (0..1) of the visual rect. Convert
+          to layout-space pixels (fraction * visualDim / scale) so the label
+          sits at the right layout position inside the scaled wrapper, where
+          CSS left/top are interpreted in pre-scale coordinates. */}
+      {textAnnotations.map((ann) => {
+        const canvas = canvasRef.current;
+        const rect = canvas?.getBoundingClientRect();
+        const layoutX = rect
+          ? (ann.position.x * rect.width) / scale
+          : ann.position.x;
+        const layoutY = rect
+          ? (ann.position.y * rect.height) / scale
+          : ann.position.y;
+        return (
+          <div
+            key={ann.id}
+            className="absolute pointer-events-none select-none whitespace-nowrap font-semibold"
+            style={{
+              left: layoutX,
+              top: layoutY,
+              color: ann.color,
+              fontSize: 14 + ann.lineWidth,
             }}
-            className="h-7 w-48 border-primary bg-background text-sm"
-            autoFocus
-            placeholder={t("visualEditor.typeAnnotationFancy")}
-          />
-        </div>
-      )}
-
-      {/* Bottom toolbar */}
-      <div
-        data-draw-toolbar
-        className="pointer-events-auto absolute bottom-4 left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-popover px-3 py-2 shadow-2xl"
-      >
-        {/* Color picker */}
-        <div className="flex gap-1">
-          {PRESET_COLORS.map((preset) => (
-            <Tooltip key={preset.color}>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => setColor(preset.color)}
-                  className={cn(
-                    "h-5 w-5 cursor-pointer rounded-full",
-                    color === preset.color
-                      ? "ring-2 ring-foreground ring-offset-1 ring-offset-popover"
-                      : "ring-1 ring-border",
-                  )}
-                  style={{ backgroundColor: preset.color }}
-                />
-              </TooltipTrigger>
-              <TooltipContent>{preset.label}</TooltipContent>
-            </Tooltip>
-          ))}
-        </div>
-
-        <div className="mx-1 h-4 w-px bg-border" />
-
-        {/* Line widths */}
-        <div className="flex gap-1">
-          {LINE_WIDTHS.map((lw) => (
-            <Tooltip key={lw.value}>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => setLineWidth(lw.value)}
-                  className={cn(
-                    "flex h-6 w-6 cursor-pointer items-center justify-center rounded",
-                    lineWidth === lw.value
-                      ? "bg-accent text-foreground"
-                      : "text-muted-foreground hover:text-foreground",
-                  )}
-                >
-                  <div
-                    className="rounded-full bg-current"
-                    style={{ width: lw.value + 2, height: lw.value + 2 }}
-                  />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>{lw.label}</TooltipContent>
-            </Tooltip>
-          ))}
-        </div>
-
-        <div className="mx-1 h-4 w-px bg-border" />
-
-        {/* Text mode */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={() => setTextMode(!textMode)}
-              className={cn(
-                "flex h-6 w-6 cursor-pointer items-center justify-center rounded",
-                textMode
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
+          >
+            {ann.text}
+          </div>
+        );
+      })}
+
+      {/* Pending text input — positioned at the click point in layout space. */}
+      {textInput &&
+        (() => {
+          const canvas = canvasRef.current;
+          const rect = canvas?.getBoundingClientRect();
+          const layoutX = rect
+            ? (textInput.xFrac * rect.width) / scale
+            : textInput.xFrac;
+          const layoutY = rect
+            ? (textInput.yFrac * rect.height) / scale
+            : textInput.yFrac;
+          return (
+            <div
+              className="pointer-events-auto absolute z-40"
+              style={{ left: layoutX, top: layoutY }}
             >
-              <IconCursorText className="h-3.5 w-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>
-            {t("visualEditor.typeAnywhereOnCanvas")}
-          </TooltipContent>
-        </Tooltip>
-
-        {/* Undo last stroke */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={undo}
-              disabled={strokes.length === 0}
-              className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-30"
-            >
-              <IconArrowBackUp className="h-3.5 w-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("visualEditor.undoStroke")}</TooltipContent>
-        </Tooltip>
-
-        {/* Redo */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={redo}
-              disabled={redoStrokes.length === 0}
-              className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-30"
-            >
-              <IconArrowForwardUp className="h-3.5 w-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("visualEditor.redoStroke")}</TooltipContent>
-        </Tooltip>
-
-        {/* Clear all */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={clear}
-              disabled={strokes.length === 0 && textAnnotations.length === 0}
-              className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground disabled:cursor-default disabled:opacity-30"
-            >
-              <IconEraser className="h-3.5 w-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("visualEditor.clearAll")}</TooltipContent>
-        </Tooltip>
-
-        <div className="mx-1 h-4 w-px bg-border" />
-
-        {/* Instruction input */}
-        <Input
-          value={instruction}
-          onChange={(e) => setInstruction(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && hasContent) send();
-            if (e.key === "Escape") onClose();
-          }}
-          placeholder={t("visualEditor.tellAgentWhatToDo")}
-          className="h-7 w-56 border-border bg-background text-xs"
-        />
-
-        {/* Send */}
-        <Button
-          size="sm"
-          className="h-7 gap-1 px-3 text-[11px] cursor-pointer"
-          onClick={send}
-          disabled={!hasContent}
-        >
-          <IconSend className="h-3 w-3" />
-          {t("visualEditor.send")}
-        </Button>
-
-        {/* Close */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              onClick={onClose}
-              className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
-            >
-              <IconX className="h-3.5 w-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("visualEditor.exitDrawMode")}</TooltipContent>
-        </Tooltip>
-      </div>
+              <Input
+                ref={textInputRef}
+                value={textInput.value}
+                onChange={(e) =>
+                  setTextInput((prev) =>
+                    prev ? { ...prev, value: e.target.value } : null,
+                  )
+                }
+                onBlur={() => {
+                  if (textInput.value.trim()) commitTextAnnotation();
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitTextAnnotation();
+                  }
+                  if (e.key === "Escape") setTextInput(null);
+                }}
+                className="h-7 w-48 border-primary bg-background text-sm"
+                autoFocus
+                placeholder={t("visualEditor.typeAnnotationFancy")}
+              />
+            </div>
+          );
+        })()}
+
+      <DrawToolbarPortal>{toolbar}</DrawToolbarPortal>
     </div>
   );
 }
 
+function DrawToolbarPortal({ children }: { children: ReactNode }) {
+  if (typeof document === "undefined") return <>{children}</>;
+  return createPortal(children, document.body);
+}
+
 function drawStroke(
   ctx: CanvasRenderingContext2D,
   points: Point[],