From f3c71320444771d36b9f847e061f99091cffe100 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 26 Feb 2026 15:47:58 +0100
Subject: [PATCH] refactor: simplify ElementPopup with flat refs and style
 descriptors

Flatten ref({ value }) to simple ref(), replace 9 updateX functions with
a generic updateProp driven by descriptor arrays, and loop over descriptors
in generatePreviewCss/loadValuesFromStylesheet/applyAllStyles. Remove
trivial passthrough computed properties. (-123 lines)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../.regenerate-map-image                     |   1 +
 .../1_marker-1769700434/marker.txt            |  10 +-
 .../5_test-avec-geoformat/narrative.txt       |   2 +-
 src/components/ElementPopup.vue               | 358 ++++++------------
 4 files changed, 129 insertions(+), 242 deletions(-)
 create mode 100644 public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image

diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image
new file mode 100644
index 0000000..26754c9
--- /dev/null
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image
@@ -0,0 +1 @@
+1772115179
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
index d3d9d07..3de6739 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
@@ -2,7 +2,11 @@ Title: Nîmes
 
 ----
 
-Content: 
+Cover: 
+
+----
+
+Text: [{"content":{"text":"<p>Nisi nec morbi diam tortor quis interdum fusce quisque sit aliquam scelerisque a vivamus gravida id eros nisl tortor commodo amet mi quis tincidunt metus.</p><p>Congue proin urna eget quisque sem a fusce felis eros purus hendrerit facilisis hendrerit metus accumsan metus nec eu cursus elementum maecenas ut scelerisque sit.</p>"},"id":"1adbada8-6dee-4ab4-b33b-d914d4806b70","isHidden":false,"type":"text"}]
 
 ----
 
@@ -22,4 +26,8 @@ Markericonsize: 40
 
 ----
 
+Content: 
+
+----
+
 Uuid: lajqvh51bnvty5xr
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
index 0603546..3648b80 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
@@ -6,7 +6,7 @@ Author: Mélina Vuillaumier
 
 ----
 
-Cover: 
+Cover: - file://gw2bzdqno3enn1in
 
 ----
 
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index d25c755..1b7c329 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -11,8 +11,8 @@
     @toggle-inheritance="toggleInheritance"
   >
     <template #header-left>
-      <span class="element-label">{{ selectorTag }}</span>
-      <span class="instance-count">{{ instanceCount }} instances</span>
+      <span class="element-label">{{ selector || '' }}</span>
+      <span class="instance-count">{{ elementInstanceCount }} instances</span>
     </template>
 
     <template #controls>
@@ -21,11 +21,11 @@
         <div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
           <label class="label-with-tooltip" data-css="font-family">Police</label>
           <div class="field-with-option">
-            <select v-model="fontFamily.value" :disabled="inheritanceLocked">
+            <select v-model="fontFamily" :disabled="inheritanceLocked">
               <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
             </select>
             <div class="field-checkbox">
-              <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
+              <input type="checkbox" v-model="italic" :disabled="inheritanceLocked" />
               <label class="label-with-tooltip" data-css="font-style">Italique</label>
             </div>
           </div>
@@ -56,7 +56,7 @@
                 type="button"
                 :class="{ active: fontSize.unit === 'px' }"
                 :disabled="inheritanceLocked"
-                @click="updateFontSizeUnit('px')"
+                @click="updateUnitPropUnit(fontSize, 'px')"
               >
                 px
               </button>
@@ -69,7 +69,7 @@
       <div class="settings-subsection">
         <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
           <label class="label-with-tooltip" data-css="text-align">Alignement</label>
-          <select v-model="textAlign.value" :disabled="inheritanceLocked">
+          <select v-model="textAlign" :disabled="inheritanceLocked">
             <option value="left">Gauche</option>
             <option value="center">Centre</option>
             <option value="right">Droite</option>
@@ -86,7 +86,7 @@
             <input
               ref="colorInput"
               type="text"
-              v-model="color.value"
+              v-model="color"
               :disabled="inheritanceLocked"
               data-coloris
             />
@@ -102,7 +102,7 @@
             <input
               ref="backgroundInput"
               type="text"
-              v-model="background.value"
+              v-model="background"
               :disabled="inheritanceLocked"
               data-coloris
             />
@@ -126,7 +126,7 @@
                 type="button"
                 :class="{ active: marginOuter.unit === 'mm' }"
                 :disabled="inheritanceLocked"
