From b123e92da86f707b72bb6a4af9027eae2230c618 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 9 Jan 2026 13:59:54 +0100
Subject: [PATCH 1/2] ci: add --delete flag to FTP mirror commands

Enable automatic deletion of remote files that no longer exist locally.
This ensures the production server stays in sync with the repository,
removing obsolete files like the renamed stylesheet.css.

Protected directories (accounts, cache, sessions) remain excluded.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .forgejo/workflows/deploy.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml
index 95d6bc8..c85d345 100644
--- a/.forgejo/workflows/deploy.yml
+++ b/.forgejo/workflows/deploy.yml
@@ -42,21 +42,21 @@ jobs:
           lftp -c "
           set ftp:ssl-allow no;
           open -u $USERNAME,$PASSWORD $PRODUCTION_HOST;
-          mirror --reverse --verbose --ignore-time --parallel=10 \
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
             -x 'local/' \
             -x 'css/src/' \
             -x 'css/style.css' \
             -x 'css/style.css.map' \
             -x 'css/style.scss' \
             assets assets;
-          mirror --reverse --verbose --ignore-time --parallel=10 \
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
             -x 'accounts/' \
             -x 'cache/' \
             -x 'sessions/' \
             site site;
-          mirror --reverse --verbose --ignore-time --parallel=10 \
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
             kirby kirby;
-          mirror --reverse --verbose --ignore-time --parallel=10 \
+          mirror --reverse --delete --verbose --ignore-time --parallel=10 \
             vendor vendor;
           put index.php -o index.php;
           quit"

From 93df05c49fb1d95946f691a9182f6b7523a3e57f Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 9 Jan 2026 14:31:42 +0100
Subject: [PATCH 2/2] feat: implement inheritance lock/unlock with CSS
 commenting system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add ability to lock/unlock inheritance for element styles while preserving
custom values. Locked styles are commented in the CSS and restored when unlocked.

New utilities:
- Create css-comments.js with comment/uncomment functions
- Add parseValueWithUnit to css-parsing.js for value parsing
- Add getBlockState, commentCssBlock, uncommentCssBlock to stylesheet store

ElementPopup improvements:
- Detect inheritance state from CSS block state (active/commented/none)
- Capture computed styles from iframe when unlocking with no custom CSS
- Comment/uncomment CSS blocks instead of deleting them on lock toggle
- Use nextTick to prevent race condition with watchers during popup init
- Extract values from both active and commented CSS blocks

Workflow:
1. First unlock: Capture computed styles → create CSS block
2. Lock: Comment the CSS block (styles preserved in comments)
3. Unlock again: Uncomment the block (styles restored)

Fixes issue where CSS rules were created on popup open due to
watcher race conditions during initialization.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/ElementPopup.vue | 104 ++++++++++++++++-----
 src/stores/stylesheet.js        |  46 +++++++++-
 src/utils/css-comments.js       | 155 ++++++++++++++++++++++++++++++++
 src/utils/css-parsing.js        |  20 ++++-
 4 files changed, 300 insertions(+), 25 deletions(-)
 create mode 100644 src/utils/css-comments.js

diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index ac34069..02e553d 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -258,7 +258,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import { usePopupPosition } from '../composables/usePopupPosition';
 import { useDebounce } from '../composables/useDebounce';
@@ -610,8 +610,6 @@ const loadValuesFromStylesheet = () => {
   if (!selector.value) return;
 
   try {
-    isUpdatingFromStore = true;
-
     // Extract font-family
     const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
     if (fontFamilyData) {
@@ -676,12 +674,13 @@ const loadValuesFromStylesheet = () => {
     }
   } catch (error) {
     console.error('Error loading values from stylesheet:', error);
-  } finally {
-    isUpdatingFromStore = false;
   }
 };
 
 const open = (element, event, count = null) => {
+  // Block all watchers during initialization
+  isUpdatingFromStore = true;
+
   selectedElement.value = element;
   selector.value = getSelectorFromElement(element);
   position.value = calculatePosition(event);
@@ -689,14 +688,30 @@ const open = (element, event, count = null) => {
   // Store instance count if provided, otherwise calculate it
   elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
 
-  // Read inheritance state from element's data attribute
-  inheritanceLocked.value = element.dataset.inheritanceUnlocked !== 'true';
+  // Detect inheritance state from CSS block state
+  const blockState = stylesheetStore.getBlockState(selector.value);
 
-  // Load values from stylesheet
+  if (blockState === 'active') {
+    // Block exists and is active (not commented) → unlocked
+    inheritanceLocked.value = false;
+  } else if (blockState === 'commented') {
+    // Block exists but is commented → locked with custom values
+    inheritanceLocked.value = true;
+  } else {
+    // No block → locked with inherited values
+    inheritanceLocked.value = true;
+  }
+
+  // Load values from stylesheet (includes commented blocks)
   loadValuesFromStylesheet();
 
   visible.value = true;
 
+  // Re-enable watchers after initialization (use nextTick to ensure watchers see the flag)
+  nextTick(() => {
+    isUpdatingFromStore = false;
+  });
+
   // Initialize Coloris after opening
   setTimeout(() => {
     Coloris.init();
@@ -755,24 +770,69 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
 };
 
 const toggleInheritance = () => {
-  const wasLocked = inheritanceLocked.value;
-  inheritanceLocked.value = !inheritanceLocked.value;
+  const blockState = stylesheetStore.getBlockState(selector.value);
 
-  // Store the inheritance state in the element's data attribute
-  if (selectedElement.value) {
-    if (inheritanceLocked.value) {
-      delete selectedElement.value.dataset.inheritanceUnlocked;
-    } else {
-      selectedElement.value.dataset.inheritanceUnlocked = 'true';
+  if (inheritanceLocked.value && blockState === 'commented') {
+    // Case 1: Locked with commented block → Uncomment to unlock
+    stylesheetStore.uncommentCssBlock(selector.value);
+    inheritanceLocked.value = false;
+  } else if (inheritanceLocked.value && blockState === 'none') {
+    // Case 2: Locked with no custom CSS → Capture computed values and create block
+    if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
+      const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
+
+      // Update fields with computed values before creating the block
+      isUpdatingFromStore = true;
+
+      // Font family
+      fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
+
+      // Font style
+      fontStyle.value.italic = computed.fontStyle === 'italic';
+
+      // Font weight
+      fontWeight.value.value = parseInt(computed.fontWeight);
+
+      // Font size
+      const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
+      if (fontSizeMatch) {
+        fontSize.value.value = parseFloat(fontSizeMatch[1]);
+        fontSize.value.unit = fontSizeMatch[2];
+      }
+
+      // Text align
+      textAlign.value.value = computed.textAlign;
+
+      // Color
+      color.value.value = computed.color;
+
+      // Background
+      background.value.value = computed.backgroundColor;
+
+      // Margin (take the top margin)
+      const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
+      if (marginMatch) {
+        marginOuter.value.value = parseFloat(marginMatch[1]);
+        marginOuter.value.unit = marginMatch[2];
+      }
+
+      // Padding (take the top padding)
+      const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
+      if (paddingMatch) {
+        paddingInner.value.value = parseFloat(paddingMatch[1]);
+        paddingInner.value.unit = paddingMatch[2];
+      }
+
+      isUpdatingFromStore = false;
     }
-  }
 
-  if (inheritanceLocked.value && !wasLocked) {
-    // Re-locking: remove the element-specific CSS block to restore inheritance
-    removeElementBlock();
-  } else if (!inheritanceLocked.value && wasLocked) {
-    // Unlocking: apply all current field values to create the CSS block
+    // Now create the block with captured values
     applyAllStyles();
+    inheritanceLocked.value = false;
+  } else if (!inheritanceLocked.value && blockState === 'active') {
+    // Case 3: Unlocked with active block → Comment to lock
+    stylesheetStore.commentCssBlock(selector.value);
+    inheritanceLocked.value = true;
   }
 };
 
diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js
index b394c3c..2b157fc 100644
--- a/src/stores/stylesheet.js
+++ b/src/stores/stylesheet.js
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { ref, computed, watch } from 'vue';
 import cssParsingUtils from '../utils/css-parsing';
+import * as cssComments from '../utils/css-comments';
 import prettier from 'prettier/standalone';
 import parserPostcss from 'prettier/plugins/postcss';
 import { getCsrfToken } from '../utils/kirby-auth';
@@ -81,10 +82,24 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     });
   };
 
-  const extractValue = (selector, property) => {
-    // Try to extract from custom CSS first, then from base CSS
+  const extractValue = (selector, property, includeCommented = true) => {
+    // Try to extract from active custom CSS first
     const customValue = cssParsingUtils.extractCssValue(customCss.value, selector, property);
     if (customValue) return customValue;
+
+    // If includeCommented, try to extract from commented block
+    if (includeCommented) {
+      const commentedBlock = cssComments.extractCommentedBlock(customCss.value, selector);
+      if (commentedBlock) {
+        const commentedValue = cssComments.extractValueFromCommentedBlock(commentedBlock, property);
+        if (commentedValue) {
+          // Parse value with unit if needed
+          return cssParsingUtils.parseValueWithUnit(commentedValue);
+        }
+      }
+    }
+
+    // Finally, try base CSS
     return cssParsingUtils.extractCssValue(baseCss.value, selector, property);
   };
 
@@ -117,6 +132,29 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     customCss.value = newCss;
   };
 
+  // Comment a CSS block in custom CSS
+  const commentCssBlock = (selector) => {
+    const block = cssParsingUtils.extractCssBlock(customCss.value, selector);
+    if (!block) return;
+
+    customCss.value = cssComments.commentBlock(customCss.value, block);
+  };
+
+  // Uncomment a CSS block in custom CSS
+  const uncommentCssBlock = (selector) => {
+    customCss.value = cssComments.uncommentBlock(customCss.value, selector);
+  };
+
+  // Check if a CSS block is commented
+  const isBlockCommented = (selector) => {
+    return cssComments.isBlockCommented(customCss.value, selector);
+  };
+
+  // Get the state of a CSS block
+  const getBlockState = (selector) => {
+    return cssComments.getBlockState(customCss.value, selector);
+  };
+
   // Load base CSS from stylesheet.print.css
   const loadBaseCss = async () => {
     const response = await fetch('/assets/css/stylesheet.print.css');
@@ -228,6 +266,10 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     replaceBlock,
     replaceInCustomCss,
     setCustomCss,
+    commentCssBlock,
+    uncommentCssBlock,
+    isBlockCommented,
+    getBlockState,
     formatCustomCss,
     loadBaseCss,
     initializeFromNarrative,
diff --git a/src/utils/css-comments.js b/src/utils/css-comments.js
new file mode 100644
index 0000000..530b9e8
--- /dev/null
+++ b/src/utils/css-comments.js
@@ -0,0 +1,155 @@
+/**
+ * CSS Comments Utility
+ * Handles commenting/uncommenting CSS blocks for inheritance control
+ */
+
+/**
+ * Check if a CSS block is commented
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector to check
+ * @returns {boolean}
+ */
+export function isBlockCommented(css, selector) {
+  const commentedBlock = extractCommentedBlock(css, selector);
+  return commentedBlock !== null;
+}
+
+/**
+ * Extract a commented CSS block for a selector
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector
+ * @returns {string|null} - The commented block or null if not found
+ */
+export function extractCommentedBlock(css, selector) {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(
+    `/\\*\\s*\\n?${escaped}\\s*\\{[^}]*\\}\\s*\\n?\\*/`,
+    'g'
+  );
+  const match = css.match(regex);
+  return match ? match[0] : null;
+}
+
+/**
+ * Comment a CSS block
+ * @param {string} css - The CSS content
+ * @param {string} blockContent - The CSS block to comment
+ * @returns {string} - CSS with the block commented
+ */
+export function commentBlock(css, blockContent) {
+  if (!blockContent || !css.includes(blockContent)) return css;
+
+  const commented = `/*\n${blockContent}\n*/`;
+  return css.replace(blockContent, commented);
+}
+
+/**
+ * Uncomment a CSS block for a selector
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector
+ * @returns {string} - CSS with the block uncommented
+ */
+export function uncommentBlock(css, selector) {
+  const commentedBlock = extractCommentedBlock(css, selector);
+  if (!commentedBlock) return css;
+
+  // Remove comment delimiters /* and */
+  const uncommented = commentedBlock
+    .replace(/^\/\*\s*\n?/, '')
+    .replace(/\s*\n?\*\/$/, '');
+
+  return css.replace(commentedBlock, uncommented);
+}
+
+/**
+ * Get the state of a CSS block
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector
+ * @returns {'active'|'commented'|'none'}
+ */
+export function getBlockState(css, selector) {
+  // Check for commented block
+  if (isBlockCommented(css, selector)) {
+    return 'commented';
+  }
+
+  // Check for active block
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(`${escaped}\\s*\\{[^}]*\\}`, 'g');
+  const activeMatch = css.match(regex);
+
+  if (activeMatch && activeMatch.length > 0) {
+    return 'active';
+  }
+
+  return 'none';
+}
+
+/**
+ * Extract a value from a commented CSS block
+ * @param {string} commentedBlock - The commented CSS block
+ * @param {string} property - The CSS property to extract
+ * @returns {string|null} - The value or null if not found
+ */
+export function extractValueFromCommentedBlock(commentedBlock, property) {
+  if (!commentedBlock) return null;
+
+  // Remove comment delimiters
+  const cssContent = commentedBlock
+    .replace(/^\/\*\s*\n?/, '')
+    .replace(/\s*\n?\*\/$/, '');
+
+  // Extract property value
+  const regex = new RegExp(`${property}\\s*:\\s*([^;]+)`, 'i');
+  const match = cssContent.match(regex);
+
+  return match ? match[1].trim() : null;
+}
+
+/**
+ * Extract all commented blocks from CSS
+ * Used for preserving comments during formatting
+ * @param {string} css - The CSS content
+ * @returns {Array<{selector: string, block: string}>}
+ */
+export function extractAllCommentedBlocks(css) {
+  const blocks = [];
+  const regex = /\/\*\s*\n?([.\w\s>#:-]+)\s*\{[^}]*\}\s*\n?\*\//g;
+  let match;
+
+  while ((match = regex.exec(css)) !== null) {
+    blocks.push({
+      selector: match[1].trim(),
+      block: match[0]
+    });
+  }
+
+  return blocks;
+}
+
+/**
+ * Remove all commented blocks from CSS
+ * Used before formatting
+ * @param {string} css - The CSS content
+ * @returns {string} - CSS without commented blocks
+ */
+export function removeAllCommentedBlocks(css) {
+  return css.replace(/\/\*\s*\n?[.\w\s>#:-]+\s*\{[^}]*\}\s*\n?\*\//g, '');
+}
+
+/**
+ * Reinsert commented blocks into formatted CSS
+ * @param {string} css - The formatted CSS
+ * @param {Array<{selector: string, block: string}>} blocks - Commented blocks to reinsert
+ * @returns {string} - CSS with commented blocks reinserted
+ */
+export function reinsertCommentedBlocks(css, blocks) {
+  let result = css;
+
+  // Append commented blocks at the end
+  blocks.forEach(({ block }) => {
+    result += '\n' + block;
+  });
+
+  return result;
+}
diff --git a/src/utils/css-parsing.js b/src/utils/css-parsing.js
index 96e3c85..24a4299 100644
--- a/src/utils/css-parsing.js
+++ b/src/utils/css-parsing.js
@@ -44,6 +44,24 @@ const updateCssValue = ({ css, selector, property, value, unit }) => {
   return css.replace(selectorRegex, `${selector} {${newBlockContent}}`);
 };
 
-const cssParsingUtils = { extractCssBlock, extractCssValue, updateCssValue };
+const parseValueWithUnit = (cssValue) => {
+  if (!cssValue) return null;
+
+  // Match number with optional unit
+  const match = cssValue.match(/([\d.]+)(px|rem|em|mm|cm|in)?/);
+  if (!match) return cssValue; // Return as-is if no match
+
+  return {
+    value: parseFloat(match[1]),
+    unit: match[2] || ''
+  };
+};
+
+const cssParsingUtils = {
+  extractCssBlock,
+  extractCssValue,
+  updateCssValue,
+  parseValueWithUnit
+};
 
 export default cssParsingUtils;