@mikuexe/annotator-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,749 @@
+"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, {
+  SourceAnnotator: () => SourceAnnotator,
+  captureElementAnnotation: () => captureElementAnnotation,
+  copyTextToClipboard: () => copyTextToClipboard,
+  createAnnotationCollection: () => createAnnotationCollection,
+  formatAnnotationCollection: () => formatAnnotationCollection,
+  formatMarkdown: () => formatMarkdown,
+  getElementSelector: () => getElementSelector,
+  trimText: () => trimText
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SourceAnnotator.tsx
+var import_react = require("react");
+var import_sonner = require("sonner");
+
+// src/capture.ts
+var import_element_source = require("element-source");
+var MAX_TEXT_LENGTH = 240;
+var MAX_HTML_LENGTH = 640;
+var MAX_SELECTOR_DEPTH = 6;
+async function captureElementAnnotation(element, note, id = createAnnotationId()) {
+  const elementInfo = await safeResolveElementInfo(element);
+  const source = normalizeSource(elementInfo?.source, elementInfo?.componentName);
+  const sourceStack = normalizeSourceStack(elementInfo?.stack, source);
+  const componentPath = getComponentPath(sourceStack, source);
+  return {
+    id,
+    note,
+    source,
+    sourceStack,
+    componentPath,
+    element: {
+      tagName: element.tagName.toLowerCase(),
+      text: trimText(element.textContent ?? "", MAX_TEXT_LENGTH),
+      html: trimText(getOuterHtml(element), MAX_HTML_LENGTH),
+      selector: getElementSelector(element)
+    }
+  };
+}
+function createAnnotationId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `annotation-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function getElementSelector(element) {
+  const parts = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE && parts.length < MAX_SELECTOR_DEPTH) {
+    parts.unshift(getSelectorPart(current));
+    if (current.id) {
+      break;
+    }
+    current = current.parentElement;
+    if (current?.tagName.toLowerCase() === "html") {
+      break;
+    }
+  }
+  return parts.join(" ");
+}
+function trimText(value, maxLength) {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) {
+    return normalized;
+  }
+  return `${normalized.slice(0, Math.max(0, maxLength - 1)).trimEnd()}\u2026`;
+}
+async function safeResolveElementInfo(element) {
+  try {
+    return await (0, import_element_source.resolveElementInfo)(element);
+  } catch {
+    return null;
+  }
+}
+function normalizeSource(source, componentName) {
+  if (!source) {
+    return componentName ? { filePath: "", lineNumber: null, columnNumber: null, componentName } : null;
+  }
+  return {
+    filePath: source.filePath,
+    lineNumber: source.lineNumber ?? null,
+    columnNumber: source.columnNumber ?? null,
+    componentName: source.componentName ?? componentName ?? null
+  };
+}
+function normalizeSourceStack(stack, source) {
+  const normalizedStack = (stack ?? []).map((frame) => ({
+    filePath: frame.filePath,
+    lineNumber: frame.lineNumber ?? null,
+    columnNumber: frame.columnNumber ?? null,
+    componentName: frame.componentName ?? null
+  }));
+  if (source && !normalizedStack.some((frame) => isSameSourceFrame(frame, source))) {
+    normalizedStack.unshift(source);
+  }
+  return normalizedStack;
+}
+function getComponentPath(stack, source) {
+  const names = stack.map((frame) => frame.componentName).filter((name) => Boolean(name));
+  return Array.from(new Set(names.length ? names : source?.componentName ? [source.componentName] : []));
+}
+function isSameSourceFrame(a, b) {
+  return a.filePath === b.filePath && a.lineNumber === b.lineNumber && a.columnNumber === b.columnNumber;
+}
+function getOuterHtml(element) {
+  if ("outerHTML" in element && typeof element.outerHTML === "string") {
+    return element.outerHTML;
+  }
+  return `<${element.tagName.toLowerCase()}>`;
+}
+function getSelectorPart(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (element.id) {
+    return `#${escapeIdentifier(element.id)}`;
+  }
+  const testId = element.getAttribute("data-testid");
+  if (testId) {
+    return `${tagName}[data-testid="${escapeAttribute(testId)}"]`;
+  }
+  const classes = Array.from(element.classList).filter(Boolean).slice(0, 2).map((className) => `.${escapeIdentifier(className)}`).join("");
+  const siblingIndex = getNthOfType(element);
+  const needsNth = siblingIndex > 1 || hasFollowingSiblingOfSameType(element);
+  return `${tagName}${classes}${needsNth ? `:nth-of-type(${siblingIndex})` : ""}`;
+}
+function getNthOfType(element) {
+  let index = 1;
+  let sibling = element.previousElementSibling;
+  while (sibling) {
+    if (sibling.tagName === element.tagName) {
+      index += 1;
+    }
+    sibling = sibling.previousElementSibling;
+  }
+  return index;
+}
+function hasFollowingSiblingOfSameType(element) {
+  let sibling = element.nextElementSibling;
+  while (sibling) {
+    if (sibling.tagName === element.tagName) {
+      return true;
+    }
+    sibling = sibling.nextElementSibling;
+  }
+  return false;
+}
+function escapeIdentifier(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+}
+function escapeAttribute(value) {
+  return value.replace(/"/g, '\\"');
+}
+
+// src/clipboard.ts
+async function copyTextToClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  if (typeof document === "undefined") {
+    throw new Error("Clipboard is not available outside a browser environment.");
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.left = "-9999px";
+  textarea.style.top = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  const copied = document.execCommand("copy");
+  textarea.remove();
+  if (!copied) {
+    throw new Error("Clipboard copy failed.");
+  }
+}
+
+// src/format.ts
+var TASK_FRAMING = "Please update the UI based on these source-linked annotations.";
+function createAnnotationCollection(annotations) {
+  return {
+    annotations,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function formatAnnotationCollection(collection, output = "markdown") {
+  if (output === "json") {
+    return formatJson(collection);
+  }
+  const markdown = formatMarkdown(collection);
+  if (output === "markdown") {
+    return markdown;
+  }
+  return `${markdown}
+
+## JSON Payload
+
+\`\`\`json
+${formatJson(collection)}
+\`\`\``;
+}
+function formatMarkdown(collection) {
+  const lines = [TASK_FRAMING, "", `Collected at: ${collection.createdAt}`, ""];
+  if (collection.annotations.length === 0) {
+    lines.push("No annotations were collected.");
+    return lines.join("\n");
+  }
+  collection.annotations.forEach((annotation, index) => {
+    const source = formatSource(annotation);
+    const sourceStack = formatSourceStack(annotation);
+    const nearestComponent = annotation.source?.componentName;
+    const ownerPath = annotation.componentPath.join(" \u203A ");
+    lines.push(`## Annotation ${index + 1}`);
+    lines.push("");
+    lines.push(`ID: ${annotation.id}`);
+    lines.push(`Note: ${annotation.note || "(no note provided)"}`);
+    if (source) {
+      lines.push(`Source: ${source}`);
+    }
+    if (nearestComponent) {
+      lines.push(`Nearest React component: ${nearestComponent}`);
+    }
+    if (ownerPath && ownerPath !== nearestComponent) {
+      lines.push(`React owner path: ${ownerPath}`);
+    }
+    if (sourceStack.length) {
+      lines.push("React source stack:");
+      sourceStack.forEach((frame) => lines.push(`- ${frame}`));
+    }
+    lines.push(`Element tag: ${annotation.element.tagName}`);
+    if (annotation.element.html) {
+      lines.push(`Element HTML: ${annotation.element.html}`);
+    }
+    if (annotation.element.text) {
+      lines.push(`Element text: ${annotation.element.text}`);
+    }
+    if (annotation.element.selector) {
+      lines.push(`Selector: ${annotation.element.selector}`);
+    }
+    lines.push("");
+  });
+  return lines.join("\n").trimEnd();
+}
+function formatJson(collection) {
+  return JSON.stringify(collection, null, 2);
+}
+function formatSource(annotation) {
+  const source = annotation.source;
+  if (!source?.filePath) {
+    return "";
+  }
+  const line = source.lineNumber ? `:${source.lineNumber}` : "";
+  const column = source.columnNumber ? `:${source.columnNumber}` : "";
+  return `${source.filePath}${line}${column}`;
+}
+function formatSourceStack(annotation) {
+  return annotation.sourceStack.map((frame) => {
+    const location = formatSourceFrame(frame);
+    const component = frame.componentName ? ` (${frame.componentName})` : "";
+    return location ? `${location}${component}` : frame.componentName || "";
+  }).filter(Boolean);
+}
+function formatSourceFrame(frame) {
+  if (!frame.filePath) {
+    return "";
+  }
+  const line = frame.lineNumber ? `:${frame.lineNumber}` : "";
+  const column = frame.columnNumber ? `:${frame.columnNumber}` : "";
+  return `${frame.filePath}${line}${column}`;
+}
+
+// src/SourceAnnotator.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ROOT_ATTR = "data-mikuexe-annotator-root";
+var DEFAULT_HOTKEY = "alt+a";
+var DEFAULT_OUTPUT = "markdown";
+function SourceAnnotator({
+  enabled = true,
+  hotkey = DEFAULT_HOTKEY,
+  output = DEFAULT_OUTPUT,
+  onCollect,
+  renderToaster = true
+}) {
+  const [isAnnotating, setIsAnnotating] = (0, import_react.useState)(false);
+  const [hoverRect, setHoverRect] = (0, import_react.useState)(null);
+  const [selected, setSelected] = (0, import_react.useState)(null);
+  const [note, setNote] = (0, import_react.useState)("");
+  const [annotations, setAnnotations] = (0, import_react.useState)([]);
+  const [status, setStatus] = (0, import_react.useState)(null);
+  const selectedRef = (0, import_react.useRef)(null);
+  selectedRef.current = selected;
+  const collection = (0, import_react.useMemo)(
+    () => createAnnotationCollection(annotations.map(({ rect: _rect, targetElement: _targetElement, ...annotation }) => annotation)),
+    [annotations]
+  );
+  const refreshTrackedRects = (0, import_react.useCallback)(() => {
+    setHoverRect(null);
+    setSelected((current) => current ? { ...current, rect: getRect(current.element) } : current);
+    setAnnotations((existing) => existing.map((annotation) => ({ ...annotation, rect: getRect(annotation.targetElement) })));
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!enabled) {
+      setIsAnnotating(false);
+    }
+  }, [enabled]);
+  (0, import_react.useEffect)(() => {
+    const onKeyDown = (event) => {
+      if (!matchesHotkey(event, hotkey)) {
+        return;
+      }
+      event.preventDefault();
+      setIsAnnotating((current) => enabled && !current);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled, hotkey]);
+  (0, import_react.useEffect)(() => {
+    if (!enabled || !isAnnotating) {
+      setHoverRect(null);
+      return;
+    }
+    const onPointerOver = (event) => {
+      const target = getAnnotatableTarget(event.target);
+      if (!target) {
+        setHoverRect(null);
+        return;
+      }
+      setHoverRect(getRect(target));
+    };
+    const onClick = (event) => {
+      const target = getAnnotatableTarget(event.target);
+      if (!target) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = getRect(target);
+      setSelected({ element: target, rect, annotation: null, loading: true });
+      setNote("");
+      setStatus("Resolving source\u2026");
+      captureElementAnnotation(target, "").then((annotation) => {
+        setSelected((current) => {
+          if (current?.element !== target) {
+            return current;
+          }
+          return { ...current, annotation, loading: false };
+        });
+        setStatus(annotation.source ? "Source captured." : "Element captured without source info.");
+      }).catch(() => {
+        setSelected((current) => current?.element === target ? { ...current, loading: false } : current);
+        setStatus("Element captured without source info.");
+      });
+    };
+    document.addEventListener("pointerover", onPointerOver, true);
+    document.addEventListener("click", onClick, true);
+    return () => {
+      document.removeEventListener("pointerover", onPointerOver, true);
+      document.removeEventListener("click", onClick, true);
+    };
+  }, [enabled, isAnnotating]);
+  (0, import_react.useEffect)(() => {
+    if (!enabled || !isAnnotating) {
+      return;
+    }
+    document.addEventListener("scroll", refreshTrackedRects, true);
+    window.addEventListener("resize", refreshTrackedRects);
+    return () => {
+      document.removeEventListener("scroll", refreshTrackedRects, true);
+      window.removeEventListener("resize", refreshTrackedRects);
+    };
+  }, [enabled, isAnnotating, refreshTrackedRects]);
+  const addAnnotation = (0, import_react.useCallback)(async () => {
+    const current = selectedRef.current;
+    if (!current || current.loading) {
+      return;
+    }
+    const trimmedNote = note.trim();
+    if (!trimmedNote) {
+      setStatus("Add a note before saving this annotation.");
+      return;
+    }
+    const annotation = current.annotation ? { ...current.annotation, note: trimmedNote } : await captureElementAnnotation(current.element, trimmedNote);
+    setAnnotations((existing) => [...existing, { ...annotation, targetElement: current.element, rect: getRect(current.element) }]);
+    setSelected(null);
+    setNote("");
+    setStatus("Annotation saved.");
+  }, [note]);
+  const collect = (0, import_react.useCallback)(async () => {
+    const payload = createAnnotationCollection(annotations.map(({ rect: _rect, targetElement: _targetElement, ...annotation }) => annotation));
+    const text = formatAnnotationCollection(payload, output);
+    try {
+      await copyTextToClipboard(text);
+      onCollect?.(payload);
+      setIsAnnotating(false);
+      setSelected(null);
+      setHoverRect(null);
+      setNote("");
+      import_sonner.toast.success("Annotations copied", { description: `${payload.annotations.length} copied to clipboard.` });
+      setStatus(`Copied ${payload.annotations.length} annotation${payload.annotations.length === 1 ? "" : "s"}.`);
+    } catch (error) {
+      import_sonner.toast.error("Copy failed", { description: error instanceof Error ? error.message : "Clipboard copy failed." });
+      setStatus(error instanceof Error ? error.message : "Clipboard copy failed.");
+    }
+  }, [annotations, onCollect, output]);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...{ [ROOT_ATTR]: "" }, style: styles.root, "aria-live": "polite", children: [
+    renderToaster ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sonner.Toaster, { position: "bottom-right", richColors: true }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsAnnotating((current) => !current),
+        style: { ...styles.floatingButton, ...isAnnotating ? styles.floatingButtonActive : null },
+        "aria-pressed": isAnnotating,
+        title: `Toggle annotator (${hotkey})`,
+        children: isAnnotating ? "Annotating" : "Annotate"
+      }
+    ),
+    isAnnotating && hoverRect ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { rect: hoverRect, kind: "hover" }) : null,
+    selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { rect: selected.rect, kind: "selected" }) : null,
+    isAnnotating ? annotations.map((annotation, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pin, { annotation, index }, annotation.id)) : null,
+    selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: getPopoverStyle(selected.rect), role: "dialog", "aria-label": "Add source annotation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.popoverTitle, children: "Annotation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.metaText, children: selected.loading ? "Resolving source\u2026" : formatSelectedSource(selected.annotation) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          value: note,
+          onChange: (event) => setNote(event.target.value),
+          placeholder: "What should change here?",
+          style: styles.textarea,
+          rows: 4,
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.popoverActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setSelected(null), style: styles.secondaryButton, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: addAnnotation, style: styles.primaryButton, disabled: selected.loading, children: "Save note" })
+      ] })
+    ] }) : null,
+    isAnnotating ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { style: styles.panel, "aria-label": "Collected annotations", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.panelHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Annotations" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.badge, children: collection.annotations.length })
+      ] }),
+      annotations.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { style: styles.annotationList, children: annotations.map((annotation) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: styles.annotationItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.noteText, children: annotation.note }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.metaText, children: formatSelectedSource(annotation) })
+      ] }, annotation.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.emptyText, children: "Hover an element, click it, then add a note." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: collect, style: styles.collectButton, disabled: !annotations.length, children: "Collect" }),
+      status ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.status, children: status }) : null
+    ] }) : null
+  ] });
+}
+function Box({ rect, kind }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        ...styles.box,
+        ...kind === "selected" ? styles.selectedBox : styles.hoverBox,
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      }
+    }
+  );
+}
+function Pin({ annotation, index }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { ...styles.pin, top: Math.max(8, annotation.rect.top - 10), left: Math.max(8, annotation.rect.left - 10) },
+      title: annotation.note,
+      children: index + 1
+    }
+  );
+}
+function getAnnotatableTarget(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  if (target.closest(`[${ROOT_ATTR}]`)) {
+    return null;
+  }
+  if (target === document.body || target === document.documentElement) {
+    return null;
+  }
+  return target;
+}
+function getRect(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getPopoverStyle(rect) {
+  const top = Math.min(window.innerHeight - 260, rect.top + rect.height + 8);
+  const left = Math.min(window.innerWidth - 340, Math.max(8, rect.left));
+  return {
+    ...styles.popover,
+    top: Math.max(8, top),
+    left
+  };
+}
+function formatSelectedSource(annotation) {
+  const componentPath = annotation?.componentPath.length ? annotation.componentPath.join(" \u203A ") : null;
+  if (!annotation) {
+    return "Source unavailable";
+  }
+  if (!annotation.source?.filePath) {
+    return `${annotation.element.selector} \xB7 source unavailable`;
+  }
+  const line = annotation.source.lineNumber ? `:${annotation.source.lineNumber}` : "";
+  const component = componentPath ? ` \xB7 ${componentPath}` : "";
+  return `${annotation.source.filePath}${line}${component}`;
+}
+function matchesHotkey(event, hotkey) {
+  const parts = hotkey.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+  const key = parts.find((part) => !["ctrl", "control", "cmd", "meta", "mod", "shift", "alt", "option"].includes(part));
+  const wantsMeta = parts.includes("meta") || parts.includes("cmd") || parts.includes("mod") && isMac();
+  const wantsCtrl = parts.includes("ctrl") || parts.includes("control") || parts.includes("mod") && !isMac();
+  const wantsShift = parts.includes("shift");
+  const wantsAlt = parts.includes("alt") || parts.includes("option");
+  return event.key.toLowerCase() === key && event.metaKey === wantsMeta && event.ctrlKey === wantsCtrl && event.shiftKey === wantsShift && event.altKey === wantsAlt;
+}
+function isMac() {
+  return typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform);
+}
+var baseFont = '13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+var styles = {
+  root: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 2147483647,
+    pointerEvents: "none",
+    font: baseFont,
+    color: "#0f172a"
+  },
+  floatingButton: {
+    position: "fixed",
+    right: 16,
+    bottom: 16,
+    pointerEvents: "auto",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "#cbd5e1",
+    background: "#ffffff",
+    color: "#0f172a",
+    borderRadius: 999,
+    padding: "10px 14px",
+    font: baseFont,
+    fontWeight: 700,
+    boxShadow: "0 10px 25px rgba(15, 23, 42, 0.16)",
+    cursor: "pointer"
+  },
+  floatingButtonActive: {
+    background: "#0f172a",
+    color: "#ffffff",
+    borderColor: "#0f172a"
+  },
+  box: {
+    position: "fixed",
+    borderRadius: 6,
+    pointerEvents: "none",
+    boxSizing: "border-box"
+  },
+  hoverBox: {
+    border: "2px solid #38bdf8",
+    background: "rgba(56, 189, 248, 0.08)"
+  },
+  selectedBox: {
+    border: "2px solid #f97316",
+    background: "rgba(249, 115, 22, 0.1)"
+  },
+  popover: {
+    position: "fixed",
+    width: 320,
+    pointerEvents: "auto",
+    background: "#ffffff",
+    border: "1px solid #cbd5e1",
+    borderRadius: 12,
+    padding: 12,
+    boxShadow: "0 18px 45px rgba(15, 23, 42, 0.22)"
+  },
+  popoverTitle: {
+    fontWeight: 800,
+    marginBottom: 4
+  },
+  metaText: {
+    color: "#64748b",
+    fontSize: 12,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  textarea: {
+    width: "100%",
+    boxSizing: "border-box",
+    marginTop: 10,
+    border: "1px solid #cbd5e1",
+    borderRadius: 8,
+    padding: 10,
+    resize: "vertical",
+    font: baseFont
+  },
+  popoverActions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8,
+    marginTop: 10
+  },
+  secondaryButton: {
+    border: "1px solid #cbd5e1",
+    borderRadius: 8,
+    background: "#ffffff",
+    padding: "7px 10px",
+    cursor: "pointer"
+  },
+  primaryButton: {
+    border: "1px solid #0f172a",
+    borderRadius: 8,
+    background: "#0f172a",
+    color: "#ffffff",
+    padding: "7px 10px",
+    cursor: "pointer"
+  },
+  panel: {
+    position: "fixed",
+    right: 16,
+    bottom: 68,
+    width: 300,
+    pointerEvents: "auto",
+    background: "#ffffff",
+    border: "1px solid #cbd5e1",
+    borderRadius: 12,
+    padding: 12,
+    boxShadow: "0 18px 45px rgba(15, 23, 42, 0.18)"
+  },
+  panelHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  badge: {
+    minWidth: 20,
+    height: 20,
+    borderRadius: 999,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#e2e8f0",
+    color: "#334155",
+    fontWeight: 700,
+    fontSize: 12
+  },
+  annotationList: {
+    listStyle: "decimal",
+    margin: "0 0 10px 18px",
+    padding: 0,
+    maxHeight: 180,
+    overflow: "auto"
+  },
+  annotationItem: {
+    marginBottom: 8
+  },
+  noteText: {
+    color: "#0f172a",
+    fontWeight: 650
+  },
+  emptyText: {
+    color: "#64748b",
+    margin: "6px 0 10px"
+  },
+  collectButton: {
+    width: "100%",
+    border: "1px solid #0f172a",
+    borderRadius: 8,
+    background: "#0f172a",
+    color: "#ffffff",
+    padding: "9px 10px",
+    fontWeight: 800,
+    cursor: "pointer"
+  },
+  status: {
+    marginTop: 8,
+    color: "#475569",
+    fontSize: 12
+  },
+  pin: {
+    position: "fixed",
+    width: 20,
+    height: 20,
+    borderRadius: 999,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+    background: "#f97316",
+    color: "#ffffff",
+    fontSize: 12,
+    fontWeight: 800,
+    boxShadow: "0 8px 18px rgba(15, 23, 42, 0.2)"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SourceAnnotator,
+  captureElementAnnotation,
+  copyTextToClipboard,
+  createAnnotationCollection,
+  formatAnnotationCollection,
+  formatMarkdown,
+  getElementSelector,
+  trimText
+});
+//# sourceMappingURL=index.cjs.map