@ewjdev/anyclick-react 0.1.0 → 1.1.0

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,47 @@ var __iconNode6 = [
     }
   ]
 ];
-var Flag = createLucideIcon("flag", __iconNode6);
+var Flag = createLucideIcon("flag", __iconNode7);
 
 // ../../node_modules/lucide-react/dist/esm/icons/image.js
-var __iconNode7 = [
+var __iconNode8 = [
   ["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", __iconNode8);
 
 // ../../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 __iconNode9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+var LoaderCircle = createLucideIcon("loader-circle", __iconNode9);
 
 // ../../node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode9 = [
+var __iconNode10 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode9);
+var Plus = createLucideIcon("plus", __iconNode10);
 
 // ../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js
-var __iconNode10 = [
+var __iconNode11 = [
   ["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", __iconNode11);
 
 // ../../node_modules/lucide-react/dist/esm/icons/shrink.js
-var __iconNode11 = [
+var __iconNode12 = [
   ["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", __iconNode12);
 
 // ../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js
-var __iconNode12 = [
+var __iconNode13 = [
   ["path", { d: "M7 10v12", key: "1qc93n" }],
   [
     "path",
@@ -534,14 +821,14 @@ var __iconNode12 = [
     }
   ]
 ];
-var ThumbsUp = createLucideIcon("thumbs-up", __iconNode12);
+var ThumbsUp = createLucideIcon("thumbs-up", __iconNode13);
 
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode13 = [
+var __iconNode14 = [
   ["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", __iconNode14);
 
 // src/ScreenshotPreview.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -556,7 +843,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 +851,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"
-          ]
-        }
-      )
-    ] }) });
-  }
-  const allTabs = [
-    { key: "element", label: "Element", data: screenshots.element },
-    {
+      /* @__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,
+      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 +970,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 +994,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,183 +1055,6 @@ 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");
@@ -1203,6 +1358,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",
     {
@@ -1218,7 +1381,7 @@ function ContextMenu({
       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.jsx)("div", { style: menuStyles.header, children: "Send Feedback" }),
         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)(
@@ -1265,19 +1428,179 @@ var screenshotIndicatorStyle = {
   gap: "6px",
   padding: "8px 12px",
   fontSize: "11px",
-  color: "#9ca3af",
-  borderTop: "1px solid #f3f4f6",
+  color: "var(--anyclick-menu-text-muted, #9ca3af)",
+  borderTop: "1px solid var(--anyclick-menu-border, #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;
+  }
+}));
+function dispatchContextMenuEvent(event, element) {
+  const store = useProviderStore.getState();
+  const providers = store.findProvidersForElement(element);
+  for (const provider of providers) {
+    if (store.isDisabledByAncestor(provider.id)) {
+      continue;
+    }
+    if (provider.onContextMenu) {
+      provider.onContextMenu(event, 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 +1617,9 @@ function FeedbackProvider({
   menuClassName,
   disabled = false,
   highlightConfig,
-  screenshotConfig
+  screenshotConfig,
+  scoped = false,
+  theme
 }) {
   const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const [menuVisible, setMenuVisible] = (0, import_react6.useState)(false);
@@ -1303,8 +1628,189 @@ 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
+  } = 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;
+      }
+      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 }
+          }
+        );
+      }
+      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
+    ]
+  );
+  (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 +1818,15 @@ function FeedbackProvider({
       maxOuterHTMLLength,
       maxAncestors,
       cooldownMs,
-      stripAttributes
+      stripAttributes,
+      // For scoped providers, pass the container
+      container: scoped ? containerRef.current : null
     });
     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 +1842,12 @@ function FeedbackProvider({
     stripAttributes,
     onSubmitSuccess,
     onSubmitError,
-    disabled,
-    highlightConfig
+    effectiveDisabled,
+    scoped,
+    containerReady,
+    providerId,
+    isDisabledByAncestor,
+    handleContextMenu
   ]);
   const submitFeedback = (0, import_react6.useCallback)(
     async (element, type, comment, screenshots) => {
@@ -1366,12 +1872,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 +1896,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 +1970,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 +2000,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 +2015,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,6 +2040,7 @@ 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/image.js: