@david-xpn/llm-ui-feedback 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/FeedbackWidget.tsx
-import { useReducer, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
+import { useReducer, useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/color.ts
@@ -89,7 +89,7 @@ function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, pos
 }
 
 // src/components/PickOverlay.tsx
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var WIDGET_CONTAINER_ID = "llm-ui-feedback-root";
 function getElementsBeneathRect(rect) {
@@ -100,9 +100,7 @@ function getElementsBeneathRect(rect) {
   for (let x = rect.x; x <= rect.x + rect.width; x += step) {
     for (let y = rect.y; y <= rect.y + rect.height; y += step) {
       const el = document.elementFromPoint(x, y);
-      if (el && !seen.has(el)) {
-        seen.add(el);
-      }
+      if (el && !seen.has(el)) seen.add(el);
     }
   }
   for (const [x, y] of [
@@ -118,55 +116,95 @@ function getElementsBeneathRect(rect) {
   if (container) container.style.display = "";
   return Array.from(seen).filter((el) => !container?.contains(el));
 }
+function getElementAtPoint(x, y) {
+  const container = document.getElementById(WIDGET_CONTAINER_ID);
+  if (container) container.style.display = "none";
+  const el = document.elementFromPoint(x, y);
+  if (container) container.style.display = "";
+  if (el && container?.contains(el)) return null;
+  return el;
+}
+var DRAG_THRESHOLD = 10;
 function PickOverlay({ onPick, onCancel }) {
-  const [dragging, setDragging] = useState(false);
-  const [start, setStart] = useState(null);
-  const [current, setCurrent] = useState(null);
-  const overlayRef = useRef(null);
-  const handleMouseDown = useCallback((e) => {
-    if (e.button !== 0) return;
-    e.preventDefault();
-    e.stopPropagation();
-    setStart({ x: e.clientX, y: e.clientY });
-    setCurrent({ x: e.clientX, y: e.clientY });
-    setDragging(true);
-  }, []);
-  const handleMouseMove = useCallback((e) => {
-    if (!dragging) return;
-    e.preventDefault();
-    setCurrent({ x: e.clientX, y: e.clientY });
-  }, [dragging]);
-  const handleMouseUp = useCallback((e) => {
-    if (!dragging || !start) return;
-    e.preventDefault();
-    e.stopPropagation();
-    setDragging(false);
-    const endX = e.clientX;
-    const endY = e.clientY;
-    const x = Math.min(start.x, endX);
-    const y = Math.min(start.y, endY);
-    const width = Math.abs(endX - start.x);
-    const height = Math.abs(endY - start.y);
-    if (width < 10 || height < 10) {
-      setStart(null);
-      setCurrent(null);
-      return;
+  const activeRef = useRef(false);
+  const startRef = useRef(null);
+  const isDragRef = useRef(false);
+  const [hoverRect, setHoverRect] = useState(null);
+  const [selRect, setSelRect] = useState(null);
+  const onPickRef = useRef(onPick);
+  onPickRef.current = onPick;
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  useEffect(() => {
+    function handleMouseMove(e) {
+      if (activeRef.current && startRef.current) {
+        const dx = Math.abs(e.clientX - startRef.current.x);
+        const dy = Math.abs(e.clientY - startRef.current.y);
+        if (dx >= DRAG_THRESHOLD || dy >= DRAG_THRESHOLD) {
+          isDragRef.current = true;
+        }
+        if (isDragRef.current) {
+          setHoverRect(null);
+          setSelRect({
+            left: Math.min(startRef.current.x, e.clientX),
+            top: Math.min(startRef.current.y, e.clientY),
+            width: Math.abs(e.clientX - startRef.current.x),
+            height: Math.abs(e.clientY - startRef.current.y)
+          });
+        }
+        e.preventDefault();
+      } else {
+        const el = getElementAtPoint(e.clientX, e.clientY);
+        if (el) {
+          const r = el.getBoundingClientRect();
+          setHoverRect({ x: r.left, y: r.top, width: r.width, height: r.height });
+        } else {
+          setHoverRect(null);
+        }
+      }
     }
-    const rect = { x, y, width, height };
-    const elements = getElementsBeneathRect(rect);
-    setStart(null);
-    setCurrent(null);
-    onPick(rect, elements);
-  }, [dragging, start, onPick]);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Escape") {
-      setDragging(false);
-      setStart(null);
-      setCurrent(null);
-      onCancel();
+    function handleMouseDown(e) {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      e.stopPropagation();
+      startRef.current = { x: e.clientX, y: e.clientY };
+      isDragRef.current = false;
+      activeRef.current = true;
+    }
+    function handleMouseUp(e) {
+      if (!activeRef.current || !startRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const start = startRef.current;
+      activeRef.current = false;
+      startRef.current = null;
+      setSelRect(null);
+      setHoverRect(null);
+      if (!isDragRef.current) {
+        const el = getElementAtPoint(e.clientX, e.clientY);
+        if (el) {
+          const r = el.getBoundingClientRect();
+          onPickRef.current({ x: r.left, y: r.top, width: r.width, height: r.height }, [el]);
+        }
+        return;
+      }
+      const x = Math.min(start.x, e.clientX);
+      const y = Math.min(start.y, e.clientY);
+      const width = Math.abs(e.clientX - start.x);
+      const height = Math.abs(e.clientY - start.y);
+      const rect = { x, y, width, height };
+      const elements = getElementsBeneathRect(rect);
+      onPickRef.current(rect, elements);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        activeRef.current = false;
+        startRef.current = null;
+        setSelRect(null);
+        setHoverRect(null);
+        onCancelRef.current();
+      }
     }
-  }, [onCancel]);
-  useEffect(() => {
     document.addEventListener("mousedown", handleMouseDown, true);
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("mouseup", handleMouseUp, true);
@@ -177,21 +215,11 @@ function PickOverlay({ onPick, onCancel }) {
       document.removeEventListener("mouseup", handleMouseUp, true);
       document.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [handleMouseDown, handleMouseMove, handleMouseUp, handleKeyDown]);
-  let selRect = null;
-  if (start && current && dragging) {
-    selRect = {
-      left: Math.min(start.x, current.x),
-      top: Math.min(start.y, current.y),
-      width: Math.abs(current.x - start.x),
-      height: Math.abs(current.y - start.y)
-    };
-  }
+  }, []);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       "div",
       {
-        ref: overlayRef,
         style: {
           position: "fixed",
           top: 0,
@@ -221,12 +249,30 @@ function PickOverlay({ onPick, onCancel }) {
           pointerEvents: "none"
         },
         children: [
-          "Drag to select an area for feedback. Press ",
+          "Click an element or drag to select an area. Press ",
           /* @__PURE__ */ jsx2("strong", { children: "Esc" }),
           " to cancel."
         ]
       }
     ),
+    hoverRect && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: hoverRect.x,
+          top: hoverRect.y,
+          width: hoverRect.width,
+          height: hoverRect.height,
+          border: "2px solid #3b82f6",
+          background: "rgba(59, 130, 246, 0.08)",
+          zIndex: 99998,
+          pointerEvents: "none",
+          borderRadius: 2,
+          transition: "all 0.1s ease-out"
+        }
+      }
+    ),
     selRect && /* @__PURE__ */ jsx2(
       "div",
       {
@@ -585,10 +631,27 @@ function SidePanel({
 }
 
 // src/components/DraftModal.tsx
-import { useState as useState4 } from "react";
+import { useState as useState4, useEffect as useEffect2 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var WIDGET_CONTAINER_ID2 = "llm-ui-feedback-root";
 function DraftModal({ pendingContext, addingDraft, onAdd, onCancel }) {
   const [comment, setComment] = useState4("");
+  useEffect2(() => {
+    const container = document.getElementById(WIDGET_CONTAINER_ID2);
+    const inerted = [];
+    for (const child of Array.from(document.body.children)) {
+      if (child === container || child.id === WIDGET_CONTAINER_ID2) continue;
+      if (!child.hasAttribute("inert")) {
+        child.setAttribute("inert", "");
+        inerted.push(child);
+      }
+    }
+    return () => {
+      for (const el of inerted) {
+        el.removeAttribute("inert");
+      }
+    };
+  }, []);
   const handleAdd = () => {
     if (comment.trim() && !addingDraft) {
       onAdd(comment.trim());
@@ -937,10 +1000,10 @@ function dataUrlToBlob(dataUrl) {
 }
 
 // src/hooks/useSession.ts
-import { useState as useState6, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useState as useState6, useEffect as useEffect3, useCallback as useCallback2, useRef as useRef2 } from "react";
 var SESSION_TOKEN_KEY = "llm_feedback_session_token";
 var USER_KEY = "llm_feedback_user";
-var AUTH_BYPASS = typeof import.meta !== "undefined" && import.meta.env?.VITE_AUTH_BYPASS === "true";
+var AUTH_BYPASS = !!(typeof globalThis !== "undefined" && globalThis.__FEEDBACK_AUTH_BYPASS__);
 function getSessionToken() {
   if (AUTH_BYPASS) return "bypass-token";
   return localStorage.getItem(SESSION_TOKEN_KEY);
@@ -955,7 +1018,7 @@ function useSession(apiUrl, clientId) {
   const [status, setStatus] = useState6(AUTH_BYPASS ? "authenticated" : "loading");
   const [user, setUser] = useState6(AUTH_BYPASS ? BYPASS_USER : null);
   const pendingAuthRef = useRef2(false);
-  useEffect2(() => {
+  useEffect3(() => {
     if (AUTH_BYPASS) return;
     let cancelled = false;
     async function checkSession() {
@@ -996,7 +1059,7 @@ function useSession(apiUrl, clientId) {
       cancelled = true;
     };
   }, [apiUrl]);
-  useEffect2(() => {
+  useEffect3(() => {
     function handleMessage(event) {
       if (event.data?.type !== "feedback-auth") return;
       const { sessionToken, user: userData } = event.data;
@@ -1229,13 +1292,13 @@ function FeedbackWidget({
     () => createApiClient(apiUrl, clientId),
     [apiUrl, clientId]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (session.status === "authenticated" && pendingOpenRef.current) {
       pendingOpenRef.current = false;
       dispatch({ type: "OPEN_PANEL" });
     }
   }, [session.status]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (session.status === "authenticated") {
       api.fetchDrafts().then((drafts) => {
         dispatch({ type: "SET_DRAFTS", drafts });
@@ -1243,7 +1306,7 @@ function FeedbackWidget({
       });
     }
   }, [state.panelOpen, session.status, api]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!hotkey) return;
     const parsed = parseHotkey(hotkey);
     function handler(e) {
@@ -1303,10 +1366,13 @@ function FeedbackWidget({
       clickX: centerX,
       clickY: centerY
     };
+    const isDrag = rect.width > 20 && rect.height > 20;
     let screenshot = null;
-    try {
-      screenshot = await captureScreenshot(rect);
-    } catch {
+    if (isDrag) {
+      try {
+        screenshot = await captureScreenshot(rect);
+      } catch {
+      }
     }
     dispatch({ type: "ELEMENT_PICKED", context, screenshot });
   }, []);