vite-plugin-ai-annotator 1.14.2 → 1.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6389,10 +6389,15 @@
6389
6389
  // src/annotator/constants.ts
6390
6390
  var Z_INDEX = {
6391
6391
  INSPECTION_OVERLAY: 999995,
6392
+ // Mouse inspection hover highlight
6392
6393
  HIGHLIGHT_OVERLAY: 999996,
6394
+ // Selected element marching ants border
6393
6395
  HOVER_OVERLAY: 999997,
6396
+ // Element hover during inspection mode
6394
6397
  BADGE: 999998,
6398
+ // Selection badge with index number
6395
6399
  TOOLBAR: 999999
6400
+ // Bottom-right toolbar UI
6396
6401
  };
6397
6402
  var CONSOLE_LIMITS = {
6398
6403
  MAX_ARG_LENGTH: 1e4,
@@ -6723,6 +6728,7 @@
6723
6728
  xpath: XPathUtils.generateXPath(targetElement),
6724
6729
  cssSelector: XPathUtils.generateEnhancedCSSSelector(targetElement),
6725
6730
  textContent: element.textContent?.substring(0, 100) || "",
6731
+ selectedText: data.textSelection?.selectedText,
6726
6732
  attributes: Array.from(targetElement.attributes).reduce((acc, attr) => {
6727
6733
  if (attr.name !== "style") {
6728
6734
  acc[attr.name] = attr.value;
@@ -6731,19 +6737,6 @@
6731
6737
  }, {}),
6732
6738
  children: []
6733
6739
  };
6734
- if (data.textSelection && data.textSelection.containerElement.isConnected) {
6735
- elementInfo.textSelection = {
6736
- selectedText: data.textSelection.selectedText,
6737
- containerXPath: XPathUtils.generateXPath(data.textSelection.containerElement),
6738
- containerCssSelector: XPathUtils.generateEnhancedCSSSelector(data.textSelection.containerElement)
6739
- };
6740
- } else if (data.textSelection) {
6741
- elementInfo.textSelection = {
6742
- selectedText: data.textSelection.selectedText,
6743
- containerXPath: "",
6744
- containerCssSelector: ""
6745
- };
6746
- }
6747
6740
  if (imagePaths && imagePaths.has(element)) {
6748
6741
  elementInfo.imagePath = imagePaths.get(element);
6749
6742
  }
@@ -6780,17 +6773,13 @@
6780
6773
  }
6781
6774
 
6782
6775
  // src/annotator/inspection.ts
