feat: improve code editor formatting behavior

- Disable auto-formatting while in editing mode
- Format CSS only when exiting editing mode
- Auto-disable editing mode when switching tabs

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

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

src/components/StylesheetViewer.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
@@ -33,6 +33,7 @@ import 'highlight.js/styles/atom-one-dark.css';
 hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
+const activeTab = inject('activeTab');
 const isEditable = ref(false);
 let debounceTimer = null;
 
@@ -52,6 +53,23 @@ const handleInput = (event) => {
     stylesheetStore.content = newContent;
   }, 500);
 };
+
+// Sync editing mode with store
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
+});
+
+// Disable editing mode when changing tabs
+watch(activeTab, (newTab) => {
+  if (newTab !== 'code' && isEditable.value) {
+    isEditable.value = false;
+  }
+});
 </script>
 
 <style scoped>

src/stores/stylesheet.js

@@ -6,6 +6,7 @@ import parserPostcss from 'prettier/plugins/postcss';
 
 export const useStylesheetStore = defineStore('stylesheet', () => {
   const content = ref('');
+  const isEditing = ref(false);
   let formatTimer = null;
   let isFormatting = false;
 
@@ -30,9 +31,9 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     }
   };
 
-  // Watch content and format after 500ms of inactivity
+  // Watch content and format after 500ms of inactivity (only when not editing)
   watch(content, () => {
-    if (isFormatting) return;
+    if (isFormatting || isEditing.value) return;
 
     clearTimeout(formatTimer);
     formatTimer = setTimeout(() => {
@@ -65,6 +66,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
 
   return {
     content,
+    isEditing,
     loadStylesheet,
     updateProperty,
     extractValue,