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

package/dist/index.js

@@ -136,9 +136,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 [
@@ -154,55 +152,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] = (0, import_react.useState)(false);
-  const [start, setStart] = (0, import_react.useState)(null);
-  const [current, setCurrent] = (0, import_react.useState)(null);
-  const overlayRef = (0, import_react.useRef)(null);
-  const handleMouseDown = (0, import_react.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 = (0, import_react.useCallback)((e) => {
-    if (!dragging) return;
-    e.preventDefault();
-    setCurrent({ x: e.clientX, y: e.clientY });
-  }, [dragging]);
-  const handleMouseUp = (0, import_react.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 = (0, import_react.useRef)(false);
+  const startRef = (0, import_react.useRef)(null);
+  const isDragRef = (0, import_react.useRef)(false);
+  const [hoverRect, setHoverRect] = (0, import_react.useState)(null);
+  const [selRect, setSelRect] = (0, import_react.useState)(null);
+  const onPickRef = (0, import_react.useRef)(onPick);
+  onPickRef.current = onPick;
+  const onCancelRef = (0, import_react.useRef)(onCancel);
+  onCancelRef.current = onCancel;
+  (0, import_react.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 = (0, import_react.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]);
-  (0, import_react.useEffect)(() => {
     document.addEventListener("mousedown", handleMouseDown, true);
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("mouseup", handleMouseUp, true);
@@ -213,21 +251,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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
-        ref: overlayRef,
         style: {
           position: "fixed",
           top: 0,
@@ -257,12 +285,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__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Esc" }),
           " to cancel."
         ]
       }
     ),
+    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
@@ -623,8 +669,25 @@ function SidePanel({
 // src/components/DraftModal.tsx
 var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var WIDGET_CONTAINER_ID2 = "llm-ui-feedback-root";
 function DraftModal({ pendingContext, addingDraft, onAdd, onCancel }) {
   const [comment, setComment] = (0, import_react4.useState)("");
+  (0, import_react4.useEffect)(() => {
+    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());
@@ -977,7 +1040,7 @@ var import_react6 = require("react");
 var import_meta = {};
 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__ || typeof import_meta !== "undefined" && import_meta.env?.VITE_AUTH_BYPASS === "true";
 function getSessionToken() {
   if (AUTH_BYPASS) return "bypass-token";
   return localStorage.getItem(SESSION_TOKEN_KEY);
@@ -1340,10 +1403,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 });
   }, []);