package.json

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

public/assets/css/src/_buttons.scss

@@ -3,7 +3,6 @@ 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,6 +7,4 @@
   --border-radius: 0.2rem;
 
   --space-xs: 0.5rem;
-
-  --curve: cubic-bezier(0.86, 0, 0.07, 1);
 }

public/assets/css/style.css

@@ -32,7 +32,6 @@ button {
   --color-browngray-300: #b5a9a1;
   --border-radius: 0.2rem;
   --space-xs: 0.5rem;
-  --curve: cubic-bezier(0.86, 0, 0.07, 1);
 }
 
 body,
@@ -151,7 +150,6 @@ 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;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"}
+{"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"}

public/assets/css/stylesheet.css

@@ -1,7 +1,7 @@
 @page {
   size: A4;
   margin: 20mm 15mm 26mm 15mm;
-  background: rgba(255, 255, 255, 1);
+  background: rgba(255, 255, 255, 0);
 }
 
 @page {
@@ -24,5 +24,4 @@ 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, provide } from 'vue';
+import { onMounted, ref, watch, computed } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
 import Coloris from '@melloware/coloris';
 
@@ -10,9 +10,6 @@ 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
@@ -113,7 +110,7 @@ const renderPreview = async (shouldReloadFromFile = false) => {
           // Swap current frame
           currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
           isTransitioning = false;
-        }, 200); // Match CSS transition duration
+        }, 100); // Match CSS transition duration
       }, 50); // Small delay to ensure scroll is set
     }, 200); // Wait for PagedJS
   };
@@ -136,16 +133,8 @@ onMounted(() => renderPreview(true));
 
   <EditorPanel />
 
-  <iframe
+  <iframe ref="previewFrame1" class="preview-frame"></iframe>
-    ref="previewFrame1"
+  <iframe ref="previewFrame2" class="preview-frame"></iframe>
-    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>
@@ -158,16 +147,7 @@ onMounted(() => renderPreview(true));
   width: 100vw;
   height: 100vh;
   border: none;
-  margin-left: 0;
+  transition: opacity 0.1s ease-in-out;
-  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" :class="{ open: activeTab.length > 0 }">
+    <div class="tab-content">
       <div v-if="activeTab === 'document'" class="tab-panel">
         <PageSettings />
         <TextSettings />
@@ -45,16 +45,21 @@
 </template>
 
 <script setup>
-import { inject } from 'vue';
+import { ref, provide } from 'vue';
 import PageSettings from './PageSettings.vue';
 import TextSettings from './TextSettings.vue';
 import StylesheetViewer from '../StylesheetViewer.vue';
 
-const activeTab = inject('activeTab');
+// Tab management
+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;
@@ -63,33 +68,21 @@ const activeTab = inject('activeTab');
   display: flex;
   flex-direction: column;
   z-index: 2;
+
+  background-color: var(--color-panel-bg);
+  box-shadow: -5px 0px 12px;
 }
 
 nav {
-  position: absolute;
+  margin-bottom: 2rem;
-  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,7 +486,6 @@ 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);
@@ -525,201 +524,70 @@ const background = ref({
 
 // Margin outer
 const marginOuter = ref({
-  value: 0,
+  value: 23,
   unit: 'mm',
 });
 
 const marginOuterExpanded = ref(false);
 
 const marginOuterDetailed = ref({
-  top: { value: 0, unit: 'mm' },
+  top: { value: 23, unit: 'mm' },
-  bottom: { value: 24, unit: 'mm' },
+  bottom: { value: 23, unit: 'mm' },
-  left: { value: 0, unit: 'mm' },
+  left: { value: 23, unit: 'mm' },
-  right: { value: 0, unit: 'mm' },
+  right: { value: 23, unit: 'mm' },
 });
 
 // Margin inner
 const marginInner = ref({
-  value: 0,
+  value: 23,
   unit: 'mm',
 });
 
 const marginInnerExpanded = ref(false);
 
 const marginInnerDetailed = ref({
-  top: { value: 0, unit: 'mm' },
+  top: { value: 23, unit: 'mm' },
-  bottom: { value: 0, unit: 'mm' },
+  bottom: { value: 23, unit: 'mm' },
-  left: { value: 0, unit: 'mm' },
+  left: { value: 23, unit: 'mm' },
-  right: { value: 0, unit: 'mm' },
+  right: { value: 23, 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 when fonts are available
+    // TODO: implement font update
   });
 });
 
-watch(italic, (newValue) => {
+watch(italic, () => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    updateBodyStyle('font-style', newValue ? 'italic' : 'normal');
+    // TODO: implement italic update
   });
 });
 
-watch(weight, (newValue) => {
+watch(weight, () => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    updateParagraphStyle('font-weight', newValue);
+    // TODO: implement weight update
   });
 });
 
-watch(alignment, (newValue) => {
+watch(alignment, () => {
   if (isUpdatingFromStore) return;
   immediateUpdate(() => {
-    updateBodyStyle('text-align', newValue);
+    // TODO: implement alignment update
   });
 });
 
-// Font size - immediate for both value and unit (applied to paragraphs)
+// Font size - debounced for value, immediate for unit
 watch(
   () => fontSize.value.value,
   () => {
     if (isUpdatingFromStore) return;
-    immediateUpdate(() => {
+    debouncedUpdate(() => {
-      updateParagraphStyle('font-size', `${fontSize.value.value}${fontSize.value.unit}`);
+      // TODO: implement font size update
     });
   }
 );
@@ -729,50 +597,40 @@ watch(
   () => {
     if (isUpdatingFromStore) return;
     immediateUpdate(() => {
-      updateParagraphStyle('font-size', `${fontSize.value.value}${fontSize.value.unit}`);
+      // TODO: implement font size update
     });
   }
 );
 
-// Color - immediate update for Coloris
+// Color - debounced for text value
 watch(
   () => color.value.value,
   () => {
     if (isUpdatingFromStore) return;
-    immediateUpdate(() => {
+    debouncedUpdate(() => {
-      updateBodyStyle('color', color.value.value);
+      // TODO: implement color update
     });
   }
 );
 
-// Background - immediate update for Coloris
+// Background - debounced for value
 watch(
   () => background.value.value,
   () => {
     if (isUpdatingFromStore) return;
-    immediateUpdate(() => {
+    debouncedUpdate(() => {
-      updateBodyStyle('background', background.value.value);
+      // TODO: implement background update
     });
   }
 );
 
-// Margin outer - debounced for value, immediate for unit (applied to paragraphs)
+// Margin outer - debounced for value, immediate for unit
 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(() => {
-      removeDetailedMargins(); // Remove detailed properties first
+      // TODO: implement margin outer update
-      updateParagraphStyle('margin', `${marginOuter.value.value}${marginOuter.value.unit}`);
     });
   }
 );
@@ -781,23 +639,13 @@ 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(() => {
-      removeDetailedMargins(); // Remove detailed properties first
+      // TODO: implement margin outer update
-      updateParagraphStyle('margin', `${marginOuter.value.value}${marginOuter.value.unit}`);
     });
   }
 );
 
-// Margin outer detailed - debounced for values, immediate for units (applied to paragraphs)
+// Margin outer detailed - debounced for values, immediate for units
 watch(
   () => [
     marginOuterDetailed.value.top.value,
@@ -806,13 +654,9 @@ watch(
     marginOuterDetailed.value.right.value,
   ],
   () => {
-    if (isUpdatingFromStore || !marginOuterExpanded.value || isSyncingFromSimple) return;
+    if (isUpdatingFromStore) return;
     debouncedUpdate(() => {
-      removeShorthandMargin(); // Remove shorthand property first
+      // TODO: implement margin outer detailed update
-      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}`);
     });
   }
 );
@@ -825,34 +669,20 @@ watch(
     marginOuterDetailed.value.right.unit,
   ],
   () => {
-    if (isUpdatingFromStore || !marginOuterExpanded.value || isSyncingFromSimple) return;
+    if (isUpdatingFromStore) return;
     immediateUpdate(() => {
-      removeShorthandMargin(); // Remove shorthand property first
+      // TODO: implement margin outer detailed update
-      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 (applied to paragraphs)
+// Margin inner - debounced for value, immediate for unit
 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(() => {
-      removeDetailedPadding(); // Remove detailed properties first
+      // TODO: implement margin inner update
-      updateParagraphStyle('padding', `${marginInner.value.value}${marginInner.value.unit}`);
     });
   }
 );
@@ -861,23 +691,13 @@ 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(() => {
-      removeDetailedPadding(); // Remove detailed properties first
+      // TODO: implement margin inner update
-      updateParagraphStyle('padding', `${marginInner.value.value}${marginInner.value.unit}`);
     });
   }
 );
 
-// Margin inner detailed - debounced for values, immediate for units (applied to paragraphs)
+// Margin inner detailed - debounced for values, immediate for units
 watch(
   () => [
     marginInnerDetailed.value.top.value,
@@ -886,13 +706,9 @@ watch(
     marginInnerDetailed.value.right.value,
   ],
   () => {
-    if (isUpdatingFromStore || !marginInnerExpanded.value || isSyncingFromSimple) return;
+    if (isUpdatingFromStore) return;
     debouncedUpdate(() => {
-      removeShorthandPadding(); // Remove shorthand property first
+      // TODO: implement margin inner detailed update
-      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}`);
     });
   }
 );
@@ -905,46 +721,13 @@ watch(
     marginInnerDetailed.value.right.unit,
   ],
   () => {
-    if (isUpdatingFromStore || !marginInnerExpanded.value || isSyncingFromSimple) return;
+    if (isUpdatingFromStore) return;
     immediateUpdate(() => {
-      removeShorthandPadding(); // Remove shorthand property first
+      // TODO: implement margin inner detailed update
-      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({
@@ -961,167 +744,5 @@ 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>