@immense/vue-pom-generator 1.0.70 → 1.0.71

package/dist/index.cjs

@@ -35,6 +35,7 @@ const tsMorph = require("ts-morph");
 const types = require("@babel/types");
 const node_perf_hooks = require("node:perf_hooks");
 const vue = require("@vitejs/plugin-vue");
+const dom = require("@floating-ui/dom");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -9674,6 +9675,1400 @@ function createVuePomGeneratorPlugins(options = {}) {
   }
   return resultPlugins;
 }
+function normalizeInlineText(value) {
+  const normalized = value?.replace(/\s+/g, " ").trim();
+  return normalized || void 0;
+}
+function formatAnnotations(annotations, detail, pageUrl) {
+  const shortUrl = pageUrl.replace(/^https?:\/\//, "");
+  const lines = [];
+  lines.push(`## Feedback — ${shortUrl}`);
+  lines.push(`- **URL:** ${pageUrl}`);
+  if (detail === "forensic" && typeof window !== "undefined") {
+    lines.push(`- **Viewport:** ${window.innerWidth}x${window.innerHeight}`);
+  }
+  lines.push("");
+  for (let i = 0; i < annotations.length; i += 1) {
+    const annotation = annotations[i];
+    const title = normalizeInlineText(annotation.comment) || annotation.targetLabel;
+    lines.push(`### ${i + 1}. ${title}`);
+    lines.push(`- **Source:** ${annotation.source || "Unable to find component file path."}`);
+    if (annotation.component) {
+      lines.push(`- **Component:** ${annotation.component}`);
+    }
+    lines.push(`- **Target:** \`${annotation.targetLabel}\``);
+    const uiText = normalizeInlineText(annotation.uiText);
+    if (uiText) {
+      lines.push(`- **UI text:** \`${uiText}\``);
+    }
+    const locator = normalizeInlineText(annotation.locator);
+    if (locator) {
+      lines.push(`- **Locator:** ${locator}`);
+    }
+    if (detail === "forensic") {
+      const domHint = normalizeInlineText(annotation.domHint);
+      if (domHint) {
+        lines.push(`- **DOM hint:** \`${domHint}\``);
+      }
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function formatSingleAnnotationPreview(annotation, detail, pageUrl) {
+  const formatted = formatAnnotations([annotation], detail, pageUrl);
+  const headingIndex = formatted.indexOf("### 1.");
+  return headingIndex >= 0 ? formatted.slice(headingIndex).trim() : formatted.trim();
+}
+const ANNOTATOR_ROOT_ATTR = "data-vpg-annotator-root";
+const ANNOTATOR_STYLES = `
+[${ANNOTATOR_ROOT_ATTR}] {
+  --vpg-annotator-accent: #4f46e5;
+  --vpg-annotator-accent-strong: #4338ca;
+  --vpg-annotator-bg: rgba(15, 23, 42, 0.96);
+  --vpg-annotator-bg-soft: rgba(30, 41, 59, 0.96);
+  --vpg-annotator-border: rgba(148, 163, 184, 0.28);
+  --vpg-annotator-text: #e2e8f0;
+  --vpg-annotator-text-soft: #94a3b8;
+  --vpg-annotator-shadow: 0 16px 40px rgba(15, 23, 42, 0.26);
+  --vpg-annotator-radius: 0px;
+  --vpg-annotator-edge-offset: 20px;
+  color: var(--vpg-annotator-text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+[${ANNOTATOR_ROOT_ATTR}],
+[${ANNOTATOR_ROOT_ATTR}] *,
+[${ANNOTATOR_ROOT_ATTR}] *::before,
+[${ANNOTATOR_ROOT_ATTR}] *::after {
+  box-sizing: border-box;
+}
+
+.vpg-annotator-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.vpg-annotator-layer--markers {
+  z-index: 2147483646;
+}
+
+.vpg-annotator-layer--panels {
+  z-index: 2147483647;
+}
+
+.vpg-annotator-toolbar,
+.vpg-annotator-panel,
+.vpg-annotator-input,
+.vpg-annotator-settings,
+.vpg-annotator-toast {
+  background: var(--vpg-annotator-bg);
+  border: 1px solid var(--vpg-annotator-border);
+  box-shadow: var(--vpg-annotator-shadow);
+  backdrop-filter: blur(18px);
+}
+
+.vpg-annotator-toolbar {
+  position: fixed;
+  right: var(--vpg-annotator-edge-offset);
+  bottom: var(--vpg-annotator-edge-offset);
+  z-index: 2147483647;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px;
+  border-radius: var(--vpg-annotator-radius);
+  user-select: none;
+}
+
+.vpg-annotator-toolbar-handle,
+.vpg-annotator-btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 7px 10px;
+  border: 1px solid var(--vpg-annotator-border);
+  border-radius: var(--vpg-annotator-radius);
+  background: var(--vpg-annotator-bg-soft);
+  color: var(--vpg-annotator-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.vpg-annotator-toolbar-handle {
+  padding: 0;
+  cursor: grab;
+  touch-action: none;
+}
+
+.vpg-annotator-toolbar--dragging,
+.vpg-annotator-toolbar--dragging * {
+  cursor: grabbing !important;
+}
+
+.vpg-annotator-btn {
+  cursor: pointer;
+}
+
+.vpg-annotator-btn--icon {
+  width: 32px;
+  padding: 0;
+}
+
+.vpg-annotator-btn:hover,
+.vpg-annotator-toolbar-handle:hover {
+  border-color: rgba(99, 102, 241, 0.45);
+}
+
+.vpg-annotator-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.vpg-annotator-btn--primary,
+.vpg-annotator-btn[aria-pressed="true"] {
+  background: var(--vpg-annotator-accent);
+  border-color: var(--vpg-annotator-accent);
+  color: white;
+}
+
+.vpg-annotator-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vpg-annotator-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.vpg-annotator-count {
+  padding-left: 4px;
+  white-space: nowrap;
+}
+
+.vpg-annotator-panel,
+.vpg-annotator-input,
+.vpg-annotator-settings {
+  position: fixed;
+  z-index: 2147483647;
+  min-width: 300px;
+  max-width: min(560px, calc(100vw - 24px));
+  border-radius: var(--vpg-annotator-radius);
+  overflow: visible;
+  pointer-events: auto;
+  visibility: hidden;
+}
+
+.vpg-annotator-settings {
+  min-width: 260px;
+  max-width: min(320px, calc(100vw - 24px));
+}
+
+.vpg-annotator-arrow {
+  position: absolute;
+  z-index: 0;
+  width: 14px;
+  height: 14px;
+  background: var(--vpg-annotator-bg);
+  border: 1px solid var(--vpg-annotator-border);
+  transform: rotate(45deg);
+}
+
+.vpg-annotator-panel[data-placement^="top"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="top"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="top"] .vpg-annotator-arrow {
+  border-top: none;
+  border-left: none;
+}
+
+.vpg-annotator-panel[data-placement^="bottom"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="bottom"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="bottom"] .vpg-annotator-arrow {
+  border-right: none;
+  border-bottom: none;
+}
+
+.vpg-annotator-panel[data-placement^="left"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="left"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="left"] .vpg-annotator-arrow {
+  border-left: none;
+  border-bottom: none;
+}
+
+.vpg-annotator-panel[data-placement^="right"] .vpg-annotator-arrow,
+.vpg-annotator-input[data-placement^="right"] .vpg-annotator-arrow,
+.vpg-annotator-settings[data-placement^="right"] .vpg-annotator-arrow {
+  border-top: none;
+  border-right: none;
+}
+
+.vpg-annotator-panel-body,
+.vpg-annotator-input-body,
+.vpg-annotator-settings-body {
+  position: relative;
+  z-index: 1;
+  padding: 14px;
+}
+
+.vpg-annotator-heading {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.vpg-annotator-subtle {
+  margin: 0;
+  font-size: 12px;
+  color: var(--vpg-annotator-text-soft);
+}
+
+.vpg-annotator-textarea,
+.vpg-annotator-comment,
+.vpg-annotator-select {
+  width: 100%;
+  border: 1px solid var(--vpg-annotator-border);
+  border-radius: var(--vpg-annotator-radius);
+  background: rgba(15, 23, 42, 0.72);
+  color: var(--vpg-annotator-text);
+}
+
+.vpg-annotator-textarea,
+.vpg-annotator-comment {
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.vpg-annotator-textarea {
+  min-height: 220px;
+  margin-top: 12px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.vpg-annotator-comment {
+  min-height: 92px;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.vpg-annotator-input-meta {
+  min-height: 160px;
+  margin-bottom: 10px;
+}
+
+.vpg-annotator-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.vpg-annotator-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.vpg-annotator-field {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.vpg-annotator-shortcuts {
+  display: grid;
+  gap: 8px;
+}
+
+.vpg-annotator-shortcut-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vpg-annotator-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vpg-annotator-text-soft);
+}
+
+.vpg-annotator-select,
+.vpg-annotator-checkbox {
+  accent-color: var(--vpg-annotator-accent);
+}
+
+.vpg-annotator-select {
+  padding: 8px 10px;
+}
+
+.vpg-annotator-kbd {
+  min-width: 32px;
+  padding: 4px 8px;
+  border: 1px solid var(--vpg-annotator-border);
+  border-radius: var(--vpg-annotator-radius);
+  background: rgba(15, 23, 42, 0.72);
+  color: var(--vpg-annotator-text);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+}
+
+.vpg-annotator-highlight {
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  border: 2px solid var(--vpg-annotator-accent);
+  border-radius: var(--vpg-annotator-radius);
+  background: rgba(79, 70, 229, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
+}
+
+.vpg-annotator-highlight-label {
+  position: absolute;
+  left: 0;
+  top: -30px;
+  max-width: min(520px, calc(100vw - 24px));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--vpg-annotator-radius);
+  background: var(--vpg-annotator-accent);
+  color: white;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.vpg-annotator-shield {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483645;
+  background: transparent;
+}
+
+.vpg-annotator-marker {
+  position: absolute;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  pointer-events: auto;
+  border: none;
+  border-radius: var(--vpg-annotator-radius);
+  background: var(--vpg-annotator-accent);
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
+}
+
+.vpg-annotator-toast {
+  position: fixed;
+  right: 24px;
+  bottom: 86px;
+  z-index: 2147483647;
+  padding: 8px 12px;
+  border-radius: var(--vpg-annotator-radius);
+  color: var(--vpg-annotator-text);
+  font-size: 12px;
+  font-weight: 600;
+}
+`;
+const ignoredComponentNamePattern = /^(?:items\[\d+\]\.template|template|anonymous|slot|transition|transition-group)$/i;
+function getDirectVueInstances(element) {
+  const instances = [];
+  const vue2Instance = element.__vue__;
+  const vue3Instance = element.__vueParentComponent;
+  if (vue2Instance) {
+    instances.push(vue2Instance);
+  }
+  if (vue3Instance && vue3Instance !== vue2Instance) {
+    instances.push(vue3Instance);
+  }
+  return instances;
+}
+function stripSourcePosition(sourcePath) {
+  return sourcePath.replace(/:\d+:\d+$/, "");
+}
+function inferNameFromFile(filePath) {
+  const fileName = stripSourcePosition(filePath).split("/").pop();
+  if (!fileName) {
+    return null;
+  }
+  return fileName.replace(/\.vue$/, "");
+}
+function isMeaningfulComponentName(name) {
+  return !!name && !ignoredComponentNamePattern.test(name.trim());
+}
+function isComponentLikeSourceTag(tag) {
+  return !!tag && (/[A-Z]/.test(tag.trim()) || tag.includes("-"));
+}
+function formatSourceLabel(sourcePath, includePosition = true) {
+  const match = sourcePath.match(/^(.*?)(?::(\d+):(\d+))?$/);
+  if (!match) {
+    return sourcePath;
+  }
+  const [, rawPath, line, column] = match;
+  const frontendPathMatch = rawPath.match(/(?:^|\/)frontend\/(src\/.*)$/);
+  const normalizedPath = frontendPathMatch?.[1] ?? rawPath;
+  if (includePosition && line && column) {
+    return `${normalizedPath}:${line}:${column}`;
+  }
+  return normalizedPath;
+}
+function getStringPropValue(props, key) {
+  const value = props?.[key];
+  return typeof value === "string" && value.length > 0 ? value : void 0;
+}
+function getDisplayComponentName(componentName, sourcePath, sourceTag) {
+  if (isComponentLikeSourceTag(sourceTag)) {
+    return sourceTag.trim();
+  }
+  const inferredName = sourcePath ? inferNameFromFile(sourcePath) : null;
+  if (isMeaningfulComponentName(inferredName)) {
+    return inferredName;
+  }
+  if (isMeaningfulComponentName(componentName)) {
+    return componentName.trim();
+  }
+  return void 0;
+}
+function resolveAnnotatedInfo(componentName, sourcePath, sourceTag) {
+  const component = getDisplayComponentName(componentName, sourcePath, sourceTag);
+  const source = sourcePath ? formatSourceLabel(sourcePath, true) : void 0;
+  if (!component && !source) {
+    return void 0;
+  }
+  return {
+    component,
+    source,
+    formatted: component ? source ? `${component} (${source})` : component : source
+  };
+}
+function getAnnotatedInfoFromElement(element, options) {
+  const pomComponentAttribute = `${options.metadataAttributePrefix}-component`;
+  const pomTagAttribute = `${options.metadataAttributePrefix}-tag`;
+  const annotatedElement = element.closest(`[${pomComponentAttribute}], [${options.sourceAttribute}]`);
+  if (!annotatedElement) {
+    return void 0;
+  }
+  return resolveAnnotatedInfo(
+    annotatedElement.getAttribute(pomComponentAttribute),
+    annotatedElement.getAttribute(options.sourceAttribute) ?? void 0,
+    annotatedElement.getAttribute(pomTagAttribute)
+  );
+}
+function getAnnotatedInfoFromInstance(instance, options) {
+  const pomComponentAttribute = `${options.metadataAttributePrefix}-component`;
+  const pomTagAttribute = `${options.metadataAttributePrefix}-tag`;
+  return resolveAnnotatedInfo(
+    getStringPropValue(instance.vnode?.props, pomComponentAttribute),
+    getStringPropValue(instance.vnode?.props, options.sourceAttribute),
+    getStringPropValue(instance.vnode?.props, pomTagAttribute)
+  );
+}
+function getInstanceName(instance) {
+  if (instance.$options) {
+    const name = instance.$options.name ?? instance.$options._componentTag ?? inferNameFromFile(instance.$options.__file ?? "");
+    if (isMeaningfulComponentName(name)) {
+      return {
+        component: name,
+        source: instance.$options.__file ? formatSourceLabel(instance.$options.__file, true) : void 0,
+        formatted: instance.$options.__file ? `${name} (${formatSourceLabel(instance.$options.__file, true)})` : name
+      };
+    }
+  }
+  if (instance.type) {
+    const name = instance.type.name ?? instance.type.__name ?? inferNameFromFile(instance.type.__file ?? "");
+    if (isMeaningfulComponentName(name)) {
+      return {
+        component: name,
+        source: instance.type.__file ? formatSourceLabel(instance.type.__file, true) : void 0,
+        formatted: instance.type.__file ? `${name} (${formatSourceLabel(instance.type.__file, true)})` : name
+      };
+    }
+  }
+  return void 0;
+}
+function scoreInfo(info) {
+  if (!info) {
+    return -1;
+  }
+  return (info.component ? 10 : 0) + (info.source ? 100 : 0);
+}
+function resolveVueComponentInfo(element, options) {
+  const annotatedElementInfo = getAnnotatedInfoFromElement(element, options);
+  if (annotatedElementInfo) {
+    return annotatedElementInfo;
+  }
+  const seenInstances = /* @__PURE__ */ new Set();
+  let bestInfo;
+  let bestScore = -1;
+  let current = element;
+  let depth = 0;
+  while (current && current !== document.body && depth < 50) {
+    for (const instance of getDirectVueInstances(current)) {
+      if (seenInstances.has(instance)) {
+        continue;
+      }
+      seenInstances.add(instance);
+      const annotatedInstanceInfo = getAnnotatedInfoFromInstance(instance, options);
+      const candidate = annotatedInstanceInfo ?? getInstanceName(instance);
+      const score = scoreInfo(candidate);
+      if (score > bestScore) {
+        bestInfo = candidate;
+        bestScore = score;
+      }
+    }
+    current = current.parentElement;
+    depth += 1;
+  }
+  return bestInfo;
+}
+const SETTINGS_STORAGE_KEY = "vpg-annotator-settings";
+const ANNOTATIONS_STORAGE_KEY = "vpg-annotator-annotations";
+const TOOLBAR_POSITION_STORAGE_KEY = "vpg-annotator-toolbar-position";
+const RUNTIME_GUARD = "__VUE_POM_GENERATOR_ANNOTATOR_RUNTIME__";
+const TOOLBAR_ICON_MARKUP = {
+  drag: '<svg viewBox="0 0 16 16"><path d="M5 3h1v1H5zM10 3h1v1h-1zM5 7h1v1H5zM10 7h1v1h-1zM5 11h1v1H5zM10 11h1v1h-1z" fill="currentColor" stroke="none" /></svg>',
+  inspect: '<svg viewBox="0 0 16 16"><path d="M8 2v3M8 11v3M2 8h3M11 8h3M4 4l2 2M10 10l2 2M12 4l-2 2M6 10l-2 2"/><circle cx="8" cy="8" r="2.5"/></svg>',
+  preview: '<svg viewBox="0 0 16 16"><path d="M1.5 8s2.4-4 6.5-4 6.5 4 6.5 4-2.4 4-6.5 4-6.5-4-6.5-4Z"/><circle cx="8" cy="8" r="1.8"/></svg>',
+  copy: '<svg viewBox="0 0 16 16"><path d="M6 2.5h6.5v9H6z"/><path d="M3.5 5.5H5v6.5h5.5v1.5h-7z"/></svg>',
+  clear: '<svg viewBox="0 0 16 16"><path d="M2.5 4.5h11"/><path d="M6 2.5h4"/><path d="M5 4.5v8"/><path d="M8 4.5v8"/><path d="M11 4.5v8"/><path d="M4 4.5h8l-.6 9H4.6z"/></svg>',
+  settings: '<svg viewBox="0 0 16 16"><path d="M8 2.2l1 .6 1.2-.2.8 1 .9.7-.3 1.2.5 1-.5 1 .3 1.2-.9.7-.8 1-1.2-.2-1 .6-1-.6-1.2.2-.8-1-.9-.7.3-1.2-.5-1 .5-1-.3-1.2.9-.7.8-1 1.2.2z"/><circle cx="8" cy="8" r="2.2"/></svg>'
+};
+const SHORTCUT_LABELS = {
+  select: "S",
+  preview: "P",
+  copy: "C",
+  clear: "X",
+  settings: ",",
+  cancel: "Esc"
+};
+function normalizeText(value) {
+  const normalized = value?.replace(/\s+/g, " ").trim();
+  return normalized || void 0;
+}
+function formatShortcutTitle(label, shortcut) {
+  return shortcut ? `${label} (${shortcut})` : label;
+}
+function isInsideAnnotatorTree(node) {
+  return node instanceof Element && !!node.closest(`[${ANNOTATOR_ROOT_ATTR}]`);
+}
+function isEditableTarget(node) {
+  if (!(node instanceof Element)) {
+    return false;
+  }
+  if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement || node instanceof HTMLSelectElement) {
+    return true;
+  }
+  return node.closest('[contenteditable=""], [contenteditable="true"]') !== null;
+}
+function getElementSummary(element) {
+  const testId = element.getAttribute("data-testid");
+  if (testId) {
+    return `[data-testid="${testId}"]`;
+  }
+  const id = element.getAttribute("id");
+  if (id) {
+    return `${element.tagName.toLowerCase()}#${id}`;
+  }
+  const classes = Array.from(element.classList).slice(0, 2).join(".");
+  return classes ? `${element.tagName.toLowerCase()}.${classes}` : element.tagName.toLowerCase();
+}
+function getElementPath(element) {
+  const segments = [];
+  let current = element;
+  let depth = 0;
+  while (current && current !== document.body && depth < 8) {
+    const summary = getElementSummary(current);
+    segments.unshift(summary);
+    current = current.parentElement;
+    depth += 1;
+  }
+  return segments.join(" > ");
+}
+function getNearbyText(element) {
+  const ownText = normalizeText(element.textContent || void 0);
+  if (ownText && ownText.length >= 2) {
+    return ownText.length > 160 ? `${ownText.slice(0, 160)}...` : ownText;
+  }
+  const parentText = normalizeText(element.parentElement?.textContent || void 0);
+  if (parentText) {
+    return parentText.length > 160 ? `${parentText.slice(0, 160)}...` : parentText;
+  }
+  return void 0;
+}
+function getNearbyLocator(element) {
+  const testId = element.getAttribute("data-testid") || element.getAttribute("data-v-pom-testid");
+  if (testId) {
+    return `near \`[data-testid="${testId}"]\``;
+  }
+  const siblings = Array.from(element.parentElement?.children || []).filter((sibling) => sibling !== element).slice(0, 3).map(getElementSummary);
+  return siblings.length ? `near ${siblings.map((value) => `\`${value}\``).join(", ")}` : void 0;
+}
+function createFloatingArrow() {
+  const arrowEl = document.createElement("div");
+  arrowEl.className = "vpg-annotator-arrow";
+  arrowEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+  return arrowEl;
+}
+function toCssPixels(value) {
+  return `${Math.round(value)}px`;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function createButtonBase(label, onClick, options = {}) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `vpg-annotator-btn${options.primary ? " vpg-annotator-btn--primary" : ""}`;
+  button.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+  button.setAttribute("aria-label", label);
+  button.title = formatShortcutTitle(label, options.shortcut);
+  if (options.shortcut) {
+    button.setAttribute("aria-keyshortcuts", options.shortcut);
+  }
+  if (options.pressed) {
+    button.setAttribute("aria-pressed", "true");
+  }
+  if (options.disabled) {
+    button.disabled = true;
+  }
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick();
+  });
+  return button;
+}
+function createIcon(iconName) {
+  const icon = document.createElement("span");
+  icon.className = "vpg-annotator-icon";
+  icon.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+  icon.setAttribute("aria-hidden", "true");
+  icon.innerHTML = TOOLBAR_ICON_MARKUP[iconName];
+  return icon;
+}
+function createButton(label, onClick, options = {}) {
+  const button = createButtonBase(label, onClick, options);
+  button.textContent = label;
+  return button;
+}
+function createIconButton(label, iconName, onClick, options = {}) {
+  const button = createButtonBase(label, onClick, options);
+  button.classList.add("vpg-annotator-btn--icon");
+  button.appendChild(createIcon(iconName));
+  return button;
+}
+function createToolbarHandle() {
+  const handle = document.createElement("div");
+  handle.className = "vpg-annotator-toolbar-handle";
+  handle.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+  handle.setAttribute("title", "Drag annotator toolbar");
+  handle.setAttribute("aria-hidden", "true");
+  handle.appendChild(createIcon("drag"));
+  return handle;
+}
+async function copyTextToClipboard(text) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "true");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "0";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  const copied = document.execCommand("copy");
+  textarea.remove();
+  if (!copied) {
+    throw new Error("Clipboard copy failed.");
+  }
+}
+class AnnotatorRuntime {
+  options;
+  settings;
+  annotations = [];
+  hoveredElement = null;
+  inspectMode = false;
+  pendingAnnotation = null;
+  editingAnnotationId = null;
+  toolbarEl;
+  markerLayerEl;
+  panelLayerEl;
+  highlightEl;
+  highlightLabelEl;
+  shieldEl;
+  toastEl = null;
+  previewButton = null;
+  settingsButton = null;
+  currentPanelCleanup = null;
+  currentPanelEl = null;
+  toastTimer = null;
+  toolbarPosition = null;
+  constructor(options) {
+    this.options = options;
+    this.settings = this.loadSettings();
+    this.annotations = this.loadAnnotations();
+    this.toolbarPosition = this.loadToolbarPosition();
+  }
+  mount() {
+    this.ensureStyles();
+    this.createChrome();
+    this.renderToolbar();
+    this.renderMarkers();
+    this.attachGlobalListeners();
+  }
+  ensureStyles() {
+    if (document.getElementById("vpg-annotator-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "vpg-annotator-styles";
+    style.textContent = ANNOTATOR_STYLES;
+    document.head.appendChild(style);
+  }
+  createChrome() {
+    this.toolbarEl = document.createElement("div");
+    this.toolbarEl.className = "vpg-annotator-toolbar";
+    this.toolbarEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    this.markerLayerEl = document.createElement("div");
+    this.markerLayerEl.className = "vpg-annotator-layer vpg-annotator-layer--markers";
+    this.markerLayerEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    this.panelLayerEl = document.createElement("div");
+    this.panelLayerEl.className = "vpg-annotator-layer vpg-annotator-layer--panels";
+    this.panelLayerEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    this.highlightEl = document.createElement("div");
+    this.highlightEl.className = "vpg-annotator-highlight";
+    this.highlightEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    this.highlightEl.hidden = true;
+    this.highlightLabelEl = document.createElement("div");
+    this.highlightLabelEl.className = "vpg-annotator-highlight-label";
+    this.highlightLabelEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    this.highlightEl.appendChild(this.highlightLabelEl);
+    this.panelLayerEl.appendChild(this.highlightEl);
+    this.shieldEl = document.createElement("div");
+    this.shieldEl.className = "vpg-annotator-shield";
+    this.shieldEl.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    this.shieldEl.hidden = true;
+    document.body.append(this.markerLayerEl, this.panelLayerEl, this.shieldEl, this.toolbarEl);
+  }
+  renderToolbar() {
+    this.toolbarEl.replaceChildren();
+    const handle = createToolbarHandle();
+    this.attachToolbarDrag(handle);
+    const count = document.createElement("span");
+    count.className = "vpg-annotator-count vpg-annotator-subtle";
+    count.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    count.textContent = `${this.annotations.length} annotation${this.annotations.length === 1 ? "" : "s"}`;
+    const selectButton = createIconButton(this.inspectMode ? "Stop selecting" : "Select element", "inspect", () => {
+      this.setInspectMode(!this.inspectMode);
+    }, { primary: this.inspectMode, pressed: this.inspectMode, shortcut: SHORTCUT_LABELS.select });
+    const previewButton = createIconButton("Preview annotations", "preview", () => this.openPreview(), {
+      disabled: this.annotations.length === 0,
+      shortcut: SHORTCUT_LABELS.preview
+    });
+    this.previewButton = previewButton;
+    const copyButton = createIconButton("Copy annotations", "copy", () => this.copyAnnotations(), {
+      disabled: this.annotations.length === 0,
+      shortcut: SHORTCUT_LABELS.copy
+    });
+    const clearButton = createIconButton("Clear annotations", "clear", () => this.clearAnnotations(), {
+      disabled: this.annotations.length === 0,
+      shortcut: SHORTCUT_LABELS.clear
+    });
+    const settingsButton = createIconButton("Annotator settings", "settings", () => this.openSettings(), {
+      shortcut: SHORTCUT_LABELS.settings
+    });
+    this.settingsButton = settingsButton;
+    this.toolbarEl.append(handle, selectButton, previewButton, copyButton, clearButton, settingsButton, count);
+    this.applyToolbarPosition();
+  }
+  renderMarkers() {
+    this.markerLayerEl.replaceChildren();
+    for (const [index, annotation] of this.annotations.entries()) {
+      const marker = document.createElement("button");
+      marker.type = "button";
+      marker.className = "vpg-annotator-marker";
+      marker.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+      marker.textContent = String(index + 1);
+      marker.style.left = toCssPixels(annotation.pageX);
+      marker.style.top = toCssPixels(annotation.pageY - window.scrollY);
+      marker.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openInputForExistingAnnotation(annotation, marker);
+      });
+      this.markerLayerEl.appendChild(marker);
+    }
+  }
+  attachGlobalListeners() {
+    this.shieldEl.addEventListener("mousemove", (event) => this.onShieldMouseMove(event));
+    this.shieldEl.addEventListener("click", (event) => this.onShieldClick(event));
+    window.addEventListener("scroll", () => this.renderMarkers(), true);
+    window.addEventListener("resize", () => {
+      this.renderMarkers();
+      this.applyToolbarPosition();
+    });
+    window.addEventListener("keydown", (event) => this.onWindowKeyDown(event), true);
+  }
+  loadSettings() {
+    try {
+      const raw = localStorage.getItem(SETTINGS_STORAGE_KEY);
+      const parsed = raw ? JSON.parse(raw) : {};
+      return {
+        outputDetail: parsed.outputDetail ?? this.options.outputDetail,
+        copyToClipboard: parsed.copyToClipboard ?? this.options.copyToClipboard,
+        showComponentTree: parsed.showComponentTree ?? this.options.showComponentTree
+      };
+    } catch {
+      return {
+        outputDetail: this.options.outputDetail,
+        copyToClipboard: this.options.copyToClipboard,
+        showComponentTree: this.options.showComponentTree
+      };
+    }
+  }
+  saveSettings() {
+    localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(this.settings));
+    this.renderToolbar();
+  }
+  loadAnnotations() {
+    try {
+      const raw = sessionStorage.getItem(ANNOTATIONS_STORAGE_KEY);
+      if (!raw) {
+        return [];
+      }
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+      return Array.isArray(parsed[window.location.href]) ? parsed[window.location.href] : [];
+    } catch {
+      return [];
+    }
+  }
+  saveAnnotations() {
+    const store = { [window.location.href]: this.annotations };
+    sessionStorage.setItem(ANNOTATIONS_STORAGE_KEY, JSON.stringify(store));
+    this.renderToolbar();
+    this.renderMarkers();
+  }
+  loadToolbarPosition() {
+    try {
+      const raw = localStorage.getItem(TOOLBAR_POSITION_STORAGE_KEY);
+      if (!raw) {
+        return null;
+      }
+      const parsed = JSON.parse(raw);
+      if (typeof parsed.left !== "number" || typeof parsed.top !== "number") {
+        return null;
+      }
+      return { left: parsed.left, top: parsed.top };
+    } catch {
+      return null;
+    }
+  }
+  saveToolbarPosition() {
+    try {
+      if (!this.toolbarPosition) {
+        localStorage.removeItem(TOOLBAR_POSITION_STORAGE_KEY);
+        return;
+      }
+      localStorage.setItem(TOOLBAR_POSITION_STORAGE_KEY, JSON.stringify(this.toolbarPosition));
+    } catch {
+    }
+  }
+  clampToolbarPosition(position) {
+    const margin = 12;
+    const width = this.toolbarEl.offsetWidth || 0;
+    const height = this.toolbarEl.offsetHeight || 0;
+    const maxLeft = Math.max(margin, window.innerWidth - width - margin);
+    const maxTop = Math.max(margin, window.innerHeight - height - margin);
+    return {
+      left: clamp(position.left, margin, maxLeft),
+      top: clamp(position.top, margin, maxTop)
+    };
+  }
+  applyToolbarPosition() {
+    if (!this.toolbarPosition) {
+      this.toolbarEl.style.left = "";
+      this.toolbarEl.style.top = "";
+      this.toolbarEl.style.right = "";
+      this.toolbarEl.style.bottom = "";
+      return;
+    }
+    const position = this.clampToolbarPosition(this.toolbarPosition);
+    this.toolbarPosition = position;
+    this.toolbarEl.style.left = toCssPixels(position.left);
+    this.toolbarEl.style.top = toCssPixels(position.top);
+    this.toolbarEl.style.right = "auto";
+    this.toolbarEl.style.bottom = "auto";
+  }
+  attachToolbarDrag(handle) {
+    handle.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = this.toolbarEl.getBoundingClientRect();
+      const startX = event.clientX;
+      const startY = event.clientY;
+      const startLeft = rect.left;
+      const startTop = rect.top;
+      this.toolbarEl.classList.add("vpg-annotator-toolbar--dragging");
+      const onPointerMove = (moveEvent) => {
+        this.toolbarPosition = {
+          left: startLeft + moveEvent.clientX - startX,
+          top: startTop + moveEvent.clientY - startY
+        };
+        this.applyToolbarPosition();
+      };
+      const onPointerUp = () => {
+        this.toolbarEl.classList.remove("vpg-annotator-toolbar--dragging");
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("pointercancel", onPointerUp);
+        this.saveToolbarPosition();
+      };
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      window.addEventListener("pointercancel", onPointerUp);
+    });
+  }
+  onWindowKeyDown(event) {
+    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+      return;
+    }
+    if (event.key === "Escape") {
+      if (!this.inspectMode && !this.currentPanelEl) {
+        return;
+      }
+      event.preventDefault();
+      if (this.inspectMode) {
+        this.setInspectMode(false);
+      } else {
+        this.closePanel();
+      }
+      return;
+    }
+    if (isEditableTarget(event.target)) {
+      return;
+    }
+    const key = event.key.toLowerCase();
+    if (key === SHORTCUT_LABELS.select.toLowerCase()) {
+      event.preventDefault();
+      this.setInspectMode(!this.inspectMode);
+      return;
+    }
+    if (key === SHORTCUT_LABELS.preview.toLowerCase()) {
+      if (!this.annotations.length) {
+        return;
+      }
+      event.preventDefault();
+      this.openPreview();
+      return;
+    }
+    if (key === SHORTCUT_LABELS.copy.toLowerCase()) {
+      if (!this.annotations.length) {
+        return;
+      }
+      event.preventDefault();
+      void this.copyAnnotations();
+      return;
+    }
+    if (key === SHORTCUT_LABELS.clear.toLowerCase()) {
+      if (!this.annotations.length) {
+        return;
+      }
+      event.preventDefault();
+      this.clearAnnotations();
+      return;
+    }
+    if (event.key === SHORTCUT_LABELS.settings) {
+      event.preventDefault();
+      this.openSettings();
+    }
+  }
+  setInspectMode(next) {
+    this.inspectMode = next;
+    this.shieldEl.hidden = !next;
+    this.highlightEl.hidden = !next;
+    if (!next) {
+      this.hoveredElement = null;
+      this.highlightEl.hidden = true;
+    }
+    this.closePanel();
+    this.renderToolbar();
+  }
+  stopInspectModePreservingPending() {
+    this.inspectMode = false;
+    this.shieldEl.hidden = true;
+    this.highlightEl.hidden = true;
+    this.hoveredElement = null;
+    this.renderToolbar();
+  }
+  elementFromPoint(clientX, clientY) {
+    const previousPointerEvents = this.shieldEl.style.pointerEvents;
+    this.shieldEl.style.pointerEvents = "none";
+    const elements = document.elementsFromPoint(clientX, clientY);
+    this.shieldEl.style.pointerEvents = previousPointerEvents;
+    return elements.find((element) => !isInsideAnnotatorTree(element)) ?? null;
+  }
+  onShieldMouseMove(event) {
+    if (!this.inspectMode) {
+      return;
+    }
+    const element = this.elementFromPoint(event.clientX, event.clientY);
+    if (!element) {
+      this.hoveredElement = null;
+      this.highlightEl.hidden = true;
+      return;
+    }
+    this.hoveredElement = element;
+    const rect = element.getBoundingClientRect();
+    const info = resolveVueComponentInfo(element, this.options);
+    Object.assign(this.highlightEl.style, {
+      left: toCssPixels(rect.left),
+      top: toCssPixels(rect.top),
+      width: toCssPixels(rect.width),
+      height: toCssPixels(rect.height)
+    });
+    this.highlightLabelEl.textContent = info?.formatted || getElementSummary(element);
+    this.highlightEl.hidden = false;
+  }
+  onShieldClick(event) {
+    if (!this.inspectMode) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const element = this.elementFromPoint(event.clientX, event.clientY);
+    if (!element) {
+      return;
+    }
+    this.hoveredElement = element;
+    this.pendingAnnotation = this.buildAnnotationDraft(element, "");
+    this.editingAnnotationId = null;
+    this.stopInspectModePreservingPending();
+    this.openInputForDraft(element);
+  }
+  buildAnnotationDraft(element, comment) {
+    const rect = element.getBoundingClientRect();
+    const componentInfo = resolveVueComponentInfo(element, this.options);
+    return {
+      id: `draft-${Date.now()}`,
+      comment,
+      component: this.settings.showComponentTree ? componentInfo?.component : void 0,
+      source: componentInfo?.source,
+      targetLabel: componentInfo?.component || getElementSummary(element),
+      uiText: getNearbyText(element),
+      locator: getNearbyLocator(element),
+      domHint: getElementPath(element),
+      pageX: rect.left + rect.width / 2,
+      pageY: rect.top + window.scrollY
+    };
+  }
+  createPanelBase(className) {
+    const panel = document.createElement("div");
+    panel.className = className;
+    panel.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    const arrowEl = createFloatingArrow();
+    const body = document.createElement("div");
+    body.className = className === "vpg-annotator-settings" ? "vpg-annotator-settings-body" : className === "vpg-annotator-input" ? "vpg-annotator-input-body" : "vpg-annotator-panel-body";
+    body.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    panel.append(arrowEl, body);
+    document.body.appendChild(panel);
+    return { panel, arrowEl, body };
+  }
+  attachFloating(reference, panel, arrowEl, placement, allowedPlacements) {
+    const cleanup = dom.autoUpdate(reference, panel, async () => {
+      const result = await dom.computePosition(reference, panel, {
+        strategy: "fixed",
+        placement,
+        middleware: [
+          dom.offset(14),
+          dom.autoPlacement({ allowedPlacements: [...allowedPlacements], padding: 12 }),
+          dom.shift({ padding: 12 }),
+          dom.arrow({ element: arrowEl, padding: 10 })
+        ]
+      });
+      panel.setAttribute("data-placement", result.placement);
+      panel.style.left = toCssPixels(result.x);
+      panel.style.top = toCssPixels(result.y);
+      panel.style.visibility = "visible";
+      const arrowData = result.middlewareData.arrow;
+      const side = result.placement.split("-")[0];
+      const staticSide = side === "top" ? "bottom" : side === "bottom" ? "top" : side === "left" ? "right" : "left";
+      arrowEl.style.removeProperty("top");
+      arrowEl.style.removeProperty("right");
+      arrowEl.style.removeProperty("bottom");
+      arrowEl.style.removeProperty("left");
+      if (typeof arrowData?.x === "number") {
+        arrowEl.style.left = toCssPixels(arrowData.x);
+      }
+      if (typeof arrowData?.y === "number") {
+        arrowEl.style.top = toCssPixels(arrowData.y);
+      }
+      arrowEl.style.setProperty(staticSide, "-7px");
+    });
+    return cleanup;
+  }
+  openInputForDraft(reference) {
+    if (!this.pendingAnnotation) {
+      return;
+    }
+    const { panel, body, arrowEl } = this.createPanelBase("vpg-annotator-input");
+    const title = document.createElement("div");
+    title.className = "vpg-annotator-heading";
+    title.textContent = this.pendingAnnotation.component || this.pendingAnnotation.targetLabel;
+    const subtitle = document.createElement("p");
+    subtitle.className = "vpg-annotator-subtle";
+    subtitle.textContent = this.pendingAnnotation.source || "Unable to find component file path.";
+    const metadata = document.createElement("textarea");
+    metadata.className = "vpg-annotator-textarea vpg-annotator-input-meta";
+    metadata.readOnly = true;
+    metadata.value = formatSingleAnnotationPreview(this.pendingAnnotation, this.settings.outputDetail, window.location.href);
+    const commentLabel = document.createElement("label");
+    commentLabel.className = "vpg-annotator-label";
+    commentLabel.textContent = "Comment";
+    const comment = document.createElement("textarea");
+    comment.className = "vpg-annotator-comment";
+    comment.value = this.pendingAnnotation.comment;
+    comment.placeholder = "Add a comment...";
+    const actions = document.createElement("div");
+    actions.className = "vpg-annotator-actions";
+    const cancelButton = createButton("Cancel", () => this.closePanel());
+    const saveButton = createButton(this.editingAnnotationId ? "Save" : "Add", () => {
+      if (!this.pendingAnnotation) {
+        return;
+      }
+      this.pendingAnnotation.comment = comment.value.trim();
+      if (this.editingAnnotationId) {
+        const index = this.annotations.findIndex((annotation) => annotation.id === this.editingAnnotationId);
+        if (index >= 0) {
+          this.annotations[index] = { ...this.pendingAnnotation, id: this.editingAnnotationId };
+        }
+      } else {
+        this.annotations.push({ ...this.pendingAnnotation, id: `annotation-${Date.now()}` });
+      }
+      this.saveAnnotations();
+      this.closePanel();
+    }, { primary: true });
+    actions.append(cancelButton);
+    if (this.editingAnnotationId) {
+      const deleteButton = createButton("Delete", () => {
+        this.annotations = this.annotations.filter((annotation) => annotation.id !== this.editingAnnotationId);
+        this.saveAnnotations();
+        this.closePanel();
+      });
+      actions.append(deleteButton);
+    }
+    actions.append(saveButton);
+    body.append(title, subtitle, metadata, commentLabel, comment, actions);
+    this.showPanel(panel, () => this.attachFloating(reference, panel, arrowEl, "right-start", ["right-start", "left-start", "bottom-start", "top-start"]));
+    comment.focus();
+  }
+  openInputForExistingAnnotation(annotation, reference) {
+    this.pendingAnnotation = { ...annotation };
+    this.editingAnnotationId = annotation.id;
+    this.openInputForDraft(reference);
+  }
+  openPreview() {
+    if (!this.previewButton || this.annotations.length === 0) {
+      return;
+    }
+    const { panel, body, arrowEl } = this.createPanelBase("vpg-annotator-panel");
+    const title = document.createElement("div");
+    title.className = "vpg-annotator-heading";
+    title.textContent = "Annotation preview";
+    const subtitle = document.createElement("p");
+    subtitle.className = "vpg-annotator-subtle";
+    subtitle.textContent = "Exact text that Copy will copy.";
+    const textarea = document.createElement("textarea");
+    textarea.className = "vpg-annotator-textarea";
+    textarea.readOnly = true;
+    textarea.value = formatAnnotations(this.annotations, this.settings.outputDetail, window.location.href);
+    body.append(title, subtitle, textarea);
+    this.showPanel(panel, () => this.attachFloating(this.previewButton, panel, arrowEl, "top-start", ["top-start", "left-start", "top-end", "left-end"]));
+  }
+  openSettings() {
+    if (!this.settingsButton) {
+      return;
+    }
+    const { panel, body, arrowEl } = this.createPanelBase("vpg-annotator-settings");
+    const title = document.createElement("div");
+    title.className = "vpg-annotator-heading";
+    title.textContent = "Annotator settings";
+    const detailField = document.createElement("div");
+    detailField.className = "vpg-annotator-field";
+    const detailLabel = document.createElement("label");
+    detailLabel.className = "vpg-annotator-label";
+    detailLabel.textContent = "Output detail";
+    const detailSelect = document.createElement("select");
+    detailSelect.className = "vpg-annotator-select";
+    detailSelect.innerHTML = '<option value="standard">Standard</option><option value="forensic">Forensic</option>';
+    detailSelect.value = this.settings.outputDetail;
+    detailSelect.addEventListener("change", () => {
+      this.settings.outputDetail = detailSelect.value === "forensic" ? "forensic" : "standard";
+      this.saveSettings();
+    });
+    detailField.append(detailLabel, detailSelect);
+    const showComponentField = document.createElement("label");
+    showComponentField.className = "vpg-annotator-row";
+    const showComponentCopy = document.createElement("span");
+    showComponentCopy.className = "vpg-annotator-label";
+    showComponentCopy.textContent = "Show component labels";
+    const showComponentCheckbox = document.createElement("input");
+    showComponentCheckbox.type = "checkbox";
+    showComponentCheckbox.className = "vpg-annotator-checkbox";
+    showComponentCheckbox.checked = this.settings.showComponentTree;
+    showComponentCheckbox.addEventListener("change", () => {
+      this.settings.showComponentTree = showComponentCheckbox.checked;
+      this.saveSettings();
+    });
+    showComponentField.append(showComponentCopy, showComponentCheckbox);
+    const shortcutsField = document.createElement("div");
+    shortcutsField.className = "vpg-annotator-field";
+    const shortcutsLabel = document.createElement("div");
+    shortcutsLabel.className = "vpg-annotator-label";
+    shortcutsLabel.textContent = "Keyboard shortcuts";
+    const shortcutsList = document.createElement("div");
+    shortcutsList.className = "vpg-annotator-shortcuts";
+    for (const [shortcut, description] of [
+      [SHORTCUT_LABELS.select, "Toggle selection mode"],
+      [SHORTCUT_LABELS.preview, "Open preview"],
+      [SHORTCUT_LABELS.copy, "Copy annotations"],
+      [SHORTCUT_LABELS.clear, "Clear annotations"],
+      [SHORTCUT_LABELS.settings, "Open settings"],
+      [SHORTCUT_LABELS.cancel, "Close panel / cancel selection"]
+    ]) {
+      const row = document.createElement("div");
+      row.className = "vpg-annotator-shortcut-row";
+      const text = document.createElement("span");
+      text.className = "vpg-annotator-subtle";
+      text.textContent = description;
+      const kbd = document.createElement("kbd");
+      kbd.className = "vpg-annotator-kbd";
+      kbd.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+      kbd.textContent = shortcut;
+      row.append(text, kbd);
+      shortcutsList.appendChild(row);
+    }
+    shortcutsField.append(shortcutsLabel, shortcutsList);
+    body.append(title, detailField, showComponentField, shortcutsField);
+    this.showPanel(panel, () => this.attachFloating(this.settingsButton, panel, arrowEl, "top-start", ["top-start", "left-start", "top-end", "left-end"]));
+  }
+  disposeCurrentPanel() {
+    this.currentPanelCleanup?.();
+    this.currentPanelCleanup = null;
+    this.currentPanelEl?.remove();
+    this.currentPanelEl = null;
+  }
+  showPanel(panel, attachFloatingFn) {
+    this.disposeCurrentPanel();
+    this.currentPanelEl = panel;
+    this.currentPanelCleanup = attachFloatingFn();
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (isInsideAnnotatorTree(target)) {
+        return;
+      }
+      this.closePanel();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    const originalCleanup = this.currentPanelCleanup;
+    this.currentPanelCleanup = () => {
+      originalCleanup?.();
+      document.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }
+  closePanel() {
+    this.disposeCurrentPanel();
+    this.pendingAnnotation = null;
+    this.editingAnnotationId = null;
+  }
+  clearAnnotations() {
+    if (!this.annotations.length) {
+      return;
+    }
+    this.annotations = [];
+    this.saveAnnotations();
+    this.showToast("Annotations cleared");
+    this.closePanel();
+  }
+  async copyAnnotations() {
+    if (!this.annotations.length) {
+      return;
+    }
+    const text = formatAnnotations(this.annotations, this.settings.outputDetail, window.location.href);
+    try {
+      await copyTextToClipboard(text);
+      this.showToast("Copied");
+    } catch {
+      this.showToast("Copy failed");
+    }
+  }
+  showToast(message) {
+    this.toastEl?.remove();
+    if (this.toastTimer !== null) {
+      window.clearTimeout(this.toastTimer);
+    }
+    const toast = document.createElement("div");
+    toast.className = "vpg-annotator-toast";
+    toast.setAttribute(ANNOTATOR_ROOT_ATTR, "");
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    this.toastEl = toast;
+    this.toastTimer = window.setTimeout(() => {
+      toast.remove();
+      if (this.toastEl === toast) {
+        this.toastEl = null;
+      }
+      this.toastTimer = null;
+    }, 1600);
+  }
+}
+function mountAnnotatorClient(options) {
+  const runtimeWindow = window;
+  if (runtimeWindow[RUNTIME_GUARD]) {
+    return runtimeWindow[RUNTIME_GUARD];
+  }
+  const runtime = new AnnotatorRuntime(options);
+  runtime.mount();
+  runtimeWindow[RUNTIME_GUARD] = runtime;
+  return runtime;
+}
 const nuxtConfigMarker = /* @__PURE__ */ Symbol.for("@immense/vue-pom-generator.nuxt");
 function defineVuePomGeneratorConfig(options) {
   return options;
@@ -9690,5 +11085,6 @@ exports.createVuePomGeneratorPlugins = createVuePomGeneratorPlugins;
 exports.default = createVuePomGeneratorPlugins;
 exports.defineNuxtPomGeneratorConfig = defineNuxtPomGeneratorConfig;
 exports.defineVuePomGeneratorConfig = defineVuePomGeneratorConfig;
+exports.mountAnnotatorClient = mountAnnotatorClient;
 exports.vuePomGenerator = createVuePomGeneratorPlugins;
 //# sourceMappingURL=index.cjs.map