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/utils/css-parsing.js

@@ -0,0 +1,75 @@
+/**
+ * CSS parsing utilities for extracting and manipulating CSS rules
+ * @module css-parsing
+ */
+
+/**
+ * Extracts a complete CSS block for a given selector
+ * @param {string} css - The CSS stylesheet content
+ * @param {string} selector - The CSS selector to find (e.g., '@page', '.my-class')
+ * @returns {string} The matched CSS block including selector and braces, or empty string if not found
+ * @example
+ * const css = '@page { margin: 20mm; }';
+ * extractCssBlock(css, '@page'); // '@page { margin: 20mm; }'
+ */
+const extractCssBlock = (css, selector) => {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = css.match(new RegExp(`${escaped}\\s*{[^}]*}`, 'gi'));
+  return match ? match[0] : '';
+};
+
+/**
+ * Extracts a CSS property value and its unit from a stylesheet
+ * @param {string} css - The CSS stylesheet content
+ * @param {string} selector - The CSS selector to search within
+ * @param {string} property - The CSS property name to extract
+ * @returns {{value: number, unit: string}|null} Object with numeric value and unit, or null if not found
+ * @example
+ * const css = '@page { margin: 20mm; }';
+ * extractCssValue(css, '@page', 'margin'); // { value: 20, unit: 'mm' }
+ */
+const extractCssValue = (css, selector, property) => {
+  const regex = new RegExp(
+    `${selector}\\s*{[^}]*${property}:\\s*([\\d.]+)(px|rem|em|mm|cm|in)`,
+    'i'
+  );
+  const match = css.match(regex);
+  return match ? { value: parseFloat(match[1]), unit: match[2] } : null;
+};
+
+/**
+ * Updates a CSS property value in a stylesheet
+ * @param {Object} options - Configuration object
+ * @param {string} options.css - The CSS stylesheet content to modify
+ * @param {string} options.selector - The CSS selector to target
+ * @param {string} options.property - The CSS property to update
+ * @param {number} options.value - The new numeric value
+ * @param {string} options.unit - The CSS unit (px, rem, em, mm, cm, in, etc.)
+ * @returns {string} The modified CSS stylesheet content
+ * @example
+ * updateCssValue({
+ *   css: '@page { margin: 20mm; }',
+ *   selector: '@page',
+ *   property: 'margin',
+ *   value: 30,
+ *   unit: 'mm'
+ * }); // '@page { margin: 30mm; }'
+ */
+const updateCssValue = ({ css, selector, property, value, unit }) => {
+  const regex = new RegExp(
+    `(${selector}\\s*{[^}]*${property}:\\s*)[\\d.]+(px|rem|em|mm|cm|in)`,
+    'gi'
+  );
+  return css.replace(regex, `$1${value}${unit}`);
+};
+
+/**
+ * Collection of CSS parsing utilities
+ * @type {Object}
+ * @property {Function} extractCssBlock - Extract a CSS block by selector
+ * @property {Function} extractCssValue - Extract a property value with unit
+ * @property {Function} updateCssValue - Update a property value in CSS
+ */
+const cssParsingUtils = { extractCssBlock, extractCssValue, updateCssValue };
+
+export default cssParsingUtils;