@ewjdev/anyclick-react 1.1.0 → 1.1.1

package/dist/index.mjs

@@ -731,45 +731,56 @@ var __iconNode7 = [
 ];
 var Flag = createLucideIcon("flag", __iconNode7);
 
-// ../../node_modules/lucide-react/dist/esm/icons/image.js
+// ../../node_modules/lucide-react/dist/esm/icons/grip-vertical.js
 var __iconNode8 = [
+  ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
+  ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
+  ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
+  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
+  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
+  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
+];
+var GripVertical = createLucideIcon("grip-vertical", __iconNode8);
+
+// ../../node_modules/lucide-react/dist/esm/icons/image.js
+var __iconNode9 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-var Image = createLucideIcon("image", __iconNode8);
+var Image = createLucideIcon("image", __iconNode9);
 
 // ../../node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode9);
+var __iconNode10 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode10);
 
 // ../../node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode10 = [
+var __iconNode11 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode10);
+var Plus = createLucideIcon("plus", __iconNode11);
 
 // ../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js
-var __iconNode11 = [
+var __iconNode12 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-var RefreshCw = createLucideIcon("refresh-cw", __iconNode11);
+var RefreshCw = createLucideIcon("refresh-cw", __iconNode12);
 
 // ../../node_modules/lucide-react/dist/esm/icons/shrink.js
-var __iconNode12 = [
+var __iconNode13 = [
   ["path", { d: "m15 15 6 6m-6-6v4.8m0-4.8h4.8", key: "17vawe" }],
   ["path", { d: "M9 19.8V15m0 0H4.2M9 15l-6 6", key: "chjx8e" }],
   ["path", { d: "M15 4.2V9m0 0h4.8M15 9l6-6", key: "lav6yq" }],
   ["path", { d: "M9 4.2V9m0 0H4.2M9 9 3 3", key: "1pxi2q" }]
 ];
-var Shrink = createLucideIcon("shrink", __iconNode12);
+var Shrink = createLucideIcon("shrink", __iconNode13);
 
 // ../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js
-var __iconNode13 = [
+var __iconNode14 = [
   ["path", { d: "M7 10v12", key: "1qc93n" }],
   [
     "path",
@@ -779,14 +790,14 @@ var __iconNode13 = [
     }
   ]
 ];
-var ThumbsUp = createLucideIcon("thumbs-up", __iconNode13);
+var ThumbsUp = createLucideIcon("thumbs-up", __iconNode14);
 
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode14 = [
+var __iconNode15 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode14);
+var X = createLucideIcon("x", __iconNode15);
 
 // src/ScreenshotPreview.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1016,6 +1027,17 @@ function ScreenshotPreview({
 
 // src/ContextMenu.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VIEWPORT_PADDING = 10;
+var screenshotIndicatorStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "8px 12px",
+  fontSize: "11px",
+  color: "var(--anyclick-menu-text-muted, #9ca3af)",
+  borderTop: "1px solid var(--anyclick-menu-border, #f3f4f6)",
+  marginTop: "4px"
+};
 var defaultIcons = {
   issue: /* @__PURE__ */ jsx2(Flag, { className: "w-4 h-4" }),
   feature: /* @__PURE__ */ jsx2(Plus, { className: "w-4 h-4" }),
@@ -1028,6 +1050,7 @@ function MenuItem({
   hasChildren
 }) {
   const [isHovered, setIsHovered] = useState2(false);
+  const [isPressed, setIsPressed] = useState2(false);
   return /* @__PURE__ */ jsxs2(
     "button",
     {
@@ -1035,11 +1058,25 @@ function MenuItem({
       onClick,
       disabled,
       onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        setIsPressed(false);
+      },
+      onTouchStart: () => setIsPressed(true),
+      onTouchEnd: () => setIsPressed(false),
+      onTouchCancel: () => setIsPressed(false),
       style: {
         ...menuStyles.item,
-        ...isHovered ? menuStyles.itemHover : {},
-        ...disabled ? { opacity: 0.5, cursor: "not-allowed" } : {}
+        // Apply hover/pressed state for both mouse and touch
+        ...isHovered || isPressed ? menuStyles.itemHover : {},
+        ...disabled ? { opacity: 0.5, cursor: "not-allowed" } : {},
+        // Ensure minimum touch target size (44px is recommended)
+        minHeight: "44px",
+        // Prevent text selection on touch
+        WebkitUserSelect: "none",
+        userSelect: "none",
+        // Prevent touch callout on iOS
+        WebkitTouchCallout: "none"
       },
       children: [
         /* @__PURE__ */ jsx2("span", { style: menuStyles.itemIcon, children: item.icon ?? defaultIcons[item.type] }),
@@ -1057,18 +1094,31 @@ function MenuItem({
 }
 function BackButton({ onClick }) {
   const [isHovered, setIsHovered] = useState2(false);
+  const [isPressed, setIsPressed] = useState2(false);
   return /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
       onClick,
       onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        setIsPressed(false);
+      },
+      onTouchStart: () => setIsPressed(true),
+      onTouchEnd: () => setIsPressed(false),
+      onTouchCancel: () => setIsPressed(false),
       style: {
         ...menuStyles.item,
-        ...isHovered ? menuStyles.itemHover : {},
+        ...isHovered || isPressed ? menuStyles.itemHover : {},
         borderBottom: "1px solid #e5e5e5",
-        marginBottom: "4px"
+        marginBottom: "4px",
+        // Ensure minimum touch target size
+        minHeight: "44px",
+        // Prevent text selection on touch
+        WebkitUserSelect: "none",
+        userSelect: "none",
+        WebkitTouchCallout: "none"
       },
       children: [
         /* @__PURE__ */ jsx2(ChevronLeft, { className: "w-4 h-4", style: { opacity: 0.5 } }),
@@ -1138,6 +1188,25 @@ function CommentForm({
     ] })
   ] });
 }
+function calculateInViewPosition(requestedX, requestedY, menuWidth, menuHeight) {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  let x = requestedX;
+  let y = requestedY;
+  if (x + menuWidth > viewportWidth - VIEWPORT_PADDING) {
+    x = viewportWidth - menuWidth - VIEWPORT_PADDING;
+  }
+  if (x < VIEWPORT_PADDING) {
+    x = VIEWPORT_PADDING;
+  }
+  if (y + menuHeight > viewportHeight - VIEWPORT_PADDING) {
+    y = viewportHeight - menuHeight - VIEWPORT_PADDING;
+  }
+  if (y < VIEWPORT_PADDING) {
+    y = VIEWPORT_PADDING;
+  }
+  return { x, y };
+}
 function ContextMenu({
   visible,
   position,
@@ -1150,7 +1219,8 @@ function ContextMenu({
   style,
   className,
   highlightConfig,
-  screenshotConfig
+  screenshotConfig,
+  positionMode = "inView"
 }) {
   const [selectedType, setSelectedType] = useState2(null);
   const [currentView, setCurrentView] = useState2("menu");
@@ -1159,6 +1229,13 @@ function ContextMenu({
   const [screenshots, setScreenshots] = useState2(null);
   const [isCapturing, setIsCapturing] = useState2(false);
   const menuRef = useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = useState2(position);
+  const [isDragging, setIsDragging] = useState2(false);
+  const [dragOffset, setDragOffset] = useState2({
+    x: 0,
+    y: 0
+  });
+  const dragStartRef = useRef(null);
   const mergedScreenshotConfig = {
     ...DEFAULT_SCREENSHOT_CONFIG,
     ...screenshotConfig
@@ -1190,6 +1267,9 @@ function ContextMenu({
       setSubmenuStack([]);
       setScreenshots(null);
       setIsCapturing(false);
+      setIsDragging(false);
+      setDragOffset({ x: 0, y: 0 });
+      dragStartRef.current = null;
     }
   }, [visible]);
   useEffect(() => {
@@ -1210,6 +1290,9 @@ function ContextMenu({
     const handlePointerDown = (event) => {
       if (!menuRef.current) return;
       const target = event.target;
+      if (target.closest?.("[data-drag-handle]")) {
+        return;
+      }
       if (!menuRef.current.contains(target)) {
         onClose();
       }
@@ -1220,24 +1303,71 @@ function ContextMenu({
     };
   }, [visible, onClose]);
   useEffect(() => {
-    if (visible && menuRef.current) {
-      const rect = menuRef.current.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      let adjustedX = position.x;
-      let adjustedY = position.y;
-      if (position.x + rect.width > viewportWidth) {
-        adjustedX = viewportWidth - rect.width - 10;
-      }
-      if (position.y + rect.height > viewportHeight) {
-        adjustedY = viewportHeight - rect.height - 10;
-      }
-      if (adjustedX !== position.x || adjustedY !== position.y) {
-        menuRef.current.style.left = `${adjustedX}px`;
-        menuRef.current.style.top = `${adjustedY}px`;
+    if (visible) {
+      setAdjustedPosition(position);
+      setDragOffset({ x: 0, y: 0 });
+    }
+  }, [visible, position.x, position.y]);
+  useEffect(() => {
+    if (!visible || !menuRef.current) return;
+    const updatePosition = () => {
+      const menuElement = menuRef.current;
+      if (!menuElement) return;
+      const rect = menuElement.getBoundingClientRect();
+      const baseX = position.x + dragOffset.x;
+      const baseY = position.y + dragOffset.y;
+      if (positionMode === "static") {
+        setAdjustedPosition({ x: baseX, y: baseY });
+      } else if (positionMode === "inView" || positionMode === "dynamic") {
+        const adjusted = calculateInViewPosition(
+          baseX,
+          baseY,
+          rect.width,
+          rect.height
+        );
+        setAdjustedPosition(adjusted);
       }
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    return () => window.removeEventListener("resize", updatePosition);
+  }, [visible, position, positionMode, dragOffset, currentView]);
+  useEffect(() => {
+    if (!visible || positionMode !== "dynamic") return;
+    const handlePointerMove = (event) => {
+      if (!isDragging || !dragStartRef.current) return;
+      const deltaX = event.clientX - dragStartRef.current.x;
+      const deltaY = event.clientY - dragStartRef.current.y;
+      setDragOffset((prev) => ({
+        x: prev.x + deltaX,
+        y: prev.y + deltaY
+      }));
+      dragStartRef.current = { x: event.clientX, y: event.clientY };
+    };
+    const handlePointerUp = () => {
+      setIsDragging(false);
+      dragStartRef.current = null;
+    };
+    if (isDragging) {
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+      document.addEventListener("pointercancel", handlePointerUp);
+      return () => {
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
+        document.removeEventListener("pointercancel", handlePointerUp);
+      };
     }
-  }, [visible, position]);
+  }, [visible, positionMode, isDragging]);
+  const handleDragStart = useCallback(
+    (event) => {
+      if (positionMode !== "dynamic") return;
+      event.preventDefault();
+      setIsDragging(true);
+      dragStartRef.current = { x: event.clientX, y: event.clientY };
+    },
+    [positionMode]
+  );
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -1259,6 +1389,23 @@ function ContextMenu({
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
   }, [visible, currentView, submenuStack.length, onClose]);
+  useEffect(() => {
+    const menuElement = menuRef.current;
+    if (!visible || !menuElement) return;
+    const preventTouchDefault = (e) => {
+      const target = e.target;
+      if (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.isContentEditable) {
+        return;
+      }
+      e.preventDefault();
+    };
+    menuElement.addEventListener("touchmove", preventTouchDefault, {
+      passive: false
+    });
+    return () => {
+      menuElement.removeEventListener("touchmove", preventTouchDefault);
+    };
+  }, [visible]);
   if (!visible || !targetElement) {
     return null;
   }
@@ -1331,15 +1478,61 @@ function ContextMenu({
       className,
       style: {
         ...menuStyles.container,
-        left: position.x,
-        top: position.y,
+        left: adjustedPosition.x,
+        top: adjustedPosition.y,
         ...containerWidth ? { width: containerWidth, minWidth: containerWidth } : {},
+        // Touch-specific styles
+        WebkitUserSelect: "none",
+        userSelect: "none",
+        WebkitTouchCallout: "none",
+        touchAction: "none",
+        // Prevent default touch behaviors
+        // Cursor style for dragging
+        ...isDragging ? { cursor: "grabbing" } : {},
         ...style
       },
       role: "menu",
       "aria-label": "Feedback options",
       children: [
-        currentView !== "screenshot-preview" && /* @__PURE__ */ jsx2("div", { style: menuStyles.header, children: "Send Feedback" }),
+        currentView !== "screenshot-preview" && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              ...menuStyles.header,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { children: "Send Feedback" }),
+              positionMode === "dynamic" && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  "data-drag-handle": true,
+                  onPointerDown: handleDragStart,
+                  style: {
+                    cursor: isDragging ? "grabbing" : "grab",
+                    padding: "4px",
+                    marginRight: "-4px",
+                    borderRadius: "4px",
+                    display: "flex",
+                    alignItems: "center",
+                    opacity: 0.5,
+                    transition: "opacity 0.15s"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.opacity = "0.5";
+                  },
+                  title: "Drag to move",
+                  children: /* @__PURE__ */ jsx2(GripVertical, { className: "w-4 h-4" })
+                }
+              )
+            ]
+          }
+        ),
         currentView === "menu" && /* @__PURE__ */ jsxs2("div", { style: menuStyles.itemList, children: [
           submenuStack.length > 0 && /* @__PURE__ */ jsx2(BackButton, { onClick: handleBack }),
           currentItems.map((item) => /* @__PURE__ */ jsx2(
@@ -1380,16 +1573,6 @@ function ContextMenu({
     }
   );
 }
-var screenshotIndicatorStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: "6px",
-  padding: "8px 12px",
-  fontSize: "11px",
-  color: "var(--anyclick-menu-text-muted, #9ca3af)",
-  borderTop: "1px solid var(--anyclick-menu-border, #f3f4f6)",
-  marginTop: "4px"
-};
 
 // src/store.ts
 import { create } from "zustand";
@@ -1535,17 +1718,45 @@ var useProviderStore = create((set, get) => ({
       }
     }
     return false;
+  },
+  isElementInAnyScopedProvider: (element) => {
+    const { providers } = get();
+    for (const provider of providers.values()) {
+      if (!provider.scoped) continue;
+      const container = provider.containerRef.current;
+      if (!container) continue;
+      if (container.contains(element)) {
+        if (process.env.NODE_ENV === "development") {
+          console.log(
+            `[Store:isElementInAnyScopedProvider] Element is in scoped provider: ${provider.id}`,
+            {
+              elementTag: element.tagName,
+              providerId: provider.id,
+              providerDisabled: provider.disabled
+            }
+          );
+        }
+        return true;
+      }
+    }
+    return false;
   }
 }));
 function dispatchContextMenuEvent(event, element) {
   const store = useProviderStore.getState();
   const providers = store.findProvidersForElement(element);
+  const menuEvent = {
+    clientX: event.clientX,
+    clientY: event.clientY,
+    originalEvent: event,
+    isTouch: false
+  };
   for (const provider of providers) {
     if (store.isDisabledByAncestor(provider.id)) {
       continue;
     }
     if (provider.onContextMenu) {
-      provider.onContextMenu(event, element);
+      provider.onContextMenu(menuEvent, element);
       break;
     }
   }
@@ -1577,7 +1788,9 @@ function AnyclickProvider({
   highlightConfig,
   screenshotConfig,
   scoped = false,
-  theme
+  theme,
+  touchHoldDurationMs,
+  touchMoveThreshold
 }) {
   const [isSubmitting, setIsSubmitting] = useState3(false);
   const [menuVisible, setMenuVisible] = useState3(false);
@@ -1624,7 +1837,8 @@ function AnyclickProvider({
     getMergedTheme,
     isDisabledByAncestor,
     findParentProvider,
-    isElementInDisabledScope
+    isElementInDisabledScope,
+    isElementInAnyScopedProvider
   } = useProviderStore();
   const parentId = parentContext?.providerId ?? null;
   const depth = parentContext ? parentContext.scoped ? 1 : 0 : 0;
@@ -1670,6 +1884,17 @@ function AnyclickProvider({
         }
         return false;
       }
+      if (!scoped && event.isTouch && isElementInAnyScopedProvider(element)) {
+        if (process.env.NODE_ENV === "development") {
+          console.log(
+            `[AnyclickProvider:${providerId}] Deferring to scoped provider for touch event`,
+            {
+              targetTag: element.tagName
+            }
+          );
+        }
+        return false;
+      }
       const mergedTheme2 = getMergedTheme(providerId);
       if (process.env.NODE_ENV === "development") {
         console.log(
@@ -1678,7 +1903,8 @@ function AnyclickProvider({
             scoped,
             targetTag: element.tagName,
             mergedThemeColors: mergedTheme2.highlightConfig?.colors,
-            position: { x: event.clientX, y: event.clientY }
+            position: { x: event.clientX, y: event.clientY },
+            isTouch: event.isTouch
           }
         );
       }
@@ -1697,7 +1923,8 @@ function AnyclickProvider({
       getMergedTheme,
       highlightConfig,
       scoped,
-      isElementInDisabledScope
+      isElementInDisabledScope,
+      isElementInAnyScopedProvider
     ]
   );
   useLayoutEffect(() => {
@@ -1778,7 +2005,9 @@ function AnyclickProvider({
       cooldownMs,
       stripAttributes,
       // For scoped providers, pass the container
-      container: scoped ? containerRef.current : null
+      container: scoped ? containerRef.current : null,
+      touchHoldDurationMs,
+      touchMoveThreshold
     });
     client.onSubmitSuccess = onSubmitSuccess;
     client.onSubmitError = onSubmitError;
@@ -1805,7 +2034,9 @@ function AnyclickProvider({
     containerReady,
     providerId,
     isDisabledByAncestor,
-    handleContextMenu
+    handleContextMenu,
+    touchHoldDurationMs,
+    touchMoveThreshold
   ]);
   const submitFeedback = useCallback2(
     async (element, type, comment, screenshots) => {
@@ -2008,6 +2239,7 @@ lucide-react/dist/esm/icons/chevron-right.js:
 lucide-react/dist/esm/icons/circle-alert.js:
 lucide-react/dist/esm/icons/expand.js:
 lucide-react/dist/esm/icons/flag.js:
+lucide-react/dist/esm/icons/grip-vertical.js:
 lucide-react/dist/esm/icons/image.js:
 lucide-react/dist/esm/icons/loader-circle.js:
 lucide-react/dist/esm/icons/plus.js: