feat: implement TextSettings with reactive CSS editing

Implements functional text settings panel with real-time CSS updates:
- Text styling: italic, weight, alignment applied to body selector
- Typography: font-size applied to paragraph selector
- Colors: text color and background with Coloris picker
- Margins/padding: simple and detailed modes for paragraphs
- Smart sync between simple and detailed margin fields
- Automatic CSS property cleanup (removes conflicting properties)
- Parses existing stylesheet values including 4-value shorthand
- Default margins: 0mm top/left/right, 24mm bottom for paragraphs

Technical details:
- Uses Pinia store extractBlock() for CSS manipulation
- Implements isSyncingFromSimple flag to prevent watcher conflicts
- Syncs detailed fields when modifying simple field (even when expanded)
- Removes shorthand properties when using detailed, and vice versa
- Fixed background color alpha channel (0 → 1) for Coloris visibility

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

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

package.json

@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "sass-embedded": "^1.93.3",
     "vite": "^7.2.4"
   }
 }

public/assets/css/src/_buttons.scss

@@ -3,6 +3,7 @@ button {
 
   border: 1px solid var(--color-browngray-300);
   color: var(--color-browngray-300);
+  background-color: var(--color-panel-bg);
   border-radius: var(--border-radius);
   padding: 0.1rem 0.3rem;
 

public/assets/css/src/_variables.scss

@@ -7,4 +7,6 @@
   --border-radius: 0.2rem;
 
   --space-xs: 0.5rem;
+
+  --curve: cubic-bezier(0.86, 0, 0.07, 1);
 }

public/assets/css/style.css

@@ -32,6 +32,7 @@ button {
   --color-browngray-300: #b5a9a1;
   --border-radius: 0.2rem;
   --space-xs: 0.5rem;
+  --curve: cubic-bezier(0.86, 0, 0.07, 1);
 }
 
 body,
@@ -150,6 +151,7 @@ button {
   cursor: pointer;
   border: 1px solid var(--color-browngray-300);
   color: var(--color-browngray-300);
+  background-color: var(--color-panel-bg);
   border-radius: var(--border-radius);
   padding: 0.1rem 0.3rem;
 }

