refactor: implement Pinia store for stylesheet management

- Add Pinia state management
- Create centralized stylesheet store with utility methods
- Extract CSS parsing utilities to src/utils/css-parsing.js
- Refactor ElementPopup to manage state independently via store
- Simplify App.vue by removing prop drilling
- Fix iframe rendering with srcdoc instead of document.write
- Improve API: updateProperty uses object parameter for clarity

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

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

src/App.vue

@@ -4,20 +4,17 @@ import EditorPanel from './components/EditorPanel.vue';
 import StylesheetViewer from './components/StylesheetViewer.vue';
 import ElementPopup from './components/ElementPopup.vue';
 import { onMounted, ref, watch } from 'vue';
+import { useStylesheetStore } from './stores/stylesheet';
+
+const stylesheetStore = useStylesheetStore();
 
-// Main state
 const previewFrame = ref(null);
-const stylesheetContent = ref('');
 const aboutFontSize = ref(2);
 const aboutFontSizeUnit = ref('rem');
 
-// Popup state
 const popupVisible = ref(false);
 const popupPosition = ref({ x: 0, y: 0 });
 const popupSelector = ref('');
-const popupElementCss = ref('');
-const popupFontSize = ref(null);
-const popupFontSizeUnit = ref('rem');
 
 // PagedJS print rules
 const printStyles = `
@@ -35,25 +32,6 @@ h2 { break-before: page; }
 .chapter > h2 { string-set: title content(text); }
 `;
 
-// CSS parsing utilities
-const extractCssBlock = (css, selector) => {
-  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  const match = css.match(new RegExp(`${escaped}\\s*{[^}]*}`, 'gi'));
-  return match ? match[0] : '';
-};
-
-const extractCssValue = (css, selector, property) => {
-  const regex = new RegExp(`${selector}\\s*{[^}]*${property}:\\s*([\\d.]+)(px|rem|em)`, 'i');
-  const match = css.match(regex);
-  return match ? { value: parseFloat(match[1]), unit: match[2] } : null;
-};
-
-const updateCssValue = (selector, property, value, unit) => {
-  const regex = new RegExp(`(${selector}\\s*{[^}]*${property}:\\s*)[\\d.]+(px|rem|em)`, 'gi');
-  stylesheetContent.value = stylesheetContent.value.replace(regex, `$1${value}${unit}`);
-};
-
-// Iframe style injection
 const injectStylesToIframe = () => {
   const iframe = previewFrame.value;
   if (!iframe?.contentDocument) return;
@@ -64,10 +42,9 @@ const injectStylesToIframe = () => {
     styleElement.id = 'dynamic-styles';
     iframe.contentDocument.head.appendChild(styleElement);
   }
-  styleElement.textContent = stylesheetContent.value;
+  styleElement.textContent = stylesheetStore.content;
 };
 
-// Popup handlers
 const handleIframeClick = (event) => {
   const element = event.target;
 
@@ -81,17 +58,12 @@ const handleIframeClick = (event) => {
     : `.${element.className.split(' ')[0]}`;
 
   popupSelector.value = selector;
-  popupElementCss.value = extractCssBlock(stylesheetContent.value, selector);
-
-  const fontSizeData = extractCssValue(stylesheetContent.value, selector, 'font-size');
-  popupFontSize.value = fontSizeData?.value ?? null;
-  popupFontSizeUnit.value = fontSizeData?.unit ?? 'rem';
 
   const rect = element.getBoundingClientRect();
   const iframeRect = previewFrame.value.getBoundingClientRect();
   popupPosition.value = {
     x: iframeRect.left + rect.left,
-    y: iframeRect.top + rect.bottom + 5
+    y: iframeRect.top + rect.bottom + 5,
   };
 
   popupVisible.value = true;
@@ -101,50 +73,41 @@ const closePopup = () => {
   popupVisible.value = false;
 };
 
-const updatePopupFontSize = (newValue) => {
-  updateCssValue(popupSelector.value, 'font-size', newValue, popupFontSizeUnit.value);
-  popupFontSize.value = newValue;
-  popupElementCss.value = extractCssBlock(stylesheetContent.value, popupSelector.value);
-};
-
-// Watchers
 watch(aboutFontSize, (newVal) => {
-  updateCssValue('.about', 'font-size', newVal, aboutFontSizeUnit.value);
+  stylesheetStore.updateProperty(
+    '.about',
+    'font-size',
+    newVal,
+    aboutFontSizeUnit.value
+  );
 });
 
-watch(stylesheetContent, injectStylesToIframe);
+watch(() => stylesheetStore.content, injectStylesToIframe);
 
-// Initial render
 const renderPreview = async () => {
   const iframe = previewFrame.value;
   if (!iframe) return;
 
-  const response = await fetch('/assets/css/stylesheet.css');
-  stylesheetContent.value = await response.text();
+  await stylesheetStore.loadStylesheet();
 
-  const initialFontSize = extractCssValue(stylesheetContent.value, '.about', 'font-size');
+  const initialFontSize = stylesheetStore.extractValue('.about', 'font-size');
   if (initialFontSize) {
     aboutFontSize.value = initialFontSize.value;
     aboutFontSizeUnit.value = initialFontSize.unit;
   }
 
-  const contentSource = document.getElementById('content-source');
-  const iframeDoc = iframe.contentDocument;
-
-  iframeDoc.open();
-  iframeDoc.write(`
+  iframe.srcdoc = `
     <!DOCTYPE html>
     <html>
     <head>
       <link rel="stylesheet" href="/assets/css/pagedjs-interface.css">
-      <style id="dynamic-styles">${stylesheetContent.value}</style>
+      <style id="dynamic-styles">${stylesheetStore.content}</style>
       <style>${printStyles}</style>
       <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"><\/script>
     </head>
-    <body>${contentSource.innerHTML}</body>
+    <body>${document.getElementById('content-source').innerHTML}</body>
     </html>
-  `);
-  iframeDoc.close();
+  `;
 
   iframe.onload = () => {
     iframe.contentDocument.addEventListener('click', handleIframeClick);
@@ -167,17 +130,13 @@ onMounted(renderPreview);
 
   <iframe ref="previewFrame" id="preview-frame"></iframe>
 
-  <StylesheetViewer :stylesheet="stylesheetContent" />
+  <StylesheetViewer :stylesheet="stylesheetStore.content" />
 
   <ElementPopup
     :visible="popupVisible"
     :position="popupPosition"
     :selector="popupSelector"
-    :elementCss="popupElementCss"
-    :currentFontSize="popupFontSize"
-    :fontSizeUnit="popupFontSizeUnit"
     @close="closePopup"
-    @update:fontSize="updatePopupFontSize"
   />
 </template>