@ewjdev/anyclick-react 0.1.0 → 1.1.1

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnyclickContext: () => AnyclickContext,
+  AnyclickProvider: () => AnyclickProvider,
   ContextMenu: () => ContextMenu,
   DEFAULT_SCREENSHOT_CONFIG: () => import_anyclick_core4.DEFAULT_SCREENSHOT_CONFIG,
   DEFAULT_SENSITIVE_SELECTORS: () => import_anyclick_core4.DEFAULT_SENSITIVE_SELECTORS,
@@ -34,27 +36,40 @@ __export(index_exports, {
   darkMenuStyles: () => darkMenuStyles,
   defaultContainerSelectors: () => defaultContainerSelectors,
   defaultHighlightColors: () => defaultHighlightColors,
+  dispatchContextMenuEvent: () => dispatchContextMenuEvent,
   estimateTotalSize: () => import_anyclick_core4.estimateTotalSize,
   filterMenuItemsByRole: () => filterMenuItemsByRole,
   findContainerParent: () => findContainerParent,
   formatBytes: () => import_anyclick_core4.formatBytes,
+  generateProviderId: () => generateProviderId,
   highlightContainer: () => highlightContainer,
   highlightTarget: () => highlightTarget,
   isScreenshotSupported: () => import_anyclick_core4.isScreenshotSupported,
+  menuCSSVariables: () => menuCSSVariables,
   menuStyles: () => menuStyles,
-  useFeedback: () => useFeedback
+  useAnyclick: () => useAnyclick,
+  useFeedback: () => useFeedback,
+  useProviderStore: () => useProviderStore
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/FeedbackProvider.tsx
+// src/AnyclickProvider.tsx
 var import_react6 = require("react");
 var import_anyclick_core3 = require("@ewjdev/anyclick-core");
 
 // src/context.ts
 var import_react = require("react");
-var FeedbackContext = (0, import_react.createContext)(null);
+var AnyclickContext = (0, import_react.createContext)(null);
+var FeedbackContext = AnyclickContext;
+function useAnyclick() {
+  const context = (0, import_react.useContext)(AnyclickContext);
+  if (!context) {
+    throw new Error("useAnyclick must be used within an AnyclickProvider");
+  }
+  return context;
+}
 function useFeedback() {
-  const context = (0, import_react.useContext)(FeedbackContext);
+  const context = (0, import_react.useContext)(AnyclickContext);
   if (!context) {
     throw new Error("useFeedback must be used within a FeedbackProvider");
   }
@@ -66,6 +81,25 @@ var import_react5 = require("react");
 var import_anyclick_core2 = require("@ewjdev/anyclick-core");
 
 // src/styles.ts
+var menuCSSVariables = {
+  // Background colors
+  "--anyclick-menu-bg": "#ffffff",
+  "--anyclick-menu-hover": "#f5f5f5",
+  // Text colors
+  "--anyclick-menu-text": "#333333",
+  "--anyclick-menu-text-muted": "#666666",
+  // Border colors
+  "--anyclick-menu-border": "#e5e5e5",
+  // Accent/action colors
+  "--anyclick-menu-accent": "#0066cc",
+  "--anyclick-menu-accent-text": "#ffffff",
+  // Input colors
+  "--anyclick-menu-input-bg": "#ffffff",
+  "--anyclick-menu-input-border": "#dddddd",
+  // Cancel button
+  "--anyclick-menu-cancel-bg": "#f0f0f0",
+  "--anyclick-menu-cancel-text": "#666666"
+};
 var menuStyles = {
   overlay: {
     position: "fixed",
@@ -76,17 +110,19 @@ var menuStyles = {
     position: "fixed",
     zIndex: 9999,
     minWidth: "200px",
-    backgroundColor: "#ffffff",
+    backgroundColor: "var(--anyclick-menu-bg, #ffffff)",
     borderRadius: "8px",
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
     overflow: "hidden",
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    fontSize: "14px"
+    fontSize: "14px",
+    // Set default CSS variables
+    ...menuCSSVariables
   },
   header: {
     padding: "12px 16px",
-    borderBottom: "1px solid #e5e5e5",
-    color: "#666",
+    borderBottom: "1px solid var(--anyclick-menu-border, #e5e5e5)",
+    color: "var(--anyclick-menu-text-muted, #666)",
     fontSize: "12px",
     fontWeight: 500,
     textTransform: "uppercase",
@@ -102,15 +138,15 @@ var menuStyles = {
     padding: "10px 16px",
     cursor: "pointer",
     transition: "background-color 0.15s",
-    color: "#333",
+    color: "var(--anyclick-menu-text, #333)",
     border: "none",
-    background: "none",
+    backgroundColor: "transparent",
     width: "100%",
     textAlign: "left",
     fontSize: "14px"
   },
   itemHover: {
-    backgroundColor: "#f5f5f5"
+    backgroundColor: "var(--anyclick-menu-hover, #f5f5f5)"
   },
   itemIcon: {
     display: "flex",
@@ -122,19 +158,21 @@ var menuStyles = {
   },
   commentSection: {
     padding: "12px 16px",
-    borderTop: "1px solid #e5e5e5"
+    borderTop: "1px solid var(--anyclick-menu-border, #e5e5e5)"
   },
   commentInput: {
     width: "100%",
     minHeight: "60px",
     padding: "8px 12px",
-    border: "1px solid #ddd",
+    border: "1px solid var(--anyclick-menu-input-border, #ddd)",
     borderRadius: "6px",
     fontSize: "14px",
     fontFamily: "inherit",
     resize: "vertical",
     outline: "none",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    backgroundColor: "var(--anyclick-menu-input-bg, #ffffff)",
+    color: "var(--anyclick-menu-text, #333)"
   },
   buttonRow: {
     display: "flex",
@@ -152,15 +190,15 @@ var menuStyles = {
     border: "none"
   },
   cancelButton: {
-    backgroundColor: "#f0f0f0",
-    color: "#666",
+    backgroundColor: "var(--anyclick-menu-cancel-bg, #f0f0f0)",
+    color: "var(--anyclick-menu-cancel-text, #666)",
     display: "flex",
     alignItems: "center",
     gap: "2px"
   },
   submitButton: {
-    backgroundColor: "#0066cc",
-    color: "#ffffff",
+    backgroundColor: "var(--anyclick-menu-accent, #0066cc)",
+    color: "var(--anyclick-menu-accent-text, #ffffff)",
     display: "flex",
     alignItems: "center",
     gap: "2px"
@@ -204,6 +242,242 @@ var darkMenuStyles = {
     color: "#ccc"
   }
 };
+var screenshotPreviewStyles = {
+  container: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  containerExpanded: {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "90vw",
+    maxWidth: "800px",
+    maxHeight: "90vh",
+    backgroundColor: "#fff",
+    borderRadius: "12px",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    padding: "16px",
+    zIndex: 1e4
+  },
+  loadingContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px",
+    padding: "24px"
+  },
+  loadingText: {
+    fontSize: "13px",
+    color: "#6b7280"
+  },
+  emptyContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    padding: "24px"
+  },
+  emptyText: {
+    fontSize: "13px",
+    color: "#6b7280",
+    fontWeight: "500"
+  },
+  emptySubtext: {
+    fontSize: "11px",
+    color: "#9ca3af",
+    textAlign: "center"
+  },
+  emptyActions: {
+    display: "flex",
+    gap: "8px",
+    marginTop: "8px"
+  },
+  retakeButtonOutline: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "8px 12px",
+    fontSize: "12px",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    cursor: "pointer"
+  },
+  continueButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "8px 12px",
+    fontSize: "12px",
+    color: "#fff",
+    backgroundColor: "#3b82f6",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontWeight: "500"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0 4px"
+  },
+  headerTitle: {
+    fontSize: "12px",
+    fontWeight: "600",
+    color: "#374151",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  sizeLabel: {
+    fontSize: "11px",
+    color: "#9ca3af"
+  },
+  iconButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "24px",
+    height: "24px",
+    border: "none",
+    backgroundColor: "transparent",
+    borderRadius: "4px",
+    cursor: "pointer",
+    color: "#6b7280"
+  },
+  tabContainer: {
+    display: "flex",
+    gap: "4px",
+    borderBottom: "1px solid #e5e7eb",
+    paddingBottom: "8px"
+  },
+  tab: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "2px 5px",
+    fontSize: "12px",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  tabActive: {
+    backgroundColor: "#eff6ff",
+    color: "#3b82f6",
+    fontWeight: "500"
+  },
+  tabError: {
+    color: "#ef4444"
+  },
+  tabSize: {
+    fontSize: "10px",
+    color: "#9ca3af"
+  },
+  previewContainer: {
+    position: "relative",
+    width: "100%",
+    height: "150px",
+    backgroundColor: "#f9fafb",
+    borderRadius: "8px",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  previewContainerExpanded: {
+    height: "60vh",
+    maxHeight: "500px"
+  },
+  previewImage: {
+    maxWidth: "100%",
+    maxHeight: "100%",
+    objectFit: "contain"
+  },
+  noPreview: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "12px",
+    color: "#9ca3af"
+  },
+  errorPreview: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    padding: "16px",
+    textAlign: "center"
+  },
+  errorTitle: {
+    fontSize: "14px",
+    fontWeight: "600",
+    color: "#ef4444"
+  },
+  errorMessage: {
+    fontSize: "12px",
+    color: "#6b7280",
+    maxWidth: "250px",
+    lineHeight: "1.4"
+  },
+  dimensionsInfo: {
+    fontSize: "11px",
+    color: "#9ca3af",
+    textAlign: "center"
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingTop: "8px",
+    borderTop: "1px solid #e5e7eb"
+  },
+  actionsRight: {
+    display: "flex",
+    gap: "8px"
+  },
+  retakeButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "8px 16px",
+    fontSize: "13px",
+    color: "#fff",
+    backgroundColor: "#3b82f6",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontWeight: "500"
+  },
+  retakeButtonSmall: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "4px 8px",
+    fontSize: "11px",
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "1px solid #e5e7eb",
+    borderRadius: "4px",
+    cursor: "pointer"
+  }
+};
 
 // src/highlight.ts
 var HIGHLIGHT_TARGET_CLASS = "uifeedback-highlight-target";
@@ -238,7 +512,12 @@ var defaultContainerSelectors = [
   "footer"
 ];
 function generateHighlightCSS(colors) {
-  const { targetColor, containerColor, targetShadowOpacity, containerShadowOpacity } = colors;
+  const {
+    targetColor,
+    containerColor,
+    targetShadowOpacity,
+    containerShadowOpacity
+  } = colors;
   const hexToRgba = (hex, alpha) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     if (!result) return `rgba(0, 0, 0, ${alpha})`;
@@ -246,7 +525,7 @@ function generateHighlightCSS(colors) {
   };
   return `
 .${HIGHLIGHT_TARGET_CLASS} {
-  outline: 2px solid ${targetColor} !important;
+  outline: 2px dashed ${targetColor} !important;
   outline-offset: 2px !important;
   box-shadow: 0 0 0 4px ${hexToRgba(targetColor, targetShadowOpacity)}, 0 4px 12px ${hexToRgba(targetColor, targetShadowOpacity * 0.6)} !important;
   border-radius: 4px !important;
@@ -461,8 +740,16 @@ var ChevronLeft = createLucideIcon("chevron-left", __iconNode3);
 var __iconNode4 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 var ChevronRight = createLucideIcon("chevron-right", __iconNode4);
 
-// ../../node_modules/lucide-react/dist/esm/icons/expand.js
+// ../../node_modules/lucide-react/dist/esm/icons/circle-alert.js
 var __iconNode5 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+var CircleAlert = createLucideIcon("circle-alert", __iconNode5);
+
+// ../../node_modules/lucide-react/dist/esm/icons/expand.js
+var __iconNode6 = [
   ["path", { d: "m15 15 6 6", key: "1s409w" }],
   ["path", { d: "m15 9 6-6", key: "ko1vev" }],
   ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -472,10 +759,10 @@ var __iconNode5 = [
   ["path", { d: "M3 8V3h5", key: "1ln10m" }],
   ["path", { d: "M9 9 3 3", key: "v551iv" }]
 ];
-var Expand = createLucideIcon("expand", __iconNode5);
+var Expand = createLucideIcon("expand", __iconNode6);
 
 // ../../node_modules/lucide-react/dist/esm/icons/flag.js
-var __iconNode6 = [
+var __iconNode7 = [
   [
     "path",
     {
@@ -484,47 +771,58 @@ var __iconNode6 = [
     }
   ]
 ];
-var Flag = createLucideIcon("flag", __iconNode6);
+var Flag = createLucideIcon("flag", __iconNode7);
+
+// ../../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 __iconNode7 = [
+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", __iconNode7);
+var Image = createLucideIcon("image", __iconNode9);
 
 // ../../node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode8 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode8);
+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 __iconNode9 = [
+var __iconNode11 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode9);
+var Plus = createLucideIcon("plus", __iconNode11);
 
 // ../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js
-var __iconNode10 = [
+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", __iconNode10);
+var RefreshCw = createLucideIcon("refresh-cw", __iconNode12);
 
 // ../../node_modules/lucide-react/dist/esm/icons/shrink.js
-var __iconNode11 = [
+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", __iconNode11);
+var Shrink = createLucideIcon("shrink", __iconNode13);
 
 // ../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js
-var __iconNode12 = [
+var __iconNode14 = [
   ["path", { d: "M7 10v12", key: "1qc93n" }],
   [
     "path",
@@ -534,14 +832,14 @@ var __iconNode12 = [
     }
   ]
 ];
-var ThumbsUp = createLucideIcon("thumbs-up", __iconNode12);
+var ThumbsUp = createLucideIcon("thumbs-up", __iconNode14);
 
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode13 = [
+var __iconNode15 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode13);
+var X = createLucideIcon("x", __iconNode15);
 
 // src/ScreenshotPreview.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -556,7 +854,7 @@ function ScreenshotPreview({
   const [activeTab, setActiveTab] = (0, import_react4.useState)("element");
   const [isExpanded, setIsExpanded] = (0, import_react4.useState)(false);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.loadingContainer, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: screenshotPreviewStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.loadingContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         LoaderCircle,
         {
@@ -564,76 +862,117 @@ function ScreenshotPreview({
           style: { color: "#3b82f6" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.loadingText, children: "Capturing screenshots..." })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.loadingText, children: "Capturing screenshots..." })
     ] }) });
   }
   if (!screenshots) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.emptyContainer, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: screenshotPreviewStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.emptyContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Image, { className: "w-8 h-8", style: { color: "#9ca3af" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.emptyText, children: "No screenshots captured" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: onRetake,
-          style: styles.retakeButton,
-          disabled: isSubmitting,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className: "w-4 h-4" }),
-            "Capture Screenshots"
-          ]
-        }
-      )
-    ] }) });
-  }
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.emptyText, children: "Screenshots unavailable" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.emptySubtext, children: "Some elements can't be captured (e.g., gradient text)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.emptyActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onRetake,
+            style: screenshotPreviewStyles.retakeButtonOutline,
+            disabled: isSubmitting,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className: "w-4 h-4" }),
+              "Try Again"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onConfirm({ capturedAt: (/* @__PURE__ */ new Date()).toISOString() }),
+            style: screenshotPreviewStyles.continueButton,
+            disabled: isSubmitting,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "w-4 h-4" }),
+              "Continue Without"
+            ]
+          }
+        )
+      ] })
+    ] }) });
+  }
+  const getError = (key) => {
+    return screenshots.errors?.[key];
+  };
   const allTabs = [
-    { key: "element", label: "Element", data: screenshots.element },
+    {
+      key: "element",
+      label: "Element",
+      data: screenshots.element,
+      error: getError("element")
+    },
     {
       key: "container",
       label: "Container",
-      data: screenshots.container
+      data: screenshots.container,
+      error: getError("container")
     },
-    { key: "viewport", label: "Viewport", data: screenshots.viewport }
+    {
+      key: "viewport",
+      label: "Viewport",
+      data: screenshots.viewport,
+      error: getError("viewport")
+    }
   ];
-  const tabs = allTabs.filter((tab) => tab.data);
+  const tabs = allTabs.filter((tab) => tab.data || tab.error);
   const activeScreenshot = activeTab === "element" ? screenshots.element : activeTab === "container" ? screenshots.container : screenshots.viewport;
+  const activeError = getError(activeTab);
   const totalSize = (0, import_anyclick_core.estimateTotalSize)(screenshots);
+  console.log({ styles: screenshotPreviewStyles });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       style: {
-        ...styles.container,
-        ...isExpanded ? styles.containerExpanded : {}
+        ...screenshotPreviewStyles.container,
+        ...isExpanded ? screenshotPreviewStyles.containerExpanded : {},
+        padding: "8px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.header, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.headerTitle, children: "Screenshot Preview" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.headerActions, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.sizeLabel, children: (0, import_anyclick_core.formatBytes)(totalSize) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.headerTitle, children: "Review Screenshots" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.headerActions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.sizeLabel, children: (0, import_anyclick_core.formatBytes)(totalSize) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setIsExpanded(!isExpanded),
-                style: styles.iconButton,
+                style: screenshotPreviewStyles.iconButton,
                 title: isExpanded ? "Collapse" : "Expand",
                 children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shrink, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Expand, { className: "w-4 h-4" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.tabContainer, children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: screenshotPreviewStyles.tabContainer, children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "button",
           {
             type: "button",
             onClick: () => setActiveTab(tab.key),
             style: {
-              ...styles.tab,
-              ...activeTab === tab.key ? styles.tabActive : {}
+              ...screenshotPreviewStyles.tab,
+              ...activeTab === tab.key ? screenshotPreviewStyles.tabActive : {},
+              ...tab.error && !tab.data ? screenshotPreviewStyles.tabError : {}
             },
             children: [
+              tab.error && !tab.data && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                CircleAlert,
+                {
+                  className: "w-3 h-3",
+                  style: { color: "#ef4444" }
+                }
+              ),
               tab.label,
-              tab.data && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.tabSize, children: (0, import_anyclick_core.formatBytes)(tab.data.sizeBytes) })
+              tab.data && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.tabSize, children: (0, import_anyclick_core.formatBytes)(tab.data.sizeBytes) })
             ]
           },
           tab.key
@@ -642,17 +981,21 @@ function ScreenshotPreview({
           "div",
           {
             style: {
-              ...styles.previewContainer,
-              ...isExpanded ? styles.previewContainerExpanded : {}
+              ...screenshotPreviewStyles.previewContainer,
+              ...isExpanded ? screenshotPreviewStyles.previewContainerExpanded : {}
             },
             children: activeScreenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "img",
               {
                 src: activeScreenshot.dataUrl,
                 alt: `${activeTab} screenshot`,
-                style: styles.previewImage
+                style: screenshotPreviewStyles.previewImage
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.noPreview, children: [
+            ) : activeError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.errorPreview, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, { className: "w-8 h-8", style: { color: "#ef4444" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.errorTitle, children: "Capture Failed" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: screenshotPreviewStyles.errorMessage, children: activeError.message })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.noPreview, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Image, { className: "w-6 h-6", style: { color: "#9ca3af" } }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
                 "No ",
@@ -662,27 +1005,27 @@ function ScreenshotPreview({
             ] })
           }
         ),
-        activeScreenshot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.dimensionsInfo, children: [
+        activeScreenshot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.dimensionsInfo, children: [
           activeScreenshot.width,
           " \xD7 ",
           activeScreenshot.height,
           "px"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.actions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.actions, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "button",
             {
               type: "button",
               onClick: onRetake,
               disabled: isSubmitting,
-              style: styles.retakeButtonSmall,
+              style: screenshotPreviewStyles.retakeButtonSmall,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className: "w-3 h-3" }),
                 "Retake"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.actionsRight, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: screenshotPreviewStyles.actionsRight, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "button",
               {
@@ -723,186 +1066,20 @@ function ScreenshotPreview({
     }
   );
 }
-var styles = {
-  container: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    gap: "8px"
-  },
-  containerExpanded: {
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "90vw",
-    maxWidth: "800px",
-    maxHeight: "90vh",
-    backgroundColor: "#fff",
-    borderRadius: "12px",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-    padding: "16px",
-    zIndex: 1e4
-  },
-  loadingContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    padding: "24px"
-  },
-  loadingText: {
-    fontSize: "13px",
-    color: "#6b7280"
-  },
-  emptyContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "8px",
-    padding: "24px"
-  },
-  emptyText: {
-    fontSize: "13px",
-    color: "#9ca3af"
-  },
-  header: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "0 4px"
-  },
-  headerTitle: {
-    fontSize: "12px",
-    fontWeight: "600",
-    color: "#374151",
-    textTransform: "uppercase",
-    letterSpacing: "0.05em"
-  },
-  headerActions: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px"
-  },
-  sizeLabel: {
-    fontSize: "11px",
-    color: "#9ca3af"
-  },
-  iconButton: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "24px",
-    height: "24px",
-    border: "none",
-    background: "transparent",
-    borderRadius: "4px",
-    cursor: "pointer",
-    color: "#6b7280"
-  },
-  tabContainer: {
-    display: "flex",
-    gap: "4px",
-    borderBottom: "1px solid #e5e7eb",
-    paddingBottom: "8px"
-  },
-  tab: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-    padding: "6px 10px",
-    fontSize: "12px",
-    color: "#6b7280",
-    background: "transparent",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer",
-    transition: "all 0.15s ease"
-  },
-  tabActive: {
-    backgroundColor: "#eff6ff",
-    color: "#3b82f6",
-    fontWeight: "500"
-  },
-  tabSize: {
-    fontSize: "10px",
-    color: "#9ca3af"
-  },
-  previewContainer: {
-    position: "relative",
-    width: "100%",
-    height: "150px",
-    backgroundColor: "#f9fafb",
-    borderRadius: "8px",
-    overflow: "hidden",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  previewContainerExpanded: {
-    height: "60vh",
-    maxHeight: "500px"
-  },
-  previewImage: {
-    maxWidth: "100%",
-    maxHeight: "100%",
-    objectFit: "contain"
-  },
-  noPreview: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "8px",
-    fontSize: "12px",
-    color: "#9ca3af"
-  },
-  dimensionsInfo: {
-    fontSize: "11px",
-    color: "#9ca3af",
-    textAlign: "center"
-  },
-  actions: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingTop: "8px",
-    borderTop: "1px solid #e5e7eb"
-  },
-  actionsRight: {
-    display: "flex",
-    gap: "8px"
-  },
-  retakeButton: {
-    display: "flex",
-    alignItems: "center",
-    gap: "6px",
-    padding: "8px 16px",
-    fontSize: "13px",
-    color: "#fff",
-    backgroundColor: "#3b82f6",
-    border: "none",
-    borderRadius: "6px",
-    cursor: "pointer",
-    fontWeight: "500"
-  },
-  retakeButtonSmall: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-    padding: "4px 8px",
-    fontSize: "11px",
-    color: "#6b7280",
-    backgroundColor: "transparent",
-    border: "1px solid #e5e7eb",
-    borderRadius: "4px",
-    cursor: "pointer"
-  }
-};
 
 // 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" }),
@@ -915,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",
     {
@@ -922,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] }),
@@ -944,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 } }),
@@ -1025,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,
@@ -1037,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");
@@ -1046,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
@@ -1077,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)(() => {
@@ -1097,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();
       }
@@ -1107,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") {
@@ -1146,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;
   }
@@ -1203,6 +1505,14 @@ function ContextMenu({
     captureScreenshots();
   };
   const containerWidth = currentView === "screenshot-preview" ? 360 : void 0;
+  if (process.env.NODE_ENV === "development" && visible) {
+    console.log("[ContextMenu] Style Debug", {
+      styleExists: !!style,
+      styleKeys: style ? Object.keys(style) : [],
+      styleValues: style,
+      className
+    });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -1210,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: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.header, children: currentView === "screenshot-preview" ? "Review Screenshots" : "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)(
@@ -1259,25 +1615,203 @@ function ContextMenu({
     }
   );
 }
-var screenshotIndicatorStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: "6px",
-  padding: "8px 12px",
-  fontSize: "11px",
-  color: "#9ca3af",
-  borderTop: "1px solid #f3f4f6",
-  marginTop: "4px"
-};
 
-// src/FeedbackProvider.tsx
+// src/store.ts
+var import_zustand = require("zustand");
+var providerIdCounter = 0;
+function generateProviderId() {
+  return `anyclick-provider-${++providerIdCounter}`;
+}
+var useProviderStore = (0, import_zustand.create)((set, get) => ({
+  providers: /* @__PURE__ */ new Map(),
+  registerProvider: (provider) => {
+    set((state) => {
+      const newProviders = new Map(state.providers);
+      newProviders.set(provider.id, provider);
+      return { providers: newProviders };
+    });
+  },
+  unregisterProvider: (id) => {
+    set((state) => {
+      const newProviders = new Map(state.providers);
+      newProviders.delete(id);
+      return { providers: newProviders };
+    });
+  },
+  updateProvider: (id, updates) => {
+    set((state) => {
+      const newProviders = new Map(state.providers);
+      const existing = newProviders.get(id);
+      if (existing) {
+        newProviders.set(id, { ...existing, ...updates });
+      }
+      return { providers: newProviders };
+    });
+  },
+  findProvidersForElement: (element) => {
+    const { providers } = get();
+    const matching = [];
+    for (const provider of providers.values()) {
+      if (provider.disabled) continue;
+      const container = provider.containerRef.current;
+      if (provider.scoped && container) {
+        if (container.contains(element)) {
+          matching.push(provider);
+        }
+      } else if (!provider.scoped) {
+        matching.push(provider);
+      }
+    }
+    return matching.sort((a, b) => b.depth - a.depth);
+  },
+  findParentProvider: (container, excludeId) => {
+    const { providers } = get();
+    if (!container) return null;
+    let nearestParent = null;
+    let nearestDepth = -1;
+    for (const provider of providers.values()) {
+      if (provider.id === excludeId) continue;
+      const providerContainer = provider.containerRef.current;
+      if (!providerContainer) continue;
+      if (providerContainer.contains(container)) {
+        if (provider.depth > nearestDepth) {
+          nearestParent = provider;
+          nearestDepth = provider.depth;
+        }
+      }
+    }
+    return nearestParent;
+  },
+  getMergedTheme: (providerId) => {
+    const { providers } = get();
+    const provider = providers.get(providerId);
+    if (!provider) {
+      if (process.env.NODE_ENV === "development") {
+        console.log(`[Store:getMergedTheme] Provider not found: ${providerId}`);
+      }
+      return {};
+    }
+    const ancestors = [];
+    let current = provider;
+    while (current) {
+      ancestors.unshift(current);
+      current = current.parentId ? providers.get(current.parentId) : void 0;
+    }
+    if (process.env.NODE_ENV === "development") {
+      console.log(`[Store:getMergedTheme] Provider: ${providerId}`, {
+        ancestorCount: ancestors.length,
+        ancestorIds: ancestors.map((a) => a.id),
+        providerHasTheme: !!provider.theme,
+        providerThemeMenuStyle: provider.theme?.menuStyle ? Object.keys(provider.theme.menuStyle) : []
+      });
+    }
+    const mergedTheme = {};
+    for (const ancestor of ancestors) {
+      if (ancestor.theme) {
+        Object.assign(mergedTheme, ancestor.theme);
+        if (ancestor.theme.highlightConfig) {
+          mergedTheme.highlightConfig = {
+            ...mergedTheme.highlightConfig,
+            ...ancestor.theme.highlightConfig,
+            colors: {
+              ...mergedTheme.highlightConfig?.colors,
+              ...ancestor.theme.highlightConfig.colors
+            }
+          };
+        }
+        if (ancestor.theme.screenshotConfig) {
+          mergedTheme.screenshotConfig = {
+            ...mergedTheme.screenshotConfig,
+            ...ancestor.theme.screenshotConfig
+          };
+        }
+      }
+    }
+    if (process.env.NODE_ENV === "development") {
+      console.log(`[Store:getMergedTheme] Result for ${providerId}`, {
+        hasMenuStyle: !!mergedTheme.menuStyle,
+        menuStyleKeys: mergedTheme.menuStyle ? Object.keys(mergedTheme.menuStyle) : []
+      });
+    }
+    return mergedTheme;
+  },
+  isDisabledByAncestor: (providerId) => {
+    const { providers } = get();
+    const provider = providers.get(providerId);
+    if (!provider) return false;
+    let current = provider;
+    while (current) {
+      if (current.disabled || current.theme?.disabled) {
+        return true;
+      }
+      current = current.parentId ? providers.get(current.parentId) : void 0;
+    }
+    return false;
+  },
+  isElementInDisabledScope: (element) => {
+    const { providers } = get();
+    for (const provider of providers.values()) {
+      if (!provider.scoped) continue;
+      if (!provider.disabled && !provider.theme?.disabled) continue;
+      const container = provider.containerRef.current;
+      if (!container) continue;
+      if (container.contains(element)) {
+        return true;
+      }
+    }
+    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(menuEvent, element);
+      break;
+    }
+  }
+}
+
+// src/AnyclickProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultMenuItems = [
   { type: "issue", label: "Report an issue", showComment: true },
   { type: "feature", label: "Request a feature", showComment: true },
   { type: "like", label: "I like this!", showComment: false }
 ];
-function FeedbackProvider({
+function AnyclickProvider({
   adapter,
   children,
   targetFilter,
@@ -1294,7 +1828,11 @@ function FeedbackProvider({
   menuClassName,
   disabled = false,
   highlightConfig,
-  screenshotConfig
+  screenshotConfig,
+  scoped = false,
+  theme,
+  touchHoldDurationMs,
+  touchMoveThreshold
 }) {
   const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const [menuVisible, setMenuVisible] = (0, import_react6.useState)(false);
@@ -1303,8 +1841,203 @@ function FeedbackProvider({
   const [containerElement, setContainerElement] = (0, import_react6.useState)(
     null
   );
+  const providerIdRef = (0, import_react6.useRef)(generateProviderId());
+  const providerId = providerIdRef.current;
+  const containerRef = (0, import_react6.useRef)(null);
+  const [containerReady, setContainerReady] = (0, import_react6.useState)(!scoped);
   const clientRef = (0, import_react6.useRef)(null);
+  const setContainerRef = (0, import_react6.useCallback)(
+    (node) => {
+      if (process.env.NODE_ENV === "development") {
+        console.log(`[AnyclickProvider:${providerId}] Container ref callback`, {
+          scoped,
+          nodeReceived: !!node,
+          hadPreviousNode: !!containerRef.current,
+          clientExists: !!clientRef.current
+        });
+      }
+      containerRef.current = node;
+      if (scoped && node) {
+        setContainerReady(true);
+        if (clientRef.current) {
+          clientRef.current.setContainer(node);
+        }
+      }
+    },
+    [scoped, providerId]
+  );
+  let parentContext = null;
+  try {
+    parentContext = useAnyclick();
+  } catch {
+    parentContext = null;
+  }
+  const {
+    registerProvider,
+    unregisterProvider,
+    updateProvider,
+    getMergedTheme,
+    isDisabledByAncestor,
+    findParentProvider,
+    isElementInDisabledScope,
+    isElementInAnyScopedProvider
+  } = useProviderStore();
+  const parentId = parentContext?.providerId ?? null;
+  const depth = parentContext ? parentContext.scoped ? 1 : 0 : 0;
+  const actualDepth = (0, import_react6.useMemo)(() => {
+    if (!parentContext) return 0;
+    let d = 0;
+    let currentId = parentId;
+    const providers = useProviderStore.getState().providers;
+    while (currentId) {
+      d++;
+      const parent = providers.get(currentId);
+      currentId = parent?.parentId ?? null;
+    }
+    return d;
+  }, [parentId]);
+  const isDisabledByTheme = theme === null || theme?.disabled === true;
+  const effectiveDisabled = disabled || isDisabledByTheme;
+  const localTheme = (0, import_react6.useMemo)(() => {
+    if (theme === null) {
+      return { disabled: true };
+    }
+    const explicitThemeProps = {};
+    if (menuStyle) explicitThemeProps.menuStyle = menuStyle;
+    if (menuClassName) explicitThemeProps.menuClassName = menuClassName;
+    if (highlightConfig) explicitThemeProps.highlightConfig = highlightConfig;
+    if (screenshotConfig)
+      explicitThemeProps.screenshotConfig = screenshotConfig;
+    return {
+      ...explicitThemeProps,
+      ...theme
+    };
+  }, [theme, menuStyle, menuClassName, highlightConfig, screenshotConfig]);
+  const handleContextMenu = (0, import_react6.useCallback)(
+    (event, element) => {
+      if (!scoped && isElementInDisabledScope(element)) {
+        if (process.env.NODE_ENV === "development") {
+          console.log(
+            `[AnyclickProvider:${providerId}] Allowing native menu - element is in disabled scope`,
+            {
+              targetTag: element.tagName
+            }
+          );
+        }
+        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(
+          `[AnyclickProvider:${providerId}] handleContextMenu called`,
+          {
+            scoped,
+            targetTag: element.tagName,
+            mergedThemeColors: mergedTheme2.highlightConfig?.colors,
+            position: { x: event.clientX, y: event.clientY },
+            isTouch: event.isTouch
+          }
+        );
+      }
+      setTargetElement(element);
+      const container = findContainerParent(
+        element,
+        mergedTheme2.highlightConfig ?? highlightConfig
+      );
+      setContainerElement(container);
+      setMenuPosition({ x: event.clientX, y: event.clientY });
+      setMenuVisible(true);
+      return true;
+    },
+    [
+      providerId,
+      getMergedTheme,
+      highlightConfig,
+      scoped,
+      isElementInDisabledScope,
+      isElementInAnyScopedProvider
+    ]
+  );
+  (0, import_react6.useLayoutEffect)(() => {
+    const providerInstance = {
+      id: providerId,
+      containerRef,
+      scoped,
+      theme: localTheme,
+      disabled: effectiveDisabled,
+      parentId,
+      depth: actualDepth,
+      onContextMenu: handleContextMenu
+    };
+    registerProvider(providerInstance);
+    return () => {
+      unregisterProvider(providerId);
+    };
+  }, [
+    providerId,
+    scoped,
+    localTheme,
+    effectiveDisabled,
+    parentId,
+    actualDepth,
+    handleContextMenu,
+    registerProvider,
+    unregisterProvider
+  ]);
   (0, import_react6.useEffect)(() => {
+    updateProvider(providerId, {
+      theme: localTheme,
+      disabled: effectiveDisabled,
+      onContextMenu: handleContextMenu
+    });
+  }, [
+    providerId,
+    localTheme,
+    effectiveDisabled,
+    handleContextMenu,
+    updateProvider
+  ]);
+  (0, import_react6.useEffect)(() => {
+    if (isDisabledByAncestor(providerId)) {
+      if (process.env.NODE_ENV === "development") {
+        console.log(
+          `[AnyclickProvider:${providerId}] Skipping - disabled by ancestor`
+        );
+      }
+      return;
+    }
+    if (scoped && !containerReady) {
+      if (process.env.NODE_ENV === "development") {
+        console.log(
+          `[AnyclickProvider:${providerId}] Waiting for container to be ready`,
+          {
+            scoped,
+            containerReady
+          }
+        );
+      }
+      return;
+    }
+    if (process.env.NODE_ENV === "development") {
+      console.log(`[AnyclickProvider:${providerId}] Creating client`, {
+        scoped,
+        containerReady,
+        hasContainer: !!containerRef.current,
+        effectiveDisabled,
+        localThemeColors: localTheme.highlightConfig?.colors
+      });
+    }
     const client = (0, import_anyclick_core3.createFeedbackClient)({
       adapter,
       targetFilter,
@@ -1312,19 +2045,17 @@ function FeedbackProvider({
       maxOuterHTMLLength,
       maxAncestors,
       cooldownMs,
-      stripAttributes
+      stripAttributes,
+      // For scoped providers, pass the container
+      container: scoped ? containerRef.current : null,
+      touchHoldDurationMs,
+      touchMoveThreshold
     });
     client.onSubmitSuccess = onSubmitSuccess;
     client.onSubmitError = onSubmitError;
-    client.onContextMenu = (event, element) => {
-      setTargetElement(element);
-      const container = findContainerParent(element, highlightConfig);
-      setContainerElement(container);
-      setMenuPosition({ x: event.clientX, y: event.clientY });
-      setMenuVisible(true);
-    };
+    client.onContextMenu = handleContextMenu;
     clientRef.current = client;
-    if (!disabled) {
+    if (!effectiveDisabled) {
       client.attach();
     }
     return () => {
@@ -1340,8 +2071,14 @@ function FeedbackProvider({
     stripAttributes,
     onSubmitSuccess,
     onSubmitError,
-    disabled,
-    highlightConfig
+    effectiveDisabled,
+    scoped,
+    containerReady,
+    providerId,
+    isDisabledByAncestor,
+    handleContextMenu,
+    touchHoldDurationMs,
+    touchMoveThreshold
   ]);
   const submitFeedback = (0, import_react6.useCallback)(
     async (element, type, comment, screenshots) => {
@@ -1366,12 +2103,16 @@ function FeedbackProvider({
   const openMenu = (0, import_react6.useCallback)(
     (element, position) => {
       setTargetElement(element);
-      const container = findContainerParent(element, highlightConfig);
+      const mergedTheme2 = getMergedTheme(providerId);
+      const container = findContainerParent(
+        element,
+        mergedTheme2.highlightConfig ?? highlightConfig
+      );
       setContainerElement(container);
       setMenuPosition(position);
       setMenuVisible(true);
     },
-    [highlightConfig]
+    [providerId, getMergedTheme, highlightConfig]
   );
   const closeMenu = (0, import_react6.useCallback)(() => {
     setMenuVisible(false);
@@ -1386,22 +2127,73 @@ function FeedbackProvider({
     },
     [targetElement, submitFeedback]
   );
+  const inheritedTheme = getMergedTheme(providerId);
+  const mergedTheme = (0, import_react6.useMemo)(
+    () => ({
+      ...inheritedTheme,
+      ...localTheme,
+      // Deep merge for nested configs
+      highlightConfig: {
+        ...inheritedTheme.highlightConfig,
+        ...localTheme.highlightConfig,
+        colors: {
+          ...inheritedTheme.highlightConfig?.colors,
+          ...localTheme.highlightConfig?.colors
+        }
+      },
+      screenshotConfig: {
+        ...inheritedTheme.screenshotConfig,
+        ...localTheme.screenshotConfig
+      }
+    }),
+    [inheritedTheme, localTheme]
+  );
+  const effectiveMenuStyle = mergedTheme.menuStyle ?? menuStyle;
+  const effectiveMenuClassName = mergedTheme.menuClassName ?? menuClassName;
+  if (process.env.NODE_ENV === "development") {
+    console.log(`[AnyclickProvider:${providerId}] Theme Debug`, {
+      scoped,
+      localThemeHasMenuStyle: !!localTheme.menuStyle,
+      localThemeMenuStyleKeys: localTheme.menuStyle ? Object.keys(localTheme.menuStyle) : [],
+      mergedThemeHasMenuStyle: !!mergedTheme.menuStyle,
+      mergedThemeMenuStyleKeys: mergedTheme.menuStyle ? Object.keys(mergedTheme.menuStyle) : [],
+      effectiveMenuStyleExists: !!effectiveMenuStyle,
+      effectiveMenuStyleKeys: effectiveMenuStyle ? Object.keys(effectiveMenuStyle) : [],
+      menuStyleProp: !!menuStyle
+    });
+  }
+  const effectiveHighlightConfig = mergedTheme.highlightConfig ?? highlightConfig;
+  const effectiveScreenshotConfig = mergedTheme.screenshotConfig ?? screenshotConfig;
   const contextValue = (0, import_react6.useMemo)(
     () => ({
-      isEnabled: !disabled,
+      isEnabled: !effectiveDisabled && !isDisabledByAncestor(providerId),
       isSubmitting,
       submitFeedback,
       openMenu,
-      closeMenu
+      closeMenu,
+      theme: mergedTheme,
+      scoped,
+      providerId
     }),
-    [disabled, isSubmitting, submitFeedback, openMenu, closeMenu]
+    [
+      effectiveDisabled,
+      providerId,
+      isDisabledByAncestor,
+      isSubmitting,
+      submitFeedback,
+      openMenu,
+      closeMenu,
+      mergedTheme,
+      scoped
+    ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FeedbackContext.Provider, { value: contextValue, children: [
-    children,
+  const content = scoped ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: setContainerRef, style: { display: "contents" }, children }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(AnyclickContext.Provider, { value: contextValue, children: [
+    content,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ContextMenu,
       {
-        visible: menuVisible && !disabled,
+        visible: menuVisible && !effectiveDisabled,
         position: menuPosition,
         targetElement,
         containerElement,
@@ -1409,14 +2201,15 @@ function FeedbackProvider({
         onSelect: handleMenuSelect,
         onClose: closeMenu,
         isSubmitting,
-        style: menuStyle,
-        className: menuClassName,
-        highlightConfig,
-        screenshotConfig
+        style: effectiveMenuStyle,
+        className: effectiveMenuClassName,
+        highlightConfig: effectiveHighlightConfig,
+        screenshotConfig: effectiveScreenshotConfig
       }
     )
   ] });
 }
+var FeedbackProvider = AnyclickProvider;
 
 // src/types.ts
 function filterMenuItemsByRole(items, userContext) {
@@ -1438,6 +2231,8 @@ function filterMenuItemsByRole(items, userContext) {
 var import_anyclick_core4 = require("@ewjdev/anyclick-core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnyclickContext,
+  AnyclickProvider,
   ContextMenu,
   DEFAULT_SCREENSHOT_CONFIG,
   DEFAULT_SENSITIVE_SELECTORS,
@@ -1451,15 +2246,20 @@ var import_anyclick_core4 = require("@ewjdev/anyclick-core");
   darkMenuStyles,
   defaultContainerSelectors,
   defaultHighlightColors,
+  dispatchContextMenuEvent,
   estimateTotalSize,
   filterMenuItemsByRole,
   findContainerParent,
   formatBytes,
+  generateProviderId,
   highlightContainer,
   highlightTarget,
   isScreenshotSupported,
+  menuCSSVariables,
   menuStyles,
-  useFeedback
+  useAnyclick,
+  useFeedback,
+  useProviderStore
 });
 /*! Bundled license information:
 
@@ -1471,8 +2271,10 @@ lucide-react/dist/esm/icons/camera.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-left.js:
 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: