@ewjdev/anyclick-react 0.1.0

package/dist/index.js

@@ -0,0 +1,1491 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ContextMenu: () => ContextMenu,
+  DEFAULT_SCREENSHOT_CONFIG: () => import_anyclick_core4.DEFAULT_SCREENSHOT_CONFIG,
+  DEFAULT_SENSITIVE_SELECTORS: () => import_anyclick_core4.DEFAULT_SENSITIVE_SELECTORS,
+  FeedbackContext: () => FeedbackContext,
+  FeedbackProvider: () => FeedbackProvider,
+  ScreenshotPreview: () => ScreenshotPreview,
+  applyHighlights: () => applyHighlights,
+  captureAllScreenshots: () => import_anyclick_core4.captureAllScreenshots,
+  captureScreenshot: () => import_anyclick_core4.captureScreenshot,
+  clearHighlights: () => clearHighlights,
+  darkMenuStyles: () => darkMenuStyles,
+  defaultContainerSelectors: () => defaultContainerSelectors,
+  defaultHighlightColors: () => defaultHighlightColors,
+  estimateTotalSize: () => import_anyclick_core4.estimateTotalSize,
+  filterMenuItemsByRole: () => filterMenuItemsByRole,
+  findContainerParent: () => findContainerParent,
+  formatBytes: () => import_anyclick_core4.formatBytes,
+  highlightContainer: () => highlightContainer,
+  highlightTarget: () => highlightTarget,
+  isScreenshotSupported: () => import_anyclick_core4.isScreenshotSupported,
+  menuStyles: () => menuStyles,
+  useFeedback: () => useFeedback
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FeedbackProvider.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);
+function useFeedback() {
+  const context = (0, import_react.useContext)(FeedbackContext);
+  if (!context) {
+    throw new Error("useFeedback must be used within a FeedbackProvider");
+  }
+  return context;
+}
+
+// src/ContextMenu.tsx
+var import_react5 = require("react");
+var import_anyclick_core2 = require("@ewjdev/anyclick-core");
+
+// src/styles.ts
+var menuStyles = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 9998
+  },
+  container: {
+    position: "fixed",
+    zIndex: 9999,
+    minWidth: "200px",
+    backgroundColor: "#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"
+  },
+  header: {
+    padding: "12px 16px",
+    borderBottom: "1px solid #e5e5e5",
+    color: "#666",
+    fontSize: "12px",
+    fontWeight: 500,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  itemList: {
+    padding: "4px 0"
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "10px 16px",
+    cursor: "pointer",
+    transition: "background-color 0.15s",
+    color: "#333",
+    border: "none",
+    background: "none",
+    width: "100%",
+    textAlign: "left",
+    fontSize: "14px"
+  },
+  itemHover: {
+    backgroundColor: "#f5f5f5"
+  },
+  itemIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "20px",
+    height: "20px",
+    fontSize: "16px"
+  },
+  commentSection: {
+    padding: "12px 16px",
+    borderTop: "1px solid #e5e5e5"
+  },
+  commentInput: {
+    width: "100%",
+    minHeight: "60px",
+    padding: "8px 12px",
+    border: "1px solid #ddd",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontFamily: "inherit",
+    resize: "vertical",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  buttonRow: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    marginTop: "8px"
+  },
+  button: {
+    padding: "6px 12px",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "background-color 0.15s, opacity 0.15s",
+    border: "none"
+  },
+  cancelButton: {
+    backgroundColor: "#f0f0f0",
+    color: "#666",
+    display: "flex",
+    alignItems: "center",
+    gap: "2px"
+  },
+  submitButton: {
+    backgroundColor: "#0066cc",
+    color: "#ffffff",
+    display: "flex",
+    alignItems: "center",
+    gap: "2px"
+  },
+  submitButtonDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  }
+};
+var darkMenuStyles = {
+  container: {
+    ...menuStyles.container,
+    backgroundColor: "#1a1a1a",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)"
+  },
+  header: {
+    ...menuStyles.header,
+    borderBottom: "1px solid #333",
+    color: "#888"
+  },
+  item: {
+    ...menuStyles.item,
+    color: "#e0e0e0"
+  },
+  itemHover: {
+    backgroundColor: "#2a2a2a"
+  },
+  commentSection: {
+    ...menuStyles.commentSection,
+    borderTop: "1px solid #333"
+  },
+  commentInput: {
+    ...menuStyles.commentInput,
+    backgroundColor: "#2a2a2a",
+    border: "1px solid #444",
+    color: "#e0e0e0"
+  },
+  cancelButton: {
+    ...menuStyles.cancelButton,
+    backgroundColor: "#333",
+    color: "#ccc"
+  }
+};
+
+// src/highlight.ts
+var HIGHLIGHT_TARGET_CLASS = "uifeedback-highlight-target";
+var HIGHLIGHT_CONTAINER_CLASS = "uifeedback-highlight-container";
+var STYLE_ID = "uifeedback-highlight-styles";
+var defaultHighlightColors = {
+  targetColor: "#3b82f6",
+  containerColor: "#8b5cf6",
+  targetShadowOpacity: 0.25,
+  containerShadowOpacity: 0.1
+};
+var defaultContainerSelectors = [
+  ".container",
+  ".card",
+  ".panel",
+  ".section",
+  ".wrapper",
+  ".box",
+  ".modal",
+  ".dialog",
+  ".drawer",
+  '[role="dialog"]',
+  '[role="region"]',
+  '[role="article"]',
+  '[role="main"]',
+  "article",
+  "section",
+  "main",
+  "aside",
+  "nav",
+  "header",
+  "footer"
+];
+function generateHighlightCSS(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})`;
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
+  };
+  return `
+.${HIGHLIGHT_TARGET_CLASS} {
+  outline: 2px solid ${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;
+  position: relative;
+  z-index: 9997;
+}
+
+.${HIGHLIGHT_CONTAINER_CLASS} {
+  outline: 2px dashed ${hexToRgba(containerColor, 0.6)} !important;
+  outline-offset: 4px !important;
+  box-shadow: 0 0 0 6px ${hexToRgba(containerColor, containerShadowOpacity)} !important;
+  border-radius: 6px !important;
+  position: relative;
+  z-index: 9996;
+}
+`;
+}
+function injectStyles(colors) {
+  if (typeof document === "undefined") return;
+  const existingStyle = document.getElementById(STYLE_ID);
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = generateHighlightCSS(colors);
+  document.head.appendChild(style);
+}
+function findContainerParent(element, config) {
+  const containerSelectors = config?.containerSelectors ?? defaultContainerSelectors;
+  const minChildren = config?.minChildrenForContainer ?? 2;
+  let current = element.parentElement;
+  let fallbackContainer = null;
+  while (current && current !== document.body) {
+    for (const selector of containerSelectors) {
+      try {
+        if (current.matches(selector)) {
+          return current;
+        }
+      } catch {
+      }
+    }
+    const meaningfulChildren = Array.from(current.children).filter((child) => {
+      const tag = child.tagName.toLowerCase();
+      if (tag === "script" || tag === "style" || tag === "noscript") {
+        return false;
+      }
+      const style = window.getComputedStyle(child);
+      if (style.display === "none" || style.visibility === "hidden") {
+        return false;
+      }
+      return true;
+    });
+    if (meaningfulChildren.length >= minChildren && !fallbackContainer) {
+      fallbackContainer = current;
+    }
+    if (meaningfulChildren.length >= 3) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return fallbackContainer;
+}
+function highlightTarget(element, colors) {
+  const mergedColors = { ...defaultHighlightColors, ...colors };
+  injectStyles(mergedColors);
+  element.classList.add(HIGHLIGHT_TARGET_CLASS);
+}
+function highlightContainer(element, colors) {
+  const mergedColors = { ...defaultHighlightColors, ...colors };
+  injectStyles(mergedColors);
+  element.classList.add(HIGHLIGHT_CONTAINER_CLASS);
+}
+function clearHighlights() {
+  if (typeof document === "undefined") return;
+  document.querySelectorAll(`.${HIGHLIGHT_TARGET_CLASS}`).forEach((el) => {
+    el.classList.remove(HIGHLIGHT_TARGET_CLASS);
+  });
+  document.querySelectorAll(`.${HIGHLIGHT_CONTAINER_CLASS}`).forEach((el) => {
+    el.classList.remove(HIGHLIGHT_CONTAINER_CLASS);
+  });
+}
+function applyHighlights(targetElement, config) {
+  if (config?.enabled === false) {
+    return { target: targetElement, container: null };
+  }
+  clearHighlights();
+  const colors = { ...defaultHighlightColors, ...config?.colors };
+  highlightTarget(targetElement, colors);
+  const container = findContainerParent(targetElement, config);
+  if (container && container !== targetElement) {
+    highlightContainer(container, colors);
+  }
+  return { target: targetElement, container };
+}
+
+// src/ScreenshotPreview.tsx
+var import_react4 = require("react");
+var import_anyclick_core = require("@ewjdev/anyclick-core");
+
+// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+var import_react3 = require("react");
+
+// ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+var import_react2 = require("react");
+
+// ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+var Icon = (0, import_react2.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => (0, import_react2.createElement)(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = (0, import_react3.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react3.createElement)(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+// ../../node_modules/lucide-react/dist/esm/icons/camera.js
+var __iconNode = [
+  [
+    "path",
+    {
+      d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",
+      key: "18u6gg"
+    }
+  ],
+  ["circle", { cx: "12", cy: "13", r: "3", key: "1vg3eu" }]
+];
+var Camera = createLucideIcon("camera", __iconNode);
+
+// ../../node_modules/lucide-react/dist/esm/icons/check.js
+var __iconNode2 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+var Check = createLucideIcon("check", __iconNode2);
+
+// ../../node_modules/lucide-react/dist/esm/icons/chevron-left.js
+var __iconNode3 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+var ChevronLeft = createLucideIcon("chevron-left", __iconNode3);
+
+// ../../node_modules/lucide-react/dist/esm/icons/chevron-right.js
+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
+var __iconNode5 = [
+  ["path", { d: "m15 15 6 6", key: "1s409w" }],
+  ["path", { d: "m15 9 6-6", key: "ko1vev" }],
+  ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
+  ["path", { d: "M21 8V3h-5", key: "1qoq8a" }],
+  ["path", { d: "M3 16v5h5", key: "1t08am" }],
+  ["path", { d: "m3 21 6-6", key: "wwnumi" }],
+  ["path", { d: "M3 8V3h5", key: "1ln10m" }],
+  ["path", { d: "M9 9 3 3", key: "v551iv" }]
+];
+var Expand = createLucideIcon("expand", __iconNode5);
+
+// ../../node_modules/lucide-react/dist/esm/icons/flag.js
+var __iconNode6 = [
+  [
+    "path",
+    {
+      d: "M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528",
+      key: "1jaruq"
+    }
+  ]
+];
+var Flag = createLucideIcon("flag", __iconNode6);
+
+// ../../node_modules/lucide-react/dist/esm/icons/image.js
+var __iconNode7 = [
+  ["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);
+
+// ../../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);
+
+// ../../node_modules/lucide-react/dist/esm/icons/plus.js
+var __iconNode9 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+var Plus = createLucideIcon("plus", __iconNode9);
+
+// ../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js
+var __iconNode10 = [
+  ["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);
+
+// ../../node_modules/lucide-react/dist/esm/icons/shrink.js
+var __iconNode11 = [
+  ["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);
+
+// ../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js
+var __iconNode12 = [
+  ["path", { d: "M7 10v12", key: "1qc93n" }],
+  [
+    "path",
+    {
+      d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z",
+      key: "emmmcr"
+    }
+  ]
+];
+var ThumbsUp = createLucideIcon("thumbs-up", __iconNode12);
+
+// ../../node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode13 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode13);
+
+// src/ScreenshotPreview.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ScreenshotPreview({
+  screenshots,
+  isLoading,
+  onConfirm,
+  onCancel,
+  onRetake,
+  isSubmitting
+}) {
+  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: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        LoaderCircle,
+        {
+          className: "w-6 h-6 animate-spin",
+          style: { color: "#3b82f6" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.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: [
+      /* @__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 },
+    {
+      key: "container",
+      label: "Container",
+      data: screenshots.container
+    },
+    { key: "viewport", label: "Viewport", data: screenshots.viewport }
+  ];
+  const tabs = allTabs.filter((tab) => tab.data);
+  const activeScreenshot = activeTab === "element" ? screenshots.element : activeTab === "container" ? screenshots.container : screenshots.viewport;
+  const totalSize = (0, import_anyclick_core.estimateTotalSize)(screenshots);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        ...styles.container,
+        ...isExpanded ? styles.containerExpanded : {}
+      },
+      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.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsExpanded(!isExpanded),
+                style: styles.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)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab(tab.key),
+            style: {
+              ...styles.tab,
+              ...activeTab === tab.key ? styles.tabActive : {}
+            },
+            children: [
+              tab.label,
+              tab.data && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.tabSize, children: (0, import_anyclick_core.formatBytes)(tab.data.sizeBytes) })
+            ]
+          },
+          tab.key
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              ...styles.previewContainer,
+              ...isExpanded ? styles.previewContainerExpanded : {}
+            },
+            children: activeScreenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: activeScreenshot.dataUrl,
+                alt: `${activeTab} screenshot`,
+                style: styles.previewImage
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.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 ",
+                activeTab,
+                " screenshot"
+              ] })
+            ] })
+          }
+        ),
+        activeScreenshot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.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)(
+            "button",
+            {
+              type: "button",
+              onClick: onRetake,
+              disabled: isSubmitting,
+              style: styles.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)(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                disabled: isSubmitting,
+                className: "flex items-center gap-1",
+                style: { ...menuStyles.button, ...menuStyles.cancelButton },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "w-3 h-3" }),
+                  "Cancel"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onConfirm(screenshots),
+                disabled: isSubmitting,
+                style: {
+                  ...menuStyles.button,
+                  ...menuStyles.submitButton,
+                  ...isSubmitting ? menuStyles.submitButtonDisabled : {}
+                },
+                children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "w-3 h-3 animate-spin" }),
+                  "Sending..."
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "w-3 h-3" }),
+                  "Send"
+                ] })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+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 defaultIcons = {
+  issue: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Flag, { className: "w-4 h-4" }),
+  feature: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Plus, { className: "w-4 h-4" }),
+  like: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThumbsUp, { className: "w-4 h-4" })
+};
+function MenuItem({
+  item,
+  onClick,
+  disabled,
+  hasChildren
+}) {
+  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        ...menuStyles.item,
+        ...isHovered ? menuStyles.itemHover : {},
+        ...disabled ? { opacity: 0.5, cursor: "not-allowed" } : {}
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: item.icon ?? defaultIcons[item.type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 }, children: item.label }),
+        hasChildren && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ChevronRight,
+          {
+            className: "w-4 h-4",
+            style: { marginLeft: "auto", opacity: 0.5 }
+          }
+        )
+      ]
+    }
+  );
+}
+function BackButton({ onClick }) {
+  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        ...menuStyles.item,
+        ...isHovered ? menuStyles.itemHover : {},
+        borderBottom: "1px solid #e5e5e5",
+        marginBottom: "4px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronLeft, { className: "w-4 h-4", style: { opacity: 0.5 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { opacity: 0.7 }, children: "Back" })
+      ]
+    }
+  );
+}
+function CommentForm({
+  onSubmit,
+  onCancel,
+  isSubmitting
+}) {
+  const [comment, setComment] = (0, import_react5.useState)("");
+  const inputRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    inputRef.current?.focus();
+  }, []);
+  const handleSubmit = () => {
+    onSubmit(comment);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      handleSubmit();
+    } else if (e.key === "Escape") {
+      onCancel();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: menuStyles.commentSection, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "textarea",
+      {
+        ref: inputRef,
+        value: comment,
+        onChange: (e) => setComment(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Add a comment (optional)...",
+        style: menuStyles.commentInput,
+        disabled: isSubmitting
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: menuStyles.buttonRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          disabled: isSubmitting,
+          style: { ...menuStyles.button, ...menuStyles.cancelButton },
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleSubmit,
+          disabled: isSubmitting,
+          style: {
+            ...menuStyles.button,
+            ...menuStyles.submitButton,
+            ...isSubmitting ? menuStyles.submitButtonDisabled : {}
+          },
+          children: isSubmitting ? "Sending..." : "Send"
+        }
+      )
+    ] })
+  ] });
+}
+function ContextMenu({
+  visible,
+  position,
+  targetElement,
+  containerElement,
+  items,
+  onSelect,
+  onClose,
+  isSubmitting,
+  style,
+  className,
+  highlightConfig,
+  screenshotConfig
+}) {
+  const [selectedType, setSelectedType] = (0, import_react5.useState)(null);
+  const [currentView, setCurrentView] = (0, import_react5.useState)("menu");
+  const [pendingComment, setPendingComment] = (0, import_react5.useState)();
+  const [submenuStack, setSubmenuStack] = (0, import_react5.useState)([]);
+  const [screenshots, setScreenshots] = (0, import_react5.useState)(null);
+  const [isCapturing, setIsCapturing] = (0, import_react5.useState)(false);
+  const menuRef = (0, import_react5.useRef)(null);
+  const mergedScreenshotConfig = {
+    ...import_anyclick_core2.DEFAULT_SCREENSHOT_CONFIG,
+    ...screenshotConfig
+  };
+  const showPreview = mergedScreenshotConfig.showPreview && (0, import_anyclick_core2.isScreenshotSupported)();
+  const currentItems = submenuStack.length > 0 ? submenuStack[submenuStack.length - 1] : items;
+  const captureScreenshots = (0, import_react5.useCallback)(async () => {
+    if (!targetElement || !showPreview) return;
+    setIsCapturing(true);
+    try {
+      const captured = await (0, import_anyclick_core2.captureAllScreenshots)(
+        targetElement,
+        containerElement,
+        mergedScreenshotConfig
+      );
+      setScreenshots(captured);
+    } catch (error) {
+      console.error("Failed to capture screenshots:", error);
+      setScreenshots(null);
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [targetElement, containerElement, mergedScreenshotConfig, showPreview]);
+  (0, import_react5.useEffect)(() => {
+    if (!visible) {
+      setSelectedType(null);
+      setCurrentView("menu");
+      setPendingComment(void 0);
+      setSubmenuStack([]);
+      setScreenshots(null);
+      setIsCapturing(false);
+    }
+  }, [visible]);
+  (0, import_react5.useEffect)(() => {
+    if (visible && targetElement) {
+      clearHighlights();
+      applyHighlights(targetElement, highlightConfig);
+    } else {
+      clearHighlights();
+    }
+    return () => {
+      clearHighlights();
+    };
+  }, [visible, targetElement, highlightConfig]);
+  (0, import_react5.useEffect)(() => {
+    if (!visible) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      if (!menuRef.current) return;
+      const target = event.target;
+      if (!menuRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [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`;
+      }
+    }
+  }, [visible, position]);
+  (0, import_react5.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        if (currentView === "screenshot-preview") {
+          setCurrentView("comment");
+        } else if (currentView === "comment") {
+          setCurrentView("menu");
+          setSelectedType(null);
+          setPendingComment(void 0);
+        } else if (submenuStack.length > 0) {
+          setSubmenuStack((prev) => prev.slice(0, -1));
+        } else {
+          onClose();
+        }
+      }
+    };
+    if (visible) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [visible, currentView, submenuStack.length, onClose]);
+  if (!visible || !targetElement) {
+    return null;
+  }
+  const handleItemClick = (item) => {
+    if (item.children && item.children.length > 0) {
+      setSubmenuStack((prev) => [...prev, item.children]);
+      return;
+    }
+    if (item.showComment) {
+      setSelectedType(item.type);
+      setCurrentView("comment");
+    } else {
+      if (showPreview) {
+        setSelectedType(item.type);
+        setCurrentView("screenshot-preview");
+        captureScreenshots();
+      } else {
+        onSelect(item.type);
+      }
+    }
+  };
+  const handleBack = () => {
+    setSubmenuStack((prev) => prev.slice(0, -1));
+  };
+  const handleCommentSubmit = (comment) => {
+    if (!selectedType) return;
+    if (showPreview) {
+      setPendingComment(comment || void 0);
+      setCurrentView("screenshot-preview");
+      captureScreenshots();
+    } else {
+      onSelect(selectedType, comment || void 0);
+    }
+  };
+  const handleCommentCancel = () => {
+    setCurrentView("menu");
+    setSelectedType(null);
+    setPendingComment(void 0);
+  };
+  const handleScreenshotConfirm = (confirmedScreenshots) => {
+    if (selectedType) {
+      onSelect(selectedType, pendingComment, confirmedScreenshots);
+    }
+  };
+  const handleScreenshotCancel = () => {
+    if (pendingComment !== void 0) {
+      setCurrentView("comment");
+    } else {
+      setCurrentView("menu");
+      setSelectedType(null);
+    }
+    setScreenshots(null);
+  };
+  const handleRetakeScreenshots = () => {
+    captureScreenshots();
+  };
+  const containerWidth = currentView === "screenshot-preview" ? 360 : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: menuRef,
+      className,
+      style: {
+        ...menuStyles.container,
+        left: position.x,
+        top: position.y,
+        ...containerWidth ? { width: containerWidth, minWidth: containerWidth } : {},
+        ...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 === "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)(
+            MenuItem,
+            {
+              item,
+              onClick: () => handleItemClick(item),
+              disabled: isSubmitting,
+              hasChildren: item.children && item.children.length > 0
+            },
+            item.type
+          )),
+          showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: screenshotIndicatorStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Camera, { className: "w-3 h-3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Screenshots will be captured" })
+          ] })
+        ] }),
+        currentView === "comment" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          CommentForm,
+          {
+            onSubmit: handleCommentSubmit,
+            onCancel: handleCommentCancel,
+            isSubmitting
+          }
+        ),
+        currentView === "screenshot-preview" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ScreenshotPreview,
+          {
+            screenshots,
+            isLoading: isCapturing,
+            onConfirm: handleScreenshotConfirm,
+            onCancel: handleScreenshotCancel,
+            onRetake: handleRetakeScreenshots,
+            isSubmitting
+          }
+        )
+      ]
+    }
+  );
+}
+var screenshotIndicatorStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "8px 12px",
+  fontSize: "11px",
+  color: "#9ca3af",
+  borderTop: "1px solid #f3f4f6",
+  marginTop: "4px"
+};
+
+// src/FeedbackProvider.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({
+  adapter,
+  children,
+  targetFilter,
+  menuItems = defaultMenuItems,
+  maxInnerTextLength,
+  maxOuterHTMLLength,
+  maxAncestors,
+  cooldownMs,
+  stripAttributes,
+  metadata,
+  onSubmitSuccess,
+  onSubmitError,
+  menuStyle,
+  menuClassName,
+  disabled = false,
+  highlightConfig,
+  screenshotConfig
+}) {
+  const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
+  const [menuVisible, setMenuVisible] = (0, import_react6.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, import_react6.useState)({ x: 0, y: 0 });
+  const [targetElement, setTargetElement] = (0, import_react6.useState)(null);
+  const [containerElement, setContainerElement] = (0, import_react6.useState)(
+    null
+  );
+  const clientRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    const client = (0, import_anyclick_core3.createFeedbackClient)({
+      adapter,
+      targetFilter,
+      maxInnerTextLength,
+      maxOuterHTMLLength,
+      maxAncestors,
+      cooldownMs,
+      stripAttributes
+    });
+    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);
+    };
+    clientRef.current = client;
+    if (!disabled) {
+      client.attach();
+    }
+    return () => {
+      client.detach();
+    };
+  }, [
+    adapter,
+    targetFilter,
+    maxInnerTextLength,
+    maxOuterHTMLLength,
+    maxAncestors,
+    cooldownMs,
+    stripAttributes,
+    onSubmitSuccess,
+    onSubmitError,
+    disabled,
+    highlightConfig
+  ]);
+  const submitFeedback = (0, import_react6.useCallback)(
+    async (element, type, comment, screenshots) => {
+      const client = clientRef.current;
+      if (!client) return;
+      setIsSubmitting(true);
+      try {
+        await client.submitFeedback(element, type, {
+          comment,
+          metadata,
+          screenshots
+        });
+      } finally {
+        setIsSubmitting(false);
+        setMenuVisible(false);
+        setTargetElement(null);
+        setContainerElement(null);
+      }
+    },
+    [metadata]
+  );
+  const openMenu = (0, import_react6.useCallback)(
+    (element, position) => {
+      setTargetElement(element);
+      const container = findContainerParent(element, highlightConfig);
+      setContainerElement(container);
+      setMenuPosition(position);
+      setMenuVisible(true);
+    },
+    [highlightConfig]
+  );
+  const closeMenu = (0, import_react6.useCallback)(() => {
+    setMenuVisible(false);
+    setTargetElement(null);
+    setContainerElement(null);
+  }, []);
+  const handleMenuSelect = (0, import_react6.useCallback)(
+    (type, comment, screenshots) => {
+      if (targetElement) {
+        submitFeedback(targetElement, type, comment, screenshots);
+      }
+    },
+    [targetElement, submitFeedback]
+  );
+  const contextValue = (0, import_react6.useMemo)(
+    () => ({
+      isEnabled: !disabled,
+      isSubmitting,
+      submitFeedback,
+      openMenu,
+      closeMenu
+    }),
+    [disabled, isSubmitting, submitFeedback, openMenu, closeMenu]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FeedbackContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ContextMenu,
+      {
+        visible: menuVisible && !disabled,
+        position: menuPosition,
+        targetElement,
+        containerElement,
+        items: menuItems,
+        onSelect: handleMenuSelect,
+        onClose: closeMenu,
+        isSubmitting,
+        style: menuStyle,
+        className: menuClassName,
+        highlightConfig,
+        screenshotConfig
+      }
+    )
+  ] });
+}
+
+// src/types.ts
+function filterMenuItemsByRole(items, userContext) {
+  if (!userContext) {
+    return items.filter(
+      (item) => !item.requiredRoles || item.requiredRoles.length === 0
+    );
+  }
+  const userRoles = userContext.roles ?? [];
+  return items.filter((item) => {
+    if (!item.requiredRoles || item.requiredRoles.length === 0) {
+      return true;
+    }
+    return item.requiredRoles.some((role) => userRoles.includes(role));
+  });
+}
+
+// src/index.ts
+var import_anyclick_core4 = require("@ewjdev/anyclick-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContextMenu,
+  DEFAULT_SCREENSHOT_CONFIG,
+  DEFAULT_SENSITIVE_SELECTORS,
+  FeedbackContext,
+  FeedbackProvider,
+  ScreenshotPreview,
+  applyHighlights,
+  captureAllScreenshots,
+  captureScreenshot,
+  clearHighlights,
+  darkMenuStyles,
+  defaultContainerSelectors,
+  defaultHighlightColors,
+  estimateTotalSize,
+  filterMenuItemsByRole,
+  findContainerParent,
+  formatBytes,
+  highlightContainer,
+  highlightTarget,
+  isScreenshotSupported,
+  menuStyles,
+  useFeedback
+});
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+lucide-react/dist/esm/defaultAttributes.js:
+lucide-react/dist/esm/Icon.js:
+lucide-react/dist/esm/createLucideIcon.js:
+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/expand.js:
+lucide-react/dist/esm/icons/flag.js:
+lucide-react/dist/esm/icons/image.js:
+lucide-react/dist/esm/icons/loader-circle.js:
+lucide-react/dist/esm/icons/plus.js:
+lucide-react/dist/esm/icons/refresh-cw.js:
+lucide-react/dist/esm/icons/shrink.js:
+lucide-react/dist/esm/icons/thumbs-up.js:
+lucide-react/dist/esm/icons/x.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.544.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
+//# sourceMappingURL=index.js.map