public/assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;AD0BF;;AElCA;;;;;;;;;;;;;EAaE,uBAAA;AFqCF;;AGlDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHqDF;AGnDA;EACE,8BAAA;OAAA,kBAAA;AHqDF;;AGlDA;EACE;IACE,sBAAA;EHqDF;AACF;AGnDA;EACE,+BAAA;AHqDF;;AIpEA;;;EAGE,4CAAA;AJuEF;;AIpEA;EACE,YAAA;AJuEF;;AInEE;EACE,6BAAA;EACA,8BAAA;AJsEJ;AIpEE;EACE,mDAAA;AJsEJ;AInEE;EACE,0BAAA;AJqEJ;AInEI;EACE,8BAAA;AJqEN;AIlEI;EACE,aAAA;AJoEN;AIlEM;;EAEE,UAAA;AJoER;AIjEM;EACE,oCAAA;AJmER;AIhEM;EACE,aAAA;EACA,WAAA;AJkER;AIhEQ;EACE,aAAA;EACA,WAAA;AJkEV;AI9DM;EACE,UAAA;AJgER;AI/DQ;EACE,aAAA;AJiEV;AIhEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJkEZ;AI/DU;EACE,oBAAA;EACA,WAAA;AJiEZ;AI3DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ6DN;AI3DM;EACE,WAAA;AJ6DR;AI3DM;EACE,UAAA;AJ6DR;AI3DQ;EACE,UAAA;AJ6DV;AIzDU;EACE,UAAA;AJ2DZ;;AKjJA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;ALmJF;AKjJE;EACE,sBAAA;EACA,WAAA;ALmJJ;AK/II;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiJN","file":"style.css"}
+{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADyBF;;AEnCA;;;;;;;;;;;;;EAaE,uBAAA;AFsCF;;AGnDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHsDF;AGpDA;EACE,8BAAA;OAAA,kBAAA;AHsDF;;AGnDA;EACE;IACE,sBAAA;EHsDF;AACF;AGpDA;EACE,+BAAA;AHsDF;;AIrEA;;;EAGE,4CAAA;AJwEF;;AIrEA;EACE,YAAA;AJwEF;;AIpEE;EACE,6BAAA;EACA,8BAAA;AJuEJ;AIrEE;EACE,mDAAA;AJuEJ;AIpEE;EACE,0BAAA;AJsEJ;AIpEI;EACE,8BAAA;AJsEN;AInEI;EACE,aAAA;AJqEN;AInEM;;EAEE,UAAA;AJqER;AIlEM;EACE,oCAAA;AJoER;AIjEM;EACE,aAAA;EACA,WAAA;AJmER;AIjEQ;EACE,aAAA;EACA,WAAA;AJmEV;AI/DM;EACE,UAAA;AJiER;AIhEQ;EACE,aAAA;AJkEV;AIjEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJmEZ;AIhEU;EACE,oBAAA;EACA,WAAA;AJkEZ;AI5DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ8DN;AI5DM;EACE,WAAA;AJ8DR;AI5DM;EACE,UAAA;AJ8DR;AI5DQ;EACE,UAAA;AJ8DV;AI1DU;EACE,UAAA;AJ4DZ;;AKlJA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALoJF;AKlJE;EACE,sBAAA;EACA,WAAA;ALoJJ;AKhJI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALkJN","file":"style.css"}

public/assets/css/stylesheet.css

@@ -1,7 +1,7 @@
 @page {
   size: A4;
   margin: 20mm 15mm 26mm 15mm;
-  background: rgba(255, 255, 255, 0);
+  background: rgba(255, 255, 255, 1);
 }
 
 @page {
@@ -24,4 +24,5 @@ h2 {
 
 p {
   font-size: 1rem;
+  margin: 0mm 0mm 24mm 0mm;
 }

src/App.vue

@@ -2,7 +2,7 @@
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
-import { onMounted, ref, watch, computed } from 'vue';
+import { onMounted, ref, watch, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
 import Coloris from '@melloware/coloris';
 
@@ -10,6 +10,9 @@ const stylesheetStore = useStylesheetStore();
 const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
+const activeTab = ref('');
+
+provide('activeTab', activeTab);
 
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
@@ -110,7 +113,7 @@ const renderPreview = async (shouldReloadFromFile = false) => {
           // Swap current frame
           currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
           isTransitioning = false;
-        }, 100); // Match CSS transition duration
+        }, 200); // Match CSS transition duration
       }, 50); // Small delay to ensure scroll is set
     }, 200); // Wait for PagedJS
   };
@@ -133,8 +136,16 @@ onMounted(() => renderPreview(true));
 
   <EditorPanel />
 
-  <iframe ref="previewFrame1" class="preview-frame"></iframe>
+  <iframe
-  <iframe ref="previewFrame2" class="preview-frame"></iframe>
+    ref="previewFrame1"
+    class="preview-frame"
+    :class="{ shifted: activeTab.length > 0 }"
+  ></iframe>
+  <iframe
+    ref="previewFrame2"
+    class="preview-frame"
+    :class="{ shifted: activeTab.length > 0 }"
+  ></iframe>
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
 </template>
@@ -147,7 +158,16 @@ onMounted(() => renderPreview(true));
   width: 100vw;
   height: 100vh;
   border: none;
