feat: refactor popups with shared positioning and CSS tooltips

- Add usePopupPosition composable for smart popup positioning
  (bottom-right → bottom-left → top-right → top-left fallback)
- Refactor ElementPopup with complete controls matching mockup
- Add stylesheet sync: popups initialize from and watch store changes
- Add click-to-close behavior: clicking another element closes popup
- Add CSS property tooltips on all form labels (editor panel + popups)
  with dotted underline and monospace code tooltip on hover
- Add field--view-only class and disabled attribute on locked fields

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

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

public/assets/css/src/_forms.scss

@@ -8,6 +8,41 @@ input[type="number"] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+
+  &::after {
+    content: attr(data-css);
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+    padding: 0.25rem 0.5rem;
+    background: var(--color-browngray-700);
+    color: var(--color-browngray-100);
+    font-family: "Courier New", Courier, monospace;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.15s ease,
+      visibility 0.15s ease;
+    z-index: 10;
+  }
+
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
 .settings-section {
   h2 {
     border-bottom: 1px solid #000;

public/assets/css/style.css

@@ -80,6 +80,38 @@ input[type=number] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700);
+  color: var(--color-browngray-100);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 .settings-section h2 {
   border-bottom: 1px solid #000;
   margin-bottom: var(--space-xs);

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;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;;AIrEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJwEF;AItEE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJsEJ;AInEE;EACE,UAAA;EACA,mBAAA;AJqEJ;;AIhEE;EACE,6BAAA;EACA,8BAAA;AJmEJ;AIjEE;EACE,mDAAA;AJmEJ;AIhEE;EACE,0BAAA;AJkEJ;AIhEI;EACE,8BAAA;AJkEN;AI/DI;EACE,aAAA;AJiEN;AI/DM;;EAEE,UAAA;AJiER;AI9DM;EACE,oCAAA;AJgER;AI7DM;EACE,aAAA;EACA,WAAA;AJ+DR;AI7DQ;EACE,aAAA;EACA,WAAA;AJ+DV;AI3DM;EACE,UAAA;AJ6DR;AI5DQ;EACE,aAAA;AJ8DV;AI7DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJ+DZ;AI5DU;EACE,oBAAA;EACA,WAAA;AJ8DZ;AIxDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ0DN;AIxDM;EACE,WAAA;AJ0DR;AIxDM;EACE,UAAA;AJ0DR;AIxDQ;EACE,UAAA;AJ0DV;AItDU;EACE,UAAA;AJwDZ;;AKjLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALmLF;AKjLE;EACE,sBAAA;EACA,WAAA;ALmLJ;AK/KI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiLN","file":"style.css"}

src/App.vue

@@ -2,6 +2,7 @@
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
+import PagePopup from './components/PagePopup.vue';
 import PreviewLoader from './components/PreviewLoader.vue';
 import { onMounted, ref, watch, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
@@ -11,10 +12,15 @@ const stylesheetStore = useStylesheetStore();
 const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
+const pagePopup = ref(null);
 const activeTab = ref('');
 
 provide('activeTab', activeTab);
 
+// Page interaction state
+const hoveredPage = ref(null);
+const EDGE_THRESHOLD = 30; // px from edge to trigger hover
+
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
 const isTransitioning = ref(false);
@@ -25,6 +31,77 @@ const activeFrame = computed(() => {
     : previewFrame2.value;
 });
 
+// Check if mouse position is near the edges of a page element
+const isNearPageEdge = (pageElement, mouseX, mouseY) => {
+  const rect = pageElement.getBoundingClientRect();
+
+  const nearLeft = mouseX >= rect.left && mouseX <= rect.left + EDGE_THRESHOLD;
+  const nearRight = mouseX >= rect.right - EDGE_THRESHOLD && mouseX <= rect.right;
+  const nearTop = mouseY >= rect.top && mouseY <= rect.top + EDGE_THRESHOLD;
+  const nearBottom = mouseY >= rect.bottom - EDGE_THRESHOLD && mouseY <= rect.bottom;
+
+  const inHorizontalRange = mouseY >= rect.top && mouseY <= rect.bottom;
+  const inVerticalRange = mouseX >= rect.left && mouseX <= rect.right;
+
+  return (
+    (nearLeft && inHorizontalRange) ||
+    (nearRight && inHorizontalRange) ||
+    (nearTop && inVerticalRange) ||
+    (nearBottom && inVerticalRange)
+  );
+};
+
+// Handle mouse movement in iframe
+const handleIframeMouseMove = (event) => {
+  const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
+  let foundPage = null;
+
+  for (const page of pages) {
+    if (isNearPageEdge(page, event.clientX, event.clientY)) {
+      foundPage = page;
+      break;
+    }
+  }
+
+  // Update hover state
+  if (foundPage !== hoveredPage.value) {
+    // Remove highlight from previous page
+    if (hoveredPage.value) {
+      hoveredPage.value.style.outline = '';
+    }
+
+    // Add highlight to new page
+    if (foundPage) {
+      foundPage.style.outline = '2px solid rgba(97, 175, 239, 0.3)';
+    }
+
+    hoveredPage.value = foundPage;
+  }
+};
+
+// Handle click in iframe
+const handleIframeClick = (event) => {
+  const element = event.target;
+
+  // Check if clicking near a page edge
+  if (hoveredPage.value) {
+    event.stopPropagation();
+    pagePopup.value.open(hoveredPage.value, event);
+    elementPopup.value.close();
+    return;
+  }
+
+  // Otherwise handle as element click
+  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
+    elementPopup.value.close();
+    pagePopup.value.close();
+    return;
+  }
+
+  elementPopup.value.handleIframeClick(event);
+  pagePopup.value.close();
+};
+
 const renderPreview = async (shouldReloadFromFile = false) => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
@@ -73,10 +150,9 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   `;
 
   hiddenFrame.onload = () => {
-    hiddenFrame.contentDocument.addEventListener(
-      'click',
-      elementPopup.value.handleIframeClick
-    );
+    // Add event listeners for page and element interactions
+    hiddenFrame.contentDocument.addEventListener('mousemove', handleIframeMouseMove);
+    hiddenFrame.contentDocument.addEventListener('click', handleIframeClick);
 
     // Close Coloris when clicking in the iframe
     hiddenFrame.contentDocument.addEventListener('click', () => {
@@ -151,6 +227,7 @@ onMounted(() => renderPreview(true));
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
+  <PagePopup ref="pagePopup" :iframeRef="activeFrame" />
 </template>
 
 <style>
@@ -168,9 +245,9 @@ onMounted(() => renderPreview(true));
 }
 
 .preview-frame.shifted {
-  margin-left: 19rem;
-  transform: scale(0.7) translateY(-30vh);
-  height: 142vh;
+  margin-left: 17.55rem;
+  transform: scale(0.65) translateY(-40vh);
+  height: 155vh;
 }
 
 .preview-frame:nth-of-type(1) {

src/components/PagePopup.vue

@@ -0,0 +1,807 @@
+<template>
+  <div
+    v-if="visible"
+    id="page-popup"
+    :style="{ top: position.y + 'px', left: position.x + 'px' }"
+  >
+    <div class="popup-header">
+      <div class="header-left">
+        <span class="page-label">@page</span>
+        <span class="page-name">geoformat</span>
+        <span class="page-count">6 pages</span>
+      </div>
+      <button class="close-btn" @click="close">×</button>
+    </div>
+
+    <div class="popup-body">
+      <!-- Left: Controls -->
+      <div class="popup-controls">
+        <!-- Margins -->
+        <div class="settings-subsection">
+          <h4>Marges</h4>
+          <div class="margin-grid">
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-top">Haut</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.top.value"
+                  min="0"
+                  :disabled="inheritanceLocked"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.top.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.top.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.top.unit = 'rem'"
+                  >
+                    rem
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.bottom.value"
+                  min="0"
+                  :disabled="inheritanceLocked"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.bottom.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.bottom.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.bottom.unit = 'rem'"
+                  >
+                    rem
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-left">Gauche</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.left.value"
+                  min="0"
+                  :disabled="inheritanceLocked"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.left.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.left.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.left.unit = 'rem'"
+                  >
+                    rem
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-right">Droite</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.right.value"
+                  min="0"
+                  :disabled="inheritanceLocked"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.right.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.right.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.right.unit = 'rem'"
+                  >
+                    rem
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Background -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
+            <div class="input-with-color">
+              <input
+                ref="backgroundColorInput"
+                type="text"
+                v-model="background.value"
+                :disabled="inheritanceLocked"
+                data-coloris
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Patterns -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="background-image">Motifs</label>
+            <select v-model="pattern" :disabled="inheritanceLocked">
+              <option value="">Choisissez</option>
+              <option value="dots">Points</option>
+              <option value="lines">Lignes</option>
+              <option value="grid">Grille</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Lock/Unlock Inheritance Button -->
+        <div class="settings-subsection">
+          <button class="inheritance-btn" @click="toggleInheritance">
+            <svg
+              v-if="inheritanceLocked"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
+              ></path>
+            </svg>
+            <svg
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
+              ></path>
+            </svg>
+            <span>{{
+              inheritanceLocked
+                ? "Déverrouiller l'héritage"
+                : "Verrouiller l'héritage"
+            }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Right: CSS Editor -->
+      <div class="popup-css">
+        <div class="css-header">
+          <span>CSS</span>
+          <label
+            class="toggle"
+            :class="{ 'field--view-only': inheritanceLocked }"
+          >
+            <span class="toggle-label">Mode édition</span>
+            <input
+              type="checkbox"
+              v-model="isEditable"
+              :disabled="inheritanceLocked"
+            />
+            <span class="toggle-switch"></span>
+          </label>
+        </div>
+        <pre
+          v-if="!isEditable"
+          class="readonly"
+        ><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+        <textarea
+          v-else
+          :value="pageCss"
+          @input="handleCssInput"
+          :disabled="inheritanceLocked"
+          spellcheck="false"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useStylesheetStore } from '../stores/stylesheet';
+import { usePopupPosition } from '../composables/usePopupPosition';
+import Coloris from '@melloware/coloris';
+import '@melloware/coloris/dist/coloris.css';
+import hljs from 'highlight.js/lib/core';
+import css from 'highlight.js/lib/languages/css';
+import 'highlight.js/styles/atom-one-dark.css';
+
+hljs.registerLanguage('css', css);
+
+const stylesheetStore = useStylesheetStore();
+
+const props = defineProps({
+  iframeRef: Object,
+});
+
+const visible = ref(false);
+const position = ref({ x: 0, y: 0 });
+const selectedPageElement = ref(null);
+const isEditable = ref(false);
+const inheritanceLocked = ref(true);
+const backgroundColorInput = ref(null);
+
+let isUpdatingFromStore = false;
+let updateTimer = null;
+
+const margins = ref({
+  top: { value: 6, unit: 'mm' },
+  bottom: { value: 7, unit: 'mm' },
+  left: { value: 6, unit: 'mm' },
+  right: { value: 7, unit: 'mm' },
+});
+
+const background = ref({
+  value: '',
+  format: 'hex',
+});
+
+const pattern = ref('');
+
+const debouncedUpdate = (callback) => {
+  clearTimeout(updateTimer);
+  updateTimer = setTimeout(callback, 1000);
+};
+
+const immediateUpdate = (callback) => {
+  callback();
+};
+
+const POPUP_WIDTH = 550;
+const POPUP_HEIGHT = 600;
+
+const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
+
+const updateMargins = () => {
+  const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
+
+  const currentBlock = stylesheetStore.extractBlock('@page');
+  if (!currentBlock) return;
+
+  const updatedBlock = currentBlock.replace(
+    /(margin:\s*)[^;]+/,
+    `$1${marginValue}`
+  );
+
+  stylesheetStore.content = stylesheetStore.content.replace(
+    currentBlock,
+    updatedBlock
+  );
+};
+
+const updateBackground = () => {
+  if (!background.value.value) return;
+
+  const currentBlock = stylesheetStore.extractBlock('@page');
+  if (!currentBlock) return;
+
+  if (currentBlock.includes('background:')) {
+    const updatedBlock = currentBlock.replace(
+      /(background:\s*)[^;]+/,
+      `$1${background.value.value}`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  } else {
+    const updatedBlock = currentBlock.replace(
+      /(\s*})$/,
+      `  background: ${background.value.value};\n$1`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Watch margin values (number inputs) with debounce
+watch(
+  () => [
+    margins.value.top.value,
+    margins.value.bottom.value,
+    margins.value.left.value,
+    margins.value.right.value,
+  ],
+  () => {
+    if (isUpdatingFromStore) return;
+    debouncedUpdate(updateMargins);
+  }
+);
+
+// Watch margin units (button clicks) without debounce
+watch(
+  () => [
+    margins.value.top.unit,
+    margins.value.bottom.unit,
+    margins.value.left.unit,
+    margins.value.right.unit,
+  ],
+  () => {
+    if (isUpdatingFromStore) return;
+    immediateUpdate(updateMargins);
+  }
+);
+
+// Watch background value with debounce
+watch(
+  () => background.value.value,
+  () => {
+    if (isUpdatingFromStore) return;
+    debouncedUpdate(updateBackground);
+  }
+);
+
+const loadValuesFromStylesheet = () => {
+  try {
+    isUpdatingFromStore = true;
+
+    // Extract margin from @page
+    const marginData = stylesheetStore.extractValue('@page', 'margin');
+    if (marginData) {
+      // Parse margin shorthand (top right bottom left)
+      const marginStr = typeof marginData === 'string' ? marginData : marginData.value;
+      const marginValues = marginStr.split(' ');
+
+      if (marginValues.length === 4) {
+        // Parse each margin value
+        const parseMargin = (value) => {
+          const match = value.match(/^([\d.]+)(\w+)$/);
+          if (match) {
+            return { value: parseFloat(match[1]), unit: match[2] };
+          }
+          return { value: 0, unit: 'mm' };
+        };
+
+        const top = parseMargin(marginValues[0]);
+        const right = parseMargin(marginValues[1]);
+        const bottom = parseMargin(marginValues[2]);
+        const left = parseMargin(marginValues[3]);
+
+        margins.value.top = top;
+        margins.value.right = right;
+        margins.value.bottom = bottom;
+        margins.value.left = left;
+      }
+    }
+
+    // Extract background from @page
+    const backgroundData = stylesheetStore.extractValue('@page', 'background');
+    if (backgroundData) {
+      background.value.value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
+    }
+  } catch (error) {
+    console.error('Error loading values from stylesheet:', error);
+  } finally {
+    isUpdatingFromStore = false;
+  }
+};
+
+const open = (pageElement, event) => {
+  selectedPageElement.value = pageElement;
+  position.value = calculatePosition(event);
+
+  // Add border to the selected page
+  pageElement.style.outline = '2px solid #61afef';
+
+  // Load values from stylesheet
+  loadValuesFromStylesheet();
+
+  visible.value = true;
+
+  // Initialize Coloris after opening
+  setTimeout(() => {
+    Coloris.init();
+    Coloris({
+      el: '[data-coloris]',
+      theme: 'pill',
+      themeMode: 'dark',
+      formatToggle: true,
+      alpha: true,
+      closeButton: true,
+      closeLabel: 'Fermer',
+      clearButton: true,
+      clearLabel: 'Effacer',
+      swatchesOnly: false,
+      inline: false,
+      wrap: true,
+      swatches: [
+        '#264653',
+        '#2a9d8f',
+        '#e9c46a',
+        '#f4a261',
+        '#e76f51',
+        '#d62828',
+        '#023e8a',
+        '#0077b6',
+        '#ffffff',
+        '#000000',
+      ],
+    });
+  }, 0);
+};
+
+const close = () => {
+  // Remove border from the selected page
+  if (selectedPageElement.value) {
+    selectedPageElement.value.style.outline = '';
+    selectedPageElement.value = null;
+  }
+  visible.value = false;
+  isEditable.value = false;
+};
+
+const toggleInheritance = () => {
+  inheritanceLocked.value = !inheritanceLocked.value;
+  // TODO: Implement CSS priority logic when unlocked
+};
+
+const pageCss = computed(() => {
+  return stylesheetStore.extractBlock('@page') || '';
+});
+
+const highlightedCss = computed(() => {
+  if (!pageCss.value) return '';
+  return hljs.highlight(pageCss.value, { language: 'css' }).value;
+});
+
+let cssDebounceTimer = null;
+
+const handleCssInput = (event) => {
+  const newCss = event.target.value;
+
+  if (cssDebounceTimer) {
+    clearTimeout(cssDebounceTimer);
+  }
+
+  cssDebounceTimer = setTimeout(() => {
+    const oldBlock = pageCss.value;
+    if (oldBlock) {
+      stylesheetStore.content = stylesheetStore.content.replace(
+        oldBlock,
+        newCss
+      );
+    }
+  }, 500);
+};
+
+// Watch isEditable to format when exiting edit mode
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
+});
+
+// Watch stylesheet changes to sync values
+watch(
+  () => stylesheetStore.content,
+  () => {
+    if (visible.value && !stylesheetStore.isEditing) {
+      loadValuesFromStylesheet();
+    }
+  }
+);
+
+defineExpose({ open, close, visible });
+</script>
+
+<style scoped>
+#page-popup {
+  position: fixed;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  z-index: 10000;
+  width: 800px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f9f9f9;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.page-label {
+  background: #ff8a50;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.page-name {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.page-count {
+  color: #ff8a50;
+  font-size: 0.875rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 0;
+  color: #666;
+}
+
+.popup-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.popup-controls {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.settings-subsection h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.margin-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700, #3d3d3d);
+  color: var(--color-browngray-100, #f5f5f5);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.inheritance-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #666;
+  transition: color 0.2s;
+}
+
+.inheritance-btn:hover {
+  color: #333;
+}
+
+.inheritance-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.popup-css {
+  flex: 1;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #e0e0e0;
+}
+
+.css-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #e8e8e8;
+  border-bottom: 1px solid #d0d0d0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: #666;
+}
+
+.toggle input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 18px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle input[type='checkbox']:checked + .toggle-switch {
+  background: #61afef;
+}
+
+.toggle input[type='checkbox']:checked + .toggle-switch::after {
+  transform: translateX(18px);
+}
+
+.readonly {
+  flex: 1;
+  margin: 0;
+  padding: 0.75rem;
+  background: #1e1e1e;
+  color: #abb2bf;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.popup-css textarea {
+  flex: 1;
+  width: 100%;
+  background: #1e1e1e;
+  color: #abb2bf;
+  border: none;
+  padding: 0.75rem;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+}
+</style>

src/components/StylesheetViewer.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
@@ -33,6 +33,7 @@ import 'highlight.js/styles/atom-one-dark.css';
 hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
+const activeTab = inject('activeTab');
 const isEditable = ref(false);
 let debounceTimer = null;
 
@@ -52,6 +53,23 @@ const handleInput = (event) => {
     stylesheetStore.content = newContent;
   }, 500);
 };
+
+// Sync editing mode with store
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
+});
+
+// Disable editing mode when changing tabs
+watch(activeTab, (newTab) => {
+  if (newTab !== 'code' && isEditable.value) {
+    isEditable.value = false;
+  }
+});
 </script>
 
 <style scoped>

src/components/editor/EditorPanel.vue

@@ -27,6 +27,18 @@
       </button>
     </nav>
 
+    <button
+      v-if="activeTab.length > 0"
+      type="button"
+      class="close-button"
+      @click="activeTab = ''"
+      title="Fermer le panneau"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
+      </svg>
+    </button>
+
     <div class="tab-content" :class="{ open: activeTab.length > 0 }">
       <div v-if="activeTab === 'document'" class="tab-panel">
         <PageSettings />
@@ -74,6 +86,33 @@ nav {
   z-index: 2;
 }
 
+.close-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 2;
+
+  width: 2rem;
+  height: 2rem;
+  padding: 0.25rem;
+
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  color: var(--color-browngray-300);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-browngray-100);
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .tab-content {
   flex: 1;
   overflow: hidden;

src/components/editor/PageSettings.vue

@@ -4,7 +4,9 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="page-format">Format d'impression</label>
+        <label for="page-format" class="label-with-tooltip" data-css="size"
+          >Format d'impression</label
+        >
         <select id="page-format" v-model="pageFormat">
           <option value="A4">A4</option>
           <option value="A5">A5</option>
@@ -17,7 +19,9 @@
 
     <div class="settings-subsection">
       <div class="field field--view-only">
-        <label for="page-width">Largeur</label>
+        <label for="page-width" class="label-with-tooltip" data-css="width"
+          >Largeur</label
+        >
         <input
           id="page-width"
           type="number"
@@ -28,7 +32,9 @@
       </div>
 
       <div class="field field--view-only">
-        <label for="page-height">Hauteur</label>
+        <label for="page-height" class="label-with-tooltip" data-css="height"
+          >Hauteur</label
+        >
         <input
           id="page-height"
           type="number"
@@ -43,7 +49,9 @@
       <h3>Marges</h3>
 
       <div class="field">
-        <label for="margin-top">Haut</label>
+        <label for="margin-top" class="label-with-tooltip" data-css="margin-top"
+          >Haut</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-top"
@@ -78,7 +86,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-bottom">Bas</label>
+        <label
+          for="margin-bottom"
+          class="label-with-tooltip"
+          data-css="margin-bottom"
+          >Bas</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-bottom"
@@ -113,7 +126,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-left">Gauche</label>
+        <label
+          for="margin-left"
+          class="label-with-tooltip"
+          data-css="margin-left"
+          >Gauche</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-left"
@@ -148,7 +166,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-right">Droite</label>
+        <label
+          for="margin-right"
+          class="label-with-tooltip"
+          data-css="margin-right"
+          >Droite</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-right"
@@ -185,7 +208,9 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="background">Arrière-plan</label>
+        <label for="background" class="label-with-tooltip" data-css="background"
+          >Arrière-plan</label
+        >
         <div class="input-with-color">
           <input
             ref="backgroundColorInput"
@@ -218,7 +243,12 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="pattern">Motif</label>
+        <label
+          for="pattern"
+          class="label-with-tooltip"
+          data-css="background-image"
+          >Motif</label
+        >
         <select id="pattern" v-model="pattern">
           <option value="">Choisissez</option>
           <option value="dots">Points</option>
@@ -231,12 +261,22 @@
     <div class="settings-subsection">
       <div class="field checkbox-field">
         <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
-        <label for="page-numbers">Numéro de page</label>
+        <label
+          for="page-numbers"
+          class="label-with-tooltip"
+          data-css="@bottom-left/right"
+          >Numéro de page</label
+        >
       </div>
 
       <div class="field checkbox-field">
         <input id="running-title" type="checkbox" v-model="runningTitle" />
-        <label for="running-title">Titre courant</label>
+        <label
+          for="running-title"
+          class="label-with-tooltip"
+          data-css="string-set"
+          >Titre courant</label
+        >
       </div>
     </div>
   </section>

src/components/editor/TextSettings.vue

@@ -9,14 +9,14 @@
     <!-- Police -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-font">Police</label>
+        <label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
         <div class="field-with-option">
           <select id="text-font" v-model="font">
             <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
           </select>
           <div class="field-checkbox">
             <input id="text-italic" type="checkbox" v-model="italic" />
-            <label for="text-italic">Italique</label>
+            <label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
           </div>
         </div>
       </div>
@@ -25,7 +25,7 @@
     <!-- Graisse -->
     <div class="settings-subsection">
       <div class="field">
-        <label>Graisse</label>
+        <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
         <UnitToggle v-model="weight" :units="weights" />
       </div>
     </div>
@@ -33,7 +33,7 @@
     <!-- Taille du texte -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-size-range">Taille du texte</label>
+        <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
         <InputWithUnit
           v-model="fontSize"
           :units="['px', 'em', 'rem']"
@@ -47,7 +47,7 @@
     <!-- Alignement -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-alignment">Alignement</label>
+        <label for="text-alignment" class="label-with-tooltip" data-css="text-align">Alignement</label>
         <select id="text-alignment" v-model="alignment">
           <option v-for="a in alignments" :key="a.value" :value="a.value">
             {{ a.label }}
@@ -59,7 +59,7 @@
     <!-- Couleurs -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-color">Couleur</label>
+        <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
         <div class="input-with-color">
           <input
             id="text-color"
@@ -71,7 +71,7 @@
         </div>
       </div>
       <div class="field">
-        <label for="text-background">Arrière-plan</label>
+        <label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
         <div class="input-with-color">
           <input
             id="text-background"
@@ -90,6 +90,7 @@
         ref="marginOuterEditor"
         id="margin-outer"
         label="Marges extérieures"
+        cssProperty="margin"
         v-model:simple="marginOuter"
         v-model:detailed="marginOuterDetailed"
         :units="['mm', 'px', 'rem']"
@@ -103,6 +104,7 @@
         ref="marginInnerEditor"
         id="margin-inner"
         label="Marges intérieures"
+        cssProperty="padding"
         v-model:simple="marginInner"
         v-model:detailed="marginInnerDetailed"
         :units="['mm', 'px', 'rem']"

src/components/ui/MarginEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="margin-editor">
     <div class="field">
-      <label :for="id">{{ label }}</label>
+      <label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
       <div class="input-with-unit">
         <input
           :id="id"
@@ -29,7 +29,7 @@
 
     <div v-if="expanded" class="subsection collapsed-section">
       <div v-for="side in sides" :key="side.key" class="field">
-        <label :for="`${id}-${side.key}`">{{ side.label }}</label>
+        <label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
         <div class="input-with-unit">
           <input
             :id="`${id}-${side.key}`"
@@ -62,6 +62,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  cssProperty: {
+    type: String,
+    default: 'margin'
+  },
   simple: {
     type: Object,
     required: true,

src/composables/usePopupPosition.js

@@ -0,0 +1,52 @@
+export function usePopupPosition(popupWidth, popupHeight) {
+  const OFFSET = 10; // Distance from cursor
+
+  const calculatePosition = (event) => {
+    // Get cursor position relative to viewport
+    const cursorX = event.clientX;
+    const cursorY = event.clientY;
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let x, y;
+
+    // Try bottom-right
+    if (
+      cursorX + OFFSET + popupWidth <= viewportWidth &&
+      cursorY + OFFSET + popupHeight <= viewportHeight
+    ) {
+      x = cursorX + OFFSET;
+      y = cursorY + OFFSET;
+    }
+    // Try bottom-left
+    else if (
+      cursorX - OFFSET - popupWidth >= 0 &&
+      cursorY + OFFSET + popupHeight <= viewportHeight
+    ) {
+      x = cursorX - OFFSET - popupWidth;
+      y = cursorY + OFFSET;
+    }
+    // Try top-right
+    else if (
+      cursorX + OFFSET + popupWidth <= viewportWidth &&
+      cursorY - OFFSET - popupHeight >= 0
+    ) {
+      x = cursorX + OFFSET;
+      y = cursorY - OFFSET - popupHeight;
+    }
+    // Try top-left (fallback)
+    else {
+      x = cursorX - OFFSET - popupWidth;
+      y = cursorY - OFFSET - popupHeight;
+
+      // Ensure it doesn't go off-screen
+      x = Math.max(10, x);
+      y = Math.max(10, y);
+    }
+
+    return { x, y };
+  };
+
+  return { calculatePosition };
+}

src/stores/stylesheet.js

@@ -6,6 +6,7 @@ import parserPostcss from 'prettier/plugins/postcss';
 
 export const useStylesheetStore = defineStore('stylesheet', () => {
   const content = ref('');
+  const isEditing = ref(false);
   let formatTimer = null;
   let isFormatting = false;
 
@@ -30,9 +31,9 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     }
   };
 
-  // Watch content and format after 500ms of inactivity
+  // Watch content and format after 500ms of inactivity (only when not editing)
   watch(content, () => {
-    if (isFormatting) return;
+    if (isFormatting || isEditing.value) return;
 
     clearTimeout(formatTimer);
     formatTimer = setTimeout(() => {
@@ -65,6 +66,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
 
   return {
     content,
+    isEditing,
     loadStylesheet,
     updateProperty,
     extractValue,