6783
- var DRAG_THRESHOLD = 5;
6784
- var INITIAL_DRAG_STATE = { isDragging: false, startX: 0, startY: 0, currentX: 0, currentY: 0 };
6785
6776
  function createInspectionManager(callbacks = {}) {
6786
- const { onElementSelect, onMultiSelect, onTextSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
6777
+ const { onElementSelect, onTextSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
6787
6778
  let isInspecting = false;
6788
6779
  let currentHoveredElement = null;
6789
6780
  let hoverOverlay = null;
6790
6781
  let hoverKeyframesStyleElement = null;
6791
6782
  let inspectionStyleElement = null;
6792
- let selectionOverlay = null;
6793
- let dragState = { ...INITIAL_DRAG_STATE };
6794
6783
  let mouseDownTime = 0;
6795
6784
  function addInspectionStyles() {
6796
6785
  inspectionStyleElement = document.createElement("style");
@@ -6799,9 +6788,6 @@
6799
6788
  body.annotator-inspecting * {
6800
6789
  cursor: crosshair !important;
6801
6790
  }
6802
- body.annotator-inspecting *::selection {
6803
- background: ${COLORS.INSPECTION}40 !important;
6804
- }
6805
6791
  annotator-toolbar, annotator-toolbar *,
6806
6792
  .annotator-badge, .annotator-badge *,
6807
6793
  .annotator-ignore, .annotator-ignore * {
@@ -6869,102 +6855,25 @@
6869
6855
  hoverOverlay.style.width = `${rect.width}px`;
6870
6856
  hoverOverlay.style.height = `${rect.height}px`;
6871
6857
  }
6872
- function createSelectionOverlay() {
6873
- const overlay = document.createElement("div");
6874
- overlay.className = "annotator-ignore";
6875
- overlay.style.cssText = `
6876
- position: fixed;
6877
- border: 2px dashed ${COLORS.INSPECTION};
6878
- background: rgba(168, 85, 247, 0.1);
6879
- pointer-events: none;
6880
- z-index: ${Z_INDEX.HOVER_OVERLAY};
6881
- border-radius: 4px;
6882
- box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
6883
- `;
6884
- document.body.appendChild(overlay);
6885
- return overlay;
6886
- }
6887
- function updateSelectionOverlay() {
6888
- if (!selectionOverlay) return;
6889
- const left = Math.min(dragState.startX, dragState.currentX);
6890
- const top = Math.min(dragState.startY, dragState.currentY);
6891
- const width = Math.abs(dragState.currentX - dragState.startX);
6892
- const height = Math.abs(dragState.currentY - dragState.startY);
6893
- selectionOverlay.style.left = `${left}px`;
6894
- selectionOverlay.style.top = `${top}px`;
6895
- selectionOverlay.style.width = `${width}px`;
6896
- selectionOverlay.style.height = `${height}px`;
6897
- }
6898
- function removeSelectionOverlay() {
6899
- if (selectionOverlay) {
6900
- selectionOverlay.remove();
6901
- selectionOverlay = null;
6902
- }
6903
- }
6904
- function getSelectionRect() {
6905
- const left = Math.min(dragState.startX, dragState.currentX);
6906
- const top = Math.min(dragState.startY, dragState.currentY);
6907
- const width = Math.abs(dragState.currentX - dragState.startX);
6908
- const height = Math.abs(dragState.currentY - dragState.startY);
6909
- return new DOMRect(left, top, width, height);
6910
- }
6911
- function isFullyContained(inner, outer) {
6912
- return inner.left >= outer.left && inner.right <= outer.right && inner.top >= outer.top && inner.bottom <= outer.bottom;
6913
- }
6914
- function findElementsFullyInRect(rect) {
6915
- const elements = [];
6916
- function traverse(node) {
6917
- if (shouldIgnoreElement?.(node)) return;
6918
- if (node.tagName === "SCRIPT" || node.tagName === "STYLE" || node.tagName === "NOSCRIPT") return;
6919
- const elementRect = node.getBoundingClientRect();
6920
- if (elementRect.width > 0 && elementRect.height > 0) {
6921
- if (isFullyContained(elementRect, rect)) {
6922
- elements.push(node);
6923
- }
6924
- }
6925
- const children = node.children;
6926
- for (let i5 = 0; i5 < children.length; i5++) {
6927
- traverse(children[i5]);
6928
- }
6929
- }
6930
- traverse(document.body);
6931
- return elements;
6932
- }
6933
- function filterLeafElements(elements) {
6934
- return elements.filter((el) => {
6935
- return !elements.some((other) => other !== el && el.contains(other));
6936
- });
6858
+ function detectTextSelection() {
6859
+ const selection = window.getSelection();
6860
+ if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null;
6861
+ const selectedText = selection.toString().trim();
6862
+ if (selectedText.length === 0) return null;
6863
+ const range = selection.getRangeAt(0);
6864
+ const ancestor = range.commonAncestorContainer;
6865
+ const commonAncestor = ancestor.nodeType === Node.ELEMENT_NODE ? ancestor : ancestor.parentElement;
6866
+ if (!commonAncestor || shouldIgnoreElement?.(commonAncestor)) return null;
6867
+ return { range, commonAncestor };
6937
6868
  }
6938
6869
  function handleMouseDown(e5) {
6939
6870
  const clickedElement = e5.target;
6940
6871
  if (shouldIgnoreElement?.(clickedElement)) return;
6941
6872
  mouseDownTime = Date.now();
6942
- dragState = {
6943
- isDragging: false,
6944
- startX: e5.clientX,
6945
- startY: e5.clientY,
6946
- currentX: e5.clientX,
6947
- currentY: e5.clientY
6948
- };
6949
6873
  }
6950
6874
  function handleMouseMove(e5) {
6951
- if (mouseDownTime > 0 && !dragState.isDragging) {
6952
- const dx = Math.abs(e5.clientX - dragState.startX);
6953
- const dy = Math.abs(e5.clientY - dragState.startY);
6954
- if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
6955
- const selection = window.getSelection();
6956
- const hasTextSelection = selection && !selection.isCollapsed && selection.toString().trim().length > 0;
6957
- if (!hasTextSelection) {
6958
- dragState.isDragging = true;
6959
- removeHoverHighlight();
6960
- selectionOverlay = createSelectionOverlay();
6961
- }
6962
- }
6963
- }
6964
- if (dragState.isDragging) {
6965
- dragState.currentX = e5.clientX;
6966
- dragState.currentY = e5.clientY;
6967
- updateSelectionOverlay();
6875
+ if (mouseDownTime > 0) {
6876
+ removeHoverHighlight();
6968
6877
  return;
6969
6878
  }
6970
6879
  const target = document.elementFromPoint(e5.clientX, e5.clientY);
@@ -6984,19 +6893,7 @@
6984
6893
  hoverOverlay = createHoverOverlay(target);
6985
6894
  currentHoveredElement = target;
6986
6895
  }
6987
- function detectTextSelection() {
6988
- const selection = window.getSelection();
6989
- if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null;
6990
- const selectedText = selection.toString().trim();
6991
- if (selectedText.length === 0) return null;
6992
- const range = selection.getRangeAt(0);
6993
- const ancestor = range.commonAncestorContainer;
6994
- const commonAncestor = ancestor.nodeType === Node.ELEMENT_NODE ? ancestor : ancestor.parentElement;
6995
- if (!commonAncestor || shouldIgnoreElement?.(commonAncestor)) return null;
6996
- return { range, commonAncestor };
6997
- }
6998
6896
  function handleMouseUp(e5) {
6999
- const wasDragging = dragState.isDragging;
7000
6897
  try {
7001
6898
  const textSelection = detectTextSelection();
7002
6899
  if (textSelection) {
@@ -7006,18 +6903,6 @@
7006
6903
  onTextSelect?.(range, commonAncestor);
7007
6904
  return;
7008
6905
  }
7009
- if (wasDragging) {
7010
- removeSelectionOverlay();
7011
- const selectionRect = getSelectionRect();
7012
- if (selectionRect.width > 10 && selectionRect.height > 10) {
7013
- const elementsInRect = findElementsFullyInRect(selectionRect);
7014
- const leafElements = filterLeafElements(elementsInRect);
7015
- if (leafElements.length > 0) {
7016
- onMultiSelect?.(leafElements);
7017
- }
7018
- }
7019
- return;
7020
- }
7021
6906
  if (mouseDownTime > 0) {
7022
6907
  const target = document.elementFromPoint(e5.clientX, e5.clientY);
7023
6908
  if (target && !shouldIgnoreElement?.(target)) {
@@ -7026,13 +6911,13 @@
7026
6911
  }
7027
6912
  } finally {
7028
6913
  mouseDownTime = 0;
7029
- dragState = { ...INITIAL_DRAG_STATE };
7030
6914
  }
7031
6915
  }
7032
6916
  function handleClick(e5) {
7033
6917
  const target = e5.target;
7034
6918
  if (shouldIgnoreElement?.(target)) return;
7035
6919
  e5.preventDefault();
6920
+ e5.stopPropagation();
7036
6921
  }
7037
6922
  function preventMouseEvents(e5) {
7038
6923
  const target = e5.target;
@@ -7054,11 +6939,6 @@
7054
6939
  }
7055
6940
  }
7056
6941
  }
7057
- function resetDragState() {
7058
- mouseDownTime = 0;
7059
- dragState = { ...INITIAL_DRAG_STATE };
7060
- removeSelectionOverlay();
7061
- }
7062
6942
  function cleanup() {
7063
6943
  removeInspectionStyles();
7064
6944
  document.removeEventListener("mousedown", handleMouseDown, true);
@@ -7069,7 +6949,7 @@
7069
6949
  document.removeEventListener("contextmenu", preventMouseEvents, true);
7070
6950
  document.removeEventListener("keydown", handleKeyDown);
7071
6951
  removeHoverHighlight();
7072
- resetDragState();
6952
+ mouseDownTime = 0;
7073
6953
  window.getSelection()?.removeAllRanges();
7074
6954
  }
7075
6955
  function cleanupKeyframesStyle() {
@@ -7341,14 +7221,17 @@
7341
7221
  let vnode = null;
7342
7222
  if (!codeLocation) {
7343
7223
  const ctxVNode = el.__vnode?.ctx?.vnode;
7344
- if (ctxVNode?.el === el) {
7345
- codeLocation = ctxVNode?.props?.__v_inspector;
7224
+ if (ctxVNode && ctxVNode.el === element) {
7225
+ codeLocation = ctxVNode.props?.__v_inspector;
7346
7226
  }
7347
7227
  }
7348
7228
  if (!codeLocation) {
7349
- codeLocation = el.__vueParentComponent?.vnode?.props?.__v_inspector;
7350
- vueInstance = el.__vueParentComponent ?? null;
7351
- vnode = el.__vueParentComponent?.vnode ?? null;
7229
+ const parentComponent = el.__vueParentComponent;
7230
+ if (parentComponent?.vnode) {
7231
+ codeLocation = parentComponent.vnode.props?.__v_inspector;
7232
+ vueInstance = parentComponent;
7233
+ vnode = parentComponent.vnode;
7234
+ }
7352
7235
  }
7353
7236
  if (!codeLocation) {
7354
7237
  codeLocation = el.__v_inspector;
@@ -7641,6 +7524,7 @@
7641
7524
  this.tooltipCleanup = null;
7642
7525
  this.toastTimeout = null;
7643
7526
  this.clickListenerTimeout = null;
7527
+ this.skipNextClickOutside = false;
7644
7528
  this.socket = null;
7645
7529
  this.rpc = null;
7646
7530
  this.selectionManager = null;
@@ -7658,6 +7542,10 @@
7658
7542
  };
7659
7543
  this.handleClickOutside = (e5) => {
7660
7544
  if (!this.commentPopover.visible) return;
7545
+ if (this.skipNextClickOutside) {
7546
+ this.skipNextClickOutside = false;
7547
+ return;
7548
+ }
7661
7549
  const popoverEl = this.shadowRoot?.querySelector(".popover");
7662
7550
  if (!popoverEl) return;
7663
7551
  const path = e5.composedPath();
@@ -7682,7 +7570,6 @@
7682
7570
  });
7683
7571
  this.inspectionManager = createInspectionManager({
7684
7572
  onElementSelect: (element) => this.handleElementSelected(element),
7685
- onMultiSelect: (elements) => this.handleMultiSelect(elements),
7686
7573
  onTextSelect: (range, commonAncestor) => this.handleTextSelected(range, commonAncestor),
7687
7574
  shouldIgnoreElement: (element) => this.shouldIgnoreElement(element),
7688
7575
  isElementSelected: (element) => this.selectionManager?.hasElement(element) || false,
@@ -7692,29 +7579,36 @@
7692
7579
  }
7693
7580
  initializeConsoleCapture() {
7694
7581
  try {
7582
+ const originals = {};
7695
7583
  CONSOLE_METHODS.forEach((method) => {
7696
- this.originalConsoleMethods[method] = console[method].bind(console);
7584
+ originals[method] = console[method].bind(console);
7697
7585
  });
7698
7586
  CONSOLE_METHODS.forEach((method) => {
7699
7587
  console[method] = (...args) => {
7700
- this.consoleBuffer.push({
7701
- type: method,
7702
- args: args.map((arg) => {
7588
+ try {
7589
+ const serializedArgs = args.map((arg) => {
7703
7590
  try {
7704
7591
  const str = typeof arg === "object" ? JSON.stringify(arg) : String(arg);
7705
7592
  return str.length > CONSOLE_LIMITS.MAX_ARG_LENGTH ? str.slice(0, CONSOLE_LIMITS.MAX_ARG_LENGTH) + "...[truncated]" : str;
7706
7593
  } catch {
7707
7594
  return "[circular or unserializable]";
7708
7595
  }
7709
- }),
7710
- timestamp: Date.now()
7711
- });
7712
- if (this.consoleBuffer.length > CONSOLE_LIMITS.BUFFER_MAX) {
7713
- this.consoleBuffer = this.consoleBuffer.slice(-CONSOLE_LIMITS.BUFFER_TRIM_TO);
7596
+ });
7597
+ this.consoleBuffer.push({
7598
+ type: method,
7599
+ args: serializedArgs,
7600
+ timestamp: Date.now()
7601
+ });
7602
+ if (this.consoleBuffer.length > CONSOLE_LIMITS.BUFFER_MAX) {
7603
+ this.consoleBuffer = this.consoleBuffer.slice(-CONSOLE_LIMITS.BUFFER_TRIM_TO);
7604
+ }
7605
+ originals[method]?.(...args);
7606
+ } catch (captureError) {
7607
+ originals[method]?.(...args);
7714
7608
  }
7715
- this.originalConsoleMethods[method]?.(...args);
7716
7609
  };
7717
7610
  });
7611
+ this.originalConsoleMethods = originals;
7718
7612
  } catch (error) {
7719
7613
  this.restoreConsoleMethods();
7720
7614
  throw error;
@@ -7756,19 +7650,71 @@
7756
7650
  }
7757
7651
  registerRpcHandlers() {
7758
7652
  if (!this.rpc) return;
7759
- this.rpc.handle.getPageContext(async () => this.getPageContext());
7760
- this.rpc.handle.getSelectedElements(async () => this.getSelectedElements());
7761
- this.rpc.handle.triggerSelection(
7762
- async (mode, selector, selectorType) => this.triggerSelection(mode, selector, selectorType)
7763
- );
7764
- this.rpc.handle.captureScreenshot(
7765
- async (type, selector, quality) => this.captureScreenshot(type, selector, quality)
7766
- );
7767
- this.rpc.handle.clearSelection(async () => this.clearSelection());
7653
+ this.rpc.handle.getPageContext(async () => {
7654
+ try {
7655
+ return await this.getPageContext();
7656
+ } catch (error) {
7657
+ this.log("[getPageContext] Handler error:", error);
7658
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7659
+ }
7660
+ });
7661
+ this.rpc.handle.getSelectedElements(async () => {
7662
+ try {
7663
+ return await this.getSelectedElements();
7664
+ } catch (error) {
7665
+ this.log("[getSelectedElements] Handler error:", error);
7666
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7667
+ }
7668
+ });
7669
+ this.rpc.handle.triggerSelection(async (mode, selector, selectorType) => {
7670
+ try {
7671
+ return await this.triggerSelection(mode, selector, selectorType);
7672
+ } catch (error) {
7673
+ this.log("[triggerSelection] Handler error:", error);
7674
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7675
+ }
7676
+ });
7677
+ this.rpc.handle.captureScreenshot(async (type, selector, quality) => {
7678
+ try {
7679
+ return await this.captureScreenshot(type, selector, quality);
7680
+ } catch (error) {
7681
+ this.log("[captureScreenshot] Handler error:", error);
7682
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7683
+ }
7684
+ });
7685
+ this.rpc.handle.clearSelection(async () => {
7686
+ try {
7687
+ return await this.clearSelection();
7688
+ } catch (error) {
7689
+ this.log("[clearSelection] Handler error:", error);
7690
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7691
+ }
7692
+ });
7768
7693
  this.rpc.handle.ping(async () => "pong");
7769
- this.rpc.handle.injectCSS(async (css) => this.injectCSS(css));
7770
- this.rpc.handle.injectJS(async (code) => this.injectJS(code));
7771
- this.rpc.handle.getConsole(async (clear) => this.getConsoleLogs(clear));
7694
+ this.rpc.handle.injectCSS(async (css) => {
7695
+ try {
7696
+ return await this.injectCSS(css);
7697
+ } catch (error) {
7698
+ this.log("[injectCSS] Handler error:", error);
7699
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7700
+ }
7701
+ });
7702
+ this.rpc.handle.injectJS(async (code) => {
7703
+ try {
7704
+ return await this.injectJS(code);
7705
+ } catch (error) {
7706
+ this.log("[injectJS] Handler error:", error);
7707
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7708
+ }
7709
+ });
7710
+ this.rpc.handle.getConsole(async (clear) => {
7711
+ try {
7712
+ return await this.getConsoleLogs(clear);
7713
+ } catch (error) {
7714
+ this.log("[getConsole] Handler error:", error);
7715
+ throw { message: error instanceof Error ? error.message : String(error), code: "INTERNAL_ERROR", data: void 0 };
7716
+ }
7717
+ });
7772
7718
  }
7773
7719
  reportPageContext() {
7774
7720
  if (!this.socket?.connected) return;
@@ -7870,10 +7816,12 @@
7870
7816
  cacheBust: true,
7871
7817
  pixelRatio: 1,
7872
7818
  includeQueryParams: true,
7873
- // Filter out elements that cause issues
7819
+ // Filter out all annotator UI elements
7874
7820
  filter: (node) => {
7875
7821
  if (node instanceof Element) {
7876
- if (node.classList?.contains("annotator-badge") || node.classList?.contains("annotator-highlight-overlay") || node.tagName?.toLowerCase() === "annotator-toolbar") {
7822
+ const className = node.className || "";
7823
+ const tagName = node.tagName?.toLowerCase() || "";
7824
+ if (className.includes("annotator-") || tagName === "annotator-toolbar") {
7877
7825
  return false;
7878
7826
  }
7879
7827
  }
@@ -7958,21 +7906,6 @@
7958
7906
  this.selectionCount = this.selectionManager.getSelectedCount();
7959
7907
  this.emitSelectionChanged();
7960
7908
  }
7961
- handleMultiSelect(elements) {
7962
- if (!this.selectionManager) return;
7963
- let newSelectCount = 0;
7964
- for (const element of elements) {
7965
- if (!this.selectionManager.hasElement(element)) {
7966
- this.selectionManager.selectElement(element, (el) => findNearestComponent(el, this.verbose));
7967
- newSelectCount++;
7968
- }
7969
- }
7970
- this.selectionCount = this.selectionManager.getSelectedCount();
7971
- if (newSelectCount > 0) {
7972
- this.showToast(`Selected ${newSelectCount} element(s)`);
7973
- }
7974
- this.emitSelectionChanged();
7975
- }
7976
7909
  handleTextSelected(range, commonAncestor) {
7977
7910
  if (!this.selectionManager) return;
7978
7911
  const result = this.selectionManager.wrapTextRange(range, commonAncestor);
@@ -8019,6 +7952,7 @@
8019
7952
  if (this.clickListenerTimeout) {
8020
7953
  clearTimeout(this.clickListenerTimeout);
8021
7954
  }
7955
+ this.skipNextClickOutside = true;
8022
7956
  this.clickListenerTimeout = setTimeout(() => {
8023
7957
  document.addEventListener("click", this.handleClickOutside, true);
8024
7958
  this.clickListenerTimeout = null;
@@ -8072,6 +8006,9 @@
8072
8006
  this.popoverCleanup();
8073
8007
  this.popoverCleanup = null;
8074
8008
  }
8009
+ const popoverEl = this.shadowRoot?.querySelector(".popover");
8010
+ if (popoverEl) {
8011
+ }
8075
8012
  this.commentPopover = { visible: false, element: null, comment: "" };
8076
8013
  }
8077
8014
  handlePopoverInput(e5) {
@@ -8277,7 +8214,7 @@
8277
8214
  render() {
8278
8215
  if (!this.connected) {
8279
8216
  return x`
8280
- <div class="toolbar">
8217
+ <div class="toolbar" role="alert" aria-live="polite">
8281
8218
  <div class="error-message">
8282
8219
  ${this.renderErrorIcon()}
8283
8220
  <span>Cannot connect to AI Annotator server</span>
@@ -8286,12 +8223,15 @@
8286
8223
  `;
8287
8224
  }
8288
8225
  return x`
8289
- <div class="toolbar">
8226
+ <div class="toolbar" role="toolbar" aria-label="AI Annotator tools">
8290
8227
  <button
8291
8228
  class="toolbar-btn ${this.isInspecting ? "active" : ""}"
8292
8229
  @click=${this.toggleInspect}
8293
8230
  @mouseenter=${(e5) => this.showTooltip(this.isInspecting ? "Press ESC to exit" : "Inspect elements", e5.currentTarget)}
8294
8231
  @mouseleave=${() => this.hideTooltip()}
8232
+ aria-label="${this.isInspecting ? "Exit inspection mode" : "Inspect elements"}"
8233
+ aria-pressed="${this.isInspecting}"
8234
+ title="${this.isInspecting ? "Press ESC to exit" : "Inspect elements"}"
8295
8235
  >
8296
8236
  ${this.renderCursorIcon()}
8297
8237
  </button>
@@ -8303,19 +8243,24 @@
8303
8243
  @mouseenter=${(e5) => this.showTooltip("Clear selections", e5.currentTarget)}
8304
8244
  @mouseleave=${() => this.hideTooltip()}
8305
8245
  ?disabled=${this.selectionCount === 0}
8246
+ aria-label="Clear all selections"
8247
+ aria-disabled="${this.selectionCount === 0}"
8248
+ title="Clear selections"
8306
8249
  >
8307
8250
  ${this.renderTrashIcon()}
8308
8251
  </button>
8309
- ${this.selectionCount > 0 ? x`<span class="badge">${this.selectionCount}</span>` : ""}
8252
+ ${this.selectionCount > 0 ? x`<span class="badge" aria-label="${this.selectionCount} selections">${this.selectionCount}</span>` : ""}
8310
8253
  </div>
8311
8254
 
8312
- <div class="divider"></div>
8255
+ <div class="divider" role="separator" aria-orientation="vertical"></div>
8313
8256
 
8314
8257
  <button
8315
8258
  class="toolbar-btn"
8316
8259
  @click=${this.copySessionId}
8317
8260
  @mouseenter=${(e5) => this.showTooltip("Copy session", e5.currentTarget)}
8318
8261
  @mouseleave=${() => this.hideTooltip()}
8262
+ aria-label="Copy session ID to clipboard"
8263
+ title="Copy session"
8319
8264
  >
8320
8265
  ${this.renderClipboardIcon()}
8321
8266
  </button>
@@ -8325,17 +8270,19 @@
8325
8270
  @click=${this.openHelpPage}
8326
8271
  @mouseenter=${(e5) => this.showTooltip("Help", e5.currentTarget)}
8327
8272
  @mouseleave=${() => this.hideTooltip()}
8273
+ aria-label="Open help documentation"
8274
+ title="Help"
8328
8275
  >
8329
8276
  ${this.renderHelpIcon()}
8330
8277
  </button>
8331
8278
 
8332
- ${this.toastMessage ? x`<div class="toast">${this.toastMessage}</div>` : ""}
8279
+ ${this.toastMessage ? x`<div class="toast" role="status" aria-live="polite">${this.toastMessage}</div>` : ""}
8333
8280
  </div>
8334
8281
 
8335
- ${this.tooltip.visible ? x`<div class="tooltip">${this.tooltip.text}</div>` : ""}
8282
+ ${this.tooltip.visible ? x`<div class="tooltip" role="tooltip">${this.tooltip.text}</div>` : ""}
8336
8283
 
8337
8284
  ${this.commentPopover.visible ? x`
8338
- <div class="popover">
8285
+ <div class="popover" role="dialog" aria-label="Element comment" aria-modal="false">
8339
8286
  <textarea
8340
8287
  class="popover-input"
8341
8288
  placeholder="Add a note... (↵ to close)"
@@ -8343,12 +8290,13 @@
8343
8290
  @input=${this.handlePopoverInput}
8344
8291
  @keydown=${this.handlePopoverInputKeydown}
8345
8292
  rows="1"
8293
+ aria-label="Add a comment for the selected element"
8346
8294
  ></textarea>
8347
- <div class="popover-actions">
8348
- <button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection">
8295
+ <div class="popover-actions" role="group" aria-label="Comment actions">
8296
+ <button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection" aria-label="Remove this selection">
8349
8297
  ${this.renderTrashIcon()}
8350
8298
  </button>
8351
- <button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)">
8299
+ <button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)" aria-label="Close comment">
8352
8300
  ${this.renderCloseIcon()}
8353
8301
  </button>
8354
8302
  </div>
@@ -0,0 +1,5 @@
1
+ import { type AiAnnotatorOptions } from './vite-plugin';
2
+ export interface NuxtAiAnnotatorOptions extends AiAnnotatorOptions {
3
+ }
4
+ declare const _default: import("@nuxt/schema").NuxtModule<NuxtAiAnnotatorOptions, NuxtAiAnnotatorOptions, false>;
5
+ export default _default;