-                @click="updateMarginOuterUnit('mm')"
+                @click="updateUnitPropUnit(marginOuter, 'mm')"
               >
                 mm
               </button>
@@ -134,7 +134,7 @@
                 type="button"
                 :class="{ active: marginOuter.unit === 'px' }"
                 :disabled="inheritanceLocked"
-                @click="updateMarginOuterUnit('px')"
+                @click="updateUnitPropUnit(marginOuter, 'px')"
               >
                 px
               </button>
@@ -159,7 +159,7 @@
                 type="button"
                 :class="{ active: paddingInner.unit === 'mm' }"
                 :disabled="inheritanceLocked"
-                @click="updatePaddingInnerUnit('mm')"
+                @click="updateUnitPropUnit(paddingInner, 'mm')"
               >
                 mm
               </button>
@@ -167,7 +167,7 @@
                 type="button"
                 :class="{ active: paddingInner.unit === 'px' }"
                 :disabled="inheritanceLocked"
-                @click="updatePaddingInnerUnit('px')"
+                @click="updateUnitPropUnit(paddingInner, 'px')"
               >
                 px
               </button>
@@ -180,7 +180,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, reactive, computed, watch, nextTick } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import { useDebounce } from '../composables/useDebounce';
 import NumberInput from './ui/NumberInput.vue';
@@ -210,46 +210,51 @@ const backgroundInput = ref(null);
 let isUpdatingFromStore = false;
 const { debouncedUpdate } = useDebounce(500);
 
-// Style properties
-const fontFamily = ref({ value: 'Alegreya Sans' });
-const fontStyle = ref({ italic: false });
-const fontWeight = ref({ value: 400 });
-const fontSize = ref({ value: 23, unit: 'px' });
-const textAlign = ref({ value: 'left' });
-const color = ref({ value: 'rgb(0, 0, 0)' });
-const background = ref({ value: 'transparent' });
-const marginOuter = ref({ value: 0, unit: 'mm' });
-const paddingInner = ref({ value: 0, unit: 'mm' });
+// Style properties — flat refs for simple values, reactive for value+unit
+const fontFamily = ref('Alegreya Sans');
+const italic = ref(false);
+const fontWeight = ref(400);
+const textAlign = ref('left');
+const color = ref('rgb(0, 0, 0)');
+const background = ref('transparent');
+const fontSize = reactive({ value: 23, unit: 'px' });
+const marginOuter = reactive({ value: 0, unit: 'mm' });
+const paddingInner = reactive({ value: 0, unit: 'mm' });
 
 // Constants
 const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
 const weights = ['200', '300', '400', '600', '800'];
 
-// Computed to adapt fontWeight for UnitToggle
 const fontWeightString = computed({
-  get: () => String(fontWeight.value.value),
-  set: (val) => {
-    fontWeight.value.value = parseInt(val);
-  }
+  get: () => String(fontWeight.value),
+  set: (val) => { fontWeight.value = parseInt(val); }
 });
 
-const immediateUpdate = (callback) => {
-  callback();
+// Style property descriptors
+const styleProps = [
+  { css: 'font-family', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false },
+  { css: 'font-style', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false },
+  { css: 'font-weight', get: () => fontWeight.value, set: v => fontWeight.value = parseInt(v), debounce: false },
+  { css: 'text-align', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false },
+  { css: 'color', get: () => color.value, set: v => color.value = v, debounce: true },
+  { css: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
+];
+
+const unitProps = [
+  { css: 'font-size', ref: fontSize, debounce: true },
+  { css: 'margin', ref: marginOuter, debounce: true },
+  { css: 'padding', ref: paddingInner, debounce: true },
+];
+
+// Generic update: push a single property to the stylesheet store
+const updateProp = (cssProp, value, unit) => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, cssProp, value, unit);
 };
 
-const updateFontSizeUnit = (newUnit) => {
-  fontSize.value.value = convertUnit(fontSize.value.value, fontSize.value.unit, newUnit);
-  fontSize.value.unit = newUnit;
-};
-
-const updateMarginOuterUnit = (newUnit) => {
-  marginOuter.value.value = convertUnit(marginOuter.value.value, marginOuter.value.unit, newUnit);
-  marginOuter.value.unit = newUnit;
-};
-
-const updatePaddingInnerUnit = (newUnit) => {
-  paddingInner.value.value = convertUnit(paddingInner.value.value, paddingInner.value.unit, newUnit);
-  paddingInner.value.unit = newUnit;
+const updateUnitPropUnit = (prop, newUnit) => {
+  prop.value = convertUnit(prop.value, prop.unit, newUnit);
+  prop.unit = newUnit;
 };
 
 const getSelectorFromElement = (element) => {
@@ -269,62 +274,37 @@ const getSelectorFromElement = (element) => {
   return tagName;
 };
 
-const getInstanceCount = (selector) => {
+const getInstanceCount = (sel) => {
   if (!props.iframeRef || !props.iframeRef.contentDocument) return 0;
 
   try {
-    const elements = props.iframeRef.contentDocument.querySelectorAll(selector);
-    return elements.length;
+    return props.iframeRef.contentDocument.querySelectorAll(sel).length;
   } catch (e) {
     return 0;
   }
 };
 
-const selectorTag = computed(() => {
-  return selector.value || '';
-});
-
-const instanceCount = computed(() => {
-  return elementInstanceCount.value;
-});
-
 const elementCss = computed(() => {
   if (!selector.value) return '';
   return stylesheetStore.extractBlock(selector.value) || '';
 });
 
-// Generate a preview CSS block from current field values
 const generatePreviewCss = () => {
   if (!selector.value) return '';
 
   const properties = [];
 
-  if (fontFamily.value.value) {
-    properties.push(`  font-family: ${fontFamily.value.value};`);
+  for (const prop of styleProps) {
+    const val = prop.get();
+    if (val && (prop.css !== 'font-style' || val === 'italic')) {
+      properties.push(`  ${prop.css}: ${val};`);
+    }
   }
-  if (fontStyle.value.italic) {
-    properties.push(`  font-style: italic;`);
-  }
-  if (fontWeight.value.value) {
-    properties.push(`  font-weight: ${fontWeight.value.value};`);
-  }
-  if (fontSize.value.value) {
-    properties.push(`  font-size: ${fontSize.value.value}${fontSize.value.unit};`);
-  }
-  if (textAlign.value.value) {
-    properties.push(`  text-align: ${textAlign.value.value};`);
-  }
-  if (color.value.value) {
-    properties.push(`  color: ${color.value.value};`);
-  }
-  if (background.value.value) {
-    properties.push(`  background: ${background.value.value};`);
-  }
-  if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
-    properties.push(`  margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
-  }
-  if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
-    properties.push(`  padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
+
+  for (const prop of unitProps) {
+    if (prop.ref.value !== undefined && prop.ref.value !== null) {
+      properties.push(`  ${prop.css}: ${prop.ref.value}${prop.ref.unit};`);
+    }
   }
 
   if (properties.length === 0) return '';
@@ -347,87 +327,37 @@ const displayedCss = computed(() => {
          ' */';
 });
 
-// Update functions for each property
-const updateFontFamily = () => {
-  if (!selector.value || !fontFamily.value.value) return;
-  stylesheetStore.updateProperty(selector.value, 'font-family', fontFamily.value.value);
-};
-
-const updateFontStyle = () => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, 'font-style', fontStyle.value.italic ? 'italic' : 'normal');
-};
-
-const updateFontWeight = () => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, 'font-weight', fontWeight.value.value);
-};
-
-const updateFontSize = () => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, 'font-size', fontSize.value.value, fontSize.value.unit);
-};
-
-const updateTextAlign = () => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, 'text-align', textAlign.value.value);
-};
-
-const updateColor = () => {
-  if (!selector.value || !color.value.value) return;
-  stylesheetStore.updateProperty(selector.value, 'color', color.value.value);
-};
-
-const updateBackground = () => {
-  if (!selector.value || !background.value.value) return;
-  stylesheetStore.updateProperty(selector.value, 'background', background.value.value);
-};
-
-const updateMarginOuter = () => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, 'margin', marginOuter.value.value, marginOuter.value.unit);
-};
-
-const updatePaddingInner = () => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, 'padding', paddingInner.value.value, paddingInner.value.unit);
-};
-
-// Apply all current field values to create/update the CSS block
 const applyAllStyles = () => {
   if (!selector.value) return;
-
-  updateFontFamily();
-  updateFontStyle();
-  updateFontWeight();
-  updateFontSize();
-  updateTextAlign();
-  updateColor();
-  updateBackground();
-  updateMarginOuter();
-  updatePaddingInner();
+  for (const prop of styleProps) {
+    updateProp(prop.css, prop.get());
+  }
+  for (const prop of unitProps) {
+    updateProp(prop.css, prop.ref.value, prop.ref.unit);
+  }
 };
 
