diff --git a/.gitignore b/.gitignore index 49792697..a6b68848 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules/.claude/settings.local.json node_modules mcp/dist -.DS_Store \ No newline at end of file +.DS_Store +.pnpm-store \ No newline at end of file diff --git a/package/.gitignore b/package/.gitignore index 4fb12973..2d560a98 100644 --- a/package/.gitignore +++ b/package/.gitignore @@ -32,3 +32,4 @@ tsup.config.bundled_*.mjs # npm pack output *.tgz BRANCH_NOTES.md +.pnpm-store \ No newline at end of file diff --git a/package/README.md b/package/README.md index 9a607fb8..17f74c8c 100644 --- a/package/README.md +++ b/package/README.md @@ -11,6 +11,20 @@ npm install agentation -D ``` +## Script Tag / Browser + +Load the self-contained browser bundle directly from jsDelivr: + +```html + + +``` + +This bundle includes its own React runtime, so there is no separate `react` or +`react-dom` dependency for script-tag usage. + ## Usage ```tsx @@ -28,6 +42,20 @@ function App() { The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it. +### Browser Module + +If you want an imperative browser API without using a script tag: + +```ts +import { mountAgentation } from "agentation/browser"; + +const agentation = mountAgentation(); + +agentation.update({ copyToClipboard: false }); +// ... +agentation.destroy(); +``` + ## Features - **Click to annotate** – Click any element with automatic selector identification @@ -38,7 +66,7 @@ The toolbar appears in the bottom-right corner. Click to activate, then click an - **Structured output** – Copy markdown with selectors, positions, and context - **Programmatic access** – Callback prop for direct integration with tools - **Dark/light mode** – Toggle in settings, persists to localStorage -- **Zero dependencies** – Pure CSS animations, no runtime libraries +- **Self-contained browser bundle** – Script-tag usage includes the runtime it needs ## Props @@ -121,7 +149,8 @@ Agentation captures class names, selectors, and element positions so AI agents c ## Requirements -- React 18+ +- React 18+ for the React component entrypoint +- No React install required for the self-contained browser bundle - Desktop browser (mobile not supported) ## Docs diff --git a/package/example/src/app/faq/page.tsx b/package/example/src/app/faq/page.tsx index 19637bfd..6c76544a 100644 --- a/package/example/src/app/faq/page.tsx +++ b/package/example/src/app/faq/page.tsx @@ -27,7 +27,7 @@ const faqCategories: FAQCategory[] = [ }, { question: "How do I install it?", - answer: "Install via npm with npm install agentation -D, then import and add the <Agentation /> component to your app. Works with React 18 and Next.js." + answer: "For React apps, install via npm with npm install agentation -D, then import and add the <Agentation /> component to your app. If you just want a browser toolbar on a plain HTML page, load https://cdn.jsdelivr.net/npm/agentation@2.2.1/dist/agentation.browser.min.js and call window.Agentation.mount()." }, { question: "Is there a Claude Code integration?", @@ -94,7 +94,7 @@ const faqCategories: FAQCategory[] = [ items: [ { question: "Is there a React dependency?", - answer: "Yes, Agentation requires React 18+ as a peer dependency. It's built as a React component to integrate seamlessly with modern React applications." + answer: "The default React component entrypoint requires React 18+ as a peer dependency. The script-tag browser bundle is self-contained, so if you load dist/agentation.browser.min.js from jsDelivr you do not need to install react or react-dom separately." }, { question: "Does it work with TypeScript?", diff --git a/package/example/src/app/install/page.tsx b/package/example/src/app/install/page.tsx index 2dd3af7b..bd85f223 100644 --- a/package/example/src/app/install/page.tsx +++ b/package/example/src/app/install/page.tsx @@ -196,6 +196,9 @@ function CopyablePackageManager({ name, command }: { name: string; command: stri } export default function InstallPage() { + const browserBundleUrl = + "https://cdn.jsdelivr.net/npm/agentation@2.2.1/dist/agentation.browser.min.js"; + return ( <>
@@ -255,6 +258,45 @@ function App() { /> +
+

Use without React

+

+ If you just want the toolbar on a plain HTML page, CMS, or non-React app, + load the self-contained browser bundle from jsDelivr and call{" "} + window.Agentation.mount(). +

+ +`} + language="html" + /> +

+ The script bundle includes its own React runtime. No separate{" "} + react or react-dom install is required. +

+

+ If you want the same browser-style lifecycle from code, import the + browser entrypoint: +

+ +
+

Claude Code

@@ -375,7 +417,10 @@ function App() {

Requirements

diff --git a/package/package.json b/package/package.json index a8ea90f1..392d083f 100644 --- a/package/package.json +++ b/package/package.json @@ -17,6 +17,17 @@ "types": "./dist/index.d.ts", "default": "./dist/index.js" } + }, + "./browser": { + "types": "./dist/browser.d.ts", + "import": { + "types": "./dist/browser.d.mts", + "default": "./dist/browser.mjs" + }, + "require": { + "types": "./dist/browser.d.ts", + "default": "./dist/browser.js" + } } }, "files": [ diff --git a/package/src/browser.test.tsx b/package/src/browser.test.tsx new file mode 100644 index 00000000..8424c41f --- /dev/null +++ b/package/src/browser.test.tsx @@ -0,0 +1,101 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +type RootLike = { + render: ReturnType; + unmount: ReturnType; +}; + +const rootMocks: RootLike[] = []; + +const createRootMock = vi.fn((container: Element) => { + const root = { + container, + render: vi.fn(), + unmount: vi.fn(), + }; + rootMocks.push(root); + return root; +}); + +vi.mock("react-dom/client", () => ({ + createRoot: createRootMock, +})); + +vi.mock("./components/page-toolbar-css", () => ({ + PageFeedbackToolbarCSS: (props: Record) => ( +
{JSON.stringify(props)}
+ ), +})); + +beforeEach(() => { + createRootMock.mockClear(); + rootMocks.length = 0; + document.getElementById("agentation-browser-root")?.remove(); + delete window.Agentation; + vi.resetModules(); +}); + +describe("browser entrypoint", () => { + it("registers the global API with the current version", async () => { + await import("./browser"); + + expect(window.Agentation).toBeDefined(); + expect(window.Agentation?.mount).toBeTypeOf("function"); + expect(window.Agentation?.version).toBe("test"); + }); + + it("mounts a single root, reuses it across updates, and tears it down cleanly", async () => { + const { mountAgentation } = await import("./browser"); + + const handle = mountAgentation({ copyToClipboard: false }); + + expect(createRootMock).toHaveBeenCalledTimes(1); + expect(document.querySelectorAll("#agentation-browser-root")).toHaveLength(1); + expect(rootMocks[0]?.render).toHaveBeenCalledTimes(1); + + const secondHandle = mountAgentation({ copyToClipboard: true }); + expect(secondHandle).toBe(handle); + expect(createRootMock).toHaveBeenCalledTimes(1); + expect(rootMocks[0]?.render).toHaveBeenCalledTimes(2); + + handle.update({ webhookUrl: "https://example.test/hook" }); + expect(rootMocks[0]?.render).toHaveBeenCalledTimes(3); + + handle.destroy(); + expect(rootMocks[0]?.unmount).toHaveBeenCalledTimes(1); + expect(document.getElementById("agentation-browser-root")).toBeNull(); + + const remountedHandle = mountAgentation(); + expect(remountedHandle).not.toBe(handle); + expect(createRootMock).toHaveBeenCalledTimes(2); + }); + + it("throws a clear error outside the browser", async () => { + const { mountAgentation } = await import("./browser"); + + const documentDescriptor = Object.getOwnPropertyDescriptor(globalThis, "document"); + const windowDescriptor = Object.getOwnPropertyDescriptor(globalThis, "window"); + + Object.defineProperty(globalThis, "document", { + configurable: true, + value: undefined, + }); + Object.defineProperty(globalThis, "window", { + configurable: true, + value: undefined, + }); + + try { + expect(() => mountAgentation()).toThrow( + "Agentation browser entrypoint requires a DOM environment.", + ); + } finally { + if (documentDescriptor) { + Object.defineProperty(globalThis, "document", documentDescriptor); + } + if (windowDescriptor) { + Object.defineProperty(globalThis, "window", windowDescriptor); + } + } + }); +}); diff --git a/package/src/browser.tsx b/package/src/browser.tsx new file mode 100644 index 00000000..e16dc092 --- /dev/null +++ b/package/src/browser.tsx @@ -0,0 +1,121 @@ +import "./process-shim"; +import { createRoot, type Root } from "react-dom/client"; + +import { PageFeedbackToolbarCSS, type AgentationProps } from "./components/page-toolbar-css"; + +const CONTAINER_ID = "agentation-browser-root"; +const BROWSER_ERROR = + "Agentation browser entrypoint requires a DOM environment. Load it in a browser and call mount() after document is available."; + +export type AgentationBrowserHandle = { + update(nextProps?: AgentationProps): void; + destroy(): void; +}; + +type AgentationBrowserGlobal = { + mount(props?: AgentationProps): AgentationBrowserHandle; + version: string; +}; + +declare global { + interface Window { + Agentation?: AgentationBrowserGlobal; + } +} + +let root: Root | null = null; +let container: HTMLDivElement | null = null; +let currentProps: AgentationProps = {}; +let currentHandle: AgentationBrowserHandle | null = null; + +function assertBrowser() { + if (typeof window === "undefined" || typeof document === "undefined") { + throw new Error(BROWSER_ERROR); + } +} + +function ensureContainer(): HTMLDivElement { + assertBrowser(); + + if (container && document.body.contains(container)) { + return container; + } + + const existing = document.getElementById(CONTAINER_ID); + if (existing instanceof HTMLDivElement) { + container = existing; + } else { + container = document.createElement("div"); + container.id = CONTAINER_ID; + document.body.appendChild(container); + } + + container.style.display = "contents"; + container.setAttribute("aria-hidden", "true"); + + return container; +} + +function renderToolbar() { + if (!root) { + root = createRoot(ensureContainer()); + } + + root.render(); +} + +function cleanup() { + if (root) { + root.unmount(); + root = null; + } + + if (container) { + container.remove(); + container = null; + } + + currentProps = {}; + currentHandle = null; +} + +export function mountAgentation(props: AgentationProps = {}): AgentationBrowserHandle { + assertBrowser(); + + currentProps = props; + renderToolbar(); + + if (currentHandle) { + return currentHandle; + } + + const handle: AgentationBrowserHandle = { + update(nextProps: AgentationProps = {}) { + if (currentHandle !== handle) { + return; + } + currentProps = nextProps; + renderToolbar(); + }, + destroy() { + if (currentHandle !== handle) { + return; + } + cleanup(); + }, + }; + + currentHandle = handle; + + return handle; +} + +export const mount = mountAgentation; +export const version = __VERSION__; + +if (typeof window !== "undefined") { + window.Agentation = { + mount: mountAgentation, + version, + }; +} diff --git a/package/src/components/icons.tsx b/package/src/components/icons.tsx index 43f7b961..8666661e 100644 --- a/package/src/components/icons.tsx +++ b/package/src/components/icons.tsx @@ -792,6 +792,25 @@ export const IconChevronRight = ({ size = 16 }: { size?: number }) => ( ); +// Pencil icon for draw mode +export const IconPencil = ({ size = 24 }: { size?: number }) => ( + + + + +); + // Animated Bunny mascot export const AnimatedBunny = ({ size = 20, diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index a2b26b15..740f45d9 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -38,6 +38,7 @@ import { IconEdit, IconChevronLeft, IconChevronRight, + IconPencil, } from "../icons"; import { identifyElement, @@ -237,6 +238,86 @@ function isElementFixed(element: HTMLElement): boolean { return false; } +function findStrokeAtPoint( + x: number, + y: number, + strokes: Array<{ points: Array<{ x: number; y: number }>; fixed: boolean }>, + threshold = 12, +): number | null { + const scrollY = window.scrollY; + // Reverse order — last drawn is on top + for (let i = strokes.length - 1; i >= 0; i--) { + const stroke = strokes[i]; + if (stroke.points.length < 2) continue; + for (let j = 0; j < stroke.points.length - 1; j++) { + const a = stroke.points[j]; + const b = stroke.points[j + 1]; + // Convert to viewport coords + const ay = stroke.fixed ? a.y : a.y - scrollY; + const by = stroke.fixed ? b.y : b.y - scrollY; + const ax = a.x; + const bx = b.x; + // Point-to-segment distance + const dx = bx - ax; + const dy = by - ay; + const lenSq = dx * dx + dy * dy; + let t = lenSq === 0 ? 0 : ((x - ax) * dx + (y - ay) * dy) / lenSq; + t = Math.max(0, Math.min(1, t)); + const projX = ax + t * dx; + const projY = ay + t * dy; + const dist = Math.hypot(x - projX, y - projY); + if (dist < threshold) return i; + } + } + return null; +} + +function classifyStrokeGesture( + points: Array<{ x: number; y: number }>, + fixed: boolean, +): string { + if (points.length < 2) return "Mark"; + const scrollY = window.scrollY; + const viewportPoints = fixed + ? points + : points.map((p) => ({ x: p.x, y: p.y - scrollY })); + + let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; + for (const p of viewportPoints) { + minX = Math.min(minX, p.x); + minY = Math.min(minY, p.y); + maxX = Math.max(maxX, p.x); + maxY = Math.max(maxY, p.y); + } + const bboxW = maxX - minX; + const bboxH = maxY - minY; + const bboxDiag = Math.hypot(bboxW, bboxH); + + const start = viewportPoints[0]; + const end = viewportPoints[viewportPoints.length - 1]; + const startEndDist = Math.hypot(end.x - start.x, end.y - start.y); + const closedLoop = startEndDist < bboxDiag * 0.35; + const aspectRatio = bboxW / Math.max(bboxH, 1); + + if (closedLoop && bboxDiag > 20) { + const edgeThreshold = Math.max(bboxW, bboxH) * 0.15; + let edgePoints = 0; + for (const p of viewportPoints) { + const nearLeft = p.x - minX < edgeThreshold; + const nearRight = maxX - p.x < edgeThreshold; + const nearTop = p.y - minY < edgeThreshold; + const nearBottom = maxY - p.y < edgeThreshold; + if ((nearLeft || nearRight) && (nearTop || nearBottom)) edgePoints++; + } + return edgePoints > viewportPoints.length * 0.15 ? "Box" : "Circle"; + } else if (aspectRatio > 3 && bboxH < 40) { + return "Underline"; + } else if (startEndDist > bboxDiag * 0.5) { + return "Arrow"; + } + return "Drawing"; +} + function hexToRgba(hex: string, alpha: number): string { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); @@ -460,6 +541,8 @@ export function PageFeedbackToolbarCSS({ }: PageFeedbackToolbarCSSProps = {}) { const [isActive, setIsActive] = useState(false); const [annotations, setAnnotations] = useState([]); + const annotationsRef = useRef([]); + annotationsRef.current = annotations; const [showMarkers, setShowMarkers] = useState(true); // Unified marker visibility state - controls both toolbar and eye toggle @@ -495,6 +578,8 @@ export function PageFeedbackToolbarCSS({ multiSelectElements?: HTMLElement[]; // Element reference for single-select (for live position queries) targetElement?: HTMLElement; + drawingIndex?: number; + strokeId?: string; } | null>(null); const [copied, setCopied] = useState(false); const [sendState, setSendState] = useState< @@ -503,6 +588,7 @@ export function PageFeedbackToolbarCSS({ const [cleared, setCleared] = useState(false); const [isClearing, setIsClearing] = useState(false); const [hoveredMarkerId, setHoveredMarkerId] = useState(null); + const [tooltipExitingId, setTooltipExitingId] = useState(null); const [hoveredTargetElement, setHoveredTargetElement] = useState(null); const [hoveredTargetElements, setHoveredTargetElements] = useState< @@ -530,6 +616,21 @@ export function PageFeedbackToolbarCSS({ const [isTransitioning, setIsTransitioning] = useState(false); const [tooltipsHidden, setTooltipsHidden] = useState(false); + // Draw mode state + const [isDrawMode, setIsDrawMode] = useState(false); + const [drawStrokes, setDrawStrokes] = useState; color: string; fixed: boolean }>>([]); + const drawStrokesRef = useRef(drawStrokes); + drawStrokesRef.current = drawStrokes; + const [hoveredDrawingIdx, setHoveredDrawingIdx] = useState(null); + const drawCanvasRef = useRef(null); + const isDrawingRef = useRef(false); + const currentStrokeRef = useRef>([]); + const dimAmountRef = useRef(0); + const visualHighlightRef = useRef(null); + const exitingStrokeIdRef = useRef(null); + const exitingAlphaRef = useRef(1); + + // Cmd+shift+click multi-select state const [pendingMultiSelectElements, setPendingMultiSelectElements] = useState< Array<{ @@ -752,21 +853,25 @@ export function PageFeedbackToolbarCSS({ setMarkersVisible(true); setAnimatedMarkers(new Set()); // After enter animations complete, mark all as animated + // Must wait for max stagger delay (count * 20ms) + animation duration (250ms) + const enterMaxDelay = Math.max(0, annotations.length - 1) * 20; const timer = originalSetTimeout(() => { setAnimatedMarkers((prev) => { const newSet = new Set(prev); annotations.forEach((a) => newSet.add(a.id)); return newSet; }); - }, 350); + }, enterMaxDelay + 250 + 50); return () => clearTimeout(timer); } else if (markersVisible) { // Hide markers - start exit animation, then unmount + // Timeout must cover max stagger delay + animation duration (200ms) setMarkersExiting(true); + const maxDelay = Math.max(0, annotations.length - 1) * 20; const timer = originalSetTimeout(() => { setMarkersVisible(false); setMarkersExiting(false); - }, 250); + }, maxDelay + 200 + 50); // +50ms buffer return () => clearTimeout(timer); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -1421,6 +1526,7 @@ export function PageFeedbackToolbarCSS({ setShowSettings(false); // Close settings when toolbar closes setPendingMultiSelectElements([]); // Clear multi-select modifiersHeldRef.current = { cmd: false, shift: false }; // Reset modifier tracking + setIsDrawMode(false); // Exit draw mode if (isFrozen) { unfreezeAnimations(); } @@ -1478,6 +1584,9 @@ export function PageFeedbackToolbarCSS({ [data-annotation-marker], [data-annotation-marker] * { cursor: pointer !important; } + html[data-drawing-hover], html[data-drawing-hover] * { + cursor: pointer !important; + } `; document.head.appendChild(style); @@ -1487,18 +1596,41 @@ export function PageFeedbackToolbarCSS({ }; }, [isActive]); + // Cursor change when hovering a drawing stroke (both draw mode and normal mode) + useEffect(() => { + if (hoveredDrawingIdx !== null && isActive) { + document.documentElement.setAttribute("data-drawing-hover", ""); + return () => document.documentElement.removeAttribute("data-drawing-hover"); + } + }, [hoveredDrawingIdx, isActive]); + // Handle mouse move useEffect(() => { - if (!isActive || pendingAnnotation) return; + if (!isActive || pendingAnnotation || isDrawMode) return; const handleMouseMove = (e: MouseEvent) => { // Use composedPath to get actual target inside shadow DOM const target = (e.composedPath()[0] || e.target) as HTMLElement; if (closestCrossingShadow(target, "[data-feedback-toolbar]")) { setHoverInfo(null); + // Only clear drawing hover when NOT over a marker — markers manage their own via handleMarkerHover + if (!target.closest("[data-annotation-marker]")) { + setHoveredDrawingIdx(null); + } return; } + // Check if hovering over a completed drawing stroke + if (drawStrokes.length > 0) { + const strokeIdx = findStrokeAtPoint(e.clientX, e.clientY, drawStrokes); + if (strokeIdx !== null) { + setHoveredDrawingIdx(strokeIdx); + setHoverInfo(null); + return; + } + } + setHoveredDrawingIdx(null); + const elementUnder = deepElementFromPoint(e.clientX, e.clientY); if ( !elementUnder || @@ -1524,11 +1656,60 @@ export function PageFeedbackToolbarCSS({ document.addEventListener("mousemove", handleMouseMove); return () => document.removeEventListener("mousemove", handleMouseMove); - }, [isActive, pendingAnnotation, effectiveReactMode]); + }, [isActive, pendingAnnotation, isDrawMode, effectiveReactMode, drawStrokes]); + + // Start editing an annotation (right-click or click on drawing stroke) + const startEditAnnotation = useCallback((annotation: Annotation) => { + setEditingAnnotation(annotation); + setHoveredMarkerId(null); + setHoveredTargetElement(null); + setHoveredTargetElements([]); + + // Try to find elements at the annotation's position(s) for live tracking + if (annotation.elementBoundingBoxes?.length) { + // Cmd+shift+click: find element at each bounding box center + const elements: HTMLElement[] = []; + for (const bb of annotation.elementBoundingBoxes) { + const centerX = bb.x + bb.width / 2; + const centerY = bb.y + bb.height / 2 - window.scrollY; + const el = deepElementFromPoint(centerX, centerY); + if (el) elements.push(el); + } + setEditingTargetElements(elements); + setEditingTargetElement(null); + } else if (annotation.boundingBox) { + // Single element + const bb = annotation.boundingBox; + const centerX = bb.x + bb.width / 2; + // Convert document coords to viewport coords (unless fixed) + const centerY = annotation.isFixed + ? bb.y + bb.height / 2 + : bb.y + bb.height / 2 - window.scrollY; + const el = deepElementFromPoint(centerX, centerY); + + // Validate found element's size roughly matches stored bounding box + if (el) { + const elRect = el.getBoundingClientRect(); + const widthRatio = elRect.width / bb.width; + const heightRatio = elRect.height / bb.height; + if (widthRatio < 0.5 || heightRatio < 0.5) { + setEditingTargetElement(null); + } else { + setEditingTargetElement(el); + } + } else { + setEditingTargetElement(null); + } + setEditingTargetElements([]); + } else { + setEditingTargetElement(null); + setEditingTargetElements([]); + } + }, []); // Handle click useEffect(() => { - if (!isActive) return; + if (!isActive || isDrawMode) return; const handleClick = (e: MouseEvent) => { if (justFinishedDragRef.current) { @@ -1543,6 +1724,94 @@ export function PageFeedbackToolbarCSS({ if (closestCrossingShadow(target, "[data-annotation-popup]")) return; if (closestCrossingShadow(target, "[data-annotation-marker]")) return; + // Check if clicking on a completed drawing stroke + if (drawStrokes.length > 0 && !pendingAnnotation && !editingAnnotation) { + const strokeIdx = findStrokeAtPoint(e.clientX, e.clientY, drawStrokes); + if (strokeIdx !== null) { + e.preventDefault(); + e.stopPropagation(); + + // If annotation already exists for this drawing, open it in edit mode + const existingAnnotation = annotations.find(a => a.strokeId === drawStrokes[strokeIdx]?.id || a.drawingIndex === strokeIdx); + if (existingAnnotation) { + startEditAnnotation(existingAnnotation); + return; + } + + const stroke = drawStrokes[strokeIdx]; + const scrollYNow = window.scrollY; + + // Temporarily hide canvas to find element underneath at click point + const canvas = drawCanvasRef.current; + if (canvas) canvas.style.visibility = "hidden"; + const elementUnder = deepElementFromPoint(e.clientX, e.clientY); + if (canvas) canvas.style.visibility = ""; + + const gestureShape = classifyStrokeGesture(stroke.points, stroke.fixed); + let name = `Drawing: ${gestureShape}`; + let path = ""; + let reactComponents: string | null = null; + let nearbyText: string | undefined; + let cssClasses: string | undefined; + let fullPath: string | undefined; + let accessibility: string | undefined; + let computedStylesStr: string | undefined; + let computedStylesObj: Record | undefined; + let nearbyElements: string | undefined; + let isFixed = stroke.fixed; + let boundingBox: { x: number; y: number; width: number; height: number } | undefined; + + if (elementUnder) { + const info = identifyElementWithReact(elementUnder, effectiveReactMode); + name = `Drawing: ${gestureShape} → ${info.name}`; + path = info.path; + reactComponents = info.reactComponents; + nearbyText = getNearbyText(elementUnder); + cssClasses = getElementClasses(elementUnder); + fullPath = getFullElementPath(elementUnder); + accessibility = getAccessibilityInfo(elementUnder); + computedStylesStr = getForensicComputedStyles(elementUnder); + computedStylesObj = getDetailedComputedStyles(elementUnder); + nearbyElements = getNearbyElements(elementUnder); + const rect = elementUnder.getBoundingClientRect(); + boundingBox = { + x: rect.left, + y: isFixed ? rect.top : rect.top + scrollYNow, + width: rect.width, + height: rect.height, + }; + } + + // Position marker at click point (on the stroke) + const annX = (e.clientX / window.innerWidth) * 100; + const annY = isFixed ? e.clientY : e.clientY + scrollYNow; + + setPendingAnnotation({ + x: annX, + y: annY, + clientY: e.clientY, + element: name, + elementPath: path, + boundingBox, + nearbyText, + cssClasses, + isFixed, + fullPath, + accessibility, + computedStyles: computedStylesStr, + computedStylesObj, + nearbyElements, + reactComponents: reactComponents ?? undefined, + targetElement: elementUnder ?? undefined, + drawingIndex: strokeIdx, + strokeId: stroke.id, + }); + setHoverInfo(null); + setHoveredDrawingIdx(null); + return; + } + } + // Handle cmd+shift+click for multi-element selection if (e.metaKey && e.shiftKey && !pendingAnnotation && !editingAnnotation) { e.preventDefault(); @@ -1670,11 +1939,15 @@ export function PageFeedbackToolbarCSS({ return () => document.removeEventListener("click", handleClick, true); }, [ isActive, + isDrawMode, pendingAnnotation, editingAnnotation, settings.blockInteractions, effectiveReactMode, pendingMultiSelectElements, + drawStrokes, + annotations, + startEditAnnotation, ]); // Cmd+shift+click multi-select: keyup listener for modifier release @@ -1724,7 +1997,7 @@ export function PageFeedbackToolbarCSS({ // Multi-select drag - mousedown useEffect(() => { - if (!isActive || pendingAnnotation) return; + if (!isActive || pendingAnnotation || isDrawMode) return; const handleMouseDown = (e: MouseEvent) => { // Use composedPath to get actual target inside shadow DOM @@ -1784,7 +2057,7 @@ export function PageFeedbackToolbarCSS({ document.addEventListener("mousedown", handleMouseDown); return () => document.removeEventListener("mousedown", handleMouseDown); - }, [isActive, pendingAnnotation]); + }, [isActive, pendingAnnotation, isDrawMode]); // Multi-select drag - mousemove (fully optimized with direct DOM updates) useEffect(() => { @@ -2151,6 +2424,430 @@ export function PageFeedbackToolbarCSS({ return () => document.removeEventListener("mouseup", handleMouseUp); }, [isActive, isDragging]); + // Draw mode: redraw helper — dimAmount 0–1 controls non-hovered stroke opacity + const redrawCanvas = useCallback((ctx: CanvasRenderingContext2D, strokes: typeof drawStrokes, hoveredIdx?: number | null, dimAmount = 0) => { + const scrollY = window.scrollY; + const dpr = window.devicePixelRatio || 1; + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + ctx.save(); + ctx.scale(dpr, dpr); + + const tracePath = (stroke: typeof strokes[0], offsetY: number) => { + const p0 = stroke.points[0]; + ctx.moveTo(p0.x, p0.y - offsetY); + for (let i = 1; i < stroke.points.length - 1; i++) { + const curr = stroke.points[i]; + const next = stroke.points[i + 1]; + const midX = (curr.x + next.x) / 2; + const midY = (curr.y + next.y - 2 * offsetY) / 2; + ctx.quadraticCurveTo(curr.x, curr.y - offsetY, midX, midY); + } + const last = stroke.points[stroke.points.length - 1]; + ctx.lineTo(last.x, last.y - offsetY); + }; + + for (let si = 0; si < strokes.length; si++) { + const stroke = strokes[si]; + if (stroke.points.length < 2) continue; + const offsetY = stroke.fixed ? 0 : scrollY; + // Per-stroke alpha: dim non-hovered strokes, fade exiting stroke + let alpha = (hoveredIdx != null && si !== hoveredIdx) ? 1 - 0.7 * dimAmount : 1; + if (exitingStrokeIdRef.current && stroke.id === exitingStrokeIdRef.current) { + alpha *= exitingAlphaRef.current; + } + ctx.globalAlpha = alpha; + ctx.beginPath(); + ctx.strokeStyle = stroke.color; + ctx.lineWidth = 3; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + tracePath(stroke, offsetY); + ctx.stroke(); + } + ctx.globalAlpha = 1; + ctx.restore(); + }, []); + + // Draw mode: drawing logic (also handles hover/click-to-annotate on completed strokes) + const drawClickStartRef = useRef<{ x: number; y: number; strokeIdx: number | null } | null>(null); + useEffect(() => { + if (!isDrawMode || !isActive) return; + + const canvas = drawCanvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + const dpr = window.devicePixelRatio || 1; + + const handleMouseDown = (e: MouseEvent) => { + // If an annotation popup is open, shake it instead of drawing + if (pendingAnnotation) { + popupRef.current?.shake(); + return; + } + if (editingAnnotation) { + editPopupRef.current?.shake(); + return; + } + + // Check if clicking on an existing stroke + const strokeIdx = findStrokeAtPoint(e.clientX, e.clientY, drawStrokes); + drawClickStartRef.current = { x: e.clientX, y: e.clientY, strokeIdx }; + + isDrawingRef.current = true; + currentStrokeRef.current = [{ x: e.clientX, y: e.clientY }]; + ctx.save(); + ctx.scale(dpr, dpr); + ctx.beginPath(); + ctx.strokeStyle = settings.annotationColor; + ctx.lineWidth = 3; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + ctx.moveTo(e.clientX, e.clientY); + }; + + const handleMouseMove = (e: MouseEvent) => { + if (!isDrawingRef.current) { + // Hover detection on completed strokes (not actively drawing) + const strokeIdx = findStrokeAtPoint(e.clientX, e.clientY, drawStrokes); + setHoveredDrawingIdx(strokeIdx); + if (strokeIdx !== null) canvas.setAttribute("data-stroke-hover", ""); + else canvas.removeAttribute("data-stroke-hover"); + return; + } + const point = { x: e.clientX, y: e.clientY }; + const prev = currentStrokeRef.current[currentStrokeRef.current.length - 1]; + // Skip points that are very close together (reduces jitter) + const dist = Math.hypot(point.x - prev.x, point.y - prev.y); + if (dist < 2) return; + currentStrokeRef.current.push(point); + // Quadratic curve to midpoint for smooth live drawing + const midX = (prev.x + point.x) / 2; + const midY = (prev.y + point.y) / 2; + ctx.quadraticCurveTo(prev.x, prev.y, midX, midY); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(midX, midY); + }; + + const handleMouseUp = (e: MouseEvent) => { + if (!isDrawingRef.current) return; + isDrawingRef.current = false; + ctx.restore(); + const pts = currentStrokeRef.current; + + // Detect click (not drag) on existing stroke — open annotation popup + const clickStart = drawClickStartRef.current; + if (clickStart && clickStart.strokeIdx !== null && pts.length <= 3) { + const movedDist = Math.hypot(e.clientX - clickStart.x, e.clientY - clickStart.y); + if (movedDist < 5) { + // It's a click on an existing stroke + currentStrokeRef.current = []; + drawClickStartRef.current = null; + // Redraw to clear any partial stroke artifact + redrawCanvas(ctx, drawStrokes, clickStart.strokeIdx, dimAmountRef.current); + + const strokeIdx = clickStart.strokeIdx; + + // If annotation already exists for this drawing, open it in edit mode + const existingAnnotation = annotations.find(a => a.drawingIndex === strokeIdx); + if (existingAnnotation) { + startEditAnnotation(existingAnnotation); + setHoveredDrawingIdx(null); + return; + } + + const stroke = drawStrokes[strokeIdx]; + const scrollYNow = window.scrollY; + + // Use click position for element detection + const centerX = e.clientX; + const centerY = e.clientY; + + // Temporarily hide canvas to find element underneath + canvas.style.visibility = "hidden"; + const elementUnder = deepElementFromPoint(centerX, centerY); + canvas.style.visibility = ""; + + const gestureShape = classifyStrokeGesture(stroke.points, stroke.fixed); + let name = `Drawing: ${gestureShape}`; + let path = ""; + let reactComponents: string | null = null; + let nearbyText: string | undefined; + let cssClasses: string | undefined; + let fullPath: string | undefined; + let accessibility: string | undefined; + let computedStylesStr: string | undefined; + let computedStylesObj: Record | undefined; + let nearbyElements: string | undefined; + const isFixed = stroke.fixed; + let boundingBox: { x: number; y: number; width: number; height: number } | undefined; + + if (elementUnder) { + const info = identifyElementWithReact(elementUnder, effectiveReactMode); + name = `Drawing: ${gestureShape} → ${info.name}`; + path = info.path; + reactComponents = info.reactComponents; + nearbyText = getNearbyText(elementUnder); + cssClasses = getElementClasses(elementUnder); + fullPath = getFullElementPath(elementUnder); + accessibility = getAccessibilityInfo(elementUnder); + computedStylesStr = getForensicComputedStyles(elementUnder); + computedStylesObj = getDetailedComputedStyles(elementUnder); + nearbyElements = getNearbyElements(elementUnder); + const rect = elementUnder.getBoundingClientRect(); + boundingBox = { + x: rect.left, + y: isFixed ? rect.top : rect.top + scrollYNow, + width: rect.width, + height: rect.height, + }; + } + + // Position marker at click point (on the stroke) + const annX = (e.clientX / window.innerWidth) * 100; + const annY = isFixed ? e.clientY : e.clientY + scrollYNow; + + setPendingAnnotation({ + x: annX, + y: annY, + clientY: e.clientY, + element: name, + elementPath: path, + boundingBox, + nearbyText, + cssClasses, + isFixed, + fullPath, + accessibility, + computedStyles: computedStylesStr, + computedStylesObj, + nearbyElements, + reactComponents: reactComponents ?? undefined, + targetElement: elementUnder ?? undefined, + drawingIndex: strokeIdx, + strokeId: stroke.id, + }); + setHoverInfo(null); + setHoveredDrawingIdx(null); + return; + } + } + drawClickStartRef.current = null; + + if (pts.length > 1) { + // Determine if stroke is over fixed/sticky elements + // Check the bounding-box center — most reliable signal for what the stroke targets + canvas.style.visibility = "hidden"; + + const isElFixed = (el: HTMLElement): boolean => { + let node: HTMLElement | null = el; + while (node && node !== document.documentElement) { + const pos = getComputedStyle(node).position; + if (pos === "fixed" || pos === "sticky") return true; + node = node.parentElement; + } + return false; + }; + + // Bounding box center + let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; + for (const p of pts) { + minX = Math.min(minX, p.x); + minY = Math.min(minY, p.y); + maxX = Math.max(maxX, p.x); + maxY = Math.max(maxY, p.y); + } + const centerX = (minX + maxX) / 2; + const centerY = (minY + maxY) / 2; + const centerEl = deepElementFromPoint(centerX, centerY); + let isFixed = centerEl ? isElFixed(centerEl) : false; + + // If center is ambiguous (e.g. arrow spanning fixed→scrollable), sample edges too + if (!isFixed) { + let fixedCount = 0; + let totalSampled = 0; + const sampleCount = Math.min(6, pts.length); + const step = Math.max(1, Math.floor(pts.length / sampleCount)); + for (let i = 0; i < pts.length; i += step) { + const el = deepElementFromPoint(pts[i].x, pts[i].y); + if (!el) continue; + totalSampled++; + if (isElFixed(el)) fixedCount++; + } + // If majority of edge samples are fixed, override + if (totalSampled > 0 && fixedCount > totalSampled * 0.6) isFixed = true; + } + + // Fixed strokes stay in viewport coords; scrollable strokes convert to page coords + const finalPoints = isFixed + ? [...pts] + : pts.map(p => ({ x: p.x, y: p.y + window.scrollY })); + + const newStrokeIdx = drawStrokes.length; + const newStrokeId = crypto.randomUUID(); + const newStroke = { id: newStrokeId, points: finalPoints, color: settings.annotationColor, fixed: isFixed }; + + // Identify element underneath for annotation + const gestureShape = classifyStrokeGesture(finalPoints, isFixed); + let name = `Drawing: ${gestureShape}`; + let elPath = ""; + let reactComponents: string | null = null; + let nearbyText: string | undefined; + let cssClasses: string | undefined; + let fullPath: string | undefined; + let accessibility: string | undefined; + let computedStylesStr: string | undefined; + let computedStylesObj: Record | undefined; + let nearbyElements: string | undefined; + let boundingBox: { x: number; y: number; width: number; height: number } | undefined; + + if (centerEl) { + const info = identifyElementWithReact(centerEl, effectiveReactMode); + name = `Drawing: ${gestureShape} → ${info.name}`; + elPath = info.path; + reactComponents = info.reactComponents; + nearbyText = getNearbyText(centerEl); + cssClasses = getElementClasses(centerEl); + fullPath = getFullElementPath(centerEl); + accessibility = getAccessibilityInfo(centerEl); + computedStylesStr = getForensicComputedStyles(centerEl); + computedStylesObj = getDetailedComputedStyles(centerEl); + nearbyElements = getNearbyElements(centerEl); + const rect = centerEl.getBoundingClientRect(); + boundingBox = { + x: rect.left, + y: isFixed ? rect.top : rect.top + window.scrollY, + width: rect.width, + height: rect.height, + }; + } + + canvas.style.visibility = ""; + + setDrawStrokes(prev => [...prev, newStroke]); + + // Position marker at the end of the stroke (where the pen was released) + const lastPt = finalPoints[finalPoints.length - 1]; + const lastPtViewY = isFixed ? lastPt.y : lastPt.y - window.scrollY; + const annX = (lastPt.x / window.innerWidth) * 100; + const annY = lastPt.y; // Already in page coords (finalPoints are converted) + + setPendingAnnotation({ + x: annX, + y: annY, + clientY: lastPtViewY, + element: name, + elementPath: elPath, + boundingBox, + nearbyText, + cssClasses, + isFixed, + fullPath, + accessibility, + computedStyles: computedStylesStr, + computedStylesObj, + nearbyElements, + reactComponents: reactComponents ?? undefined, + targetElement: centerEl ?? undefined, + drawingIndex: newStrokeIdx, + strokeId: newStrokeId, + }); + setHoverInfo(null); + } + currentStrokeRef.current = []; + }; + + const handleMouseLeave = () => { + setHoveredDrawingIdx(null); + canvas.removeAttribute("data-stroke-hover"); + }; + + canvas.addEventListener("mousedown", handleMouseDown); + canvas.addEventListener("mousemove", handleMouseMove); + canvas.addEventListener("mouseup", handleMouseUp); + canvas.addEventListener("mouseleave", handleMouseLeave); + + return () => { + canvas.removeEventListener("mousedown", handleMouseDown); + canvas.removeEventListener("mousemove", handleMouseMove); + canvas.removeEventListener("mouseup", handleMouseUp); + canvas.removeEventListener("mouseleave", handleMouseLeave); + }; + }, [isDrawMode, isActive, settings.annotationColor, drawStrokes, annotations, effectiveReactMode, redrawCanvas, startEditAnnotation, pendingAnnotation, editingAnnotation]); + + // Draw mode: resize canvas, redraw on scroll + useEffect(() => { + if (!isActive) return; + const canvas = drawCanvasRef.current; + if (!canvas) return; + + const resize = () => { + const dpr = window.devicePixelRatio || 1; + canvas.style.width = window.innerWidth + "px"; + canvas.style.height = window.innerHeight + "px"; + canvas.width = window.innerWidth * dpr; + canvas.height = window.innerHeight * dpr; + const ctx = canvas.getContext("2d"); + if (ctx) redrawCanvas(ctx, drawStrokes, visualHighlightRef.current, dimAmountRef.current); + }; + + const onScroll = () => { + const ctx = canvas.getContext("2d"); + if (ctx) redrawCanvas(ctx, drawStrokes, visualHighlightRef.current, dimAmountRef.current); + }; + + resize(); + window.addEventListener("resize", resize); + window.addEventListener("scroll", onScroll, { passive: true }); + return () => { + window.removeEventListener("resize", resize); + window.removeEventListener("scroll", onScroll); + }; + }, [isActive, drawStrokes, redrawCanvas]); + + // Animate dim in/out when hovering drawings + useEffect(() => { + const canvas = drawCanvasRef.current; + if (!canvas || !isActive || drawStrokes.length === 0) return; + + const effectiveHighlight = hoveredDrawingIdx ?? pendingAnnotation?.drawingIndex ?? editingAnnotation?.drawingIndex ?? null; + const targetDim = effectiveHighlight != null ? 1 : 0; + + // Update visual highlight ref — keep old value during fade-out + if (effectiveHighlight != null) { + visualHighlightRef.current = effectiveHighlight; + } + + // Already at target — just redraw with current value + if (Math.abs(dimAmountRef.current - targetDim) < 0.01) { + dimAmountRef.current = targetDim; + if (targetDim === 0) visualHighlightRef.current = null; + const ctx = canvas.getContext("2d"); + if (ctx) redrawCanvas(ctx, drawStrokes, visualHighlightRef.current, targetDim); + return; + } + + let raf: number; + const animate = () => { + const diff = targetDim - dimAmountRef.current; + if (Math.abs(diff) < 0.01) { + dimAmountRef.current = targetDim; + if (targetDim === 0) visualHighlightRef.current = null; + } else { + dimAmountRef.current += diff * 0.25; + } + const ctx = canvas.getContext("2d"); + if (ctx) redrawCanvas(ctx, drawStrokes, visualHighlightRef.current, dimAmountRef.current); + if (Math.abs(dimAmountRef.current - targetDim) > 0.01) { + raf = requestAnimationFrame(animate); + } + }; + raf = requestAnimationFrame(animate); + return () => cancelAnimationFrame(raf); + }, [isActive, hoveredDrawingIdx, pendingAnnotation?.drawingIndex, editingAnnotation?.drawingIndex, drawStrokes, redrawCanvas]); + // Fire webhook for annotation events - returns true on success, false on failure const fireWebhook = useCallback( async ( @@ -2209,6 +2906,8 @@ export function PageFeedbackToolbarCSS({ nearbyElements: pendingAnnotation.nearbyElements, reactComponents: pendingAnnotation.reactComponents, elementBoundingBoxes: pendingAnnotation.elementBoundingBoxes, + drawingIndex: pendingAnnotation.drawingIndex, + strokeId: pendingAnnotation.strokeId, // Protocol fields for server sync ...(endpoint && currentSessionId ? { @@ -2284,18 +2983,52 @@ export function PageFeedbackToolbarCSS({ // Cancel annotation with exit animation const cancelAnnotation = useCallback(() => { + const strokeId = pendingAnnotation?.strokeId; setPendingExiting(true); + + // Fade the linked stroke on canvas in parallel with popup exit + if (strokeId) { + exitingStrokeIdRef.current = strokeId; + exitingAlphaRef.current = 1; + const canvas = drawCanvasRef.current; + const ctx = canvas?.getContext("2d"); + if (ctx) { + const start = performance.now(); + const fade = (now: number) => { + const t = Math.min((now - start) / 150, 1); + exitingAlphaRef.current = 1 - t; + redrawCanvas(ctx, drawStrokesRef.current, visualHighlightRef.current, dimAmountRef.current); + if (t < 1) requestAnimationFrame(fade); + }; + requestAnimationFrame(fade); + } + } + originalSetTimeout(() => { + exitingStrokeIdRef.current = null; + if (strokeId) { + const currentStrokes = drawStrokesRef.current; + const drawingIdx = currentStrokes.findIndex(s => s.id === strokeId); + if (drawingIdx >= 0) { + setDrawStrokes(prev => prev.filter(s => s.id !== strokeId)); + setAnnotations(prev => prev.map(a => + a.drawingIndex != null && a.drawingIndex > drawingIdx + ? { ...a, drawingIndex: a.drawingIndex - 1 } + : a + )); + } + } setPendingAnnotation(null); setPendingExiting(false); - }, 150); // Match exit animation duration - }, []); + }, 150); + }, [pendingAnnotation]); // Delete annotation with exit animation const deleteAnnotation = useCallback( (id: string) => { - const deletedIndex = annotations.findIndex((a) => a.id === id); - const deletedAnnotation = annotations[deletedIndex]; + const currentAnnotations = annotationsRef.current; + const deletedIndex = currentAnnotations.findIndex((a) => a.id === id); + const deletedAnnotation = currentAnnotations[deletedIndex]; // Close edit panel with exit animation if deleting the annotation being edited if (editingAnnotation?.id === id) { @@ -2327,9 +3060,46 @@ export function PageFeedbackToolbarCSS({ }); } - // Wait for exit animation then remove + // Fade the linked stroke on canvas in parallel with marker exit + if (deletedAnnotation?.strokeId) { + exitingStrokeIdRef.current = deletedAnnotation.strokeId; + exitingAlphaRef.current = 1; + const canvas = drawCanvasRef.current; + const ctx = canvas?.getContext("2d"); + if (ctx) { + const start = performance.now(); + const fade = (now: number) => { + const t = Math.min((now - start) / 150, 1); + exitingAlphaRef.current = 1 - t; + redrawCanvas(ctx, drawStrokesRef.current, visualHighlightRef.current, dimAmountRef.current); + if (t < 1) requestAnimationFrame(fade); + }; + requestAnimationFrame(fade); + } + } + + // Wait for marker exit animation then remove annotation + linked stroke originalSetTimeout(() => { - setAnnotations((prev) => prev.filter((a) => a.id !== id)); + exitingStrokeIdRef.current = null; + // Use strokeId (stable) to find the correct stroke — drawingIndex can be + // stale if other strokes were added/removed during the 150ms wait + const latestAnn = annotationsRef.current.find(a => a.id === id); + const strokeId = latestAnn?.strokeId; + const currentStrokes = drawStrokesRef.current; + const drawingIdx = strokeId ? currentStrokes.findIndex(s => s.id === strokeId) : -1; + + if (drawingIdx >= 0) { + setDrawStrokes(prev => prev.filter(s => s.id !== strokeId)); + setAnnotations(prev => prev + .filter(a => a.id !== id) + .map(a => + a.drawingIndex != null && a.drawingIndex > drawingIdx + ? { ...a, drawingIndex: a.drawingIndex - 1 } + : a + )); + } else { + setAnnotations((prev) => prev.filter((a) => a.id !== id)); + } setExitingMarkers((prev) => { const next = new Set(prev); next.delete(id); @@ -2338,76 +3108,43 @@ export function PageFeedbackToolbarCSS({ setDeletingMarkerId(null); // Trigger renumber animation for markers after deleted one - if (deletedIndex < annotations.length - 1) { - setRenumberFrom(deletedIndex); + const latestAnnotations = annotationsRef.current; + const currentIndex = latestAnnotations.findIndex(a => a.id === id); + if (currentIndex >= 0 && currentIndex < latestAnnotations.length - 1) { + setRenumberFrom(currentIndex); originalSetTimeout(() => setRenumberFrom(null), 200); } }, 150); }, - [annotations, editingAnnotation, onAnnotationDelete, fireWebhook, endpoint], + [editingAnnotation, onAnnotationDelete, fireWebhook, endpoint], ); - // Start editing an annotation (right-click) - const startEditAnnotation = useCallback((annotation: Annotation) => { - setEditingAnnotation(annotation); - setHoveredMarkerId(null); - setHoveredTargetElement(null); - setHoveredTargetElements([]); - - // Try to find elements at the annotation's position(s) for live tracking - if (annotation.elementBoundingBoxes?.length) { - // Cmd+shift+click: find element at each bounding box center - const elements: HTMLElement[] = []; - for (const bb of annotation.elementBoundingBoxes) { - const centerX = bb.x + bb.width / 2; - const centerY = bb.y + bb.height / 2 - window.scrollY; - const el = deepElementFromPoint(centerX, centerY); - if (el) elements.push(el); - } - setEditingTargetElements(elements); - setEditingTargetElement(null); - } else if (annotation.boundingBox) { - // Single element - const bb = annotation.boundingBox; - const centerX = bb.x + bb.width / 2; - // Convert document coords to viewport coords (unless fixed) - const centerY = annotation.isFixed - ? bb.y + bb.height / 2 - : bb.y + bb.height / 2 - window.scrollY; - const el = deepElementFromPoint(centerX, centerY); - - // Validate found element's size roughly matches stored bounding box - if (el) { - const elRect = el.getBoundingClientRect(); - const widthRatio = elRect.width / bb.width; - const heightRatio = elRect.height / bb.height; - if (widthRatio < 0.5 || heightRatio < 0.5) { - setEditingTargetElement(null); - } else { - setEditingTargetElement(el); - } - } else { - setEditingTargetElement(null); - } - setEditingTargetElements([]); - } else { - setEditingTargetElement(null); - setEditingTargetElements([]); - } - }, []); - // Handle marker hover - finds element(s) for live position tracking const handleMarkerHover = useCallback( (annotation: Annotation | null) => { if (!annotation) { + // Start tooltip exit animation synchronously (before clearing hoveredMarkerId) + if (hoveredMarkerId) { + setTooltipExitingId(hoveredMarkerId); + originalSetTimeout(() => setTooltipExitingId(null), 100); + } setHoveredMarkerId(null); setHoveredTargetElement(null); setHoveredTargetElements([]); + setHoveredDrawingIdx(null); return; } + setTooltipExitingId(null); setHoveredMarkerId(annotation.id); + // Highlight linked drawing stroke when marker is hovered + if (annotation.drawingIndex != null && annotation.drawingIndex < drawStrokes.length) { + setHoveredDrawingIdx(annotation.drawingIndex); + } else { + setHoveredDrawingIdx(null); + } + // Find elements at the annotation's position(s) for live tracking if (annotation.elementBoundingBoxes?.length) { // Cmd+shift+click: find element at each bounding box center @@ -2454,7 +3191,7 @@ export function PageFeedbackToolbarCSS({ setHoveredTargetElements([]); } }, - [], + [drawStrokes, hoveredMarkerId], ); // Update annotation (edit mode submit) @@ -2512,7 +3249,7 @@ export function PageFeedbackToolbarCSS({ // Clear all with staggered animation const clearAll = useCallback(() => { const count = annotations.length; - if (count === 0) return; + if (count === 0 && drawStrokes.length === 0) return; // Fire callback with all annotations before clearing onAnnotationsClear?.(annotations); @@ -2535,6 +3272,14 @@ export function PageFeedbackToolbarCSS({ setIsClearing(true); setCleared(true); + // Clear draw strokes + setDrawStrokes([]); + const canvas = drawCanvasRef.current; + if (canvas) { + const ctx = canvas.getContext("2d"); + if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); + } + const totalAnimationTime = count * 30 + 200; originalSetTimeout(() => { setAnnotations([]); @@ -2544,7 +3289,7 @@ export function PageFeedbackToolbarCSS({ }, totalAnimationTime); originalSetTimeout(() => setCleared(false), 1500); - }, [pathname, annotations, onAnnotationsClear, fireWebhook, endpoint]); + }, [pathname, annotations, drawStrokes, onAnnotationsClear, fireWebhook, endpoint]); // Copy output const copyOutput = useCallback(async () => { @@ -2554,13 +3299,136 @@ export function PageFeedbackToolbarCSS({ window.location.search + window.location.hash : pathname; - const output = generateOutput( + let output = generateOutput( annotations, displayUrl, settings.outputDetail, effectiveReactMode, ); - if (!output) return; + if (!output && drawStrokes.length === 0) return; + if (!output) output = `## Page Feedback: ${displayUrl}\n`; + + // Describe draw strokes as text by detecting elements underneath + if (drawStrokes.length > 0) { + // Collect drawing indices that have linked annotations (skip those in standalone section) + const linkedDrawingIndices = new Set(); + for (const a of annotations) { + if (a.drawingIndex != null) linkedDrawingIndices.add(a.drawingIndex); + } + + // Temporarily hide the draw canvas so elementFromPoint hits real page elements + const canvas = drawCanvasRef.current; + if (canvas) canvas.style.visibility = "hidden"; + + const strokeDescriptions: string[] = []; + const scrollY = window.scrollY; + for (let strokeIdx = 0; strokeIdx < drawStrokes.length; strokeIdx++) { + // Skip strokes that have a linked annotation — their info is in the annotation output + if (linkedDrawingIndices.has(strokeIdx)) continue; + const stroke = drawStrokes[strokeIdx]; + if (stroke.points.length < 2) continue; + + // Get viewport coords for analysis (fixed strokes are already in viewport coords) + const viewportPoints = stroke.fixed + ? stroke.points + : stroke.points.map(p => ({ x: p.x, y: p.y - scrollY })); + + // Bounding box (viewport coords) + let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; + for (const p of viewportPoints) { + minX = Math.min(minX, p.x); + minY = Math.min(minY, p.y); + maxX = Math.max(maxX, p.x); + maxY = Math.max(maxY, p.y); + } + const bboxW = maxX - minX; + const bboxH = maxY - minY; + const bboxDiag = Math.hypot(bboxW, bboxH); + + // Start/end analysis + const start = viewportPoints[0]; + const end = viewportPoints[viewportPoints.length - 1]; + const startEndDist = Math.hypot(end.x - start.x, end.y - start.y); + + // Gesture classification + let gesture: "circle" | "box" | "underline" | "arrow" | "drawing"; + const closedLoop = startEndDist < bboxDiag * 0.35; + const aspectRatio = bboxW / Math.max(bboxH, 1); + + if (closedLoop && bboxDiag > 20) { + // Closed loop — circle vs box: measure how many points hug the bbox edges + // Box strokes spend time near edges; circles stay more centered + const edgeThreshold = Math.max(bboxW, bboxH) * 0.15; + let edgePoints = 0; + for (const p of viewportPoints) { + const nearLeft = p.x - minX < edgeThreshold; + const nearRight = maxX - p.x < edgeThreshold; + const nearTop = p.y - minY < edgeThreshold; + const nearBottom = maxY - p.y < edgeThreshold; + if ((nearLeft || nearRight) && (nearTop || nearBottom)) edgePoints++; + } + // If many points are near corners, it's a box + gesture = edgePoints > viewportPoints.length * 0.15 ? "box" : "circle"; + } else if (aspectRatio > 3 && bboxH < 40) { + gesture = "underline"; + } else if (startEndDist > bboxDiag * 0.5) { + gesture = "arrow"; + } else { + gesture = "drawing"; + } + + // Sample elements along the stroke + const sampleCount = Math.min(10, viewportPoints.length); + const step = Math.max(1, Math.floor(viewportPoints.length / sampleCount)); + const seenElements = new Set(); + const elementNames: string[] = []; + + const samplePoints = [start]; + for (let i = step; i < viewportPoints.length - 1; i += step) { + samplePoints.push(viewportPoints[i]); + } + samplePoints.push(end); + + for (const p of samplePoints) { + const el = deepElementFromPoint(p.x, p.y); + if (!el || seenElements.has(el)) continue; + if (closestCrossingShadow(el, "[data-feedback-toolbar]")) continue; + seenElements.add(el); + const { name } = identifyElement(el); + if (!elementNames.includes(name)) { + elementNames.push(name); + } + } + + // Format description + const region = `${Math.round(minX)},${Math.round(minY)} → ${Math.round(maxX)},${Math.round(maxY)}`; + let desc: string; + + if ((gesture === "circle" || gesture === "box") && elementNames.length > 0) { + const verb = gesture === "box" ? "Boxed" : "Circled"; + desc = `${verb} **${elementNames[0]}**${elementNames.length > 1 ? ` (and ${elementNames.slice(1).join(", ")})` : ""} (region: ${region})`; + } else if (gesture === "underline" && elementNames.length > 0) { + desc = `Underlined **${elementNames[0]}** (${region})`; + } else if (gesture === "arrow" && elementNames.length >= 2) { + desc = `Arrow from **${elementNames[0]}** to **${elementNames[elementNames.length - 1]}** (${Math.round(start.x)},${Math.round(start.y)} → ${Math.round(end.x)},${Math.round(end.y)})`; + } else if (elementNames.length > 0) { + desc = `${gesture === "arrow" ? "Arrow" : "Drawing"} near **${elementNames.join("**, **")}** (region: ${region})`; + } else { + desc = `Drawing at ${region}`; + } + strokeDescriptions.push(desc); + } + + // Restore canvas + if (canvas) canvas.style.visibility = ""; + + if (strokeDescriptions.length > 0) { + output += `\n**Drawings:**\n`; + strokeDescriptions.forEach((d, i) => { + output += `${i + 1}. ${d}\n`; + }); + } + } if (copyToClipboard) { try { @@ -2581,6 +3449,7 @@ export function PageFeedbackToolbarCSS({ } }, [ annotations, + drawStrokes, pathname, settings.outputDetail, effectiveReactMode, @@ -2662,15 +3531,15 @@ export function PageFeedbackToolbarCSS({ // Constrain to viewport const padding = 20; - const wrapperWidth = 297; // .toolbar wrapper width + const wrapperWidth = 337; // .toolbar wrapper width const toolbarHeight = 44; // Content is right-aligned within wrapper via margin-left: auto // Calculate content width based on state const contentWidth = isActive ? connectionStatus === "connected" - ? 297 - : 257 + ? 337 + : 297 : 44; // collapsed circle // Content offset from wrapper left edge @@ -2751,7 +3620,7 @@ export function PageFeedbackToolbarCSS({ const constrainPosition = () => { const padding = 20; - const wrapperWidth = 297; // .toolbar wrapper width + const wrapperWidth = 337; // .toolbar wrapper width const toolbarHeight = 44; let newX = toolbarPosition.x; @@ -2803,6 +3672,11 @@ export function PageFeedbackToolbarCSS({ target.isContentEditable; if (e.key === "Escape") { + // Exit draw mode first if active + if (isDrawMode) { + setIsDrawMode(false); + return; + } // Clear multi-select if active if (pendingMultiSelectElements.length > 0) { setPendingMultiSelectElements([]); @@ -2824,6 +3698,21 @@ export function PageFeedbackToolbarCSS({ return; } + // Cmd+Z in draw mode: undo last stroke + if ((e.metaKey || e.ctrlKey) && (e.key === "z" || e.key === "Z") && isDrawMode && !e.shiftKey) { + e.preventDefault(); + setDrawStrokes(prev => { + const next = prev.slice(0, -1); + const canvas = drawCanvasRef.current; + if (canvas) { + const ctx = canvas.getContext("2d"); + if (ctx) redrawCanvas(ctx, next); + } + return next; + }); + return; + } + // Skip other shortcuts if typing or modifier keys are held if (isTyping || e.metaKey || e.ctrlKey) return; @@ -2834,12 +3723,20 @@ export function PageFeedbackToolbarCSS({ toggleFreeze(); } + // "D" to toggle draw mode + if (e.key === "d" || e.key === "D") { + e.preventDefault(); + hideTooltipsUntilMouseLeave(); + setIsDrawMode(prev => !prev); + } + // "H" to toggle marker visibility if (e.key === "h" || e.key === "H") { if (annotations.length > 0) { e.preventDefault(); hideTooltipsUntilMouseLeave(); setShowMarkers((prev) => !prev); + if (isDrawMode) setIsDrawMode(false); } } @@ -2881,6 +3778,7 @@ export function PageFeedbackToolbarCSS({ return () => document.removeEventListener("keydown", handleKeyDown); }, [ isActive, + isDrawMode, pendingAnnotation, annotations.length, settings.webhookUrl, @@ -2890,6 +3788,7 @@ export function PageFeedbackToolbarCSS({ toggleFreeze, copyOutput, clearAll, + redrawCanvas, pendingMultiSelectElements, ]); @@ -3043,6 +3942,24 @@ export function PageFeedbackToolbarCSS({ +
+ + + {isDrawMode ? "Exit draw mode" : "Draw mode"} + D + +
+
+ {/* Draw canvas — outside overlay so it can fade on toolbar close */} + + {/* Markers layer - normal scrolling markers */}
{markersVisible && @@ -3613,6 +4539,7 @@ export function PageFeedbackToolbarCSS({ const showDeleteHover = showDeleteState && settings.markerClickBehavior === "delete"; + return (
!markersExiting && @@ -3667,9 +4596,9 @@ export function PageFeedbackToolbarCSS({ {globalIndex + 1} )} - {isHovered && !editingAnnotation && ( + {(isHovered || tooltipExitingId === annotation.id) && !editingAnnotation && (
@@ -3741,6 +4670,7 @@ export function PageFeedbackToolbarCSS({ const showDeleteHover = showDeleteState && settings.markerClickBehavior === "delete"; + return (
!markersExiting && @@ -3795,9 +4728,9 @@ export function PageFeedbackToolbarCSS({ {globalIndex + 1} )} - {isHovered && !editingAnnotation && ( + {(isHovered || tooltipExitingId === annotation.id) && !editingAnnotation && (
@@ -3852,7 +4785,8 @@ export function PageFeedbackToolbarCSS({ {hoverInfo?.rect && !pendingAnnotation && !isScrolling && - !isDragging && ( + !isDragging && + !isDrawMode && (
a.id === hoveredMarkerId, ); if (!hoveredAnnotation?.boundingBox) return null; + // Drawing-linked annotations highlight the stroke via canvas, not an element box + if (hoveredAnnotation.drawingIndex != null) return null; // Render individual element boxes if available (cmd+shift+click multi-select) if (hoveredAnnotation.elementBoundingBoxes?.length) { @@ -3984,7 +4920,7 @@ export function PageFeedbackToolbarCSS({ })()} {/* Hover tooltip */} - {hoverInfo && !pendingAnnotation && !isScrolling && !isDragging && ( + {hoverInfo && !pendingAnnotation && !isScrolling && !isDragging && !isDrawMode && (
- {/* Show element/area outline while adding annotation */} - {pendingAnnotation.multiSelectElements?.length + {/* Show element/area outline while adding annotation (skip for drawing-linked annotations — drawing is the highlight) */} + {pendingAnnotation.drawingIndex != null + ? null + : pendingAnnotation.multiSelectElements?.length ? // Cmd+shift+click multi-select: show individual boxes with live positions pendingAnnotation.multiSelectElements .filter((el) => document.contains(el)) @@ -4140,8 +5078,10 @@ export function PageFeedbackToolbarCSS({ {/* Edit annotation popup */} {editingAnnotation && ( <> - {/* Show element/area outline while editing */} - {editingAnnotation.elementBoundingBoxes?.length + {/* Show element/area outline while editing (skip for drawing-linked — drawing is the highlight) */} + {editingAnnotation.drawingIndex != null + ? null + : editingAnnotation.elementBoundingBoxes?.length ? // Cmd+shift+click: show individual element boxes (use live rects when available) (() => { // Use live positions from editingTargetElements when available diff --git a/package/src/components/page-toolbar-css/styles.module.scss b/package/src/components/page-toolbar-css/styles.module.scss index ea5102ee..56ab62b8 100644 --- a/package/src/components/page-toolbar-css/styles.module.scss +++ b/package/src/components/page-toolbar-css/styles.module.scss @@ -134,6 +134,17 @@ $green: #34c759; } } +@keyframes tooltipOut { + from { + opacity: 1; + transform: translateX(-50%) translateY(0) scale(0.909); + } + to { + opacity: 0; + transform: translateX(-50%) translateY(2px) scale(0.891); + } +} + @keyframes hoverHighlightIn { from { opacity: 0; @@ -190,7 +201,7 @@ $green: #34c759; position: fixed; bottom: 1.25rem; right: 1.25rem; - width: 297px; + width: 337px; z-index: 100000; font-family: system-ui, @@ -262,10 +273,10 @@ $green: #34c759; height: 44px; border-radius: 1.5rem; padding: 0.375rem; - width: 257px; + width: 297px; &.serverConnected { - width: 297px; + width: 337px; } } } @@ -1007,6 +1018,10 @@ $green: #34c759; &.enter { animation: tooltipIn 0.1s ease-out forwards; } + + &.exit { + animation: tooltipOut 0.1s ease-out forwards; + } } .markerQuote { @@ -2045,6 +2060,27 @@ $green: #34c759; } } +// ============================================================================= +// Draw Canvas +// ============================================================================= + +.drawCanvas { + position: fixed; + inset: 0; + z-index: 99996; // Below markers (99998) and overlay (99997) + // !important needed to override .overlay > * { pointer-events: auto } + pointer-events: none !important; + + &.active { + pointer-events: auto !important; + cursor: crosshair !important; + + &[data-stroke-hover] { + cursor: pointer !important; + } + } +} + // ============================================================================= // Drag Selection // ============================================================================= diff --git a/package/src/process-shim.ts b/package/src/process-shim.ts new file mode 100644 index 00000000..1d85fb26 --- /dev/null +++ b/package/src/process-shim.ts @@ -0,0 +1,11 @@ +const browserGlobal = globalThis as Record; + +if (typeof browserGlobal.process === "undefined") { + browserGlobal.process = { + env: { + NODE_ENV: "production", + }, + }; +} + +export {}; diff --git a/package/src/types.ts b/package/src/types.ts index 08b6ec6c..265d2088 100644 --- a/package/src/types.ts +++ b/package/src/types.ts @@ -27,6 +27,8 @@ export type Annotation = { width: number; height: number; }>; // Individual bounding boxes for multi-select hover highlighting + drawingIndex?: number; // Index of linked drawing stroke (click-to-annotate) + strokeId?: string; // Unique ID of linked drawing stroke // Protocol fields (added when syncing to server) sessionId?: string; diff --git a/package/tsup.config.ts b/package/tsup.config.ts index af6833c8..a7546c0e 100644 --- a/package/tsup.config.ts +++ b/package/tsup.config.ts @@ -82,22 +82,79 @@ export default {}; }; } -export default defineConfig((options) => [ - // React component - { - entry: ["src/index.ts"], - format: ["cjs", "esm"], - dts: true, - splitting: false, - sourcemap: true, - clean: !options.watch, - external: ["react", "react-dom"], - esbuildPlugins: [scssModulesPlugin()], - define: { - __VERSION__: JSON.stringify(VERSION), +export default defineConfig((options) => { + if (!options.watch) { + fs.rmSync("dist", { recursive: true, force: true }); + } + + return [ + // React component + { + entry: ["src/index.ts"], + format: ["cjs", "esm"], + dts: true, + splitting: false, + sourcemap: true, + clean: false, + external: ["react", "react-dom"], + esbuildPlugins: [scssModulesPlugin()], + define: { + __VERSION__: JSON.stringify(VERSION), + "process.env.NODE_ENV": JSON.stringify("production"), + }, + banner: { + js: '"use client";', + }, }, - banner: { - js: '"use client";', + // Browser module API + { + entry: { + browser: "src/browser.tsx", + }, + format: ["cjs", "esm"], + dts: true, + splitting: false, + sourcemap: true, + clean: false, + esbuildPlugins: [scssModulesPlugin()], + define: { + __VERSION__: JSON.stringify(VERSION), + "process.env.NODE_ENV": JSON.stringify("production"), + }, + banner: { + js: '"use client";', + }, + }, + // Script-tag bundle + { + entry: { + agentation: "src/browser.tsx", + }, + format: ["iife"], + globalName: "Agentation", + dts: false, + splitting: false, + sourcemap: false, + minify: true, + clean: false, + esbuildPlugins: [scssModulesPlugin()], + define: { + __VERSION__: JSON.stringify(VERSION), + "process.env.NODE_ENV": JSON.stringify("production"), + }, + outExtension({ format }) { + if (format === "iife") { + return { + js: ".browser.min.js", + }; + } + return { + js: ".js", + }; + }, + banner: { + js: '"use client";', + }, }, - }, -]); + ]; +});