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>

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;
 }