@ewjdev/anyclick-react 1.1.0 → 1.1.1

package/dist/index.js

@@ -773,45 +773,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",
@@ -821,14 +832,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
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1058,6 +1069,17 @@ function ScreenshotPreview({
 
 // src/ContextMenu.tsx
 var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(Flag, { className: "w-4 h-4" }),
   feature: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Plus, { className: "w-4 h-4" }),
@@ -1070,6 +1092,7 @@ function MenuItem({
   hasChildren
 }) {
   const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [isPressed, setIsPressed] = (0, import_react5.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
@@ -1077,11 +1100,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__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: item.icon ?? defaultIcons[item.type] }),
@@ -1099,18 +1136,31 @@ function MenuItem({
 }
 function BackButton({ onClick }) {
   const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [isPressed, setIsPressed] = (0, import_react5.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "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__ */ (0, import_jsx_runtime2.jsx)(ChevronLeft, { className: "w-4 h-4", style: { opacity: 0.5 } }),
@@ -1180,6 +1230,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,
@@ -1192,7 +1261,8 @@ function ContextMenu({
   style,
   className,
   highlightConfig,
-  screenshotConfig
+  screenshotConfig,
+  positionMode = "inView"
 }) {
   const [selectedType, setSelectedType] = (0, import_react5.useState)(null);
   const [currentView, setCurrentView] = (0, import_react5.useState)("menu");
@@ -1201,6 +1271,13 @@ function ContextMenu({
   const [screenshots, setScreenshots] = (0, import_react5.useState)(null);
   const [isCapturing, setIsCapturing] = (0, import_react5.useState)(false);
   const menuRef = (0, import_react5.useRef)(null);
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react5.useState)(position);
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react5.useState)({
+    x: 0,
+    y: 0
+  });
+  const dragStartRef = (0, import_react5.useRef)(null);
   const mergedScreenshotConfig = {
     ...import_anyclick_core2.DEFAULT_SCREENSHOT_CONFIG,
     ...screenshotConfig
@@ -1232,6 +1309,9 @@ function ContextMenu({
       setSubmenuStack([]);
       setScreenshots(null);
       setIsCapturing(false);
+      setIsDragging(false);
+      setDragOffset({ x: 0, y: 0 });
+      dragStartRef.current = null;
     }
   }, [visible]);
   (0, import_react5.useEffect)(() => {
@@ -1252,6 +1332,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();
       }
@@ -1262,24 +1345,71 @@ function ContextMenu({
     };
   }, [visible, onClose]);
   (0, import_react5.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]);
+  (0, import_react5.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]);
+  (0, import_react5.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 = (0, import_react5.useCallback)(
+    (event) => {
+      if (positionMode !== "dynamic") return;
+      event.preventDefault();
+      setIsDragging(true);
+      dragStartRef.current = { x: event.clientX, y: event.clientY };
+    },
+    [positionMode]
+  );
   (0, import_react5.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -1301,6 +1431,23 @@ function ContextMenu({
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
   }, [visible, currentView, submenuStack.length, onClose]);
+  (0, import_react5.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;
   }
@@ -1373,15 +1520,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__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.header, children: "Send Feedback" }),
+        currentView !== "screenshot-preview" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              ...menuStyles.header,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Send Feedback" }),
+              positionMode === "dynamic" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "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__ */ (0, import_jsx_runtime2.jsx)(GripVertical, { className: "w-4 h-4" })
+                }
+              )
+            ]
+          }
+        ),
         currentView === "menu" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: menuStyles.itemList, children: [
           submenuStack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BackButton, { onClick: handleBack }),
           currentItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1422,16 +1615,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
 var import_zustand = require("zustand");
@@ -1577,17 +1760,45 @@ var useProviderStore = (0, import_zustand.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;
     }
   }
@@ -1619,7 +1830,9 @@ function AnyclickProvider({
   highlightConfig,
   screenshotConfig,
   scoped = false,
-  theme
+  theme,
+  touchHoldDurationMs,
+  touchMoveThreshold
 }) {
   const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const [menuVisible, setMenuVisible] = (0, import_react6.useState)(false);
@@ -1666,7 +1879,8 @@ function AnyclickProvider({
     getMergedTheme,
     isDisabledByAncestor,
     findParentProvider,
-    isElementInDisabledScope
+    isElementInDisabledScope,
+    isElementInAnyScopedProvider
   } = useProviderStore();
   const parentId = parentContext?.providerId ?? null;
   const depth = parentContext ? parentContext.scoped ? 1 : 0 : 0;
@@ -1712,6 +1926,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(
@@ -1720,7 +1945,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
           }
         );
       }
@@ -1739,7 +1965,8 @@ function AnyclickProvider({
       getMergedTheme,
       highlightConfig,
       scoped,
-      isElementInDisabledScope
+      isElementInDisabledScope,
+      isElementInAnyScopedProvider
     ]
   );
   (0, import_react6.useLayoutEffect)(() => {
@@ -1820,7 +2047,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;
@@ -1847,7 +2076,9 @@ function AnyclickProvider({
     containerReady,
     providerId,
     isDisabledByAncestor,
-    handleContextMenu
+    handleContextMenu,
+    touchHoldDurationMs,
+    touchMoveThreshold
   ]);
   const submitFeedback = (0, import_react6.useCallback)(
     async (element, type, comment, screenshots) => {
@@ -2043,6 +2274,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: