fix: race condition on custom styles loading + misc cleanup

Guard watcher-triggered renders in usePreviewRenderer until first
explicit render completes, preventing premature renders with default
styles. Also: disable Contenu tab, update content/blueprints, add
global disabled button styles, minor formatting.

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

public/assets/css/src/_global.scss

@@ -0,0 +1,8 @@
+button[disabled] {
+  cursor: not-allowed !important;
+  opacity: 0.6;
+}
+
+button[disabled]:hover {
+  background-color: inherit !important;
+}

public/assets/css/style.css

@@ -234,8 +234,8 @@ img {
   --space-m: 2rem;
   --space-big: 3em;
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
-  --sans-serif: "DM Sans", sans-serif;
-  --mono: "Inconsolata", monospace;
+  --sans-serif: 'DM Sans', sans-serif;
+  --mono: 'Inconsolata', monospace;
   --input-h: 26px;
   --input-w: 160px;
   --input-w-small: 45px;
@@ -688,4 +688,13 @@ input[type=number] {
   line-height: 1.5;
   resize: none;
   outline: none;
+}
+
+button[disabled] {
+  cursor: not-allowed !important;
+  opacity: 0.6;
+}
+
+button[disabled]:hover {
+  background-color: inherit !important;
 }/*# sourceMappingURL=style.css.map */

public/assets/css/style.scss

@@ -8,3 +8,4 @@
 @use "src/_forms-section.scss" as *;
 @use "src/_buttons.scss" as *;
 @use "src/_settings-popup.scss" as *;
+@use "src/_global.scss" as *;

public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/map-static.png.txt

@@ -1 +1 @@
-Uuid: f9jqf7vus7w0dx6z
+Uuid: kmmswqjqh5mxyecl

public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/map.txt

@@ -15,9 +15,9 @@ Mapdata:
 background:
   type: osm
 center:
-  lat: 43.82684265866453
-  lon: 4.3375882121084715
-zoom: 11.37799302158894
+  lat: 43.484330002696964
+  lon: 4.029111008525206
+zoom: 6.503825883663738
 
 ----
 

public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt

@@ -26,7 +26,6 @@ body {
   font-family: "DM Sans", sans-serif;
   text-align: left;
   color: rgb(190, 9, 9);
-  background: blue;
 }
 
 p {

public/site/blueprints/pages/narrative.yml

@@ -35,6 +35,7 @@ columns:
         template:
           - map
           - geoformat
+        info: "{{ page.intendedTemplate }}"
   sidebar:
     width: 1/3
     sections:

public/site/blueprints/pages/projet.yml

@@ -7,17 +7,17 @@ columns:
       fields:
         type: fields
         fields:
-          subtitle: 
+          subtitle:
             label: Sous-titre
             type: text
             width: 1/2
-          cover: 
+          cover:
             label: Image de couverture
             type: files
             multiple: false
             width: 1/2
       pages:
-        label: Narratives
+        label: Récits
         type: pages
         template: narrative
   sidebar:
@@ -26,6 +26,3 @@ columns:
       files:
         label: Fichiers
         type: files
-
-
-

src/App.vue

@@ -61,10 +61,7 @@ const activeFrame = computed(() => {
 const { printPreview } = usePrintPreview(activeFrame);
 
 // Setup keyboard shortcuts (depends on printPreview)
-const {
-  handleKeyboardShortcut,
-  isMac
-} = useKeyboardShortcuts({
+const { handleKeyboardShortcut, isMac } = useKeyboardShortcuts({
   stylesheetStore,
   elementPopup,
   // pagePopup, // DISABLED: page template styling feature
@@ -125,7 +122,11 @@ onMounted(async () => {
   />
   -->
 
-  <button class="print-btn" @click="printPreview" :title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`">
+  <button
+    class="print-btn"
+    @click="printPreview"
+    :title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"

src/components/editor/EditorPanel.vue

@@ -24,7 +24,8 @@
         class="tab"
         :class="{ active: activeTab === 'contenu' }"
         @click="activeTab = 'contenu'"
-        title="Ouvrir l'onglet Contenu"
+        title="fonctionnalité à venir"
+        disabled
       >
         Contenu
       </button>
@@ -131,11 +132,9 @@ nav {
   position: relative;
   left: calc(var(--panel-w) * -1);
 
-
   background-color: var(--color-panel-bg);
   box-shadow: -5px 0px 12px;
 
-
   transition: left 0.3s var(--curve);
   pointer-events: all;
 }
@@ -145,7 +144,7 @@ nav {
 }
 
 .tab-panel {
-  height: calc(100% - var(--panel-nav-h)*2);
+  height: calc(100% - var(--panel-nav-h) * 2);
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0 2em;

src/composables/usePreviewRenderer.js

@@ -16,6 +16,7 @@ export function usePreviewRenderer({
   let savedScrollPercentage = 0;
   const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
   const isTransitioning = ref(false);
+  const initialized = ref(false);
   let keyboardShortcutHandler = null;
 
   /**
@@ -117,6 +118,9 @@ export function usePreviewRenderer({
             // Swap current frame
             currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
             isTransitioning.value = false;
+            if (!initialized.value) {
+              initialized.value = true;
+            }
           }, 200); // Match CSS transition duration
         }, 50); // Small delay to ensure scroll is set
       }, 200); // Wait for PagedJS
@@ -127,6 +131,7 @@ export function usePreviewRenderer({
   watch(
     () => stylesheetStore.content,
     () => {
+      if (!initialized.value) return;
       renderPreview();
     }
   );
@@ -135,6 +140,7 @@ export function usePreviewRenderer({
   watch(
     () => narrativeStore.data,
     () => {
+      if (!initialized.value) return;
       if (narrativeStore.data) {
         renderPreview();
       }
@@ -152,6 +158,7 @@ export function usePreviewRenderer({
     renderPreview,
     currentFrameIndex,
     isTransitioning,
+    initialized,
     setKeyboardShortcutHandler,
   };
 }

src/style.css

@@ -1 +1 @@
-@import '../public/assets/css/style.scss';
+/* @import '../public/assets/css/style.scss'; */