feat: implement reactive EditorPanel with bidirectional sync

- Reorganize editor components into dedicated folder
- Create PageSettings component with page format, margins, background controls
- Create TextSettings component (structure only, to be populated)
- Implement debounced updates (1s delay) to stylesheet store
- Add bidirectional sync between EditorPanel and StylesheetViewer
- Preserve scroll position as percentage when reloading preview
- Move @page rules from App.vue to stylesheet.css for unified management
- Extend css-parsing utils to handle text values (e.g., 'A4', 'portrait')
- Remove unnecessary comments, use explicit naming instead

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

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

src/utils/css-parsing.js

@@ -1,33 +1,9 @@
-/**
- * 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 escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   const regex = new RegExp(
@@ -38,26 +14,17 @@ const extractCssValue = (css, selector, property) => {
   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 escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  if (unit === '') {
+    const regex = new RegExp(
+      `(${escaped}\\s*{[^}]*${property}:\\s*)[^;]+`,
+      'gi'
+    );
+    return css.replace(regex, `$1${value}`);
+  }
+
   const regex = new RegExp(
     `(${escaped}\\s*{[^}]*${property}:\\s*)[\\d.]+(px|rem|em|mm|cm|in)`,
     'gi'
@@ -65,13 +32,6 @@ const updateCssValue = ({ css, selector, property, value, unit }) => {
   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;