fix: improve element label positioning and state management

- Fix element label positioning using getBoundingClientRect + scroll offset
- Filter out state classes from element selectors (element-hovered, etc.)
- Add cursor pointer on hovered elements and pages
- Prevent elements from having both hovered and selected classes
- Fix issue where closing popup left previous element in hovered state

Ensures only one visual state per element at a time and cleaner
selector display in labels.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/assets/css/pagedjs-interface.css

@@ -147,6 +147,7 @@
 /* Hover and selection states for pages and elements */
 .page-hovered {
   outline: 2px solid #ff8a5050 !important;
+  cursor: pointer !important;
 }
 
 .page-selected {
@@ -155,6 +156,7 @@
 
 .element-hovered {
   outline: 2px solid #7136ff50 !important;
+  cursor: pointer !important;
 }
 
 .element-selected {

src/App.vue

@@ -41,9 +41,11 @@ const isNearPageEdge = (pageElement, mouseX, mouseY) => {
   const rect = pageElement.getBoundingClientRect();
 
   const nearLeft = mouseX >= rect.left && mouseX <= rect.left + EDGE_THRESHOLD;
-  const nearRight = mouseX >= rect.right - EDGE_THRESHOLD && mouseX <= rect.right;
+  const nearRight =
+    mouseX >= rect.right - EDGE_THRESHOLD && mouseX <= rect.right;
   const nearTop = mouseY >= rect.top && mouseY <= rect.top + EDGE_THRESHOLD;
-  const nearBottom = mouseY >= rect.bottom - EDGE_THRESHOLD && mouseY <= rect.bottom;
+  const nearBottom =
+    mouseY >= rect.bottom - EDGE_THRESHOLD && mouseY <= rect.bottom;
 
   const inHorizontalRange = mouseY >= rect.top && mouseY <= rect.bottom;
   const inVerticalRange = mouseX >= rect.left && mouseX <= rect.right;
@@ -71,7 +73,10 @@ const getSelectorFromElement = (element) => {
     return `#${element.id}`;
   }
   const tagName = element.tagName.toLowerCase();
-  const classes = Array.from(element.classList);
+  // Filter out state classes (element-hovered, element-selected, page-hovered, page-selected)
+  const classes = Array.from(element.classList).filter(
+    (cls) => !['element-hovered', 'element-selected', 'page-hovered', 'page-selected'].includes(cls)
+  );
   if (classes.length > 0) {
     return `${tagName}.${classes[0]}`;
   }
@@ -86,11 +91,15 @@ const createElementLabel = (element) => {
     existingLabel.remove();
   }
 
+  const rect = element.getBoundingClientRect();
+  const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
+  const scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
+
   const label = doc.createElement('div');
   label.className = 'element-hover-label';
   label.textContent = getSelectorFromElement(element);
-  label.style.top = `${element.offsetTop}px`;
+  label.style.top = `${rect.top + scrollTop - 30}px`;
-  label.style.left = `${element.offsetLeft}px`;
+  label.style.left = `${rect.left + scrollLeft}px`;
 
   doc.body.appendChild(label);
   return label;
@@ -139,7 +148,10 @@ const handleIframeMouseMove = (event) => {
 
     if (contentElement !== hoveredElement.value) {
       // Remove highlight from previous element (only if not selected)
-      if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
+      if (
+        hoveredElement.value &&
+        hoveredElement.value !== selectedElement.value
+      ) {
         hoveredElement.value.classList.remove('element-hovered');
       }
 
@@ -156,7 +168,10 @@ const handleIframeMouseMove = (event) => {
     }
   } else {
     // Clear element hover when hovering page edge
-    if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
+    if (
+      hoveredElement.value &&
+      hoveredElement.value !== selectedElement.value
+    ) {
       hoveredElement.value.classList.remove('element-hovered');
       hoveredElement.value = null;
     }
@@ -175,13 +190,41 @@ const clearSelectedPages = () => {
 
 // Content elements that can trigger ElementPopup
 const CONTENT_ELEMENTS = [
-  'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+  'P',
-  'IMG', 'FIGURE', 'FIGCAPTION',
+  'H1',
-  'UL', 'OL', 'LI',
+  'H2',
-  'BLOCKQUOTE', 'PRE', 'CODE',
+  'H3',
-  'TABLE', 'THEAD', 'TBODY', 'TR', 'TH', 'TD',
+  'H4',
-  'A', 'SPAN', 'STRONG', 'EM', 'B', 'I', 'U',
+  'H5',
-  'ARTICLE', 'SECTION', 'ASIDE', 'HEADER', 'FOOTER', 'NAV'
+  'H6',
+  'IMG',
+  'FIGURE',
+  'FIGCAPTION',
+  'UL',
+  'OL',
+  'LI',
+  'BLOCKQUOTE',
+  'PRE',
+  'CODE',
+  'TABLE',
+  'THEAD',
+  'TBODY',
+  'TR',
+  'TH',
+  'TD',
+  'A',
+  'SPAN',
+  'STRONG',
+  'EM',
+  'B',
+  'I',
+  'U',
+  'ARTICLE',
+  'SECTION',
+  'ASIDE',
+  'HEADER',
+  'FOOTER',
+  'NAV',
 ];
 
 // Check if element is a content element (or find closest content parent)
@@ -261,9 +304,25 @@ const handleIframeClick = (event) => {
   // Clear page selections
   clearSelectedPages();
 
+  // If popup is already open and we're clicking another element, close it
+  if (elementPopup.value.visible) {
+    clearSelectedElement();
+    elementPopup.value.close();
+    pagePopup.value.close();
+    return;
+  }
+
   // Clear previous element selection
   clearSelectedElement();
 
+  // Remove hovered class from the element we're about to select
+  contentElement.classList.remove('element-hovered');
+
+  // Clear the hoveredElement ref if it's the same as what we're selecting
+  if (hoveredElement.value === contentElement) {
+    hoveredElement.value = null;
+  }
+
   // Select the new element
   selectedElement.value = contentElement;
   contentElement.classList.add('element-selected');
@@ -335,7 +394,10 @@ const renderPreview = async (shouldReloadFromFile = false) => {
 
   hiddenFrame.onload = () => {
     // Add event listeners for page and element interactions
-    hiddenFrame.contentDocument.addEventListener('mousemove', handleIframeMouseMove);
+    hiddenFrame.contentDocument.addEventListener(
+      'mousemove',
+      handleIframeMouseMove
+    );
     hiddenFrame.contentDocument.addEventListener('click', handleIframeClick);
 
     // Close Coloris when clicking in the iframe
@@ -469,12 +531,26 @@ onMounted(() => renderPreview(true));
 
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
-  <ElementPopup ref="elementPopup" :iframeRef="activeFrame" @close="handleElementPopupClose" />
+  <ElementPopup
-  <PagePopup ref="pagePopup" :iframeRef="activeFrame" @close="handlePagePopupClose" />
+    ref="elementPopup"
+    :iframeRef="activeFrame"
+    @close="handleElementPopupClose"
+  />
+  <PagePopup
+    ref="pagePopup"
+    :iframeRef="activeFrame"
+    @close="handlePagePopupClose"
+  />
 
   <button class="print-btn" @click="printPreview" title="Imprimer">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <svg
-      <path d="M17 2H7V6H17V2ZM19 8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM16 19H8V14H16V19ZM19 12C18.45 12 18 11.55 18 11C18 10.45 18.45 10 19 10C19.55 10 20 10.45 20 11C20 11.55 19.55 12 19 12Z"/>
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        d="M17 2H7V6H17V2ZM19 8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM16 19H8V14H16V19ZM19 12C18.45 12 18 11.55 18 11C18 10.45 18.45 10 19 10C19.55 10 20 10.45 20 11C20 11.55 19.55 12 19 12Z"
+      />
     </svg>
   </button>
 </template>
@@ -524,7 +600,9 @@ onMounted(() => renderPreview(true));
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
   z-index: 1000;
 }
 

src/components/ElementPopup.vue

@@ -337,8 +337,10 @@ const getSelectorFromElement = (element) => {
   // Get tag name
   const tagName = element.tagName.toLowerCase();
 
-  // Get first class if available
+  // Get first class if available (filter out state classes)
-  const classes = Array.from(element.classList);
+  const classes = Array.from(element.classList).filter(
+    (cls) => !['element-hovered', 'element-selected', 'page-hovered', 'page-selected'].includes(cls)
+  );
   if (classes.length > 0) {
     return `${tagName}.${classes[0]}`;
   }