public/assets/css/src/_forms.scss

@@ -8,41 +8,6 @@ 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,38 +80,6 @@ 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;;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"}
+{"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"}

src/App.vue

@@ -2,7 +2,6 @@
 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';
@@ -12,15 +11,10 @@ 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);
@@ -31,77 +25,6 @@ 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;
@@ -150,9 +73,10 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   `;
 
   hiddenFrame.onload = () => {
-    // Add event listeners for page and element interactions
+    hiddenFrame.contentDocument.addEventListener(
-    hiddenFrame.contentDocument.addEventListener('mousemove', handleIframeMouseMove);
+      'click',
-    hiddenFrame.contentDocument.addEventListener('click', handleIframeClick);
+      elementPopup.value.handleIframeClick
+    );
 
     // Close Coloris when clicking in the iframe
     hiddenFrame.contentDocument.addEventListener('click', () => {
@@ -227,7 +151,6 @@ onMounted(() => renderPreview(true));
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
-  <PagePopup ref="pagePopup" :iframeRef="activeFrame" />
 </template>
 
 <style>
@@ -245,9 +168,9 @@ onMounted(() => renderPreview(true));
 }
 
 .preview-frame.shifted {
-  margin-left: 17.55rem;
+  margin-left: 19rem;
-  transform: scale(0.65) translateY(-40vh);
+  transform: scale(0.7) translateY(-30vh);
-  height: 155vh;
+  height: 142vh;
 }
 
 .preview-frame:nth-of-type(1) {

src/components/PagePopup.vue

@@ -1,807 +0,0 @@
-<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, watch, inject } from 'vue';
+import { ref, computed } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
@@ -33,7 +33,6 @@ 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;
 
@@ -53,23 +52,6 @@ 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,18 +27,6 @@
       </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 />
@@ -86,33 +74,6 @@ 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,9 +4,7 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="page-format" class="label-with-tooltip" data-css="size"
+        <label for="page-format">Format d'impression</label>
-          >Format d'impression</label
-        >
         <select id="page-format" v-model="pageFormat">
           <option value="A4">A4</option>
           <option value="A5">A5</option>
@@ -19,9 +17,7 @@
 
     <div class="settings-subsection">
       <div class="field field--view-only">
-        <label for="page-width" class="label-with-tooltip" data-css="width"
+        <label for="page-width">Largeur</label>
-          >Largeur</label
-        >
         <input
           id="page-width"
           type="number"
@@ -32,9 +28,7 @@
       </div>
 
       <div class="field field--view-only">
-        <label for="page-height" class="label-with-tooltip" data-css="height"
+        <label for="page-height">Hauteur</label>
-          >Hauteur</label
-        >
         <input
           id="page-height"
           type="number"
@@ -49,9 +43,7 @@
       <h3>Marges</h3>
 
       <div class="field">
-        <label for="margin-top" class="label-with-tooltip" data-css="margin-top"
+        <label for="margin-top">Haut</label>
-          >Haut</label
-        >
         <div class="input-with-unit">
           <input
             id="margin-top"
@@ -86,12 +78,7 @@
       </div>
 
       <div class="field">
-        <label
+        <label for="margin-bottom">Bas</label>
-          for="margin-bottom"
-          class="label-with-tooltip"
-          data-css="margin-bottom"
-          >Bas</label
-        >
         <div class="input-with-unit">
           <input
             id="margin-bottom"
@@ -126,12 +113,7 @@
       </div>
 
       <div class="field">
-        <label
+        <label for="margin-left">Gauche</label>
-          for="margin-left"
-          class="label-with-tooltip"
-          data-css="margin-left"
-          >Gauche</label
-        >
         <div class="input-with-unit">
           <input
             id="margin-left"
@@ -166,12 +148,7 @@
       </div>
 
       <div class="field">
-        <label
+        <label for="margin-right">Droite</label>
-          for="margin-right"
-          class="label-with-tooltip"
-          data-css="margin-right"
-          >Droite</label
-        >
         <div class="input-with-unit">
           <input
             id="margin-right"
@@ -208,9 +185,7 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="background" class="label-with-tooltip" data-css="background"
+        <label for="background">Arrière-plan</label>
-          >Arrière-plan</label
-        >
         <div class="input-with-color">
           <input
             ref="backgroundColorInput"
@@ -243,12 +218,7 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label
+        <label for="pattern">Motif</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>
@@ -261,22 +231,12 @@
     <div class="settings-subsection">
       <div class="field checkbox-field">
         <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
-        <label
+        <label for="page-numbers">Numéro de page</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
+        <label for="running-title">Titre courant</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" class="label-with-tooltip" data-css="font-family">Police</label>
+        <label for="text-font">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" class="label-with-tooltip" data-css="font-style">Italique</label>
+            <label for="text-italic">Italique</label>
           </div>
         </div>
       </div>
@@ -25,7 +25,7 @@
     <!-- Graisse -->
     <div class="settings-subsection">
       <div class="field">
-        <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
+        <label>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" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
+        <label for="text-size-range">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" class="label-with-tooltip" data-css="text-align">Alignement</label>
+        <label for="text-alignment">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" class="label-with-tooltip" data-css="color">Couleur</label>
+        <label for="text-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" class="label-with-tooltip" data-css="background">Arrière-plan</label>
+        <label for="text-background">Arrière-plan</label>
         <div class="input-with-color">
           <input
             id="text-background"
@@ -90,7 +90,6 @@
         ref="marginOuterEditor"
         id="margin-outer"
         label="Marges extérieures"
-        cssProperty="margin"
         v-model:simple="marginOuter"
         v-model:detailed="marginOuterDetailed"
         :units="['mm', 'px', 'rem']"
@@ -104,7 +103,6 @@
         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" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
+      <label :for="id">{{ 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}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
+        <label :for="`${id}-${side.key}`">{{ side.label }}</label>
         <div class="input-with-unit">
           <input
             :id="`${id}-${side.key}`"
@@ -62,10 +62,6 @@ const props = defineProps({
     type: String,
     required: true
   },
-  cssProperty: {
-    type: String,
-    default: 'margin'
-  },
   simple: {
     type: Object,
     required: true,

src/composables/usePopupPosition.js

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