-  transition: opacity 0.1s ease-in-out;
+  margin-left: 0;
+  transform: scale(1) translateY(0);
+  height: 100vh;
+  transition: all 0.2s ease-in-out var(--curve);
+}
+
+.preview-frame.shifted {
+  margin-left: 19rem;
+  transform: scale(0.7) translateY(-30vh);
+  height: 142vh;
 }
 
 .preview-frame:nth-of-type(1) {

src/components/editor/EditorPanel.vue

@@ -27,7 +27,7 @@
       </button>
     </nav>
 
-    <div class="tab-content">
+    <div class="tab-content" :class="{ open: activeTab.length > 0 }">
       <div v-if="activeTab === 'document'" class="tab-panel">
         <PageSettings />
         <TextSettings />
@@ -45,21 +45,16 @@
 </template>
 
 <script setup>
-import { ref, provide } from 'vue';
+import { inject } from 'vue';
 import PageSettings from './PageSettings.vue';
 import TextSettings from './TextSettings.vue';
 import StylesheetViewer from '../StylesheetViewer.vue';
 
-// Tab management
+const activeTab = inject('activeTab');
-const activeTab = ref('document');
-
-// Provide activeTab to child components
-provide('activeTab', activeTab);
 </script>
 
 <style lang="scss" scoped>
 #editor-panel {
-  padding: 1rem;
   position: fixed;
   top: 0;
   left: 0;
@@ -68,21 +63,33 @@ provide('activeTab', activeTab);
   display: flex;
   flex-direction: column;
   z-index: 2;
-
-  background-color: var(--color-panel-bg);
-  box-shadow: -5px 0px 12px;
 }
 
 nav {
-  margin-bottom: 2rem;
+  position: absolute;
+  margin: 1rem 0 0 1rem;
 
   display: flex;
   gap: 0.5rem;
+  z-index: 2;
 }
 
 .tab-content {
   flex: 1;
   overflow: hidden;
+  position: relative;
+  left: -35rem;
+
+  padding: 4rem 1rem 1rem 1rem;
+
+  background-color: var(--color-panel-bg);
+  box-shadow: -5px 0px 12px;
+
+  transition: left 0.3s var(--curve);
+}
+
+.tab-content.open {
+  left: 0rem;
 }
 
 .tab-panel {

src/components/editor/TextSettings.vue

@@ -486,6 +486,7 @@ const stylesheetStore = useStylesheetStore();
 
 let isUpdatingFromStore = false;
 let updateTimer = null;
+let isSyncingFromSimple = false; // Flag to prevent detailed watchers from triggering when syncing from simple field
 
 const debouncedUpdate = (callback) => {
   clearTimeout(updateTimer);
@@ -524,70 +525,201 @@ const background = ref({
 
 // Margin outer
 const marginOuter = ref({
-  value: 23,
+  value: 0,
   unit: 'mm',
 });
 
 const marginOuterExpanded = ref(false);
 
 const marginOuterDetailed = ref({
-  top: { value: 23, unit: 'mm' },
+  top: { value: 0, unit: 'mm' },
-  bottom: { value: 23, unit: 'mm' },
+  bottom: { value: 24, unit: 'mm' },
-  left: { value: 23, unit: 'mm' },
+  left: { value: 0, unit: 'mm' },
-  right: { value: 23, unit: 'mm' },
+  right: { value: 0, unit: 'mm' },
 });
 
 // Margin inner
 const marginInner = ref({
-  value: 23,
+  value: 0,
   unit: 'mm',
 });
 
 const marginInnerExpanded = ref(false);
 
 const marginInnerDetailed = ref({
-  top: { value: 23, unit: 'mm' },
+  top: { value: 0, unit: 'mm' },
-  bottom: { value: 23, unit: 'mm' },
+  bottom: { value: 0, unit: 'mm' },
-  left: { value: 23, unit: 'mm' },
+  left: { value: 0, unit: 'mm' },
-  right: { value: 23, unit: 'mm' },
+  right: { value: 0, unit: 'mm' },
 });
 
+// Update functions
+const updateBodyStyle = (property, value) => {
+  const currentBlock = stylesheetStore.extractBlock('body') || createBodyRule();
+
+  if (currentBlock.includes(`${property}:`)) {
+    // Update existing property
+    const updatedBlock = currentBlock.replace(
+      new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
+      `$1${value}`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  } else {
+    // Add new property
+    const updatedBlock = currentBlock.replace(
+      /(\s*})$/,
+      `  ${property}: ${value};\n$1`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+const updateParagraphStyle = (property, value) => {
+  const currentBlock = stylesheetStore.extractBlock('p') || createParagraphRule();
+
+  if (currentBlock.includes(`${property}:`)) {
+    // Update existing property
+    const updatedBlock = currentBlock.replace(
+      new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
+      `$1${value}`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  } else {
+    // Add new property
+    const updatedBlock = currentBlock.replace(
+      /(\s*})$/,
+      `  ${property}: ${value};\n$1`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Remove detailed margin properties (margin-top, margin-right, etc.)
+const removeDetailedMargins = () => {
+  let currentBlock = stylesheetStore.extractBlock('p');
+  if (!currentBlock) return;
+
+  let updatedBlock = currentBlock;
+  updatedBlock = updatedBlock.replace(/\s*margin-top:\s*[^;]+;\n?/gi, '');
+  updatedBlock = updatedBlock.replace(/\s*margin-right:\s*[^;]+;\n?/gi, '');
+  updatedBlock = updatedBlock.replace(/\s*margin-bottom:\s*[^;]+;\n?/gi, '');
+  updatedBlock = updatedBlock.replace(/\s*margin-left:\s*[^;]+;\n?/gi, '');
+
+  if (updatedBlock !== currentBlock) {
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Remove detailed padding properties (padding-top, padding-right, etc.)
+const removeDetailedPadding = () => {
+  let currentBlock = stylesheetStore.extractBlock('p');
+  if (!currentBlock) return;
+
+  let updatedBlock = currentBlock;
+  updatedBlock = updatedBlock.replace(/\s*padding-top:\s*[^;]+;\n?/gi, '');
+  updatedBlock = updatedBlock.replace(/\s*padding-right:\s*[^;]+;\n?/gi, '');
+  updatedBlock = updatedBlock.replace(/\s*padding-bottom:\s*[^;]+;\n?/gi, '');
+  updatedBlock = updatedBlock.replace(/\s*padding-left:\s*[^;]+;\n?/gi, '');
+
+  if (updatedBlock !== currentBlock) {
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Remove shorthand margin property
+const removeShorthandMargin = () => {
+  let currentBlock = stylesheetStore.extractBlock('p');
+  if (!currentBlock) return;
+
+  let updatedBlock = currentBlock.replace(/\s*margin:\s*[^;]+;\n?/gi, '');
+
+  if (updatedBlock !== currentBlock) {
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Remove shorthand padding property
+const removeShorthandPadding = () => {
+  let currentBlock = stylesheetStore.extractBlock('p');
+  if (!currentBlock) return;
+
+  let updatedBlock = currentBlock.replace(/\s*padding:\s*[^;]+;\n?/gi, '');
+
+  if (updatedBlock !== currentBlock) {
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+const createBodyRule = () => {
+  stylesheetStore.content += '\n\nbody {\n}\n';
+  return 'body {\n}';
+};
+
+const createParagraphRule = () => {
+  stylesheetStore.content += '\n\np {\n}\n';
+  return 'p {\n}';
+};
+
 // Watchers - Immediate updates for select/buttons/checkboxes
 watch(font, () => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    // TODO: implement font update
+    // TODO: implement font update when fonts are available
   });
 });
 
-watch(italic, () => {
+watch(italic, (newValue) => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    // TODO: implement italic update
+    updateBodyStyle('font-style', newValue ? 'italic' : 'normal');
   });
 });
 
-watch(weight, () => {
+watch(weight, (newValue) => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    // TODO: implement weight update
+    updateParagraphStyle('font-weight', newValue);
   });
 });
 
-watch(alignment, () => {
+watch(alignment, (newValue) => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    // TODO: implement alignment update
+    updateBodyStyle('text-align', newValue);
   });
 });
 
-// Font size - debounced for value, immediate for unit
+// Font size - immediate for both value and unit (applied to paragraphs)
 watch(
   () => fontSize.value.value,
   () => {
     if (isUpdatingFromStore) return;
-    debouncedUpdate(() => {
+    immediateUpdate(() => {
-      // TODO: implement font size update
+      updateParagraphStyle('font-size', `${fontSize.value.value}${fontSize.value.unit}`);
     });
   }
 );
@@ -597,40 +729,50 @@ watch(
   () => {
     if (isUpdatingFromStore) return;
     immediateUpdate(() => {
-      // TODO: implement font size update
+      updateParagraphStyle('font-size', `${fontSize.value.value}${fontSize.value.unit}`);
     });
   }
 );
 
-// Color - debounced for text value
+// Color - immediate update for Coloris
 watch(
   () => color.value.value,
   () => {
     if (isUpdatingFromStore) return;
-    debouncedUpdate(() => {
+    immediateUpdate(() => {
-      // TODO: implement color update
+      updateBodyStyle('color', color.value.value);
     });
   }
 );
 
-// Background - debounced for value
+// Background - immediate update for Coloris
 watch(
   () => background.value.value,
   () => {
     if (isUpdatingFromStore) return;
-    debouncedUpdate(() => {
+    immediateUpdate(() => {
-      // TODO: implement background update
+      updateBodyStyle('background', background.value.value);
     });
   }
 );
 
-// Margin outer - debounced for value, immediate for unit
+// Margin outer - debounced for value, immediate for unit (applied to paragraphs)
 watch(
   () => marginOuter.value.value,
   () => {
     if (isUpdatingFromStore) return;
+
+    // Update all detailed values to match the simple value
+    isSyncingFromSimple = true;
+    marginOuterDetailed.value.top.value = marginOuter.value.value;
+    marginOuterDetailed.value.right.value = marginOuter.value.value;
+    marginOuterDetailed.value.bottom.value = marginOuter.value.value;
+    marginOuterDetailed.value.left.value = marginOuter.value.value;
+    isSyncingFromSimple = false;
+
     debouncedUpdate(() => {
-      // TODO: implement margin outer update
+      removeDetailedMargins(); // Remove detailed properties first
+      updateParagraphStyle('margin', `${marginOuter.value.value}${marginOuter.value.unit}`);
     });
   }
 );
@@ -639,13 +781,23 @@ watch(
   () => marginOuter.value.unit,
   () => {
     if (isUpdatingFromStore) return;
+
+    // Update all detailed units to match the simple unit
+    isSyncingFromSimple = true;
+    marginOuterDetailed.value.top.unit = marginOuter.value.unit;
+    marginOuterDetailed.value.right.unit = marginOuter.value.unit;
+    marginOuterDetailed.value.bottom.unit = marginOuter.value.unit;
+    marginOuterDetailed.value.left.unit = marginOuter.value.unit;
+    isSyncingFromSimple = false;
+
     immediateUpdate(() => {
-      // TODO: implement margin outer update
+      removeDetailedMargins(); // Remove detailed properties first
+      updateParagraphStyle('margin', `${marginOuter.value.value}${marginOuter.value.unit}`);
     });
   }
 );
 
-// Margin outer detailed - debounced for values, immediate for units
+// Margin outer detailed - debounced for values, immediate for units (applied to paragraphs)
 watch(
   () => [
     marginOuterDetailed.value.top.value,
@@ -654,9 +806,13 @@ watch(
     marginOuterDetailed.value.right.value,
   ],
   () => {
-    if (isUpdatingFromStore) return;
+    if (isUpdatingFromStore || !marginOuterExpanded.value || isSyncingFromSimple) return;
     debouncedUpdate(() => {
-      // TODO: implement margin outer detailed update
+      removeShorthandMargin(); // Remove shorthand property first
+      updateParagraphStyle('margin-top', `${marginOuterDetailed.value.top.value}${marginOuterDetailed.value.top.unit}`);
+      updateParagraphStyle('margin-bottom', `${marginOuterDetailed.value.bottom.value}${marginOuterDetailed.value.bottom.unit}`);
+      updateParagraphStyle('margin-left', `${marginOuterDetailed.value.left.value}${marginOuterDetailed.value.left.unit}`);
+      updateParagraphStyle('margin-right', `${marginOuterDetailed.value.right.value}${marginOuterDetailed.value.right.unit}`);
     });
   }
 );
@@ -669,20 +825,34 @@ watch(
     marginOuterDetailed.value.right.unit,
   ],
   () => {
-    if (isUpdatingFromStore) return;
+    if (isUpdatingFromStore || !marginOuterExpanded.value || isSyncingFromSimple) return;
     immediateUpdate(() => {
-      // TODO: implement margin outer detailed update
+      removeShorthandMargin(); // Remove shorthand property first
+      updateParagraphStyle('margin-top', `${marginOuterDetailed.value.top.value}${marginOuterDetailed.value.top.unit}`);
+      updateParagraphStyle('margin-bottom', `${marginOuterDetailed.value.bottom.value}${marginOuterDetailed.value.bottom.unit}`);
+      updateParagraphStyle('margin-left', `${marginOuterDetailed.value.left.value}${marginOuterDetailed.value.left.unit}`);
+      updateParagraphStyle('margin-right', `${marginOuterDetailed.value.right.value}${marginOuterDetailed.value.right.unit}`);
     });
   }
 );
 
-// Margin inner - debounced for value, immediate for unit
+// Margin inner - debounced for value, immediate for unit (applied to paragraphs)
 watch(
   () => marginInner.value.value,
   () => {
     if (isUpdatingFromStore) return;
+
+    // Update all detailed values to match the simple value
+    isSyncingFromSimple = true;
+    marginInnerDetailed.value.top.value = marginInner.value.value;
+    marginInnerDetailed.value.right.value = marginInner.value.value;
+    marginInnerDetailed.value.bottom.value = marginInner.value.value;
+    marginInnerDetailed.value.left.value = marginInner.value.value;
+    isSyncingFromSimple = false;
+
     debouncedUpdate(() => {
-      // TODO: implement margin inner update
+      removeDetailedPadding(); // Remove detailed properties first
+      updateParagraphStyle('padding', `${marginInner.value.value}${marginInner.value.unit}`);
     });
   }
 );
@@ -691,13 +861,23 @@ watch(
   () => marginInner.value.unit,
   () => {
     if (isUpdatingFromStore) return;
+
+    // Update all detailed units to match the simple unit
+    isSyncingFromSimple = true;
+    marginInnerDetailed.value.top.unit = marginInner.value.unit;
+    marginInnerDetailed.value.right.unit = marginInner.value.unit;
+    marginInnerDetailed.value.bottom.unit = marginInner.value.unit;
+    marginInnerDetailed.value.left.unit = marginInner.value.unit;
+    isSyncingFromSimple = false;
+
     immediateUpdate(() => {
-      // TODO: implement margin inner update
+      removeDetailedPadding(); // Remove detailed properties first
+      updateParagraphStyle('padding', `${marginInner.value.value}${marginInner.value.unit}`);
     });
   }
 );
 
-// Margin inner detailed - debounced for values, immediate for units
+// Margin inner detailed - debounced for values, immediate for units (applied to paragraphs)
 watch(
   () => [
     marginInnerDetailed.value.top.value,
@@ -706,9 +886,13 @@ watch(
     marginInnerDetailed.value.right.value,
   ],
   () => {
-    if (isUpdatingFromStore) return;
+    if (isUpdatingFromStore || !marginInnerExpanded.value || isSyncingFromSimple) return;
     debouncedUpdate(() => {
-      // TODO: implement margin inner detailed update
+      removeShorthandPadding(); // Remove shorthand property first
+      updateParagraphStyle('padding-top', `${marginInnerDetailed.value.top.value}${marginInnerDetailed.value.top.unit}`);
+      updateParagraphStyle('padding-bottom', `${marginInnerDetailed.value.bottom.value}${marginInnerDetailed.value.bottom.unit}`);
+      updateParagraphStyle('padding-left', `${marginInnerDetailed.value.left.value}${marginInnerDetailed.value.left.unit}`);
+      updateParagraphStyle('padding-right', `${marginInnerDetailed.value.right.value}${marginInnerDetailed.value.right.unit}`);
     });
   }
 );
@@ -721,13 +905,46 @@ watch(
     marginInnerDetailed.value.right.unit,
   ],
   () => {
-    if (isUpdatingFromStore) return;
+    if (isUpdatingFromStore || !marginInnerExpanded.value || isSyncingFromSimple) return;
     immediateUpdate(() => {
-      // TODO: implement margin inner detailed update
+      removeShorthandPadding(); // Remove shorthand property first
+      updateParagraphStyle('padding-top', `${marginInnerDetailed.value.top.value}${marginInnerDetailed.value.top.unit}`);
+      updateParagraphStyle('padding-bottom', `${marginInnerDetailed.value.bottom.value}${marginInnerDetailed.value.bottom.unit}`);
+      updateParagraphStyle('padding-left', `${marginInnerDetailed.value.left.value}${marginInnerDetailed.value.left.unit}`);
+      updateParagraphStyle('padding-right', `${marginInnerDetailed.value.right.value}${marginInnerDetailed.value.right.unit}`);
     });
   }
 );
 
+// Toggle expanded state - sync values when expanding
+watch(marginOuterExpanded, (newValue) => {
+  if (newValue) {
+    // When expanding, copy simple value to all detailed fields
+    marginOuterDetailed.value.top.value = marginOuter.value.value;
+    marginOuterDetailed.value.top.unit = marginOuter.value.unit;
+    marginOuterDetailed.value.bottom.value = marginOuter.value.value;
+    marginOuterDetailed.value.bottom.unit = marginOuter.value.unit;
+    marginOuterDetailed.value.left.value = marginOuter.value.value;
+    marginOuterDetailed.value.left.unit = marginOuter.value.unit;
+    marginOuterDetailed.value.right.value = marginOuter.value.value;
+    marginOuterDetailed.value.right.unit = marginOuter.value.unit;
+  }
+});
+
+watch(marginInnerExpanded, (newValue) => {
+  if (newValue) {
+    // When expanding, copy simple value to all detailed fields
+    marginInnerDetailed.value.top.value = marginInner.value.value;
+    marginInnerDetailed.value.top.unit = marginInner.value.unit;
+    marginInnerDetailed.value.bottom.value = marginInner.value.value;
+    marginInnerDetailed.value.bottom.unit = marginInner.value.unit;
+    marginInnerDetailed.value.left.value = marginInner.value.value;
+    marginInnerDetailed.value.left.unit = marginInner.value.unit;
+    marginInnerDetailed.value.right.value = marginInner.value.value;
+    marginInnerDetailed.value.right.unit = marginInner.value.unit;
+  }
+});
+
 onMounted(() => {
   Coloris.init();
   Coloris({
@@ -744,5 +961,167 @@ onMounted(() => {
       'transparent',
     ],
   });
+
+  // Sync initial values from stylesheet
+  syncFromStore();
 });
+
+// Sync values from store to form fields
+const syncFromStore = () => {
+  isUpdatingFromStore = true;
+
+  const bodyBlock = stylesheetStore.extractBlock('body');
+  const paragraphBlock = stylesheetStore.extractBlock('p');
+
+  // Extract from body block (italic, alignment, color, background)
+  if (bodyBlock) {
+    // Extract font-style (italic)
+    const fontStyleMatch = bodyBlock.match(/font-style:\s*([^;]+)/i);
+    if (fontStyleMatch) {
+      italic.value = fontStyleMatch[1].trim() === 'italic';
+    }
+
+    // Extract text-align
+    const textAlignMatch = bodyBlock.match(/text-align:\s*([^;]+)/i);
+    if (textAlignMatch) {
+      alignment.value = textAlignMatch[1].trim();
+    }
+
+    // Extract color
+    const colorMatch = bodyBlock.match(/color:\s*([^;]+)/i);
+    if (colorMatch) {
+      color.value.value = colorMatch[1].trim();
+    }
+
+    // Extract background
+    const backgroundMatch = bodyBlock.match(/background:\s*([^;]+)/i);
+    if (backgroundMatch) {
+      background.value.value = backgroundMatch[1].trim();
+    }
+  }
+
+  // Extract from paragraph block (weight, size, margins, padding)
+  if (paragraphBlock) {
+    // Extract font-weight
+    const fontWeightMatch = paragraphBlock.match(/font-weight:\s*([^;]+)/i);
+    if (fontWeightMatch) {
+      weight.value = fontWeightMatch[1].trim();
+    }
+
+    // Extract font-size
+    const fontSizeMatch = paragraphBlock.match(/font-size:\s*([0-9.]+)(px|em|rem)/i);
+    if (fontSizeMatch) {
+      fontSize.value.value = parseFloat(fontSizeMatch[1]);
+      fontSize.value.unit = fontSizeMatch[2];
+    }
+
+    // Extract margin (simple or detailed)
+    const marginMatch = paragraphBlock.match(/margin:\s*([^;]+)/i);
+    const marginTopMatch = paragraphBlock.match(/margin-top:\s*([0-9.]+)(mm|px)/i);
+
+    if (marginTopMatch) {
+      // Has detailed margins (margin-top, margin-right, etc.)
+      const marginBottomMatch = paragraphBlock.match(/margin-bottom:\s*([0-9.]+)(mm|px)/i);
+      const marginLeftMatch = paragraphBlock.match(/margin-left:\s*([0-9.]+)(mm|px)/i);
+      const marginRightMatch = paragraphBlock.match(/margin-right:\s*([0-9.]+)(mm|px)/i);
+
+      if (marginTopMatch) {
+        marginOuterDetailed.value.top.value = parseFloat(marginTopMatch[1]);
+        marginOuterDetailed.value.top.unit = marginTopMatch[2];
+      }
+      if (marginBottomMatch) {
+        marginOuterDetailed.value.bottom.value = parseFloat(marginBottomMatch[1]);
+        marginOuterDetailed.value.bottom.unit = marginBottomMatch[2];
+      }
+      if (marginLeftMatch) {
+        marginOuterDetailed.value.left.value = parseFloat(marginLeftMatch[1]);
+        marginOuterDetailed.value.left.unit = marginLeftMatch[2];
+      }
+      if (marginRightMatch) {
+        marginOuterDetailed.value.right.value = parseFloat(marginRightMatch[1]);
+        marginOuterDetailed.value.right.unit = marginRightMatch[2];
+      }
+    } else if (marginMatch) {
+      // Has shorthand margin - check if it's 1 value or 4 values
+      const marginValue = marginMatch[1].trim();
+
+      // Check for 4-value format: "0mm 0mm 24mm 0mm" (top right bottom left)
+      const fourValueMatch = marginValue.match(/^([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)$/i);
+
+      if (fourValueMatch) {
+        // Parse 4-value format and store in detailed margins
+        marginOuterDetailed.value.top.value = parseFloat(fourValueMatch[1]);
+        marginOuterDetailed.value.top.unit = fourValueMatch[2];
+        marginOuterDetailed.value.right.value = parseFloat(fourValueMatch[3]);
+        marginOuterDetailed.value.right.unit = fourValueMatch[4];
+        marginOuterDetailed.value.bottom.value = parseFloat(fourValueMatch[5]);
+        marginOuterDetailed.value.bottom.unit = fourValueMatch[6];
+        marginOuterDetailed.value.left.value = parseFloat(fourValueMatch[7]);
+        marginOuterDetailed.value.left.unit = fourValueMatch[8];
+      } else {
+        // Single value format: "10mm"
+        const singleValueMatch = marginValue.match(/^([0-9.]+)(mm|px)$/i);
+        if (singleValueMatch) {
+          marginOuter.value.value = parseFloat(singleValueMatch[1]);
+          marginOuter.value.unit = singleValueMatch[2];
+        }
+      }
+    }
+
+    // Extract padding (simple or detailed)
+    const paddingMatch = paragraphBlock.match(/padding:\s*([^;]+)/i);
+    const paddingTopMatch = paragraphBlock.match(/padding-top:\s*([0-9.]+)(mm|px)/i);
+
+    if (paddingTopMatch) {
+      // Has detailed padding (padding-top, padding-right, etc.)
+      const paddingBottomMatch = paragraphBlock.match(/padding-bottom:\s*([0-9.]+)(mm|px)/i);
+      const paddingLeftMatch = paragraphBlock.match(/padding-left:\s*([0-9.]+)(mm|px)/i);
+      const paddingRightMatch = paragraphBlock.match(/padding-right:\s*([0-9.]+)(mm|px)/i);
+
+      if (paddingTopMatch) {
+        marginInnerDetailed.value.top.value = parseFloat(paddingTopMatch[1]);
+        marginInnerDetailed.value.top.unit = paddingTopMatch[2];
+      }
+      if (paddingBottomMatch) {
+        marginInnerDetailed.value.bottom.value = parseFloat(paddingBottomMatch[1]);
+        marginInnerDetailed.value.bottom.unit = paddingBottomMatch[2];
+      }
+      if (paddingLeftMatch) {
+        marginInnerDetailed.value.left.value = parseFloat(paddingLeftMatch[1]);
+        marginInnerDetailed.value.left.unit = paddingLeftMatch[2];
+      }
+      if (paddingRightMatch) {
+        marginInnerDetailed.value.right.value = parseFloat(paddingRightMatch[1]);
+        marginInnerDetailed.value.right.unit = paddingRightMatch[2];
+      }
+    } else if (paddingMatch) {
+      // Has shorthand padding - check if it's 1 value or 4 values
+      const paddingValue = paddingMatch[1].trim();
+
+      // Check for 4-value format: "0mm 0mm 0mm 0mm" (top right bottom left)
+      const fourValueMatch = paddingValue.match(/^([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)\s+([0-9.]+)(mm|px)$/i);
+
+      if (fourValueMatch) {
+        // Parse 4-value format and store in detailed padding
+        marginInnerDetailed.value.top.value = parseFloat(fourValueMatch[1]);
+        marginInnerDetailed.value.top.unit = fourValueMatch[2];
+        marginInnerDetailed.value.right.value = parseFloat(fourValueMatch[3]);
+        marginInnerDetailed.value.right.unit = fourValueMatch[4];
+        marginInnerDetailed.value.bottom.value = parseFloat(fourValueMatch[5]);
+        marginInnerDetailed.value.bottom.unit = fourValueMatch[6];
+        marginInnerDetailed.value.left.value = parseFloat(fourValueMatch[7]);
+        marginInnerDetailed.value.left.unit = fourValueMatch[8];
+      } else {
+        // Single value format: "10mm"
+        const singleValueMatch = paddingValue.match(/^([0-9.]+)(mm|px)$/i);
+        if (singleValueMatch) {
+          marginInner.value.value = parseFloat(singleValueMatch[1]);
+          marginInner.value.unit = singleValueMatch[2];
+        }
+      }
+    }
+  }
+
+  isUpdatingFromStore = false;
+};
 </script>