@ewjdev/anyclick-react 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -9,7 +9,7 @@ import {
   useRef as useRef2,
   useState as useState3
 } from "react";
-import { createFeedbackClient } from "@ewjdev/anyclick-core";
+import { createAnyclickClient } from "@ewjdev/anyclick-core";
 
 // src/context.ts
 import { createContext, useContext } from "react";
@@ -78,16 +78,19 @@ var menuStyles = {
     ...menuCSSVariables
   },
   header: {
-    padding: "12px 16px",
+    padding: "8px 12px",
     borderBottom: "1px solid var(--anyclick-menu-border, #e5e5e5)",
     color: "var(--anyclick-menu-text-muted, #666)",
     fontSize: "12px",
     fontWeight: 500,
     textTransform: "uppercase",
-    letterSpacing: "0.5px"
+    letterSpacing: "0.5px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   itemList: {
-    padding: "4px 0"
+    padding: "0px 0px"
   },
   item: {
     display: "flex",
@@ -489,6 +492,7 @@ function generateHighlightCSS(colors) {
   border-radius: 4px !important;
   position: relative;
   z-index: 9997;
+  top: 0;
 }
 
 .${HIGHLIGHT_CONTAINER_CLASS} {
@@ -731,45 +735,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 +794,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,11 +1031,30 @@ function ScreenshotPreview({
 
 // src/ContextMenu.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VIEWPORT_PADDING = 10;
+var screenshotIndicatorStyle = {
+  display: "flex",
+  marginLeft: "4px",
+  opacity: 0.7,
+  justifyContent: "flex-end",
+  flex: 1
+};
 var defaultIcons = {
   issue: /* @__PURE__ */ jsx2(Flag, { className: "w-4 h-4" }),
   feature: /* @__PURE__ */ jsx2(Plus, { className: "w-4 h-4" }),
   like: /* @__PURE__ */ jsx2(ThumbsUp, { className: "w-4 h-4" })
 };
+var DefaultHeader = ({
+  styles,
+  className,
+  title = "Send Feedback",
+  children
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { style: styles, className, children: [
+    /* @__PURE__ */ jsx2("span", { children: title }),
+    children
+  ] });
+};
 function MenuItem({
   item,
   onClick,
@@ -1028,6 +1062,7 @@ function MenuItem({
   hasChildren
 }) {
   const [isHovered, setIsHovered] = useState2(false);
+  const [isPressed, setIsPressed] = useState2(false);
   return /* @__PURE__ */ jsxs2(
     "button",
     {
@@ -1035,11 +1070,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 +1106,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 +1200,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 +1231,10 @@ function ContextMenu({
   style,
   className,
   highlightConfig,
-  screenshotConfig
+  screenshotConfig,
+  positionMode = "inView",
+  header,
+  footer
 }) {
   const [selectedType, setSelectedType] = useState2(null);
   const [currentView, setCurrentView] = useState2("menu");
@@ -1159,6 +1243,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 +1281,9 @@ function ContextMenu({
       setSubmenuStack([]);
       setScreenshots(null);
       setIsCapturing(false);
+      setIsDragging(false);
+      setDragOffset({ x: 0, y: 0 });
+      dragStartRef.current = null;
     }
   }, [visible]);
   useEffect(() => {
@@ -1210,6 +1304,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 +1317,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,14 +1403,44 @@ 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;
   }
-  const handleItemClick = (item) => {
+  const handleItemClick = async (item) => {
     if (item.children && item.children.length > 0) {
       setSubmenuStack((prev) => [...prev, item.children]);
       return;
     }
+    if (item.onClick) {
+      try {
+        const result = await item.onClick({
+          targetElement,
+          containerElement,
+          closeMenu: onClose
+        });
+        return result;
+      } catch (error) {
+        console.error("Anyclick menu onClick error:", error);
+        return;
+      }
+    }
     if (item.showComment) {
       setSelectedType(item.type);
       setCurrentView("comment");
@@ -1331,15 +1505,51 @@ 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" }),
+        !header && currentView !== "screenshot-preview" && /* @__PURE__ */ jsxs2(DefaultHeader, { styles: menuStyles.header, title: "Send Feedback", children: [
+          showPreview && /* @__PURE__ */ jsx2("div", { style: screenshotIndicatorStyle, children: /* @__PURE__ */ jsx2(Camera, { className: "w-3 h-3" }) }),
+          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" })
+            }
+          )
+        ] }),
+        !!header && header,
         currentView === "menu" && /* @__PURE__ */ jsxs2("div", { style: menuStyles.itemList, children: [
           submenuStack.length > 0 && /* @__PURE__ */ jsx2(BackButton, { onClick: handleBack }),
           currentItems.map((item) => /* @__PURE__ */ jsx2(
@@ -1351,11 +1561,7 @@ function ContextMenu({
               hasChildren: item.children && item.children.length > 0
             },
             item.type
-          )),
-          showPreview && /* @__PURE__ */ jsxs2("div", { style: screenshotIndicatorStyle, children: [
-            /* @__PURE__ */ jsx2(Camera, { className: "w-3 h-3" }),
-            /* @__PURE__ */ jsx2("span", { children: "Screenshots will be captured" })
-          ] })
+          ))
         ] }),
         currentView === "comment" && /* @__PURE__ */ jsx2(
           CommentForm,
@@ -1380,16 +1586,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 +1731,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;
     }
   }
@@ -1575,9 +1799,12 @@ function AnyclickProvider({
   menuClassName,
   disabled = false,
   highlightConfig,
+  header,
   screenshotConfig,
   scoped = false,
-  theme
+  theme,
+  touchHoldDurationMs,
+  touchMoveThreshold
 }) {
   const [isSubmitting, setIsSubmitting] = useState3(false);
   const [menuVisible, setMenuVisible] = useState3(false);
@@ -1624,7 +1851,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 +1898,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 +1917,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 +1937,8 @@ function AnyclickProvider({
       getMergedTheme,
       highlightConfig,
       scoped,
-      isElementInDisabledScope
+      isElementInDisabledScope,
+      isElementInAnyScopedProvider
     ]
   );
   useLayoutEffect(() => {
@@ -1769,7 +2010,7 @@ function AnyclickProvider({
         localThemeColors: localTheme.highlightConfig?.colors
       });
     }
-    const client = createFeedbackClient({
+    const client = createAnyclickClient({
       adapter,
       targetFilter,
       maxInnerTextLength,
@@ -1778,7 +2019,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,15 +2048,17 @@ function AnyclickProvider({
     containerReady,
     providerId,
     isDisabledByAncestor,
-    handleContextMenu
+    handleContextMenu,
+    touchHoldDurationMs,
+    touchMoveThreshold
   ]);
-  const submitFeedback = useCallback2(
+  const submitAnyclick = useCallback2(
     async (element, type, comment, screenshots) => {
       const client = clientRef.current;
       if (!client) return;
       setIsSubmitting(true);
       try {
-        await client.submitFeedback(element, type, {
+        await client.submitAnyclick(element, type, {
           comment,
           metadata,
           screenshots
@@ -1849,10 +2094,10 @@ function AnyclickProvider({
   const handleMenuSelect = useCallback2(
     (type, comment, screenshots) => {
       if (targetElement) {
-        submitFeedback(targetElement, type, comment, screenshots);
+        submitAnyclick(targetElement, type, comment, screenshots);
       }
     },
-    [targetElement, submitFeedback]
+    [targetElement, submitAnyclick]
   );
   const inheritedTheme = getMergedTheme(providerId);
   const mergedTheme = useMemo(
@@ -1895,7 +2140,7 @@ function AnyclickProvider({
     () => ({
       isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
       isSubmitting,
-      submitFeedback,
+      submitAnyclick,
       openMenu,
       closeMenu,
       theme: mergedTheme,
@@ -1907,7 +2152,7 @@ function AnyclickProvider({
       providerId,
       isDisabledByAncestor,
       isSubmitting,
-      submitFeedback,
+      submitAnyclick,
       openMenu,
       closeMenu,
       mergedTheme,
@@ -1931,13 +2176,109 @@ function AnyclickProvider({
         style: effectiveMenuStyle,
         className: effectiveMenuClassName,
         highlightConfig: effectiveHighlightConfig,
-        screenshotConfig: effectiveScreenshotConfig
+        screenshotConfig: effectiveScreenshotConfig,
+        header
       }
     )
   ] });
 }
 var FeedbackProvider = AnyclickProvider;
 
+// src/FunModeBridge.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3 } from "react";
+import {
+  usePointer
+} from "@ewjdev/anyclick-pointer";
+function isFunModeEnabled(theme) {
+  if (!theme) return false;
+  if (theme.funMode === void 0) return false;
+  if (typeof theme.funMode === "boolean") return theme.funMode;
+  return theme.funMode.enabled ?? true;
+}
+function buildFunConfig(theme, container) {
+  const funTheme = typeof theme?.funMode === "object" ? theme.funMode : {};
+  const resolveTrackElement = () => {
+    let el = container;
+    while (el) {
+      const rect = el.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        return el;
+      }
+      el = el.parentElement;
+    }
+    return document.body;
+  };
+  const getTrackElement = () => resolveTrackElement();
+  return {
+    maxSpeed: funTheme.maxSpeed,
+    acceleration: funTheme.acceleration,
+    getTrackElement,
+    getObstacles: () => {
+      const trackElement = getTrackElement();
+      const obstacles = [];
+      const parent = trackElement.parentElement;
+      if (parent) {
+        Array.from(parent.children).forEach((sibling) => {
+          if (sibling !== trackElement) {
+            obstacles.push(sibling.getBoundingClientRect());
+          }
+        });
+      }
+      Array.from(trackElement.children).forEach((child) => {
+        obstacles.push(child.getBoundingClientRect());
+      });
+      return obstacles;
+    }
+  };
+}
+function FunModeBridge() {
+  const { setConfig } = usePointer();
+  const providerStore = useProviderStore();
+  const activeProviderRef = useRef3(null);
+  const cachedConfigs = useRef3({});
+  const findActiveFunProvider = useMemo2(() => {
+    return (el) => {
+      if (!el) return null;
+      const providers = providerStore.findProvidersForElement(el);
+      for (const provider of providers) {
+        if (provider.scoped && !provider.disabled && isFunModeEnabled(provider.theme)) {
+          return provider;
+        }
+      }
+      return null;
+    };
+  }, [providerStore]);
+  useEffect3(() => {
+    const handleMove = (event) => {
+      const el = document.elementFromPoint(event.clientX, event.clientY);
+      const provider = findActiveFunProvider(el);
+      if (!provider || !provider.containerRef.current) {
+        if (activeProviderRef.current !== null) {
+          activeProviderRef.current = null;
+          setConfig({ mode: "normal" });
+        }
+        return;
+      }
+      if (activeProviderRef.current === provider.id) {
+        return;
+      }
+      activeProviderRef.current = provider.id;
+      if (!cachedConfigs.current[provider.id]) {
+        cachedConfigs.current[provider.id] = {
+          mode: "fun",
+          funConfig: buildFunConfig(provider.theme, provider.containerRef.current)
+        };
+      }
+      setConfig(cachedConfigs.current[provider.id]);
+    };
+    window.addEventListener("pointermove", handleMove, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", handleMove);
+    };
+  }, [findActiveFunProvider, setConfig]);
+  return null;
+}
+
 // src/types.ts
 function filterMenuItemsByRole(items, userContext) {
   if (!userContext) {
@@ -1972,6 +2313,7 @@ export {
   DEFAULT_SENSITIVE_SELECTORS,
   FeedbackContext,
   FeedbackProvider,
+  FunModeBridge,
   ScreenshotPreview,
   applyHighlights,
   captureAllScreenshots2 as captureAllScreenshots,
@@ -2008,6 +2350,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: