From fa56118e751769f9d586cca8525634ae7c57b712 Mon Sep 17 00:00:00 2001
From: Julie Blanc <julieblanc@Julies-MacBook-Pro.local>
Date: Thu, 5 Mar 2026 14:49:58 +0100
Subject: [PATCH] toggle all values

---
 .gitignore                             |   2 +
 src/components/ElementPopup.vue        | 461 +++++++++++++++++++------
 src/components/editor/TextSettings.vue |   5 +-
 src/composables/useTextDefaults.js     |  14 +
 4 files changed, 376 insertions(+), 106 deletions(-)
 create mode 100644 src/composables/useTextDefaults.js

diff --git a/.gitignore b/.gitignore
index 6dc4bf3..5972a0f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,5 @@ api/.env
 # Claude settings
 .claude
 /.claude/*
+
+doc-conception.md
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index a23f2e1..d469d6d 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -17,19 +17,20 @@
 
     <template #controls>
       <!-- Font Family -->
-      <div class="settings-subsection">
-        <div class="field field-font" >
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.font }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
+        <div class="field field-font">
           <label class="label-with-tooltip" data-css="font-family">Police</label>
           <div class="field-font__options">
-            <select v-model="fontFamily" >
+            <select v-model="fontFamily">
               <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
             </select>
             <div class="field-checkbox">
-              <input type="checkbox" v-model="italic"  />
+              <input type="checkbox" v-model="italic" />
               <label class="label-with-tooltip" data-css="font-style">Italique</label>
             </div>
             <div class="field-checkbox">
-              <input type="checkbox" v-model="bold"  />
+              <input type="checkbox" v-model="bold" />
               <label class="label-with-tooltip" data-css="font-weight">Gras</label>
             </div>
           </div>
@@ -37,8 +38,9 @@
       </div>
 
       <!-- Font Size -->
-      <div class="settings-subsection">
-        <div class="field field-text-size" >
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.fontSize }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
+        <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
           <InputWithUnit
             v-model="fontSizeModel"
@@ -50,10 +52,10 @@
         </div>
       </div>
 
-
       <!-- LineHeight -->
-      <div class="settings-subsection">
-        <div class="field field-text-size" >
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.lineHeight }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
+        <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
           <InputWithUnit
             v-model="lineHeightModel"
@@ -65,12 +67,12 @@
         </div>
       </div>
 
-
       <!-- Text Alignment -->
-      <div class="settings-subsection">
-        <div class="field" >
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.textAlign }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.textAlign" @change="onToggleSetting('textAlign', $event.target.checked)" />
+        <div class="field">
           <label class="label-with-tooltip" data-css="text-align">Alignement</label>
-          <select v-model="textAlign" >
+          <select v-model="textAlign">
             <option value="left">Gauche</option>
             <option value="center">Centre</option>
             <option value="right">Droite</option>
@@ -79,11 +81,44 @@
         </div>
       </div>
 
+      <!-- Color -->
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.color }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
+        <div class="field field-simple">
+          <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
+          <div class="input-with-color">
+            <input
+              ref="colorInput"
+              type="text"
+              v-model="color"
+              data-coloris
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Background -->
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.background }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.background" @change="onToggleSetting('background', $event.target.checked)" />
+        <div class="field field-simple">
+          <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
+          <div class="input-with-color">
+            <input
+              ref="backgroundInput"
+              type="text"
+              v-model="background"
+              data-coloris
+            />
+          </div>
+        </div>
+      </div>
+
       <!-- Bordure -->
-      <div class="settings-subsection">
-        <div class="field field-border" >
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.border }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.border" @change="onToggleSetting('border', $event.target.checked)" />
+        <div class="field field-border">
           <div class="settings-subsection-header">
-          <label class="label-with-tooltip" data-css="border">Bordure</label>
+            <label class="label-with-tooltip" data-css="border">Bordure</label>
           </div>
           <div class="field-border__options">
             <div class="field-border__option">
@@ -93,15 +128,15 @@
                   v-model="borderWidth.value"
                   :min="0"
                   :step="1"
-                                 />
+                />
                 <div class="unit-toggle">
-                  <button type="button" class="active" >px</button>
+                  <button type="button" class="active">px</button>
                 </div>
               </div>
             </div>
             <div class="field-border__option">
               <label class="label-with-tooltip" data-css="border-style">Style</label>
-              <select v-model="borderStyle" >
+              <select v-model="borderStyle">
                 <option value="solid">Plein</option>
                 <option value="dotted">Pointillés</option>
                 <option value="dashed">Tirets</option>
@@ -115,7 +150,7 @@
                   ref="borderColorInput"
                   type="text"
                   v-model="borderColor"
-                                   data-coloris
+                  data-coloris
                 />
               </div>
             </div>
@@ -123,45 +158,16 @@
         </div>
       </div>
 
-      <!-- Color -->
-      <div class="settings-subsection">
-        <div class="field field-simple" >
-          <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
-          <div class="input-with-color">
-            <input
-              ref="colorInput"
-              type="text"
-              v-model="color"
-                           data-coloris
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Background -->
-      <div class="settings-subsection">
-        <div class="field field-simple" >
-          <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
-          <div class="input-with-color">
-            <input
-              ref="backgroundInput"
-              type="text"
-              v-model="background"
-                           data-coloris
-            />
-          </div>
-        </div>
-      </div>
-
       <!-- Outer Margins -->
-      <div class="settings-subsection">
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.margin }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.margin" @change="onToggleSetting('margin', $event.target.checked)" />
         <div class="settings-subsection-header">
           <span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
           <button
             type="button"
             class="lock-toggle"
             :class="{ locked: marginLocked }"
-                       @click="marginLocked = !marginLocked"
+            @click="marginLocked = !marginLocked"
             :title="marginLocked ? 'Déverrouiller (modifier indépendamment)' : 'Verrouiller (modifier ensemble)'"
           >
             <svg v-if="marginLocked" width="11" height="13" viewBox="0 0 11 13" fill="none">
@@ -178,25 +184,25 @@
           v-for="side in sides"
           :key="side.key"
           class="field field-margin"
-                 >
+        >
           <label class="label-with-tooltip" :data-css="`margin-${side.key}`">{{ side.label }}</label>
           <div class="input-with-unit">
             <NumberInput
               :modelValue="margin[side.key].value"
               :min="0"
               :step="1"
-                           @update:modelValue="(v) => updateMarginValue(side.key, v)"
+              @update:modelValue="(v) => updateMarginValue(side.key, v)"
             />
             <div class="unit-toggle">
               <button
                 type="button"
                 :class="{ active: margin[side.key].unit === 'mm' }"
-                               @click="updateMarginUnit(side.key, 'mm')"
+                @click="updateMarginUnit(side.key, 'mm')"
               >mm</button>
               <button
                 type="button"
                 :class="{ active: margin[side.key].unit === 'px' }"
-                               @click="updateMarginUnit(side.key, 'px')"
+                @click="updateMarginUnit(side.key, 'px')"
               >px</button>
             </div>
           </div>
@@ -204,14 +210,15 @@
       </div>
 
       <!-- Inner Margins (Padding) -->
-      <div class="settings-subsection">
+      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.padding }">
+        <input type="checkbox" class="toggle-setting" :checked="settingEnabled.padding" @change="onToggleSetting('padding', $event.target.checked)" />
         <div class="settings-subsection-header">
           <span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
           <button
             type="button"
             class="lock-toggle"
             :class="{ locked: paddingLocked }"
-                       @click="paddingLocked = !paddingLocked"
+            @click="paddingLocked = !paddingLocked"
             :title="paddingLocked ? 'Déverrouiller (modifier indépendamment)' : 'Verrouiller (modifier ensemble)'"
           >
             <svg v-if="paddingLocked" width="11" height="13" viewBox="0 0 11 13" fill="none">
@@ -228,25 +235,25 @@
           v-for="side in sides"
           :key="side.key"
           class="field field-margin"
-                 >
+        >
           <label class="label-with-tooltip" :data-css="`padding-${side.key}`">{{ side.label }}</label>
           <div class="input-with-unit">
             <NumberInput
               :modelValue="padding[side.key].value"
               :min="0"
               :step="1"
-                           @update:modelValue="(v) => updatePaddingValue(side.key, v)"
+              @update:modelValue="(v) => updatePaddingValue(side.key, v)"
             />
             <div class="unit-toggle">
               <button
                 type="button"
                 :class="{ active: padding[side.key].unit === 'mm' }"
-                               @click="updatePaddingUnit(side.key, 'mm')"
+                @click="updatePaddingUnit(side.key, 'mm')"
               >mm</button>
               <button
                 type="button"
                 :class="{ active: padding[side.key].unit === 'px' }"
-                               @click="updatePaddingUnit(side.key, 'px')"
+                @click="updatePaddingUnit(side.key, 'px')"
               >px</button>
             </div>
           </div>
@@ -260,12 +267,16 @@
 import { ref, reactive, computed, watch, nextTick } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import { useDebounce } from '../composables/useDebounce';
+import { useCssSync } from '../composables/useCssSync';
+import { useTextDefaults } from '../composables/useTextDefaults';
 import NumberInput from './ui/NumberInput.vue';
 import InputWithUnit from './ui/InputWithUnit.vue';
 import BasePopup from './ui/BasePopup.vue';
 import { convertUnit } from '../utils/unit-conversion';
 
 const stylesheetStore = useStylesheetStore();
+const { extractValue: cssExtractValue, extractNumericValue } = useCssSync();
+const textDefaults = useTextDefaults();
 
 const props = defineProps({
   iframeRef: Object,
@@ -296,7 +307,13 @@ const color = ref('rgb(0, 0, 0)');
 const background = ref('transparent');
 const fontSize = reactive({ value: 23, unit: 'px' });
 const fontSizeModel = computed({
-  get: () => ({ value: fontSize.value, unit: fontSize.unit }),
+  get: () => {
+    if (!settingEnabled.fontSize) {
+      // When disabled, display TextSettings' current value reactively
+      return { ...textDefaults.fontSize };
+    }
+    return { value: fontSize.value, unit: fontSize.unit };
+  },
   set: (v) => { fontSize.value = v.value; fontSize.unit = v.unit; },
 });
 const lineHeight = reactive({ value: 28, unit: 'px' });
@@ -304,7 +321,7 @@ const lineHeightModel = computed({
   get: () => ({ value: lineHeight.value, unit: lineHeight.unit }),
   set: (v) => { lineHeight.value = v.value; lineHeight.unit = v.unit; },
 });
-const borderWidth = reactive({ value: 0, unit: 'px' });
+const borderWidth = reactive({ value: 1, unit: 'px' });
 const borderStyle = ref('solid');
 const borderColor = ref('#000000');
 
@@ -324,25 +341,47 @@ const padding = reactive({
   left: { value: 0, unit: 'mm' },
 });
 
+// Cache for special groups values when unchecked (to restore on re-check)
+const settingCache = reactive({
+  font: null,     // { fontFamily, italic, bold }
+  fontSize: null, // { value, unit }
+  color: null,    // string
+});
+
+// Per-subsection toggle state
+// Special groups (font, fontSize, color): checked by default
+// Other groups: unchecked by default
+const settingEnabled = reactive({
+  font: true,
+  fontSize: true,
+  lineHeight: false,
+  textAlign: false,
+  color: true,
+  background: false,
+  border: false,
+  margin: false,
+  padding: false,
+});
+
 // Constants
 const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
 
-// Style property descriptors
+// Style property descriptors (with group field)
 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: () => bold.value ? 'bold' : 'normal', set: v => bold.value = v === 'bold' || parseInt(v) >= 700, 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 },
-  { css: 'border-style', get: () => borderStyle.value, set: v => borderStyle.value = v || 'solid', debounce: false },
-  { css: 'border-color', get: () => borderColor.value, set: v => borderColor.value = v, debounce: true },
+  { css: 'font-family', group: 'font', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false },
+  { css: 'font-style', group: 'font', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false, skipWhenDefault: v => v !== 'italic' },
+  { css: 'font-weight', group: 'font', get: () => bold.value ? 'bold' : 'normal', set: v => bold.value = v === 'bold' || parseInt(v) >= 700, debounce: false, skipWhenDefault: v => v === 'normal' },
+  { css: 'text-align', group: 'textAlign', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false },
+  { css: 'color', group: 'color', get: () => color.value, set: v => color.value = v, debounce: true },
+  { css: 'background', group: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
+  { css: 'border-style', group: 'border', get: () => borderStyle.value, set: v => borderStyle.value = v || 'solid', debounce: false },
+  { css: 'border-color', group: 'border', get: () => borderColor.value, set: v => borderColor.value = v, debounce: true },
 ];
 
 const unitProps = [
-  { css: 'font-size', ref: fontSize, debounce: true },
-  { css: 'line-height', ref: lineHeight, debounce: true },
-  { css: 'border-width', ref: borderWidth, debounce: true },
+  { css: 'font-size', group: 'fontSize', ref: fontSize, debounce: true },
+  { css: 'line-height', group: 'lineHeight', ref: lineHeight, debounce: true },
+  { css: 'border-width', group: 'border', ref: borderWidth, debounce: true },
 ];
 
 const sides = [
@@ -392,17 +431,50 @@ const updatePaddingUnit = (side, unit) => {
   }
 };
 
+// CSS properties covered by each group
+const settingGroups = {
+  font:      ['font-family', 'font-style', 'font-weight'],
+  fontSize:  ['font-size'],
+  lineHeight:['line-height'],
+  textAlign: ['text-align'],
+  color:     ['color'],
+  background:['background'],
+  border:    ['border-width', 'border-style', 'border-color'],
+  margin:    ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+  padding:   ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+};
+
+// Remove CSS properties from the element's custom CSS block
+const removeProps = (cssProps) => {
+  if (!selector.value) return;
+
+  const block = stylesheetStore.extractBlock(selector.value);
+  if (!block || !stylesheetStore.customCss.includes(block)) return;
+
+  let newBlock = block;
+  for (const prop of cssProps) {
+    const escaped = prop.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    newBlock = newBlock.replace(
+      new RegExp('[ \\t]*' + escaped + '\\s*:[^;]*;[ \\t]*\\n?', 'g'),
+      ''
+    );
+  }
+
+  // If the block is now empty, remove it entirely
+  const inner = newBlock.replace(/^[^{]*\{/, '').replace(/\}[^}]*$/, '');
+  if (!inner.trim()) {
+    stylesheetStore.replaceInCustomCss(block, '');
+  } else {
+    stylesheetStore.replaceBlock(block, newBlock);
+  }
+};
+
 // 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 updateUnitPropUnit = (prop, newUnit) => {
-  prop.value = convertUnit(prop.value, prop.unit, newUnit);
-  prop.unit = newUnit;
-};
-
 const getSelectorFromElement = (element) => {
   if (element.id) {
     return `#${element.id}`;
@@ -441,6 +513,7 @@ const generatePreviewCss = () => {
   const properties = [];
 
   for (const prop of styleProps) {
+    if (!settingEnabled[prop.group]) continue;
     const val = prop.get();
     if (!val) continue;
     if (prop.css === 'font-style' && val !== 'italic') continue;
@@ -450,19 +523,25 @@ const generatePreviewCss = () => {
   }
 
   for (const prop of unitProps) {
+    if (!settingEnabled[prop.group]) continue;
     if (prop.ref.value !== undefined && prop.ref.value !== null) {
       properties.push(`  ${prop.css}: ${prop.ref.value}${prop.ref.unit};`);
     }
   }
 
-  for (const side of ['top', 'right', 'bottom', 'left']) {
-    if (margin[side].value !== undefined && margin[side].value !== null) {
-      properties.push(`  margin-${side}: ${margin[side].value}${margin[side].unit};`);
+  if (settingEnabled.margin) {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      if (margin[side].value !== undefined && margin[side].value !== null) {
+        properties.push(`  margin-${side}: ${margin[side].value}${margin[side].unit};`);
+      }
     }
   }
-  for (const side of ['top', 'right', 'bottom', 'left']) {
-    if (padding[side].value !== undefined && padding[side].value !== null) {
-      properties.push(`  padding-${side}: ${padding[side].value}${padding[side].unit};`);
+
+  if (settingEnabled.padding) {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      if (padding[side].value !== undefined && padding[side].value !== null) {
+        properties.push(`  padding-${side}: ${padding[side].value}${padding[side].unit};`);
+      }
     }
   }
 
@@ -476,38 +555,109 @@ const displayedCss = computed(() => {
   return elementCss.value || generatePreviewCss();
 });
 
-const applyAllStyles = () => {
+// Apply all properties for a given group to the stylesheet
+const applyGroup = (group) => {
   if (!selector.value) return;
+
   for (const prop of styleProps) {
+    if (prop.group !== group) continue;
+    if (prop.skipWhenDefault && prop.skipWhenDefault(prop.get())) continue;
     updateProp(prop.css, prop.get());
   }
   for (const prop of unitProps) {
-    updateProp(prop.css, prop.ref.value, prop.ref.unit);
+    if (prop.group === group) updateProp(prop.css, prop.ref.value, prop.ref.unit);
   }
-  for (const side of ['top', 'right', 'bottom', 'left']) {
-    updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
-    updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
+  if (group === 'margin') {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
+    }
+  }
+  if (group === 'padding') {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
+    }
   }
 };
 
-// Watchers — simple props
+// Apply all currently-enabled groups to keep the CSS block consistent
+const applyAllEnabledGroups = () => {
+  for (const group of Object.keys(settingEnabled)) {
+    if (settingEnabled[group]) applyGroup(group);
+  }
+};
+
+// When unchecking a special group: save element value, load TextSettings fallback for display
+const saveToCacheAndLoadFallback = (group) => {
+  if (group === 'fontSize') {
+    settingCache.fontSize = { value: fontSize.value, unit: fontSize.unit };
+    // Display is handled reactively by fontSizeModel computed
+  } else if (group === 'font') {
+    settingCache.font = { fontFamily: fontFamily.value, italic: italic.value, bold: bold.value };
+    const ff = cssExtractValue('body', 'font-family');
+    if (ff) fontFamily.value = ff.replace(/['"]/g, '');
+    const fs = cssExtractValue('p', 'font-style');
+    if (fs) italic.value = fs === 'italic';
+    const fw = cssExtractValue('p', 'font-weight');
+    if (fw) bold.value = fw === 'bold' || parseInt(fw) >= 700;
+  } else if (group === 'color') {
+    settingCache.color = color.value;
+    const c = cssExtractValue('body', 'color');
+    if (c) color.value = c;
+  }
+};
+
+// When re-checking a special group: restore cached element value
+const restoreFromCache = (group) => {
+  if (group === 'fontSize' && settingCache.fontSize) {
+    fontSize.value = settingCache.fontSize.value;
+    fontSize.unit = settingCache.fontSize.unit;
+    settingCache.fontSize = null;
+  } else if (group === 'font' && settingCache.font) {
+    fontFamily.value = settingCache.font.fontFamily;
+    italic.value = settingCache.font.italic;
+    bold.value = settingCache.font.bold;
+    settingCache.font = null;
+  } else if (group === 'color' && settingCache.color !== null) {
+    color.value = settingCache.color;
+    settingCache.color = null;
+  }
+};
+
+// Toggle a setting group on/off
+const onToggleSetting = (group, enabled) => {
+  settingEnabled[group] = enabled;
+  if (enabled) {
+    isUpdatingFromStore = true;
+    restoreFromCache(group);
+    isUpdatingFromStore = false;
+    applyAllEnabledGroups();
+  } else {
+    saveToCacheAndLoadFallback(group);
+    removeProps(settingGroups[group]);
+  }
+};
+
+// Watchers — simple props (with group guard)
 for (const prop of styleProps) {
   watch(prop.get, () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled[prop.group]) return;
     const fn = () => updateProp(prop.css, prop.get());
     prop.debounce ? debouncedUpdate(fn) : fn();
   });
 }
 
-// Watchers — unit props (watch both value and unit)
+// Watchers — unit props (with group guard)
 for (const prop of unitProps) {
   watch(() => prop.ref.value, () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled[prop.group]) return;
     const fn = () => updateProp(prop.css, prop.ref.value, prop.ref.unit);
     prop.debounce ? debouncedUpdate(fn) : fn();
   });
   watch(() => prop.ref.unit, () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled[prop.group]) return;
     updateProp(prop.css, prop.ref.value, prop.ref.unit);
   });
 }
@@ -517,6 +667,7 @@ watch(
   () => [margin.top.value, margin.right.value, margin.bottom.value, margin.left.value],
   () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled.margin) return;
     debouncedUpdate(() => {
       for (const side of ['top', 'right', 'bottom', 'left']) {
         updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
@@ -528,6 +679,7 @@ watch(
   () => [margin.top.unit, margin.right.unit, margin.bottom.unit, margin.left.unit],
   () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled.margin) return;
     for (const side of ['top', 'right', 'bottom', 'left']) {
       updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
     }
@@ -539,6 +691,7 @@ watch(
   () => [padding.top.value, padding.right.value, padding.bottom.value, padding.left.value],
   () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled.padding) return;
     debouncedUpdate(() => {
       for (const side of ['top', 'right', 'bottom', 'left']) {
         updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
@@ -550,6 +703,7 @@ watch(
   () => [padding.top.unit, padding.right.unit, padding.bottom.unit, padding.left.unit],
   () => {
     if (isUpdatingFromStore) return;
+    if (!settingEnabled.padding) return;
     for (const side of ['top', 'right', 'bottom', 'left']) {
       updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
     }
@@ -587,16 +741,46 @@ watch(
   }
 );
 
-const loadValuesFromStylesheet = () => {
+const loadValuesFromStylesheet = (isInitialLoad = false) => {
   if (!selector.value) return;
 
+  if (isInitialLoad) {
+    // Reset settingEnabled to defaults only on initial open
+    settingEnabled.font = true;
+    settingEnabled.fontSize = true;
+    settingEnabled.lineHeight = false;
+    settingEnabled.textAlign = false;
+    settingEnabled.color = true;
+    settingEnabled.background = false;
+    settingEnabled.border = false;
+    settingEnabled.margin = false;
+    settingEnabled.padding = false;
+  }
+
+  const groupsFound = new Set();
+
+  // Only detect settingEnabled from the custom CSS block (not baseCss fallback)
+  const customCssBlock = (() => {
+    const css = stylesheetStore.customCss;
+    if (!css) return '';
+    const escaped = selector.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const match = new RegExp(escaped + '\\s*\\{([^}]*)\\}').exec(css);
+    return match ? match[1] : '';
+  })();
+  const isInCustomCss = (cssProp) =>
+    customCssBlock.includes(cssProp + ':') || customCssBlock.includes(cssProp + ' :');
+
   try {
     // 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);
+        if (isInCustomCss(prop.css)) groupsFound.add(prop.group);
+        // During live sync, don't overwrite refs for disabled groups (they show cached/fallback values)
+        if (isInitialLoad || settingEnabled[prop.group]) {
+          const value = typeof data === 'string' ? data : data.value;
+          prop.set(value);
+        }
       }
     }
 
@@ -604,8 +788,11 @@ const loadValuesFromStylesheet = () => {
     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;
+        if (isInCustomCss(prop.css)) groupsFound.add(prop.group);
+        if (isInitialLoad || settingEnabled[prop.group]) {
+          prop.ref.value = data.value;
+          prop.ref.unit = data.unit;
+        }
       }
     }
 
@@ -617,18 +804,20 @@ const loadValuesFromStylesheet = () => {
       if (data && data.value !== undefined) {
         margin[side].value = data.value;
         margin[side].unit = data.unit;
-        anyMarginFound = true;
+        if (isInCustomCss(`margin-${side}`)) anyMarginFound = true;
       }
     }
-    if (!anyMarginFound) {
+    if (!anyMarginFound && isInCustomCss('margin')) {
       const data = stylesheetStore.extractValue(selector.value, 'margin');
       if (data && data.value !== undefined) {
         for (const side of spacingSides) {
           margin[side].value = data.value;
           margin[side].unit = data.unit;
         }
+        anyMarginFound = true;
       }
     }
+    if (anyMarginFound) groupsFound.add('margin');
 
     // Padding sides — try individual first, fallback to shorthand
     let anyPaddingFound = false;
@@ -637,24 +826,71 @@ const loadValuesFromStylesheet = () => {
       if (data && data.value !== undefined) {
         padding[side].value = data.value;
         padding[side].unit = data.unit;
-        anyPaddingFound = true;
+        if (isInCustomCss(`padding-${side}`)) anyPaddingFound = true;
       }
     }
-    if (!anyPaddingFound) {
+    if (!anyPaddingFound && isInCustomCss('padding')) {
       const data = stylesheetStore.extractValue(selector.value, 'padding');
       if (data && data.value !== undefined) {
         for (const side of spacingSides) {
           padding[side].value = data.value;
           padding[side].unit = data.unit;
         }
+        anyPaddingFound = true;
       }
     }
+    if (anyPaddingFound) groupsFound.add('padding');
+
+    // Update settingEnabled based on what was found in the element's CSS
+    if (isInitialLoad) {
+      for (const group of ['lineHeight', 'textAlign', 'background', 'border', 'margin', 'padding']) {
+        settingEnabled[group] = groupsFound.has(group);
+      }
+    } else {
+      // During live sync: only enable groups newly found in CSS, never override user's manual toggles
+      for (const group of Object.keys(settingEnabled)) {
+        if (groupsFound.has(group)) settingEnabled[group] = true;
+      }
+    }
+
+    // Special groups: font, fontSize, color — always enabled
+    // If not found in element CSS, load fallback values from TextSettings selectors
+    // Only on initial open — during live sync, ElementPopup is independent from TextSettings
+    if (isInitialLoad) {
+      if (!groupsFound.has('font')) {
+        const ff = stylesheetStore.extractValue('body', 'font-family');
+        if (ff) fontFamily.value = (typeof ff === 'string' ? ff : ff.value).replace(/['"]/g, '');
+        const fs = stylesheetStore.extractValue('p', 'font-style');
+        if (fs) italic.value = (typeof fs === 'string' ? fs : fs.value) === 'italic';
+        const fw = stylesheetStore.extractValue('p', 'font-weight');
+        if (fw) { const v = typeof fw === 'string' ? fw : fw.value; bold.value = v === 'bold' || parseInt(v) >= 700; }
+      }
+
+      if (!groupsFound.has('fontSize')) {
+        const data = stylesheetStore.extractValue('p', 'font-size');
+        if (data && data.value !== undefined) {
+          fontSize.value = data.value;
+          fontSize.unit = data.unit;
+        }
+      }
+
+      if (!groupsFound.has('color')) {
+        const c = stylesheetStore.extractValue('body', 'color');
+        if (c) color.value = typeof c === 'string' ? c : c.value;
+      }
+    }
+
   } catch (error) {
     console.error('Error loading values from stylesheet:', error);
   }
 };
 
 const open = (element, event, count = null) => {
+  // Clear cache from any previous element
+  settingCache.font = null;
+  settingCache.fontSize = null;
+  settingCache.color = null;
+
   isUpdatingFromStore = true;
 
   selectedElement.value = element;
@@ -662,7 +898,7 @@ const open = (element, event, count = null) => {
 
   elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
 
-  loadValuesFromStylesheet();
+  loadValuesFromStylesheet(true);
   basePopup.value.open(event);
 
   nextTick(() => { isUpdatingFromStore = false; });
@@ -717,6 +953,21 @@ defineExpose({ handleIframeClick, close, visible });
   margin-bottom: 0.25rem;
 }
 
+/* Toggle setting checkbox */
+.toggle-setting {
+  display: block;
+  margin-bottom: 0.25rem;
+  cursor: pointer;
+  accent-color: var(--color-purple, #7c3aed);
+}
+
+/* Disabled state: grey out fields but keep checkbox interactive */
+.setting-disabled .field,
+.setting-disabled .settings-subsection-header {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
 .lock-toggle {
   display: flex;
   align-items: center;
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 72d0900..1698106 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -71,10 +71,12 @@ import InputWithUnit from '../ui/InputWithUnit.vue';
 import { useCssUpdater } from '../../composables/useCssUpdater';
 import { useCssSync } from '../../composables/useCssSync';
 import { useDebounce } from '../../composables/useDebounce';
+import { useTextDefaults } from '../../composables/useTextDefaults';
 
 const { updateStyle } = useCssUpdater();
 const { extractValue, extractNumericValue } = useCssSync();
 const { debouncedUpdate } = useDebounce(500);
+const textDefaults = useTextDefaults();
 
 // Constants
 const fonts = ['Alegreya Sans', 'Arial', 'Georgia', 'Helvetica', 'Times New Roman'];
@@ -112,11 +114,12 @@ watch(bold, (val) => {
 });
 
 watch(fontSize, (val) => {
+  textDefaults.fontSize = { value: val.value, unit: val.unit };
   if (isUpdatingFromStore) return;
   debouncedUpdate(() => {
     updateStyle('p', 'font-size', `${val.value}${val.unit}`);
   });
-}, { deep: true });
+}, { deep: true, immediate: true });
 
 
 // Sync from store
diff --git a/src/composables/useTextDefaults.js b/src/composables/useTextDefaults.js
new file mode 100644
index 0000000..a61eb48
--- /dev/null
+++ b/src/composables/useTextDefaults.js
@@ -0,0 +1,14 @@
+import { reactive } from 'vue';
+
+// Singleton reactive — TextSettings writes here, ElementPopup reads when disabled
+const defaults = reactive({
+  fontSize: { value: 16, unit: 'px' },
+  fontFamily: 'Alegreya Sans',
+  italic: false,
+  bold: false,
+  color: 'rgb(0, 0, 0)',
+});
+
+export function useTextDefaults() {
+  return defaults;
+}