feat: add print button that replaces page content for printing

Instead of trying to print iframe directly, the print button:
1. Collects all styles from the iframe
2. Replaces the main page content with iframe content
3. Triggers window.print()
4. Reloads the page to restore the app

This ensures the PagedJS rendered content prints correctly.

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

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

public/assets/css/src/_variables.scss

@@ -4,6 +4,8 @@
   --color-browngray-200: #d0c4ba;
   --color-browngray-300: #b5a9a1;
 
+  --color-page-highlight: #ff8a50;
+
   --border-radius: 0.2rem;
 
   --space-xs: 0.5rem;

public/assets/css/style.css

@@ -30,6 +30,7 @@ button {
   --color-browngray-050: #f5f3f0;
   --color-browngray-200: #d0c4ba;
   --color-browngray-300: #b5a9a1;
+  --color-page-highlight: #ff8a50;
   --border-radius: 0.2rem;
   --space-xs: 0.5rem;
   --curve: cubic-bezier(0.86, 0, 0.07, 1);

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,+BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADwBF;;AEpCA;;;;;;;;;;;;;EAaE,uBAAA;AFuCF;;AGpDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHuDF;AGrDA;EACE,8BAAA;OAAA,kBAAA;AHuDF;;AGpDA;EACE;IACE,sBAAA;EHuDF;AACF;AGrDA;EACE,+BAAA;AHuDF;;AItEA;;;EAGE,4CAAA;AJyEF;;AItEA;EACE,YAAA;AJyEF;;AItEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJyEF;AIvEE;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;AJuEJ;AIpEE;EACE,UAAA;EACA,mBAAA;AJsEJ;;AIjEE;EACE,6BAAA;EACA,8BAAA;AJoEJ;AIlEE;EACE,mDAAA;AJoEJ;AIjEE;EACE,0BAAA;AJmEJ;AIjEI;EACE,8BAAA;AJmEN;AIhEI;EACE,aAAA;AJkEN;AIhEM;;EAEE,UAAA;AJkER;AI/DM;EACE,oCAAA;AJiER;AI9DM;EACE,aAAA;EACA,WAAA;AJgER;AI9DQ;EACE,aAAA;EACA,WAAA;AJgEV;AI5DM;EACE,UAAA;AJ8DR;AI7DQ;EACE,aAAA;AJ+DV;AI9DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJgEZ;AI7DU;EACE,oBAAA;EACA,WAAA;AJ+DZ;AIzDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ2DN;AIzDM;EACE,WAAA;AJ2DR;AIzDM;EACE,UAAA;AJ2DR;AIzDQ;EACE,UAAA;AJ2DV;AIvDU;EACE,UAAA;AJyDZ;;AKlLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALoLF;AKlLE;EACE,sBAAA;EACA,WAAA;ALoLJ;AKhLI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALkLN","file":"style.css"}

public/assets/svg/arrow-left-double-line.svg

@@ -0,0 +1 @@
+<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>

public/assets/svg/lock-line.svg

@@ -0,0 +1 @@
+<svg 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>

public/assets/svg/lock-unlock-line.svg

@@ -0,0 +1 @@
+<svg 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>

src/App.vue

@@ -19,7 +19,9 @@ provide('activeTab', activeTab);
 
 // Page interaction state
 const hoveredPage = ref(null);
+const selectedPages = ref([]); // Pages with active border (when popup is open)
 const EDGE_THRESHOLD = 30; // px from edge to trigger hover
+const PAGE_HIGHLIGHT_COLOR = '#ff8a50';
 
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
@@ -51,6 +53,15 @@ const isNearPageEdge = (pageElement, mouseX, mouseY) => {
   );
 };
 
+// Get all pages using the same template as the given page
+const getPagesWithSameTemplate = (page, doc) => {
+  const pageType = page.getAttribute('data-page-type') || 'default';
+  const allPages = doc.querySelectorAll('.pagedjs_page');
+  return Array.from(allPages).filter(
+    (p) => (p.getAttribute('data-page-type') || 'default') === pageType
+  );
+};
+
 // Handle mouse movement in iframe
 const handleIframeMouseMove = (event) => {
   const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
@@ -65,20 +76,51 @@ const handleIframeMouseMove = (event) => {
 
   // Update hover state
   if (foundPage !== hoveredPage.value) {
-    // Remove highlight from previous page
-    if (hoveredPage.value) {
+    // Remove highlight from previous page (only if not in selectedPages)
+    if (hoveredPage.value && !selectedPages.value.includes(hoveredPage.value)) {
       hoveredPage.value.style.outline = '';
     }
 
-    // Add highlight to new page
-    if (foundPage) {
-      foundPage.style.outline = '2px solid rgba(97, 175, 239, 0.3)';
+    // Add highlight to new page (only if not already selected)
+    if (foundPage && !selectedPages.value.includes(foundPage)) {
+      foundPage.style.outline = `2px solid ${PAGE_HIGHLIGHT_COLOR}50`;
     }
 
     hoveredPage.value = foundPage;
   }
 };
 
+// Clear selection highlight from all selected pages
+const clearSelectedPages = () => {
+  selectedPages.value.forEach((page) => {
+    page.style.outline = '';
+  });
+  selectedPages.value = [];
+};
+
+// Content elements that can trigger ElementPopup
+const CONTENT_ELEMENTS = [
+  'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+  'IMG', 'FIGURE', 'FIGCAPTION',
+  'UL', 'OL', 'LI',
+  'BLOCKQUOTE', 'PRE', 'CODE',
+  'TABLE', 'THEAD', 'TBODY', 'TR', 'TH', 'TD',
+  'A', 'SPAN', 'STRONG', 'EM', 'B', 'I', 'U',
+  'ARTICLE', 'SECTION', 'ASIDE', 'HEADER', 'FOOTER', 'NAV'
+];
+
+// Check if element is a content element (or find closest content parent)
+const getContentElement = (element) => {
+  let current = element;
+  while (current && current.tagName !== 'BODY') {
+    if (CONTENT_ELEMENTS.includes(current.tagName)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+
 // Handle click in iframe
 const handleIframeClick = (event) => {
   const element = event.target;
@@ -86,22 +128,51 @@ const handleIframeClick = (event) => {
   // Check if clicking near a page edge
   if (hoveredPage.value) {
     event.stopPropagation();
-    pagePopup.value.open(hoveredPage.value, event);
+
+    // Clear previous selection
+    clearSelectedPages();
+
+    // Get all pages with same template and highlight them
+    const doc = event.target.ownerDocument;
+    const sameTemplatePages = getPagesWithSameTemplate(hoveredPage.value, doc);
+    sameTemplatePages.forEach((page) => {
+      page.style.outline = `2px solid ${PAGE_HIGHLIGHT_COLOR}`;
+    });
+    selectedPages.value = sameTemplatePages;
+
+    pagePopup.value.open(hoveredPage.value, event, sameTemplatePages.length);
     elementPopup.value.close();
     return;
   }
 
-  // Otherwise handle as element click
-  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
+  // Only show popup for elements inside the page template
+  const isInsidePage = element.closest('.pagedjs_page');
+  if (!isInsidePage) {
+    clearSelectedPages();
     elementPopup.value.close();
     pagePopup.value.close();
     return;
   }
 
-  elementPopup.value.handleIframeClick(event);
+  // Only show ElementPopup for content elements, not divs
+  const contentElement = getContentElement(element);
+  if (!contentElement) {
+    clearSelectedPages();
+    elementPopup.value.close();
+    pagePopup.value.close();
+    return;
+  }
+
+  clearSelectedPages();
+  elementPopup.value.handleIframeClick(event, contentElement);
   pagePopup.value.close();
 };
 
+// Expose clearSelectedPages for PagePopup to call when closing
+const handlePagePopupClose = () => {
+  clearSelectedPages();
+};
+
 const renderPreview = async (shouldReloadFromFile = false) => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
@@ -203,6 +274,65 @@ watch(
   }
 );
 
+// Print the PagedJS content
+const printPreview = async () => {
+  const frame = activeFrame.value;
+  if (!frame || !frame.contentDocument) return;
+
+  const doc = frame.contentDocument;
+
+  // Collect all styles
+  let allStyles = '';
+
+  // Get inline <style> tags content
+  doc.querySelectorAll('style').forEach((style) => {
+    allStyles += style.innerHTML + '\n';
+  });
+
+  // Get rules from stylesheets
+  for (const sheet of doc.styleSheets) {
+    try {
+      for (const rule of sheet.cssRules) {
+        allStyles += rule.cssText + '\n';
+      }
+    } catch (e) {
+      // Cross-origin stylesheet, try to fetch it
+      if (sheet.href) {
+        try {
+          const response = await fetch(sheet.href);
+          const css = await response.text();
+          allStyles += css;
+        } catch (fetchError) {
+          console.warn('Could not fetch stylesheet:', sheet.href);
+        }
+      }
+    }
+  }
+
+  // Save current page content
+  const originalContent = document.body.innerHTML;
+  const originalStyles = document.head.innerHTML;
+
+  // Replace page content with iframe content
+  document.head.innerHTML = `
+    <meta charset="UTF-8">
+    <title>Impression</title>
+    <style>${allStyles}</style>
+  `;
+  document.body.innerHTML = doc.body.innerHTML;
+
+  // Print
+  window.print();
+
+  // Restore original content after print dialog closes
+  setTimeout(() => {
+    document.head.innerHTML = originalStyles;
+    document.body.innerHTML = originalContent;
+    // Re-mount Vue app would be needed, so we reload instead
+    window.location.reload();
+  }, 100);
+};
+
 onMounted(() => renderPreview(true));
 </script>
 
@@ -227,7 +357,13 @@ onMounted(() => renderPreview(true));
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
-  <PagePopup ref="pagePopup" :iframeRef="activeFrame" />
+  <PagePopup ref="pagePopup" :iframeRef="activeFrame" @close="handlePagePopupClose" />
+
+  <button class="print-btn" @click="printPreview" title="Imprimer">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M17 2H7V6H17V2ZM19 8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM16 19H8V14H16V19ZM19 12C18.45 12 18 11.55 18 11C18 10.45 18.45 10 19 10C19.55 10 20 10.45 20 11C20 11.55 19.55 12 19 12Z"/>
+    </svg>
+  </button>
 </template>
 
 <style>
@@ -259,4 +395,56 @@ onMounted(() => renderPreview(true));
   z-index: 0;
   opacity: 0;
 }
+
+.print-btn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-page-highlight);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  z-index: 1000;
+}
+
+.print-btn:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.print-btn svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Hide UI elements when printing */
+@media print {
+  #editor-panel,
+  #element-popup,
+  #page-popup,
+  .preview-loader,
+  .print-btn {
+    display: none !important;
+  }
+
+  .preview-frame {
+    position: static !important;
+    margin-left: 0 !important;
+    transform: none !important;
+    width: 100% !important;
+    height: auto !important;
+  }
+
+  .preview-frame:not(:first-of-type) {
+    display: none !important;
+  }
+}
 </style>

src/components/ElementPopup.vue

@@ -639,8 +639,8 @@ const close = () => {
   selectedElement.value = null;
 };
 
-const handleIframeClick = (event) => {
-  const element = event.target;
+const handleIframeClick = (event, targetElement = null) => {
+  const element = targetElement || event.target;
 
   if (element.tagName === 'BODY' || element.tagName === 'HTML') {
     close();

src/components/PagePopup.vue

@@ -7,8 +7,8 @@
     <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>
+        <span class="page-name">{{ templateName || 'default' }}</span>
+        <span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
       </div>
       <button class="close-btn" @click="close">×</button>
     </div>
@@ -298,9 +298,13 @@ const props = defineProps({
   iframeRef: Object,
 });
 
+const emit = defineEmits(['close']);
+
 const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
+const pageCount = ref(0);
+const templateName = ref('');
 const isEditable = ref(false);
 const inheritanceLocked = ref(true);
 const backgroundColorInput = ref(null);
@@ -309,10 +313,10 @@ 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' },
+  top: { value: 0, unit: 'mm' },
+  bottom: { value: 0, unit: 'mm' },
+  left: { value: 0, unit: 'mm' },
+  right: { value: 0, unit: 'mm' },
 });
 
 const background = ref({
@@ -336,27 +340,89 @@ const POPUP_HEIGHT = 600;
 
 const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
 
+// Get the selector for the current template's @page rule
+const getTemplateSelector = () => {
+  return templateName.value ? `@page ${templateName.value}` : '@page';
+};
+
+// Get or create the template-specific @page block
+const getOrCreateTemplateBlock = () => {
+  const selector = getTemplateSelector();
+  let block = stylesheetStore.extractBlock(selector);
+
+  if (!block && templateName.value) {
+    // Create new block with current values from @page
+    const baseBlock = stylesheetStore.extractBlock('@page');
+    if (baseBlock) {
+      // Insert the new template block after @page
+      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 newBlock = `\n@page ${templateName.value} {\n  margin: ${marginValue};${background.value.value ? `\n  background: ${background.value.value};` : ''}\n}\n`;
+
+      stylesheetStore.content = stylesheetStore.content.replace(
+        baseBlock,
+        baseBlock + newBlock
+      );
+      block = stylesheetStore.extractBlock(selector);
+    }
+  }
+
+  return block;
+};
+
+// Remove the template-specific @page block
+const removeTemplateBlock = () => {
+  if (!templateName.value) return;
+
+  const selector = `@page ${templateName.value}`;
+  const block = stylesheetStore.extractBlock(selector);
+
+  if (block) {
+    // Remove the block and any surrounding whitespace
+    stylesheetStore.content = stylesheetStore.content.replace(
+      new RegExp(`\\n?${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{[^}]*\\}\\n?`),
+      '\n'
+    );
+  }
+};
+
 const updateMargins = () => {
+  // Only update if inheritance is unlocked
+  if (inheritanceLocked.value) return;
+
   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');
+  const currentBlock = getOrCreateTemplateBlock();
   if (!currentBlock) return;
 
-  const updatedBlock = currentBlock.replace(
-    /(margin:\s*)[^;]+/,
-    `$1${marginValue}`
-  );
+  const selector = getTemplateSelector();
 
-  stylesheetStore.content = stylesheetStore.content.replace(
-    currentBlock,
-    updatedBlock
-  );
+  if (currentBlock.includes('margin:')) {
+    const updatedBlock = currentBlock.replace(
+      /(margin:\s*)[^;]+/,
+      `$1${marginValue}`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  } else {
+    const updatedBlock = currentBlock.replace(
+      /(\s*})$/,
+      `  margin: ${marginValue};\n$1`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
 };
 
 const updateBackground = () => {
+  // Only update if inheritance is unlocked
+  if (inheritanceLocked.value) return;
   if (!background.value.value) return;
 
-  const currentBlock = stylesheetStore.extractBlock('@page');
+  const currentBlock = getOrCreateTemplateBlock();
   if (!currentBlock) return;
 
   if (currentBlock.includes('background:')) {
@@ -421,39 +487,37 @@ 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(' ');
+    // Extract values from @page block (same logic as PageSettings)
+    const pageBlock = stylesheetStore.extractBlock('@page');
+    if (!pageBlock) return;
 
-      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;
-      }
+    // Parse margins with regex (top right bottom left)
+    const marginMatch = pageBlock.match(
+      /margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
+    );
+    if (marginMatch) {
+      margins.value.top = {
+        value: parseFloat(marginMatch[1]),
+        unit: marginMatch[2],
+      };
+      margins.value.right = {
+        value: parseFloat(marginMatch[3]),
+        unit: marginMatch[4],
+      };
+      margins.value.bottom = {
+        value: parseFloat(marginMatch[5]),
+        unit: marginMatch[6],
+      };
+      margins.value.left = {
+        value: parseFloat(marginMatch[7]),
+        unit: marginMatch[8],
+      };
     }
 
-    // Extract background from @page
-    const backgroundData = stylesheetStore.extractValue('@page', 'background');
-    if (backgroundData) {
-      background.value.value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
+    // Extract background
+    const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
+    if (bgMatch) {
+      background.value.value = bgMatch[1].trim();
     }
   } catch (error) {
     console.error('Error loading values from stylesheet:', error);
@@ -462,14 +526,18 @@ const loadValuesFromStylesheet = () => {
   }
 };
 
-const open = (pageElement, event) => {
+const open = (pageElement, event, count = 1) => {
   selectedPageElement.value = pageElement;
+  pageCount.value = count;
   position.value = calculatePosition(event);
 
-  // Add border to the selected page
-  pageElement.style.outline = '2px solid #61afef';
+  // Extract template name from data-page-type attribute
+  templateName.value = pageElement.getAttribute('data-page-type') || '';
 
-  // Load values from stylesheet
+  // Reset inheritance state when opening
+  inheritanceLocked.value = true;
+
+  // Load values from stylesheet (@page block)
   loadValuesFromStylesheet();
 
   visible.value = true;
@@ -507,21 +575,30 @@ const open = (pageElement, event) => {
 };
 
 const close = () => {
-  // Remove border from the selected page
-  if (selectedPageElement.value) {
-    selectedPageElement.value.style.outline = '';
-    selectedPageElement.value = null;
-  }
+  selectedPageElement.value = null;
   visible.value = false;
   isEditable.value = false;
+  emit('close');
 };
 
 const toggleInheritance = () => {
+  const wasLocked = inheritanceLocked.value;
   inheritanceLocked.value = !inheritanceLocked.value;
-  // TODO: Implement CSS priority logic when unlocked
+
+  if (inheritanceLocked.value && !wasLocked) {
+    // Re-locking: remove the template-specific block
+    // Fields keep their values, but preview returns to @page defaults
+    removeTemplateBlock();
+  }
+  // When unlocking: fields already have values, block will be created on first edit
 };
 
 const pageCss = computed(() => {
+  // Show template-specific block if unlocked and exists, otherwise show @page
+  if (!inheritanceLocked.value && templateName.value) {
+    const templateBlock = stylesheetStore.extractBlock(`@page ${templateName.value}`);
+    if (templateBlock) return templateBlock;
+  }
   return stylesheetStore.extractBlock('@page') || '';
 });
 
@@ -602,7 +679,7 @@ defineExpose({ open, close, visible });
 }
 
 .page-label {
-  background: #ff8a50;
+  background: var(--color-page-highlight);
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
@@ -616,7 +693,7 @@ defineExpose({ open, close, visible });
 }
 
 .page-count {
-  color: #ff8a50;
+  color: var(--color-page-highlight);
   font-size: 0.875rem;
 }