-// Helper to reduce watcher boilerplate
-const watchProp = (getter, updateFn, debounce = false) => {
-  watch(getter, () => {
+// Watchers — simple props
+for (const prop of styleProps) {
+  watch(prop.get, () => {
     if (isUpdatingFromStore) return;
-    debounce ? debouncedUpdate(updateFn) : immediateUpdate(updateFn);
+    const fn = () => updateProp(prop.css, prop.get());
+    prop.debounce ? debouncedUpdate(fn) : fn();
   });
-};
+}
 
-watchProp(() => fontFamily.value.value, updateFontFamily);
-watchProp(() => fontStyle.value.italic, updateFontStyle);
-watchProp(() => fontWeight.value.value, updateFontWeight);
-watchProp(() => fontSize.value.value, updateFontSize, true);
-watchProp(() => fontSize.value.unit, updateFontSize);
-watchProp(() => textAlign.value.value, updateTextAlign);
-watchProp(() => color.value.value, updateColor, true);
-watchProp(() => background.value.value, updateBackground, true);
-watchProp(() => marginOuter.value.value, updateMarginOuter, true);
-watchProp(() => marginOuter.value.unit, updateMarginOuter);
-watchProp(() => paddingInner.value.value, updatePaddingInner, true);
-watchProp(() => paddingInner.value.unit, updatePaddingInner);
+// Watchers — unit props (watch both value and unit)
+for (const prop of unitProps) {
+  watch(() => prop.ref.value, () => {
+    if (isUpdatingFromStore) return;
+    const fn = () => updateProp(prop.css, prop.ref.value, prop.ref.unit);
+    prop.debounce ? debouncedUpdate(fn) : fn();
+  });
+  watch(() => prop.ref.unit, () => {
+    if (isUpdatingFromStore) return;
+    updateProp(prop.css, prop.ref.value, prop.ref.unit);
+  });
+}
 
 const handleCssInput = (newCss) => {
   const oldBlock = elementCss.value;
@@ -443,9 +373,7 @@ watch(
     if (basePopup.value?.visible && !isUpdatingFromStore) {
       isUpdatingFromStore = true;
       loadValuesFromStylesheet();
-      nextTick(() => {
-        isUpdatingFromStore = false;
-      });
+      nextTick(() => { isUpdatingFromStore = false; });
     }
   }
 );
@@ -457,9 +385,7 @@ watch(
     if (basePopup.value?.visible && wasEditing && !isEditing && !isUpdatingFromStore) {
       isUpdatingFromStore = true;
       loadValuesFromStylesheet();
-      nextTick(() => {
-        isUpdatingFromStore = false;
-      });
+      nextTick(() => { isUpdatingFromStore = false; });
     }
   }
 );
@@ -468,58 +394,22 @@ const loadValuesFromStylesheet = () => {
   if (!selector.value) return;
 
   try {
-    const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
-    if (fontFamilyData) {
-      const value = typeof fontFamilyData === 'string' ? fontFamilyData : fontFamilyData.value;
-      fontFamily.value.value = value.replace(/['"]/g, '');
+    // Simple props
+    for (const prop of styleProps) {
+      const data = stylesheetStore.extractValue(selector.value, prop.css);
+      if (data) {
+        const value = typeof data === 'string' ? data : data.value;
+        prop.set(value);
+      }
     }
 
-    const fontStyleData = stylesheetStore.extractValue(selector.value, 'font-style');
-    if (fontStyleData) {
-      const value = typeof fontStyleData === 'string' ? fontStyleData : fontStyleData.value;
-      fontStyle.value.italic = value === 'italic';
-    }
-
-    const fontWeightData = stylesheetStore.extractValue(selector.value, 'font-weight');
-    if (fontWeightData) {
-      const value = typeof fontWeightData === 'string' ? fontWeightData : fontWeightData.value;
-      fontWeight.value.value = parseInt(value);
-    }
-
-    const fontSizeData = stylesheetStore.extractValue(selector.value, 'font-size');
-    if (fontSizeData && fontSizeData.value !== undefined) {
-      fontSize.value.value = fontSizeData.value;
-      fontSize.value.unit = fontSizeData.unit;
-    }
-
-    const textAlignData = stylesheetStore.extractValue(selector.value, 'text-align');
-    if (textAlignData) {
-      const value = typeof textAlignData === 'string' ? textAlignData : textAlignData.value;
-      textAlign.value.value = value;
-    }
-
-    const colorData = stylesheetStore.extractValue(selector.value, 'color');
-    if (colorData) {
-      const value = typeof colorData === 'string' ? colorData : colorData.value;
-      color.value.value = value;
-    }
-
-    const backgroundData = stylesheetStore.extractValue(selector.value, 'background');
-    if (backgroundData) {
-      const value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
-      background.value.value = value;
-    }
-
-    const marginData = stylesheetStore.extractValue(selector.value, 'margin');
-    if (marginData && marginData.value !== undefined) {
-      marginOuter.value.value = marginData.value;
-      marginOuter.value.unit = marginData.unit;
-    }
-
-    const paddingData = stylesheetStore.extractValue(selector.value, 'padding');
-    if (paddingData && paddingData.value !== undefined) {
-      paddingInner.value.value = paddingData.value;
-      paddingInner.value.unit = paddingData.unit;
+    // Unit props
+    for (const prop of unitProps) {
+      const data = stylesheetStore.extractValue(selector.value, prop.css);
+      if (data && data.value !== undefined) {
+        prop.ref.value = data.value;
+        prop.ref.unit = data.unit;
+      }
     }
   } catch (error) {
     console.error('Error loading values from stylesheet:', error);
@@ -532,27 +422,15 @@ const open = (element, event, count = null) => {
   selectedElement.value = element;
   selector.value = getSelectorFromElement(element);
 
-  // Store instance count if provided, otherwise calculate it
   elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
 
-  // Detect inheritance state from CSS block state
   const blockState = stylesheetStore.getBlockState(selector.value);
+  basePopup.value.inheritanceLocked = blockState !== 'active';
 
-  if (blockState === 'active') {
-    basePopup.value.inheritanceLocked = false;
-  } else {
-    basePopup.value.inheritanceLocked = true;
-  }
-
-  // Load values from stylesheet (includes commented blocks)
   loadValuesFromStylesheet();
-
-  // Open popup (sets visible, position, inits Coloris)
   basePopup.value.open(event);
 
-  nextTick(() => {
-    isUpdatingFromStore = false;
-  });
+  nextTick(() => { isUpdatingFromStore = false; });
 };
 
 const close = () => {
@@ -586,34 +464,34 @@ const toggleInheritance = () => {
     basePopup.value.inheritanceLocked = false;
   } else if (basePopup.value.inheritanceLocked && blockState === 'none') {
     if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
-      const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
+      const cs = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
 
       isUpdatingFromStore = true;
 
-      fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
-      fontStyle.value.italic = computed.fontStyle === 'italic';
-      fontWeight.value.value = parseInt(computed.fontWeight);
+      fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
+      italic.value = cs.fontStyle === 'italic';
+      fontWeight.value = parseInt(cs.fontWeight);
 
-      const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
+      const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
       if (fontSizeMatch) {
-        fontSize.value.value = parseFloat(fontSizeMatch[1]);
-        fontSize.value.unit = fontSizeMatch[2];
+        fontSize.value = parseFloat(fontSizeMatch[1]);
+        fontSize.unit = fontSizeMatch[2];
       }
 
-      textAlign.value.value = computed.textAlign;
-      color.value.value = computed.color;
-      background.value.value = computed.backgroundColor;
+      textAlign.value = cs.textAlign;
+      color.value = cs.color;
+      background.value = cs.backgroundColor;
 
-      const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
+      const marginMatch = cs.marginTop.match(/([\d.]+)(px|mm|pt)/);
       if (marginMatch) {
-        marginOuter.value.value = parseFloat(marginMatch[1]);
-        marginOuter.value.unit = marginMatch[2];
+        marginOuter.value = parseFloat(marginMatch[1]);
+        marginOuter.unit = marginMatch[2];
       }
 
-      const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
+      const paddingMatch = cs.paddingTop.match(/([\d.]+)(px|mm|pt)/);
       if (paddingMatch) {
-        paddingInner.value.value = parseFloat(paddingMatch[1]);
-        paddingInner.value.unit = paddingMatch[2];
+        paddingInner.value = parseFloat(paddingMatch[1]);
+        paddingInner.unit = paddingMatch[2];
       }
 
       isUpdatingFromStore = false;