feat: add purple highlight for content elements

- Add --color-purple variable (#7136ff)
- Hover: dashed purple outline on content elements
- Selected: purple background with 30% opacity
- ElementPopup: purple label and instance count
- Track hovered and selected elements separately from pages
- Clear element selection when popup closes

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

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

public/assets/css/src/_variables.scss

@@ -5,6 +5,7 @@
   --color-browngray-300: #b5a9a1;
 
   --color-page-highlight: #ff8a50;
+  --color-purple: #7136ff;
 
   --border-radius: 0.2rem;
 

src/App.vue

@@ -20,8 +20,11 @@ provide('activeTab', activeTab);
 // Page interaction state
 const hoveredPage = ref(null);
 const selectedPages = ref([]); // Pages with active border (when popup is open)
+const hoveredElement = ref(null); // Currently hovered content element
+const selectedElement = ref(null); // Selected element (when popup is open)
 const EDGE_THRESHOLD = 30; // px from edge to trigger hover
 const PAGE_HIGHLIGHT_COLOR = '#ff8a50';
+const ELEMENT_HIGHLIGHT_COLOR = '#7136ff';
 
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
@@ -67,6 +70,7 @@ const handleIframeMouseMove = (event) => {
   const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
   let foundPage = null;
 
+  // Check if hovering near page edge
   for (const page of pages) {
     if (isNearPageEdge(page, event.clientX, event.clientY)) {
       foundPage = page;
@@ -74,7 +78,7 @@ const handleIframeMouseMove = (event) => {
     }
   }
 
-  // Update hover state
+  // Update page hover state
   if (foundPage !== hoveredPage.value) {
     // Remove highlight from previous page (only if not in selectedPages)
     if (hoveredPage.value && !selectedPages.value.includes(hoveredPage.value)) {
@@ -88,6 +92,31 @@ const handleIframeMouseMove = (event) => {
 
     hoveredPage.value = foundPage;
   }
+
+  // If not near page edge, check for content element hover
+  if (!foundPage) {
+    const contentElement = getContentElement(event.target);
+
+    if (contentElement !== hoveredElement.value) {
+      // Remove highlight from previous element (only if not selected)
+      if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
+        hoveredElement.value.style.outline = '';
+      }
+
+      // Add highlight to new element (only if not already selected)
+      if (contentElement && contentElement !== selectedElement.value) {
+        contentElement.style.outline = `2px dashed ${ELEMENT_HIGHLIGHT_COLOR}`;
+      }
+
+      hoveredElement.value = contentElement;
+    }
+  } else {
+    // Clear element hover when hovering page edge
+    if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
+      hoveredElement.value.style.outline = '';
+      hoveredElement.value = null;
+    }
+  }
 };
 
 // Clear selection highlight from all selected pages
@@ -121,6 +150,22 @@ const getContentElement = (element) => {
   return null;
 };
 
+// Clear selected element highlight
+const clearSelectedElement = () => {
+  if (selectedElement.value) {
+    selectedElement.value.style.outline = '';
+    selectedElement.value.style.backgroundColor = '';
+    selectedElement.value = null;
+  }
+};
+
+// Get count of similar elements (same tag)
+const getSimilarElementsCount = (element, doc) => {
+  const tagName = element.tagName;
+  const allElements = doc.querySelectorAll(tagName);
+  return allElements.length;
+};
+
 // Handle click in iframe
 const handleIframeClick = (event) => {
   const element = event.target;
@@ -129,8 +174,9 @@ const handleIframeClick = (event) => {
   if (hoveredPage.value) {
     event.stopPropagation();
 
-    // Clear previous selection
+    // Clear previous selections
     clearSelectedPages();
+    clearSelectedElement();
 
     // Get all pages with same template and highlight them
     const doc = event.target.ownerDocument;
@@ -149,6 +195,7 @@ const handleIframeClick = (event) => {
   const isInsidePage = element.closest('.pagedjs_page');
   if (!isInsidePage) {
     clearSelectedPages();
+    clearSelectedElement();
     elementPopup.value.close();
     pagePopup.value.close();
     return;
@@ -158,13 +205,28 @@ const handleIframeClick = (event) => {
   const contentElement = getContentElement(element);
   if (!contentElement) {
     clearSelectedPages();
+    clearSelectedElement();
     elementPopup.value.close();
     pagePopup.value.close();
     return;
   }
 
+  // Clear page selections
   clearSelectedPages();
-  elementPopup.value.handleIframeClick(event, contentElement);
+
+  // Clear previous element selection
+  clearSelectedElement();
+
+  // Select the new element
+  selectedElement.value = contentElement;
+  contentElement.style.outline = '';
+  contentElement.style.backgroundColor = `${ELEMENT_HIGHLIGHT_COLOR}4D`; // 30% opacity
+
+  // Get count of similar elements
+  const doc = event.target.ownerDocument;
+  const count = getSimilarElementsCount(contentElement, doc);
+
+  elementPopup.value.handleIframeClick(event, contentElement, count);
   pagePopup.value.close();
 };
 
@@ -173,6 +235,11 @@ const handlePagePopupClose = () => {
   clearSelectedPages();
 };
 
+// Handle ElementPopup close
+const handleElementPopupClose = () => {
+  clearSelectedElement();
+};
+
 const renderPreview = async (shouldReloadFromFile = false) => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
@@ -356,7 +423,7 @@ onMounted(() => renderPreview(true));
 
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
-  <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
+  <ElementPopup ref="elementPopup" :iframeRef="activeFrame" @close="handleElementPopupClose" />
   <PagePopup ref="pagePopup" :iframeRef="activeFrame" @close="handlePagePopupClose" />
 
   <button class="print-btn" @click="printPreview" title="Imprimer">

src/components/ElementPopup.vue

@@ -287,6 +287,8 @@ const props = defineProps({
   iframeRef: Object,
 });
 
+const emit = defineEmits(['close']);
+
 const POPUP_WIDTH = 800;
 const POPUP_HEIGHT = 600;
 
@@ -296,6 +298,7 @@ const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selector = ref('');
 const selectedElement = ref(null);
+const elementInstanceCount = ref(0); // Count of similar elements
 const isEditable = ref(false);
 const inheritanceLocked = ref(true);
 const colorInput = ref(null);
@@ -358,7 +361,7 @@ const selectorTag = computed(() => {
 });
 
 const instanceCount = computed(() => {
-  return getInstanceCount(selector.value);
+  return elementInstanceCount.value;
 });
 
 const elementCss = computed(() => {
@@ -590,11 +593,14 @@ const loadValuesFromStylesheet = () => {
   }
 };
 
-const open = (element, event) => {
+const open = (element, event, count = null) => {
   selectedElement.value = element;
   selector.value = getSelectorFromElement(element);
   position.value = calculatePosition(event);
 
+  // Store instance count if provided, otherwise calculate it
+  elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
+
   // Load values from stylesheet
   loadValuesFromStylesheet();
 
@@ -637,9 +643,10 @@ const close = () => {
   isEditable.value = false;
   selector.value = '';
   selectedElement.value = null;
+  emit('close');
 };
 
-const handleIframeClick = (event, targetElement = null) => {
+const handleIframeClick = (event, targetElement = null, elementCount = null) => {
   const element = targetElement || event.target;
 
   if (element.tagName === 'BODY' || element.tagName === 'HTML') {
@@ -653,7 +660,7 @@ const handleIframeClick = (event, targetElement = null) => {
     return;
   }
 
-  open(element, event);
+  open(element, event, elementCount);
 };
 
 const toggleInheritance = () => {
@@ -693,7 +700,7 @@ defineExpose({ handleIframeClick, close, visible });
 }
 
 .element-label {
-  background: #ff8a50;
+  background: var(--color-purple);
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
@@ -702,7 +709,7 @@ defineExpose({ handleIframeClick, close, visible });
 }
 
 .instance-count {
-  color: #ff8a50;
+  color: var(--color-purple);
   font-size: 0.875rem;
 }