@alisamadiillc/devtools 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1658 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/devtools.tsx
+
+// src/utils/element-info.ts
+function isDevToolsElement(el) {
+  if (!el) return false;
+  if (el.hasAttribute("data-devtools-ignore")) return true;
+  return isDevToolsElement(el.parentElement);
+}
+function getCssSelector(element) {
+  if (element.id) return `#${element.id}`;
+  const parts = [];
+  let current = element;
+  while (current && current !== document.body && current !== document.documentElement) {
+    const tag = current.tagName.toLowerCase();
+    if (current.id) {
+      parts.unshift(`#${current.id}`);
+      break;
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const index = Array.from(parent.children).indexOf(current) + 1;
+      parts.unshift(`${tag}:nth-child(${index})`);
+    } else {
+      parts.unshift(tag);
+    }
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+function getElementLabel(element) {
+  const tag = element.tagName.toLowerCase();
+  const classes = Array.from(element.classList).filter((c) => !c.startsWith("_") && c.length < 30).slice(0, 2);
+  if (element.id) return `${tag}#${element.id}`;
+  if (classes.length > 0) return `${tag}.${classes.join(".")}`;
+  return tag;
+}
+
+// src/components/editor.tsx
+function generateId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return Date.now().toString(36) + Math.random().toString(36).slice(2);
+}
+function Editor({ element, onTrackOriginal, onAddChange }) {
+  const fileInputRef = react.useRef(null);
+  const changeIdRef = react.useRef(generateId());
+  const isImage = element.tagName.toLowerCase() === "img";
+  const htmlEl = element;
+  const setupTextEditing = react.useCallback(() => {
+    if (isImage) return;
+    const originalText = htmlEl.textContent || "";
+    onTrackOriginal(element, "text", originalText);
+    htmlEl.contentEditable = "true";
+    htmlEl.style.outline = "2px solid rgba(59, 130, 246, 0.5)";
+    htmlEl.style.outlineOffset = "2px";
+    htmlEl.style.cursor = "text";
+    htmlEl.focus();
+    const handleInput = () => {
+      const newText = htmlEl.textContent || "";
+      if (newText !== originalText) {
+        onAddChange({
+          id: changeIdRef.current,
+          selector: getCssSelector(element),
+          element: getElementLabel(element),
+          type: "text",
+          original: originalText,
+          modified: newText,
+          note: ""
+        });
+      }
+    };
+    htmlEl.addEventListener("input", handleInput);
+    return () => {
+      htmlEl.removeEventListener("input", handleInput);
+    };
+  }, [element, htmlEl, isImage, onTrackOriginal, onAddChange]);
+  const setupImageEditing = react.useCallback(() => {
+    if (!isImage) return;
+    const imgEl = element;
+    const originalSrc = imgEl.src;
+    onTrackOriginal(element, "image", originalSrc);
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.style.display = "none";
+    document.body.appendChild(input);
+    fileInputRef.current = input;
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-devtools-ignore", "");
+    wrapper.style.cssText = `
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0,0,0,0.5);
+      backdrop-filter: blur(4px);
+      border-radius: 4px;
+      cursor: pointer;
+      z-index: 99998;
+    `;
+    const updatePosition = () => {
+      const rect = imgEl.getBoundingClientRect();
+      wrapper.style.top = `${rect.top + window.scrollY}px`;
+      wrapper.style.left = `${rect.left + window.scrollX}px`;
+      wrapper.style.width = `${rect.width}px`;
+      wrapper.style.height = `${rect.height}px`;
+    };
+    updatePosition();
+    const btn = document.createElement("button");
+    btn.textContent = "Replace Image";
+    btn.setAttribute("data-devtools-ignore", "");
+    btn.style.cssText = `
+      padding: 8px 16px;
+      border-radius: 8px;
+      border: 1px solid rgba(255,255,255,0.2);
+      background: rgba(255,255,255,0.1);
+      color: #fff;
+      font-size: 13px;
+      cursor: pointer;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    `;
+    wrapper.appendChild(btn);
+    document.body.appendChild(wrapper);
+    btn.addEventListener("click", () => input.click());
+    input.addEventListener("change", () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result;
+        imgEl.src = dataUrl;
+        onAddChange({
+          id: changeIdRef.current,
+          selector: getCssSelector(element),
+          element: getElementLabel(element),
+          type: "image",
+          original: originalSrc,
+          modified: `[replaced with ${file.name}]`,
+          note: ""
+        });
+        wrapper.remove();
+      };
+      reader.readAsDataURL(file);
+    });
+    return () => {
+      wrapper.remove();
+      input.remove();
+    };
+  }, [element, isImage, onTrackOriginal, onAddChange]);
+  react.useEffect(() => {
+    const cleanupText = setupTextEditing();
+    const cleanupImage = setupImageEditing();
+    return () => {
+      cleanupText?.();
+      cleanupImage?.();
+    };
+  }, [setupTextEditing, setupImageEditing]);
+  return null;
+}
+
+// src/utils/styles.ts
+var FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif';
+var v = {
+  bg: "var(--card)",
+  fg: "var(--card-foreground)",
+  muted: "var(--muted)",
+  mutedFg: "var(--muted-foreground)",
+  border: "var(--border)",
+  primary: "var(--primary)",
+  primaryFg: "var(--primary-foreground)",
+  accent: "var(--accent)",
+  accentFg: "var(--accent-foreground)"
+};
+var styles = {
+  toolbar: {
+    position: "fixed",
+    bottom: 16,
+    right: 16,
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    padding: 4,
+    borderRadius: 12,
+    background: v.bg,
+    border: `1px solid ${v.border}`,
+    color: v.fg,
+    fontSize: 13,
+    fontFamily: FONT_FAMILY,
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.04)",
+    lineHeight: 1
+  },
+  toolbarButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "8px 12px",
+    borderRadius: 8,
+    border: "none",
+    background: "transparent",
+    color: v.mutedFg,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY,
+    cursor: "pointer",
+    transition: "all 150ms ease",
+    whiteSpace: "nowrap",
+    lineHeight: 1
+  },
+  toolbarButtonActive: {
+    background: v.accent,
+    color: v.accentFg
+  },
+  toolbarDivider: {
+    width: 1,
+    height: 20,
+    background: v.border,
+    margin: "0 2px"
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 18,
+    height: 18,
+    padding: "0 5px",
+    borderRadius: 999,
+    background: v.primary,
+    color: v.primaryFg,
+    fontSize: 10,
+    fontWeight: 600,
+    lineHeight: 1
+  },
+  highlightRect: {
+    position: "fixed",
+    pointerEvents: "none",
+    border: "2px solid rgba(59, 130, 246, 0.6)",
+    background: "rgba(59, 130, 246, 0.08)",
+    borderRadius: 4,
+    transition: "all 60ms ease-out"
+  },
+  elementLabel: {
+    position: "fixed",
+    pointerEvents: "none",
+    padding: "4px 8px",
+    borderRadius: 6,
+    background: v.bg,
+    border: `1px solid ${v.border}`,
+    color: v.primary,
+    fontSize: 11,
+    fontFamily: FONT_FAMILY,
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    lineHeight: 1,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+  },
+  toast: {
+    position: "fixed",
+    bottom: 72,
+    right: 16,
+    padding: "10px 16px",
+    borderRadius: 10,
+    background: v.bg,
+    border: `1px solid ${v.border}`,
+    color: v.fg,
+    fontSize: 13,
+    fontFamily: FONT_FAMILY,
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    transition: "all 300ms ease",
+    lineHeight: 1.4
+  },
+  primaryButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "8px 16px",
+    borderRadius: 8,
+    border: "none",
+    background: v.primary,
+    color: v.primaryFg,
+    fontSize: 13,
+    fontFamily: FONT_FAMILY,
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 150ms ease",
+    lineHeight: 1
+  },
+  secondaryButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "8px 16px",
+    borderRadius: 8,
+    border: `1px solid ${v.border}`,
+    background: v.muted,
+    color: v.mutedFg,
+    fontSize: 13,
+    fontFamily: FONT_FAMILY,
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 150ms ease",
+    lineHeight: 1
+  },
+  viewPanel: {
+    position: "fixed",
+    bottom: 64,
+    right: 16,
+    width: 320,
+    maxHeight: 400,
+    overflowY: "auto",
+    padding: 12,
+    borderRadius: 12,
+    background: v.bg,
+    border: `1px solid ${v.border}`,
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12)",
+    fontFamily: FONT_FAMILY,
+    color: v.fg,
+    animation: "devtools-slide-up 200ms ease forwards"
+  },
+  viewPanelItem: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    padding: "8px 10px",
+    borderRadius: 8,
+    background: "transparent",
+    marginBottom: 4,
+    cursor: "default",
+    transition: "background 150ms ease"
+  },
+  viewPanelItemHover: {
+    background: v.accent
+  },
+  notePopup: {
+    position: "fixed",
+    width: 280,
+    padding: 12,
+    borderRadius: 10,
+    background: v.bg,
+    border: `1px solid ${v.border}`,
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12)",
+    fontFamily: FONT_FAMILY,
+    color: v.fg,
+    animation: "devtools-fade-in 150ms ease forwards"
+  },
+  noteTextarea: {
+    width: "100%",
+    height: 60,
+    padding: 8,
+    borderRadius: 6,
+    border: `1px solid ${v.border}`,
+    background: v.muted,
+    color: v.fg,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY,
+    resize: "vertical",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  resetButton: {
+    position: "fixed",
+    width: 22,
+    height: 22,
+    borderRadius: "50%",
+    border: `1px solid ${v.border}`,
+    background: "rgba(239, 68, 68, 0.9)",
+    color: "#fff",
+    fontSize: 12,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 1,
+    padding: 0,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    transition: "all 150ms ease"
+  }
+};
+var KEYFRAMES = `
+@keyframes devtools-fade-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes devtools-fade-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to { opacity: 0; transform: translateY(8px) scale(0.96); }
+}
+@keyframes devtools-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+@keyframes devtools-slide-up {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes devtools-shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 50%, 90% { transform: translateX(-4px); }
+  30%, 70% { transform: translateX(4px); }
+}
+`;
+function ElementResetButton({
+  element,
+  onReset,
+  zIndex
+}) {
+  const [pos, setPos] = react.useState(null);
+  react.useEffect(() => {
+    const update = () => {
+      const rect = element.getBoundingClientRect();
+      setPos({
+        top: rect.top - 10,
+        left: rect.right - 10
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [element]);
+  if (!pos) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-devtools-ignore": true,
+      onClick: (e) => {
+        e.stopPropagation();
+        onReset();
+      },
+      style: {
+        ...styles.resetButton,
+        top: pos.top,
+        left: pos.left,
+        zIndex: zIndex + 1
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "rgba(239, 68, 68, 1)";
+        e.currentTarget.style.transform = "scale(1.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "rgba(239, 68, 68, 0.9)";
+        e.currentTarget.style.transform = "scale(1)";
+      },
+      title: "Reset this element",
+      children: "\xD7"
+    }
+  );
+}
+function Inspector({ rect, label, zIndex }) {
+  if (!rect) return null;
+  const labelTop = rect.top - 28;
+  const showLabelAbove = labelTop > 8;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-devtools-ignore": true,
+        style: {
+          ...styles.highlightRect,
+          zIndex: zIndex - 1,
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        }
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-devtools-ignore": true,
+        style: {
+          ...styles.elementLabel,
+          zIndex: zIndex - 1,
+          left: rect.left,
+          top: showLabelAbove ? labelTop : rect.top + rect.height + 4
+        },
+        children: label
+      }
+    )
+  ] });
+}
+function NotePopup({
+  element,
+  initialNote,
+  onSave,
+  onClose,
+  zIndex
+}) {
+  const [note, setNote] = react.useState(initialNote);
+  const [position, setPosition] = react.useState({
+    top: 0,
+    left: 0
+  });
+  react.useEffect(() => {
+    const rect = element.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const popupHeight = 160;
+    const top = spaceBelow > popupHeight + 8 ? rect.bottom + 8 : rect.top - popupHeight - 8;
+    setPosition({
+      top: Math.max(8, Math.min(top, window.innerHeight - popupHeight - 8)),
+      left: Math.max(8, Math.min(rect.left, window.innerWidth - 296))
+    });
+  }, [element]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-devtools-ignore": true,
+      style: {
+        ...styles.notePopup,
+        top: position.top,
+        left: position.left,
+        zIndex: zIndex + 1
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--muted-foreground)", marginBottom: 8 }, children: "Describe the change you want:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            "data-devtools-ignore": true,
+            value: note,
+            onChange: (e) => setNote(e.target.value),
+            placeholder: "e.g., Make this text larger, change the color...",
+            autoFocus: true,
+            style: styles.noteTextarea,
+            onKeyDown: (e) => {
+              e.stopPropagation();
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                onSave(note);
+              }
+              if (e.key === "Escape") {
+                onClose();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 6,
+              justifyContent: "flex-end",
+              marginTop: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  "data-devtools-ignore": true,
+                  onClick: onClose,
+                  style: styles.secondaryButton,
+                  children: "Skip"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  "data-devtools-ignore": true,
+                  onClick: () => onSave(note),
+                  style: styles.primaryButton,
+                  children: "Save"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              fontSize: 10,
+              color: "var(--muted-foreground)",
+              marginTop: 6,
+              textAlign: "right"
+            },
+            children: "\u2318+Enter to save"
+          }
+        )
+      ]
+    }
+  );
+}
+var warningStyle = {
+  background: "rgba(251, 146, 60, 0.15)",
+  border: "1px solid rgba(251, 146, 60, 0.4)",
+  color: "#c2410c"
+};
+function Toast({
+  message,
+  variant = "success",
+  duration = 3e3,
+  linkUrl,
+  linkText,
+  onDone,
+  zIndex,
+  position
+}) {
+  const [visible, setVisible] = react.useState(true);
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setTimeout(onDone, 300);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onDone]);
+  const positionStyle = position === "bottom-left" ? { left: 16, right: "auto" } : { right: 16, left: "auto" };
+  const isWarning = variant === "warning";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-devtools-ignore": true,
+      style: {
+        ...styles.toast,
+        ...positionStyle,
+        ...isWarning ? warningStyle : {},
+        zIndex: zIndex + 1,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(16px)",
+        animation: isWarning ? "devtools-shake 0.5s ease" : "devtools-fade-in 200ms ease forwards",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: isWarning ? "\u26A0" : "\u2713" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
+        linkUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: linkUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "data-devtools-ignore": true,
+            style: {
+              color: "inherit",
+              textDecoration: "underline",
+              textUnderlineOffset: 2,
+              fontWeight: 500,
+              cursor: "pointer"
+            },
+            children: linkText || "Submit here \u2192"
+          }
+        )
+      ]
+    }
+  );
+}
+function ToolbarIcon({ d, size = 14 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
+    }
+  );
+}
+function hoverIn(e, overrides) {
+  Object.assign(e.currentTarget.style, {
+    background: "var(--accent)",
+    color: "var(--accent-foreground)",
+    ...overrides
+  });
+}
+function hoverOut(e, overrides) {
+  Object.assign(e.currentTarget.style, {
+    background: "transparent",
+    color: "var(--muted-foreground)",
+    ...overrides
+  });
+}
+function ResetButton({ onReset }) {
+  const [confirming, setConfirming] = react.useState(false);
+  const timerRef = react.useRef();
+  const handleClick = react.useCallback(() => {
+    if (confirming) {
+      clearTimeout(timerRef.current);
+      setConfirming(false);
+      onReset();
+    } else {
+      setConfirming(true);
+      timerRef.current = setTimeout(() => setConfirming(false), 3e3);
+    }
+  }, [confirming, onReset]);
+  react.useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.toolbarDivider }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleClick,
+        style: {
+          ...styles.toolbarButton,
+          ...confirming ? { background: "rgba(239, 68, 68, 0.15)", color: "#f87171" } : {}
+        },
+        onMouseEnter: (e) => {
+          if (!confirming) hoverIn(e, {
+            background: "rgba(239, 68, 68, 0.1)",
+            color: "#f87171"
+          });
+        },
+        onMouseLeave: (e) => {
+          if (!confirming) hoverOut(e);
+        },
+        title: confirming ? "Click again to confirm reset" : "Reset all changes",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { d: "M1 4v6h6M23 20v-6h-6M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" }),
+          confirming && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11 }, children: "Confirm?" })
+        ]
+      }
+    )
+  ] });
+}
+function HideButton({ onHide }) {
+  const [confirming, setConfirming] = react.useState(false);
+  const timerRef = react.useRef();
+  const handleClick = react.useCallback(() => {
+    if (confirming) {
+      clearTimeout(timerRef.current);
+      setConfirming(false);
+      onHide();
+    } else {
+      setConfirming(true);
+      timerRef.current = setTimeout(() => setConfirming(false), 3e3);
+    }
+  }, [confirming, onHide]);
+  react.useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: handleClick,
+      style: {
+        ...styles.toolbarButton,
+        ...confirming ? { background: "rgba(239, 68, 68, 0.15)", color: "#f87171" } : {}
+      },
+      onMouseEnter: (e) => {
+        if (!confirming) hoverIn(e);
+      },
+      onMouseLeave: (e) => {
+        if (!confirming) hoverOut(e);
+      },
+      title: confirming ? "Click again to confirm" : "Hide devtools",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { d: "M18 6L6 18M6 6l12 12" }),
+        confirming && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11 }, children: "Confirm?" })
+      ]
+    }
+  );
+}
+function Toolbar({
+  state,
+  changesCount,
+  onSelectElement,
+  onCopyFeedback,
+  onView,
+  onReset,
+  onHide,
+  onBack,
+  isViewing,
+  requestUrl,
+  zIndex,
+  position
+}) {
+  const positionStyle = position === "bottom-left" ? { left: 16, right: "auto" } : { right: 16, left: "auto" };
+  const isInspecting = state === "inspecting";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-devtools-ignore": true,
+      style: {
+        ...styles.toolbar,
+        ...positionStyle,
+        zIndex,
+        animation: "devtools-fade-in 200ms ease forwards"
+      },
+      children: [
+        state === "editing" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onBack,
+            style: styles.toolbarButton,
+            onMouseEnter: (e) => hoverIn(e),
+            onMouseLeave: (e) => hoverOut(e),
+            title: "Back",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { d: "M19 12H5M12 19l-7-7 7-7" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: onSelectElement,
+            style: {
+              ...styles.toolbarButton,
+              ...isInspecting ? styles.toolbarButtonActive : {}
+            },
+            onMouseEnter: (e) => {
+              if (!isInspecting) hoverIn(e);
+            },
+            onMouseLeave: (e) => {
+              if (!isInspecting) hoverOut(e);
+            },
+            title: "Select an element to edit",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarIcon,
+                {
+                  d: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
+                  size: 14
+                }
+              ),
+              "Select"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: onView,
+            style: {
+              ...styles.toolbarButton,
+              ...isViewing ? styles.toolbarButtonActive : {}
+            },
+            onMouseEnter: (e) => {
+              if (!isViewing) hoverIn(e);
+            },
+            onMouseLeave: (e) => {
+              if (!isViewing) hoverOut(e);
+            },
+            title: "View all feedback",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 100 6 3 3 0 000-6z" }),
+              "View",
+              changesCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.badge, children: changesCount })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: onCopyFeedback,
+            style: {
+              ...styles.toolbarButton,
+              ...changesCount > 0 ? { color: "var(--card-foreground)" } : { opacity: 0.5, cursor: "default" }
+            },
+            disabled: changesCount === 0,
+            onMouseEnter: (e) => {
+              if (changesCount > 0) hoverIn(e);
+            },
+            onMouseLeave: (e) => {
+              if (changesCount > 0)
+                hoverOut(e, { color: "var(--card-foreground)" });
+            },
+            title: "Copy feedback to clipboard",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2M9 2h6a1 1 0 011 1v1a1 1 0 01-1 1H9a1 1 0 01-1-1V3a1 1 0 011-1z" }),
+              "Copy"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: requestUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "data-devtools-ignore": true,
+            style: {
+              ...styles.toolbarButton,
+              textDecoration: "none",
+              color: "var(--card-foreground)"
+            },
+            onMouseEnter: (e) => hoverIn(e),
+            onMouseLeave: (e) => hoverOut(e, { color: "var(--card-foreground)" }),
+            title: "Submit feedback request",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }),
+              "Submit"
+            ]
+          }
+        ),
+        changesCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(ResetButton, { onReset }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.toolbarDivider }),
+        /* @__PURE__ */ jsxRuntime.jsx(HideButton, { onHide })
+      ]
+    }
+  );
+}
+function ViewPanel({
+  changes,
+  onDelete,
+  onHover,
+  zIndex,
+  position
+}) {
+  const [hoveredId, setHoveredId] = react.useState(null);
+  const positionStyle = position === "bottom-left" ? { left: 16, right: "auto" } : { right: 16, left: "auto" };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-devtools-ignore": true,
+      style: {
+        ...styles.viewPanel,
+        ...positionStyle,
+        zIndex
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: 600,
+              color: "#e5e5e5",
+              marginBottom: 8,
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--card-foreground)" }, children: [
+              "Feedback (",
+              changes.length,
+              ")"
+            ] })
+          }
+        ),
+        changes.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--muted-foreground)",
+              padding: "24px 0",
+              textAlign: "center"
+            },
+            children: [
+              "No changes recorded yet.",
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11, color: "var(--muted-foreground)" }, children: "Click any element to start." })
+            ]
+          }
+        ),
+        changes.map((change) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-devtools-ignore": true,
+            onMouseEnter: () => {
+              setHoveredId(change.id);
+              onHover(change);
+            },
+            onMouseLeave: () => {
+              setHoveredId(null);
+              onHover(null);
+            },
+            style: {
+              ...styles.viewPanelItem,
+              ...hoveredId === change.id ? styles.viewPanelItemHover : {}
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--primary)",
+                          fontSize: 11,
+                          fontFamily: "monospace",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          maxWidth: 240
+                        },
+                        children: change.element
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        "data-devtools-ignore": true,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDelete(change.id);
+                        },
+                        style: {
+                          background: "none",
+                          border: "none",
+                          color: "var(--muted-foreground)",
+                          cursor: "pointer",
+                          fontSize: 14,
+                          padding: "0 2px",
+                          lineHeight: 1,
+                          flexShrink: 0
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.color = "#f87171";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.color = "#666";
+                        },
+                        title: "Remove this feedback",
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, color: "var(--muted-foreground)" }, children: [
+                change.type === "text" ? "Text" : "Image",
+                " change",
+                change.modified && change.type === "text" && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--muted-foreground)" }, children: [
+                  " ",
+                  '\u2014 "',
+                  change.modified.slice(0, 40),
+                  change.modified.length > 40 ? "..." : "",
+                  '"'
+                ] })
+              ] }),
+              change.note && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    fontSize: 11,
+                    color: "var(--muted-foreground)",
+                    fontStyle: "italic",
+                    marginTop: 2
+                  },
+                  children: [
+                    '"',
+                    change.note,
+                    '"'
+                  ]
+                }
+              )
+            ]
+          },
+          change.id
+        ))
+      ]
+    }
+  );
+}
+function useElementSelector(active) {
+  const [hoveredElement, setHoveredElement] = react.useState(null);
+  const [rect, setRect] = react.useState(null);
+  const [label, setLabel] = react.useState("");
+  const [selectedElement, setSelectedElement] = react.useState(null);
+  const clearSelection = react.useCallback(() => {
+    setSelectedElement(null);
+  }, []);
+  react.useEffect(() => {
+    if (!active) {
+      setHoveredElement(null);
+      setRect(null);
+      setLabel("");
+      return;
+    }
+    const handleMouseMove = (e) => {
+      if (isDevToolsElement(e.target)) {
+        setHoveredElement(null);
+        setRect(null);
+        setLabel("");
+        return;
+      }
+      const elements = document.elementsFromPoint(e.clientX, e.clientY);
+      const target = elements.find((el) => !isDevToolsElement(el));
+      if (!target || target === document.body || target === document.documentElement) {
+        setHoveredElement(null);
+        setRect(null);
+        setLabel("");
+        return;
+      }
+      setHoveredElement(target);
+      const bounds = target.getBoundingClientRect();
+      setRect({
+        top: bounds.top,
+        left: bounds.left,
+        width: bounds.width,
+        height: bounds.height
+      });
+      setLabel(getElementLabel(target));
+    };
+    const handleClick = (e) => {
+      if (isDevToolsElement(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const elements = document.elementsFromPoint(e.clientX, e.clientY);
+      const target = elements.find((el) => !isDevToolsElement(el));
+      if (target && target !== document.body && target !== document.documentElement) {
+        setSelectedElement(target);
+      }
+    };
+    const handleScroll = () => {
+      if (hoveredElement) {
+        const bounds = hoveredElement.getBoundingClientRect();
+        setRect({
+          top: bounds.top,
+          left: bounds.left,
+          width: bounds.width,
+          height: bounds.height
+        });
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [active, hoveredElement]);
+  return { hoveredElement, rect, label, selectedElement, clearSelection };
+}
+var STORAGE_PREFIX = "devtools-feedback";
+function getStorageKey() {
+  return `${STORAGE_PREFIX}-${window.location.pathname}`;
+}
+function loadPersisted() {
+  try {
+    const raw = localStorage.getItem(getStorageKey());
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function persist(data) {
+  try {
+    localStorage.setItem(getStorageKey(), JSON.stringify(data));
+  } catch {
+  }
+}
+function clearPersisted() {
+  localStorage.removeItem(getStorageKey());
+}
+function generateId2() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return Date.now().toString(36) + Math.random().toString(36).slice(2);
+}
+function useFeedback() {
+  const [changes, setChanges] = react.useState(() => {
+    if (typeof window === "undefined") return [];
+    return loadPersisted()?.changes ?? [];
+  });
+  const originalsRef = react.useRef(/* @__PURE__ */ new Map());
+  react.useEffect(() => {
+    persist({ changes });
+  }, [changes]);
+  const trackOriginal = react.useCallback(
+    (element, type, value) => {
+      if (!originalsRef.current.has(element)) {
+        originalsRef.current.set(element, { type, value });
+      }
+    },
+    []
+  );
+  const addChange = react.useCallback((change) => {
+    setChanges((prev) => {
+      const existing = prev.findIndex(
+        (c) => c.selector === change.selector && c.type === change.type
+      );
+      if (existing !== -1) {
+        const updated = [...prev];
+        updated[existing] = { ...change, id: prev[existing].id };
+        return updated;
+      }
+      return [...prev, { ...change, id: change.id || generateId2() }];
+    });
+  }, []);
+  const removeChange = react.useCallback((changeId) => {
+    setChanges((prev) => prev.filter((c) => c.id !== changeId));
+  }, []);
+  const updateNote = react.useCallback((changeId, note) => {
+    setChanges(
+      (prev) => prev.map((c) => c.id === changeId ? { ...c, note } : c)
+    );
+  }, []);
+  const resetElement = react.useCallback(
+    (changeId) => {
+      const change = changes.find((c) => c.id === changeId);
+      if (!change) return;
+      const el = document.querySelector(change.selector);
+      if (el) {
+        if (change.modified) {
+          const original = originalsRef.current.get(el);
+          if (original) {
+            if (original.type === "text") {
+              el.textContent = original.value;
+            } else if (original.type === "image") {
+              el.src = original.value;
+            }
+          }
+        }
+        originalsRef.current.delete(el);
+        el.contentEditable = "false";
+        el.style.outline = "";
+        el.style.outlineOffset = "";
+        el.style.cursor = "";
+      }
+      setChanges((prev) => prev.filter((c) => c.id !== changeId));
+    },
+    [changes]
+  );
+  const getPayload = react.useCallback(() => {
+    return {
+      url: window.location.href,
+      path: window.location.pathname,
+      changes,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }, [changes]);
+  const reset = react.useCallback(() => {
+    originalsRef.current.forEach((original, element) => {
+      const change = changes.find(
+        (c) => document.querySelector(c.selector) === element
+      );
+      if (change?.modified) {
+        if (original.type === "text") {
+          element.textContent = original.value;
+        } else if (original.type === "image") {
+          element.src = original.value;
+        }
+      }
+      element.contentEditable = "false";
+      element.style.outline = "";
+      element.style.outlineOffset = "";
+      element.style.cursor = "";
+    });
+    originalsRef.current.clear();
+    changes.forEach((change) => {
+      const el = document.querySelector(change.selector);
+      if (el) {
+        el.style.outline = "";
+        el.style.outlineOffset = "";
+        el.contentEditable = "false";
+        el.style.cursor = "";
+      }
+    });
+    setChanges([]);
+    clearPersisted();
+  }, [changes]);
+  return {
+    changes,
+    trackOriginal,
+    addChange,
+    removeChange,
+    updateNote,
+    resetElement,
+    getPayload,
+    reset
+  };
+}
+function useLocalStorageFlag(key) {
+  const [value, setValue] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return localStorage.getItem(key) === "true";
+  });
+  react.useEffect(() => {
+    const onStorage = (e) => {
+      if (e.key === key) setValue(e.newValue === "true");
+    };
+    window.addEventListener("storage", onStorage);
+    const interval = setInterval(() => {
+      const current = localStorage.getItem(key) === "true";
+      setValue((prev) => prev !== current ? current : prev);
+    }, 1e3);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      clearInterval(interval);
+    };
+  }, [key]);
+  const setFlag = react.useCallback(
+    (val) => {
+      if (val === null || val === false) {
+        localStorage.removeItem(key);
+        setValue(false);
+      } else {
+        localStorage.setItem(key, "true");
+        setValue(true);
+      }
+    },
+    [key]
+  );
+  return [value, setFlag];
+}
+
+// src/utils/clipboard.ts
+function formatFeedbackMarkdown(payload) {
+  const lines = [
+    "## Client Feedback",
+    "",
+    `**Page**: ${payload.url}`,
+    `**Path**: ${payload.path}`,
+    `**Date**: ${payload.timestamp}`,
+    ""
+  ];
+  if (payload.changes.length > 0) {
+    lines.push("### Changes Requested", "");
+    payload.changes.forEach((change, i) => {
+      const num = i + 1;
+      const typeLabel = change.type === "text" ? "Text Change" : "Image Change";
+      lines.push(`${num}. **${typeLabel}** on \`${change.selector}\``);
+      lines.push(`   - **Element**: \`${change.element}\``);
+      lines.push(`   - **Current**: "${change.original}"`);
+      lines.push(`   - **Change to**: "${change.modified}"`);
+      if (change.note) {
+        lines.push(`   - **Note**: "${change.note}"`);
+      }
+      lines.push("");
+    });
+  }
+  return lines.join("\n");
+}
+async function copyFeedbackToClipboard(payload) {
+  const markdown = formatFeedbackMarkdown(payload);
+  try {
+    await navigator.clipboard.writeText(markdown);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var DEFAULT_REQUEST_URL = "https://portal.alisamadii.com/requests";
+function DevTools({
+  storageKey = "devtools-enabled",
+  position = "bottom-right",
+  zIndex = 99999,
+  requestUrl = DEFAULT_REQUEST_URL
+}) {
+  const [enabled, setEnabled] = useLocalStorageFlag(storageKey);
+  const [state, setState] = react.useState("hidden");
+  const [mounted, setMounted] = react.useState(false);
+  const [toast, setToast] = react.useState(null);
+  const [selectedElement, setSelectedElement] = react.useState(null);
+  const [highlightedRect, setHighlightedRect] = react.useState(
+    null
+  );
+  const stylesInjected = react.useRef(false);
+  const feedback = useFeedback();
+  const feedbackResetRef = react.useRef(feedback.reset);
+  feedbackResetRef.current = feedback.reset;
+  const inspector = useElementSelector(state === "inspecting");
+  react.useEffect(() => {
+    if (stylesInjected.current) return;
+    if (typeof document === "undefined") return;
+    const existing = document.querySelector("[data-devtools-styles]");
+    if (existing) return;
+    const style = document.createElement("style");
+    style.setAttribute("data-devtools-styles", "");
+    style.textContent = KEYFRAMES;
+    document.head.appendChild(style);
+    stylesInjected.current = true;
+    return () => {
+      style.remove();
+      stylesInjected.current = false;
+    };
+  }, []);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  react.useEffect(() => {
+    if (!mounted || !enabled) return;
+    feedback.changes.forEach((change) => {
+      const el = document.querySelector(change.selector);
+      if (el) {
+        el.style.outline = "2px solid rgba(59, 130, 246, 0.5)";
+        el.style.outlineOffset = "2px";
+      }
+    });
+  }, [mounted, enabled]);
+  react.useEffect(() => {
+    if (enabled && state === "hidden") {
+      setState("inspecting");
+    } else if (!enabled && state !== "hidden") {
+      setState("hidden");
+      feedbackResetRef.current();
+      setSelectedElement(null);
+    }
+  }, [enabled, state]);
+  const MAX_FEEDBACK = 5;
+  react.useEffect(() => {
+    if (inspector.selectedElement) {
+      const el = inspector.selectedElement;
+      const selector = getCssSelector(el);
+      const existing = feedback.changes.find((c) => c.selector === selector);
+      if (!existing && feedback.changes.length >= MAX_FEEDBACK) {
+        setToast({
+          message: `Limit reached (${MAX_FEEDBACK}). Copy feedback & create a ClickUp task, then reset to continue.`,
+          variant: "warning"
+        });
+        inspector.clearSelection();
+        return;
+      }
+      setSelectedElement(el);
+      setState("editing");
+      if (!existing) {
+        const isImage = el.tagName.toLowerCase() === "img";
+        feedback.addChange({
+          id: "",
+          selector,
+          element: getElementLabel(el),
+          type: isImage ? "image" : "text",
+          original: isImage ? el.src : (el.textContent || "").trim().slice(0, 200),
+          modified: "",
+          note: ""
+        });
+      }
+      inspector.clearSelection();
+    }
+  }, [inspector.selectedElement, inspector.clearSelection]);
+  react.useEffect(() => {
+    if (state === "hidden") return;
+    const handleLinkClick = (e) => {
+      const target = e.target;
+      if (isDevToolsElement(target)) return;
+      const anchor = target.closest("a");
+      if (anchor) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener("click", handleLinkClick, true);
+    return () => document.removeEventListener("click", handleLinkClick, true);
+  }, [state]);
+  const handleHide = react.useCallback(() => {
+    feedbackResetRef.current();
+    setSelectedElement(null);
+    setEnabled(null);
+  }, [setEnabled]);
+  const handleStartInspecting = react.useCallback(() => {
+    setState((s) => s === "inspecting" ? "idle" : "inspecting");
+    setSelectedElement(null);
+    setHighlightedRect(null);
+  }, []);
+  const handleBack = react.useCallback(() => {
+    setSelectedElement(null);
+    setState("inspecting");
+  }, []);
+  const handleCopyFeedback = react.useCallback(async () => {
+    const payload = feedback.getPayload();
+    const success = await copyFeedbackToClipboard(payload);
+    if (success) {
+      setToast({
+        message: "Feedback copied!",
+        variant: "success",
+        linkUrl: requestUrl,
+        linkText: "Submit here \u2192"
+      });
+    } else {
+      setToast({ message: "Failed to copy \u2014 try again", variant: "warning" });
+    }
+  }, [feedback, requestUrl]);
+  const handleReset = react.useCallback(() => {
+    feedbackResetRef.current();
+    setSelectedElement(null);
+    setState("inspecting");
+  }, []);
+  const handleView = react.useCallback(() => {
+    setState((s) => s === "viewing" ? "inspecting" : "viewing");
+    setSelectedElement(null);
+    setHighlightedRect(null);
+  }, []);
+  const scrollRafRef = react.useRef(0);
+  const handleViewHover = react.useCallback((change) => {
+    cancelAnimationFrame(scrollRafRef.current);
+    if (!change) {
+      setHighlightedRect(null);
+      return;
+    }
+    const el = document.querySelector(change.selector);
+    if (!el) {
+      setHighlightedRect(null);
+      return;
+    }
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    let frames = 0;
+    const updateRect = () => {
+      const r = el.getBoundingClientRect();
+      setHighlightedRect({
+        top: r.top,
+        left: r.left,
+        width: r.width,
+        height: r.height
+      });
+      frames++;
+      if (frames < 60) {
+        scrollRafRef.current = requestAnimationFrame(updateRect);
+      }
+    };
+    updateRect();
+  }, []);
+  const handleDeleteChange = react.useCallback(
+    (changeId) => {
+      feedback.resetElement(changeId);
+    },
+    [feedback.resetElement]
+  );
+  const handleSaveNote = react.useCallback(
+    (note) => {
+      if (selectedElement) {
+        const selector = getCssSelector(selectedElement);
+        const change = feedback.changes.find((c) => c.selector === selector);
+        if (change) {
+          feedback.updateNote(change.id, note);
+        }
+      }
+      setSelectedElement(null);
+      setState("inspecting");
+    },
+    [selectedElement, feedback.changes, feedback.updateNote]
+  );
+  const handleNoteClose = react.useCallback(() => {
+    if (selectedElement) {
+      const selector = getCssSelector(selectedElement);
+      const change = feedback.changes.find((c) => c.selector === selector);
+      if (change && !change.note && !change.modified) {
+        feedback.resetElement(change.id);
+      }
+    }
+    setSelectedElement(null);
+    setState("inspecting");
+  }, [selectedElement, feedback.changes, feedback.resetElement]);
+  const handleElementReset = react.useCallback(() => {
+    if (selectedElement) {
+      const selector = getCssSelector(selectedElement);
+      const change = feedback.changes.find((c) => c.selector === selector);
+      if (change) {
+        feedback.resetElement(change.id);
+      }
+    }
+    setSelectedElement(null);
+    setState("inspecting");
+  }, [selectedElement, feedback.changes, feedback.resetElement]);
+  if (!mounted || !enabled || typeof window === "undefined") return null;
+  const showToolbar = state !== "hidden";
+  const showInspector = state === "inspecting";
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-devtools-ignore": true, children: [
+      showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
+        Toolbar,
+        {
+          state,
+          changesCount: feedback.changes.length,
+          onSelectElement: handleStartInspecting,
+          onCopyFeedback: handleCopyFeedback,
+          onView: handleView,
+          onReset: handleReset,
+          onHide: handleHide,
+          onBack: handleBack,
+          isViewing: state === "viewing",
+          requestUrl,
+          zIndex,
+          position
+        }
+      ),
+      showInspector && /* @__PURE__ */ jsxRuntime.jsx(
+        Inspector,
+        {
+          rect: inspector.rect,
+          label: inspector.label,
+          zIndex
+        }
+      ),
+      highlightedRect && state === "viewing" && /* @__PURE__ */ jsxRuntime.jsx(Inspector, { rect: highlightedRect, label: "", zIndex }),
+      selectedElement && state === "editing" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Editor,
+          {
+            element: selectedElement,
+            onTrackOriginal: feedback.trackOriginal,
+            onAddChange: feedback.addChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NotePopup,
+          {
+            element: selectedElement,
+            initialNote: feedback.changes.find(
+              (c) => c.selector === getCssSelector(selectedElement)
+            )?.note ?? "",
+            onSave: handleSaveNote,
+            onClose: handleNoteClose,
+            zIndex
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ElementResetButton,
+          {
+            element: selectedElement,
+            onReset: handleElementReset,
+            zIndex
+          }
+        )
+      ] }),
+      state === "viewing" && /* @__PURE__ */ jsxRuntime.jsx(
+        ViewPanel,
+        {
+          changes: feedback.changes,
+          onDelete: handleDeleteChange,
+          onHover: handleViewHover,
+          zIndex,
+          position
+        }
+      ),
+      toast && /* @__PURE__ */ jsxRuntime.jsx(
+        Toast,
+        {
+          message: toast.message,
+          variant: toast.variant,
+          duration: toast.linkUrl ? 6e3 : toast.variant === "warning" ? 5e3 : 3e3,
+          linkUrl: toast.linkUrl,
+          linkText: toast.linkText,
+          onDone: () => setToast(null),
+          zIndex,
+          position
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+exports.DevTools = DevTools;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map