agentation 0.0.2 → 1.0.0

package/dist/index.js

@@ -0,0 +1,3380 @@
+"use client";
+"use strict";
+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, {
+  Agentation: () => PageFeedbackToolbarCSS,
+  AgentationCSS: () => PageFeedbackToolbarCSS,
+  AnimatedBunny: () => AnimatedBunny,
+  AnnotationPopup: () => AnnotationPopup,
+  AnnotationPopupCSS: () => AnnotationPopupCSS,
+  AnnotationPopupPresence: () => AnnotationPopupPresence,
+  IconChatEllipsis: () => IconChatEllipsis,
+  IconCheck: () => IconCheck,
+  IconCheckSmall: () => IconCheckSmall,
+  IconCheckSmallAnimated: () => IconCheckSmallAnimated,
+  IconCheckmark: () => IconCheckmark,
+  IconCheckmarkCircle: () => IconCheckmarkCircle,
+  IconCheckmarkLarge: () => IconCheckmarkLarge,
+  IconClose: () => IconClose,
+  IconCopyAlt: () => IconCopyAlt,
+  IconCopyAnimated: () => IconCopyAnimated,
+  IconEye: () => IconEye,
+  IconEyeAlt: () => IconEyeAlt,
+  IconEyeAnimated: () => IconEyeAnimated,
+  IconEyeClosed: () => IconEyeClosed,
+  IconEyeMinus: () => IconEyeMinus,
+  IconGear: () => IconGear,
+  IconHelp: () => IconHelp,
+  IconListSparkle: () => IconListSparkle,
+  IconMoon: () => IconMoon,
+  IconPause: () => IconPause,
+  IconPauseAlt: () => IconPauseAlt,
+  IconPausePlayAnimated: () => IconPausePlayAnimated,
+  IconPlayAlt: () => IconPlayAlt,
+  IconPlus: () => IconPlus,
+  IconSun: () => IconSun,
+  IconTrashAlt: () => IconTrashAlt,
+  IconXmark: () => IconXmark,
+  IconXmarkLarge: () => IconXmarkLarge,
+  PageFeedbackToolbarCSS: () => PageFeedbackToolbarCSS,
+  getElementClasses: () => getElementClasses,
+  getElementPath: () => getElementPath,
+  getNearbyText: () => getNearbyText,
+  getStorageKey: () => getStorageKey,
+  identifyAnimationElement: () => identifyAnimationElement,
+  identifyElement: () => identifyElement,
+  loadAnnotations: () => loadAnnotations,
+  saveAnnotations: () => saveAnnotations
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/page-toolbar-css/index.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/annotation-popup-css/index.tsx
+var import_react = require("react");
+
+// src/components/annotation-popup-css/styles.module.scss
+var css = '@keyframes styles-module__popupEnter___AuQDN {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.95) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__popupExit___JJKQX {\n  from {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.95) translateY(4px);\n  }\n}\n@keyframes styles-module__shake___jdbWe {\n  0%, 100% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(0);\n  }\n  20% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);\n  }\n  40% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(3px);\n  }\n  60% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);\n  }\n  80% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(2px);\n  }\n}\n.styles-module__popup___IhzrD {\n  position: fixed;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 0.75rem 1rem 14px;\n  background: #1a1a1a;\n  border-radius: 16px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  cursor: default;\n  z-index: 100001;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  will-change: transform, opacity;\n  contain: layout style;\n  opacity: 0;\n}\n.styles-module__popup___IhzrD.styles-module__enter___L7U7N {\n  animation: styles-module__popupEnter___AuQDN 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w {\n  opacity: 1;\n  transform: translateX(-50%) scale(1) translateY(0);\n}\n.styles-module__popup___IhzrD.styles-module__exit___5eGjE {\n  animation: styles-module__popupExit___JJKQX 0.15s ease-in forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w.styles-module__shake___jdbWe {\n  animation: styles-module__shake___jdbWe 0.25s ease-out;\n}\n\n.styles-module__header___wWsSi {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n}\n\n.styles-module__element___fTV2z {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.65);\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.styles-module__timestamp___Dtpsv {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.35);\n  font-variant-numeric: tabular-nums;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n}\n\n.styles-module__quote___mcMmQ {\n  font-size: 0.6875rem;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.5);\n  margin-bottom: 0.5rem;\n  padding: 0.4rem 0.5rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.25rem;\n  line-height: 1.45;\n}\n\n.styles-module__textarea___jrSae {\n  width: 100%;\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 8px;\n  resize: none;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.styles-module__textarea___jrSae:focus {\n  border-color: #3c82f7;\n}\n.styles-module__textarea___jrSae.styles-module__green___99l3h:focus {\n  border-color: #34C759;\n}\n.styles-module__textarea___jrSae::placeholder {\n  color: rgba(255, 255, 255, 0.35);\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar {\n  width: 6px;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-track {\n  background: transparent;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n\n.styles-module__actions___D6x3f {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.styles-module__cancel___hRjnL,\n.styles-module__submit___K-mIR {\n  padding: 0.4rem 0.875rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;\n}\n\n.styles-module__cancel___hRjnL {\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n}\n.styles-module__cancel___hRjnL:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.styles-module__submit___K-mIR {\n  color: white;\n}\n.styles-module__submit___K-mIR:hover:not(:disabled) {\n  filter: brightness(0.9);\n}\n.styles-module__submit___K-mIR:disabled {\n  cursor: not-allowed;\n}\n\n.styles-module__light___6AaSQ.styles-module__popup___IhzrD {\n  background: #fff;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n.styles-module__light___6AaSQ .styles-module__element___fTV2z {\n  color: rgba(0, 0, 0, 0.6);\n}\n.styles-module__light___6AaSQ .styles-module__timestamp___Dtpsv {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__quote___mcMmQ {\n  color: rgba(0, 0, 0, 0.55);\n  background: rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae {\n  background: rgba(0, 0, 0, 0.03);\n  color: #1a1a1a;\n  border-color: rgba(0, 0, 0, 0.12);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::placeholder {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL:hover {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.75);\n}';
+var classNames = { "popup": "styles-module__popup___IhzrD", "enter": "styles-module__enter___L7U7N", "popupEnter": "styles-module__popupEnter___AuQDN", "entered": "styles-module__entered___COX-w", "exit": "styles-module__exit___5eGjE", "popupExit": "styles-module__popupExit___JJKQX", "shake": "styles-module__shake___jdbWe", "header": "styles-module__header___wWsSi", "element": "styles-module__element___fTV2z", "timestamp": "styles-module__timestamp___Dtpsv", "quote": "styles-module__quote___mcMmQ", "textarea": "styles-module__textarea___jrSae", "green": "styles-module__green___99l3h", "actions": "styles-module__actions___D6x3f", "cancel": "styles-module__cancel___hRjnL", "submit": "styles-module__submit___K-mIR", "light": "styles-module__light___6AaSQ" };
+if (typeof document !== "undefined") {
+  let style = document.getElementById("feedback-tool-styles-annotation-popup-css-styles");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "feedback-tool-styles-annotation-popup-css-styles";
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+}
+var styles_module_default = classNames;
+
+// src/components/annotation-popup-css/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AnnotationPopupCSS = (0, import_react.forwardRef)(
+  function AnnotationPopupCSS2({
+    element,
+    timestamp,
+    selectedText,
+    placeholder = "What should change?",
+    initialValue = "",
+    submitLabel = "Add",
+    onSubmit,
+    onCancel,
+    style,
+    accentColor = "#3c82f7",
+    isExiting = false,
+    lightMode = false
+  }, ref) {
+    const [text, setText] = (0, import_react.useState)(initialValue);
+    const [isShaking, setIsShaking] = (0, import_react.useState)(false);
+    const [animState, setAnimState] = (0, import_react.useState)("initial");
+    const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+    const textareaRef = (0, import_react.useRef)(null);
+    const popupRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      if (isExiting && animState !== "exit") {
+        setAnimState("exit");
+      }
+    }, [isExiting, animState]);
+    (0, import_react.useEffect)(() => {
+      requestAnimationFrame(() => {
+        setAnimState("enter");
+      });
+      const enterTimer = setTimeout(() => {
+        setAnimState("entered");
+      }, 200);
+      const focusTimer = setTimeout(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+          textarea.focus();
+          textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+          textarea.scrollTop = textarea.scrollHeight;
+        }
+      }, 50);
+      return () => {
+        clearTimeout(enterTimer);
+        clearTimeout(focusTimer);
+      };
+    }, []);
+    const shake = (0, import_react.useCallback)(() => {
+      setIsShaking(true);
+      setTimeout(() => {
+        setIsShaking(false);
+        textareaRef.current?.focus();
+      }, 250);
+    }, []);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      shake
+    }), [shake]);
+    const handleCancel = (0, import_react.useCallback)(() => {
+      setAnimState("exit");
+      setTimeout(() => {
+        onCancel();
+      }, 150);
+    }, [onCancel]);
+    const handleSubmit = (0, import_react.useCallback)(() => {
+      if (!text.trim()) return;
+      onSubmit(text.trim());
+    }, [text, onSubmit]);
+    const handleKeyDown = (0, import_react.useCallback)(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+        if (e.key === "Escape") {
+          handleCancel();
+        }
+      },
+      [handleSubmit, handleCancel]
+    );
+    const popupClassName = [
+      styles_module_default.popup,
+      lightMode ? styles_module_default.light : "",
+      animState === "enter" ? styles_module_default.enter : "",
+      animState === "entered" ? styles_module_default.entered : "",
+      animState === "exit" ? styles_module_default.exit : "",
+      isShaking ? styles_module_default.shake : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: popupRef,
+        className: popupClassName,
+        "data-annotation-popup": true,
+        style,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles_module_default.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.element, children: element }),
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.timestamp, children: timestamp })
+          ] }),
+          selectedText && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles_module_default.quote, children: [
+            "\u201C",
+            selectedText.slice(0, 80),
+            selectedText.length > 80 ? "..." : "",
+            "\u201D"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: styles_module_default.textarea,
+              style: { borderColor: isFocused ? accentColor : void 0 },
+              placeholder,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              rows: 2,
+              onKeyDown: handleKeyDown
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles_module_default.actions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: styles_module_default.cancel, onClick: handleCancel, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: styles_module_default.submit,
+                style: {
+                  backgroundColor: accentColor,
+                  opacity: text.trim() ? 1 : 0.4
+                },
+                onClick: handleSubmit,
+                disabled: !text.trim(),
+                children: submitLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconClose = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "path",
+  {
+    d: "M4 4l8 8M12 4l-8 8",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }
+) });
+var IconPlus = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "path",
+  {
+    d: "M8 3v10M3 8h10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }
+) });
+var IconCheck = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "path",
+  {
+    d: "M3 8l3.5 3.5L13 5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IconCheckSmall = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "path",
+  {
+    d: "M3.9375 7L6.125 9.1875L10.5 4.8125",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IconListSparkle = ({
+  size = 24,
+  style = {}
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", style, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_list_sparkle)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M11.5 12L5.5 12",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M18.5 6.75L5.5 6.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M9.25 17.25L5.5 17.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M16 12.75L16.5179 13.9677C16.8078 14.6494 17.3506 15.1922 18.0323 15.4821L19.25 16L18.0323 16.5179C17.3506 16.8078 16.8078 17.3506 16.5179 18.0323L16 19.25L15.4821 18.0323C15.1922 17.3506 14.6494 16.8078 13.9677 16.5179L12.75 16L13.9677 15.4821C14.6494 15.1922 15.1922 14.6494 15.4821 13.9677L16 12.75Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_list_sparkle", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var IconHelp = ({ size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M10 16.0417C6.66328 16.0417 3.95834 13.3367 3.95834 10C3.95834 6.66328 6.66328 3.95833 10 3.95833C13.3367 3.95833 16.0417 6.66328 16.0417 10C16.0417 13.3367 13.3367 16.0417 10 16.0417Z",
+      stroke: "currentColor",
+      strokeOpacity: "0.2",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M8.24188 8.18736C8.38392 7.78357 8.66429 7.44309 9.03331 7.22621C9.40234 7.00933 9.83621 6.93005 10.2581 7.00241C10.68 7.07477 11.0626 7.29411 11.3383 7.62157C11.6139 7.94903 11.7648 8.36348 11.7642 8.79152C11.7642 9.99986 10 10.604 10 10.604V10.8333",
+      stroke: "currentColor",
+      strokeOpacity: "0.2",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M10 13.0208H10.006",
+      stroke: "currentColor",
+      strokeOpacity: "0.2",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var IconCheckSmallAnimated = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+      @keyframes checkDraw {
+        0% {
+          stroke-dashoffset: 12;
+        }
+        100% {
+          stroke-dashoffset: 0;
+        }
+      }
+      @keyframes checkBounce {
+        0% {
+          transform: scale(0.5);
+          opacity: 0;
+        }
+        50% {
+          transform: scale(1.12);
+          opacity: 1;
+        }
+        75% {
+          transform: scale(0.95);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+      .check-path-animated {
+        stroke-dasharray: 12;
+        stroke-dashoffset: 0;
+        transform-origin: center;
+        animation: checkDraw 0.18s ease-out, checkBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+    ` }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      className: "check-path-animated",
+      d: "M3.9375 7L6.125 9.1875L10.5 4.8125",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var IconCopyAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M4.75 11.25C4.75 10.4216 5.42157 9.75 6.25 9.75H12.75C13.5784 9.75 14.25 10.4216 14.25 11.25V17.75C14.25 18.5784 13.5784 19.25 12.75 19.25H6.25C5.42157 19.25 4.75 18.5784 4.75 17.75V11.25Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M17.25 14.25H17.75C18.5784 14.25 19.25 13.5784 19.25 12.75V6.25C19.25 5.42157 18.5784 4.75 17.75 4.75H11.25C10.4216 4.75 9.75 5.42157 9.75 6.25V6.75",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var IconCopyAnimated = ({ size = 24, copied = false }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+      .copy-icon, .check-icon {
+        transition: opacity 0.2s ease, transform 0.2s ease;
+      }
+    ` }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: "copy-icon", style: { opacity: copied ? 0 : 1, transform: copied ? "scale(0.8)" : "scale(1)", transformOrigin: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M4.75 11.25C4.75 10.4216 5.42157 9.75 6.25 9.75H12.75C13.5784 9.75 14.25 10.4216 14.25 11.25V17.75C14.25 18.5784 13.5784 19.25 12.75 19.25H6.25C5.42157 19.25 4.75 18.5784 4.75 17.75V11.25Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M17.25 14.25H17.75C18.5784 14.25 19.25 13.5784 19.25 12.75V6.25C19.25 5.42157 18.5784 4.75 17.75 4.75H11.25C10.4216 4.75 9.75 5.42157 9.75 6.25V6.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: "check-icon", style: { opacity: copied ? 1 : 0, transform: copied ? "scale(1)" : "scale(0.8)", transformOrigin: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M12 20C7.58172 20 4 16.4182 4 12C4 7.58172 7.58172 4 12 4C16.4182 4 20 7.58172 20 12C20 16.4182 16.4182 20 12 20Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M15 10L11 14.25L9.25 12.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] })
+] });
+var IconEye = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M4.91516 12.7108C4.63794 12.2883 4.63705 11.7565 4.91242 11.3328C5.84146 9.9033 8.30909 6.74994 12 6.74994C15.6909 6.74994 18.1585 9.9033 19.0876 11.3328C19.3629 11.7565 19.3621 12.2883 19.0848 12.7108C18.1537 14.13 15.6873 17.2499 12 17.2499C8.31272 17.2499 5.8463 14.13 4.91516 12.7108Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M12 14.25C13.2426 14.25 14.25 13.2426 14.25 12C14.25 10.7574 13.2426 9.75 12 9.75C10.7574 9.75 9.75 10.7574 9.75 12C9.75 13.2426 10.7574 14.25 12 14.25Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var IconEyeAlt = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M3.91752 12.7539C3.65127 12.2996 3.65037 11.7515 3.9149 11.2962C4.9042 9.59346 7.72688 5.49994 12 5.49994C16.2731 5.49994 19.0958 9.59346 20.0851 11.2962C20.3496 11.7515 20.3487 12.2996 20.0825 12.7539C19.0908 14.4459 16.2694 18.4999 12 18.4999C7.73064 18.4999 4.90918 14.4459 3.91752 12.7539Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M12 14.8261C13.5608 14.8261 14.8261 13.5608 14.8261 12C14.8261 10.4392 13.5608 9.17392 12 9.17392C10.4392 9.17392 9.17391 10.4392 9.17391 12C9.17391 13.5608 10.4392 14.8261 12 14.8261Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var IconEyeClosed = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M18.6025 9.28503C18.9174 8.9701 19.4364 8.99481 19.7015 9.35271C20.1484 9.95606 20.4943 10.507 20.7342 10.9199C21.134 11.6086 21.1329 12.4454 20.7303 13.1328C20.2144 14.013 19.2151 15.5225 17.7723 16.8193C16.3293 18.1162 14.3852 19.2497 12.0008 19.25C11.4192 19.25 10.8638 19.1823 10.3355 19.0613C9.77966 18.934 9.63498 18.2525 10.0382 17.8493C10.2412 17.6463 10.5374 17.573 10.8188 17.6302C11.1993 17.7076 11.5935 17.75 12.0008 17.75C13.8848 17.7497 15.4867 16.8568 16.7693 15.7041C18.0522 14.5511 18.9606 13.1867 19.4363 12.375C19.5656 12.1543 19.5659 11.8943 19.4373 11.6729C19.2235 11.3049 18.921 10.8242 18.5364 10.3003C18.3085 9.98991 18.3302 9.5573 18.6025 9.28503ZM12.0008 4.75C12.5814 4.75006 13.1358 4.81803 13.6632 4.93953C14.2182 5.06741 14.362 5.74812 13.9593 6.15091C13.7558 6.35435 13.4589 6.42748 13.1771 6.36984C12.7983 6.29239 12.4061 6.25006 12.0008 6.25C10.1167 6.25 8.51415 7.15145 7.23028 8.31543C5.94678 9.47919 5.03918 10.8555 4.56426 11.6729C4.43551 11.8945 4.43582 12.1542 4.56524 12.375C4.77587 12.7343 5.07189 13.2012 5.44718 13.7105C5.67623 14.0213 5.65493 14.4552 5.38193 14.7282C5.0671 15.0431 4.54833 15.0189 4.28292 14.6614C3.84652 14.0736 3.50813 13.5369 3.27129 13.1328C2.86831 12.4451 2.86717 11.6088 3.26739 10.9199C3.78185 10.0345 4.77959 8.51239 6.22247 7.2041C7.66547 5.89584 9.61202 4.75 12.0008 4.75Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M5 19L19 5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var IconEyeAnimated = ({ size = 24, isOpen = true }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+      .eye-open, .eye-closed {
+        transition: opacity 0.2s ease;
+      }
+    ` }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: "eye-open", style: { opacity: isOpen ? 1 : 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M3.91752 12.7539C3.65127 12.2996 3.65037 11.7515 3.9149 11.2962C4.9042 9.59346 7.72688 5.49994 12 5.49994C16.2731 5.49994 19.0958 9.59346 20.0851 11.2962C20.3496 11.7515 20.3487 12.2996 20.0825 12.7539C19.0908 14.4459 16.2694 18.4999 12 18.4999C7.73064 18.4999 4.90918 14.4459 3.91752 12.7539Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M12 14.8261C13.5608 14.8261 14.8261 13.5608 14.8261 12C14.8261 10.4392 13.5608 9.17392 12 9.17392C10.4392 9.17392 9.17391 10.4392 9.17391 12C9.17391 13.5608 10.4392 14.8261 12 14.8261Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: "eye-closed", style: { opacity: isOpen ? 0 : 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M18.6025 9.28503C18.9174 8.9701 19.4364 8.99481 19.7015 9.35271C20.1484 9.95606 20.4943 10.507 20.7342 10.9199C21.134 11.6086 21.1329 12.4454 20.7303 13.1328C20.2144 14.013 19.2151 15.5225 17.7723 16.8193C16.3293 18.1162 14.3852 19.2497 12.0008 19.25C11.4192 19.25 10.8638 19.1823 10.3355 19.0613C9.77966 18.934 9.63498 18.2525 10.0382 17.8493C10.2412 17.6463 10.5374 17.573 10.8188 17.6302C11.1993 17.7076 11.5935 17.75 12.0008 17.75C13.8848 17.7497 15.4867 16.8568 16.7693 15.7041C18.0522 14.5511 18.9606 13.1867 19.4363 12.375C19.5656 12.1543 19.5659 11.8943 19.4373 11.6729C19.2235 11.3049 18.921 10.8242 18.5364 10.3003C18.3085 9.98991 18.3302 9.5573 18.6025 9.28503ZM12.0008 4.75C12.5814 4.75006 13.1358 4.81803 13.6632 4.93953C14.2182 5.06741 14.362 5.74812 13.9593 6.15091C13.7558 6.35435 13.4589 6.42748 13.1771 6.36984C12.7983 6.29239 12.4061 6.25006 12.0008 6.25C10.1167 6.25 8.51415 7.15145 7.23028 8.31543C5.94678 9.47919 5.03918 10.8555 4.56426 11.6729C4.43551 11.8945 4.43582 12.1542 4.56524 12.375C4.77587 12.7343 5.07189 13.2012 5.44718 13.7105C5.67623 14.0213 5.65493 14.4552 5.38193 14.7282C5.0671 15.0431 4.54833 15.0189 4.28292 14.6614C3.84652 14.0736 3.50813 13.5369 3.27129 13.1328C2.86831 12.4451 2.86717 11.6088 3.26739 10.9199C3.78185 10.0345 4.77959 8.51239 6.22247 7.2041C7.66547 5.89584 9.61202 4.75 12.0008 4.75Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M5 19L19 5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  ] })
+] });
+var IconPausePlayAnimated = ({ size = 24, isPaused = false }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+      .pause-bar, .play-triangle {
+        transition: opacity 0.15s ease;
+      }
+    ` }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      className: "pause-bar",
+      d: "M8 6L8 18",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      style: { opacity: isPaused ? 0 : 1 }
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      className: "pause-bar",
+      d: "M16 18L16 6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      style: { opacity: isPaused ? 0 : 1 }
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      className: "play-triangle",
+      d: "M17.75 10.701C18.75 11.2783 18.75 12.7217 17.75 13.299L8.75 18.4952C7.75 19.0725 6.5 18.3509 6.5 17.1962L6.5 6.80384C6.5 5.64914 7.75 4.92746 8.75 5.50481L17.75 10.701Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      style: { opacity: isPaused ? 1 : 0 }
+    }
+  )
+] });
+var IconEyeMinus = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M4.91516 12.7108C4.63794 12.2883 4.63705 11.7565 4.91242 11.3328C5.84146 9.9033 8.30909 6.74994 12 6.74994C15.6909 6.74994 18.1585 9.9033 19.0876 11.3328C19.3629 11.7565 19.3621 12.2883 19.0848 12.7108C18.1537 14.13 15.6873 17.2499 12 17.2499C8.31272 17.2499 5.8463 14.13 4.91516 12.7108Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M9 12H15",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var IconGear = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M10.6504 5.81117C10.9939 4.39628 13.0061 4.39628 13.3496 5.81117C13.5715 6.72517 14.6187 7.15891 15.4219 6.66952C16.6652 5.91193 18.0881 7.33479 17.3305 8.57815C16.8411 9.38134 17.2748 10.4285 18.1888 10.6504C19.6037 10.9939 19.6037 13.0061 18.1888 13.3496C17.2748 13.5715 16.8411 14.6187 17.3305 15.4219C18.0881 16.6652 16.6652 18.0881 15.4219 17.3305C14.6187 16.8411 13.5715 17.2748 13.3496 18.1888C13.0061 19.6037 10.9939 19.6037 10.6504 18.1888C10.4285 17.2748 9.38135 16.8411 8.57815 17.3305C7.33479 18.0881 5.91193 16.6652 6.66952 15.4219C7.15891 14.6187 6.72517 13.5715 5.81117 13.3496C4.39628 13.0061 4.39628 10.9939 5.81117 10.6504C6.72517 10.4285 7.15891 9.38134 6.66952 8.57815C5.91193 7.33479 7.33479 5.91192 8.57815 6.66952C9.38135 7.15891 10.4285 6.72517 10.6504 5.81117Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" })
+] });
+var IconPauseAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M9.25 5.75C9.80228 5.75 10.25 6.19772 10.25 6.75L10.25 17.25C10.25 17.8023 9.80228 18.25 9.25 18.25L6.75 18.25C6.19772 18.25 5.75 17.8023 5.75 17.25L5.75 6.75C5.75 6.19772 6.19772 5.75 6.75 5.75L9.25 5.75Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M17.25 5.75C17.8023 5.75 18.25 6.19772 18.25 6.75L18.25 17.25C18.25 17.8023 17.8023 18.25 17.25 18.25L14.75 18.25C14.1977 18.25 13.75 17.8023 13.75 17.25L13.75 6.75C13.75 6.19772 14.1977 5.75 14.75 5.75L17.25 5.75Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5"
+    }
+  )
+] });
+var IconPause = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M8 6L8 18",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M16 18L16 6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var IconPlayAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "path",
+  {
+    d: "M17.75 10.701C18.75 11.2783 18.75 12.7217 17.75 13.299L8.75 18.4952C7.75 19.0725 6.5 18.3509 6.5 17.1962L6.5 6.80384C6.5 5.64914 7.75 4.92746 8.75 5.50481L17.75 10.701Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var IconTrashAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M10 11.5L10.125 15.5",
+      stroke: "currentColor",
+      strokeOpacity: "1",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M14 11.5L13.87 15.5",
+      stroke: "currentColor",
+      strokeOpacity: "1",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M9 7.5V6.25C9 5.42157 9.67157 4.75 10.5 4.75H13.5C14.3284 4.75 15 5.42157 15 6.25V7.5",
+      stroke: "currentColor",
+      strokeOpacity: "1",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M5.5 7.75H18.5",
+      stroke: "currentColor",
+      strokeOpacity: "1",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M6.75 7.75L7.11691 16.189C7.16369 17.2649 7.18708 17.8028 7.41136 18.2118C7.60875 18.5717 7.91211 18.8621 8.28026 19.0437C8.69854 19.25 9.23699 19.25 10.3139 19.25H13.6861C14.763 19.25 15.3015 19.25 15.7197 19.0437C16.0879 18.8621 16.3912 18.5717 16.5886 18.2118C16.8129 17.8028 16.8363 17.2649 16.8831 16.189L17.25 7.75",
+      stroke: "currentColor",
+      strokeOpacity: "1",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var IconChatEllipsis = ({
+  size = 16,
+  style = {}
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", style, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M18.8875 19.25L19.6112 19.0533C19.6823 19.3148 19.6068 19.5943 19.4137 19.7844C19.2206 19.9746 18.9399 20.0457 18.6795 19.9706L18.8875 19.25ZM14.9631 18.244L15.263 18.9314L14.9631 18.244ZM18.0914 15.6309L17.4669 15.2156L18.0914 15.6309ZM4.75 11.8041H5.5C5.5 15.2664 8.39065 18.1081 12 18.1081V18.8581V19.6081C7.60123 19.6081 4 16.1334 4 11.8041H4.75ZM19.25 11.8041H18.5C18.5 8.34166 15.6094 5.5 12 5.5V4.75V4C16.3988 4 20 7.47476 20 11.8041H19.25ZM12 4.75V5.5C8.39065 5.5 5.5 8.34166 5.5 11.8041H4.75H4C4 7.47476 7.60123 4 12 4V4.75ZM18.0914 15.6309L17.4669 15.2156C18.1213 14.2315 18.5 13.0612 18.5 11.8041H19.25H20C20 13.3681 19.5276 14.8257 18.716 16.0462L18.0914 15.6309ZM18.8875 19.25L18.1638 19.4467L17.2953 16.2517L18.019 16.055L18.7428 15.8583L19.6112 19.0533L18.8875 19.25ZM12 18.8581V18.1081C12.9509 18.1081 13.8518 17.9105 14.6632 17.5565L14.9631 18.244L15.263 18.9314C14.2652 19.3667 13.1603 19.6081 12 19.6081V18.8581ZM15.3144 18.2188L15.5224 17.4982L19.0955 18.5294L18.8875 19.25L18.6795 19.9706L15.1064 18.9394L15.3144 18.2188ZM14.9631 18.244L14.6632 17.5565C14.925 17.4423 15.2286 17.4134 15.5224 17.4982L15.3144 18.2188L15.1064 18.9394C15.1677 18.957 15.223 18.9489 15.263 18.9314L14.9631 18.244ZM18.0914 15.6309L18.716 16.0462C18.7451 16.0024 18.7636 15.9351 18.7428 15.8583L18.019 16.055L17.2953 16.2517C17.1957 15.8853 17.2716 15.5093 17.4669 15.2156L18.0914 15.6309Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "15", cy: "11.75", r: "1", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "11.75", r: "1", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "9", cy: "11.75", r: "1", fill: "currentColor" })
+] });
+var IconCheckmark = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { clipPath: "url(#clip0_2_45)", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M16.25 8.75L10 15.25L7.25 12.25",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_2_45", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var IconCheckmarkLarge = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { clipPath: "url(#clip0_2_37)", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M17.5962 7.75L9.42308 16.25L6.15385 12.6538",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_2_37", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var IconCheckmarkCircle = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_checkmark_circle)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M12 20C7.58172 20 4 16.4182 4 12C4 7.58172 7.58172 4 12 4C16.4182 4 20 7.58172 20 12C20 16.4182 16.4182 20 12 20Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M15 10L11 14.25L9.25 12.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_checkmark_circle", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var IconXmark = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_2_53)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M16.25 16.25L7.75 7.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M7.75 16.25L16.25 7.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_2_53", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var IconXmarkLarge = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_1_660)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M17.25 17.25L6.75 6.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M6.75 17.25L17.25 6.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_1_660", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var IconSun = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5V3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 21V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16.95 7.05L18.36 5.64", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5.64 18.36L7.05 16.95", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 12H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12H5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16.95 16.95L18.36 18.36", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5.64 5.64L7.05 7.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var IconMoon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "path",
+  {
+    d: "M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var AnimatedBunny = ({
+  size = 20,
+  color = "#4C74FF"
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+      @keyframes bunnyEnterEar {
+        0% { opacity: 0; transform: scale(0.8); }
+        100% { opacity: 1; transform: scale(1); }
+      }
+      @keyframes bunnyEnterFace {
+        0% { opacity: 0; transform: scale(0.9); }
+        100% { opacity: 1; transform: scale(1); }
+      }
+      @keyframes bunnyEnterEye {
+        0% { opacity: 0; transform: scale(0.5); }
+        100% { opacity: 1; transform: scale(1); }
+      }
+      @keyframes leftEyeLook {
+        0%, 8% { transform: translate(0, 0); }
+        10%, 18% { transform: translate(1.5px, 0); }
+        20%, 22% { transform: translate(1.5px, 0) scaleY(0.1); }
+        24%, 32% { transform: translate(1.5px, 0); }
+        35%, 48% { transform: translate(-0.8px, -0.6px); }
+        52%, 54% { transform: translate(0, 0) scaleY(0.1); }
+        56%, 68% { transform: translate(0, 0); }
+        72%, 82% { transform: translate(-0.5px, 0.5px); }
+        85%, 100% { transform: translate(0, 0); }
+      }
+      @keyframes rightEyeLook {
+        0%, 8% { transform: translate(0, 0); }
+        10%, 18% { transform: translate(0.8px, 0); }
+        20%, 22% { transform: translate(0.8px, 0) scaleY(0.1); }
+        24%, 32% { transform: translate(0.8px, 0); }
+        35%, 48% { transform: translate(-1.5px, -0.6px); }
+        52%, 54% { transform: translate(0, 0) scaleY(0.1); }
+        56%, 68% { transform: translate(0, 0); }
+        72%, 82% { transform: translate(-1.2px, 0.5px); }
+        85%, 100% { transform: translate(0, 0); }
+      }
+      @keyframes leftEarTwitch {
+        0%, 9% { transform: rotate(0deg); }
+        12% { transform: rotate(-8deg); }
+        16%, 34% { transform: rotate(0deg); }
+        38% { transform: rotate(-12deg); }
+        42% { transform: rotate(-6deg); }
+        48%, 100% { transform: rotate(0deg); }
+      }
+      @keyframes rightEarTwitch {
+        0%, 9% { transform: rotate(0deg); }
+        12% { transform: rotate(6deg); }
+        16%, 34% { transform: rotate(0deg); }
+        38% { transform: rotate(10deg); }
+        42% { transform: rotate(4deg); }
+        48%, 71% { transform: rotate(0deg); }
+        74% { transform: rotate(8deg); }
+        78%, 100% { transform: rotate(0deg); }
+      }
+      .bunny-eye-left {
+        opacity: 0;
+        animation: bunnyEnterEye 0.3s ease-out 0.35s forwards, leftEyeLook 5s ease-in-out 0.65s infinite;
+        transform-origin: center;
+        transform-box: fill-box;
+      }
+      .bunny-eye-right {
+        opacity: 0;
+        animation: bunnyEnterEye 0.3s ease-out 0.4s forwards, rightEyeLook 5s ease-in-out 0.7s infinite;
+        transform-origin: center;
+        transform-box: fill-box;
+      }
+      .bunny-ear-left {
+        opacity: 0;
+        animation: bunnyEnterEar 0.3s ease-out 0.1s forwards, leftEarTwitch 5s ease-in-out 0.4s infinite;
+        transform-origin: bottom center;
+        transform-box: fill-box;
+      }
+      .bunny-ear-right {
+        opacity: 0;
+        animation: bunnyEnterEar 0.3s ease-out 0.15s forwards, rightEarTwitch 5s ease-in-out 0.45s infinite;
+        transform-origin: bottom center;
+        transform-box: fill-box;
+      }
+      .bunny-face {
+        opacity: 0;
+        animation: bunnyEnterFace 0.3s ease-out 0.25s forwards;
+        transform-origin: center;
+        transform-box: fill-box;
+      }
+      svg:hover .bunny-eye-left,
+      svg:hover .bunny-eye-right {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+      .bunny-happy-face {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+      svg:hover .bunny-happy-face {
+        opacity: 1;
+      }
+    ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "28", height: "28", fill: "transparent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          className: "bunny-ear-left",
+          d: "M3.738 10.2164L7.224 2.007H9.167L5.676 10.2164H3.738ZM10.791 6.42705C10.791 5.90346 10.726 5.42764 10.596 4.99959C10.47 4.57155 10.292 4.16643 10.063 3.78425C9.833 3.39825 9.56 3.01797 9.243 2.64343C8.926 2.26507 8.767 2.07589 8.767 2.07589L10.24 0.957996C10.24 0.957996 10.433 1.17203 10.819 1.60007C11.209 2.0243 11.559 2.49056 11.869 2.99886C12.178 3.50717 12.413 4.04222 12.574 4.60403C12.734 5.16584 12.814 5.77352 12.814 6.42705C12.814 7.10734 12.73 7.7303 12.562 8.29593C12.394 8.85774 12.153 9.3966 11.84 9.9126C11.526 10.4247 11.181 10.8833 10.802 11.2884C10.428 11.6974 10.24 11.9018 10.24 11.9018L8.767 10.7839C8.767 10.7839 8.924 10.5948 9.237 10.2164C9.554 9.8419 9.83 9.4597 10.063 9.06985C10.3 8.6762 10.479 8.26726 10.602 7.84304C10.728 7.41499 10.791 6.943 10.791 6.42705Z",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          className: "bunny-ear-right",
+          d: "M15.003 10.2164L18.489 2.007H20.432L16.941 10.2164H15.003ZM22.056 6.42705C22.056 5.90346 21.991 5.42764 21.861 4.99959C21.735 4.57155 21.557 4.16643 21.328 3.78425C21.098 3.39825 20.825 3.01797 20.508 2.64343C20.191 2.26507 20.032 2.07589 20.032 2.07589L21.505 0.957996C21.505 0.957996 21.698 1.17203 22.084 1.60007C22.474 2.0243 22.824 2.49056 23.133 2.99886C23.443 3.50717 23.678 4.04222 23.839 4.60403C23.999 5.16584 24.079 5.77352 24.079 6.42705C24.079 7.10734 23.995 7.7303 23.827 8.29593C23.659 8.85774 23.418 9.3966 23.105 9.9126C22.791 10.4247 22.445 10.8833 22.067 11.2884C21.693 11.6974 21.505 11.9018 21.505 11.9018L20.032 10.7839C20.032 10.7839 20.189 10.5948 20.502 10.2164C20.819 9.8419 21.094 9.4597 21.328 9.06985C21.565 8.6762 21.744 8.26726 21.866 7.84304C21.993 7.41499 22.056 6.943 22.056 6.42705Z",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          className: "bunny-face",
+          d: "M2.03 20.4328C2.03 20.9564 2.093 21.4322 2.219 21.8602C2.345 22.2883 2.523 22.6953 2.752 23.0813C2.981 23.4635 3.254 23.8419 3.572 24.2164C3.889 24.5948 4.047 24.7839 4.047 24.7839L2.574 25.9018C2.574 25.9018 2.379 25.6878 1.989 25.2598C1.603 24.8355 1.256 24.3693 0.946 23.861C0.636 23.3527 0.401 22.8176 0.241 22.2558C0.08 21.694 0 21.0863 0 20.4328C0 19.7525 0.084 19.1314 0.252 18.5696C0.421 18.004 0.661 17.4651 0.975 16.953C1.288 16.4371 1.632 15.9765 2.007 15.5714C2.385 15.1625 2.574 14.958 2.574 14.958L4.047 16.0759C4.047 16.0759 3.889 16.2651 3.572 16.6434C3.258 17.018 2.983 17.4021 2.746 17.7957C2.513 18.1855 2.335 18.5945 2.213 19.0225C2.091 19.4467 2.03 19.9168 2.03 20.4328ZM23.687 20.4271C23.687 19.9035 23.622 19.4276 23.492 18.9996C23.366 18.5715 23.188 18.1664 22.959 17.7843C22.729 17.3982 22.456 17.018 22.139 16.6434C21.822 16.2651 21.663 16.0759 21.663 16.0759L23.136 14.958C23.136 14.958 23.329 15.172 23.715 15.6001C24.105 16.0243 24.455 16.4906 24.765 16.9989C25.074 17.5072 25.309 18.0422 25.47 18.604C25.63 19.1658 25.71 19.7735 25.71 20.4271C25.71 21.1073 25.626 21.7303 25.458 22.2959C25.29 22.8577 25.049 23.3966 24.736 23.9126C24.422 24.4247 24.077 24.8833 23.698 25.2884C23.324 25.6974 23.136 25.9018 23.136 25.9018L21.663 24.7839C21.663 24.7839 21.82 24.5948 22.133 24.2164C22.45 23.8419 22.726 23.4597 22.959 23.0698C23.196 22.6762 23.375 22.2673 23.498 21.843C23.624 21.415 23.687 20.943 23.687 20.4271Z",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "circle",
+        {
+          className: "bunny-eye-left",
+          cx: "8.277",
+          cy: "20.466",
+          r: "1.8",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "circle",
+        {
+          className: "bunny-eye-right",
+          cx: "19.878",
+          cy: "20.466",
+          r: "1.8",
+          fill: color
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "text",
+        {
+          className: "bunny-happy-face",
+          x: "14",
+          y: "26",
+          textAnchor: "middle",
+          fontSize: "12",
+          fontWeight: "bold",
+          fill: color,
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          children: "\u02C3 \u1D55 \u02C2"
+        }
+      )
+    ]
+  }
+);
+
+// src/utils/element-identification.ts
+function getElementPath(target, maxDepth = 4) {
+  const parts = [];
+  let current = target;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    const tag = current.tagName.toLowerCase();
+    if (tag === "html" || tag === "body") break;
+    let identifier = tag;
+    if (current.id) {
+      identifier = `#${current.id}`;
+    } else if (current.className && typeof current.className === "string") {
+      const meaningfulClass = current.className.split(/\s+/).find((c) => c.length > 2 && !c.match(/^[a-z]{1,2}$/) && !c.match(/[A-Z0-9]{5,}/));
+      if (meaningfulClass) {
+        identifier = `.${meaningfulClass.split("_")[0]}`;
+      }
+    }
+    parts.unshift(identifier);
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function identifyElement(target) {
+  const path = getElementPath(target);
+  if (target.dataset.element) {
+    return { name: target.dataset.element, path };
+  }
+  const tag = target.tagName.toLowerCase();
+  if (["path", "circle", "rect", "line", "g"].includes(tag)) {
+    const svg = target.closest("svg");
+    if (svg) {
+      const parent = svg.parentElement;
+      if (parent) {
+        const parentName = identifyElement(parent).name;
+        return { name: `graphic in ${parentName}`, path };
+      }
+    }
+    return { name: "graphic element", path };
+  }
+  if (tag === "svg") {
+    const parent = target.parentElement;
+    if (parent?.tagName.toLowerCase() === "button") {
+      const btnText = parent.textContent?.trim();
+      return { name: btnText ? `icon in "${btnText}" button` : "button icon", path };
+    }
+    return { name: "icon", path };
+  }
+  if (tag === "button") {
+    const text = target.textContent?.trim();
+    const ariaLabel = target.getAttribute("aria-label");
+    if (ariaLabel) return { name: `button [${ariaLabel}]`, path };
+    return { name: text ? `button "${text.slice(0, 25)}"` : "button", path };
+  }
+  if (tag === "a") {
+    const text = target.textContent?.trim();
+    const href = target.getAttribute("href");
+    if (text) return { name: `link "${text.slice(0, 25)}"`, path };
+    if (href) return { name: `link to ${href.slice(0, 30)}`, path };
+    return { name: "link", path };
+  }
+  if (tag === "input") {
+    const type = target.getAttribute("type") || "text";
+    const placeholder = target.getAttribute("placeholder");
+    const name = target.getAttribute("name");
+    if (placeholder) return { name: `input "${placeholder}"`, path };
+    if (name) return { name: `input [${name}]`, path };
+    return { name: `${type} input`, path };
+  }
+  if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag)) {
+    const text = target.textContent?.trim();
+    return { name: text ? `${tag} "${text.slice(0, 35)}"` : tag, path };
+  }
+  if (tag === "p") {
+    const text = target.textContent?.trim();
+    if (text) return { name: `paragraph: "${text.slice(0, 40)}${text.length > 40 ? "..." : ""}"`, path };
+    return { name: "paragraph", path };
+  }
+  if (tag === "span" || tag === "label") {
+    const text = target.textContent?.trim();
+    if (text && text.length < 40) return { name: `"${text}"`, path };
+    return { name: tag, path };
+  }
+  if (tag === "li") {
+    const text = target.textContent?.trim();
+    if (text && text.length < 40) return { name: `list item: "${text.slice(0, 35)}"`, path };
+    return { name: "list item", path };
+  }
+  if (tag === "blockquote") return { name: "blockquote", path };
+  if (tag === "code") {
+    const text = target.textContent?.trim();
+    if (text && text.length < 30) return { name: `code: \`${text}\``, path };
+    return { name: "code", path };
+  }
+  if (tag === "pre") return { name: "code block", path };
+  if (tag === "img") {
+    const alt = target.getAttribute("alt");
+    return { name: alt ? `image "${alt.slice(0, 30)}"` : "image", path };
+  }
+  if (tag === "video") return { name: "video", path };
+  if (["div", "section", "article", "nav", "header", "footer", "aside", "main"].includes(tag)) {
+    const className = target.className;
+    const role = target.getAttribute("role");
+    const ariaLabel = target.getAttribute("aria-label");
+    if (ariaLabel) return { name: `${tag} [${ariaLabel}]`, path };
+    if (role) return { name: `${role}`, path };
+    if (typeof className === "string" && className) {
+      const words = className.split(/[\s_-]+/).map((c) => c.replace(/[A-Z0-9]{5,}.*$/, "")).filter((c) => c.length > 2 && !/^[a-z]{1,2}$/.test(c)).slice(0, 2);
+      if (words.length > 0) return { name: words.join(" "), path };
+    }
+    return { name: tag === "div" ? "container" : tag, path };
+  }
+  return { name: tag, path };
+}
+function getNearbyText(element) {
+  const texts = [];
+  const ownText = element.textContent?.trim();
+  if (ownText && ownText.length < 100) {
+    texts.push(ownText);
+  }
+  const prev = element.previousElementSibling;
+  if (prev) {
+    const prevText = prev.textContent?.trim();
+    if (prevText && prevText.length < 50) {
+      texts.unshift(`[before: "${prevText.slice(0, 40)}"]`);
+    }
+  }
+  const next = element.nextElementSibling;
+  if (next) {
+    const nextText = next.textContent?.trim();
+    if (nextText && nextText.length < 50) {
+      texts.push(`[after: "${nextText.slice(0, 40)}"]`);
+    }
+  }
+  return texts.join(" ");
+}
+function identifyAnimationElement(target) {
+  if (target.dataset.element) return target.dataset.element;
+  const tag = target.tagName.toLowerCase();
+  if (tag === "path") return "path";
+  if (tag === "circle") return "circle";
+  if (tag === "rect") return "rectangle";
+  if (tag === "line") return "line";
+  if (tag === "ellipse") return "ellipse";
+  if (tag === "polygon") return "polygon";
+  if (tag === "g") return "group";
+  if (tag === "svg") return "svg";
+  if (tag === "button") {
+    const text = target.textContent?.trim();
+    return text ? `button "${text}"` : "button";
+  }
+  if (tag === "input") {
+    const type = target.getAttribute("type") || "text";
+    return `input (${type})`;
+  }
+  if (tag === "span" || tag === "p" || tag === "label") {
+    const text = target.textContent?.trim();
+    if (text && text.length < 30) return `"${text}"`;
+    return "text";
+  }
+  if (tag === "div") {
+    const className = target.className;
+    if (typeof className === "string" && className) {
+      const words = className.split(/[\s_-]+/).map((c) => c.replace(/[A-Z0-9]{5,}.*$/, "")).filter((c) => c.length > 2 && !/^[a-z]{1,2}$/.test(c)).slice(0, 2);
+      if (words.length > 0) {
+        return words.join(" ");
+      }
+    }
+    return "container";
+  }
+  return tag;
+}
+function getNearbyElements(element) {
+  const parent = element.parentElement;
+  if (!parent) return "";
+  const siblings = Array.from(parent.children).filter(
+    (child) => child !== element && child instanceof HTMLElement
+  );
+  if (siblings.length === 0) return "";
+  const siblingIds = siblings.slice(0, 4).map((sib) => {
+    const tag = sib.tagName.toLowerCase();
+    const className = sib.className;
+    let cls = "";
+    if (typeof className === "string" && className) {
+      const meaningful = className.split(/\s+/).map((c) => c.replace(/[_][a-zA-Z0-9]{5,}.*$/, "")).find((c) => c.length > 2 && !/^[a-z]{1,2}$/.test(c));
+      if (meaningful) cls = `.${meaningful}`;
+    }
+    if (tag === "button" || tag === "a") {
+      const text = sib.textContent?.trim().slice(0, 15);
+      if (text) return `${tag}${cls} "${text}"`;
+    }
+    return `${tag}${cls}`;
+  });
+  const parentTag = parent.tagName.toLowerCase();
+  let parentId = parentTag;
+  if (typeof parent.className === "string" && parent.className) {
+    const parentCls = parent.className.split(/\s+/).map((c) => c.replace(/[_][a-zA-Z0-9]{5,}.*$/, "")).find((c) => c.length > 2 && !/^[a-z]{1,2}$/.test(c));
+    if (parentCls) parentId = `.${parentCls}`;
+  }
+  const total = parent.children.length;
+  const suffix = total > siblingIds.length + 1 ? ` (${total} total in ${parentId})` : "";
+  return siblingIds.join(", ") + suffix;
+}
+function getElementClasses(target) {
+  const className = target.className;
+  if (typeof className !== "string" || !className) return "";
+  const classes = className.split(/\s+/).filter((c) => c.length > 0).map((c) => {
+    const match = c.match(/^([a-zA-Z][a-zA-Z0-9_-]*?)(?:_[a-zA-Z0-9]{5,})?$/);
+    return match ? match[1] : c;
+  }).filter((c, i, arr) => arr.indexOf(c) === i);
+  return classes.join(", ");
+}
+function getDetailedComputedStyles(target) {
+  if (typeof window === "undefined") return {};
+  const styles = window.getComputedStyle(target);
+  const result = {};
+  const properties = [
+    // Colors
+    "color",
+    "backgroundColor",
+    "borderColor",
+    // Typography
+    "fontSize",
+    "fontWeight",
+    "fontFamily",
+    "lineHeight",
+    "letterSpacing",
+    "textAlign",
+    // Box model
+    "width",
+    "height",
+    "padding",
+    "margin",
+    "border",
+    "borderRadius",
+    // Layout
+    "display",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "zIndex",
+    "flexDirection",
+    "justifyContent",
+    "alignItems",
+    "gap",
+    // Visual
+    "opacity",
+    "visibility",
+    "overflow",
+    "boxShadow",
+    // Transform
+    "transform"
+  ];
+  for (const prop of properties) {
+    const value = styles.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase());
+    if (value && value !== "none" && value !== "normal" && value !== "auto" && value !== "0px" && value !== "rgba(0, 0, 0, 0)") {
+      result[prop] = value;
+    }
+  }
+  return result;
+}
+function getAccessibilityInfo(target) {
+  const parts = [];
+  const role = target.getAttribute("role");
+  const ariaLabel = target.getAttribute("aria-label");
+  const ariaDescribedBy = target.getAttribute("aria-describedby");
+  const tabIndex = target.getAttribute("tabindex");
+  const ariaHidden = target.getAttribute("aria-hidden");
+  if (role) parts.push(`role="${role}"`);
+  if (ariaLabel) parts.push(`aria-label="${ariaLabel}"`);
+  if (ariaDescribedBy) parts.push(`aria-describedby="${ariaDescribedBy}"`);
+  if (tabIndex) parts.push(`tabindex=${tabIndex}`);
+  if (ariaHidden === "true") parts.push("aria-hidden");
+  const focusable = target.matches("a, button, input, select, textarea, [tabindex]");
+  if (focusable) parts.push("focusable");
+  return parts.join(", ");
+}
+function getFullElementPath(target) {
+  const parts = [];
+  let current = target;
+  while (current && current.tagName.toLowerCase() !== "html") {
+    const tag = current.tagName.toLowerCase();
+    let identifier = tag;
+    if (current.id) {
+      identifier = `${tag}#${current.id}`;
+    } else if (current.className && typeof current.className === "string") {
+      const cls = current.className.split(/\s+/).map((c) => c.replace(/[_][a-zA-Z0-9]{5,}.*$/, "")).find((c) => c.length > 2);
+      if (cls) identifier = `${tag}.${cls}`;
+    }
+    parts.unshift(identifier);
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+
+// src/utils/storage.ts
+var STORAGE_PREFIX = "feedback-annotations-";
+var DEFAULT_RETENTION_DAYS = 7;
+function getStorageKey(pathname) {
+  return `${STORAGE_PREFIX}${pathname}`;
+}
+function loadAnnotations(pathname) {
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = localStorage.getItem(getStorageKey(pathname));
+    if (!stored) return [];
+    const data = JSON.parse(stored);
+    const cutoff = Date.now() - DEFAULT_RETENTION_DAYS * 24 * 60 * 60 * 1e3;
+    return data.filter((a) => !a.timestamp || a.timestamp > cutoff);
+  } catch {
+    return [];
+  }
+}
+function saveAnnotations(pathname, annotations) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(getStorageKey(pathname), JSON.stringify(annotations));
+  } catch {
+  }
+}
+
+// src/components/page-toolbar-css/styles.module.scss
+var css2 = '@keyframes styles-module__toolbarEnter___u8RRu {\n  from {\n    opacity: 0;\n    transform: scale(0.5) rotate(90deg);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}\n@keyframes styles-module__badgeEnter___mVQLj {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__scaleIn___c-r1K {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__scaleOut___Wctwz {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n}\n@keyframes styles-module__slideUp___kgD36 {\n  from {\n    opacity: 0;\n    transform: scale(0.85) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__slideDown___zcdje {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85) translateY(8px);\n  }\n}\n@keyframes styles-module__markerIn___5FaAP {\n  0% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.3);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes styles-module__markerOut___GU5jX {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.3);\n  }\n}\n@keyframes styles-module__fadeIn___b9qmf {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes styles-module__fadeOut___6Ut6- {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes styles-module__tooltipIn___0N31w {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(2px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(1);\n  }\n}\n@keyframes styles-module__hoverHighlightIn___6WYHY {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__hoverTooltipIn___FYGQx {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__settingsPanelIn___MGfO8 {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.95);\n    filter: blur(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0px);\n  }\n}\n@keyframes styles-module__settingsPanelOut___Zfymi {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px) scale(0.95);\n    filter: blur(5px);\n  }\n}\n.styles-module__toolbar___wNsdK {\n  position: fixed;\n  bottom: 1.25rem;\n  right: 1.25rem;\n  width: 257px;\n  z-index: 100000;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  pointer-events: none;\n  transition: left 0s, top 0s, right 0s, bottom 0s;\n}\n\n.styles-module__toolbarContainer___dIhma {\n  user-select: none;\n  margin-left: auto;\n  align-self: flex-end;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #1a1a1a;\n  color: #fff;\n  border: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);\n  pointer-events: auto;\n  cursor: grab;\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__toolbarContainer___dIhma.styles-module__dragging___xrolZ {\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: grabbing;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__entrance___sgHd8 {\n  animation: styles-module__toolbarEnter___u8RRu 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn {\n  width: 44px;\n  height: 44px;\n  border-radius: 22px;\n  padding: 0;\n  cursor: pointer;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn svg {\n  margin-top: -1px;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:hover {\n  background: #2a2a2a;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:active {\n  transform: scale(0.95);\n}\n.styles-module__toolbarContainer___dIhma.styles-module__expanded___ofKPx {\n  width: calc-size(auto, size);\n  height: 44px;\n  border-radius: 1.5rem;\n  padding: 0.375rem;\n}\n@supports not (width: calc-size(auto, size)) {\n  .styles-module__toolbarContainer___dIhma.styles-module__expanded___ofKPx {\n    width: 257px;\n  }\n}\n\n.styles-module__toggleContent___0yfyP {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__toggleContent___0yfyP.styles-module__visible___KHwEW {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.styles-module__toggleContent___0yfyP.styles-module__hidden___Ae8H4 {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.styles-module__controlsContent___9GJWU {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: filter 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__controlsContent___9GJWU.styles-module__visible___KHwEW {\n  opacity: 1;\n  filter: blur(0px);\n  transform: scale(1);\n  visibility: visible;\n  pointer-events: auto;\n}\n.styles-module__controlsContent___9GJWU.styles-module__hidden___Ae8H4 {\n  opacity: 0;\n  filter: blur(10px);\n  transform: scale(0.4);\n  pointer-events: none;\n}\n\n.styles-module__badge___2XsgF {\n  position: absolute;\n  top: -16px;\n  right: -16px;\n  user-select: none;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  background: #3c82f7;\n  color: white;\n  font-size: 0.625rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n  opacity: 1;\n  transition: transform 0.3s ease, opacity 0.2s ease;\n  transform: scale(1);\n}\n.styles-module__badge___2XsgF.styles-module__fadeOut___6Ut6- {\n  opacity: 0;\n  transform: scale(0);\n  pointer-events: none;\n}\n.styles-module__badge___2XsgF.styles-module__entrance___sgHd8 {\n  animation: styles-module__badgeEnter___mVQLj 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) 0.4s both;\n}\n\n.styles-module__controlButton___8Q0jc {\n  cursor: pointer !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.85);\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.2s ease;\n}\n.styles-module__controlButton___8Q0jc:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.12);\n  color: #fff;\n}\n.styles-module__controlButton___8Q0jc:active:not(:disabled) {\n  transform: scale(0.92);\n}\n.styles-module__controlButton___8Q0jc:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.styles-module__controlButton___8Q0jc[data-active=true] {\n  color: #3c82f7;\n  background: rgba(60, 130, 247, 0.25);\n}\n.styles-module__controlButton___8Q0jc[data-danger]:hover:not(:disabled) {\n  background: rgba(255, 59, 48, 0.25);\n  color: #ff3b30;\n}\n\n.styles-module__divider___c--s1 {\n  width: 1px;\n  height: 12px;\n  background: rgba(255, 255, 255, 0.15);\n  margin: 0 0.125rem;\n}\n\n.styles-module__overlay___Q1O9y {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  pointer-events: none;\n}\n.styles-module__overlay___Q1O9y > * {\n  pointer-events: auto;\n}\n\n.styles-module__hoverHighlight___ogakW {\n  position: fixed;\n  border: 2px solid rgba(60, 130, 247, 0.5);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background: rgba(60, 130, 247, 0.04);\n  box-sizing: border-box;\n  will-change: opacity;\n  contain: layout style;\n}\n.styles-module__hoverHighlight___ogakW.styles-module__enter___WFIki {\n  animation: styles-module__hoverHighlightIn___6WYHY 0.12s ease-out forwards;\n}\n\n.styles-module__multiSelectOutline___cSJ-m {\n  position: fixed;\n  border: 2px dashed rgba(52, 199, 89, 0.6);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background: rgba(52, 199, 89, 0.05);\n  box-sizing: border-box;\n  will-change: opacity;\n}\n.styles-module__multiSelectOutline___cSJ-m.styles-module__enter___WFIki {\n  animation: styles-module__fadeIn___b9qmf 0.15s ease-out forwards;\n}\n.styles-module__multiSelectOutline___cSJ-m.styles-module__exit___fyOJ0 {\n  animation: styles-module__fadeOut___6Ut6- 0.15s ease-out forwards;\n}\n\n.styles-module__singleSelectOutline___QhX-O {\n  position: fixed;\n  border: 2px solid rgba(60, 130, 247, 0.6);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background: rgba(60, 130, 247, 0.05);\n  box-sizing: border-box;\n  will-change: opacity;\n}\n.styles-module__singleSelectOutline___QhX-O.styles-module__enter___WFIki {\n  animation: styles-module__fadeIn___b9qmf 0.15s ease-out forwards;\n}\n.styles-module__singleSelectOutline___QhX-O.styles-module__exit___fyOJ0 {\n  animation: styles-module__fadeOut___6Ut6- 0.15s ease-out forwards;\n}\n\n.styles-module__hoverTooltip___bvLk7 {\n  position: fixed;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.85);\n  padding: 0.35rem 0.6rem;\n  border-radius: 0.375rem;\n  pointer-events: none !important;\n  white-space: nowrap;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.styles-module__hoverTooltip___bvLk7.styles-module__enter___WFIki {\n  animation: styles-module__hoverTooltipIn___FYGQx 0.1s ease-out forwards;\n}\n\n.styles-module__markersLayer___-25j1 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__markersLayer___-25j1 > * {\n  pointer-events: auto;\n}\n\n.styles-module__fixedMarkersLayer___ffyX6 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__fixedMarkersLayer___ffyX6 > * {\n  pointer-events: auto;\n}\n\n.styles-module__marker___6sQrs {\n  position: absolute;\n  width: 22px;\n  height: 22px;\n  background: #3c82f7;\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n  user-select: none;\n  will-change: transform, opacity;\n  contain: layout style;\n  z-index: 1;\n}\n.styles-module__marker___6sQrs:hover {\n  z-index: 2;\n}\n.styles-module__marker___6sQrs:not(.styles-module__enter___WFIki):not(.styles-module__exit___fyOJ0):not(.styles-module__clearing___FQ--7) {\n  transition: background-color 0.15s ease, transform 0.1s ease;\n}\n.styles-module__marker___6sQrs.styles-module__enter___WFIki {\n  animation: styles-module__markerIn___5FaAP 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.styles-module__marker___6sQrs.styles-module__exit___fyOJ0 {\n  animation: styles-module__markerOut___GU5jX 0.2s ease-out both;\n  pointer-events: none;\n}\n.styles-module__marker___6sQrs.styles-module__clearing___FQ--7 {\n  animation: styles-module__markerOut___GU5jX 0.15s ease-out both;\n  pointer-events: none;\n}\n.styles-module__marker___6sQrs:not(.styles-module__enter___WFIki):not(.styles-module__exit___fyOJ0):not(.styles-module__clearing___FQ--7):hover {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n.styles-module__marker___6sQrs.styles-module__pending___2IHLC {\n  position: fixed;\n  background: #3c82f7;\n}\n.styles-module__marker___6sQrs.styles-module__fixed___dBMHC {\n  position: fixed;\n}\n.styles-module__marker___6sQrs.styles-module__multiSelect___YWiuz {\n  background: #34c759;\n  width: 26px;\n  height: 26px;\n  border-radius: 6px;\n  font-size: 0.75rem;\n}\n.styles-module__marker___6sQrs.styles-module__multiSelect___YWiuz.styles-module__pending___2IHLC {\n  background: #34c759;\n}\n.styles-module__marker___6sQrs.styles-module__hovered___ZgXIy {\n  background: #ff3b30;\n}\n\n.styles-module__renumber___nCTxD {\n  display: block;\n  animation: styles-module__renumberRoll___Wgbq3 0.2s ease-out;\n}\n\n@keyframes styles-module__renumberRoll___Wgbq3 {\n  0% {\n    transform: translateX(-40%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n.styles-module__markerTooltip___aLJID {\n  position: absolute;\n  top: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100002;\n  background: #1a1a1a;\n  padding: 0.625rem 0.75rem;\n  border-radius: 0.75rem;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  min-width: 120px;\n  max-width: 200px;\n  pointer-events: none;\n  cursor: default;\n}\n.styles-module__markerTooltip___aLJID.styles-module__enter___WFIki {\n  animation: styles-module__tooltipIn___0N31w 0.1s ease-out forwards;\n}\n\n.styles-module__markerQuote___FHmrz {\n  display: block;\n  font-size: 0.6875rem;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.5);\n  margin-bottom: 0.375rem;\n  line-height: 1.4;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markerNote___QkrrS {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 450;\n  line-height: 1.4;\n  color: #fff;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-bottom: 2px;\n}\n\n.styles-module__markerHint___2iF-6 {\n  display: block;\n  font-size: 0.625rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.3);\n  margin-top: 0.375rem;\n  white-space: nowrap;\n}\n\n.styles-module__settingsPanel___OxX3Y {\n  position: absolute;\n  right: 5px;\n  bottom: calc(100% + 0.5rem);\n  background: white;\n  border-radius: 1rem;\n  padding: 13px 1rem 16px;\n  min-width: 205px;\n  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  transition: background 0.25s ease, box-shadow 0.25s ease;\n}\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsHeader___pwDY9,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrand___0gJeM,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrandSlash___uTG18,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsVersion___TUcFq,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsSection___m-YM2,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX,\n.styles-module__settingsPanel___OxX3Y .styles-module__cycleButton___FMKfw,\n.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY,\n.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz,\n.styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa,\n.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax,\n.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr,\n.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp,\n.styles-module__settingsPanel___OxX3Y .styles-module__helpIcon___xQg56,\n.styles-module__settingsPanel___OxX3Y .styles-module__themeToggle___2rUjA {\n  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__enter___WFIki {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0px);\n  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__exit___fyOJ0 {\n  opacity: 0;\n  transform: translateY(8px) scale(0.95);\n  filter: blur(5px);\n  pointer-events: none;\n  transition: opacity 0.1s ease, transform 0.1s ease, filter 0.1s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf {\n  background: #1a1a1a;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsLabel___8UjfX {\n  color: rgba(255, 255, 255, 0.6);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsOption___UNa12 {\n  color: rgba(255, 255, 255, 0.85);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsOption___UNa12:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsOption___UNa12.styles-module__selected___OwRqP {\n  background: rgba(255, 255, 255, 0.15);\n  color: #fff;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.styles-module__settingsHeader___pwDY9 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n  margin-bottom: 0.5rem;\n  padding-bottom: 9px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.styles-module__settingsBrand___0gJeM {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: -0.0094em;\n  color: #fff;\n}\n\n.styles-module__settingsBrandSlash___uTG18 {\n  color: rgba(255, 255, 255, 0.5);\n}\n\n.styles-module__settingsVersion___TUcFq {\n  font-size: 0.6875rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.4);\n  margin-left: auto;\n  letter-spacing: -0.0094em;\n}\n\n.styles-module__settingsSection___m-YM2 + .styles-module__settingsSection___m-YM2 {\n  margin-top: 0.5rem;\n  padding-top: calc(0.5rem + 2px);\n  border-top: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.styles-module__settingsRow___3sdhc {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n}\n\n.styles-module__dropdownContainer___BVnxe {\n  position: relative;\n}\n\n.styles-module__dropdownButton___16NPz {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: #fff;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  letter-spacing: -0.0094em;\n}\n.styles-module__dropdownButton___16NPz:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__dropdownButton___16NPz svg {\n  opacity: 0.6;\n}\n\n.styles-module__cycleButton___FMKfw {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: #fff;\n  cursor: pointer;\n  letter-spacing: -0.0094em;\n}\n.styles-module__cycleButton___FMKfw.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n@keyframes styles-module__cycleTextIn___Q6zJf {\n  0% {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.styles-module__cycleButtonText___fD1LR {\n  display: inline-block;\n  animation: styles-module__cycleTextIn___Q6zJf 0.2s ease-out;\n}\n\n.styles-module__cycleDots___LWuoQ {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.styles-module__cycleDot___nPgLY {\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.3);\n  transform: scale(0.667);\n  transition: background-color 0.25s ease-out, transform 0.25s ease-out;\n}\n.styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: #fff;\n  transform: scale(1);\n}\n.styles-module__cycleDot___nPgLY.styles-module__light___r6n4Y {\n  background: rgba(0, 0, 0, 0.2);\n}\n.styles-module__cycleDot___nPgLY.styles-module__light___r6n4Y.styles-module__active___-zoN6 {\n  background: rgba(0, 0, 0, 0.7);\n}\n\n.styles-module__dropdownMenu___k73ER {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 0.25rem);\n  background: #1a1a1a;\n  border-radius: 0.5rem;\n  padding: 0.25rem;\n  min-width: 120px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);\n  z-index: 10;\n  animation: styles-module__scaleIn___c-r1K 0.15s ease-out;\n}\n\n.styles-module__dropdownItem___ylsLj {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0.625rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.85);\n  cursor: pointer;\n  text-align: left;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  letter-spacing: -0.0094em;\n}\n.styles-module__dropdownItem___ylsLj:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__dropdownItem___ylsLj.styles-module__selected___OwRqP {\n  background: rgba(255, 255, 255, 0.12);\n  color: #fff;\n  font-weight: 600;\n}\n\n.styles-module__settingsLabel___8UjfX {\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: -0.0094em;\n  color: rgba(255, 255, 255, 0.5);\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n}\n.styles-module__settingsLabel___8UjfX.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__settingsLabelMarker___ewdtV {\n  margin-bottom: 10px;\n}\n\n.styles-module__settingsOptions___LyrBA {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.styles-module__settingsOption___UNa12 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.375rem 0.5rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.7);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.styles-module__settingsOption___UNa12:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.styles-module__settingsOption___UNa12.styles-module__selected___OwRqP {\n  background: rgba(60, 130, 247, 0.15);\n  color: #3c82f7;\n}\n\n.styles-module__sliderContainer___ducXj {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.styles-module__slider___GLdxp {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n.styles-module__slider___GLdxp::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.styles-module__slider___GLdxp::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  background: white;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.styles-module__slider___GLdxp:hover::-webkit-slider-thumb {\n  transform: scale(1.15);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n.styles-module__slider___GLdxp:hover::-moz-range-thumb {\n  transform: scale(1.15);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n\n.styles-module__sliderLabels___FhLDB {\n  display: flex;\n  justify-content: space-between;\n}\n\n.styles-module__sliderLabel___U8sPr {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.styles-module__sliderLabel___U8sPr:hover {\n  color: rgba(255, 255, 255, 0.7);\n}\n.styles-module__sliderLabel___U8sPr.styles-module__active___-zoN6 {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.styles-module__colorOptions___iHCNX {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.375rem;\n  margin-bottom: 1px;\n}\n\n.styles-module__colorOption___IodiY {\n  display: block;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  cursor: pointer;\n  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);\n}\n.styles-module__colorOption___IodiY:hover {\n  transform: scale(1.15);\n}\n.styles-module__colorOption___IodiY.styles-module__selected___OwRqP {\n  transform: scale(0.83);\n}\n\n.styles-module__colorOptionRing___U2xpo {\n  display: flex;\n  width: 24px;\n  height: 24px;\n  border: 2px solid transparent;\n  border-radius: 50%;\n  transition: border-color 0.3s ease;\n}\n.styles-module__settingsToggle___fBrFn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n}\n.styles-module__settingsToggle___fBrFn + .styles-module__settingsToggle___fBrFn {\n  margin-top: calc(0.5rem + 6px);\n}\n.styles-module__settingsToggle___fBrFn input[type=checkbox] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.styles-module__customCheckbox___U39ax {\n  position: relative;\n  width: 14px;\n  height: 14px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 4px;\n  background: rgba(255, 255, 255, 0.05);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background 0.25s ease, border-color 0.25s ease;\n}\n.styles-module__customCheckbox___U39ax svg {\n  color: #1a1a1a;\n  opacity: 1;\n  transition: opacity 0.15s ease;\n}\ninput[type=checkbox]:checked + .styles-module__customCheckbox___U39ax {\n  border-color: rgba(255, 255, 255, 0.3);\n  background: rgb(255, 255, 255);\n}\n.styles-module__customCheckbox___U39ax.styles-module__light___r6n4Y {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background: #fff;\n}\n.styles-module__customCheckbox___U39ax.styles-module__light___r6n4Y.styles-module__checked___mnZLo {\n  border-color: #1a1a1a;\n  background: #1a1a1a;\n}\n.styles-module__customCheckbox___U39ax.styles-module__light___r6n4Y.styles-module__checked___mnZLo svg {\n  color: #fff;\n}\n\n.styles-module__toggleLabel___Xm8Aa {\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  letter-spacing: -0.0094em;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.styles-module__toggleLabel___Xm8Aa.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__helpIcon___xQg56 {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: help;\n  margin-left: 0;\n}\n.styles-module__helpIcon___xQg56 svg {\n  display: block;\n  transform: translateY(1px);\n  color: rgba(255, 255, 255, 0.4);\n  transition: color 0.15s ease;\n}\n.styles-module__helpIcon___xQg56:hover svg {\n  color: rgba(255, 255, 255, 0.7);\n}\n.styles-module__helpIcon___xQg56::after {\n  content: attr(data-tooltip);\n  position: absolute;\n  right: calc(100% + 8px);\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 8px 10px;\n  background: #383838;\n  color: rgba(255, 255, 255, 0.7);\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 1.4;\n  border-radius: 10px;\n  white-space: normal;\n  width: 152px;\n  text-align: left;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n  pointer-events: none;\n  z-index: 100;\n  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.28);\n}\n.styles-module__helpIcon___xQg56:hover::after {\n  opacity: 1;\n  visibility: visible;\n  transition-delay: 0.5s;\n}\n\n.styles-module__dragSelection___kZLq2 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  border: 2px solid rgba(52, 199, 89, 0.6);\n  border-radius: 4px;\n  background: rgba(52, 199, 89, 0.08);\n  pointer-events: none;\n  z-index: 99997;\n  will-change: transform, width, height;\n  contain: layout style;\n}\n\n.styles-module__dragCount___KM90j {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: #34c759;\n  color: white;\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem;\n  border-radius: 1rem;\n  min-width: 1.5rem;\n  text-align: center;\n}\n\n.styles-module__highlightsContainer___-0xzG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 99996;\n}\n\n.styles-module__selectedElementHighlight___fyVlI {\n  position: fixed;\n  top: 0;\n  left: 0;\n  border: 2px solid rgba(52, 199, 89, 0.5);\n  border-radius: 4px;\n  background: rgba(52, 199, 89, 0.06);\n  pointer-events: none;\n  will-change: transform, width, height;\n  contain: layout style;\n}\n\n.styles-module__light___r6n4Y.styles-module__toolbarContainer___dIhma {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___r6n4Y.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:hover {\n  background: #f5f5f5;\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-active=true] {\n  color: #3c82f7;\n  background: rgba(60, 130, 247, 0.15);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-danger]:hover:not(:disabled) {\n  background: rgba(255, 59, 48, 0.15);\n  color: #ff3b30;\n}\n.styles-module__light___r6n4Y.styles-module__divider___c--s1 {\n  background: rgba(0, 0, 0, 0.1);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID {\n  background: #fff;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID .styles-module__markerQuote___FHmrz {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID .styles-module__markerNote___QkrrS {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID .styles-module__markerHint___2iF-6 {\n  color: rgba(0, 0, 0, 0.35);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y {\n  background: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsHeader___pwDY9 {\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrand___0gJeM {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrandSlash___uTG18 {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsVersion___TUcFq {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsSection___m-YM2 {\n  border-top-color: rgba(0, 0, 0, 0.08);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__cycleButton___FMKfw {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY {\n  background: rgba(0, 0, 0, 0.2);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: rgba(0, 0, 0, 0.7);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background: #fff;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo {\n  border-color: #1a1a1a;\n  background: #1a1a1a;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo svg {\n  color: #fff;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr:hover {\n  color: rgba(0, 0, 0, 0.7);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr.styles-module__active___-zoN6 {\n  color: rgba(0, 0, 0, 0.9);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp {\n  background: rgba(0, 0, 0, 0.1);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp::-webkit-slider-thumb {\n  background: #1a1a1a;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp::-moz-range-thumb {\n  background: #1a1a1a;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__helpIcon___xQg56 svg {\n  color: rgba(0, 0, 0, 0.6);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__helpIcon___xQg56:hover svg {\n  color: rgba(0, 0, 0, 0.7);\n}\n\n.styles-module__themeToggle___2rUjA {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  margin-left: 0.5rem;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.styles-module__themeToggle___2rUjA:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n.styles-module__light___r6n4Y .styles-module__themeToggle___2rUjA {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y .styles-module__themeToggle___2rUjA:hover {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.7);\n}';
+var classNames2 = { "toolbar": "styles-module__toolbar___wNsdK", "toolbarContainer": "styles-module__toolbarContainer___dIhma", "dragging": "styles-module__dragging___xrolZ", "entrance": "styles-module__entrance___sgHd8", "toolbarEnter": "styles-module__toolbarEnter___u8RRu", "collapsed": "styles-module__collapsed___Rydsn", "expanded": "styles-module__expanded___ofKPx", "toggleContent": "styles-module__toggleContent___0yfyP", "visible": "styles-module__visible___KHwEW", "hidden": "styles-module__hidden___Ae8H4", "controlsContent": "styles-module__controlsContent___9GJWU", "badge": "styles-module__badge___2XsgF", "fadeOut": "styles-module__fadeOut___6Ut6-", "badgeEnter": "styles-module__badgeEnter___mVQLj", "controlButton": "styles-module__controlButton___8Q0jc", "divider": "styles-module__divider___c--s1", "overlay": "styles-module__overlay___Q1O9y", "hoverHighlight": "styles-module__hoverHighlight___ogakW", "enter": "styles-module__enter___WFIki", "hoverHighlightIn": "styles-module__hoverHighlightIn___6WYHY", "multiSelectOutline": "styles-module__multiSelectOutline___cSJ-m", "fadeIn": "styles-module__fadeIn___b9qmf", "exit": "styles-module__exit___fyOJ0", "singleSelectOutline": "styles-module__singleSelectOutline___QhX-O", "hoverTooltip": "styles-module__hoverTooltip___bvLk7", "hoverTooltipIn": "styles-module__hoverTooltipIn___FYGQx", "markersLayer": "styles-module__markersLayer___-25j1", "fixedMarkersLayer": "styles-module__fixedMarkersLayer___ffyX6", "marker": "styles-module__marker___6sQrs", "clearing": "styles-module__clearing___FQ--7", "markerIn": "styles-module__markerIn___5FaAP", "markerOut": "styles-module__markerOut___GU5jX", "pending": "styles-module__pending___2IHLC", "fixed": "styles-module__fixed___dBMHC", "multiSelect": "styles-module__multiSelect___YWiuz", "hovered": "styles-module__hovered___ZgXIy", "renumber": "styles-module__renumber___nCTxD", "renumberRoll": "styles-module__renumberRoll___Wgbq3", "markerTooltip": "styles-module__markerTooltip___aLJID", "tooltipIn": "styles-module__tooltipIn___0N31w", "markerQuote": "styles-module__markerQuote___FHmrz", "markerNote": "styles-module__markerNote___QkrrS", "markerHint": "styles-module__markerHint___2iF-6", "settingsPanel": "styles-module__settingsPanel___OxX3Y", "settingsHeader": "styles-module__settingsHeader___pwDY9", "settingsBrand": "styles-module__settingsBrand___0gJeM", "settingsBrandSlash": "styles-module__settingsBrandSlash___uTG18", "settingsVersion": "styles-module__settingsVersion___TUcFq", "settingsSection": "styles-module__settingsSection___m-YM2", "settingsLabel": "styles-module__settingsLabel___8UjfX", "cycleButton": "styles-module__cycleButton___FMKfw", "cycleDot": "styles-module__cycleDot___nPgLY", "dropdownButton": "styles-module__dropdownButton___16NPz", "toggleLabel": "styles-module__toggleLabel___Xm8Aa", "customCheckbox": "styles-module__customCheckbox___U39ax", "sliderLabel": "styles-module__sliderLabel___U8sPr", "slider": "styles-module__slider___GLdxp", "helpIcon": "styles-module__helpIcon___xQg56", "themeToggle": "styles-module__themeToggle___2rUjA", "dark": "styles-module__dark___ILIQf", "settingsOption": "styles-module__settingsOption___UNa12", "selected": "styles-module__selected___OwRqP", "settingsRow": "styles-module__settingsRow___3sdhc", "dropdownContainer": "styles-module__dropdownContainer___BVnxe", "light": "styles-module__light___r6n4Y", "cycleButtonText": "styles-module__cycleButtonText___fD1LR", "cycleTextIn": "styles-module__cycleTextIn___Q6zJf", "cycleDots": "styles-module__cycleDots___LWuoQ", "active": "styles-module__active___-zoN6", "dropdownMenu": "styles-module__dropdownMenu___k73ER", "scaleIn": "styles-module__scaleIn___c-r1K", "dropdownItem": "styles-module__dropdownItem___ylsLj", "settingsLabelMarker": "styles-module__settingsLabelMarker___ewdtV", "settingsOptions": "styles-module__settingsOptions___LyrBA", "sliderContainer": "styles-module__sliderContainer___ducXj", "sliderLabels": "styles-module__sliderLabels___FhLDB", "colorOptions": "styles-module__colorOptions___iHCNX", "colorOption": "styles-module__colorOption___IodiY", "colorOptionRing": "styles-module__colorOptionRing___U2xpo", "settingsToggle": "styles-module__settingsToggle___fBrFn", "checked": "styles-module__checked___mnZLo", "dragSelection": "styles-module__dragSelection___kZLq2", "dragCount": "styles-module__dragCount___KM90j", "highlightsContainer": "styles-module__highlightsContainer___-0xzG", "selectedElementHighlight": "styles-module__selectedElementHighlight___fyVlI", "scaleOut": "styles-module__scaleOut___Wctwz", "slideUp": "styles-module__slideUp___kgD36", "slideDown": "styles-module__slideDown___zcdje", "settingsPanelIn": "styles-module__settingsPanelIn___MGfO8", "settingsPanelOut": "styles-module__settingsPanelOut___Zfymi" };
+if (typeof document !== "undefined") {
+  let style = document.getElementById("feedback-tool-styles-page-toolbar-css-styles");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "feedback-tool-styles-page-toolbar-css-styles";
+    style.textContent = css2;
+    document.head.appendChild(style);
+  }
+}
+var styles_module_default2 = classNames2;
+
+// src/components/page-toolbar-css/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var hasPlayedEntranceAnimation = false;
+var DEFAULT_SETTINGS = {
+  outputDetail: "standard",
+  autoClearAfterCopy: false,
+  annotationColor: "#3c82f7",
+  blockInteractions: false
+};
+var OUTPUT_DETAIL_OPTIONS = [
+  { value: "compact", label: "Compact" },
+  { value: "standard", label: "Standard" },
+  { value: "detailed", label: "Detailed" },
+  { value: "forensic", label: "Forensic" }
+];
+var COLOR_OPTIONS = [
+  { value: "#AF52DE", label: "Purple" },
+  { value: "#3c82f7", label: "Blue" },
+  { value: "#5AC8FA", label: "Cyan" },
+  { value: "#34C759", label: "Green" },
+  { value: "#FFD60A", label: "Yellow" },
+  { value: "#FF9500", label: "Orange" },
+  { value: "#FF3B30", label: "Red" }
+];
+function isElementFixed(element) {
+  let current = element;
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    const position = style.position;
+    if (position === "fixed" || position === "sticky") {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+function generateOutput(annotations, pathname, detailLevel = "standard") {
+  if (annotations.length === 0) return "";
+  const viewport = typeof window !== "undefined" ? `${window.innerWidth}\xD7${window.innerHeight}` : "unknown";
+  let output = `## Page Feedback: ${pathname}
+`;
+  if (detailLevel === "forensic") {
+    output += `
+**Environment:**
+`;
+    output += `- Viewport: ${viewport}
+`;
+    if (typeof window !== "undefined") {
+      output += `- URL: ${window.location.href}
+`;
+      output += `- User Agent: ${navigator.userAgent}
+`;
+      output += `- Timestamp: ${(/* @__PURE__ */ new Date()).toISOString()}
+`;
+      output += `- Device Pixel Ratio: ${window.devicePixelRatio}
+`;
+    }
+    output += `
+---
+`;
+  } else if (detailLevel !== "compact") {
+    output += `**Viewport:** ${viewport}
+`;
+  }
+  output += "\n";
+  annotations.forEach((a, i) => {
+    if (detailLevel === "compact") {
+      output += `${i + 1}. **${a.element}**: ${a.comment}`;
+      if (a.selectedText) {
+        output += ` (re: "${a.selectedText.slice(0, 30)}${a.selectedText.length > 30 ? "..." : ""}")`;
+      }
+      output += "\n";
+    } else if (detailLevel === "forensic") {
+      output += `### ${i + 1}. ${a.element}
+`;
+      if (a.isMultiSelect && a.fullPath) {
+        output += `*Forensic data shown for first element of selection*
+`;
+      }
+      if (a.fullPath) {
+        output += `**Full DOM Path:** ${a.fullPath}
+`;
+      }
+      if (a.cssClasses) {
+        output += `**CSS Classes:** ${a.cssClasses}
+`;
+      }
+      if (a.boundingBox) {
+        output += `**Position:** x:${Math.round(a.boundingBox.x)}, y:${Math.round(a.boundingBox.y)} (${Math.round(a.boundingBox.width)}\xD7${Math.round(a.boundingBox.height)}px)
+`;
+      }
+      output += `**Annotation at:** ${a.x.toFixed(1)}% from left, ${Math.round(a.y)}px from top
+`;
+      if (a.selectedText) {
+        output += `**Selected text:** "${a.selectedText}"
+`;
+      }
+      if (a.nearbyText && !a.selectedText) {
+        output += `**Context:** ${a.nearbyText.slice(0, 100)}
+`;
+      }
+      if (a.computedStyles) {
+        output += `**Computed Styles:** ${a.computedStyles}
+`;
+      }
+      if (a.accessibility) {
+        output += `**Accessibility:** ${a.accessibility}
+`;
+      }
+      if (a.nearbyElements) {
+        output += `**Nearby Elements:** ${a.nearbyElements}
+`;
+      }
+      output += `**Feedback:** ${a.comment}
+
+`;
+    } else {
+      output += `### ${i + 1}. ${a.element}
+`;
+      output += `**Location:** ${a.elementPath}
+`;
+      if (detailLevel === "detailed") {
+        if (a.cssClasses) {
+          output += `**Classes:** ${a.cssClasses}
+`;
+        }
+        if (a.boundingBox) {
+          output += `**Position:** ${Math.round(a.boundingBox.x)}px, ${Math.round(a.boundingBox.y)}px (${Math.round(a.boundingBox.width)}\xD7${Math.round(a.boundingBox.height)}px)
+`;
+        }
+      }
+      if (a.selectedText) {
+        output += `**Selected text:** "${a.selectedText}"
+`;
+      }
+      if (detailLevel === "detailed" && a.nearbyText && !a.selectedText) {
+        output += `**Context:** ${a.nearbyText.slice(0, 100)}
+`;
+      }
+      output += `**Feedback:** ${a.comment}
+
+`;
+    }
+  });
+  return output.trim();
+}
+function PageFeedbackToolbarCSS({
+  demoAnnotations,
+  demoDelay = 1e3,
+  enableDemoMode = false
+} = {}) {
+  const [isActive, setIsActive] = (0, import_react2.useState)(false);
+  const [annotations, setAnnotations] = (0, import_react2.useState)([]);
+  const [showMarkers, setShowMarkers] = (0, import_react2.useState)(true);
+  const [markersVisible, setMarkersVisible] = (0, import_react2.useState)(false);
+  const [markersExiting, setMarkersExiting] = (0, import_react2.useState)(false);
+  const [hoverInfo, setHoverInfo] = (0, import_react2.useState)(null);
+  const [hoverPosition, setHoverPosition] = (0, import_react2.useState)({ x: 0, y: 0 });
+  const [pendingAnnotation, setPendingAnnotation] = (0, import_react2.useState)(null);
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const [cleared, setCleared] = (0, import_react2.useState)(false);
+  const [isClearing, setIsClearing] = (0, import_react2.useState)(false);
+  const [hoveredMarkerId, setHoveredMarkerId] = (0, import_react2.useState)(null);
+  const [deletingMarkerId, setDeletingMarkerId] = (0, import_react2.useState)(null);
+  const [renumberFrom, setRenumberFrom] = (0, import_react2.useState)(null);
+  const [editingAnnotation, setEditingAnnotation] = (0, import_react2.useState)(
+    null
+  );
+  const [scrollY, setScrollY] = (0, import_react2.useState)(0);
+  const [isScrolling, setIsScrolling] = (0, import_react2.useState)(false);
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  const [isFrozen, setIsFrozen] = (0, import_react2.useState)(false);
+  const [showSettings, setShowSettings] = (0, import_react2.useState)(false);
+  const [showSettingsVisible, setShowSettingsVisible] = (0, import_react2.useState)(false);
+  const [settings, setSettings] = (0, import_react2.useState)(DEFAULT_SETTINGS);
+  const [isDarkMode, setIsDarkMode] = (0, import_react2.useState)(true);
+  const [showEntranceAnimation, setShowEntranceAnimation] = (0, import_react2.useState)(false);
+  const [toolbarPosition, setToolbarPosition] = (0, import_react2.useState)(null);
+  const [isDraggingToolbar, setIsDraggingToolbar] = (0, import_react2.useState)(false);
+  const [dragStartPos, setDragStartPos] = (0, import_react2.useState)(null);
+  const [dragRotation, setDragRotation] = (0, import_react2.useState)(0);
+  const justFinishedToolbarDragRef = (0, import_react2.useRef)(false);
+  const [animatedMarkers, setAnimatedMarkers] = (0, import_react2.useState)(
+    /* @__PURE__ */ new Set()
+  );
+  const [exitingMarkers, setExitingMarkers] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  const [pendingExiting, setPendingExiting] = (0, import_react2.useState)(false);
+  const [editExiting, setEditExiting] = (0, import_react2.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const mouseDownPosRef = (0, import_react2.useRef)(null);
+  const dragStartRef = (0, import_react2.useRef)(null);
+  const dragRectRef = (0, import_react2.useRef)(null);
+  const highlightsContainerRef = (0, import_react2.useRef)(null);
+  const justFinishedDragRef = (0, import_react2.useRef)(false);
+  const lastElementUpdateRef = (0, import_react2.useRef)(0);
+  const recentlyAddedIdRef = (0, import_react2.useRef)(null);
+  const DRAG_THRESHOLD = 8;
+  const ELEMENT_UPDATE_THROTTLE = 50;
+  const popupRef = (0, import_react2.useRef)(null);
+  const editPopupRef = (0, import_react2.useRef)(null);
+  const scrollTimeoutRef = (0, import_react2.useRef)(null);
+  const pathname = typeof window !== "undefined" ? window.location.pathname : "/";
+  (0, import_react2.useEffect)(() => {
+    if (showSettings) {
+      setShowSettingsVisible(true);
+    } else {
+      const timer = setTimeout(() => setShowSettingsVisible(false), 0);
+      return () => clearTimeout(timer);
+    }
+  }, [showSettings]);
+  const shouldShowMarkers = isActive && showMarkers;
+  (0, import_react2.useEffect)(() => {
+    if (shouldShowMarkers) {
+      setMarkersExiting(false);
+      setMarkersVisible(true);
+      setAnimatedMarkers(/* @__PURE__ */ new Set());
+      const timer = setTimeout(() => {
+        setAnimatedMarkers((prev) => {
+          const newSet = new Set(prev);
+          annotations.forEach((a) => newSet.add(a.id));
+          return newSet;
+        });
+      }, 350);
+      return () => clearTimeout(timer);
+    } else if (markersVisible) {
+      setMarkersExiting(true);
+      const timer = setTimeout(() => {
+        setMarkersVisible(false);
+        setMarkersExiting(false);
+      }, 250);
+      return () => clearTimeout(timer);
+    }
+  }, [shouldShowMarkers]);
+  (0, import_react2.useEffect)(() => {
+    setMounted(true);
+    setScrollY(window.scrollY);
+    const stored = loadAnnotations(pathname);
+    setAnnotations(stored);
+    if (!hasPlayedEntranceAnimation) {
+      setShowEntranceAnimation(true);
+      hasPlayedEntranceAnimation = true;
+      setTimeout(() => setShowEntranceAnimation(false), 750);
+    }
+    try {
+      const storedSettings = localStorage.getItem("feedback-toolbar-settings");
+      if (storedSettings) {
+        setSettings({ ...DEFAULT_SETTINGS, ...JSON.parse(storedSettings) });
+      }
+    } catch (e) {
+    }
+    try {
+      const savedTheme = localStorage.getItem("feedback-toolbar-theme");
+      if (savedTheme !== null) {
+        setIsDarkMode(savedTheme === "dark");
+      }
+    } catch (e) {
+    }
+  }, [pathname]);
+  (0, import_react2.useEffect)(() => {
+    if (mounted) {
+      localStorage.setItem(
+        "feedback-toolbar-settings",
+        JSON.stringify(settings)
+      );
+    }
+  }, [settings, mounted]);
+  (0, import_react2.useEffect)(() => {
+    if (mounted) {
+      localStorage.setItem(
+        "feedback-toolbar-theme",
+        isDarkMode ? "dark" : "light"
+      );
+    }
+  }, [isDarkMode, mounted]);
+  (0, import_react2.useEffect)(() => {
+    if (!enableDemoMode) return;
+    if (!mounted || !demoAnnotations || demoAnnotations.length === 0) return;
+    if (annotations.length > 0) return;
+    const timeoutIds = [];
+    timeoutIds.push(
+      setTimeout(() => {
+        setIsActive(true);
+      }, demoDelay - 200)
+    );
+    demoAnnotations.forEach((demo, index) => {
+      const annotationDelay = demoDelay + index * 300;
+      timeoutIds.push(
+        setTimeout(() => {
+          const element = document.querySelector(demo.selector);
+          if (!element) return;
+          const rect = element.getBoundingClientRect();
+          const { name, path } = identifyElement(element);
+          const newAnnotation = {
+            id: `demo-${Date.now()}-${index}`,
+            x: (rect.left + rect.width / 2) / window.innerWidth * 100,
+            y: rect.top + rect.height / 2 + window.scrollY,
+            comment: demo.comment,
+            element: name,
+            elementPath: path,
+            timestamp: Date.now(),
+            selectedText: demo.selectedText,
+            boundingBox: {
+              x: rect.left,
+              y: rect.top + window.scrollY,
+              width: rect.width,
+              height: rect.height
+            },
+            nearbyText: getNearbyText(element),
+            cssClasses: getElementClasses(element)
+          };
+          setAnnotations((prev) => [...prev, newAnnotation]);
+        }, annotationDelay)
+      );
+    });
+    return () => {
+      timeoutIds.forEach(clearTimeout);
+    };
+  }, [enableDemoMode, mounted, demoAnnotations, demoDelay]);
+  (0, import_react2.useEffect)(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+      setIsScrolling(true);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsScrolling(false);
+      }, 150);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (mounted && annotations.length > 0) {
+      saveAnnotations(pathname, annotations);
+    } else if (mounted && annotations.length === 0) {
+      localStorage.removeItem(getStorageKey(pathname));
+    }
+  }, [annotations, pathname, mounted]);
+  const freezeAnimations = (0, import_react2.useCallback)(() => {
+    if (isFrozen) return;
+    const style = document.createElement("style");
+    style.id = "feedback-freeze-styles";
+    style.textContent = `
+      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *),
+      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *)::before,
+      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *)::after {
+        animation-play-state: paused !important;
+        transition: none !important;
+      }
+    `;
+    document.head.appendChild(style);
+    document.querySelectorAll("video").forEach((video) => {
+      if (!video.paused) {
+        video.dataset.wasPaused = "false";
+        video.pause();
+      }
+    });
+    setIsFrozen(true);
+  }, [isFrozen]);
+  const unfreezeAnimations = (0, import_react2.useCallback)(() => {
+    if (!isFrozen) return;
+    const style = document.getElementById("feedback-freeze-styles");
+    if (style) style.remove();
+    document.querySelectorAll("video").forEach((video) => {
+      if (video.dataset.wasPaused === "false") {
+        video.play();
+        delete video.dataset.wasPaused;
+      }
+    });
+    setIsFrozen(false);
+  }, [isFrozen]);
+  const toggleFreeze = (0, import_react2.useCallback)(() => {
+    if (isFrozen) {
+      unfreezeAnimations();
+    } else {
+      freezeAnimations();
+    }
+  }, [isFrozen, freezeAnimations, unfreezeAnimations]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive) {
+      setPendingAnnotation(null);
+      setEditingAnnotation(null);
+      setHoverInfo(null);
+      setShowSettings(false);
+      if (isFrozen) {
+        unfreezeAnimations();
+      }
+    }
+  }, [isActive, isFrozen, unfreezeAnimations]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive) return;
+    const style = document.createElement("style");
+    style.id = "feedback-cursor-styles";
+    style.textContent = `
+      body * {
+        cursor: crosshair !important;
+      }
+      body p, body span, body h1, body h2, body h3, body h4, body h5, body h6,
+      body li, body td, body th, body label, body blockquote, body figcaption,
+      body caption, body legend, body dt, body dd, body pre, body code,
+      body em, body strong, body b, body i, body u, body s, body a,
+      body time, body address, body cite, body q, body abbr, body dfn,
+      body mark, body small, body sub, body sup, body [contenteditable],
+      body p *, body span *, body h1 *, body h2 *, body h3 *, body h4 *,
+      body h5 *, body h6 *, body li *, body a *, body label *, body pre *,
+      body code *, body blockquote *, body [contenteditable] * {
+        cursor: text !important;
+      }
+      [data-feedback-toolbar], [data-feedback-toolbar] * {
+        cursor: default !important;
+      }
+      [data-annotation-marker], [data-annotation-marker] * {
+        cursor: pointer !important;
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      const existingStyle = document.getElementById("feedback-cursor-styles");
+      if (existingStyle) existingStyle.remove();
+    };
+  }, [isActive]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive || pendingAnnotation) return;
+    const handleMouseMove = (e) => {
+      if (e.target.closest("[data-feedback-toolbar]")) {
+        setHoverInfo(null);
+        return;
+      }
+      const elementUnder = document.elementFromPoint(
+        e.clientX,
+        e.clientY
+      );
+      if (!elementUnder || elementUnder.closest("[data-feedback-toolbar]")) {
+        setHoverInfo(null);
+        return;
+      }
+      const { name, path } = identifyElement(elementUnder);
+      const rect = elementUnder.getBoundingClientRect();
+      setHoverInfo({ element: name, elementPath: path, rect });
+      setHoverPosition({ x: e.clientX, y: e.clientY });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isActive, pendingAnnotation]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive) return;
+    const handleClick = (e) => {
+      if (justFinishedDragRef.current) {
+        justFinishedDragRef.current = false;
+        return;
+      }
+      const target = e.target;
+      if (target.closest("[data-feedback-toolbar]")) return;
+      if (target.closest("[data-annotation-popup]")) return;
+      if (target.closest("[data-annotation-marker]")) return;
+      const isInteractive = target.closest(
+        "button, a, input, select, textarea, [role='button'], [onclick]"
+      );
+      if (settings.blockInteractions && isInteractive) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      if (pendingAnnotation) {
+        if (isInteractive && !settings.blockInteractions) {
+          return;
+        }
+        e.preventDefault();
+        popupRef.current?.shake();
+        return;
+      }
+      if (editingAnnotation) {
+        if (isInteractive && !settings.blockInteractions) {
+          return;
+        }
+        e.preventDefault();
+        editPopupRef.current?.shake();
+        return;
+      }
+      e.preventDefault();
+      const elementUnder = document.elementFromPoint(
+        e.clientX,
+        e.clientY
+      );
+      if (!elementUnder) return;
+      const { name, path } = identifyElement(elementUnder);
+      const rect = elementUnder.getBoundingClientRect();
+      const x = e.clientX / window.innerWidth * 100;
+      const isFixed = isElementFixed(elementUnder);
+      const y = isFixed ? e.clientY : e.clientY + window.scrollY;
+      const selection = window.getSelection();
+      let selectedText;
+      if (selection && selection.toString().trim().length > 0) {
+        selectedText = selection.toString().trim().slice(0, 500);
+      }
+      const computedStylesObj = getDetailedComputedStyles(elementUnder);
+      const computedStylesStr = Object.entries(computedStylesObj).map(([k, v]) => `${k}: ${v}`).join("; ");
+      setPendingAnnotation({
+        x,
+        y,
+        clientY: e.clientY,
+        element: name,
+        elementPath: path,
+        selectedText,
+        boundingBox: {
+          x: rect.left,
+          y: isFixed ? rect.top : rect.top + window.scrollY,
+          width: rect.width,
+          height: rect.height
+        },
+        nearbyText: getNearbyText(elementUnder),
+        cssClasses: getElementClasses(elementUnder),
+        isFixed,
+        fullPath: getFullElementPath(elementUnder),
+        accessibility: getAccessibilityInfo(elementUnder),
+        computedStyles: computedStylesStr,
+        nearbyElements: getNearbyElements(elementUnder)
+      });
+      setHoverInfo(null);
+    };
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, [
+    isActive,
+    pendingAnnotation,
+    editingAnnotation,
+    settings.blockInteractions
+  ]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive || pendingAnnotation) return;
+    const handleMouseDown = (e) => {
+      const target = e.target;
+      if (target.closest("[data-feedback-toolbar]")) return;
+      if (target.closest("[data-annotation-marker]")) return;
+      if (target.closest("[data-annotation-popup]")) return;
+      const textTags = /* @__PURE__ */ new Set([
+        "P",
+        "SPAN",
+        "H1",
+        "H2",
+        "H3",
+        "H4",
+        "H5",
+        "H6",
+        "LI",
+        "TD",
+        "TH",
+        "LABEL",
+        "BLOCKQUOTE",
+        "FIGCAPTION",
+        "CAPTION",
+        "LEGEND",
+        "DT",
+        "DD",
+        "PRE",
+        "CODE",
+        "EM",
+        "STRONG",
+        "B",
+        "I",
+        "U",
+        "S",
+        "A",
+        "TIME",
+        "ADDRESS",
+        "CITE",
+        "Q",
+        "ABBR",
+        "DFN",
+        "MARK",
+        "SMALL",
+        "SUB",
+        "SUP"
+      ]);
+      if (textTags.has(target.tagName) || target.isContentEditable) {
+        return;
+      }
+      mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isActive, pendingAnnotation]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive || pendingAnnotation) return;
+    const handleMouseMove = (e) => {
+      if (!mouseDownPosRef.current) return;
+      const dx = e.clientX - mouseDownPosRef.current.x;
+      const dy = e.clientY - mouseDownPosRef.current.y;
+      const distance = dx * dx + dy * dy;
+      const thresholdSq = DRAG_THRESHOLD * DRAG_THRESHOLD;
+      if (!isDragging && distance >= thresholdSq) {
+        dragStartRef.current = mouseDownPosRef.current;
+        setIsDragging(true);
+      }
+      if ((isDragging || distance >= thresholdSq) && dragStartRef.current) {
+        if (dragRectRef.current) {
+          const left2 = Math.min(dragStartRef.current.x, e.clientX);
+          const top2 = Math.min(dragStartRef.current.y, e.clientY);
+          const width = Math.abs(e.clientX - dragStartRef.current.x);
+          const height = Math.abs(e.clientY - dragStartRef.current.y);
+          dragRectRef.current.style.transform = `translate(${left2}px, ${top2}px)`;
+          dragRectRef.current.style.width = `${width}px`;
+          dragRectRef.current.style.height = `${height}px`;
+        }
+        const now = Date.now();
+        if (now - lastElementUpdateRef.current < ELEMENT_UPDATE_THROTTLE) {
+          return;
+        }
+        lastElementUpdateRef.current = now;
+        const startX = dragStartRef.current.x;
+        const startY = dragStartRef.current.y;
+        const left = Math.min(startX, e.clientX);
+        const top = Math.min(startY, e.clientY);
+        const right = Math.max(startX, e.clientX);
+        const bottom = Math.max(startY, e.clientY);
+        const midX = (left + right) / 2;
+        const midY = (top + bottom) / 2;
+        const candidateElements = /* @__PURE__ */ new Set();
+        const points = [
+          [left, top],
+          [right, top],
+          [left, bottom],
+          [right, bottom],
+          [midX, midY],
+          [midX, top],
+          [midX, bottom],
+          [left, midY],
+          [right, midY]
+        ];
+        for (const [x, y] of points) {
+          const elements = document.elementsFromPoint(x, y);
+          for (const el of elements) {
+            if (el instanceof HTMLElement) candidateElements.add(el);
+          }
+        }
+        const nearbyElements = document.querySelectorAll(
+          "button, a, input, img, p, h1, h2, h3, h4, h5, h6, li, label, td, th, div, span, section, article, aside, nav"
+        );
+        for (const el of nearbyElements) {
+          if (el instanceof HTMLElement) {
+            const rect = el.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            const centerInside = centerX >= left && centerX <= right && centerY >= top && centerY <= bottom;
+            const overlapX = Math.min(rect.right, right) - Math.max(rect.left, left);
+            const overlapY = Math.min(rect.bottom, bottom) - Math.max(rect.top, top);
+            const overlapArea = overlapX > 0 && overlapY > 0 ? overlapX * overlapY : 0;
+            const elementArea = rect.width * rect.height;
+            const overlapRatio = elementArea > 0 ? overlapArea / elementArea : 0;
+            if (centerInside || overlapRatio > 0.5) {
+              candidateElements.add(el);
+            }
+          }
+        }
+        const allMatching = [];
+        const meaningfulTags = /* @__PURE__ */ new Set([
+          "BUTTON",
+          "A",
+          "INPUT",
+          "IMG",
+          "P",
+          "H1",
+          "H2",
+          "H3",
+          "H4",
+          "H5",
+          "H6",
+          "LI",
+          "LABEL",
+          "TD",
+          "TH",
+          "SECTION",
+          "ARTICLE",
+          "ASIDE",
+          "NAV"
+        ]);
+        for (const el of candidateElements) {
+          if (el.closest("[data-feedback-toolbar]") || el.closest("[data-annotation-marker]"))
+            continue;
+          const rect = el.getBoundingClientRect();
+          if (rect.width > window.innerWidth * 0.8 && rect.height > window.innerHeight * 0.5)
+            continue;
+          if (rect.width < 10 || rect.height < 10) continue;
+          if (rect.left < right && rect.right > left && rect.top < bottom && rect.bottom > top) {
+            const tagName = el.tagName;
+            let shouldInclude = meaningfulTags.has(tagName);
+            if (!shouldInclude && (tagName === "DIV" || tagName === "SPAN")) {
+              const hasText = el.textContent && el.textContent.trim().length > 0;
+              const isInteractive = el.onclick !== null || el.getAttribute("role") === "button" || el.getAttribute("role") === "link" || el.classList.contains("clickable") || el.hasAttribute("data-clickable");
+              if ((hasText || isInteractive) && !el.querySelector("p, h1, h2, h3, h4, h5, h6, button, a")) {
+                shouldInclude = true;
+              }
+            }
+            if (shouldInclude) {
+              let dominated = false;
+              for (const existingRect of allMatching) {
+                if (existingRect.left <= rect.left && existingRect.right >= rect.right && existingRect.top <= rect.top && existingRect.bottom >= rect.bottom) {
+                  dominated = true;
+                  break;
+                }
+              }
+              if (!dominated) allMatching.push(rect);
+            }
+          }
+        }
+        if (highlightsContainerRef.current) {
+          const container = highlightsContainerRef.current;
+          while (container.children.length > allMatching.length) {
+            container.removeChild(container.lastChild);
+          }
+          allMatching.forEach((rect, i) => {
+            let div = container.children[i];
+            if (!div) {
+              div = document.createElement("div");
+              div.className = styles_module_default2.selectedElementHighlight;
+              container.appendChild(div);
+            }
+            div.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+            div.style.width = `${rect.width}px`;
+            div.style.height = `${rect.height}px`;
+          });
+        }
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isActive, pendingAnnotation, isDragging, DRAG_THRESHOLD]);
+  (0, import_react2.useEffect)(() => {
+    if (!isActive) return;
+    const handleMouseUp = (e) => {
+      const wasDragging = isDragging;
+      const dragStart = dragStartRef.current;
+      if (isDragging && dragStart) {
+        justFinishedDragRef.current = true;
+        const left = Math.min(dragStart.x, e.clientX);
+        const top = Math.min(dragStart.y, e.clientY);
+        const right = Math.max(dragStart.x, e.clientX);
+        const bottom = Math.max(dragStart.y, e.clientY);
+        const allMatching = [];
+        const selector = "button, a, input, img, p, h1, h2, h3, h4, h5, h6, li, label, td, th";
+        document.querySelectorAll(selector).forEach((el) => {
+          if (!(el instanceof HTMLElement)) return;
+          if (el.closest("[data-feedback-toolbar]") || el.closest("[data-annotation-marker]"))
+            return;
+          const rect = el.getBoundingClientRect();
+          if (rect.width > window.innerWidth * 0.8 && rect.height > window.innerHeight * 0.5)
+            return;
+          if (rect.width < 10 || rect.height < 10) return;
+          if (rect.left < right && rect.right > left && rect.top < bottom && rect.bottom > top) {
+            allMatching.push({ element: el, rect });
+          }
+        });
+        const finalElements = allMatching.filter(
+          ({ element: el }) => !allMatching.some(
+            ({ element: other }) => other !== el && el.contains(other)
+          )
+        );
+        const x = e.clientX / window.innerWidth * 100;
+        const y = e.clientY + window.scrollY;
+        if (finalElements.length > 0) {
+          const bounds = finalElements.reduce(
+            (acc, { rect }) => ({
+              left: Math.min(acc.left, rect.left),
+              top: Math.min(acc.top, rect.top),
+              right: Math.max(acc.right, rect.right),
+              bottom: Math.max(acc.bottom, rect.bottom)
+            }),
+            {
+              left: Infinity,
+              top: Infinity,
+              right: -Infinity,
+              bottom: -Infinity
+            }
+          );
+          const elementNames = finalElements.slice(0, 5).map(({ element }) => identifyElement(element).name).join(", ");
+          const suffix = finalElements.length > 5 ? ` +${finalElements.length - 5} more` : "";
+          const firstElement = finalElements[0].element;
+          const firstElementComputedStyles = getDetailedComputedStyles(firstElement);
+          const firstElementComputedStylesStr = Object.entries(
+            firstElementComputedStyles
+          ).map(([k, v]) => `${k}: ${v}`).join("; ");
+          setPendingAnnotation({
+            x,
+            y,
+            clientY: e.clientY,
+            element: `${finalElements.length} elements: ${elementNames}${suffix}`,
+            elementPath: "multi-select",
+            boundingBox: {
+              x: bounds.left,
+              y: bounds.top + window.scrollY,
+              width: bounds.right - bounds.left,
+              height: bounds.bottom - bounds.top
+            },
+            isMultiSelect: true,
+            // Forensic data from first element
+            fullPath: getFullElementPath(firstElement),
+            accessibility: getAccessibilityInfo(firstElement),
+            computedStyles: firstElementComputedStylesStr,
+            nearbyElements: getNearbyElements(firstElement),
+            cssClasses: getElementClasses(firstElement),
+            nearbyText: getNearbyText(firstElement)
+          });
+        } else {
+          const width = Math.abs(right - left);
+          const height = Math.abs(bottom - top);
+          if (width > 20 && height > 20) {
+            setPendingAnnotation({
+              x,
+              y,
+              clientY: e.clientY,
+              element: "Area selection",
+              elementPath: `region at (${Math.round(left)}, ${Math.round(top)})`,
+              boundingBox: {
+                x: left,
+                y: top + window.scrollY,
+                width,
+                height
+              },
+              isMultiSelect: true
+            });
+          }
+        }
+        setHoverInfo(null);
+      } else if (wasDragging) {
+        justFinishedDragRef.current = true;
+      }
+      mouseDownPosRef.current = null;
+      dragStartRef.current = null;
+      setIsDragging(false);
+      if (highlightsContainerRef.current) {
+        highlightsContainerRef.current.innerHTML = "";
+      }
+    };
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => document.removeEventListener("mouseup", handleMouseUp);
+  }, [isActive, isDragging]);
+  const addAnnotation = (0, import_react2.useCallback)(
+    (comment) => {
+      if (!pendingAnnotation) return;
+      const newAnnotation = {
+        id: Date.now().toString(),
+        x: pendingAnnotation.x,
+        y: pendingAnnotation.y,
+        comment,
+        element: pendingAnnotation.element,
+        elementPath: pendingAnnotation.elementPath,
+        timestamp: Date.now(),
+        selectedText: pendingAnnotation.selectedText,
+        boundingBox: pendingAnnotation.boundingBox,
+        nearbyText: pendingAnnotation.nearbyText,
+        cssClasses: pendingAnnotation.cssClasses,
+        isMultiSelect: pendingAnnotation.isMultiSelect,
+        isFixed: pendingAnnotation.isFixed,
+        fullPath: pendingAnnotation.fullPath,
+        accessibility: pendingAnnotation.accessibility,
+        computedStyles: pendingAnnotation.computedStyles,
+        nearbyElements: pendingAnnotation.nearbyElements
+      };
+      setAnnotations((prev) => [...prev, newAnnotation]);
+      recentlyAddedIdRef.current = newAnnotation.id;
+      setTimeout(() => {
+        recentlyAddedIdRef.current = null;
+      }, 300);
+      setTimeout(() => {
+        setAnimatedMarkers((prev) => new Set(prev).add(newAnnotation.id));
+      }, 250);
+      setPendingExiting(true);
+      setTimeout(() => {
+        setPendingAnnotation(null);
+        setPendingExiting(false);
+      }, 150);
+      window.getSelection()?.removeAllRanges();
+    },
+    [pendingAnnotation]
+  );
+  const cancelAnnotation = (0, import_react2.useCallback)(() => {
+    setPendingExiting(true);
+    setTimeout(() => {
+      setPendingAnnotation(null);
+      setPendingExiting(false);
+    }, 150);
+  }, []);
+  const deleteAnnotation = (0, import_react2.useCallback)(
+    (id) => {
+      const deletedIndex = annotations.findIndex((a) => a.id === id);
+      setDeletingMarkerId(id);
+      setExitingMarkers((prev) => new Set(prev).add(id));
+      setTimeout(() => {
+        setAnnotations((prev) => prev.filter((a) => a.id !== id));
+        setExitingMarkers((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+        setDeletingMarkerId(null);
+        if (deletedIndex < annotations.length - 1) {
+          setRenumberFrom(deletedIndex);
+          setTimeout(() => setRenumberFrom(null), 200);
+        }
+      }, 150);
+    },
+    [annotations]
+  );
+  const startEditAnnotation = (0, import_react2.useCallback)((annotation) => {
+    setEditingAnnotation(annotation);
+    setHoveredMarkerId(null);
+  }, []);
+  const updateAnnotation = (0, import_react2.useCallback)(
+    (newComment) => {
+      if (!editingAnnotation) return;
+      setAnnotations(
+        (prev) => prev.map(
+          (a) => a.id === editingAnnotation.id ? { ...a, comment: newComment } : a
+        )
+      );
+      setEditExiting(true);
+      setTimeout(() => {
+        setEditingAnnotation(null);
+        setEditExiting(false);
+      }, 150);
+    },
+    [editingAnnotation]
+  );
+  const cancelEditAnnotation = (0, import_react2.useCallback)(() => {
+    setEditExiting(true);
+    setTimeout(() => {
+      setEditingAnnotation(null);
+      setEditExiting(false);
+    }, 150);
+  }, []);
+  const clearAll = (0, import_react2.useCallback)(() => {
+    const count = annotations.length;
+    if (count === 0) return;
+    setIsClearing(true);
+    setCleared(true);
+    const totalAnimationTime = count * 30 + 200;
+    setTimeout(() => {
+      setAnnotations([]);
+      setAnimatedMarkers(/* @__PURE__ */ new Set());
+      localStorage.removeItem(getStorageKey(pathname));
+      setIsClearing(false);
+    }, totalAnimationTime);
+    setTimeout(() => setCleared(false), 1500);
+  }, [pathname, annotations.length]);
+  const copyOutput = (0, import_react2.useCallback)(async () => {
+    const output = generateOutput(annotations, pathname, settings.outputDetail);
+    if (!output) return;
+    await navigator.clipboard.writeText(output);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+    if (settings.autoClearAfterCopy) {
+      setTimeout(() => clearAll(), 500);
+    }
+  }, [
+    annotations,
+    pathname,
+    settings.outputDetail,
+    settings.autoClearAfterCopy,
+    clearAll
+  ]);
+  (0, import_react2.useEffect)(() => {
+    if (!dragStartPos) return;
+    const DRAG_THRESHOLD2 = 5;
+    const handleMouseMove = (e) => {
+      const deltaX = e.clientX - dragStartPos.x;
+      const deltaY = e.clientY - dragStartPos.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (!isDraggingToolbar && distance > DRAG_THRESHOLD2) {
+        setIsDraggingToolbar(true);
+      }
+      if (isDraggingToolbar || distance > DRAG_THRESHOLD2) {
+        let newX = dragStartPos.toolbarX + deltaX;
+        let newY = dragStartPos.toolbarY + deltaY;
+        const padding = 20;
+        const containerWidth = 257;
+        const circleWidth = 44;
+        const toolbarHeight = 44;
+        if (isActive) {
+          newX = Math.max(
+            padding,
+            Math.min(window.innerWidth - containerWidth - padding, newX)
+          );
+        } else {
+          const circleOffset = containerWidth - circleWidth;
+          const minX = padding - circleOffset;
+          const maxX = window.innerWidth - padding - circleOffset - circleWidth;
+          newX = Math.max(minX, Math.min(maxX, newX));
+        }
+        newY = Math.max(
+          padding,
+          Math.min(window.innerHeight - toolbarHeight - padding, newY)
+        );
+        setToolbarPosition({ x: newX, y: newY });
+      }
+    };
+    const handleMouseUp = () => {
+      if (isDraggingToolbar) {
+        justFinishedToolbarDragRef.current = true;
+        setTimeout(() => {
+          justFinishedToolbarDragRef.current = false;
+        }, 50);
+      }
+      setIsDraggingToolbar(false);
+      setDragStartPos(null);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragStartPos, isDraggingToolbar, isActive]);
+  const handleToolbarMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.target.closest("button") || e.target.closest(`.${styles_module_default2.settingsPanel}`)) {
+        return;
+      }
+      const toolbarParent = e.currentTarget.parentElement;
+      if (!toolbarParent) return;
+      const rect = toolbarParent.getBoundingClientRect();
+      const currentX = toolbarPosition?.x ?? rect.left;
+      const currentY = toolbarPosition?.y ?? rect.top;
+      const randomRotation = (Math.random() - 0.5) * 10;
+      setDragRotation(randomRotation);
+      setDragStartPos({
+        x: e.clientX,
+        y: e.clientY,
+        toolbarX: currentX,
+        toolbarY: currentY
+      });
+    },
+    [toolbarPosition]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!toolbarPosition) return;
+    const constrainPosition = () => {
+      const padding = 20;
+      const containerWidth = 257;
+      const circleWidth = 44;
+      const toolbarHeight = 44;
+      let newX = toolbarPosition.x;
+      let newY = toolbarPosition.y;
+      if (isActive) {
+        newX = Math.max(
+          padding,
+          Math.min(window.innerWidth - containerWidth - padding, newX)
+        );
+      } else {
+        const circleOffset = containerWidth - circleWidth;
+        const minX = padding - circleOffset;
+        const maxX = window.innerWidth - padding - circleOffset - circleWidth;
+        newX = Math.max(minX, Math.min(maxX, newX));
+      }
+      newY = Math.max(
+        padding,
+        Math.min(window.innerHeight - toolbarHeight - padding, newY)
+      );
+      if (newX !== toolbarPosition.x || newY !== toolbarPosition.y) {
+        setToolbarPosition({ x: newX, y: newY });
+      }
+    };
+    constrainPosition();
+    window.addEventListener("resize", constrainPosition);
+    return () => window.removeEventListener("resize", constrainPosition);
+  }, [toolbarPosition, isActive]);
+  (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        if (pendingAnnotation) {
+        } else if (isActive) {
+          setIsActive(false);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, pendingAnnotation]);
+  if (!mounted) return null;
+  const hasAnnotations = annotations.length > 0;
+  const visibleAnnotations = annotations.filter(
+    (a) => !exitingMarkers.has(a.id)
+  );
+  const exitingAnnotationsList = annotations.filter(
+    (a) => exitingMarkers.has(a.id)
+  );
+  const getTooltipPosition = (annotation) => {
+    const tooltipMaxWidth = 200;
+    const tooltipEstimatedHeight = 80;
+    const markerSize = 22;
+    const gap = 10;
+    const markerX = annotation.x / 100 * window.innerWidth;
+    const markerY = typeof annotation.y === "string" ? parseFloat(annotation.y) : annotation.y;
+    const styles = {};
+    const spaceBelow = window.innerHeight - markerY - markerSize - gap;
+    if (spaceBelow < tooltipEstimatedHeight) {
+      styles.top = "auto";
+      styles.bottom = `calc(100% + ${gap}px)`;
+    }
+    const centerX = markerX - tooltipMaxWidth / 2;
+    const edgePadding = 10;
+    if (centerX < edgePadding) {
+      const offset = edgePadding - centerX;
+      styles.left = `calc(50% + ${offset}px)`;
+    } else if (centerX + tooltipMaxWidth > window.innerWidth - edgePadding) {
+      const overflow = centerX + tooltipMaxWidth - (window.innerWidth - edgePadding);
+      styles.left = `calc(50% - ${overflow}px)`;
+    }
+    return styles;
+  };
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          className: styles_module_default2.toolbar,
+          "data-feedback-toolbar": true,
+          style: toolbarPosition ? {
+            left: toolbarPosition.x,
+            top: toolbarPosition.y,
+            right: "auto",
+            bottom: "auto"
+          } : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: `${styles_module_default2.toolbarContainer} ${!isDarkMode ? styles_module_default2.light : ""} ${isActive ? styles_module_default2.expanded : styles_module_default2.collapsed} ${showEntranceAnimation ? styles_module_default2.entrance : ""} ${isDraggingToolbar ? styles_module_default2.dragging : ""}`,
+              onClick: !isActive ? (e) => {
+                if (justFinishedToolbarDragRef.current) {
+                  e.preventDefault();
+                  return;
+                }
+                setIsActive(true);
+              } : void 0,
+              onMouseDown: handleToolbarMouseDown,
+              role: !isActive ? "button" : void 0,
+              tabIndex: !isActive ? 0 : -1,
+              title: !isActive ? "Start feedback mode" : void 0,
+              style: isDraggingToolbar ? {
+                transform: `scale(1.05) rotate(${dragRotation}deg)`,
+                cursor: "grabbing"
+              } : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: `${styles_module_default2.toggleContent} ${!isActive ? styles_module_default2.visible : styles_module_default2.hidden}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconListSparkle, { size: 24 }),
+                      hasAnnotations && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          className: `${styles_module_default2.badge} ${isActive ? styles_module_default2.fadeOut : ""} ${showEntranceAnimation ? styles_module_default2.entrance : ""}`,
+                          style: { backgroundColor: settings.annotationColor },
+                          children: annotations.length
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: `${styles_module_default2.controlsContent} ${isActive ? styles_module_default2.visible : styles_module_default2.hidden}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            toggleFreeze();
+                          },
+                          title: isFrozen ? "Resume animations" : "Pause animations",
+                          "data-active": isFrozen,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPausePlayAnimated, { size: 24, isPaused: isFrozen })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setShowMarkers(!showMarkers);
+                          },
+                          disabled: !hasAnnotations,
+                          title: showMarkers ? "Hide markers" : "Show markers",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconEyeAnimated, { size: 24, isOpen: showMarkers })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            copyOutput();
+                          },
+                          disabled: !hasAnnotations,
+                          title: "Copy feedback",
+                          "data-active": copied,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconCopyAnimated, { size: 24, copied })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            clearAll();
+                          },
+                          disabled: !hasAnnotations,
+                          title: "Clear all",
+                          "data-danger": true,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconTrashAlt, { size: 24 })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setShowSettings(!showSettings);
+                          },
+                          title: "Settings",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconGear, { size: 24 })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          className: `${styles_module_default2.divider} ${!isDarkMode ? styles_module_default2.light : ""}`
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setIsActive(false);
+                          },
+                          title: "Exit feedback mode",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmarkLarge, { size: 24 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: `${styles_module_default2.settingsPanel} ${isDarkMode ? styles_module_default2.dark : styles_module_default2.light} ${showSettingsVisible ? styles_module_default2.enter : styles_module_default2.exit}`,
+                    onClick: (e) => e.stopPropagation(),
+                    style: toolbarPosition && toolbarPosition.y < 230 ? {
+                      bottom: "auto",
+                      top: "calc(100% + 0.5rem)"
+                    } : void 0,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsHeader, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.settingsBrand, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "span",
+                            {
+                              className: styles_module_default2.settingsBrandSlash,
+                              style: {
+                                color: settings.annotationColor,
+                                transition: "color 0.2s ease"
+                              },
+                              children: "/"
+                            }
+                          ),
+                          "agentation"
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.settingsVersion, children: [
+                          "v",
+                          "0.1.0"
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "button",
+                          {
+                            className: styles_module_default2.themeToggle,
+                            onClick: () => setIsDarkMode(!isDarkMode),
+                            title: isDarkMode ? "Switch to light mode" : "Switch to dark mode",
+                            children: isDarkMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconSun, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconMoon, { size: 14 })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles_module_default2.settingsSection, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          "div",
+                          {
+                            className: `${styles_module_default2.settingsLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                            children: [
+                              "Output Detail",
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "span",
+                                {
+                                  className: styles_module_default2.helpIcon,
+                                  "data-tooltip": "Controls how much detail is included in the copied output",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 })
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          "button",
+                          {
+                            className: `${styles_module_default2.cycleButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                            onClick: () => {
+                              const currentIndex = OUTPUT_DETAIL_OPTIONS.findIndex(
+                                (opt) => opt.value === settings.outputDetail
+                              );
+                              const nextIndex = (currentIndex + 1) % OUTPUT_DETAIL_OPTIONS.length;
+                              setSettings((s) => ({
+                                ...s,
+                                outputDetail: OUTPUT_DETAIL_OPTIONS[nextIndex].value
+                              }));
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "span",
+                                {
+                                  className: styles_module_default2.cycleButtonText,
+                                  children: OUTPUT_DETAIL_OPTIONS.find(
+                                    (opt) => opt.value === settings.outputDetail
+                                  )?.label
+                                },
+                                settings.outputDetail
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.cycleDots, children: OUTPUT_DETAIL_OPTIONS.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "span",
+                                {
+                                  className: `${styles_module_default2.cycleDot} ${!isDarkMode ? styles_module_default2.light : ""} ${settings.outputDetail === option.value ? styles_module_default2.active : ""}`
+                                },
+                                option.value
+                              )) })
+                            ]
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "div",
+                          {
+                            className: `${styles_module_default2.settingsLabel} ${styles_module_default2.settingsLabelMarker} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                            children: "Marker Colour"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles_module_default2.colorOptions, children: COLOR_OPTIONS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "div",
+                          {
+                            onClick: () => setSettings((s) => ({
+                              ...s,
+                              annotationColor: color.value
+                            })),
+                            style: {
+                              borderColor: settings.annotationColor === color.value ? color.value : "transparent"
+                            },
+                            className: `${styles_module_default2.colorOptionRing} ${settings.annotationColor === color.value ? styles_module_default2.selected : ""}`,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              "div",
+                              {
+                                className: `${styles_module_default2.colorOption} ${settings.annotationColor === color.value ? styles_module_default2.selected : ""}`,
+                                style: { backgroundColor: color.value },
+                                title: color.label
+                              },
+                              color.value
+                            )
+                          }
+                        )) })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: styles_module_default2.settingsToggle, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "input",
+                            {
+                              type: "checkbox",
+                              id: "autoClearAfterCopy",
+                              checked: settings.autoClearAfterCopy,
+                              onChange: (e) => setSettings((s) => ({
+                                ...s,
+                                autoClearAfterCopy: e.target.checked
+                              }))
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "label",
+                            {
+                              className: `${styles_module_default2.customCheckbox} ${settings.autoClearAfterCopy ? styles_module_default2.checked : ""}`,
+                              htmlFor: "autoClearAfterCopy",
+                              children: settings.autoClearAfterCopy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconCheckSmallAnimated, { size: 14 })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                            "span",
+                            {
+                              className: `${styles_module_default2.toggleLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                              children: [
+                                "Clear after output",
+                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  "span",
+                                  {
+                                    className: styles_module_default2.helpIcon,
+                                    "data-tooltip": "Automatically clear annotations after copying",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 })
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: styles_module_default2.settingsToggle, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "input",
+                            {
+                              type: "checkbox",
+                              id: "blockInteractions",
+                              checked: settings.blockInteractions,
+                              onChange: (e) => setSettings((s) => ({
+                                ...s,
+                                blockInteractions: e.target.checked
+                              }))
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "label",
+                            {
+                              className: `${styles_module_default2.customCheckbox} ${settings.blockInteractions ? styles_module_default2.checked : ""}`,
+                              htmlFor: "blockInteractions",
+                              children: settings.blockInteractions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconCheckSmallAnimated, { size: 14 })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "span",
+                            {
+                              className: `${styles_module_default2.toggleLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                              children: "Block page interactions"
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.markersLayer, "data-feedback-toolbar": true, children: [
+        markersVisible && visibleAnnotations.filter((a) => !a.isFixed).map((annotation, index) => {
+          const isHovered = !markersExiting && hoveredMarkerId === annotation.id;
+          const isDeleting = deletingMarkerId === annotation.id;
+          const showDeleteState = isHovered || isDeleting;
+          const isMulti = annotation.isMultiSelect;
+          const markerColor = isMulti ? "#34C759" : settings.annotationColor;
+          const globalIndex = annotations.findIndex(
+            (a) => a.id === annotation.id
+          );
+          const needsEnterAnimation = !animatedMarkers.has(annotation.id);
+          const animClass = markersExiting ? styles_module_default2.exit : isClearing ? styles_module_default2.clearing : needsEnterAnimation ? styles_module_default2.enter : "";
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: `${styles_module_default2.marker} ${showDeleteState ? styles_module_default2.hovered : ""} ${isMulti ? styles_module_default2.multiSelect : ""} ${animClass}`,
+              "data-annotation-marker": true,
+              style: {
+                left: `${annotation.x}%`,
+                top: annotation.y,
+                backgroundColor: showDeleteState ? void 0 : markerColor,
+                animationDelay: markersExiting ? `${(visibleAnnotations.length - 1 - index) * 20}ms` : `${index * 20}ms`
+              },
+              onMouseEnter: () => !markersExiting && annotation.id !== recentlyAddedIdRef.current && setHoveredMarkerId(annotation.id),
+              onMouseLeave: () => setHoveredMarkerId(null),
+              onClick: (e) => {
+                e.stopPropagation();
+                if (!markersExiting) deleteAnnotation(annotation.id);
+              },
+              onContextMenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!markersExiting) startEditAnnotation(annotation);
+              },
+              children: [
+                showDeleteState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmark, { size: isMulti ? 18 : 16 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    className: renumberFrom !== null && globalIndex >= renumberFrom ? styles_module_default2.renumber : void 0,
+                    children: globalIndex + 1
+                  }
+                ),
+                isHovered && !editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: `${styles_module_default2.markerTooltip} ${!isDarkMode ? styles_module_default2.light : ""} ${styles_module_default2.enter}`,
+                    style: getTooltipPosition(annotation),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.markerQuote, children: [
+                        annotation.element,
+                        annotation.selectedText && ` "${annotation.selectedText.slice(0, 30)}${annotation.selectedText.length > 30 ? "..." : ""}"`
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.markerNote, children: annotation.comment })
+                    ]
+                  }
+                )
+              ]
+            },
+            annotation.id
+          );
+        }),
+        markersVisible && !markersExiting && exitingAnnotationsList.filter((a) => !a.isFixed).map((annotation) => {
+          const isMulti = annotation.isMultiSelect;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: `${styles_module_default2.marker} ${styles_module_default2.hovered} ${isMulti ? styles_module_default2.multiSelect : ""} ${styles_module_default2.exit}`,
+              "data-annotation-marker": true,
+              style: {
+                left: `${annotation.x}%`,
+                top: annotation.y
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmark, { size: isMulti ? 12 : 10 })
+            },
+            annotation.id
+          );
+        })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.fixedMarkersLayer, "data-feedback-toolbar": true, children: [
+        markersVisible && visibleAnnotations.filter((a) => a.isFixed).map((annotation, index) => {
+          const fixedAnnotations = visibleAnnotations.filter(
+            (a) => a.isFixed
+          );
+          const isHovered = !markersExiting && hoveredMarkerId === annotation.id;
+          const isDeleting = deletingMarkerId === annotation.id;
+          const showDeleteState = isHovered || isDeleting;
+          const isMulti = annotation.isMultiSelect;
+          const markerColor = isMulti ? "#34C759" : settings.annotationColor;
+          const globalIndex = annotations.findIndex(
+            (a) => a.id === annotation.id
+          );
+          const needsEnterAnimation = !animatedMarkers.has(annotation.id);
+          const animClass = markersExiting ? styles_module_default2.exit : isClearing ? styles_module_default2.clearing : needsEnterAnimation ? styles_module_default2.enter : "";
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: `${styles_module_default2.marker} ${styles_module_default2.fixed} ${showDeleteState ? styles_module_default2.hovered : ""} ${isMulti ? styles_module_default2.multiSelect : ""} ${animClass}`,
+              "data-annotation-marker": true,
+              style: {
+                left: `${annotation.x}%`,
+                top: annotation.y,
+                backgroundColor: showDeleteState ? void 0 : markerColor,
+                animationDelay: markersExiting ? `${(fixedAnnotations.length - 1 - index) * 20}ms` : `${index * 20}ms`
+              },
+              onMouseEnter: () => !markersExiting && annotation.id !== recentlyAddedIdRef.current && setHoveredMarkerId(annotation.id),
+              onMouseLeave: () => setHoveredMarkerId(null),
+              onClick: (e) => {
+                e.stopPropagation();
+                if (!markersExiting) deleteAnnotation(annotation.id);
+              },
+              onContextMenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!markersExiting) startEditAnnotation(annotation);
+              },
+              children: [
+                showDeleteState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconClose, { size: isMulti ? 12 : 10 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    className: renumberFrom !== null && globalIndex >= renumberFrom ? styles_module_default2.renumber : void 0,
+                    children: globalIndex + 1
+                  }
+                ),
+                isHovered && !editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: `${styles_module_default2.markerTooltip} ${!isDarkMode ? styles_module_default2.light : ""} ${styles_module_default2.enter}`,
+                    style: getTooltipPosition(annotation),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.markerQuote, children: [
+                        annotation.element,
+                        annotation.selectedText && ` "${annotation.selectedText.slice(0, 30)}${annotation.selectedText.length > 30 ? "..." : ""}"`
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.markerNote, children: annotation.comment })
+                    ]
+                  }
+                )
+              ]
+            },
+            annotation.id
+          );
+        }),
+        markersVisible && !markersExiting && exitingAnnotationsList.filter((a) => a.isFixed).map((annotation) => {
+          const isMulti = annotation.isMultiSelect;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: `${styles_module_default2.marker} ${styles_module_default2.fixed} ${styles_module_default2.hovered} ${isMulti ? styles_module_default2.multiSelect : ""} ${styles_module_default2.exit}`,
+              "data-annotation-marker": true,
+              style: {
+                left: `${annotation.x}%`,
+                top: annotation.y
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconClose, { size: isMulti ? 12 : 10 })
+            },
+            annotation.id
+          );
+        })
+      ] }),
+      isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: styles_module_default2.overlay,
+          "data-feedback-toolbar": true,
+          style: pendingAnnotation || editingAnnotation ? { zIndex: 99999 } : void 0,
+          children: [
+            hoverInfo?.rect && !pendingAnnotation && !isScrolling && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: `${styles_module_default2.hoverHighlight} ${styles_module_default2.enter}`,
+                style: {
+                  left: hoverInfo.rect.left,
+                  top: hoverInfo.rect.top,
+                  width: hoverInfo.rect.width,
+                  height: hoverInfo.rect.height,
+                  borderColor: `${settings.annotationColor}80`,
+                  backgroundColor: `${settings.annotationColor}0A`
+                }
+              }
+            ),
+            hoveredMarkerId && !pendingAnnotation && (() => {
+              const hoveredAnnotation = annotations.find(
+                (a) => a.id === hoveredMarkerId
+              );
+              if (!hoveredAnnotation?.boundingBox) return null;
+              const bb = hoveredAnnotation.boundingBox;
+              const isMulti = hoveredAnnotation.isMultiSelect;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: `${isMulti ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline} ${styles_module_default2.enter}`,
+                  style: {
+                    left: bb.x,
+                    top: bb.y - scrollY,
+                    width: bb.width,
+                    height: bb.height,
+                    ...isMulti ? {} : {
+                      borderColor: `${settings.annotationColor}99`,
+                      backgroundColor: `${settings.annotationColor}0D`
+                    }
+                  }
+                }
+              );
+            })(),
+            hoverInfo && !pendingAnnotation && !isScrolling && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: `${styles_module_default2.hoverTooltip} ${styles_module_default2.enter}`,
+                style: {
+                  left: Math.max(
+                    8,
+                    Math.min(hoverPosition.x, window.innerWidth - 100)
+                  ),
+                  top: Math.max(hoverPosition.y - 32, 8)
+                },
+                children: hoverInfo.element
+              }
+            ),
+            pendingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              pendingAnnotation.boundingBox && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: `${pendingAnnotation.isMultiSelect ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline} ${pendingExiting ? styles_module_default2.exit : styles_module_default2.enter}`,
+                  style: {
+                    left: pendingAnnotation.boundingBox.x,
+                    top: pendingAnnotation.boundingBox.y - scrollY,
+                    width: pendingAnnotation.boundingBox.width,
+                    height: pendingAnnotation.boundingBox.height,
+                    ...pendingAnnotation.isMultiSelect ? {} : {
+                      borderColor: `${settings.annotationColor}99`,
+                      backgroundColor: `${settings.annotationColor}0D`
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: `${styles_module_default2.marker} ${styles_module_default2.pending} ${pendingAnnotation.isMultiSelect ? styles_module_default2.multiSelect : ""} ${pendingExiting ? styles_module_default2.exit : styles_module_default2.enter}`,
+                  style: {
+                    left: `${pendingAnnotation.x}%`,
+                    top: pendingAnnotation.clientY,
+                    backgroundColor: pendingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPlus, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                AnnotationPopupCSS,
+                {
+                  ref: popupRef,
+                  element: pendingAnnotation.element,
+                  selectedText: pendingAnnotation.selectedText,
+                  placeholder: pendingAnnotation.element === "Area selection" ? "What should change in this area?" : pendingAnnotation.isMultiSelect ? "Feedback for this group of elements..." : "What should change?",
+                  onSubmit: addAnnotation,
+                  onCancel: cancelAnnotation,
+                  isExiting: pendingExiting,
+                  lightMode: !isDarkMode,
+                  accentColor: pendingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor,
+                  style: {
+                    // Popup is 280px wide, centered with translateX(-50%), so 140px each side
+                    // Clamp so popup stays 20px from viewport edges
+                    left: Math.max(
+                      160,
+                      Math.min(
+                        window.innerWidth - 160,
+                        pendingAnnotation.x / 100 * window.innerWidth
+                      )
+                    ),
+                    top: Math.max(
+                      20,
+                      Math.min(
+                        pendingAnnotation.clientY + 20,
+                        window.innerHeight - 180
+                      )
+                    )
+                  }
+                }
+              )
+            ] }),
+            editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              editingAnnotation.boundingBox && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: `${editingAnnotation.isMultiSelect ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline} ${styles_module_default2.enter}`,
+                  style: {
+                    left: editingAnnotation.boundingBox.x,
+                    top: editingAnnotation.boundingBox.y - scrollY,
+                    width: editingAnnotation.boundingBox.width,
+                    height: editingAnnotation.boundingBox.height,
+                    ...editingAnnotation.isMultiSelect ? {} : {
+                      borderColor: `${settings.annotationColor}99`,
+                      backgroundColor: `${settings.annotationColor}0D`
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                AnnotationPopupCSS,
+                {
+                  ref: editPopupRef,
+                  element: editingAnnotation.element,
+                  selectedText: editingAnnotation.selectedText,
+                  placeholder: "Edit your feedback...",
+                  initialValue: editingAnnotation.comment,
+                  submitLabel: "Save",
+                  onSubmit: updateAnnotation,
+                  onCancel: cancelEditAnnotation,
+                  isExiting: editExiting,
+                  lightMode: !isDarkMode,
+                  accentColor: editingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor,
+                  style: {
+                    // Popup is 280px wide, centered with translateX(-50%), so 140px each side
+                    // Clamp so popup stays 20px from viewport edges
+                    left: Math.max(
+                      160,
+                      Math.min(
+                        window.innerWidth - 160,
+                        editingAnnotation.x / 100 * window.innerWidth
+                      )
+                    ),
+                    top: Math.max(
+                      20,
+                      Math.min(
+                        (editingAnnotation.isFixed ? editingAnnotation.y : editingAnnotation.y - scrollY) + 20,
+                        window.innerHeight - 180
+                      )
+                    )
+                  }
+                }
+              )
+            ] }),
+            isDragging && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: dragRectRef, className: styles_module_default2.dragSelection }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  ref: highlightsContainerRef,
+                  className: styles_module_default2.highlightsContainer
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+// src/components/annotation-popup/index.tsx
+var import_react3 = require("react");
+var import_framer_motion = require("framer-motion");
+
+// src/components/annotation-popup/styles.module.scss
+var css3 = '.styles-module__popup___MBQDV {\n  position: fixed;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 0.75rem 1rem 14px;\n  background: #1a1a1a;\n  border-radius: 16px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  cursor: default;\n  z-index: 99999;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n}\n\n.styles-module__header___1q-wa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n}\n\n.styles-module__element___tPxVO {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.65);\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.styles-module__timestamp___t7PEZ {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.35);\n  font-variant-numeric: tabular-nums;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n}\n\n.styles-module__quote___uFJyr {\n  font-size: 0.6875rem;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.5);\n  margin-bottom: 0.5rem;\n  padding: 0.4rem 0.5rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.25rem;\n  line-height: 1.45;\n}\n\n.styles-module__textarea___Pw6C4 {\n  width: 100%;\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 8px;\n  resize: none;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.styles-module__textarea___Pw6C4:focus {\n  border-color: #3c82f7;\n}\n.styles-module__textarea___Pw6C4.styles-module__green___zdmke:focus {\n  border-color: #34C759;\n}\n.styles-module__textarea___Pw6C4::placeholder {\n  color: rgba(255, 255, 255, 0.35);\n}\n.styles-module__textarea___Pw6C4::-webkit-scrollbar {\n  width: 6px;\n}\n.styles-module__textarea___Pw6C4::-webkit-scrollbar-track {\n  background: transparent;\n}\n.styles-module__textarea___Pw6C4::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n\n.styles-module__actions___bxQCu {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.styles-module__cancel___-xAEc,\n.styles-module__submit___nnXO9 {\n  padding: 0.4rem 0.875rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.styles-module__cancel___-xAEc {\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n}\n.styles-module__cancel___-xAEc:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.styles-module__submit___nnXO9 {\n  background: #3c82f7;\n  color: white;\n}\n.styles-module__submit___nnXO9:hover:not(:disabled) {\n  background: #2d6fdf;\n}\n.styles-module__submit___nnXO9:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.styles-module__submit___nnXO9.styles-module__green___zdmke {\n  background: #34C759;\n}\n.styles-module__submit___nnXO9.styles-module__green___zdmke:hover:not(:disabled) {\n  background: #2db84d;\n}';
+var classNames3 = { "popup": "styles-module__popup___MBQDV", "header": "styles-module__header___1q-wa", "element": "styles-module__element___tPxVO", "timestamp": "styles-module__timestamp___t7PEZ", "quote": "styles-module__quote___uFJyr", "textarea": "styles-module__textarea___Pw6C4", "green": "styles-module__green___zdmke", "actions": "styles-module__actions___bxQCu", "cancel": "styles-module__cancel___-xAEc", "submit": "styles-module__submit___nnXO9" };
+if (typeof document !== "undefined") {
+  let style = document.getElementById("feedback-tool-styles-annotation-popup-styles");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "feedback-tool-styles-annotation-popup-styles";
+    style.textContent = css3;
+    document.head.appendChild(style);
+  }
+}
+var styles_module_default3 = classNames3;
+
+// src/components/annotation-popup/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AnnotationPopup = (0, import_react3.forwardRef)(
+  function AnnotationPopup2({
+    element,
+    timestamp,
+    selectedText,
+    placeholder = "What should change?",
+    onSubmit,
+    onCancel,
+    style,
+    variant = "blue"
+  }, ref) {
+    const [text, setText] = (0, import_react3.useState)("");
+    const textareaRef = (0, import_react3.useRef)(null);
+    const controls = (0, import_framer_motion.useAnimation)();
+    (0, import_react3.useEffect)(() => {
+      controls.start({ opacity: 1, scale: 1, y: 0 });
+      const timer = setTimeout(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+          textarea.focus();
+          textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+          textarea.scrollTop = textarea.scrollHeight;
+        }
+      }, 10);
+      return () => clearTimeout(timer);
+    }, [controls]);
+    const shake = (0, import_react3.useCallback)(async () => {
+      await controls.start({
+        x: [0, -3, 3, -2, 2, 0],
+        transition: { duration: 0.25, ease: "easeOut" }
+      });
+      textareaRef.current?.focus();
+    }, [controls]);
+    (0, import_react3.useImperativeHandle)(ref, () => ({
+      shake
+    }), [shake]);
+    const handleSubmit = (0, import_react3.useCallback)(() => {
+      if (!text.trim()) return;
+      onSubmit(text.trim());
+    }, [text, onSubmit]);
+    const handleKeyDown = (0, import_react3.useCallback)(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+        if (e.key === "Escape") {
+          onCancel();
+        }
+      },
+      [handleSubmit, onCancel]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_framer_motion.motion.div,
+      {
+        className: styles_module_default3.popup,
+        "data-annotation-popup": true,
+        initial: { opacity: 0, scale: 0.95, y: 4 },
+        animate: controls,
+        exit: { opacity: 0, scale: 0.95, y: 4 },
+        transition: { type: "spring", stiffness: 500, damping: 35 },
+        style,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles_module_default3.element, children: element }),
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles_module_default3.timestamp, children: timestamp })
+          ] }),
+          selectedText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.quote, children: [
+            "\u201C",
+            selectedText.slice(0, 80),
+            selectedText.length > 80 ? "..." : "",
+            "\u201D"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: `${styles_module_default3.textarea} ${variant === "green" ? styles_module_default3.green : ""}`,
+              placeholder,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              rows: 2,
+              onKeyDown: handleKeyDown
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.actions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.cancel, onClick: onCancel, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: `${styles_module_default3.submit} ${variant === "green" ? styles_module_default3.green : ""}`,
+                onClick: handleSubmit,
+                disabled: !text.trim(),
+                children: "Add"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+function AnnotationPopupPresence({
+  isOpen,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnnotationPopup, { ...props }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Agentation,
+  AgentationCSS,
+  AnimatedBunny,
+  AnnotationPopup,
+  AnnotationPopupCSS,
+  AnnotationPopupPresence,
+  IconChatEllipsis,
+  IconCheck,
+  IconCheckSmall,
+  IconCheckSmallAnimated,
+  IconCheckmark,
+  IconCheckmarkCircle,
+  IconCheckmarkLarge,
+  IconClose,
+  IconCopyAlt,
+  IconCopyAnimated,
+  IconEye,
+  IconEyeAlt,
+  IconEyeAnimated,
+  IconEyeClosed,
+  IconEyeMinus,
+  IconGear,
+  IconHelp,
+  IconListSparkle,
+  IconMoon,
+  IconPause,
+  IconPauseAlt,
+  IconPausePlayAnimated,
+  IconPlayAlt,
+  IconPlus,
+  IconSun,
+  IconTrashAlt,
+  IconXmark,
+  IconXmarkLarge,
+  PageFeedbackToolbarCSS,
+  getElementClasses,
+  getElementPath,
+  getNearbyText,
+  getStorageKey,
+  identifyAnimationElement,
+  identifyElement,
+  loadAnnotations,
+  saveAnnotations
+});
+//# sourceMappingURL=index.js.map