@ewjdev/anyclick-react 1.1.1 → 1.2.0

package/dist/index.js

@@ -28,6 +28,7 @@ __export(index_exports, {
   DEFAULT_SENSITIVE_SELECTORS: () => import_anyclick_core4.DEFAULT_SENSITIVE_SELECTORS,
   FeedbackContext: () => FeedbackContext,
   FeedbackProvider: () => FeedbackProvider,
+  FunModeBridge: () => FunModeBridge,
   ScreenshotPreview: () => ScreenshotPreview,
   applyHighlights: () => applyHighlights,
   captureAllScreenshots: () => import_anyclick_core4.captureAllScreenshots,
@@ -120,16 +121,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",
@@ -531,6 +535,7 @@ function generateHighlightCSS(colors) {
   border-radius: 4px !important;
   position: relative;
   z-index: 9997;
+  top: 0;
 }
 
 .${HIGHLIGHT_CONTAINER_CLASS} {
@@ -1072,19 +1077,27 @@ 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"
+  marginLeft: "4px",
+  opacity: 0.7,
+  justifyContent: "flex-end",
+  flex: 1
 };
 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" }),
   like: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThumbsUp, { className: "w-4 h-4" })
 };
+var DefaultHeader = ({
+  styles,
+  className,
+  title = "Send Feedback",
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: title }),
+    children
+  ] });
+};
 function MenuItem({
   item,
   onClick,
@@ -1262,7 +1275,9 @@ function ContextMenu({
   className,
   highlightConfig,
   screenshotConfig,
-  positionMode = "inView"
+  positionMode = "inView",
+  header,
+  footer
 }) {
   const [selectedType, setSelectedType] = (0, import_react5.useState)(null);
   const [currentView, setCurrentView] = (0, import_react5.useState)("menu");
@@ -1451,11 +1466,24 @@ function ContextMenu({
   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");
@@ -1536,45 +1564,35 @@ function ContextMenu({
       role: "menu",
       "aria-label": "Feedback options",
       children: [
-        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" })
-                }
-              )
-            ]
-          }
-        ),
+        !header && currentView !== "screenshot-preview" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(DefaultHeader, { styles: menuStyles.header, title: "Send Feedback", children: [
+          showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: screenshotIndicatorStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Camera, { className: "w-3 h-3" }) }),
+          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" })
+            }
+          )
+        ] }),
+        !!header && header,
         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)(
@@ -1586,11 +1604,7 @@ function ContextMenu({
               hasChildren: item.children && item.children.length > 0
             },
             item.type
-          )),
-          showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: screenshotIndicatorStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Camera, { className: "w-3 h-3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Screenshots will be captured" })
-          ] })
+          ))
         ] }),
         currentView === "comment" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           CommentForm,
@@ -1828,6 +1842,7 @@ function AnyclickProvider({
   menuClassName,
   disabled = false,
   highlightConfig,
+  header,
   screenshotConfig,
   scoped = false,
   theme,
@@ -2038,7 +2053,7 @@ function AnyclickProvider({
         localThemeColors: localTheme.highlightConfig?.colors
       });
     }
-    const client = (0, import_anyclick_core3.createFeedbackClient)({
+    const client = (0, import_anyclick_core3.createAnyclickClient)({
       adapter,
       targetFilter,
       maxInnerTextLength,
@@ -2080,13 +2095,13 @@ function AnyclickProvider({
     touchHoldDurationMs,
     touchMoveThreshold
   ]);
-  const submitFeedback = (0, import_react6.useCallback)(
+  const submitAnyclick = (0, import_react6.useCallback)(
     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
@@ -2122,10 +2137,10 @@ function AnyclickProvider({
   const handleMenuSelect = (0, import_react6.useCallback)(
     (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 = (0, import_react6.useMemo)(
@@ -2168,7 +2183,7 @@ function AnyclickProvider({
     () => ({
       isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
       isSubmitting,
-      submitFeedback,
+      submitAnyclick,
       openMenu,
       closeMenu,
       theme: mergedTheme,
@@ -2180,7 +2195,7 @@ function AnyclickProvider({
       providerId,
       isDisabledByAncestor,
       isSubmitting,
-      submitFeedback,
+      submitAnyclick,
       openMenu,
       closeMenu,
       mergedTheme,
@@ -2204,13 +2219,107 @@ function AnyclickProvider({
         style: effectiveMenuStyle,
         className: effectiveMenuClassName,
         highlightConfig: effectiveHighlightConfig,
-        screenshotConfig: effectiveScreenshotConfig
+        screenshotConfig: effectiveScreenshotConfig,
+        header
       }
     )
   ] });
 }
 var FeedbackProvider = AnyclickProvider;
 
+// src/FunModeBridge.tsx
+var import_react7 = require("react");
+var import_anyclick_pointer = require("@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 } = (0, import_anyclick_pointer.usePointer)();
+  const providerStore = useProviderStore();
+  const activeProviderRef = (0, import_react7.useRef)(null);
+  const cachedConfigs = (0, import_react7.useRef)({});
+  const findActiveFunProvider = (0, import_react7.useMemo)(() => {
+    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]);
+  (0, import_react7.useEffect)(() => {
+    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) {
@@ -2238,6 +2347,7 @@ var import_anyclick_core4 = require("@ewjdev/anyclick-core");
   DEFAULT_SENSITIVE_SELECTORS,
   FeedbackContext,
   FeedbackProvider,
+  FunModeBridge,
   ScreenshotPreview,
   applyHighlights,
   captureAllScreenshots,