feat: implement inheritance lock/unlock with CSS commenting system

Add ability to lock/unlock inheritance for element styles while preserving
custom values. Locked styles are commented in the CSS and restored when unlocked.

New utilities:
- Create css-comments.js with comment/uncomment functions
- Add parseValueWithUnit to css-parsing.js for value parsing
- Add getBlockState, commentCssBlock, uncommentCssBlock to stylesheet store

ElementPopup improvements:
- Detect inheritance state from CSS block state (active/commented/none)
- Capture computed styles from iframe when unlocking with no custom CSS
- Comment/uncomment CSS blocks instead of deleting them on lock toggle
- Use nextTick to prevent race condition with watchers during popup init
- Extract values from both active and commented CSS blocks

Workflow:
1. First unlock: Capture computed styles → create CSS block
2. Lock: Comment the CSS block (styles preserved in comments)
3. Unlock again: Uncomment the block (styles restored)

Fixes issue where CSS rules were created on popup open due to
watcher race conditions during initialization.

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

src/components/ElementPopup.vue

@@ -258,7 +258,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import { usePopupPosition } from '../composables/usePopupPosition';
 import { useDebounce } from '../composables/useDebounce';
@@ -610,8 +610,6 @@ const loadValuesFromStylesheet = () => {
   if (!selector.value) return;
 
   try {
-    isUpdatingFromStore = true;
-
     // Extract font-family
     const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
     if (fontFamilyData) {
@@ -676,12 +674,13 @@ const loadValuesFromStylesheet = () => {
     }
   } catch (error) {
     console.error('Error loading values from stylesheet:', error);
-  } finally {
-    isUpdatingFromStore = false;
   }
 };
 
 const open = (element, event, count = null) => {
+  // Block all watchers during initialization
+  isUpdatingFromStore = true;
+
   selectedElement.value = element;
   selector.value = getSelectorFromElement(element);
   position.value = calculatePosition(event);
@@ -689,14 +688,30 @@ const open = (element, event, count = null) => {
   // Store instance count if provided, otherwise calculate it
   elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
 
-  // Read inheritance state from element's data attribute
-  inheritanceLocked.value = element.dataset.inheritanceUnlocked !== 'true';
+  // Detect inheritance state from CSS block state
+  const blockState = stylesheetStore.getBlockState(selector.value);
 
-  // Load values from stylesheet
+  if (blockState === 'active') {
+    // Block exists and is active (not commented) → unlocked
+    inheritanceLocked.value = false;
+  } else if (blockState === 'commented') {
+    // Block exists but is commented → locked with custom values
+    inheritanceLocked.value = true;
+  } else {
+    // No block → locked with inherited values
+    inheritanceLocked.value = true;
+  }
+
+  // Load values from stylesheet (includes commented blocks)
   loadValuesFromStylesheet();
 
   visible.value = true;
 
+  // Re-enable watchers after initialization (use nextTick to ensure watchers see the flag)
+  nextTick(() => {
+    isUpdatingFromStore = false;
+  });
+
   // Initialize Coloris after opening
   setTimeout(() => {
     Coloris.init();
@@ -755,24 +770,69 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
 };
 
 const toggleInheritance = () => {
-  const wasLocked = inheritanceLocked.value;
-  inheritanceLocked.value = !inheritanceLocked.value;
+  const blockState = stylesheetStore.getBlockState(selector.value);
 
-  // Store the inheritance state in the element's data attribute
-  if (selectedElement.value) {
-    if (inheritanceLocked.value) {
-      delete selectedElement.value.dataset.inheritanceUnlocked;
-    } else {
-      selectedElement.value.dataset.inheritanceUnlocked = 'true';
+  if (inheritanceLocked.value && blockState === 'commented') {
+    // Case 1: Locked with commented block → Uncomment to unlock
+    stylesheetStore.uncommentCssBlock(selector.value);
+    inheritanceLocked.value = false;
+  } else if (inheritanceLocked.value && blockState === 'none') {
+    // Case 2: Locked with no custom CSS → Capture computed values and create block
+    if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
+      const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
+
+      // Update fields with computed values before creating the block
+      isUpdatingFromStore = true;
+
+      // Font family
+      fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
+
+      // Font style
+      fontStyle.value.italic = computed.fontStyle === 'italic';
+
+      // Font weight
+      fontWeight.value.value = parseInt(computed.fontWeight);
+
+      // Font size
+      const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
+      if (fontSizeMatch) {
+        fontSize.value.value = parseFloat(fontSizeMatch[1]);
+        fontSize.value.unit = fontSizeMatch[2];
+      }
+
+      // Text align
+      textAlign.value.value = computed.textAlign;
+
+      // Color
+      color.value.value = computed.color;
+
+      // Background
+      background.value.value = computed.backgroundColor;
+
+      // Margin (take the top margin)
+      const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
+      if (marginMatch) {
+        marginOuter.value.value = parseFloat(marginMatch[1]);
+        marginOuter.value.unit = marginMatch[2];
+      }
+
+      // Padding (take the top padding)
+      const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
+      if (paddingMatch) {
+        paddingInner.value.value = parseFloat(paddingMatch[1]);
+        paddingInner.value.unit = paddingMatch[2];
+      }
+
+      isUpdatingFromStore = false;
     }
-  }
 
-  if (inheritanceLocked.value && !wasLocked) {
-    // Re-locking: remove the element-specific CSS block to restore inheritance
-    removeElementBlock();
-  } else if (!inheritanceLocked.value && wasLocked) {
-    // Unlocking: apply all current field values to create the CSS block
+    // Now create the block with captured values
     applyAllStyles();
+    inheritanceLocked.value = false;
+  } else if (!inheritanceLocked.value && blockState === 'active') {
+    // Case 3: Unlocked with active block → Comment to lock
+    stylesheetStore.commentCssBlock(selector.value);
+    inheritanceLocked.value = true;
   }
 };