diff --git a/.ddev/commands/web/install-magento b/.ddev/commands/web/install-magento
index 2ead7166..473f48fc 100755
--- a/.ddev/commands/web/install-magento
+++ b/.ddev/commands/web/install-magento
@@ -45,11 +45,10 @@ composer create-project \
 	magento-temp
 
 # Create Magento Folder if not exist
-if [[ ! -d "${MAGENTO_FOLDER}" ]]; then
+if [[ ! -d ${MAGENTO_FOLDER} ]]; then
 	mkdir -p "${MAGENTO_FOLDER}"
 fi
 
-
 # copy everything from magento-temp into magento folder
 cp -a magento-temp/. "${MAGENTO_FOLDER}/"
 
@@ -127,9 +126,9 @@ bin/magento setup:upgrade
 HYVA_THEME_ID=$(mysql --host=db --user=db --password=db db \
 	--skip-column-names --silent \
 	--execute="SELECT theme_id FROM theme WHERE theme_path = 'Hyva/default' LIMIT 1" 2>/dev/null) || HYVA_THEME_ID=""
-if [[ -n "$HYVA_THEME_ID" ]]; then
+if [[ -n ${HYVA_THEME_ID} ]]; then
 	echo "Setting Hyvä Default (ID: ${HYVA_THEME_ID}) as storefront theme..."
-	bin/magento config:set design/theme/theme_id "$HYVA_THEME_ID"
+	bin/magento config:set design/theme/theme_id "${HYVA_THEME_ID}"
 	bin/magento cache:clean config
 else
 	echo "WARNING: Hyvä Default theme not found in database, skipping theme activation."
diff --git a/.ddev/commands/web/mago b/.ddev/commands/web/mago
index 96a5acbe..5db35919 100755
--- a/.ddev/commands/web/mago
+++ b/.ddev/commands/web/mago
@@ -1,19 +1,19 @@
 #!/usr/bin/env bash
 
-## Description: Run Mago (PHP analysis, formatting, and linting)
+set -euo pipefail
+
+## Description: Run Mago (PHP linter and formatter)
 ## Usage: mago <command> [options]
-## Example: "ddev mago"
+## Example: ddev mago lint
+## Example: ddev mago fmt
+## Example: ddev mago fmt --dry-run
 
-set -e
+cd /var/www/html
 
-# Require Mago to be installed (avoid executing remote install scripts automatically)
-if ! command -v mago >/dev/null 2>&1; then
-    echo "mago is not installed. Please install it first: https://carthage.software/mago"
-    exit 1
+# Mago is a require-dev dependency of the module itself.
+if [[ ! -x vendor/bin/mago ]]; then
+	echo "mago not found. Installing module dev dependencies..."
+	composer install --no-interaction
 fi
 
-# Change to module root where mago.toml is found
-cd /var/www/html
-
-# Run Mago with provided arguments
-mago "$@"
+vendor/bin/mago "$@"
diff --git a/.ddev/commands/web/phpcbf b/.ddev/commands/web/phpcbf
index 9a6899be..0a5265df 100755
--- a/.ddev/commands/web/phpcbf
+++ b/.ddev/commands/web/phpcbf
@@ -1,42 +1,19 @@
 #!/usr/bin/env bash
 
-## Description: Run phpcbf (auto-fix coding standard issues)
-## Usage: phpcbf [path]
+set -euo pipefail
+
+## Description: Run PHP Code Beautifier (auto-fix Magento2 standard violations)
+## Usage: phpcbf [path] [flags]
 ## Example: ddev phpcbf
 ## Example: ddev phpcbf src/Service/StaticContentCleaner.php
-## Example: ddev phpcbf vendor/openforgeproject/mageforge/src/Block
-
-cd /var/www/html/magento || exit 1
-
-PHPCBF_BIN="vendor-bin/coding-standard/vendor/bin/phpcbf"
-PHPCBF_FALLBACK="vendor-bin/coding-standard/vendor/squizlabs/php_codesniffer/bin/phpcbf"
-
-if [[ ! -x "${PHPCBF_BIN}" ]]; then
-	PHPCBF_BIN="${PHPCBF_FALLBACK}"
-fi
-
-if [[ ! -x "${PHPCBF_BIN}" ]]; then
-	echo "phpcbf not found. Installing coding-standard toolchain..."
-	composer bin coding-standard install || exit 1
-	PHPCBF_BIN="${PHPCBF_FALLBACK}"
-fi
-
-if [[ ! -x "${PHPCBF_BIN}" ]]; then
-	echo "phpcbf binary still missing. Expected ${PHPCBF_FALLBACK}."
-	exit 1
-fi
 
-# Set target path - default to vendor/openforgeproject/mageforge/src if not provided
-TARGET_PATH="vendor/openforgeproject/mageforge/src"
-if [[ $# -gt 0 ]] && [[ ! "$1" =~ ^- ]]; then
-	TARGET_PATH="$1"
-	shift # Remove the first argument
+cd /var/www/html
 
-	# If path doesn't exist from magento dir, try from workspace root
-	if [[ ! -e "${TARGET_PATH}" ]] && [[ -e "../${TARGET_PATH}" ]]; then
-		TARGET_PATH="../${TARGET_PATH}"
-	fi
+# The coding standard is a require-dev dependency of the module itself.
+if [[ ! -x vendor/bin/phpcbf ]]; then
+	echo "phpcbf not found. Installing module dev dependencies..."
+	composer install --no-interaction
 fi
 
-# Run PHPCBF with optional additional flags
-"${PHPCBF_BIN}" -p -s --standard=Magento2 "$@" "${TARGET_PATH}"
+# The ruleset (phpcs.xml.dist) defines the standard and default file list.
+vendor/bin/phpcbf -p "$@"
diff --git a/.ddev/commands/web/phpcs b/.ddev/commands/web/phpcs
index f2b80066..f5c50b5f 100755
--- a/.ddev/commands/web/phpcs
+++ b/.ddev/commands/web/phpcs
@@ -1,45 +1,19 @@
 #!/usr/bin/env bash
 
-## Description: Run phpcs
-## Usage: phpcs [path]
+set -euo pipefail
+
+## Description: Run PHP CodeSniffer (Magento2 standard) on the module source
+## Usage: phpcs [path] [flags]
 ## Example: ddev phpcs
 ## Example: ddev phpcs src/Service/StaticContentCleaner.php
-## Example: ddev phpcs vendor/openforgeproject/mageforge/src/Block
-
-cd /var/www/html/magento || exit 1
-
-PHPCS_BIN="vendor-bin/coding-standard/vendor/bin/phpcs"
-PHPCS_FALLBACK="vendor-bin/coding-standard/vendor/squizlabs/php_codesniffer/bin/phpcs"
-
-if [[ ! -x "${PHPCS_BIN}" ]]; then
-	PHPCS_BIN="${PHPCS_FALLBACK}"
-fi
-
-if [[ ! -x "${PHPCS_BIN}" ]]; then
-	echo "phpcs not found. Installing coding-standard toolchain..."
-	composer bin coding-standard install || exit 1
-	PHPCS_BIN="${PHPCS_FALLBACK}"
-fi
-
-if [[ ! -x "${PHPCS_BIN}" ]]; then
-	echo "phpcs binary still missing. Expected ${PHPCS_FALLBACK}."
-	exit 1
-fi
 
-# Set target path - default to vendor/openforgeproject/mageforge/src if not provided
-TARGET_PATH="vendor/openforgeproject/mageforge/src"
-if [[ $# -gt 0 ]] && [[ ! "$1" =~ ^- ]]; then
-	TARGET_PATH="$1"
-	shift # Remove the first argument
+cd /var/www/html
 
-	# If path starts with 'src/', convert to vendor path
-	if [[ "${TARGET_PATH}" =~ ^src/ ]]; then
-		TARGET_PATH="vendor/openforgeproject/mageforge/${TARGET_PATH}"
-	# If path doesn't exist from magento dir, try from workspace root
-	elif [[ ! -e "${TARGET_PATH}" ]] && [[ -e "../${TARGET_PATH}" ]]; then
-		TARGET_PATH="../${TARGET_PATH}"
-	fi
+# The coding standard is a require-dev dependency of the module itself.
+if [[ ! -x vendor/bin/phpcs ]]; then
+	echo "phpcs not found. Installing module dev dependencies..."
+	composer install --no-interaction
 fi
 
-# Run PHPCS with optional additional flags
-"${PHPCS_BIN}" -p -s --standard=Magento2 "$@" "${TARGET_PATH}"
+# The ruleset (phpcs.xml.dist) defines the standard and default file list.
+vendor/bin/phpcs -p -s "$@"
diff --git a/.ddev/commands/web/phpstan b/.ddev/commands/web/phpstan
index 889bd54d..de70ef59 100755
--- a/.ddev/commands/web/phpstan
+++ b/.ddev/commands/web/phpstan
@@ -11,45 +11,40 @@ cd /var/www/html/magento || exit 1
 
 # Check if PHPStan is installed
 if [[ ! -f vendor/bin/phpstan ]]; then
-    echo "PHPStan not found. Installing PHPStan with Magento extension..."
+	echo "PHPStan not found. Installing PHPStan with Magento extension..."
 
-    # Allow PHPStan extension installer
-    composer config --no-plugins allow-plugins.phpstan/extension-installer true
+	# Allow PHPStan extension installer
+	composer config --no-plugins allow-plugins.phpstan/extension-installer true
 
-    # Install PHPStan and Magento extension
-    composer require --dev --no-update bitexpert/phpstan-magento phpstan/phpstan:^2.0 phpstan/extension-installer
+	# Install PHPStan and Magento extension
+	composer require --dev --no-update bitexpert/phpstan-magento phpstan/phpstan:^2.0 phpstan/extension-installer
 
-    # Update dependencies (limit scope to PHPStan packages)
-    composer update bitexpert/phpstan-magento phpstan/phpstan phpstan/extension-installer --with-dependencies
+	# Update dependencies (limit scope to PHPStan packages)
+	composer update bitexpert/phpstan-magento phpstan/phpstan phpstan/extension-installer --with-dependencies
 
-    echo "PHPStan installation complete."
+	echo "PHPStan installation complete."
 fi
 
-# Set target path - prefer app/code mount over vendor copy if not provided or if it's a flag
-if [[ -d "app/code/OpenForgeProject" ]]; then
-	DEFAULT_TARGET_PATH="app/code/OpenForgeProject"
-else
-	DEFAULT_TARGET_PATH="vendor/openforgeproject/mageforge/src"
-fi
-TARGET_PATH="${DEFAULT_TARGET_PATH}"
-if [[ $# -gt 0 ]] && [[ ! "$1" =~ ^- ]]; then
+# Default target: the module source, symlinked into vendor via the Composer path repository
+TARGET_PATH="vendor/openforgeproject/mageforge/src"
+if [[ $# -gt 0 ]] && [[ ! $1 =~ ^- ]]; then
 	TARGET_PATH="$1"
 	shift # Remove the first argument
 
 	# If path doesn't exist from magento dir, try from workspace root
-	if [[ ! -e "${TARGET_PATH}" ]] && [[ -e "../${TARGET_PATH}" ]]; then
+	if [[ ! -e ${TARGET_PATH} ]] && [[ -e "../${TARGET_PATH}" ]]; then
 		TARGET_PATH="../${TARGET_PATH}"
 	fi
 fi
 
 # Determine config file location
 if [[ -f "vendor/openforgeproject/mageforge/phpstan.neon" ]]; then
-    PHPSTAN_CONFIG="vendor/openforgeproject/mageforge/phpstan.neon"
+	PHPSTAN_CONFIG="vendor/openforgeproject/mageforge/phpstan.neon"
 elif [[ -f "../phpstan.neon" ]]; then
-    PHPSTAN_CONFIG="../phpstan.neon"
+	PHPSTAN_CONFIG="../phpstan.neon"
 else
-    echo "PHPStan config not found at vendor/openforgeproject/mageforge/phpstan.neon or ../phpstan.neon"
-    exit 1
+	echo "PHPStan config not found at vendor/openforgeproject/mageforge/phpstan.neon or ../phpstan.neon"
+	exit 1
 fi
 
 # Run PHPStan with the same configuration as CI pipeline
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..cc2ba22b
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,24 @@
+# EditorConfig: https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Match Prettier's output (2-space indent) for everything it formats
+[*.{js,mjs,css,json,yml,yaml,md}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
+
+# DDEV command scripts are formatted by shfmt with tabs
+[.ddev/commands/**]
+indent_style = tab
diff --git a/.gitattributes b/.gitattributes
index ca0c2489..0589acd0 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -6,6 +6,8 @@
 /docs/                            export-ignore
 /phpstan.neon                     export-ignore
 /mago.toml                        export-ignore
+/phpcs.xml.dist                   export-ignore
+/.editorconfig                    export-ignore
 /CONTRIBUTING.md                  export-ignore
 /context7.json                    export-ignore
 /release-please-config.json       export-ignore
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 0934522b..b7f850c8 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: 'Bug Report: '
+title: "Bug Report: "
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. ...
 
@@ -22,11 +22,12 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Environment (please complete the following information):**
- - MageForge Version
- - Magento Version
- - Hyva Version
- - OS: [e.g. MacOS, Linux, ... ]
- - Terminal Name [e.G. Iterm, Powershell, ... ]
+
+- MageForge Version
+- Magento Version
+- Hyva Version
+- OS: [e.g. MacOS, Linux, ... ]
+- Terminal Name [e.G. Iterm, Powershell, ... ]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index 1ebc1e90..5e437c39 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: 'Feature-Request: '
+title: "Feature-Request: "
 labels: feature-request
-assignees: ''
-
+assignees: ""
 ---
 
 **Magento 2 Version**
diff --git a/.github/assets/cli-chooser.png b/.github/assets/cli-chooser.png
index 8593bbe4..ddf2abbd 100644
Binary files a/.github/assets/cli-chooser.png and b/.github/assets/cli-chooser.png differ
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 4a52d610..18c12c10 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -2,7 +2,7 @@
 
 ## Structure
 
-```
+```text
 magento/              # Magento 2 installation (DDEV)
 src/
   Console/Command     # CLI commands (extend AbstractCommand)
@@ -105,7 +105,7 @@ When adding an admin config field, all steps must be done together:
 
 Standalone Alpine.js component (`mageforgeToolbar`), separate from Inspector.
 
-```
+```text
 src/view/frontend/web/js/
   toolbar.js              # Entry point
   toolbar/
@@ -136,7 +136,7 @@ Trunk also runs checkov (see `.trunk/trunk.yaml`).
 
 ## Git
 
-```
+```text
 fix/<issue-description>
 feature/<issue-description>
 #<issue-nr> - <message>
diff --git a/.github/labeler.yml b/.github/labeler.yml
index e925d028..50bc53fc 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -1,27 +1,29 @@
+# actions/labeler v5 config.
+# Only changed-files, head-branch and base-branch are supported here; head-branch
+# values are regexes (not globs). Labeling by PR title is handled by a separate
+# step in .github/workflows/label.yml, since the action cannot match titles.
+
 Documentation:
-- changed-files:
-  - any-glob-to-any-file: '**/*.md'
+  - changed-files:
+      - any-glob-to-any-file: "**/*.md"
 
 Feature:
- - branch: ['add-*', 'featuere-*', 'feature/**', 'feat-*', 'feature*']
- - title: ['feat:', 'feature:', 'Feature:']
+  - head-branch: ["^(add|feat|feature)[/-]"]
 
 Fix:
- - branch: ['fix-*', 'bugfix-*', 'fix/**', 'bugfix/**', 'fix*', 'bugfix*']
- - title: ['fix:', 'bugfix:', 'Fix:']
+  - head-branch: ["^(fix|bugfix)[/-]"]
 
 Next-Release:
- - branch: ['chore: release*', 'release-please*']
- - title: ['chore: release', 'Release']
+  - head-branch: [^release-please]
 
 Command:
-- changed-files:
-  - any-glob-to-any-file: 'src/Console/Command/**'
+  - changed-files:
+      - any-glob-to-any-file: src/Console/Command/**
 
 Frontend:
-- changed-files:
-  - any-glob-to-any-file: 'src/view/frontend/**'
+  - changed-files:
+      - any-glob-to-any-file: src/view/frontend/**
 
 Theme-Builder:
-- changed-files:
-  - any-glob-to-any-file: 'src/Service/ThemeBuilder/**'
+  - changed-files:
+      - any-glob-to-any-file: src/Service/ThemeBuilder/**
diff --git a/.github/workflows/functional-tests.yml b/.github/workflows/functional-tests.yml
index dac6c47d..e9d17254 100644
--- a/.github/workflows/functional-tests.yml
+++ b/.github/workflows/functional-tests.yml
@@ -56,7 +56,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
         with:
-          node-version: '20'
+          node-version: "20"
 
       - name: Cache Composer packages
         id: composer-cache
diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml
index 7cfcc2fc..93002363 100644
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@@ -1,22 +1,45 @@
-# This workflow will triage pull requests and apply a label based on the
-# paths that are modified in the pull request.
-#
-# To use this workflow, you will need to set up a .github/labeler.yml
-# file with configuration.  For more information, see:
+# Triages pull requests and applies labels based on the changed files and the
+# head-branch name (.github/labeler.yml), plus the PR title (Conventional Commits)
+# in the dedicated step below.
 # https://github.com/actions/labeler
 
 name: Labeler
 on: [pull_request_target]
 
+permissions:
+  contents: read
+
 jobs:
   label:
-
     runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
 
     steps:
-    - uses: actions/labeler@8558fd74291d67161a8a78ce36a881fa63b766a9 # v5
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Label by changed files and branch name
+        uses: actions/labeler@8558fd74291d67161a8a78ce36a881fa63b766a9 # v5
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+
+      # actions/labeler cannot match the PR title, so map Conventional Commits
+      # prefixes to labels here. The title is passed via env (never interpolated
+      # into the script) and only used as regex match data, so it cannot inject
+      # shell commands.
+      - name: Label by PR title
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+        run: |
+          shopt -s nocasematch
+          if [[ "$PR_TITLE" =~ ^(feat|feature)(\(.+\))?!?: ]]; then
+            gh pr edit "$PR_NUMBER" --add-label Feature
+          fi
+          if [[ "$PR_TITLE" =~ ^(fix|bugfix)(\(.+\))?!?: ]]; then
+            gh pr edit "$PR_NUMBER" --add-label Fix
+          fi
+          if [[ "$PR_TITLE" =~ ^chore(\(.+\))?!?:[[:space:]]release ]]; then
+            gh pr edit "$PR_NUMBER" --add-label Next-Release
+          fi
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 00000000..8442c71e
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,54 @@
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  mago:
+    name: Mago (PHP lint + format check)
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f # v2
+        with:
+          php-version: "8.4"
+          tools: composer:v2
+
+      - name: Cache Composer packages
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+        with:
+          path: ~/.composer/cache/files
+          key: ${{ runner.os }}-composer-lint-${{ hashFiles('composer.json') }}
+          restore-keys: ${{ runner.os }}-composer-lint
+
+      - name: Install dev dependencies
+        run: composer install --no-interaction --no-progress
+
+      - name: Mago lint
+        run: vendor/bin/mago lint
+
+      - name: Mago format check
+        run: vendor/bin/mago fmt --dry-run
+
+  trunk:
+    name: Trunk Check (yaml, markdown, shell, actions, …)
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      checks: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+
+      - name: Trunk Check
+        uses: trunk-io/trunk-action@04ba50e7658c81db7356da96657e6e77f220bfa3 # v1.3.1
diff --git a/.github/workflows/magento-compatibility.yml b/.github/workflows/magento-compatibility.yml
index 6a0f5543..a4b8fdf6 100644
--- a/.github/workflows/magento-compatibility.yml
+++ b/.github/workflows/magento-compatibility.yml
@@ -18,15 +18,15 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - magento-version: "2.4.7-p10"
+          - magento-version: 2.4.7-p10
             php-version: "8.3"
-            search-engine-name: "opensearch"
-          - magento-version: "2.4.8-p5"
+            search-engine-name: opensearch
+          - magento-version: 2.4.8-p5
             php-version: "8.4"
-            search-engine-name: "opensearch"
-          - magento-version: "2.4.9"
+            search-engine-name: opensearch
+          - magento-version: 2.4.9
             php-version: "8.5"
-            search-engine-name: "opensearch"
+            search-engine-name: opensearch
 
     services:
       mysql:
diff --git a/.github/workflows/phpcs.yml b/.github/workflows/phpcs.yml
index 891a0270..b81655e5 100644
--- a/.github/workflows/phpcs.yml
+++ b/.github/workflows/phpcs.yml
@@ -22,8 +22,18 @@ jobs:
           php-version: ${{ env.PHP_VERSION }}
           tools: composer:v2
 
-      - name: Install Magento Coding Standard
-        run: composer create-project magento/magento-coding-standard --stability=dev /tmp/magento-coding-standard
+      - name: Cache Composer packages
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+        with:
+          path: ~/.composer/cache/files
+          key: ${{ runner.os }}-composer-phpcs-${{ hashFiles('composer.json') }}
+          restore-keys: ${{ runner.os }}-composer-phpcs
+
+      # The coding standard is a require-dev dependency of the module, so CI and
+      # local development (ddev phpcs) use the same pinned tool versions.
+      - name: Install dev dependencies
+        run: composer install --no-interaction --no-progress
 
+      # Standard and file list come from phpcs.xml.dist
       - name: Run PHPCS
-        run: /tmp/magento-coding-standard/vendor/bin/phpcs -p -s --standard=Magento2 src/
+        run: vendor/bin/phpcs -p -s
diff --git a/.gitignore b/.gitignore
index bc7704f3..732980ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,10 @@
 # AI Skills
 /.agents
 
+# Composer (module dev tooling)
+/vendor/
+/composer.lock
+
 .vscode
 /magento/
 /magento-temp/
diff --git a/.trunk/configs/.markdownlint.yaml b/.trunk/configs/.markdownlint.yaml
index b40ee9d7..311401b7 100644
--- a/.trunk/configs/.markdownlint.yaml
+++ b/.trunk/configs/.markdownlint.yaml
@@ -1,2 +1,6 @@
 # Prettier friendly markdownlint config (all formatting rules disabled)
 extends: markdownlint/style/prettier
+
+# Allow repeated headings like "### Added" across CHANGELOG release sections
+MD024:
+  siblings_only: true
diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
index b0fc6613..4e078e1b 100644
--- a/.trunk/trunk.yaml
+++ b/.trunk/trunk.yaml
@@ -21,6 +21,11 @@ lint:
     - linters: [yamllint, prettier]
       paths:
         - .ddev/**
+    # Local-dev container images (ddev-generated); health checks are defined in
+    # the compose files, and the images run as the upstream default user.
+    - linters: [checkov]
+      paths:
+        - .ddev/**
   enabled:
     - checkov@3.2.499
     - actionlint@1.7.10
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3efaaeae..46882a42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ All notable changes to this project will be documented in this file.
 
 ### Changed
 
-* **Inspector CSS Migration**: Migrated Inspector component from Tailwind CSS to pure Vanilla CSS for universal compatibility
+- **Inspector CSS Migration**: Migrated Inspector component from Tailwind CSS to pure Vanilla CSS for universal compatibility
   - All CSS classes now use `mageforge-*` prefix for namespace isolation
   - Removed Tailwind build dependency (`tailwind/` directory deprecated)
   - No npm build step required - direct CSS editing
@@ -19,389 +19,340 @@ All notable changes to this project will be documented in this file.
 
 ## [0.22.0](https://github.com/OpenForgeProject/mageforge/compare/0.21.1...0.22.0) (2026-06-01)
 
-
 ### Added
 
-* add CMS block identifier support in InspectorHints and tabs ([dcce46d](https://github.com/OpenForgeProject/mageforge/commit/dcce46d48b9b9deedb02ee82014719da70468561))
-* add Escaper dependency and improve JSON escaping in InspectorHints ([adaa5db](https://github.com/OpenForgeProject/mageforge/commit/adaa5db94326136ebaa9269ffde1a9b58a0ca3f9))
-* add magewire support for Inspector Hints ([f47d497](https://github.com/OpenForgeProject/mageforge/commit/f47d4976315c0be2e9b5a23b08da4ad1fc679b66))
-* add new color group styles to toolbar ([#188](https://github.com/OpenForgeProject/mageforge/issues/188)) ([fc4b7ee](https://github.com/OpenForgeProject/mageforge/commit/fc4b7ee8f6ae90a0d9d560c727339b6f56b83db8))
-* add new color group styles to toolbar ([#188](https://github.com/OpenForgeProject/mageforge/issues/188)) ([3cf6803](https://github.com/OpenForgeProject/mageforge/commit/3cf68032c635820abfa04912116b90a6999f23ab))
-* data-mageforge attribute handling ([35975ac](https://github.com/OpenForgeProject/mageforge/commit/35975ac997b7e107d774e666ee3f7f1e78f19ef6))
-* enable phpcs annotations for method arguments in InspectorHintsFactory ([e8c2ee3](https://github.com/OpenForgeProject/mageforge/commit/e8c2ee3d3d4efd98af21b2b85be1c465cd340b4a))
-* enhance block detection for PageBuilder elements in inspector ([0121ec8](https://github.com/OpenForgeProject/mageforge/commit/0121ec8174e1e98d09e85832216b91ed1ef499b6))
-* enhance InspectorHints to inject data attributes into root HTML elements ([0a9cf42](https://github.com/OpenForgeProject/mageforge/commit/0a9cf42980a7f95627ce3cf0a5a9a18b128624a4))
-* implement InspectorHintsFactory for creating InspectorHints instances ([3a27262](https://github.com/OpenForgeProject/mageforge/commit/3a2726230749ba25c56c13d102c763e42ff68c4d))
-* improve accessibility and functionality of inspector and toolbar components ([2873970](https://github.com/OpenForgeProject/mageforge/commit/287397062c19afa157f8e7b486319db7fca62e39))
-* improve accessibility and styling for inspector and toolbar buttons ([68b6bea](https://github.com/OpenForgeProject/mageforge/commit/68b6beacdf6743f2bd26addbdfc108a21d4a8ff4))
-* update CompatibilityCheckCommand to handle summary directly ([57a0263](https://github.com/OpenForgeProject/mageforge/commit/57a0263144329bd8e29f61ce8e2d894d534ec94e))
-
+- add CMS block identifier support in InspectorHints and tabs ([dcce46d](https://github.com/OpenForgeProject/mageforge/commit/dcce46d48b9b9deedb02ee82014719da70468561))
+- add Escaper dependency and improve JSON escaping in InspectorHints ([adaa5db](https://github.com/OpenForgeProject/mageforge/commit/adaa5db94326136ebaa9269ffde1a9b58a0ca3f9))
+- add magewire support for Inspector Hints ([f47d497](https://github.com/OpenForgeProject/mageforge/commit/f47d4976315c0be2e9b5a23b08da4ad1fc679b66))
+- add new color group styles to toolbar ([#188](https://github.com/OpenForgeProject/mageforge/issues/188)) ([fc4b7ee](https://github.com/OpenForgeProject/mageforge/commit/fc4b7ee8f6ae90a0d9d560c727339b6f56b83db8))
+- add new color group styles to toolbar ([#188](https://github.com/OpenForgeProject/mageforge/issues/188)) ([3cf6803](https://github.com/OpenForgeProject/mageforge/commit/3cf68032c635820abfa04912116b90a6999f23ab))
+- data-mageforge attribute handling ([35975ac](https://github.com/OpenForgeProject/mageforge/commit/35975ac997b7e107d774e666ee3f7f1e78f19ef6))
+- enable phpcs annotations for method arguments in InspectorHintsFactory ([e8c2ee3](https://github.com/OpenForgeProject/mageforge/commit/e8c2ee3d3d4efd98af21b2b85be1c465cd340b4a))
+- enhance block detection for PageBuilder elements in inspector ([0121ec8](https://github.com/OpenForgeProject/mageforge/commit/0121ec8174e1e98d09e85832216b91ed1ef499b6))
+- enhance InspectorHints to inject data attributes into root HTML elements ([0a9cf42](https://github.com/OpenForgeProject/mageforge/commit/0a9cf42980a7f95627ce3cf0a5a9a18b128624a4))
+- implement InspectorHintsFactory for creating InspectorHints instances ([3a27262](https://github.com/OpenForgeProject/mageforge/commit/3a2726230749ba25c56c13d102c763e42ff68c4d))
+- improve accessibility and functionality of inspector and toolbar components ([2873970](https://github.com/OpenForgeProject/mageforge/commit/287397062c19afa157f8e7b486319db7fca62e39))
+- improve accessibility and styling for inspector and toolbar buttons ([68b6bea](https://github.com/OpenForgeProject/mageforge/commit/68b6beacdf6743f2bd26addbdfc108a21d4a8ff4))
+- update CompatibilityCheckCommand to handle summary directly ([57a0263](https://github.com/OpenForgeProject/mageforge/commit/57a0263144329bd8e29f61ce8e2d894d534ec94e))
 
 ### Fixed
 
-* simplify warning display logic in CompatibilityChecker ([41a895f](https://github.com/OpenForgeProject/mageforge/commit/41a895f44097e0d8122201f72155dfe16485819f))
+- simplify warning display logic in CompatibilityChecker ([41a895f](https://github.com/OpenForgeProject/mageforge/commit/41a895f44097e0d8122201f72155dfe16485819f))
 
 ## [0.21.1](https://github.com/OpenForgeProject/mageforge/compare/0.21.0...0.21.1) (2026-05-15)
 
-
 ### Fixed
 
-* cast render result to string in InspectorHints ([#187](https://github.com/OpenForgeProject/mageforge/issues/187)) ([c857129](https://github.com/OpenForgeProject/mageforge/commit/c8571298a7958aaa4e8d921d5a999897d1a08cb0))
-* update shas and update to node24 workflows ([36bd346](https://github.com/OpenForgeProject/mageforge/commit/36bd346ad8fc7944de19505796fafc890016b0e3))
+- cast render result to string in InspectorHints ([#187](https://github.com/OpenForgeProject/mageforge/issues/187)) ([c857129](https://github.com/OpenForgeProject/mageforge/commit/c8571298a7958aaa4e8d921d5a999897d1a08cb0))
+- update shas and update to node24 workflows ([36bd346](https://github.com/OpenForgeProject/mageforge/commit/36bd346ad8fc7944de19505796fafc890016b0e3))
 
 ## [0.21.0](https://github.com/OpenForgeProject/mageforge/compare/0.20.0...0.21.0) (2026-05-11)
 
-
 ### Added
 
-* add toolbar position configuration and implement in UI ([3f331bf](https://github.com/OpenForgeProject/mageforge/commit/3f331bf0f0cdd8e9b3fd5be6e9d41506dc281db5))
-* health scoring ([#182](https://github.com/OpenForgeProject/mageforge/issues/182)) ([89bba7c](https://github.com/OpenForgeProject/mageforge/commit/89bba7c62b3755729d1ec169026c72aa18691f7b))
-
+- add toolbar position configuration and implement in UI ([3f331bf](https://github.com/OpenForgeProject/mageforge/commit/3f331bf0f0cdd8e9b3fd5be6e9d41506dc281db5))
+- health scoring ([#182](https://github.com/OpenForgeProject/mageforge/issues/182)) ([89bba7c](https://github.com/OpenForgeProject/mageforge/commit/89bba7c62b3755729d1ec169026c72aa18691f7b))
 
 ### Fixed
 
-* exclude toolbar elements from tab-order & mark overflow-clipped focusables as unreachable ([1484347](https://github.com/OpenForgeProject/mageforge/commit/1484347108235591ae5e1798e232fa7af7ee6c11))
-
+- exclude toolbar elements from tab-order & mark overflow-clipped focusables as unreachable ([1484347](https://github.com/OpenForgeProject/mageforge/commit/1484347108235591ae5e1798e232fa7af7ee6c11))
 
 ### Changed
 
-* centralize inspector configuration constants in Inspector class ([b7c9027](https://github.com/OpenForgeProject/mageforge/commit/b7c9027c242ba23dcf2c69214ce52a41f7dbcfa3))
-
+- centralize inspector configuration constants in Inspector class ([b7c9027](https://github.com/OpenForgeProject/mageforge/commit/b7c9027c242ba23dcf2c69214ce52a41f7dbcfa3))
 
 ### Documentation
 
-* add frontend toolbar section and image to README ([1a2fb75](https://github.com/OpenForgeProject/mageforge/commit/1a2fb756ecbd0003704e0d5a6fa62bc267624f5e))
-* update toolbar image from PNG to JPEG format ([1e1bafd](https://github.com/OpenForgeProject/mageforge/commit/1e1bafd824e62ce1ac4603346d5738684997b95b))
+- add frontend toolbar section and image to README ([1a2fb75](https://github.com/OpenForgeProject/mageforge/commit/1a2fb756ecbd0003704e0d5a6fa62bc267624f5e))
+- update toolbar image from PNG to JPEG format ([1e1bafd](https://github.com/OpenForgeProject/mageforge/commit/1e1bafd824e62ce1ac4603346d5738684997b95b))
 
 ## [0.20.0](https://github.com/OpenForgeProject/mageforge/compare/0.19.1...0.20.0) (2026-04-26)
 
-
 ### Added
 
-* add additional audits for accessibility and usability checks ([2dfea0d](https://github.com/OpenForgeProject/mageforge/commit/2dfea0de47b1e9b59f92260448ff5c679bdc2577))
-* add additional audits for accessibility and usability checks ([ad30fe9](https://github.com/OpenForgeProject/mageforge/commit/ad30fe9461e8f31b7258e877ae7771829f530eb3))
-* add additional check for elements within the toolbar ([877edcd](https://github.com/OpenForgeProject/mageforge/commit/877edcd5269bdee8eb04429d1b493479113722b5))
-* add warning styles and enhance audit checks for toolbar elements ([cfab08a](https://github.com/OpenForgeProject/mageforge/commit/cfab08ac520451ddefac021f4594f433917bdf2f))
-* clarify description for unsafe target="_blank" audit ([2df5ff2](https://github.com/OpenForgeProject/mageforge/commit/2df5ff2f5ce91adbd48ed8d094da5ecfc5f8036a))
-* enhance audits for duplicate IDs and interactive elements ([002d30f](https://github.com/OpenForgeProject/mageforge/commit/002d30fda814240cbb1122f2823521eb12c64607))
-* exclude toolbar elements from highlight application ([bfdcc29](https://github.com/OpenForgeProject/mageforge/commit/bfdcc29a6362cb0b8a2085f66228b30aaa9d9236))
-* update minimum size for small touch targets audit ([d492c1e](https://github.com/OpenForgeProject/mageforge/commit/d492c1edcb7dc99389f3fadfb59fe8aa5cc6827c))
-* update touch target size description for accessibility audit ([81ae5e4](https://github.com/OpenForgeProject/mageforge/commit/81ae5e42b782c2a619503a6ee9c0e8dc598af7ea))
-
+- add additional audits for accessibility and usability checks ([2dfea0d](https://github.com/OpenForgeProject/mageforge/commit/2dfea0de47b1e9b59f92260448ff5c679bdc2577))
+- add additional audits for accessibility and usability checks ([ad30fe9](https://github.com/OpenForgeProject/mageforge/commit/ad30fe9461e8f31b7258e877ae7771829f530eb3))
+- add additional check for elements within the toolbar ([877edcd](https://github.com/OpenForgeProject/mageforge/commit/877edcd5269bdee8eb04429d1b493479113722b5))
+- add warning styles and enhance audit checks for toolbar elements ([cfab08a](https://github.com/OpenForgeProject/mageforge/commit/cfab08ac520451ddefac021f4594f433917bdf2f))
+- clarify description for unsafe target="\_blank" audit ([2df5ff2](https://github.com/OpenForgeProject/mageforge/commit/2df5ff2f5ce91adbd48ed8d094da5ecfc5f8036a))
+- enhance audits for duplicate IDs and interactive elements ([002d30f](https://github.com/OpenForgeProject/mageforge/commit/002d30fda814240cbb1122f2823521eb12c64607))
+- exclude toolbar elements from highlight application ([bfdcc29](https://github.com/OpenForgeProject/mageforge/commit/bfdcc29a6362cb0b8a2085f66228b30aaa9d9236))
+- update minimum size for small touch targets audit ([d492c1e](https://github.com/OpenForgeProject/mageforge/commit/d492c1edcb7dc99389f3fadfb59fe8aa5cc6827c))
+- update touch target size description for accessibility audit ([81ae5e4](https://github.com/OpenForgeProject/mageforge/commit/81ae5e42b782c2a619503a6ee9c0e8dc598af7ea))
 
 ### Fixed
 
-* add aria-expanded attribute for burger button accessibility ([363403b](https://github.com/OpenForgeProject/mageforge/commit/363403b0252c79db27d8d3e6367cae13cd8ecac9))
-* cast show labels to integer for consistent data attribute ([37658fb](https://github.com/OpenForgeProject/mageforge/commit/37658fb5e1c3e98dd800722f2c95761da4612d42))
-* disable inspector in config and update layout reference ([#175](https://github.com/OpenForgeProject/mageforge/issues/175)) ([99c71a9](https://github.com/OpenForgeProject/mageforge/commit/99c71a9d4566bf90782e7e26a72edc3ff3ab5486))
-* enhance constructor PHPDoc for Inspector and ThemeSuggester classes ([ad2eb35](https://github.com/OpenForgeProject/mageforge/commit/ad2eb35a77dfef3a93689cd0b26d5ad4cfa8e201))
-* ensure audits are deactivated on toolbar destruction ([b1a16fd](https://github.com/OpenForgeProject/mageforge/commit/b1a16fd2770b62e7524da5139f30ab85148e31f5))
-* improve type safety and clean up PHPDoc in Inspector block ([0c63ac3](https://github.com/OpenForgeProject/mageforge/commit/0c63ac316f32e8f8b74892f8b53f85988eefe883))
-* normalise opacity visibility check across all toolbar audits ([0fb1642](https://github.com/OpenForgeProject/mageforge/commit/0fb16422ef56c406c3d053a6145c2ebadda417ec))
-* refine theme path matching and enhance theme suggestion logic ([3484f34](https://github.com/OpenForgeProject/mageforge/commit/3484f349bf7ab660b9f5574811d675de2ca75f3f))
-* refine theme path matching and enhance theme suggestion logic ([fc1747b](https://github.com/OpenForgeProject/mageforge/commit/fc1747b90cba6a28176225aee7631a1d1744df70))
-* streamline toolbar destruction process and clean up references ([65221fe](https://github.com/OpenForgeProject/mageforge/commit/65221fe830848b823b63c3d0806864e28309f2d0))
-* toolbar fixes ([#177](https://github.com/OpenForgeProject/mageforge/issues/177)) ([f4382b5](https://github.com/OpenForgeProject/mageforge/commit/f4382b52420954e039820b96cc55fa5c8bbecf29))
-* update aria-expanded attribute for collapsible menu groups ([96ac5e1](https://github.com/OpenForgeProject/mageforge/commit/96ac5e17591ce181484d0bbbb8f3237adb21accd))
-
+- add aria-expanded attribute for burger button accessibility ([363403b](https://github.com/OpenForgeProject/mageforge/commit/363403b0252c79db27d8d3e6367cae13cd8ecac9))
+- cast show labels to integer for consistent data attribute ([37658fb](https://github.com/OpenForgeProject/mageforge/commit/37658fb5e1c3e98dd800722f2c95761da4612d42))
+- disable inspector in config and update layout reference ([#175](https://github.com/OpenForgeProject/mageforge/issues/175)) ([99c71a9](https://github.com/OpenForgeProject/mageforge/commit/99c71a9d4566bf90782e7e26a72edc3ff3ab5486))
+- enhance constructor PHPDoc for Inspector and ThemeSuggester classes ([ad2eb35](https://github.com/OpenForgeProject/mageforge/commit/ad2eb35a77dfef3a93689cd0b26d5ad4cfa8e201))
+- ensure audits are deactivated on toolbar destruction ([b1a16fd](https://github.com/OpenForgeProject/mageforge/commit/b1a16fd2770b62e7524da5139f30ab85148e31f5))
+- improve type safety and clean up PHPDoc in Inspector block ([0c63ac3](https://github.com/OpenForgeProject/mageforge/commit/0c63ac316f32e8f8b74892f8b53f85988eefe883))
+- normalise opacity visibility check across all toolbar audits ([0fb1642](https://github.com/OpenForgeProject/mageforge/commit/0fb16422ef56c406c3d053a6145c2ebadda417ec))
+- refine theme path matching and enhance theme suggestion logic ([3484f34](https://github.com/OpenForgeProject/mageforge/commit/3484f349bf7ab660b9f5574811d675de2ca75f3f))
+- refine theme path matching and enhance theme suggestion logic ([fc1747b](https://github.com/OpenForgeProject/mageforge/commit/fc1747b90cba6a28176225aee7631a1d1744df70))
+- streamline toolbar destruction process and clean up references ([65221fe](https://github.com/OpenForgeProject/mageforge/commit/65221fe830848b823b63c3d0806864e28309f2d0))
+- toolbar fixes ([#177](https://github.com/OpenForgeProject/mageforge/issues/177)) ([f4382b5](https://github.com/OpenForgeProject/mageforge/commit/f4382b52420954e039820b96cc55fa5c8bbecf29))
+- update aria-expanded attribute for collapsible menu groups ([96ac5e1](https://github.com/OpenForgeProject/mageforge/commit/96ac5e17591ce181484d0bbbb8f3237adb21accd))
 
 ### Styling
 
-* adjust toolbar dimensions for better usability on small devices ([d41c6e2](https://github.com/OpenForgeProject/mageforge/commit/d41c6e2bfb8eb1659d9dd23a37e40aaf79b9f278))
-* update toolbar CSS for improved visibility ([84f80de](https://github.com/OpenForgeProject/mageforge/commit/84f80de1ab7884fe057e27d7356d4e9c31b815a5))
-* update toolbar for improved design ([4871193](https://github.com/OpenForgeProject/mageforge/commit/48711932074ec8867cfb63bd97addccf389b4783))
+- adjust toolbar dimensions for better usability on small devices ([d41c6e2](https://github.com/OpenForgeProject/mageforge/commit/d41c6e2bfb8eb1659d9dd23a37e40aaf79b9f278))
+- update toolbar CSS for improved visibility ([84f80de](https://github.com/OpenForgeProject/mageforge/commit/84f80de1ab7884fe057e27d7356d4e9c31b815a5))
+- update toolbar for improved design ([4871193](https://github.com/OpenForgeProject/mageforge/commit/48711932074ec8867cfb63bd97addccf389b4783))
 
 ## [0.19.1](https://github.com/OpenForgeProject/mageforge/compare/0.19.0...0.19.1) (2026-04-22)
 
-
 ### Fixed
 
-* remove cacheable attribute from inspector block ([#174](https://github.com/OpenForgeProject/mageforge/issues/174)) ([e12e44e](https://github.com/OpenForgeProject/mageforge/commit/e12e44ecaf5b1372705fe90ef01f476e554e1639))
-
+- remove cacheable attribute from inspector block ([#174](https://github.com/OpenForgeProject/mageforge/issues/174)) ([e12e44e](https://github.com/OpenForgeProject/mageforge/commit/e12e44ecaf5b1372705fe90ef01f476e554e1639))
 
 ### Documentation
 
-* Fix commands.md numbering, missing sections, and flag inconsistencies ([#172](https://github.com/OpenForgeProject/mageforge/issues/172)) ([ba5498f](https://github.com/OpenForgeProject/mageforge/commit/ba5498fe8d5741d03da2fb5350003c2f5085d07f))
+- Fix commands.md numbering, missing sections, and flag inconsistencies ([#172](https://github.com/OpenForgeProject/mageforge/issues/172)) ([ba5498f](https://github.com/OpenForgeProject/mageforge/commit/ba5498fe8d5741d03da2fb5350003c2f5085d07f))
 
 ## [0.19.0](https://github.com/OpenForgeProject/mageforge/compare/0.18.0...0.19.0) (2026-04-13)
 
-
 ### Added
 
-* defer page timing caching until load event and add global metrics ([6721e60](https://github.com/OpenForgeProject/mageforge/commit/6721e60a7ac25118154f3a79ee1704f39ee2bd51))
-
+- defer page timing caching until load event and add global metrics ([6721e60](https://github.com/OpenForgeProject/mageforge/commit/6721e60a7ac25118154f3a79ee1704f39ee2bd51))
 
 ### Fixed
 
-* clamp badge dragging within viewport boundaries ([03aee99](https://github.com/OpenForgeProject/mageforge/commit/03aee99cc88b178caf97573c4bdccb7e3f1cbc4b))
-* ensure drag end handler is removed on draggable removal ([8957129](https://github.com/OpenForgeProject/mageforge/commit/8957129173c01ccc506507f90e7cdbab1e9f141d))
-
+- clamp badge dragging within viewport boundaries ([03aee99](https://github.com/OpenForgeProject/mageforge/commit/03aee99cc88b178caf97573c4bdccb7e3f1cbc4b))
+- ensure drag end handler is removed on draggable removal ([8957129](https://github.com/OpenForgeProject/mageforge/commit/8957129173c01ccc506507f90e7cdbab1e9f141d))
 
 ### Changed
 
-* enhance toolbar menu display logic with CSS transitions ([e150700](https://github.com/OpenForgeProject/mageforge/commit/e1507005803446c859a9dfa21ba25f40ee95ba63))
-* simplify connector management in draggable methods ([c995694](https://github.com/OpenForgeProject/mageforge/commit/c99569479244263108368d19f63a3fca155996bc))
-* update audit overlay styles and improve highlight logic ([27f1588](https://github.com/OpenForgeProject/mageforge/commit/27f15881db9d30c18e5eb78ea480d86bb0bef15e))
+- enhance toolbar menu display logic with CSS transitions ([e150700](https://github.com/OpenForgeProject/mageforge/commit/e1507005803446c859a9dfa21ba25f40ee95ba63))
+- simplify connector management in draggable methods ([c995694](https://github.com/OpenForgeProject/mageforge/commit/c99569479244263108368d19f63a3fca155996bc))
+- update audit overlay styles and improve highlight logic ([27f1588](https://github.com/OpenForgeProject/mageforge/commit/27f15881db9d30c18e5eb78ea480d86bb0bef15e))
 
 ## [0.18.0](https://github.com/OpenForgeProject/mageforge/compare/0.17.0...0.18.0) (2026-04-13)
 
-
 ### Added
 
-* toolbar audit highlighting ([4fcfc7d](https://github.com/OpenForgeProject/mageforge/commit/4fcfc7d5cda0c813906dadb2060e1496e90d4504))
+- toolbar audit highlighting ([4fcfc7d](https://github.com/OpenForgeProject/mageforge/commit/4fcfc7d5cda0c813906dadb2060e1496e90d4504))
 
 ## [0.17.0](https://github.com/OpenForgeProject/mageforge/compare/0.16.0...0.17.0) (2026-04-12)
 
-
 ### Added
 
-* add MageForge Toolbar with basic audits ([#167](https://github.com/OpenForgeProject/mageforge/issues/167)) ([2a8a8ba](https://github.com/OpenForgeProject/mageforge/commit/2a8a8ba02f53befd2b290e06f19f89480571f27e))
-
+- add MageForge Toolbar with basic audits ([#167](https://github.com/OpenForgeProject/mageforge/issues/167)) ([2a8a8ba](https://github.com/OpenForgeProject/mageforge/commit/2a8a8ba02f53befd2b290e06f19f89480571f27e))
 
 ### Fixed
 
-* adjust initial badge position and add scroll handler for connector ([#162](https://github.com/OpenForgeProject/mageforge/issues/162)) ([84baaf0](https://github.com/OpenForgeProject/mageforge/commit/84baaf07e328ecec143f1dbae6db5fec504375df))
-* enhance role determination for input elements in accessibility analysis ([adb7996](https://github.com/OpenForgeProject/mageforge/commit/adb799637aab11b040934738f2f47326d2249c0c))
-* enhance structure rendering with additional properties ([109418b](https://github.com/OpenForgeProject/mageforge/commit/109418bb1cd5060fbd56bce30717520eeffef1cd))
-* handle click outside inspector overlay correctly when pinned ([c885f81](https://github.com/OpenForgeProject/mageforge/commit/c885f8133ca6c74292248b17bbe2cbf2da805d05))
-* improve badge update logic to prevent flickering ([5526e15](https://github.com/OpenForgeProject/mageforge/commit/5526e1541ec4eca0a403b1095f975d509d6da866))
-* improve CSS resource matching in element resource categorization ([a1dba6a](https://github.com/OpenForgeProject/mageforge/commit/a1dba6af5557831626f91f12f6833b4282e821b4))
-* remove INP metric tracking from performance and vitals modules ([#165](https://github.com/OpenForgeProject/mageforge/issues/165)) ([6c78a39](https://github.com/OpenForgeProject/mageforge/commit/6c78a399f78f1b13a56db5a96098e3ff7a5a1a1c))
-* remove unused badge offset in position calculation for info badge ([686387b](https://github.com/OpenForgeProject/mageforge/commit/686387b2fad00af960249b329362bdcd8b470da4))
-* update cursor check for interactive elements in accessibility analysis ([c430f99](https://github.com/OpenForgeProject/mageforge/commit/c430f99d7c8b2decb4a494df7cc721ca2bfd1b21))
-* update pull request header for clarity on changes ([ccd5a47](https://github.com/OpenForgeProject/mageforge/commit/ccd5a47c6c50093194cfd14ab8645c0b18415ac9))
-* update pull request title and header formatting in config ([0dbab2e](https://github.com/OpenForgeProject/mageforge/commit/0dbab2ecf6b233b0534e8106d0e9a5951708b144))
-
+- adjust initial badge position and add scroll handler for connector ([#162](https://github.com/OpenForgeProject/mageforge/issues/162)) ([84baaf0](https://github.com/OpenForgeProject/mageforge/commit/84baaf07e328ecec143f1dbae6db5fec504375df))
+- enhance role determination for input elements in accessibility analysis ([adb7996](https://github.com/OpenForgeProject/mageforge/commit/adb799637aab11b040934738f2f47326d2249c0c))
+- enhance structure rendering with additional properties ([109418b](https://github.com/OpenForgeProject/mageforge/commit/109418bb1cd5060fbd56bce30717520eeffef1cd))
+- handle click outside inspector overlay correctly when pinned ([c885f81](https://github.com/OpenForgeProject/mageforge/commit/c885f8133ca6c74292248b17bbe2cbf2da805d05))
+- improve badge update logic to prevent flickering ([5526e15](https://github.com/OpenForgeProject/mageforge/commit/5526e1541ec4eca0a403b1095f975d509d6da866))
+- improve CSS resource matching in element resource categorization ([a1dba6a](https://github.com/OpenForgeProject/mageforge/commit/a1dba6af5557831626f91f12f6833b4282e821b4))
+- remove INP metric tracking from performance and vitals modules ([#165](https://github.com/OpenForgeProject/mageforge/issues/165)) ([6c78a39](https://github.com/OpenForgeProject/mageforge/commit/6c78a399f78f1b13a56db5a96098e3ff7a5a1a1c))
+- remove unused badge offset in position calculation for info badge ([686387b](https://github.com/OpenForgeProject/mageforge/commit/686387b2fad00af960249b329362bdcd8b470da4))
+- update cursor check for interactive elements in accessibility analysis ([c430f99](https://github.com/OpenForgeProject/mageforge/commit/c430f99d7c8b2decb4a494df7cc721ca2bfd1b21))
+- update pull request header for clarity on changes ([ccd5a47](https://github.com/OpenForgeProject/mageforge/commit/ccd5a47c6c50093194cfd14ab8645c0b18415ac9))
+- update pull request title and header formatting in config ([0dbab2e](https://github.com/OpenForgeProject/mageforge/commit/0dbab2ecf6b233b0534e8106d0e9a5951708b144))
 
 ### Changed
 
-* remove feature views and new badge logic from inspector ([#164](https://github.com/OpenForgeProject/mageforge/issues/164)) ([3bf7143](https://github.com/OpenForgeProject/mageforge/commit/3bf714332cd1d85d3ca5235318a7e3adbc72f47a))
-* use WeakMap for block data storage in inspector ([#166](https://github.com/OpenForgeProject/mageforge/issues/166)) ([5c383fd](https://github.com/OpenForgeProject/mageforge/commit/5c383fd7e099b8ebe684129cc5e9b07646d3b9eb))
+- remove feature views and new badge logic from inspector ([#164](https://github.com/OpenForgeProject/mageforge/issues/164)) ([3bf7143](https://github.com/OpenForgeProject/mageforge/commit/3bf714332cd1d85d3ca5235318a7e3adbc72f47a))
+- use WeakMap for block data storage in inspector ([#166](https://github.com/OpenForgeProject/mageforge/issues/166)) ([5c383fd](https://github.com/OpenForgeProject/mageforge/commit/5c383fd7e099b8ebe684129cc5e9b07646d3b9eb))
 
 ## [0.16.0](https://github.com/OpenForgeProject/mageforge/compare/0.15.1...0.16.0) (2026-04-10)
 
-
 ### Added
 
-* add CSP whitelist and update Alpine.js to version 3.15.11 with hash security ([#159](https://github.com/OpenForgeProject/mageforge/issues/159)) ([fa811bd](https://github.com/OpenForgeProject/mageforge/commit/fa811bddbf48d531b528163eb210335a3c01eeca))
-* update PHP and Magento framework requirements in composer.json [#155](https://github.com/OpenForgeProject/mageforge/issues/155) ([#156](https://github.com/OpenForgeProject/mageforge/issues/156)) ([9a3f92d](https://github.com/OpenForgeProject/mageforge/commit/9a3f92dc102a9d7e2671d8b8330a276a18d8b042))
-
+- add CSP whitelist and update Alpine.js to version 3.15.11 with hash security ([#159](https://github.com/OpenForgeProject/mageforge/issues/159)) ([fa811bd](https://github.com/OpenForgeProject/mageforge/commit/fa811bddbf48d531b528163eb210335a3c01eeca))
+- update PHP and Magento framework requirements in composer.json [#155](https://github.com/OpenForgeProject/mageforge/issues/155) ([#156](https://github.com/OpenForgeProject/mageforge/issues/156)) ([9a3f92d](https://github.com/OpenForgeProject/mageforge/commit/9a3f92dc102a9d7e2671d8b8330a276a18d8b042))
 
 ### Fixed
 
-* add keydownHandler and impove performance observers to inspector ([#160](https://github.com/OpenForgeProject/mageforge/issues/160)) ([5639b87](https://github.com/OpenForgeProject/mageforge/commit/5639b87ecc92277ca429055f37382997fd48aefb))
-* Refactor inspector.js into ES modules ([#161](https://github.com/OpenForgeProject/mageforge/issues/161)) ([f3fb74d](https://github.com/OpenForgeProject/mageforge/commit/f3fb74dc7e6090de172d0f1350bef713c1803ad5))
-* updated advanced_usage.md for better understanding ([#158](https://github.com/OpenForgeProject/mageforge/issues/158)) ([956efe4](https://github.com/OpenForgeProject/mageforge/commit/956efe4053d6ac75de5cc04b89c685da46e94bf6))
+- add keydownHandler and impove performance observers to inspector ([#160](https://github.com/OpenForgeProject/mageforge/issues/160)) ([5639b87](https://github.com/OpenForgeProject/mageforge/commit/5639b87ecc92277ca429055f37382997fd48aefb))
+- Refactor inspector.js into ES modules ([#161](https://github.com/OpenForgeProject/mageforge/issues/161)) ([f3fb74d](https://github.com/OpenForgeProject/mageforge/commit/f3fb74dc7e6090de172d0f1350bef713c1803ad5))
+- updated advanced_usage.md for better understanding ([#158](https://github.com/OpenForgeProject/mageforge/issues/158)) ([956efe4](https://github.com/OpenForgeProject/mageforge/commit/956efe4053d6ac75de5cc04b89c685da46e94bf6))
 
 ## [0.15.1](https://github.com/OpenForgeProject/mageforge/compare/0.15.0...0.15.1) (2026-03-18)
 
-
 ### Fixed
 
-* update phpstan to level 9 ([#152](https://github.com/OpenForgeProject/mageforge/issues/152)) ([c57f6c7](https://github.com/OpenForgeProject/mageforge/commit/c57f6c71c4c15a738b115b667db744b395553e5a))
+- update phpstan to level 9 ([#152](https://github.com/OpenForgeProject/mageforge/issues/152)) ([c57f6c7](https://github.com/OpenForgeProject/mageforge/commit/c57f6c71c4c15a738b115b667db744b395553e5a))
 
 ## [0.15.0](https://github.com/OpenForgeProject/mageforge/compare/0.14.1...0.15.0) (2026-03-18)
 
-
 ### Added
 
-* add wildcard theme resolution to build and clean commands ([#150](https://github.com/OpenForgeProject/mageforge/issues/150)) ([ec4316d](https://github.com/OpenForgeProject/mageforge/commit/ec4316def7318a88395e3566eb1415757990b181))
+- add wildcard theme resolution to build and clean commands ([#150](https://github.com/OpenForgeProject/mageforge/issues/150)) ([ec4316d](https://github.com/OpenForgeProject/mageforge/commit/ec4316def7318a88395e3566eb1415757990b181))
 
 ## [0.14.1](https://github.com/OpenForgeProject/mageforge/compare/0.14.0...0.14.1) (2026-03-12)
 
-
 ### Fixed
 
-* ensure theme codes are indexed correctly in commands ([#149](https://github.com/OpenForgeProject/mageforge/issues/149)) ([f9175a7](https://github.com/OpenForgeProject/mageforge/commit/f9175a75e017965a0014cd71b940ce354ce64633))
-* update Magento requirement to 2.4.7 with PHP 8.3 in README ([3b4cfca](https://github.com/OpenForgeProject/mageforge/commit/3b4cfca7a041f0dca8b9c3c88f2114789628471c))
-* update Magento version to 2.4.7-p9 in compatibility workflow ([79eb0b2](https://github.com/OpenForgeProject/mageforge/commit/79eb0b264918d662f7e2308c022ea3f6ddd5ea94))
-* update PHP version and Magento version in compatibility matrix ([8d662f6](https://github.com/OpenForgeProject/mageforge/commit/8d662f6864f9a8a7f5a78ab508dc59fe54712adb))
+- ensure theme codes are indexed correctly in commands ([#149](https://github.com/OpenForgeProject/mageforge/issues/149)) ([f9175a7](https://github.com/OpenForgeProject/mageforge/commit/f9175a75e017965a0014cd71b940ce354ce64633))
+- update Magento requirement to 2.4.7 with PHP 8.3 in README ([3b4cfca](https://github.com/OpenForgeProject/mageforge/commit/3b4cfca7a041f0dca8b9c3c88f2114789628471c))
+- update Magento version to 2.4.7-p9 in compatibility workflow ([79eb0b2](https://github.com/OpenForgeProject/mageforge/commit/79eb0b264918d662f7e2308c022ea3f6ddd5ea94))
+- update PHP version and Magento version in compatibility matrix ([8d662f6](https://github.com/OpenForgeProject/mageforge/commit/8d662f6864f9a8a7f5a78ab508dc59fe54712adb))
 
 ## [0.14.0](https://github.com/OpenForgeProject/mageforge/compare/0.13.0...0.14.0) (2026-03-06)
 
-
 ### Added
 
-* replace MultiSelectPrompt with MultiSearchPrompt for theme selection ([bc89442](https://github.com/OpenForgeProject/mageforge/commit/bc89442fa6f9d77043462c02e842437211065cd7))
+- replace MultiSelectPrompt with MultiSearchPrompt for theme selection ([bc89442](https://github.com/OpenForgeProject/mageforge/commit/bc89442fa6f9d77043462c02e842437211065cd7))
 
 ## [0.13.0](https://github.com/OpenForgeProject/mageforge/compare/0.12.0...0.13.0) (2026-03-03)
 
-
 ### Added
 
-* add NodeSetupValidator for validating Magento default setup files ([#142](https://github.com/OpenForgeProject/mageforge/issues/142)) ([3f36d43](https://github.com/OpenForgeProject/mageforge/commit/3f36d433a04ac31be0ca84f04cd4495245ecf52e))
-
+- add NodeSetupValidator for validating Magento default setup files ([#142](https://github.com/OpenForgeProject/mageforge/issues/142)) ([3f36d43](https://github.com/OpenForgeProject/mageforge/commit/3f36d433a04ac31be0ca84f04cd4495245ecf52e))
 
 ### Fixed
 
-* resolve phpcs errors ([#145](https://github.com/OpenForgeProject/mageforge/issues/145)) ([cb90564](https://github.com/OpenForgeProject/mageforge/commit/cb905645175d6dd49d79b787b5545e1b6c0df422))
-* run mago format ([#146](https://github.com/OpenForgeProject/mageforge/issues/146)) ([fa34cd8](https://github.com/OpenForgeProject/mageforge/commit/fa34cd8c8edc2453ec4b446b56ac16f51cd4858f))
+- resolve phpcs errors ([#145](https://github.com/OpenForgeProject/mageforge/issues/145)) ([cb90564](https://github.com/OpenForgeProject/mageforge/commit/cb905645175d6dd49d79b787b5545e1b6c0df422))
+- run mago format ([#146](https://github.com/OpenForgeProject/mageforge/issues/146)) ([fa34cd8](https://github.com/OpenForgeProject/mageforge/commit/fa34cd8c8edc2453ec4b446b56ac16f51cd4858f))
 
 ## [0.12.0](https://github.com/OpenForgeProject/mageforge/compare/0.11.0...0.12.0) (2026-02-14)
 
-
 ### Added
 
-* **actions:** replace elasticsearch with opensearch ([#137](https://github.com/OpenForgeProject/mageforge/issues/137)) ([cc8c534](https://github.com/OpenForgeProject/mageforge/commit/cc8c53428288a45b8ad645baf87623bf4a8b9a1f))
-
+- **actions:** replace elasticsearch with opensearch ([#137](https://github.com/OpenForgeProject/mageforge/issues/137)) ([cc8c534](https://github.com/OpenForgeProject/mageforge/commit/cc8c53428288a45b8ad645baf87623bf4a8b9a1f))
 
 ### Fixed
 
-* correct font size and border radius in inspector CSS ([7bb3348](https://github.com/OpenForgeProject/mageforge/commit/7bb334806a134687bd06cf55e5f27682947f3c84))
-* phpcs errors ([#138](https://github.com/OpenForgeProject/mageforge/issues/138)) ([625c6da](https://github.com/OpenForgeProject/mageforge/commit/625c6da89882d19605713e4c295af713700890aa))
-* **phpcs:** refactor environment variable handling in commands ([#135](https://github.com/OpenForgeProject/mageforge/issues/135)) ([9c01ce5](https://github.com/OpenForgeProject/mageforge/commit/9c01ce5fe269c0b917c95b5804542c7ee7840af3))
-* update font settings and sizes in inspector CSS ([986ded6](https://github.com/OpenForgeProject/mageforge/commit/986ded6aeafe628c0549dc6d72f6ae119421d9df))
-
+- correct font size and border radius in inspector CSS ([7bb3348](https://github.com/OpenForgeProject/mageforge/commit/7bb334806a134687bd06cf55e5f27682947f3c84))
+- phpcs errors ([#138](https://github.com/OpenForgeProject/mageforge/issues/138)) ([625c6da](https://github.com/OpenForgeProject/mageforge/commit/625c6da89882d19605713e4c295af713700890aa))
+- **phpcs:** refactor environment variable handling in commands ([#135](https://github.com/OpenForgeProject/mageforge/issues/135)) ([9c01ce5](https://github.com/OpenForgeProject/mageforge/commit/9c01ce5fe269c0b917c95b5804542c7ee7840af3))
+- update font settings and sizes in inspector CSS ([986ded6](https://github.com/OpenForgeProject/mageforge/commit/986ded6aeafe628c0549dc6d72f6ae119421d9df))
 
 ### Documentation
 
-* update README with custom theme details and add inspector section ([084b528](https://github.com/OpenForgeProject/mageforge/commit/084b52815adb78b4292d748fc100a8be3994844c))
+- update README with custom theme details and add inspector section ([084b528](https://github.com/OpenForgeProject/mageforge/commit/084b52815adb78b4292d748fc100a8be3994844c))
 
 ## [0.11.0](https://github.com/OpenForgeProject/mageforge/compare/0.10.3...0.11.0) (2026-02-10)
 
-
 ### Added
 
-* add cache and webvitals tabs to inspector and improve ux with dragable overlay ([#127](https://github.com/OpenForgeProject/mageforge/issues/127)) ([eea755d](https://github.com/OpenForgeProject/mageforge/commit/eea755d1b38fe9e736a49157192babc5b98fbb10))
-* implement dark/light mode theme selection and admin configuration section ([#131](https://github.com/OpenForgeProject/mageforge/issues/131)) ([0a95280](https://github.com/OpenForgeProject/mageforge/commit/0a952808b6a5f7102aa5ad4b874e576d67f77bd1))
-
+- add cache and webvitals tabs to inspector and improve ux with dragable overlay ([#127](https://github.com/OpenForgeProject/mageforge/issues/127)) ([eea755d](https://github.com/OpenForgeProject/mageforge/commit/eea755d1b38fe9e736a49157192babc5b98fbb10))
+- implement dark/light mode theme selection and admin configuration section ([#131](https://github.com/OpenForgeProject/mageforge/issues/131)) ([0a95280](https://github.com/OpenForgeProject/mageforge/commit/0a952808b6a5f7102aa5ad4b874e576d67f77bd1))
 
 ### Fixed
 
-* remove metric icons and rename metric titles for better ux ([#129](https://github.com/OpenForgeProject/mageforge/issues/129)) ([11d3c45](https://github.com/OpenForgeProject/mageforge/commit/11d3c45991684e5936862386e5a6e731ce7962ff))
+- remove metric icons and rename metric titles for better ux ([#129](https://github.com/OpenForgeProject/mageforge/issues/129)) ([11d3c45](https://github.com/OpenForgeProject/mageforge/commit/11d3c45991684e5936862386e5a6e731ce7962ff))
 
 ## [0.10.3](https://github.com/OpenForgeProject/mageforge/compare/0.10.2...0.10.3) (2026-02-05)
 
-
 ### Fixed
 
-* update phpcs errors ([#124](https://github.com/OpenForgeProject/mageforge/issues/124)) ([a19e23d](https://github.com/OpenForgeProject/mageforge/commit/a19e23d6bfc61bb255057ed739b3904855971e2f))
+- update phpcs errors ([#124](https://github.com/OpenForgeProject/mageforge/issues/124)) ([a19e23d](https://github.com/OpenForgeProject/mageforge/commit/a19e23d6bfc61bb255057ed739b3904855971e2f))
 
 ## [0.10.2](https://github.com/OpenForgeProject/mageforge/compare/0.10.1...0.10.2) (2026-02-02)
 
-
 ### Fixed
 
-* return theme parts as array in parseThemeName ([#122](https://github.com/OpenForgeProject/mageforge/issues/122)) ([94aef44](https://github.com/OpenForgeProject/mageforge/commit/94aef44bbc92ef6506ef6cd306ce010f1d6b6ef8))
+- return theme parts as array in parseThemeName ([#122](https://github.com/OpenForgeProject/mageforge/issues/122)) ([94aef44](https://github.com/OpenForgeProject/mageforge/commit/94aef44bbc92ef6506ef6cd306ce010f1d6b6ef8))
 
 ## [0.10.1](https://github.com/OpenForgeProject/mageforge/compare/0.10.0...0.10.1) (2026-01-30)
 
-
 ### Fixed
 
-* correct spacing and formatting in multiple files ([#120](https://github.com/OpenForgeProject/mageforge/issues/120)) ([3f9048a](https://github.com/OpenForgeProject/mageforge/commit/3f9048abc0b0f2785aa5be3858704037ad14ce5a))
-* update phpstan level to 8 and improve commands ([#119](https://github.com/OpenForgeProject/mageforge/issues/119)) ([e24e138](https://github.com/OpenForgeProject/mageforge/commit/e24e138ae2e5fcdb0013639cdb573da782fcb3fd))
+- correct spacing and formatting in multiple files ([#120](https://github.com/OpenForgeProject/mageforge/issues/120)) ([3f9048a](https://github.com/OpenForgeProject/mageforge/commit/3f9048abc0b0f2785aa5be3858704037ad14ce5a))
+- update phpstan level to 8 and improve commands ([#119](https://github.com/OpenForgeProject/mageforge/issues/119)) ([e24e138](https://github.com/OpenForgeProject/mageforge/commit/e24e138ae2e5fcdb0013639cdb573da782fcb3fd))
 
 ## [0.10.0](https://github.com/OpenForgeProject/mageforge/compare/0.9.0...0.10.0) (2026-01-30)
 
-
 ### Added
 
-* update phpstan level and add type hints ([#116](https://github.com/OpenForgeProject/mageforge/issues/116)) ([0a4a5fa](https://github.com/OpenForgeProject/mageforge/commit/0a4a5fa45ca77396a87569eca3491b569e3d3539))
-
+- update phpstan level and add type hints ([#116](https://github.com/OpenForgeProject/mageforge/issues/116)) ([0a4a5fa](https://github.com/OpenForgeProject/mageforge/commit/0a4a5fa45ca77396a87569eca3491b569e3d3539))
 
 ### Fixed
 
-* update phpstan level to 7 and improve error handling ([#118](https://github.com/OpenForgeProject/mageforge/issues/118)) ([7c84ae7](https://github.com/OpenForgeProject/mageforge/commit/7c84ae75580037b6764c4e570cdca06fc5a3a970))
+- update phpstan level to 7 and improve error handling ([#118](https://github.com/OpenForgeProject/mageforge/issues/118)) ([7c84ae7](https://github.com/OpenForgeProject/mageforge/commit/7c84ae75580037b6764c4e570cdca06fc5a3a970))
 
 ## [0.9.0](https://github.com/OpenForgeProject/mageforge/compare/0.8.1...0.9.0) (2026-01-30)
 
-
 ### Added
 
-* Node.js/Grunt setup detection for improved build process ([#114](https://github.com/OpenForgeProject/mageforge/issues/114)) ([5330e17](https://github.com/OpenForgeProject/mageforge/commit/5330e1702acc470276bd8c6ea508b0c35ac18a2f))
-
+- Node.js/Grunt setup detection for improved build process ([#114](https://github.com/OpenForgeProject/mageforge/issues/114)) ([5330e17](https://github.com/OpenForgeProject/mageforge/commit/5330e1702acc470276bd8c6ea508b0c35ac18a2f))
 
 ### Fixed
 
-* phpstan level 5 errors [#84](https://github.com/OpenForgeProject/mageforge/issues/84) ([#100](https://github.com/OpenForgeProject/mageforge/issues/100)) ([154d15e](https://github.com/OpenForgeProject/mageforge/commit/154d15eba0db013b99cb4141dc0b2cd059147fb0))
+- phpstan level 5 errors [#84](https://github.com/OpenForgeProject/mageforge/issues/84) ([#100](https://github.com/OpenForgeProject/mageforge/issues/100)) ([154d15e](https://github.com/OpenForgeProject/mageforge/commit/154d15eba0db013b99cb4141dc0b2cd059147fb0))
 
 ## [0.8.1](https://github.com/OpenForgeProject/mageforge/compare/0.8.0...0.8.1) (2026-01-27)
 
-
 ### Fixed
 
-* improve node module installation fallback logic ([#107](https://github.com/OpenForgeProject/mageforge/issues/107)) ([c400732](https://github.com/OpenForgeProject/mageforge/commit/c400732d5dfec183adc7fde9e42ad6b99f573f0e))
+- improve node module installation fallback logic ([#107](https://github.com/OpenForgeProject/mageforge/issues/107)) ([c400732](https://github.com/OpenForgeProject/mageforge/commit/c400732d5dfec183adc7fde9e42ad6b99f573f0e))
 
 ## [0.8.0](https://github.com/OpenForgeProject/mageforge/compare/0.7.0...0.8.0) (2026-01-23)
 
-
 ### Added
 
-* add functional-tests badge to readme.md ([#95](https://github.com/OpenForgeProject/mageforge/issues/95)) ([7108ef0](https://github.com/OpenForgeProject/mageforge/commit/7108ef0d4408b82f3010acaa00cf6f257880809d))
-* add npm sync validation to NodePackageManager and theme builders ([#93](https://github.com/OpenForgeProject/mageforge/issues/93)) ([5fcbdaf](https://github.com/OpenForgeProject/mageforge/commit/5fcbdaf7ceb19136f4b86fbffd33b44cee1469d6))
-* add phpstan & phpcs ([#96](https://github.com/OpenForgeProject/mageforge/issues/96)) ([06bcfdc](https://github.com/OpenForgeProject/mageforge/commit/06bcfdc82b1a8e0a58ad8712f7a120dc215e850f))
-* add pinning functionality for inspector badge ([#104](https://github.com/OpenForgeProject/mageforge/issues/104)) ([69f7328](https://github.com/OpenForgeProject/mageforge/commit/69f73287754b572ea27349fcbb248f351dd7bc0d))
-* enhance inspector with JSON metadata and comment parsing ([#105](https://github.com/OpenForgeProject/mageforge/issues/105)) ([a2f9ebf](https://github.com/OpenForgeProject/mageforge/commit/a2f9ebf4a188e01576d980866c92b7d9e7bf55f1))
-* separate functional tests from compatibility tests ([effac26](https://github.com/OpenForgeProject/mageforge/commit/effac2637837efa4814b93bc1b09eb8cef306544))
-* update feature request link to direct to new issue template ([7e0b57e](https://github.com/OpenForgeProject/mageforge/commit/7e0b57eb33f927ba307b008af504de42c4a2a5af))
-
+- add functional-tests badge to readme.md ([#95](https://github.com/OpenForgeProject/mageforge/issues/95)) ([7108ef0](https://github.com/OpenForgeProject/mageforge/commit/7108ef0d4408b82f3010acaa00cf6f257880809d))
+- add npm sync validation to NodePackageManager and theme builders ([#93](https://github.com/OpenForgeProject/mageforge/issues/93)) ([5fcbdaf](https://github.com/OpenForgeProject/mageforge/commit/5fcbdaf7ceb19136f4b86fbffd33b44cee1469d6))
+- add phpstan & phpcs ([#96](https://github.com/OpenForgeProject/mageforge/issues/96)) ([06bcfdc](https://github.com/OpenForgeProject/mageforge/commit/06bcfdc82b1a8e0a58ad8712f7a120dc215e850f))
+- add pinning functionality for inspector badge ([#104](https://github.com/OpenForgeProject/mageforge/issues/104)) ([69f7328](https://github.com/OpenForgeProject/mageforge/commit/69f73287754b572ea27349fcbb248f351dd7bc0d))
+- enhance inspector with JSON metadata and comment parsing ([#105](https://github.com/OpenForgeProject/mageforge/issues/105)) ([a2f9ebf](https://github.com/OpenForgeProject/mageforge/commit/a2f9ebf4a188e01576d980866c92b7d9e7bf55f1))
+- separate functional tests from compatibility tests ([effac26](https://github.com/OpenForgeProject/mageforge/commit/effac2637837efa4814b93bc1b09eb8cef306544))
+- update feature request link to direct to new issue template ([7e0b57e](https://github.com/OpenForgeProject/mageforge/commit/7e0b57eb33f927ba307b008af504de42c4a2a5af))
 
 ### Fixed
 
-* correct head-branch regex and add new changed-files sections ([53777ea](https://github.com/OpenForgeProject/mageforge/commit/53777eac19920e4de175b2a52704ff8b0c9982de))
-* labeler.yml to simplify Documentation labels ([2d96502](https://github.com/OpenForgeProject/mageforge/commit/2d96502e697fb6bc0c262867163d93086c75c9aa))
-* labeler.yml to update label rules ([79c3fc0](https://github.com/OpenForgeProject/mageforge/commit/79c3fc05b8a468c76b3e69ee9b555e0460bc3928))
-* remove deprecated environment retrieval method ([#98](https://github.com/OpenForgeProject/mageforge/issues/98)) ([3e11ae7](https://github.com/OpenForgeProject/mageforge/commit/3e11ae7a572dff28875167043d5f9e64e7cc67b5))
-* remove unnecessary blank lines in functional tests workflow ([f1e9bb7](https://github.com/OpenForgeProject/mageforge/commit/f1e9bb7ce8ea96f20f5c23b1b4ae78138388ab53))
-* update head-branch patterns and file globbing in labeler.yml ([#103](https://github.com/OpenForgeProject/mageforge/issues/103)) ([bd48b7c](https://github.com/OpenForgeProject/mageforge/commit/bd48b7ced59e405002897e595972bebf97a34bc4))
-* update validateHyvaTheme to include output parameter ([#99](https://github.com/OpenForgeProject/mageforge/issues/99)) ([9b53f8d](https://github.com/OpenForgeProject/mageforge/commit/9b53f8d270df9c56ab13488c2d7c60b367e3fa47))
-* Workflow permissions ([#101](https://github.com/OpenForgeProject/mageforge/issues/101)) ([c0c4c3d](https://github.com/OpenForgeProject/mageforge/commit/c0c4c3dbccda41befc7107b38279dbb11dc77db2))
+- correct head-branch regex and add new changed-files sections ([53777ea](https://github.com/OpenForgeProject/mageforge/commit/53777eac19920e4de175b2a52704ff8b0c9982de))
+- labeler.yml to simplify Documentation labels ([2d96502](https://github.com/OpenForgeProject/mageforge/commit/2d96502e697fb6bc0c262867163d93086c75c9aa))
+- labeler.yml to update label rules ([79c3fc0](https://github.com/OpenForgeProject/mageforge/commit/79c3fc05b8a468c76b3e69ee9b555e0460bc3928))
+- remove deprecated environment retrieval method ([#98](https://github.com/OpenForgeProject/mageforge/issues/98)) ([3e11ae7](https://github.com/OpenForgeProject/mageforge/commit/3e11ae7a572dff28875167043d5f9e64e7cc67b5))
+- remove unnecessary blank lines in functional tests workflow ([f1e9bb7](https://github.com/OpenForgeProject/mageforge/commit/f1e9bb7ce8ea96f20f5c23b1b4ae78138388ab53))
+- update head-branch patterns and file globbing in labeler.yml ([#103](https://github.com/OpenForgeProject/mageforge/issues/103)) ([bd48b7c](https://github.com/OpenForgeProject/mageforge/commit/bd48b7ced59e405002897e595972bebf97a34bc4))
+- update validateHyvaTheme to include output parameter ([#99](https://github.com/OpenForgeProject/mageforge/issues/99)) ([9b53f8d](https://github.com/OpenForgeProject/mageforge/commit/9b53f8d270df9c56ab13488c2d7c60b367e3fa47))
+- Workflow permissions ([#101](https://github.com/OpenForgeProject/mageforge/issues/101)) ([c0c4c3d](https://github.com/OpenForgeProject/mageforge/commit/c0c4c3dbccda41befc7107b38279dbb11dc77db2))
 
 ## [0.7.0](https://github.com/OpenForgeProject/mageforge/compare/0.6.0...0.7.0) (2026-01-20)
 
-
 ### Added
 
-* add context7 configuration file with URL and public key ([977bee0](https://github.com/OpenForgeProject/mageforge/commit/977bee0d2b2c4301bd2764b07ef82eefb92e29fb))
-* add NodePackageManager service for npm dependency management ([#91](https://github.com/OpenForgeProject/mageforge/issues/91)) ([1ab623f](https://github.com/OpenForgeProject/mageforge/commit/1ab623f5d858c272b6f692acb98edd35bf15ed3d))
-* implement SymlinkCleaner service and integrate into theme builders [#88](https://github.com/OpenForgeProject/mageforge/issues/88) ([#89](https://github.com/OpenForgeProject/mageforge/issues/89)) ([3f40ef6](https://github.com/OpenForgeProject/mageforge/commit/3f40ef64174686fd3c75944d00773ef83515f0f9))
+- add context7 configuration file with URL and public key ([977bee0](https://github.com/OpenForgeProject/mageforge/commit/977bee0d2b2c4301bd2764b07ef82eefb92e29fb))
+- add NodePackageManager service for npm dependency management ([#91](https://github.com/OpenForgeProject/mageforge/issues/91)) ([1ab623f](https://github.com/OpenForgeProject/mageforge/commit/1ab623f5d858c272b6f692acb98edd35bf15ed3d))
+- implement SymlinkCleaner service and integrate into theme builders [#88](https://github.com/OpenForgeProject/mageforge/issues/88) ([#89](https://github.com/OpenForgeProject/mageforge/issues/89)) ([3f40ef6](https://github.com/OpenForgeProject/mageforge/commit/3f40ef64174686fd3c75944d00773ef83515f0f9))
 
 ## [0.6.0](https://github.com/OpenForgeProject/mageforge/compare/0.5.0...0.6.0) (2026-01-19)
 
-
 ### Added
 
-* dev Inspector Overlay (Frontend) ([#85](https://github.com/OpenForgeProject/mageforge/issues/85)) ([806d04a](https://github.com/OpenForgeProject/mageforge/commit/806d04a252eb70f6f76131a672296d62a7c5372b))
+- dev Inspector Overlay (Frontend) ([#85](https://github.com/OpenForgeProject/mageforge/issues/85)) ([806d04a](https://github.com/OpenForgeProject/mageforge/commit/806d04a252eb70f6f76131a672296d62a7c5372b))
 
 ## [0.5.0](https://github.com/OpenForgeProject/mageforge/compare/0.4.0...0.5.0) (2026-01-17)
 
-
 ### ⚠ BREAKING CHANGES
 
-* create theme:clean command for cleaning theme static files and cache, remove old mageforge:static:clean command ([#80](https://github.com/OpenForgeProject/mageforge/issues/80))
+- create theme:clean command for cleaning theme static files and cache, remove old mageforge:static:clean command ([#80](https://github.com/OpenForgeProject/mageforge/issues/80))
 
 ### Added
 
-* implement StaticContentCleaner and update theme build commands ([#83](https://github.com/OpenForgeProject/mageforge/issues/83)) ([80a6abf](https://github.com/OpenForgeProject/mageforge/commit/80a6abf8b63dfdf25233f884d3fc3c6a2648b05c))
-
+- implement StaticContentCleaner and update theme build commands ([#83](https://github.com/OpenForgeProject/mageforge/issues/83)) ([80a6abf](https://github.com/OpenForgeProject/mageforge/commit/80a6abf8b63dfdf25233f884d3fc3c6a2648b05c))
 
 ### Fixed
 
-* create theme:clean command for cleaning theme static files and cache, remove old mageforge:static:clean command ([#80](https://github.com/OpenForgeProject/mageforge/issues/80)) ([ffd5ec8](https://github.com/OpenForgeProject/mageforge/commit/ffd5ec89e87eb8aa3a1f19eb957bd3f95a5c50b1))
-* update command aliases for consistency and clarity ([#82](https://github.com/OpenForgeProject/mageforge/issues/82)) ([34640fa](https://github.com/OpenForgeProject/mageforge/commit/34640fa88f0b622780b7257f7a74a2b469453391))
+- create theme:clean command for cleaning theme static files and cache, remove old mageforge:static:clean command ([#80](https://github.com/OpenForgeProject/mageforge/issues/80)) ([ffd5ec8](https://github.com/OpenForgeProject/mageforge/commit/ffd5ec89e87eb8aa3a1f19eb957bd3f95a5c50b1))
+- update command aliases for consistency and clarity ([#82](https://github.com/OpenForgeProject/mageforge/issues/82)) ([34640fa](https://github.com/OpenForgeProject/mageforge/commit/34640fa88f0b622780b7257f7a74a2b469453391))
 
 ## [0.4.0](https://github.com/OpenForgeProject/mageforge/compare/0.3.1...0.4.0) (2026-01-17)
 
-
 ### Added
 
-* add theme suggestion service and integrate with commands [#75](https://github.com/OpenForgeProject/mageforge/issues/75) ([#76](https://github.com/OpenForgeProject/mageforge/issues/76)) ([1347782](https://github.com/OpenForgeProject/mageforge/commit/13477823e82b81bda5412a7f8d4cbd747254d6c5))
-* implement Release Please workflow and update configuration ([d814853](https://github.com/OpenForgeProject/mageforge/commit/d814853c220dd098ad11340ea179ad66f9fb01f7))
-
+- add theme suggestion service and integrate with commands [#75](https://github.com/OpenForgeProject/mageforge/issues/75) ([#76](https://github.com/OpenForgeProject/mageforge/issues/76)) ([1347782](https://github.com/OpenForgeProject/mageforge/commit/13477823e82b81bda5412a7f8d4cbd747254d6c5))
+- implement Release Please workflow and update configuration ([d814853](https://github.com/OpenForgeProject/mageforge/commit/d814853c220dd098ad11340ea179ad66f9fb01f7))
 
 ### Fixed
 
-* adjust command argument order and clean up whitespace ([9c4fb73](https://github.com/OpenForgeProject/mageforge/commit/9c4fb7356d23c38096e798d797fdfcb4ec455ff5))
-* enhance interactive mode for compatibility checks and prompts ([#79](https://github.com/OpenForgeProject/mageforge/issues/79)) ([428a133](https://github.com/OpenForgeProject/mageforge/commit/428a1338479a2ad1642ea7a353d0c73e37ef155b))
-* improve theme selection and validation in TokensCommand ([#77](https://github.com/OpenForgeProject/mageforge/issues/77)) ([9167e95](https://github.com/OpenForgeProject/mageforge/commit/9167e956ddd1faebc03f39a26cf9a8434ecbe99a))
-
+- adjust command argument order and clean up whitespace ([9c4fb73](https://github.com/OpenForgeProject/mageforge/commit/9c4fb7356d23c38096e798d797fdfcb4ec455ff5))
+- enhance interactive mode for compatibility checks and prompts ([#79](https://github.com/OpenForgeProject/mageforge/issues/79)) ([428a133](https://github.com/OpenForgeProject/mageforge/commit/428a1338479a2ad1642ea7a353d0c73e37ef155b))
+- improve theme selection and validation in TokensCommand ([#77](https://github.com/OpenForgeProject/mageforge/issues/77)) ([9167e95](https://github.com/OpenForgeProject/mageforge/commit/9167e956ddd1faebc03f39a26cf9a8434ecbe99a))
 
 ### Documentation
 
-* update community support links to GitHub Discussions ([c67380e](https://github.com/OpenForgeProject/mageforge/commit/c67380ea8366a364ab5161b7e01c1a66872d3e24))
-* update dependencies and naming conventions in Copilot instructions ([cf98266](https://github.com/OpenForgeProject/mageforge/commit/cf98266c331d41516c96eddaa32983038adc8ee4))
-* update README for command list and support section ([f4fb886](https://github.com/OpenForgeProject/mageforge/commit/f4fb886ca698a8f6d4ed3800bb60937f0f88331f))
+- update community support links to GitHub Discussions ([c67380e](https://github.com/OpenForgeProject/mageforge/commit/c67380ea8366a364ab5161b7e01c1a66872d3e24))
+- update dependencies and naming conventions in Copilot instructions ([cf98266](https://github.com/OpenForgeProject/mageforge/commit/cf98266c331d41516c96eddaa32983038adc8ee4))
+- update README for command list and support section ([f4fb886](https://github.com/OpenForgeProject/mageforge/commit/f4fb886ca698a8f6d4ed3800bb60937f0f88331f))
 
 ### [0.3.1] - 2026-01-12
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e5a6dfc5..5ecb69ed 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -21,7 +21,7 @@ We use [Conventional Commits](https://www.conventionalcommits.org/) for automate
 
 **PR Title Format** (Required): Your PR title **must** follow Conventional Commits format:
 
-```
+```text
 <type>: <description>
 
 Examples:
@@ -36,6 +36,7 @@ Examples:
 ```
 
 **Commit Types**:
+
 - `feat:` - New feature (minor version bump: 0.3.0 → 0.4.0)
 - `fix:` - Bug fix (patch version bump: 0.3.0 → 0.3.1)
 - `refactor:` - Code refactoring (no version bump by default)
@@ -46,7 +47,8 @@ Examples:
 - `chore:` - Maintenance tasks (no version bump)
 
 **Breaking Changes**: Add `!` after the type for major version bumps:
-```
+
+```text
 feat!: remove legacy theme builder API
 fix!: change command argument order
 ```
@@ -74,6 +76,7 @@ git commit -m "chore: update GitHub Actions to latest versions"
 ### Merge Strategy
 
 All pull requests are merged using **squash-merge** to maintain a clean, linear git history. This means:
+
 - ✅ Only one commit per PR in `main` branch
 - ✅ PR title becomes the commit message
 - ✅ All PR commits are squashed into a single commit
@@ -104,7 +107,8 @@ All pull requests are merged using **squash-merge** to maintain a clean, linear
 - **Indentation**: Use 4 spaces for indentation.
 - **Naming Conventions**: Choose meaningful names for variables and functions.
 - **Line Length**: Keep lines under 80 characters wherever possible.
-- **Linting**: Run `trunk check` to lint your code before submission.
+- **Linting**: Run `trunk check` (non-PHP files) and `ddev mago lint` (PHP) before submission.
+- **Formatting**: Run `trunk fmt` (non-PHP files) and `ddev mago fmt` (PHP) to auto-format.
 
 ---
 
diff --git a/README.md b/README.md
index 8839c806..6cc85e03 100644
--- a/README.md
+++ b/README.md
@@ -31,15 +31,15 @@ MageForge is a powerful CLI toolkit for Magento 2 front-end development. It simp
 
 ![Mageforge Hero](./.github/assets/cli-chooser.png)
 
-| Theme Type                      | Support Status                                             |
-| ------------------------------- | ---------------------------------------------------------- |
-| Magento Standard                | ✅ Supported                                              |
-| Hyvä (TailwindCSS 3.x / 4.x)  | ✅ Supported                                              |
-| Hyvä Checkout                   | ✅ Supported                                              |
-| Hyvä Fallback                   | ✅ Supported                                              |
-| Custom TailwindCSS (no Hyvä)    | ✅ Supported                                              |
-| Avanta B2B                      | ✅ Supported                                              |
-| Your Custom Theme               | [Create your own Builder](./docs/custom_theme_builders.md) |
+| Theme Type                   | Support Status                                             |
+| ---------------------------- | ---------------------------------------------------------- |
+| Magento Standard             | ✅ Supported                                               |
+| Hyvä (TailwindCSS 3.x / 4.x) | ✅ Supported                                               |
+| Hyvä Checkout                | ✅ Supported                                               |
+| Hyvä Fallback                | ✅ Supported                                               |
+| Custom TailwindCSS (no Hyvä) | ✅ Supported                                               |
+| Avanta B2B                   | ✅ Supported                                               |
+| Your Custom Theme            | [Create your own Builder](./docs/custom_theme_builders.md) |
 
 ## Installation
 
@@ -76,21 +76,26 @@ See [Commands Reference](./docs/commands_reference.md) for the full command list
 The MageForge Inspector lets you inspect Magento blocks, templates, and performance metrics directly in your browser.
 
 **Features:**
+
 - Template paths, block classes, and module names
 - PHP render times and cache status (lifetime, tags)
 - Web Vitals: LCP, CLS, INP per element
 - Accessibility checks: ARIA roles, contrast ratios, alt text
 
-#### Screenshot
+### Screenshot
+
 ![Mageforge Toolbar](./.github/assets/toolbar.jpeg)
 
 **Enable:**
+
 ```bash
 bin/magento mageforge:theme:inspector enable
 ```
-*(Requires Developer Mode. Can also be enabled in Admin: `Stores > Configuration > MageForge > Frontend Inspector`)*
+
+_(Requires Developer Mode. Can also be enabled in Admin: `Stores > Configuration > MageForge > Frontend Inspector`)_
 
 **Use in Browser:**
+
 - Toggle: `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS)
 - Hover over elements to inspect; click to lock on a specific block
 
@@ -121,13 +126,12 @@ See the dedicated [Commands Reference](./docs/commands_reference.md) for complet
 - **Discussions:** [GitHub Discussions](https://github.com/OpenForgeProject/mageforge/discussions)
 - **Contributing:** See [Contributing Guidelines](./CONTRIBUTING.md)
 
-
 ## Credits
 
 MageForge uses the following third-party libraries:
 
-| Library | Author | License |
-| ------- | ------ | ------- |
+| Library                                 | Author   | License                                                         |
+| --------------------------------------- | -------- | --------------------------------------------------------------- |
 | [Tabler Icons](https://tabler.io/icons) | codecalm | [MIT](https://github.com/tabler/tabler-icons/blob/main/LICENSE) |
 
 ---
diff --git a/composer.json b/composer.json
index 724d1773..526b47ae 100644
--- a/composer.json
+++ b/composer.json
@@ -16,5 +16,29 @@
     "php": "~8.3.0||~8.4.0||~8.5.0",
     "magento/framework": "103.0.*",
     "laravel/prompts": "^0.3.5"
+  },
+  "require-dev": {
+    "carthage-software/mago": "^1.30",
+    "magento/magento-coding-standard": "^40"
+  },
+  "repositories": [
+    {
+      "type": "composer",
+      "url": "https://mirror.mage-os.org/"
+    }
+  ],
+  "config": {
+    "sort-packages": true,
+    "allow-plugins": {
+      "dealerdirect/phpcodesniffer-composer-installer": true,
+      "magento/composer-dependency-version-audit-plugin": true
+    }
+  },
+  "scripts": {
+    "lint": "mago lint",
+    "fmt": "mago fmt",
+    "fmt:check": "mago fmt --dry-run",
+    "phpcs": "phpcs -p -s",
+    "phpcbf": "phpcbf -p"
   }
 }
diff --git a/docs/commands_reference.md b/docs/commands_reference.md
index 84ab196d..118a1f5a 100644
--- a/docs/commands_reference.md
+++ b/docs/commands_reference.md
@@ -4,17 +4,17 @@ Complete reference of all CLI commands provided by the MageForge module.
 
 ## Quick Overview
 
-| Group | Command | Description | Aliases |
-|-------|---------|-------------|---------|
-| **Theme** | `mageforge:theme:list` | List all available Magento themes | `frontend:list` |
-| **Theme** | `mageforge:theme:build` | Build selected themes (CSS/TailwindCSS) | `frontend:build` |
-| **Theme** | `mageforge:theme:watch` | Watch theme files and auto-rebuild | `frontend:watch` |
-| **Theme** | `mageforge:theme:clean` | Clean static files and cache directories | `frontend:clean` |
-| **Theme** | `mageforge:theme:inspector` | Manage Frontend Inspector (enable/disable/status) | — |
-| **Hyvä** | `mageforge:hyva:tokens` | Generate Hyvä design tokens | `hyva:tokens` |
-| **Hyvä** | `mageforge:hyva:compatibility:check` | Check modules for Hyvä compatibility issues | `hyva:check` |
-| **System** | `mageforge:system:version` | Show current and latest module version | `system:version` |
-| **System** | `mageforge:system:check` | Display system information (PHP, Node.js, DB, etc.) | `system:check` |
+| Group      | Command                              | Description                                         | Aliases          |
+| ---------- | ------------------------------------ | --------------------------------------------------- | ---------------- |
+| **Theme**  | `mageforge:theme:list`               | List all available Magento themes                   | `frontend:list`  |
+| **Theme**  | `mageforge:theme:build`              | Build selected themes (CSS/TailwindCSS)             | `frontend:build` |
+| **Theme**  | `mageforge:theme:watch`              | Watch theme files and auto-rebuild                  | `frontend:watch` |
+| **Theme**  | `mageforge:theme:clean`              | Clean static files and cache directories            | `frontend:clean` |
+| **Theme**  | `mageforge:theme:inspector`          | Manage Frontend Inspector (enable/disable/status)   | —                |
+| **Hyvä**   | `mageforge:hyva:tokens`              | Generate Hyvä design tokens                         | `hyva:tokens`    |
+| **Hyvä**   | `mageforge:hyva:compatibility:check` | Check modules for Hyvä compatibility issues         | `hyva:check`     |
+| **System** | `mageforge:system:version`           | Show current and latest module version              | `system:version` |
+| **System** | `mageforge:system:check`             | Display system information (PHP, Node.js, DB, etc.) | `system:check`   |
 
 ---
 
@@ -44,9 +44,11 @@ bin/magento frontend:build Magento/luma Magento/blank
 ```
 
 **Arguments:**
+
 - `themeCodes` — One or more theme codes in format `Vendor/theme`. Accepts wildcards like `Magento/*`.
 
 **Behavior:**
+
 - If no theme codes are provided, an interactive prompt lets you select themes.
 - For each theme, the appropriate builder is determined automatically (Hyvä, TailwindCSS, Magento Standard, etc.).
 - Displays a summary of built themes and execution time.
@@ -63,12 +65,15 @@ bin/magento frontend:watch Magento/luma
 ```
 
 **Arguments:**
+
 - `themeCode` — Optional. Theme to watch in format `Vendor/theme`. If omitted, an interactive prompt appears.
 
 **Options:**
+
 - `-t, --theme=VALUE` — Alternative way to specify the theme code.
 
 **Behavior:**
+
 - Runs indefinitely until interrupted (Ctrl+C).
 - Monitors source files (SCSS, JS, etc.) and triggers rebuilds on change.
 - Useful for active theme development.
@@ -86,9 +91,11 @@ bin/magento mageforge:theme:clean --dry-run
 ```
 
 **Arguments:**
+
 - `themeCodes` — Optional. One or more theme codes to clean.
 
 **Options:**
+
 - `-a, --all` — Clean all themes.
 - `--dry-run` — Show what would be cleaned without actually deleting anything.
 
@@ -105,9 +112,11 @@ bin/magento mageforge:theme:inspector status
 ```
 
 **Arguments:**
+
 - `action` — Required. One of: `enable`, `disable`, `status`.
 
 **Notes:**
+
 - Requires Magento Developer Mode for enabling.
 - Can also be toggled via Admin: `Stores > Configuration > MageForge > Frontend Inspector`.
 - Browser shortcut: `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS).
@@ -127,6 +136,7 @@ bin/magento hyva:tokens Hyva/default
 ```
 
 **Arguments:**
+
 - `themeCode` — Optional. Theme code in format `Vendor/theme`. If omitted, an interactive prompt appears.
 
 **Output:** Creates a `generated/hyva-tokens.css` file from the design tokens configuration.
@@ -143,8 +153,9 @@ bin/magento hyva:check
 ```
 
 **Options:**
+
 - `-a, --show-all` — Show all modules including compatible ones.
-- `-t, --third-party-only` — Check only third-party modules (exclude Magento_*).
+- `-t, --third-party-only` — Check only third-party modules (exclude Magento\_\*).
 - `--include-vendor` — Include Magento core modules in the check.
 - `--detailed` — Show detailed compatibility information.
 
@@ -177,6 +188,7 @@ bin/magento system:check
 ```
 
 **Reports:**
+
 - PHP version and extensions
 - Magento version
 - Database type and version (MySQL/MariaDB)
@@ -192,7 +204,7 @@ bin/magento system:check
 
 ## Command Groups Summary
 
-```
+```text
 mageforge:theme:list          → List available themes
 mageforge:theme:build         → Build theme assets
 mageforge:theme:watch         → Watch & auto-rebuild
diff --git a/docs/custom_theme_builders.md b/docs/custom_theme_builders.md
index 7afcd5b6..b75240e0 100644
--- a/docs/custom_theme_builders.md
+++ b/docs/custom_theme_builders.md
@@ -18,7 +18,7 @@ The ThemeBuilder architecture consists of the following components:
 
 To create your own ThemeBuilder, you'll need to set up a custom Magento 2 module with the following structure:
 
-```
+```text
 app/code/YourCompany/YourModule/
 ├── Console/
 │   └── Command/
@@ -43,6 +43,7 @@ First, create the basic module structure as shown above:
 
 1. Create the module directory: `app/code/YourCompany/YourModule/`
 2. Create a registration.php file:
+
 ```php
 <?php
 use Magento\Framework\Component\ComponentRegistrar;
@@ -55,6 +56,7 @@ ComponentRegistrar::register(
 ```
 
 3. Create a module.xml file in the etc directory:
+
 ```xml
 <?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
@@ -358,6 +360,7 @@ public function build(string $themeCode, string $themePath, SymfonyStyle $io, Ou
 ```
 
 This approach:
+
 - Prevents modification attempts on read-only vendor themes
 - Allows themes to work without specific build tools
 - Still supports full builds when tools are present
diff --git a/docs/development.md b/docs/development.md
index e87ce289..e1146da3 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -16,7 +16,7 @@ Welcome to the MageForge development repository. This guide covers everything yo
 
 ## Repository Structure
 
-```
+```text
 /mageforge
 ├── /src/                   # ⭐ The MageForge module code
 │   ├── /Console/Command/   # CLI commands
@@ -50,11 +50,11 @@ Welcome to the MageForge development repository. This guide covers everything yo
 
 ## Prerequisites
 
-| Tool | Notes |
-| ---- | ----- |
+| Tool                                                                           | Notes                       |
+| ------------------------------------------------------------------------------ | --------------------------- |
 | [DDEV](https://ddev.readthedocs.io/en/stable/users/install/ddev-installation/) | v1.23 or higher recommended |
-| Git | For cloning and branching |
-| Docker | Required by DDEV |
+| Git                                                                            | For cloning and branching   |
+| Docker                                                                         | Required by DDEV            |
 
 Basic familiarity with Magento 2 module development is assumed.
 
@@ -104,19 +104,19 @@ You now have a fully functional local development environment.
 
 The repository root is bind-mounted **read-only** by Docker (`.ddev/docker-compose.mageforge-source.yaml`) into the Magento root:
 
-```
+```text
 ..  →  magento/mageforge-source/   (read-only)
 ```
 
 `ddev install-magento` registers this directory as a Composer **path repository** and installs the module with `composer require openforgeproject/mageforge:@dev`. Composer creates a symlink:
 
-```
+```text
 magento/vendor/openforgeproject/mageforge  →  ../../mageforge-source
 ```
 
 Why this construction?
 
-- **Magento's path validator** rejects paths that resolve (via `realpath()`) outside the Magento root. A plain Composer symlink to the repository root would fail; the mount point lives *inside* the Magento root, so validation passes.
+- **Magento's path validator** rejects paths that resolve (via `realpath()`) outside the Magento root. A plain Composer symlink to the repository root would fail; the mount point lives _inside_ the Magento root, so validation passes.
 - **Read-only protects the source**: an accidental `rm -rf magento` inside the container stops at the mount instead of deleting the repository through it.
 - **Real Composer install**: third-party dependencies of the module (e.g. `laravel/prompts`) are resolved by Composer like for any end-user installation — no extra sync scripts needed.
 - An anonymous volume shadows `mageforge-source/magento/` so the mount does not recurse into itself.
@@ -187,8 +187,8 @@ ddev magento mageforge:system:check
 
 CI runs the following matrix against OpenSearch — test locally before opening a PR:
 
-| Magento | PHP |
-| ------- | --- |
+| Magento   | PHP |
+| --------- | --- |
 | 2.4.7-p10 | 8.3 |
 | 2.4.8-p5  | 8.4 |
 | 2.4.9     | 8.5 |
@@ -200,19 +200,31 @@ CI runs the following matrix against OpenSearch — test locally before opening
 Run all checks before submitting a pull request:
 
 ```bash
-# All linters (actionlint, hadolint, markdownlint, prettier, shellcheck, yamllint)
+# All non-PHP linters (actionlint, checkov, hadolint, markdownlint, prettier, shellcheck, yamllint)
 trunk check
 
-# Auto-format
+# Auto-format non-PHP files (prettier, shfmt, …)
 trunk fmt
 
+# Mago – PHP linter & formatter (config: mago.toml)
+ddev mago lint
+ddev mago fmt            # or: ddev mago fmt --dry-run
+
 # PHP CodeSniffer – Magento Coding Standard
-ddev phpcs
+ddev phpcs               # auto-fix: ddev phpcbf
 
-# PHPStan – static analysis
+# PHPStan – static analysis (level 9, requires the local Magento installation)
 ddev phpstan
 ```
 
+PHPCS and Mago are `require-dev` dependencies of the module (`composer install` in the
+repository root provides `vendor/bin/phpcs` and `vendor/bin/mago`), so local runs and CI
+use the same tool versions. PHPStan runs inside the Magento installation because it needs
+the Magento class definitions.
+
+CI runs the same checks on every pull request: the **PHPCS**, **PHPStan** and **Lint**
+workflows (Mago + Trunk) must all pass.
+
 ### PHP Conventions
 
 - `declare(strict_types=1)` in every PHP file
@@ -302,17 +314,17 @@ Releases are fully automated via [Release Please](https://github.com/googleapis/
 Release Please groups changes into sections based on the Conventional Commits type in your PR title:
 
 | Commit Type | Changelog Section | Visible in Notes |
-|-------------|-------------------|------------------|
-| `feat:` | **Added** | ✅ Yes |
-| `fix:` | **Fixed** | ✅ Yes |
-| `refactor:` | **Changed** | ✅ Yes |
-| `perf:` | **Performance** | ✅ Yes |
-| `docs:` | **Documentation** | ✅ Yes |
-| `style:` | **Styling** | ✅ Yes |
-| `chore:` | Chore | ❌ Hidden |
-| `test:` | Tests | ❌ Hidden |
-| `build:` | Build | ❌ Hidden |
-| `ci:` | CI/CD | ❌ Hidden |
+| ----------- | ----------------- | ---------------- |
+| `feat:`     | **Added**         | ✅ Yes           |
+| `fix:`      | **Fixed**         | ✅ Yes           |
+| `refactor:` | **Changed**       | ✅ Yes           |
+| `perf:`     | **Performance**   | ✅ Yes           |
+| `docs:`     | **Documentation** | ✅ Yes           |
+| `style:`    | **Styling**       | ✅ Yes           |
+| `chore:`    | Chore             | ❌ Hidden        |
+| `test:`     | Tests             | ❌ Hidden        |
+| `build:`    | Build             | ❌ Hidden        |
+| `ci:`       | CI/CD             | ❌ Hidden        |
 
 ### Automatic PR Labeling
 
@@ -320,19 +332,19 @@ PRs are automatically labelled by the [Labeler](https://github.com/actions/label
 
 #### Branch / Title Based Labels
 
-| Label | Trigger |
-|-------|---------|
-| **Documentation** | Any `*.md` file changed |
-| **Feature** | Branch matches `add-*`, `feature-*`, `feat-*`; or PR title starts with `feat:`, `feature:` |
-| **Fix** | Branch matches `fix-*`, `bugfix-*`; or PR title starts with `fix:`, `bugfix:` |
-| **Next-Release** | Branch/PR title matches `chore: release*` or `release-please*` |
+| Label             | Trigger                                                                                    |
+| ----------------- | ------------------------------------------------------------------------------------------ |
+| **Documentation** | Any `*.md` file changed                                                                    |
+| **Feature**       | Branch matches `add-*`, `feature-*`, `feat-*`; or PR title starts with `feat:`, `feature:` |
+| **Fix**           | Branch matches `fix-*`, `bugfix-*`; or PR title starts with `fix:`, `bugfix:`              |
+| **Next-Release**  | Branch/PR title matches `chore: release*` or `release-please*`                             |
 
 #### File-Based Labels
 
-| Label | Trigger |
-|-------|---------|
-| **Command** | Files changed in `src/Console/Command/**` |
-| **Frontend** | Files changed in `src/view/frontend/**` |
+| Label             | Trigger                                        |
+| ----------------- | ---------------------------------------------- |
+| **Command**       | Files changed in `src/Console/Command/**`      |
+| **Frontend**      | Files changed in `src/view/frontend/**`        |
 | **Theme-Builder** | Files changed in `src/Service/ThemeBuilder/**` |
 
 > **Tip**: Name your branch according to the conventions above (`feat/my-feature`, `fix/issue-123`) and the correct labels are applied automatically.
diff --git a/mago.toml b/mago.toml
index 9c78d621..53453352 100644
--- a/mago.toml
+++ b/mago.toml
@@ -1,9 +1,11 @@
 # Mago configuration for MageForge
 # https://mago.carthage.software/
 
+php-version = "8.3"
+
 [source]
-paths = ["src/"]
-includes = ["../../"]
+paths = ["src"]
+includes = ["vendor"]
 extensions = ["php", "phtml"]
 
 [parser]
@@ -12,3 +14,27 @@ enable-short-tags = false
 [formatter]
 inline-empty-constructor-braces = false
 inline-empty-classlike-braces = false
+
+[linter.rules]
+# Code-size metrics: Magento CLI commands and services are naturally verbose;
+# refactoring purely to satisfy thresholds is not a goal of this codebase.
+cyclomatic-complexity = { enabled = false }
+kan-defect = { enabled = false }
+halstead = { enabled = false }
+too-many-methods = { enabled = false }
+excessive-parameter-list = { enabled = false }
+# Magento idioms: empty()/isset() and boolean flags are pervasive in framework
+# APIs and interfaces we implement; PHPStan level 9 covers the real pitfalls.
+no-empty = { enabled = false }
+no-isset = { enabled = false }
+no-boolean-flag-parameter = { enabled = false }
+# Style preferences that conflict with the Magento2 coding standard or would
+# cause churn without correctness value.
+literal-named-argument = { enabled = false }
+braced-string-interpolation = { enabled = false }
+no-else-clause = { enabled = false }
+prefer-early-continue = { enabled = false }
+no-shorthand-ternary = { enabled = false }
+# Conflicts with the inline `/** @var ... */` + return-variable pattern this
+# codebase uses to type ObjectManager/framework returns for PHPStan level 9.
+inline-variable-return = { enabled = false }
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
new file mode 100644
index 00000000..43b02d7b
--- /dev/null
+++ b/phpcs.xml.dist
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<ruleset name="MageForge">
+    <description>Magento2 coding standard with Mago-formatter compatibility.</description>
+
+    <file>src/</file>
+
+    <arg name="extensions" value="php,phtml"/>
+
+    <rule ref="Magento2">
+        <!-- Mago formats multi-line conditions PSR-12 style (newline after the
+             opening parenthesis); this PSR-2-era sniff would flag that. -->
+        <exclude name="PSR2.ControlStructures.ControlStructureSpacing"/>
+    </rule>
+</ruleset>
diff --git a/src/Block/Inspector.php b/src/Block/Inspector.php
index 4d502d8c..5100e72f 100644
--- a/src/Block/Inspector.php
+++ b/src/Block/Inspector.php
@@ -111,7 +111,7 @@ public function getShowButtonLabels(): bool
     {
         $value = $this->scopeConfig->getValue(
             InspectorConfig::XML_PATH_SHOW_BUTTON_LABELS,
-            ScopeInterface::SCOPE_STORE
+            ScopeInterface::SCOPE_STORE,
         );
         // Default to true when not explicitly set to '0'
         return !is_string($value) || $value !== '0';
@@ -146,10 +146,7 @@ public function getPosition(): string
      */
     public function getShowHealthScore(): bool
     {
-        $value = $this->scopeConfig->getValue(
-            InspectorConfig::XML_PATH_SHOW_HEALTH_SCORE,
-            ScopeInterface::SCOPE_STORE
-        );
+        $value = $this->scopeConfig->getValue(InspectorConfig::XML_PATH_SHOW_HEALTH_SCORE, ScopeInterface::SCOPE_STORE);
         return !is_string($value) || $value !== '0';
     }
 
diff --git a/src/Console/Command/AbstractCommand.php b/src/Console/Command/AbstractCommand.php
index e7bb887a..2164f15d 100644
--- a/src/Console/Command/AbstractCommand.php
+++ b/src/Console/Command/AbstractCommand.php
@@ -500,7 +500,7 @@ protected function resolveVendorThemes(array $themeCodes, ThemeList $themeList):
             if ($isExplicitWildcard || $isVendorOnly) {
                 // Lazy-load themes only when needed
                 if ($availableThemes === null) {
-                    $availableThemes = array_map(fn($theme) => $theme->getCode(), $themeList->getAllThemes());
+                    $availableThemes = array_map(static fn($theme) => $theme->getCode(), $themeList->getAllThemes());
                 }
 
                 if ($isExplicitWildcard) {
@@ -509,7 +509,7 @@ protected function resolveVendorThemes(array $themeCodes, ThemeList $themeList):
                     $prefix = $code . '/'; // e.g. "Vendor" -> "Vendor/"
                 }
 
-                $matched = array_filter($availableThemes, fn(string $availableCode) => \str_starts_with(
+                $matched = array_filter($availableThemes, static fn(string $availableCode) => \str_starts_with(
                     $availableCode,
                     $prefix,
                 ));
diff --git a/src/Console/Command/Dev/InspectorCommand.php b/src/Console/Command/Dev/InspectorCommand.php
index 2b73a7e8..cbc36359 100644
--- a/src/Console/Command/Dev/InspectorCommand.php
+++ b/src/Console/Command/Dev/InspectorCommand.php
@@ -176,7 +176,7 @@ private function showStatus(): int
         } elseif (!$isEnabled) {
             $this->io->newLine();
             $this->io->note(
-                'Inspector is disabled. Run "bin/magento mageforge:theme:inspector enable" to activate it.'
+                'Inspector is disabled. Run "bin/magento mageforge:theme:inspector enable" to activate it.',
             );
         } else {
             $this->io->newLine();
diff --git a/src/Console/Command/System/CheckCommand.php b/src/Console/Command/System/CheckCommand.php
index 774ec507..864610ed 100644
--- a/src/Console/Command/System/CheckCommand.php
+++ b/src/Console/Command/System/CheckCommand.php
@@ -164,7 +164,8 @@ private function getLatestLtsNodeVersion(): string
 
             /** @var array<int, array<string, mixed>> $nodes */
             foreach ($nodes as $node) {
-                if (isset($node['lts'])
+                if (
+                    isset($node['lts'])
                     && $node['lts'] !== false
                     && isset($node['version'])
                     && is_string($node['version'])
@@ -685,12 +686,10 @@ private function getDiskSpace(): string
             return "$usedGB GB / $totalGB GB ($usedPercent%)";
         }
 
-        $totalGB = round($totalSpace / 1024 / 1024 / 1024, 2);
-        $freeGB = round($freeSpace / 1024 / 1024 / 1024, 2);
+        $totalGB = round((($totalSpace / 1024) / 1024) / 1024, 2);
+        $freeGB = round((($freeSpace / 1024) / 1024) / 1024, 2);
         $usedGB = round($totalGB - $freeGB, 2);
-        $usedPercent = $totalGB > 0.0
-            ? round(($usedGB / $totalGB) * 100, 2)
-            : 0.0;
+        $usedPercent = $totalGB > 0.0 ? round(($usedGB / $totalGB) * 100, 2) : 0.0;
 
         return "$usedGB GB / $totalGB GB ($usedPercent%)";
     }
@@ -811,7 +810,7 @@ private function getValueFromEnvironmentService($objectManager, string $name): ?
     private function getSystemEnvironmentValue(string $name): ?string
     {
         // Use ini_get for certain system variables as a safer alternative
-        if (in_array($name, ['memory_limit', 'max_execution_time'])) {
+        if (in_array($name, ['memory_limit', 'max_execution_time'], true)) {
             $value = (string) ini_get($name);
             if ($value !== '') {
                 return $value;
diff --git a/src/Console/Command/Theme/BuildCommand.php b/src/Console/Command/Theme/BuildCommand.php
index c1558a91..8fa58249 100644
--- a/src/Console/Command/Theme/BuildCommand.php
+++ b/src/Console/Command/Theme/BuildCommand.php
@@ -82,7 +82,7 @@ protected function executeCommand(InputInterface $input, OutputInterface $output
 
         if (empty($themeCodes)) {
             $themes = $this->themeList->getAllThemes();
-            $options = array_values(array_map(fn($theme) => $theme->getCode(), $themes));
+            $options = array_values(array_map(static fn($theme) => $theme->getCode(), $themes));
 
             // Check if we're in an interactive terminal environment
             if (!$this->isInteractiveTerminal($output)) {
@@ -96,9 +96,12 @@ protected function executeCommand(InputInterface $input, OutputInterface $output
 
             $themeCodesPrompt = new MultiSearchPrompt(
                 label: 'Select themes to build',
-                options: fn(string $value) => empty($value)
+                options: static fn(string $value) => empty($value)
                     ? $options
-                    : array_values(array_filter($options, fn($option) => stripos((string) $option, $value) !== false)),
+                    : array_values(array_filter(
+                        $options,
+                        static fn($option) => stripos((string) $option, $value) !== false,
+                    )),
                 placeholder: 'Type to search theme...',
                 hint: 'Type to search, arrow keys to navigate, Space to toggle, Enter to confirm',
                 required: false,
diff --git a/src/Console/Command/Theme/CleanCommand.php b/src/Console/Command/Theme/CleanCommand.php
index 569c6a20..256d8e5e 100644
--- a/src/Console/Command/Theme/CleanCommand.php
+++ b/src/Console/Command/Theme/CleanCommand.php
@@ -130,7 +130,7 @@ private function resolveThemeCodes(InputInterface $input, OutputInterface $outpu
     private function getAllThemeCodes(): ?array
     {
         $themes = $this->themeList->getAllThemes();
-        $themeCodes = array_values(array_map(fn($theme) => $theme->getCode(), $themes));
+        $themeCodes = array_values(array_map(static fn($theme) => $theme->getCode(), $themes));
 
         if (empty($themeCodes)) {
             $this->io->info('No themes found.');
@@ -151,7 +151,7 @@ private function getAllThemeCodes(): ?array
     private function selectThemesInteractively(OutputInterface $output): ?array
     {
         $themes = $this->themeList->getAllThemes();
-        $options = array_values(array_map(fn($theme) => $theme->getCode(), $themes));
+        $options = array_values(array_map(static fn($theme) => $theme->getCode(), $themes));
 
         if (!$this->isInteractiveTerminal($output)) {
             $this->displayAvailableThemes($themes);
@@ -199,9 +199,12 @@ private function promptForThemes(array $options, array $themes): ?array
 
         $themeCodesPrompt = new MultiSearchPrompt(
             label: 'Select themes to clean',
-            options: fn(string $value) => empty($value)
+            options: static fn(string $value) => empty($value)
                 ? $options
-                : array_values(array_filter($options, fn($option) => stripos((string) $option, $value) !== false)),
+                : array_values(array_filter(
+                    $options,
+                    static fn($option) => stripos((string) $option, $value) !== false,
+                )),
             placeholder: 'Type to search theme...',
             hint: 'Type to search, arrow keys to navigate, Space to toggle, Enter to confirm',
             required: false,
diff --git a/src/Console/Command/Theme/TokensCommand.php b/src/Console/Command/Theme/TokensCommand.php
index 11a3b46b..53485ea0 100644
--- a/src/Console/Command/Theme/TokensCommand.php
+++ b/src/Console/Command/Theme/TokensCommand.php
@@ -107,13 +107,16 @@ private function selectTheme(?string $themeCode): ?string
         }
 
         $themes = $this->themeList->getAllThemes();
-        $options = array_values(array_map(fn($theme) => $theme->getCode(), $themes));
+        $options = array_values(array_map(static fn($theme) => $theme->getCode(), $themes));
 
         $themeCodePrompt = new SearchPrompt(
             label: 'Select theme to generate tokens for',
-            options: fn(string $value) => empty($value)
+            options: static fn(string $value) => empty($value)
                 ? $options
-                : array_values(array_filter($options, fn($option) => stripos((string) $option, $value) !== false)),
+                : array_values(array_filter(
+                    $options,
+                    static fn($option) => stripos((string) $option, $value) !== false,
+                )),
             placeholder: 'Type to search theme...',
             scroll: 10,
             hint: 'Type to search, arrow keys to navigate, Enter to confirm',
@@ -262,7 +265,7 @@ private function copyToVarGenerated(string $sourceFilePath, string $themeCode):
         $varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . str_replace('/', '/', $themeCode);
 
         if (!$this->fileDriver->isDirectory($varGeneratedPath)) {
-            $this->fileDriver->createDirectory($varGeneratedPath, 0755);
+            $this->fileDriver->createDirectory($varGeneratedPath, 0o755);
         }
 
         $generatedFilePath = $varGeneratedPath . '/hyva-tokens.css';
diff --git a/src/Console/Command/Theme/WatchCommand.php b/src/Console/Command/Theme/WatchCommand.php
index ce47cf7e..a40301f4 100644
--- a/src/Console/Command/Theme/WatchCommand.php
+++ b/src/Console/Command/Theme/WatchCommand.php
@@ -75,9 +75,12 @@ protected function executeCommand(InputInterface $input, OutputInterface $output
 
             $themeCodePrompt = new SearchPrompt(
                 label: 'Select theme to watch',
-                options: fn(string $value) => empty($value)
+                options: static fn(string $value) => empty($value)
                     ? $options
-                    : array_values(array_filter($options, fn($option) => stripos((string) $option, $value) !== false)),
+                    : array_values(array_filter(
+                        $options,
+                        static fn($option) => stripos((string) $option, $value) !== false,
+                    )),
                 placeholder: 'Type to search theme...',
                 scroll: 10,
                 hint: 'Type to search, arrow keys to navigate, Enter to confirm',
diff --git a/src/Model/Config/Source/ToolbarPosition.php b/src/Model/Config/Source/ToolbarPosition.php
index 4da044de..a1eee710 100644
--- a/src/Model/Config/Source/ToolbarPosition.php
+++ b/src/Model/Config/Source/ToolbarPosition.php
@@ -16,10 +16,10 @@ class ToolbarPosition implements OptionSourceInterface
     public function toOptionArray(): array
     {
         return [
-            ['value' => 'bottom-left',  'label' => (string) __('Bottom Left')],
+            ['value' => 'bottom-left', 'label' => (string) __('Bottom Left')],
             ['value' => 'bottom-right', 'label' => (string) __('Bottom Right')],
-            ['value' => 'top-left',     'label' => (string) __('Top Left')],
-            ['value' => 'top-right',    'label' => (string) __('Top Right')],
+            ['value' => 'top-left', 'label' => (string) __('Top Left')],
+            ['value' => 'top-right', 'label' => (string) __('Top Right')],
         ];
     }
 }
diff --git a/src/Model/TemplateEngine/Decorator/InspectorHints.php b/src/Model/TemplateEngine/Decorator/InspectorHints.php
index 935c4155..19fca200 100644
--- a/src/Model/TemplateEngine/Decorator/InspectorHints.php
+++ b/src/Model/TemplateEngine/Decorator/InspectorHints.php
@@ -227,11 +227,17 @@ private function injectInspectorAttributes(
         $replaced = false;
         $result = preg_replace_callback(
             '/^(\s*<[a-zA-Z][a-zA-Z0-9-]*)/s',
-            function (array $matches) use ($wrapperId, $safeJson, &$replaced): string {
+            static function (array $matches) use ($wrapperId, $safeJson, &$replaced): string {
                 $replaced = true;
-                return $matches[0]
-                    . ' data-mageforge-id="' . $wrapperId . '"'
-                    . ' data-mageforge-block="' . $safeJson . '"';
+                return (
+                    $matches[0]
+                    . ' data-mageforge-id="'
+                    . $wrapperId
+                    . '"'
+                    . ' data-mageforge-block="'
+                    . $safeJson
+                    . '"'
+                );
             },
             $html,
             1,
@@ -255,7 +261,7 @@ function (array $matches) use ($wrapperId, $safeJson, &$replaced): string {
     private function getRelativePath(string $absolutePath): string
     {
         // If path starts with Magento root, make it relative
-        if (strpos($absolutePath, $this->magentoRoot) === 0) {
+        if (str_starts_with($absolutePath, $this->magentoRoot)) {
             return ltrim(substr($absolutePath, strlen($this->magentoRoot)), '/');
         }
 
@@ -345,13 +351,13 @@ private function isTemplateOverride(string $templateFile, string $moduleName): b
         $relativePath = $this->getRelativePath($templateFile);
 
         // If path starts with app/design, it's an override
-        if (strpos($relativePath, 'app/design/') === 0) {
+        if (str_starts_with($relativePath, 'app/design/')) {
             return true;
         }
 
         // If module name is in path but not in vendor/<vendor>/<module>, it's likely an override
         $modulePathPart = str_replace('_', '/', $moduleName);
-        if (strpos($relativePath, 'vendor/') === false && strpos($relativePath, $modulePathPart) !== false) {
+        if (!str_contains($relativePath, 'vendor/') && str_contains($relativePath, $modulePathPart)) {
             return true;
         }
 
diff --git a/src/Model/TemplateEngine/Decorator/InspectorHintsFactory.php b/src/Model/TemplateEngine/Decorator/InspectorHintsFactory.php
index 2e35f98a..d59f9c12 100644
--- a/src/Model/TemplateEngine/Decorator/InspectorHintsFactory.php
+++ b/src/Model/TemplateEngine/Decorator/InspectorHintsFactory.php
@@ -31,6 +31,7 @@ public function create(array $data = []): InspectorHints
     {
         /** @var InspectorHints $instance */
         $instance = $this->objectManager->create(InspectorHints::class, $data);
+
         return $instance;
     }
 }
diff --git a/src/Model/TemplateEngine/Plugin/InspectorHints.php b/src/Model/TemplateEngine/Plugin/InspectorHints.php
index b2c6b6af..231462b3 100644
--- a/src/Model/TemplateEngine/Plugin/InspectorHints.php
+++ b/src/Model/TemplateEngine/Plugin/InspectorHints.php
@@ -59,7 +59,7 @@ public function afterCreate(
         $isEnabled = $this->scopeConfig->isSetFlag(
             InspectorConfig::XML_PATH_ENABLED,
             ScopeInterface::SCOPE_STORE,
-            $storeCode
+            $storeCode,
         );
         if (!$isEnabled) {
             return $invocationResult;
diff --git a/src/Model/ThemeList.php b/src/Model/ThemeList.php
index 939bbcba..be1446b2 100644
--- a/src/Model/ThemeList.php
+++ b/src/Model/ThemeList.php
@@ -28,6 +28,7 @@ public function getAllThemes(): array
     {
         /** @var array<string, Theme> $items */
         $items = $this->magentoThemeList->getItems();
+
         return $items;
     }
 }
diff --git a/src/Model/ThemePath.php b/src/Model/ThemePath.php
index bed867b5..bc844150 100644
--- a/src/Model/ThemePath.php
+++ b/src/Model/ThemePath.php
@@ -27,8 +27,6 @@ public function getPath(string $themeCode): ?string
     {
         $registeredThemes = $this->componentRegistrar->getPaths(ComponentRegistrar::THEME);
 
-        return $registeredThemes['frontend/' . $themeCode]
-            ?? $registeredThemes['adminhtml/' . $themeCode]
-            ?? null;
+        return $registeredThemes['frontend/' . $themeCode] ?? $registeredThemes['adminhtml/' . $themeCode] ?? null;
     }
 }
diff --git a/src/Service/Hyva/ModuleScanner.php b/src/Service/Hyva/ModuleScanner.php
index 8b280da9..f9480b59 100644
--- a/src/Service/Hyva/ModuleScanner.php
+++ b/src/Service/Hyva/ModuleScanner.php
@@ -125,7 +125,8 @@ private function isHyvaCompatibilityPackage(array $composerData): bool
     {
         // Check if this IS a Hyvä compatibility package
         $packageName = $composerData['name'] ?? '';
-        if (is_string($packageName)
+        if (
+            is_string($packageName)
             && str_starts_with($packageName, 'hyva-themes/')
             && str_contains($packageName, '-compat')
         ) {
diff --git a/src/Service/Inspector/Cache/BlockCacheCollector.php b/src/Service/Inspector/Cache/BlockCacheCollector.php
index d977e97c..61c58d75 100644
--- a/src/Service/Inspector/Cache/BlockCacheCollector.php
+++ b/src/Service/Inspector/Cache/BlockCacheCollector.php
@@ -91,7 +91,7 @@ public function getCacheInfo(BlockInterface $block): array
      * @param BlockInterface $block
      * @return int|null|false False if not cacheable, null for unlimited, int for specific lifetime
      */
-    private function resolveCacheLifetime(BlockInterface $block): int|null|false
+    private function resolveCacheLifetime(BlockInterface $block): int|false|null
     {
         if (!method_exists($block, 'getCacheLifetime')) {
             return false;
diff --git a/src/Service/SymlinkCleaner.php b/src/Service/SymlinkCleaner.php
index 84dfde86..506ab403 100644
--- a/src/Service/SymlinkCleaner.php
+++ b/src/Service/SymlinkCleaner.php
@@ -94,7 +94,7 @@ private function isSymlink(string $path): bool
             return false;
         }
 
-        return (($stat['mode'] ?? 0) & 0120000) === 0120000;
+        return (($stat['mode'] ?? 0) & 0o12_0000) === 0o12_0000;
     }
 
     /**
diff --git a/src/Service/ThemeBuilder/HyvaThemes/Builder.php b/src/Service/ThemeBuilder/HyvaThemes/Builder.php
index c9043e45..6d04b96f 100644
--- a/src/Service/ThemeBuilder/HyvaThemes/Builder.php
+++ b/src/Service/ThemeBuilder/HyvaThemes/Builder.php
@@ -68,7 +68,8 @@ public function detect(string $themePath): bool
         if ($this->fileDriver->isExists($themePath . '/composer.json')) {
             $composerContent = $this->fileDriver->fileGetContents($themePath . '/composer.json');
             $composerJson = json_decode($composerContent, true);
-            if (is_array($composerJson)
+            if (
+                is_array($composerJson)
                 && isset($composerJson['name'])
                 && is_string($composerJson['name'])
                 && str_contains($composerJson['name'], 'hyva')
@@ -279,7 +280,7 @@ public function watch(
                 }
             }
 
-            $exitCode = $process->run(function ($type, $buffer) use ($output): void {
+            $exitCode = $process->run(static function ($type, $buffer) use ($output): void {
                 $output->write($buffer);
             });
 
diff --git a/src/Service/ThemeBuilder/TailwindCSS/Builder.php b/src/Service/ThemeBuilder/TailwindCSS/Builder.php
index 838006f9..38cd9a5f 100644
--- a/src/Service/ThemeBuilder/TailwindCSS/Builder.php
+++ b/src/Service/ThemeBuilder/TailwindCSS/Builder.php
@@ -68,7 +68,8 @@ public function detect(string $themePath): bool
         if ($this->fileDriver->isExists($themePath . '/composer.json')) {
             $composerContent = $this->fileDriver->fileGetContents($themePath . '/composer.json');
             $composerJson = json_decode($composerContent, true);
-            if (\is_array($composerJson)
+            if (
+                \is_array($composerJson)
                 && isset($composerJson['name'])
                 && \is_string($composerJson['name'])
                 && !str_contains($composerJson['name'], 'hyva')
@@ -247,7 +248,7 @@ public function watch(
                 }
             }
 
-            $exitCode = $process->run(function ($type, $buffer) use ($output): void {
+            $exitCode = $process->run(static function ($type, $buffer) use ($output): void {
                 $output->write($buffer);
             });
 
diff --git a/src/view/adminhtml/web/css/styles.css b/src/view/adminhtml/web/css/styles.css
index 1acc1c84..db082546 100644
--- a/src/view/adminhtml/web/css/styles.css
+++ b/src/view/adminhtml/web/css/styles.css
@@ -1,8 +1,8 @@
 .admin__page-nav._collapsed.mageforge-tab .title,
 .admin__page-nav._collapsed._show.mageforge-tab .title {
-    background-image: url('../images/MageForgeLogo.png');
-    background-position: 15px center;
-    background-repeat: no-repeat;
-    background-size: auto 50%;
-    text-indent: 35px;
+  background-image: url("../images/MageForgeLogo.png");
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
+  text-indent: 35px;
 }
diff --git a/src/view/adminhtml/web/images/MageForgeLogo.png b/src/view/adminhtml/web/images/MageForgeLogo.png
index d95fb336..11443a9e 100644
Binary files a/src/view/adminhtml/web/images/MageForgeLogo.png and b/src/view/adminhtml/web/images/MageForgeLogo.png differ
diff --git a/src/view/frontend/templates/inspector.phtml b/src/view/frontend/templates/inspector.phtml
index e4862a14..4b2b51b1 100644
--- a/src/view/frontend/templates/inspector.phtml
+++ b/src/view/frontend/templates/inspector.phtml
@@ -1,5 +1,7 @@
 <?php
 
+declare(strict_types=1);
+
 /**
  * MageForge Inspector Template
  *
@@ -17,47 +19,48 @@
 
 <!-- Alpine.js Bootstrap (load only if not already present) -->
 <?php
+
 $alpineBootstrap = <<<JS
-(function() {
-    'use strict';
+    (function() {
+        'use strict';
 
-    function loadAlpineFromCDN() {
-        // Check if Alpine.js is already loaded (Hyvä themes) to avoid conflicts
-        if (typeof Alpine !== 'undefined') {
-            console.log('[MageForge Inspector] Alpine.js already loaded');
-            return;
-        }
+        function loadAlpineFromCDN() {
+            // Check if Alpine.js is already loaded (Hyvä themes) to avoid conflicts
+            if (typeof Alpine !== 'undefined') {
+                console.log('[MageForge Inspector] Alpine.js already loaded');
+                return;
+            }
 
-        console.log('[MageForge Inspector] Loading Alpine.js from CDN');
+            console.log('[MageForge Inspector] Loading Alpine.js from CDN');
 
-        var alpineScript = document.createElement('script');
-        alpineScript.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js';
-        alpineScript.integrity = 'sha256-vuumPQiVb2T6Bg9rainIejQb8Gn7lslFnCIsb9QuWK4=';
-        alpineScript.crossOrigin = 'anonymous';
-        alpineScript.onload = function() {
-            console.log('[MageForge Inspector] Alpine.js loaded successfully');
-        };
-        alpineScript.onerror = function() {
-            console.error('[MageForge Inspector] Failed to load Alpine.js');
-        };
+            var alpineScript = document.createElement('script');
+            alpineScript.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js';
+            alpineScript.integrity = 'sha256-vuumPQiVb2T6Bg9rainIejQb8Gn7lslFnCIsb9QuWK4=';
+            alpineScript.crossOrigin = 'anonymous';
+            alpineScript.onload = function() {
+                console.log('[MageForge Inspector] Alpine.js loaded successfully');
+            };
+            alpineScript.onerror = function() {
+                console.error('[MageForge Inspector] Failed to load Alpine.js');
+            };
 
-        document.head.appendChild(alpineScript);
-    }
+            document.head.appendChild(alpineScript);
+        }
 
-    // Use a short microtask delay after DOMContentLoaded so that all deferred
-    // and module scripts (including Hyvä's Alpine bundle) have had a chance to
-    // run before we decide to load Alpine from CDN.
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', function() {
-            // setTimeout(0) yields to the script queue, giving defer/module
-            // scripts priority over this CDN fallback.
+        // Use a short microtask delay after DOMContentLoaded so that all deferred
+        // and module scripts (including Hyvä's Alpine bundle) have had a chance to
+        // run before we decide to load Alpine from CDN.
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', function() {
+                // setTimeout(0) yields to the script queue, giving defer/module
+                // scripts priority over this CDN fallback.
+                setTimeout(loadAlpineFromCDN, 0);
+            });
+        } else {
             setTimeout(loadAlpineFromCDN, 0);
-        });
-    } else {
-        setTimeout(loadAlpineFromCDN, 0);
-    }
-})();
-JS;
+        }
+    })();
+    JS;
 ?>
 <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $alpineBootstrap, false) ?>
 
diff --git a/src/view/frontend/web/css/audits/tab-order.css b/src/view/frontend/web/css/audits/tab-order.css
index 61981ab6..4a032135 100644
--- a/src/view/frontend/web/css/audits/tab-order.css
+++ b/src/view/frontend/web/css/audits/tab-order.css
@@ -6,64 +6,64 @@
  */
 
 .mageforge-tab-order-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999997;
-    overflow: visible;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999997;
+  overflow: visible;
 }
 
 .mageforge-tab-order-svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
 }
 
 .mageforge-tab-order-line {
-    stroke: var(--mageforge-color-blue);
-    stroke-width: 1.5;
-    stroke-opacity: 0.5;
-    stroke-dasharray: 4 3;
-    fill: none;
+  stroke: var(--mageforge-color-blue);
+  stroke-width: 1.5;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 4 3;
+  fill: none;
 }
 
 .mageforge-tab-order-line--negative {
-    stroke: var(--mageforge-color-red);
+  stroke: var(--mageforge-color-red);
 }
 
 .mageforge-tab-order-badge {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: var(--mageforge-color-blue);
-    color: var(--mageforge-color-white);
-    font-family: var(--mageforge-font-family);
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--mageforge-color-blue);
+  color: var(--mageforge-color-white);
+  font-family: var(--mageforge-font-family);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
 
 .mageforge-tab-order-badge--negative {
-    background: var(--mageforge-color-red);
+  background: var(--mageforge-color-red);
 }
 
 /* Element is focusable but clipped by an overflow:hidden ancestor (e.g. off-canvas slider item) */
 .mageforge-tab-order-badge--clipped {
-    background: var(--mageforge-color-orange);
+  background: var(--mageforge-color-orange);
 }
 
 .mageforge-tab-order-line--clipped {
-    stroke: var(--mageforge-color-orange);
+  stroke: var(--mageforge-color-orange);
 }
diff --git a/src/view/frontend/web/css/inspector.css b/src/view/frontend/web/css/inspector.css
index 2587f2f2..16ab0ca4 100644
--- a/src/view/frontend/web/css/inspector.css
+++ b/src/view/frontend/web/css/inspector.css
@@ -13,53 +13,61 @@
    ========================================================================== */
 
 :root {
-    --mageforge-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    --mageforge-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
-    --mageforge-color-blue: #3b82f6;
-    --mageforge-color-blue-dark: #2563eb;
-    --mageforge-color-green: #10b981;
-    --mageforge-color-green-dark: #059669;
-    --mageforge-color-red: #ef4444;
-    --mageforge-color-red-light: #fca5a5;
-    --mageforge-color-yellow: #fbbf24;
-    --mageforge-color-slate-100: #f1f5f9;
-    --mageforge-color-slate-200: #e2e8f0;
-    --mageforge-color-slate-300: #cbd5e1;
-    --mageforge-color-slate-400: #94a3b8;
-    --mageforge-color-slate-500: #64748b;
-    --mageforge-color-amber: #f59e0b;
-    --mageforge-color-cyan: #22d3ee;
-    --mageforge-color-purple: #a78bfa;
-    --mageforge-color-orange: #fb923c;
-    --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
-    --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
-    --mageforge-border-color: rgba(148, 163, 184, 0.15);
-
-    /* Glass/Overlay Variables */
-    --mageforge-surface-glass: rgba(255, 255, 255, 0.05);
-    --mageforge-surface-glass-hover: rgba(255, 255, 255, 0.08); /* slightly lighter for hover */
-    --mageforge-border-glass: rgba(255, 255, 255, 0.1);
-    --mageforge-shadow-glow: rgba(255, 255, 255, 0.05);
+  --mageforge-font-family:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --mageforge-font-mono:
+    "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Consolas", monospace;
+  --mageforge-color-blue: #3b82f6;
+  --mageforge-color-blue-dark: #2563eb;
+  --mageforge-color-green: #10b981;
+  --mageforge-color-green-dark: #059669;
+  --mageforge-color-red: #ef4444;
+  --mageforge-color-red-light: #fca5a5;
+  --mageforge-color-yellow: #fbbf24;
+  --mageforge-color-slate-100: #f1f5f9;
+  --mageforge-color-slate-200: #e2e8f0;
+  --mageforge-color-slate-300: #cbd5e1;
+  --mageforge-color-slate-400: #94a3b8;
+  --mageforge-color-slate-500: #64748b;
+  --mageforge-color-amber: #f59e0b;
+  --mageforge-color-cyan: #22d3ee;
+  --mageforge-color-purple: #a78bfa;
+  --mageforge-color-orange: #fb923c;
+  --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
+  --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
+  --mageforge-border-color: rgba(148, 163, 184, 0.15);
+
+  /* Glass/Overlay Variables */
+  --mageforge-surface-glass: rgba(255, 255, 255, 0.05);
+  --mageforge-surface-glass-hover: rgba(
+    255,
+    255,
+    255,
+    0.08
+  ); /* slightly lighter for hover */
+  --mageforge-border-glass: rgba(255, 255, 255, 0.1);
+  --mageforge-shadow-glow: rgba(255, 255, 255, 0.05);
 }
 
 .mageforge-inspector {
-    font-family: var(--mageforge-font-family);
-    font-size: 16px;
-    line-height: 1.5;
+  font-family: var(--mageforge-font-family);
+  font-size: 16px;
+  line-height: 1.5;
 }
 
 /* Reset styles to prevent theme interference */
 .mageforge-inspector *,
 .mageforge-inspector *::before,
 .mageforge-inspector *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 /* Ensure inspector elements don't affect layout */
 .mageforge-inspectable {
-    display: contents !important;
+  display: contents !important;
 }
 
 /* ============================================================================
@@ -67,13 +75,18 @@
    ========================================================================== */
 
 .mageforge-inspector-highlight {
-    position: absolute;
-    pointer-events: none;
-    outline: 3px solid var(--mageforge-color-blue);
-    outline-offset: -3px;
-    z-index: 9998;
-    transition: all 0.1s ease-in-out;
-    background-color: rgba(59, 130, 246, 0.05); /* keep opacity variant local or use calc/color-mix in future */
+  position: absolute;
+  pointer-events: none;
+  outline: 3px solid var(--mageforge-color-blue);
+  outline-offset: -3px;
+  z-index: 9998;
+  transition: all 0.1s ease-in-out;
+  background-color: rgba(
+    59,
+    130,
+    246,
+    0.05
+  ); /* keep opacity variant local or use calc/color-mix in future */
 }
 
 /* ============================================================================
@@ -81,47 +94,61 @@
    ========================================================================== */
 
 .mageforge-inspector-float-button {
-    height: 36px;
-    padding: 0 14px;
-    background: linear-gradient(135deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-blue-dark) 100%);
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-family: var(--mageforge-font-family);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
-    text-transform: none;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    backdrop-filter: blur(8px);
-    letter-spacing: 0.025em;
-    vertical-align: middle;
-    text-decoration: none;
+  height: 36px;
+  padding: 0 14px;
+  background: linear-gradient(
+    135deg,
+    var(--mageforge-color-blue) 0%,
+    var(--mageforge-color-blue-dark) 100%
+  );
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--mageforge-font-family);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  text-transform: none;
+  box-shadow:
+    0 4px 12px rgba(59, 130, 246, 0.4),
+    0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+  letter-spacing: 0.025em;
+  vertical-align: middle;
+  text-decoration: none;
 }
 
 .mageforge-inspector-float-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 20px rgba(59, 130, 246, 0.5),
+    0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .mageforge-inspector-float-button:active {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .mageforge-inspector-float-button:focus-visible {
-    outline: 2px solid rgba(255, 255, 255, 0.8);
-    outline-offset: 2px;
+  outline: 2px solid rgba(255, 255, 255, 0.8);
+  outline-offset: 2px;
 }
 
 .mageforge-inspector-float-button.mageforge-active {
-    background: linear-gradient(135deg, var(--mageforge-color-green) 0%, var(--mageforge-color-green-dark) 100%);
-    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 8px 20px rgba(16, 185, 129, 0.5);
+  background: linear-gradient(
+    135deg,
+    var(--mageforge-color-green) 0%,
+    var(--mageforge-color-green-dark) 100%
+  );
+  box-shadow:
+    0 0 0 3px rgba(16, 185, 129, 0.2),
+    0 8px 20px rgba(16, 185, 129, 0.5);
 }
 
 /* ============================================================================
@@ -129,67 +156,72 @@
    ========================================================================== */
 
 .mageforge-inspector-info-badge {
-    position: absolute;
-    background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%);
-    backdrop-filter: blur(12px);
-    color: white;
-    padding: 16px;
-    border-radius: 12px;
-    font-family: var(--mageforge-font-family);
-    font-size: 11px;
-    line-height: 1.6;
-    pointer-events: auto;
-    z-index: 10000000;
-    width: 500px;
-    word-wrap: break-word;
-    border: 1px solid var(--mageforge-border-color);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
-                0 10px 10px -5px rgba(0, 0, 0, 0.2),
-                0 0 0 1px rgba(255, 255, 255, 0.05);
+  position: absolute;
+  background: linear-gradient(
+    135deg,
+    var(--mageforge-bg-dark) 0%,
+    var(--mageforge-bg-dark-alt) 100%
+  );
+  backdrop-filter: blur(12px);
+  color: white;
+  padding: 16px;
+  border-radius: 12px;
+  font-family: var(--mageforge-font-family);
+  font-size: 11px;
+  line-height: 1.6;
+  pointer-events: auto;
+  z-index: 10000000;
+  width: 500px;
+  word-wrap: break-word;
+  border: 1px solid var(--mageforge-border-color);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.3),
+    0 10px 10px -5px rgba(0, 0, 0, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 
 .mageforge-inspector-arrow {
-    position: absolute;
-    top: -8px;
-    left: 24px;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-bottom: 8px solid var(--mageforge-bg-dark);
-    pointer-events: none;
-    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2));
+  position: absolute;
+  top: -8px;
+  left: 24px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid var(--mageforge-bg-dark);
+  pointer-events: none;
+  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2));
 }
 
 /* Close button */
 .mageforge-inspector-close {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    width: 28px;
-    height: 28px;
-    background: var(--mageforge-surface-glass);
-    border: 1px solid var(--mageforge-border-glass);
-    border-radius: 6px;
-    color: var(--mageforge-color-slate-400);
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-    z-index: 10;
-    font-family: inherit;
-    line-height: 1;
-    padding: 0;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  background: var(--mageforge-surface-glass);
+  border: 1px solid var(--mageforge-border-glass);
+  border-radius: 6px;
+  color: var(--mageforge-color-slate-400);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  z-index: 10;
+  font-family: inherit;
+  line-height: 1;
+  padding: 0;
 }
 
 .mageforge-inspector-close:hover {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.3);
-    color: var(--mageforge-color-red);
-    transform: scale(1.05);
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--mageforge-color-red);
+  transform: scale(1.05);
 }
 
 /* ============================================================================
@@ -198,47 +230,48 @@
 
 /* Fixed positioning */
 .mageforge-fixed {
-    position: fixed;
+  position: fixed;
 }
 
 /* Spacing */
 .mageforge-bottom-20 {
-    bottom: 5rem;
+  bottom: 5rem;
 }
 
 .mageforge-right-6 {
-    right: 1.5rem;
+  right: 1.5rem;
 }
 
 .mageforge-px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .mageforge-py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 /* Rounded corners */
 .mageforge-rounded-lg {
-    border-radius: 0.5rem;
+  border-radius: 0.5rem;
 }
 
 /* Background colors */
 .mageforge-bg-green-500 {
-    background-color: var(--mageforge-color-green);
+  background-color: var(--mageforge-color-green);
 }
 
 /* Text colors */
 .mageforge-text-white {
-    color: white;
+  color: white;
 }
 
 /* Shadows */
 .mageforge-shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-                0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
 /* ============================================================================
@@ -246,44 +279,45 @@
    ========================================================================== */
 
 @keyframes mageforge-pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.7;
-    }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
 }
 
 .mageforge-pulse {
-    animation: mageforge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: mageforge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 @keyframes mageforge-fade-in {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .mageforge-animate-fade-in {
-    animation: mageforge-fade-in 0.2s ease-in-out;
+  animation: mageforge-fade-in 0.2s ease-in-out;
 }
 
 @keyframes mageforge-slide-up {
-    0% {
-        transform: translateY(10px);
-        opacity: 0;
-    }
-    100% {
-        transform: translateY(0);
-        opacity: 1;
-    }
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 .mageforge-animate-slide-up {
-    animation: mageforge-slide-up 0.3s ease-out;
+  animation: mageforge-slide-up 0.3s ease-out;
 }
 
 /* ============================================================================
@@ -291,17 +325,17 @@
    ========================================================================== */
 
 @media (max-width: 640px) {
-    .mageforge-inspector-info-badge {
-        min-width: 280px;
-        max-width: calc(100vw - 40px);
-        font-size: 10px;
-    }
+  .mageforge-inspector-info-badge {
+    min-width: 280px;
+    max-width: calc(100vw - 40px);
+    font-size: 10px;
+  }
 }
 
 @media (max-width: 480px) {
-    .mageforge-inspector-info-badge {
-        padding: 12px;
-    }
+  .mageforge-inspector-info-badge {
+    padding: 12px;
+  }
 }
 
 /* ============================================================================
@@ -310,83 +344,91 @@
 
 /* Performance metric color indicators */
 .mageforge-perf-good {
-    color: var(--mageforge-color-green) !important;
+  color: var(--mageforge-color-green) !important;
 }
 
 .mageforge-perf-warning {
-    color: var(--mageforge-color-amber) !important;
+  color: var(--mageforge-color-amber) !important;
 }
 
 .mageforge-perf-poor {
-    color: var(--mageforge-color-red) !important;
+  color: var(--mageforge-color-red) !important;
 }
 
 /* Code inline display for cache keys */
 .mageforge-code-inline {
-    background: rgba(100, 116, 139, 0.1);
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-family: var(--mageforge-font-mono);
-    font-size: 11px;
-    color: var(--mageforge-color-slate-200);
-    word-break: break-all;
+  background: rgba(100, 116, 139, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: var(--mageforge-font-mono);
+  font-size: 11px;
+  color: var(--mageforge-color-slate-200);
+  word-break: break-all;
 }
 
 /* Tag list container */
 .mageforge-tag-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-    margin-top: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
 }
 
 /* Individual tag styling */
 .mageforge-tag {
-    background: rgba(59, 130, 246, 0.1);
-    color: var(--mageforge-color-blue);
-    padding: 2px 8px;
-    border-radius: 12px;
-    font-size: 10px;
-    font-weight: 500;
-    border: 1px solid rgba(59, 130, 246, 0.2);
-    transition: all 0.2s ease;
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--mageforge-color-blue);
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  transition: all 0.2s ease;
 }
 
 .mageforge-tag:hover {
-    background: rgba(59, 130, 246, 0.2);
-    border-color: rgba(59, 130, 246, 0.4);
-    transform: translateY(-1px);
+  background: rgba(59, 130, 246, 0.2);
+  border-color: rgba(59, 130, 246, 0.4);
+  transform: translateY(-1px);
 }
 
 /* Performance complexity bars */
 .mageforge-complexity-bar {
-    width: 100%;
-    height: 4px;
-    background: rgba(148, 163, 184, 0.2);
-    border-radius: 2px;
-    overflow: hidden;
-    margin-top: 4px;
+  width: 100%;
+  height: 4px;
+  background: rgba(148, 163, 184, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 4px;
 }
 
 .mageforge-complexity-bar-fill {
-    height: 100%;
-    transition: width 0.3s ease;
-    border-radius: 2px;
+  height: 100%;
+  transition: width 0.3s ease;
+  border-radius: 2px;
 }
 
 .mageforge-complexity-bar-fill.low {
-    background: linear-gradient(90deg, var(--mageforge-color-green), #34d399);
-    width: 33%;
+  background: linear-gradient(90deg, var(--mageforge-color-green), #34d399);
+  width: 33%;
 }
 
 .mageforge-complexity-bar-fill.medium {
-    background: linear-gradient(90deg, var(--mageforge-color-amber), var(--mageforge-color-yellow));
-    width: 66%;
+  background: linear-gradient(
+    90deg,
+    var(--mageforge-color-amber),
+    var(--mageforge-color-yellow)
+  );
+  width: 66%;
 }
 
 .mageforge-complexity-bar-fill.high {
-    background: linear-gradient(90deg, var(--mageforge-color-red), var(--mageforge-color-red-light));
-    width: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--mageforge-color-red),
+    var(--mageforge-color-red-light)
+  );
+  width: 100%;
 }
 
 /* ============================================================================
@@ -394,130 +436,159 @@
    ========================================================================== */
 
 @media print {
-    .mageforge-inspector,
-    .mageforge-inspector-highlight,
-    .mageforge-inspector-float-button,
-    .mageforge-inspector-info-badge {
-        display: none !important;
-    }
+  .mageforge-inspector,
+  .mageforge-inspector-highlight,
+  .mageforge-inspector-float-button,
+  .mageforge-inspector-info-badge {
+    display: none !important;
+  }
 }
 
 /* ============================================================================
    Tabs System
    ========================================================================== */
 .mageforge-tabs-container {
-    margin-bottom: 16px;
-    padding-top: 8px;
+  margin-bottom: 16px;
+  padding-top: 8px;
 }
 
 .mageforge-tabs-header {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    gap: 4px;
-    margin-bottom: 16px;
-    border-bottom: 1px solid var(--mageforge-border-color);
-    padding-right: 48px;
-    /* Hide scrollbar for cleaner look */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 4px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--mageforge-border-color);
+  padding-right: 48px;
+  /* Hide scrollbar for cleaner look */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 .mageforge-tabs-header::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .mageforge-tab-button {
-    padding: 8px 12px;
-    background: color-mix(in srgb, var(--mageforge-color-slate-400) 10%, transparent);
-    color: var(--mageforge-color-slate-400);
-    border: none;
-    border-bottom: 2px solid transparent;
-    cursor: pointer;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.025em;
-    border-radius: 6px 6px 0 0;
-    font-family: inherit;
-    white-space: nowrap;
-    position: relative; /* For badge positioning */
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  padding: 8px 12px;
+  background: color-mix(
+    in srgb,
+    var(--mageforge-color-slate-400) 10%,
+    transparent
+  );
+  color: var(--mageforge-color-slate-400);
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  border-radius: 6px 6px 0 0;
+  font-family: inherit;
+  white-space: nowrap;
+  position: relative; /* For badge positioning */
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
 }
 
 .mageforge-tab-button:hover {
-    background: color-mix(in srgb, var(--mageforge-color-slate-400) 20%, transparent);
-    color: var(--mageforge-color-slate-300);
+  background: color-mix(
+    in srgb,
+    var(--mageforge-color-slate-400) 20%,
+    transparent
+  );
+  color: var(--mageforge-color-slate-300);
 }
 
 .mageforge-tab-button.active {
-    background: rgba(59, 130, 246, 0.15);
-    color: var(--mageforge-color-blue);
-    border-bottom-color: var(--mageforge-color-blue);
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--mageforge-color-blue);
+  border-bottom-color: var(--mageforge-color-blue);
 }
 
 /* ============================================================================
    Info Sections & Data Display
    ========================================================================== */
 .mageforge-info-section {
-    margin-bottom: 12px;
+  margin-bottom: 12px;
 }
 
 .mageforge-info-title {
-    font-weight: 600;
-    margin-bottom: 6px;
-    font-size: 11px;
-    letter-spacing: 0.025em;
-    text-transform: uppercase;
-    opacity: 0.9;
+  font-weight: 600;
+  margin-bottom: 6px;
+  font-size: 11px;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  opacity: 0.9;
 }
 
 /* Color utilities */
-.mageforge-text-blue { color: var(--mageforge-color-blue); }
-.mageforge-text-purple { color: var(--mageforge-color-purple); }
-.mageforge-text-green { color: var(--mageforge-color-green); }
-.mageforge-text-orange { color: var(--mageforge-color-orange); }
-.mageforge-text-cyan { color: var(--mageforge-color-cyan); }
-.mageforge-text-yellow { color: var(--mageforge-color-yellow); }
-.mageforge-text-red { color: var(--mageforge-color-red); }
-.mageforge-text-amber { color: var(--mageforge-color-amber); }
-.mageforge-text-gray { color: var(--mageforge-color-slate-400); }
+.mageforge-text-blue {
+  color: var(--mageforge-color-blue);
+}
+.mageforge-text-purple {
+  color: var(--mageforge-color-purple);
+}
+.mageforge-text-green {
+  color: var(--mageforge-color-green);
+}
+.mageforge-text-orange {
+  color: var(--mageforge-color-orange);
+}
+.mageforge-text-cyan {
+  color: var(--mageforge-color-cyan);
+}
+.mageforge-text-yellow {
+  color: var(--mageforge-color-yellow);
+}
+.mageforge-text-red {
+  color: var(--mageforge-color-red);
+}
+.mageforge-text-amber {
+  color: var(--mageforge-color-amber);
+}
+.mageforge-text-gray {
+  color: var(--mageforge-color-slate-400);
+}
 
 .mageforge-info-value {
-    color: var(--mageforge-color-slate-100);
-    font-size: 12px;
-    word-break: break-all;
-    cursor: pointer;
-    display: inline-block;
-    transition: all 0.2s ease;
-    padding: 6px 10px;
-    background: var(--mageforge-surface-glass); /* ~3% opacity */
-    border-radius: 6px;
-    border: 1px solid var(--mageforge-border-glass); /* ~8% opacity */
-    width: 100%;
-    box-sizing: border-box;
-    font-family: var(--mageforge-font-mono);
-    pointer-events: auto;
+  color: var(--mageforge-color-slate-100);
+  font-size: 12px;
+  word-break: break-all;
+  cursor: pointer;
+  display: inline-block;
+  transition: all 0.2s ease;
+  padding: 6px 10px;
+  background: var(--mageforge-surface-glass); /* ~3% opacity */
+  border-radius: 6px;
+  border: 1px solid var(--mageforge-border-glass); /* ~8% opacity */
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--mageforge-font-mono);
+  pointer-events: auto;
 }
 
 .mageforge-info-value:hover {
-    background: var(--mageforge-surface-glass-hover);
-    border-color: var(--mageforge-border-color); /* fallback or stronger border */
-    transform: translateY(-1px);
+  background: var(--mageforge-surface-glass-hover);
+  border-color: var(--mageforge-border-color); /* fallback or stronger border */
+  transform: translateY(-1px);
 }
 
 .mageforge-info-value.copied {
-    color: var(--mageforge-color-green) !important;
-    background: rgba(16, 185, 129, 0.1) !important;
-    border-color: rgba(16, 185, 129, 0.3) !important;
-    font-weight: 600;
+  color: var(--mageforge-color-green) !important;
+  background: rgba(16, 185, 129, 0.1) !important;
+  border-color: rgba(16, 185, 129, 0.3) !important;
+  font-weight: 600;
 }
 
 .mageforge-info-value.copy-failed {
-    color: var(--mageforge-color-red) !important;
-    background: rgba(239, 68, 68, 0.1) !important;
-    border-color: rgba(239, 68, 68, 0.3) !important;
+  color: var(--mageforge-color-red) !important;
+  background: rgba(239, 68, 68, 0.1) !important;
+  border-color: rgba(239, 68, 68, 0.3) !important;
 }
 
 /* ============================================================================
@@ -525,138 +596,142 @@
    ========================================================================== */
 .mageforge-inheritance-note,
 .mageforge-warning-box {
-    border-radius: 8px;
-    padding: 10px 12px;
-    margin-bottom: 16px;
-    font-size: 11px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .mageforge-inheritance-note {
-    background: rgba(251, 191, 36, 0.1);
-    border: 1px solid rgba(251, 191, 36, 0.3);
-    color: var(--mageforge-color-yellow);
+  background: rgba(251, 191, 36, 0.1);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  color: var(--mageforge-color-yellow);
 }
 
 .mageforge-warning-box {
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    color: var(--mageforge-color-red-light);
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: var(--mageforge-color-red-light);
 }
 
 .mageforge-no-data {
-    text-align: center;
-    padding: 24px 16px;
-    color: var(--mageforge-color-slate-400);
-    font-size: 12px;
-    line-height: 1.6;
+  text-align: center;
+  padding: 24px 16px;
+  color: var(--mageforge-color-slate-400);
+  font-size: 12px;
+  line-height: 1.6;
 }
 
 .mageforge-no-data-icon {
-    font-size: 24px;
-    margin-bottom: 12px;
+  font-size: 24px;
+  margin-bottom: 12px;
 }
 
 .mageforge-no-data-title {
-    color: var(--mageforge-color-slate-300);
-    font-weight: 600;
-    margin-bottom: 8px;
+  color: var(--mageforge-color-slate-300);
+  font-weight: 600;
+  margin-bottom: 8px;
 }
 
 .mageforge-no-data-desc {
-    color: var(--mageforge-color-slate-400);
+  color: var(--mageforge-color-slate-400);
 }
 
 .mageforge-no-data-meta {
-    color: var(--mageforge-color-slate-500);
-    font-size: 11px;
-    margin-top: 8px;
+  color: var(--mageforge-color-slate-500);
+  font-size: 11px;
+  margin-top: 8px;
 }
 
 .mageforge-code-tag {
-    background: var(--mageforge-surface-glass);
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-family: monospace;
+  background: var(--mageforge-surface-glass);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
 }
 
 /* ============================================================================
    Footer & Branding
    ========================================================================== */
 .mageforge-branding-footer {
-    cursor: move;
-    margin-top: 16px;
-    padding-top: 12px;
-    border-top: 1px solid rgba(148, 163, 184, 0.12); /* Almost slate-400, keeping specific opacity */
-    text-align: center;
-    font-size: 10px;
-    color: var(--mageforge-color-slate-400);
-    font-weight: 500;
-    letter-spacing: 0.025em;
+  cursor: move;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(148, 163, 184, 0.12); /* Almost slate-400, keeping specific opacity */
+  text-align: center;
+  font-size: 10px;
+  color: var(--mageforge-color-slate-400);
+  font-weight: 500;
+  letter-spacing: 0.025em;
 }
 
 .mageforge-feature-link {
-    display: inline-block;
-    color: var(--mageforge-color-slate-400);
-    text-decoration: none;
-    font-size: 10px;
-    transition: color 0.2s;
+  display: inline-block;
+  color: var(--mageforge-color-slate-400);
+  text-decoration: none;
+  font-size: 10px;
+  transition: color 0.2s;
 }
 
 .mageforge-feature-link:hover {
-    color: var(--mageforge-color-blue);
-    text-decoration: underline;
+  color: var(--mageforge-color-blue);
+  text-decoration: underline;
 }
 
 .mageforge-feature-link-container {
-    margin-top: 4px;
+  margin-top: 4px;
 }
 
 /* ============================================================================
    Draggable & Connector
    ========================================================================== */
 .mageforge-inspector-info-badge.draggable {
-    cursor: move;
-    user-select: none;
-    -webkit-user-select: none;
+  cursor: move;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 /* Ensure header area is the primary drag handle */
 .mageforge-inspector-info-badge.draggable .mageforge-tabs-header,
 .mageforge-inspector-info-badge.draggable .mageforge-branding-footer {
-    cursor: move;
+  cursor: move;
 }
 
 .mageforge-connector-svg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    pointer-events: none;
-    z-index: 9999999;
-    overflow: visible;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 9999999;
+  overflow: visible;
 }
 
 .mageforge-connector-line {
-    stroke: var(--mageforge-color-blue);
-    stroke-width: 2;
-    stroke-dasharray: 4;
-    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
-    animation: mageforge-dash-flow 30s linear infinite;
+  stroke: var(--mageforge-color-blue);
+  stroke-width: 2;
+  stroke-dasharray: 4;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+  animation: mageforge-dash-flow 30s linear infinite;
 }
 
 .mageforge-connector-dot {
-    fill: var(--mageforge-color-blue);
-    stroke: white;
-    stroke-width: 2;
+  fill: var(--mageforge-color-blue);
+  stroke: white;
+  stroke-width: 2;
 }
 
 @keyframes mageforge-dash-flow {
-    from { stroke-dashoffset: 500; }
-    to { stroke-dashoffset: 0; }
+  from {
+    stroke-dashoffset: 500;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
 }
 
 /* ============================================================================
@@ -665,62 +740,61 @@
 
 /* Explicit Light Mode */
 .mageforge-inspector[data-theme="light"] {
+  --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
+  --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
+  --mageforge-border-color: rgba(0, 0, 0, 0.12);
+
+  --mageforge-color-slate-100: #0f172a; /* Slate 900 */
+  --mageforge-color-slate-200: #1e293b; /* Slate 800 */
+  --mageforge-color-slate-300: #334155; /* Slate 700 */
+  --mageforge-color-slate-400: #64748b; /* Slate 500 */
+  --mageforge-color-slate-500: #94a3b8; /* Slate 400 */
+
+  /* Glass Overlays - Inverted for light mode */
+  --mageforge-surface-glass: rgba(0, 0, 0, 0.05);
+  --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.08);
+  --mageforge-border-glass: rgba(0, 0, 0, 0.1);
+  --mageforge-shadow-glow: rgba(0, 0, 0, 0.05);
+}
+
+/* Auto Mode - Light Preference */
+@media (prefers-color-scheme: light) {
+  .mageforge-inspector[data-theme="auto"] {
     --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
     --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
     --mageforge-border-color: rgba(0, 0, 0, 0.12);
 
-    --mageforge-color-slate-100: #0f172a; /* Slate 900 */
-    --mageforge-color-slate-200: #1e293b; /* Slate 800 */
-    --mageforge-color-slate-300: #334155; /* Slate 700 */
-    --mageforge-color-slate-400: #64748b; /* Slate 500 */
-    --mageforge-color-slate-500: #94a3b8; /* Slate 400 */
+    --mageforge-color-slate-100: #0f172a;
+    --mageforge-color-slate-200: #1e293b;
+    --mageforge-color-slate-300: #334155;
+    --mageforge-color-slate-400: #64748b;
+    --mageforge-color-slate-500: #94a3b8;
 
     /* Glass Overlays - Inverted for light mode */
     --mageforge-surface-glass: rgba(0, 0, 0, 0.05);
     --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.08);
     --mageforge-border-glass: rgba(0, 0, 0, 0.1);
     --mageforge-shadow-glow: rgba(0, 0, 0, 0.05);
-}
-
-/* Auto Mode - Light Preference */
-@media (prefers-color-scheme: light) {
-    .mageforge-inspector[data-theme="auto"] {
-        --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
-        --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
-        --mageforge-border-color: rgba(0, 0, 0, 0.12);
-
-        --mageforge-color-slate-100: #0f172a;
-        --mageforge-color-slate-200: #1e293b;
-        --mageforge-color-slate-300: #334155;
-        --mageforge-color-slate-400: #64748b;
-        --mageforge-color-slate-500: #94a3b8;
-
-        /* Glass Overlays - Inverted for light mode */
-        --mageforge-surface-glass: rgba(0, 0, 0, 0.05);
-        --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.08);
-        --mageforge-border-glass: rgba(0, 0, 0, 0.1);
-        --mageforge-shadow-glow: rgba(0, 0, 0, 0.05);
-    }
+  }
 }
 
 /* Fix for hardcoded white text in light mode */
 .mageforge-inspector[data-theme="light"] .mageforge-text-white {
-    color: var(--mageforge-color-slate-100);
+  color: var(--mageforge-color-slate-100);
 }
 
 @media (prefers-color-scheme: light) {
-    .mageforge-inspector[data-theme="auto"] .mageforge-text-white {
-        color: var(--mageforge-color-slate-100);
-    }
+  .mageforge-inspector[data-theme="auto"] .mageforge-text-white {
+    color: var(--mageforge-color-slate-100);
+  }
 
-    .mageforge-inspector[data-theme="auto"].mageforge-inspector-float-button,
-    .mageforge-inspector[data-theme="auto"] .mageforge-inspector-float-button {
-         color: white; /* Button should stay white */
-    }
+  .mageforge-inspector[data-theme="auto"].mageforge-inspector-float-button,
+  .mageforge-inspector[data-theme="auto"] .mageforge-inspector-float-button {
+    color: white; /* Button should stay white */
+  }
 }
 
 .mageforge-inspector[data-theme="light"].mageforge-inspector-float-button,
 .mageforge-inspector[data-theme="light"] .mageforge-inspector-float-button {
-    color: white;
+  color: white;
 }
-
diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css
index ede922a0..07ae1830 100644
--- a/src/view/frontend/web/css/toolbar.css
+++ b/src/view/frontend/web/css/toolbar.css
@@ -10,47 +10,59 @@
  */
 
 :root {
-    --mageforge-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    --mageforge-color-white: #ffffff;
-    --mageforge-color-blue: #3b82f6;
-    --mageforge-color-green: #10b981;
-    --mageforge-color-green-alpha-15: rgba(16, 185, 129, 0.15);
-    --mageforge-color-green-alpha-35: rgba(16, 185, 129, 0.35);
-    --mageforge-color-red: #ef4444;
-    --mageforge-color-red-alpha-15: rgba(239, 68, 68, 0.15);
-    --mageforge-color-red-alpha-35: rgba(239, 68, 68, 0.35);
-    --mageforge-color-slate-400: #94a3b8;
-    --mageforge-color-orange: #fb923c;
-    --mageforge-color-pink: #C850C0;
-    --mageforge-color-purple: #a855f7;
-    --mageforge-color-amber: #edb04d;
-    --mageforge-group-color-wcag: var(--mageforge-color-purple);
-    --mageforge-group-color-html-quality: var(--mageforge-color-blue);
-    --mageforge-group-color-performance: var(--mageforge-color-orange);
-    --mageforge-color-amber-alpha-15: rgba(237, 176, 77, 0.15);
-    --mageforge-color-amber-alpha-35: rgba(237, 176, 77, 0.35);
-    --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
-    --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
-    --mageforge-border-color: rgba(148, 163, 184, 0.15);
-    --mageforge-surface-glass-hover: rgba(255, 255, 255, 0.08);
-    --mageforge-border-glass: rgba(255, 255, 255, 0.1);
-    --mageforge-shadow-sm: rgba(0, 0, 0, 0.2);
-    --mageforge-shadow-md: rgba(0, 0, 0, 0.3);
-    --mageforge-shadow-lg: rgba(0, 0, 0, 0.4);
-    --mageforge-burger-bg: rgba(15, 23, 42, 0.85);
-    --mageforge-burger-bg-hover: rgba(30, 41, 59, 0.95);
-    --mageforge-toggle-bg-off: rgba(255, 255, 255, 0.15);
-    --mageforge-toggle-bg-off-light: rgba(0, 0, 0, 0.15);
-    --gradient-brand: linear-gradient(43deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 50%, var(--mageforge-color-amber) 100%);
-    --gradient-brand-hover: linear-gradient(43deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 70%, var(--mageforge-color-amber) 100%);
+  --mageforge-font-family:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --mageforge-color-white: #ffffff;
+  --mageforge-color-blue: #3b82f6;
+  --mageforge-color-green: #10b981;
+  --mageforge-color-green-alpha-15: rgba(16, 185, 129, 0.15);
+  --mageforge-color-green-alpha-35: rgba(16, 185, 129, 0.35);
+  --mageforge-color-red: #ef4444;
+  --mageforge-color-red-alpha-15: rgba(239, 68, 68, 0.15);
+  --mageforge-color-red-alpha-35: rgba(239, 68, 68, 0.35);
+  --mageforge-color-slate-400: #94a3b8;
+  --mageforge-color-orange: #fb923c;
+  --mageforge-color-pink: #c850c0;
+  --mageforge-color-purple: #a855f7;
+  --mageforge-color-amber: #edb04d;
+  --mageforge-group-color-wcag: var(--mageforge-color-purple);
+  --mageforge-group-color-html-quality: var(--mageforge-color-blue);
+  --mageforge-group-color-performance: var(--mageforge-color-orange);
+  --mageforge-color-amber-alpha-15: rgba(237, 176, 77, 0.15);
+  --mageforge-color-amber-alpha-35: rgba(237, 176, 77, 0.35);
+  --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
+  --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
+  --mageforge-border-color: rgba(148, 163, 184, 0.15);
+  --mageforge-surface-glass-hover: rgba(255, 255, 255, 0.08);
+  --mageforge-border-glass: rgba(255, 255, 255, 0.1);
+  --mageforge-shadow-sm: rgba(0, 0, 0, 0.2);
+  --mageforge-shadow-md: rgba(0, 0, 0, 0.3);
+  --mageforge-shadow-lg: rgba(0, 0, 0, 0.4);
+  --mageforge-burger-bg: rgba(15, 23, 42, 0.85);
+  --mageforge-burger-bg-hover: rgba(30, 41, 59, 0.95);
+  --mageforge-toggle-bg-off: rgba(255, 255, 255, 0.15);
+  --mageforge-toggle-bg-off-light: rgba(0, 0, 0, 0.15);
+  --gradient-brand: linear-gradient(
+    43deg,
+    var(--mageforge-color-blue) 0%,
+    var(--mageforge-color-pink) 50%,
+    var(--mageforge-color-amber) 100%
+  );
+  --gradient-brand-hover: linear-gradient(
+    43deg,
+    var(--mageforge-color-blue) 0%,
+    var(--mageforge-color-pink) 70%,
+    var(--mageforge-color-amber) 100%
+  );
 }
 
 .mageforge-toolbar *,
 .mageforge-toolbar *::before,
 .mageforge-toolbar *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 /* ============================================================================
@@ -58,14 +70,14 @@
    ========================================================================== */
 
 .mageforge-toolbar {
-    position: fixed;
-    bottom: 16px;
-    left: 16px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    z-index: 9999998;
-    pointer-events: auto;
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 9999998;
+  pointer-events: auto;
 }
 
 /* ============================================================================
@@ -73,69 +85,73 @@
    ========================================================================== */
 
 .mageforge-toolbar-burger {
-    height: 36px;
-    padding: 0 10px 0 8px;
-    background: var(--mageforge-burger-bg);
-    color: var(--mageforge-color-white);
-    border-radius: 5px;
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 12px var(--mageforge-shadow-md), 0 2px 4px var(--mageforge-shadow-sm);
-    flex-shrink: 0;
-    background-image: var(--gradient-brand);
+  height: 36px;
+  padding: 0 10px 0 8px;
+  background: var(--mageforge-burger-bg);
+  color: var(--mageforge-color-white);
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    0 4px 12px var(--mageforge-shadow-md),
+    0 2px 4px var(--mageforge-shadow-sm);
+  flex-shrink: 0;
+  background-image: var(--gradient-brand);
 }
 
 .mageforge-toolbar-burger:hover {
-    background: var(--mageforge-burger-bg-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px var(--mageforge-shadow-lg), 0 4px 8px var(--mageforge-shadow-md);
-    background-image: var(--gradient-brand-hover);
+  background: var(--mageforge-burger-bg-hover);
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 20px var(--mageforge-shadow-lg),
+    0 4px 8px var(--mageforge-shadow-md);
+  background-image: var(--gradient-brand-hover);
 }
 
 .mageforge-toolbar-burger:active {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .mageforge-toolbar-burger.mageforge-active {
-    background: var(--mageforge-color-green);
+  background: var(--mageforge-color-green);
 }
 
 .mageforge-toolbar-burger-icon {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex-shrink: 0;
 }
 
 .mageforge-toolbar-burger-bar {
-    display: block;
-    width: 14px;
-    height: 2px;
-    background: var(--mageforge-color-white);
-    border-radius: 1px;
-    transition: all 0.2s ease;
+  display: block;
+  width: 14px;
+  height: 2px;
+  background: var(--mageforge-color-white);
+  border-radius: 1px;
+  transition: all 0.2s ease;
 }
 
 .mageforge-toolbar-burger-label {
-    font-family: var(--mageforge-font-family);
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.03em;
-    color: var(--mageforge-color-white);
-    white-space: nowrap;
-    line-height: 1;
+  font-family: var(--mageforge-font-family);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--mageforge-color-white);
+  white-space: nowrap;
+  line-height: 1;
 }
 
 .mageforge-toolbar--no-labels .mageforge-toolbar-burger-label,
 .mageforge-toolbar--no-labels .mageforge-inspector-float-button span {
-    display: none;
+  display: none;
 }
 
 /* ============================================================================
@@ -148,244 +164,257 @@
  * Older browsers get an instant show/hide without animation (graceful degradation).
  */
 .mageforge-toolbar-menu {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 0;
-    background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%);
-    border: 1px solid var(--mageforge-border-color);
-    border-radius: 10px;
-    box-shadow: 0 -8px 24px var(--mageforge-shadow-lg), 0 6px 10px var(--mageforge-shadow-sm);
-    padding: 0 6px 6px;
-    min-width: 350px;
-    max-height: 90vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-    font-family: var(--mageforge-font-family);
-    display: none;
-    opacity: 0;
-    transform: translateY(8px);
-    transition:
-        opacity 0.15s ease-out,
-        transform 0.15s ease-out,
-        display 0.15s allow-discrete;
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  background: linear-gradient(
+    135deg,
+    var(--mageforge-bg-dark) 0%,
+    var(--mageforge-bg-dark-alt) 100%
+  );
+  border: 1px solid var(--mageforge-border-color);
+  border-radius: 10px;
+  box-shadow:
+    0 -8px 24px var(--mageforge-shadow-lg),
+    0 6px 10px var(--mageforge-shadow-sm);
+  padding: 0 6px 6px;
+  min-width: 350px;
+  max-height: 90vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: var(--mageforge-font-family);
+  display: none;
+  opacity: 0;
+  transform: translateY(8px);
+  transition:
+    opacity 0.15s ease-out,
+    transform 0.15s ease-out,
+    display 0.15s allow-discrete;
 }
 
 .mageforge-toolbar-menu.mageforge-menu-open {
-    display: block;
-    opacity: 1;
-    transform: translateY(0);
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 @starting-style {
-    .mageforge-toolbar-menu.mageforge-menu-open {
-        opacity: 0;
-        transform: translateY(8px);
-    }
+  .mageforge-toolbar-menu.mageforge-menu-open {
+    opacity: 0;
+    transform: translateY(8px);
+  }
 }
 
 .mageforge-toolbar-menu-title {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 8px 2px;
-    border-bottom: 1px solid var(--mageforge-border-color);
-    margin-bottom: 4px;
-    position: sticky;
-    top: 0;
-    z-index: 99999;
-    background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 8px 2px;
+  border-bottom: 1px solid var(--mageforge-border-color);
+  margin-bottom: 4px;
+  position: sticky;
+  top: 0;
+  z-index: 99999;
+  background: linear-gradient(
+    135deg,
+    var(--mageforge-bg-dark) 0%,
+    var(--mageforge-bg-dark-alt) 100%
+  );
 }
 
 .mageforge-toolbar-menu-title-text {
-    font-family: var(--mageforge-font-family);
-    font-size: 20px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    padding-bottom: 8px;
-    color: transparent;
-    background-image: var(--gradient-brand);
-    background-clip: text;
-    -webkit-background-clip: text;
-    display: block;
+  font-family: var(--mageforge-font-family);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding-bottom: 8px;
+  color: transparent;
+  background-image: var(--gradient-brand);
+  background-clip: text;
+  -webkit-background-clip: text;
+  display: block;
 }
 
 .mageforge-toolbar-menu-close {
-    background: none;
-    border: 1px solid var(--mageforge-border-color);
-    cursor: pointer;
-    color: var(--mageforge-color-slate-400);
-    padding: 6px;
-    line-height: 0;
-    border-radius: 6px;
-    transition:
-        color 0.15s ease,
-        background 0.15s ease;
+  background: none;
+  border: 1px solid var(--mageforge-border-color);
+  cursor: pointer;
+  color: var(--mageforge-color-slate-400);
+  padding: 6px;
+  line-height: 0;
+  border-radius: 6px;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
 }
 
 .mageforge-toolbar-menu-close:hover {
-    color: var(--mageforge-color-white);
-    background: var(--mageforge-surface-glass-hover);
+  color: var(--mageforge-color-white);
+  background: var(--mageforge-surface-glass-hover);
 }
 
 .mageforge-toolbar-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-    padding: 8px 10px;
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 7px;
-    cursor: pointer;
-    color: var(--mageforge-color-white);
-    text-align: left;
-    transition:
-        background 0.15s ease,
-        border-color 0.15s ease;
-    margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--mageforge-color-white);
+  text-align: left;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+  margin-bottom: 4px;
 }
 
 .mageforge-toolbar-menu-item:hover {
-    background: var(--mageforge-surface-glass-hover);
+  background: var(--mageforge-surface-glass-hover);
 }
 
 .mageforge-toolbar-menu-item.mageforge-active {
-    background: var(--mageforge-color-green-alpha-15);
-    border-color: var(--mageforge-color-green-alpha-35);
+  background: var(--mageforge-color-green-alpha-15);
+  border-color: var(--mageforge-color-green-alpha-35);
 }
 
 .mageforge-toolbar-menu-item.mageforge-active .mageforge-toolbar-menu-label {
-    color: var(--mageforge-color-green);
+  color: var(--mageforge-color-green);
 }
 
 .mageforge-toolbar-menu-item.mageforge-active--error {
-    background: var(--mageforge-color-red-alpha-15);
-    border-color: var(--mageforge-color-red-alpha-35);
+  background: var(--mageforge-color-red-alpha-15);
+  border-color: var(--mageforge-color-red-alpha-35);
 }
 
-.mageforge-toolbar-menu-item.mageforge-active--error .mageforge-toolbar-menu-label {
-    color: var(--mageforge-color-red);
+.mageforge-toolbar-menu-item.mageforge-active--error
+  .mageforge-toolbar-menu-label {
+  color: var(--mageforge-color-red);
 }
 
 .mageforge-toolbar-menu-item.mageforge-active--warning {
-    background: var(--mageforge-color-amber-alpha-15);
-    border-color: var(--mageforge-color-amber-alpha-35);
+  background: var(--mageforge-color-amber-alpha-15);
+  border-color: var(--mageforge-color-amber-alpha-35);
 }
 
-.mageforge-toolbar-menu-item.mageforge-active--warning .mageforge-toolbar-menu-label {
-    color: var(--mageforge-color-amber);
+.mageforge-toolbar-menu-item.mageforge-active--warning
+  .mageforge-toolbar-menu-label {
+  color: var(--mageforge-color-amber);
 }
 
 .mageforge-toolbar-menu-icon {
-    font-size: 16px;
-    flex-shrink: 0;
-    width: 10%;
-    min-width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  width: 10%;
+  min-width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .mageforge-toolbar-menu-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
 }
 
 .mageforge-toolbar-menu-toggle {
-    flex-shrink: 0;
-    width: 28px;
-    height: 16px;
-    border-radius: 8px;
-    background: var(--mageforge-toggle-bg-off);
-    position: relative;
-    transition: background 0.2s ease;
-    margin-left: auto;
+  flex-shrink: 0;
+  width: 28px;
+  height: 16px;
+  border-radius: 8px;
+  background: var(--mageforge-toggle-bg-off);
+  position: relative;
+  transition: background 0.2s ease;
+  margin-left: auto;
 }
 
 .mageforge-toolbar-menu-toggle::after {
-    content: '';
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: var(--mageforge-color-white);
-    top: 2px;
-    left: 2px;
-    transition: transform 0.2s ease;
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--mageforge-color-white);
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s ease;
 }
 
 .mageforge-toolbar-menu-item.mageforge-active .mageforge-toolbar-menu-toggle {
-    background: var(--mageforge-color-green);
+  background: var(--mageforge-color-green);
 }
 
-.mageforge-toolbar-menu-item.mageforge-active .mageforge-toolbar-menu-toggle::after {
-    transform: translateX(12px);
+.mageforge-toolbar-menu-item.mageforge-active
+  .mageforge-toolbar-menu-toggle::after {
+  transform: translateX(12px);
 }
 
 .mageforge-toolbar-menu-label {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--mageforge-color-white);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mageforge-color-white);
 }
 
 .mageforge-toolbar-menu-desc {
-    color: var(--mageforge-color-slate-400);
-    font-size: 11px;
-    line-height: 1.3;
-    user-select: text;
-    cursor: default;
+  color: var(--mageforge-color-slate-400);
+  font-size: 11px;
+  line-height: 1.3;
+  user-select: text;
+  cursor: default;
 }
 
 .mageforge-toolbar-menu-desc.mageforge-active {
-    color: var(--mageforge-color-orange);
-    font-size: 12px;
-    user-select: text;
+  color: var(--mageforge-color-orange);
+  font-size: 12px;
+  user-select: text;
 }
 
 .mageforge-toolbar-menu-label-row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .mageforge-toolbar-menu-status {
-    font-size: 9px;
-    font-weight: 700;
-    line-height: 1;
-    padding: 2px 6px;
-    border-radius: 10px;
-    white-space: nowrap;
-    opacity: 0;
-    transform: scale(0.8);
-    transition:
-        opacity 0.2s ease,
-        transform 0.2s ease;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 10px;
+  white-space: nowrap;
+  opacity: 0;
+  transform: scale(0.8);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
 .mageforge-toolbar-menu-status:not(:empty) {
-    opacity: 1;
-    transform: scale(1);
+  opacity: 1;
+  transform: scale(1);
 }
 
 .mageforge-toolbar-menu-status--success {
-    color: var(--mageforge-color-green);
-    background: var(--mageforge-color-green-alpha-15);
-    border: 1px solid var(--mageforge-color-green-alpha-35);
+  color: var(--mageforge-color-green);
+  background: var(--mageforge-color-green-alpha-15);
+  border: 1px solid var(--mageforge-color-green-alpha-35);
 }
 
 .mageforge-toolbar-menu-status--error {
-    color: var(--mageforge-color-red);
-    background: var(--mageforge-color-red-alpha-15);
-    border: 1px solid var(--mageforge-color-red-alpha-35);
+  color: var(--mageforge-color-red);
+  background: var(--mageforge-color-red-alpha-15);
+  border: 1px solid var(--mageforge-color-red-alpha-35);
 }
 
 .mageforge-toolbar-menu-status--warning {
-    color: var(--mageforge-color-amber);
-    background: var(--mageforge-color-amber-alpha-15);
-    border: 1px solid var(--mageforge-color-amber-alpha-35);
+  color: var(--mageforge-color-amber);
+  background: var(--mageforge-color-amber-alpha-15);
+  border: 1px solid var(--mageforge-color-amber-alpha-35);
 }
 
 /* ============================================================================
@@ -393,79 +422,88 @@
    ========================================================================== */
 
 .mageforge-toolbar-menu-group {
-    margin-bottom: 4px;
+  margin-bottom: 4px;
 }
 
 .mageforge-toolbar-menu-group-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 4px 4px 4px 6px;
-    background: none;
-    border: none;
-    border-bottom: 1px solid var(--mageforge-border-color);
-    cursor: pointer;
-    margin-bottom: 4px;
-}
-
-.mageforge-toolbar-menu-group .mageforge-toolbar-menu-group-header:hover .mageforge-toolbar-menu-group-label,
-.mageforge-toolbar-menu-group-header:hover .mageforge-toolbar-menu-group-chevron {
-    color: var(--mageforge-color-white);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 4px 4px 6px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--mageforge-border-color);
+  cursor: pointer;
+  margin-bottom: 4px;
+}
+
+.mageforge-toolbar-menu-group
+  .mageforge-toolbar-menu-group-header:hover
+  .mageforge-toolbar-menu-group-label,
+.mageforge-toolbar-menu-group-header:hover
+  .mageforge-toolbar-menu-group-chevron {
+  color: var(--mageforge-color-white);
 }
 
 .mageforge-toolbar-menu-group-label {
-    font-family: var(--mageforge-font-family);
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    transition: color 0.15s ease;
-    letter-spacing: 0.08em;
-    color: var(--mageforge-color-slate-400);
+  font-family: var(--mageforge-font-family);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  transition: color 0.15s ease;
+  letter-spacing: 0.08em;
+  color: var(--mageforge-color-slate-400);
 }
 
-.mageforge-toolbar-menu-group[data-group-key="wcag"] .mageforge-toolbar-menu-group-label {
-    color: var(--mageforge-group-color-wcag);
+.mageforge-toolbar-menu-group[data-group-key="wcag"]
+  .mageforge-toolbar-menu-group-label {
+  color: var(--mageforge-group-color-wcag);
 }
 
-.mageforge-toolbar-menu-group[data-group-key="html-quality"] .mageforge-toolbar-menu-group-label {
-    color: var(--mageforge-group-color-html-quality);
+.mageforge-toolbar-menu-group[data-group-key="html-quality"]
+  .mageforge-toolbar-menu-group-label {
+  color: var(--mageforge-group-color-html-quality);
 }
 
-.mageforge-toolbar-menu-group[data-group-key="performance"] .mageforge-toolbar-menu-group-label {
-    color: var(--mageforge-group-color-performance);
+.mageforge-toolbar-menu-group[data-group-key="performance"]
+  .mageforge-toolbar-menu-group-label {
+  color: var(--mageforge-group-color-performance);
 }
 
-.mageforge-toolbar-menu-item[data-group-key="wcag"] .mageforge-toolbar-menu-icon {
-    color: var(--mageforge-group-color-wcag);
+.mageforge-toolbar-menu-item[data-group-key="wcag"]
+  .mageforge-toolbar-menu-icon {
+  color: var(--mageforge-group-color-wcag);
 }
 
-.mageforge-toolbar-menu-item[data-group-key="html-quality"] .mageforge-toolbar-menu-icon {
-    color: var(--mageforge-group-color-html-quality);
+.mageforge-toolbar-menu-item[data-group-key="html-quality"]
+  .mageforge-toolbar-menu-icon {
+  color: var(--mageforge-group-color-html-quality);
 }
 
-.mageforge-toolbar-menu-item[data-group-key="performance"] .mageforge-toolbar-menu-icon {
-    color: var(--mageforge-group-color-performance);
+.mageforge-toolbar-menu-item[data-group-key="performance"]
+  .mageforge-toolbar-menu-icon {
+  color: var(--mageforge-group-color-performance);
 }
 
 .mageforge-toolbar-menu-group-chevron {
-    color: var(--mageforge-color-slate-400);
-    line-height: 0;
-    transition:
-        color 0.15s ease,
-        transform 0.2s ease;
+  color: var(--mageforge-color-slate-400);
+  line-height: 0;
+  transition:
+    color 0.15s ease,
+    transform 0.2s ease;
 }
 
 .mageforge-toolbar-menu-group--collapsed .mageforge-toolbar-menu-group-chevron {
-    transform: rotate(-90deg);
+  transform: rotate(-90deg);
 }
 
 .mageforge-toolbar-menu-group-items {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .mageforge-toolbar-menu-group--collapsed .mageforge-toolbar-menu-group-items {
-    display: none;
+  display: none;
 }
 
 /* ============================================================================
@@ -474,18 +512,18 @@
 
 /* Fixed-position overlay injected over every highlighted element */
 .mageforge-audit-overlay {
-    position: fixed;
-    pointer-events: none;
-    background-color: var(--mageforge-color-red-alpha-35);
-    outline: 3px solid var(--mageforge-color-red);
-    outline-offset: 0;
-    z-index: 9999997;
+  position: fixed;
+  pointer-events: none;
+  background-color: var(--mageforge-color-red-alpha-35);
+  outline: 3px solid var(--mageforge-color-red);
+  outline-offset: 0;
+  z-index: 9999997;
 }
 
 .mageforge-audit-overlay--warning {
-    background-color: var(--mageforge-color-amber-alpha-35);
-    outline-color: var(--mageforge-color-amber);
-    outline-style: dashed;
+  background-color: var(--mageforge-color-amber-alpha-35);
+  outline-color: var(--mageforge-color-amber);
+  outline-style: dashed;
 }
 
 /* ============================================================================
@@ -493,31 +531,33 @@
    ========================================================================== */
 
 .mageforge-toolbar-feedback {
-    position: fixed;
-    font-family: var(--mageforge-font-family);
-    font-size: 12px;
-    font-weight: 600;
-    padding: 8px 14px;
-    border-radius: 10px;
-    backdrop-filter: blur(8px);
-    white-space: nowrap;
-    pointer-events: none;
-    z-index: 9999999;
-    animation: mageforge-toolbar-slide-up 0.2s ease-out, mageforge-toolbar-fade-out 0.4s ease-in 2.6s forwards;
+  position: fixed;
+  font-family: var(--mageforge-font-family);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 14px;
+  border-radius: 10px;
+  backdrop-filter: blur(8px);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 9999999;
+  animation:
+    mageforge-toolbar-slide-up 0.2s ease-out,
+    mageforge-toolbar-fade-out 0.4s ease-in 2.6s forwards;
 }
 
 .mageforge-toolbar-feedback--success {
-    color: var(--mageforge-color-green);
-    background: var(--mageforge-color-green-alpha-15);
-    border: 1px solid var(--mageforge-color-green-alpha-35);
-    box-shadow: 0 4px 12px var(--mageforge-color-green-alpha-15);
+  color: var(--mageforge-color-green);
+  background: var(--mageforge-color-green-alpha-15);
+  border: 1px solid var(--mageforge-color-green-alpha-35);
+  box-shadow: 0 4px 12px var(--mageforge-color-green-alpha-15);
 }
 
 .mageforge-toolbar-feedback--error {
-    color: var(--mageforge-color-red);
-    background: var(--mageforge-color-red-alpha-15);
-    border: 1px solid var(--mageforge-color-red-alpha-35);
-    box-shadow: 0 4px 12px var(--mageforge-color-red-alpha-15);
+  color: var(--mageforge-color-red);
+  background: var(--mageforge-color-red-alpha-15);
+  border: 1px solid var(--mageforge-color-red-alpha-35);
+  box-shadow: 0 4px 12px var(--mageforge-color-red-alpha-15);
 }
 
 /* ============================================================================
@@ -526,19 +566,23 @@
 
 /* mageforge-toolbar-slide-up is still used by the feedback toast */
 @keyframes mageforge-toolbar-slide-up {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes mageforge-toolbar-fade-out {
-    from { opacity: 1; }
-    to   { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 /* ============================================================================
@@ -546,9 +590,9 @@
    ========================================================================== */
 
 .mageforge-toolbar-menu-footer {
-    border-top: 1px solid var(--mageforge-border-color);
-    margin-top: 4px;
-    padding-top: 6px;
+  border-top: 1px solid var(--mageforge-border-color);
+  margin-top: 4px;
+  padding-top: 6px;
 }
 
 /* ============================================================================
@@ -556,56 +600,56 @@
    ========================================================================== */
 
 .mageforge-toolbar-health-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 4px 12px 6px;
-    gap: 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 12px 6px;
+  gap: 2px;
 }
 
 .mageforge-toolbar-health-gauge {
-    width: 130px;
-    height: 75px;
-    overflow: visible;
+  width: 130px;
+  height: 75px;
+  overflow: visible;
 }
 
 .mageforge-health-gauge-progress {
-    transition: stroke-dasharray 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: stroke-dasharray 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .mageforge-health-gauge-needle {
-    transition:
-        x2 0.7s cubic-bezier(0.4, 0, 0.2, 1),
-        y2 0.7s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.3s ease;
+  transition:
+    x2 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+    y2 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s ease;
 }
 
 .mageforge-toolbar-health-score-text {
-    text-align: center;
+  text-align: center;
 }
 
 .mageforge-toolbar-health-score-value {
-    font-family: var(--mageforge-font-family);
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--mageforge-color-white);
-    line-height: 1.2;
+  font-family: var(--mageforge-font-family);
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--mageforge-color-white);
+  line-height: 1.2;
 }
 
 .mageforge-toolbar-health-score-max {
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--mageforge-color-slate-400);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--mageforge-color-slate-400);
 }
 
 .mageforge-toolbar-health-score-label {
-    font-family: var(--mageforge-font-family);
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: var(--mageforge-color-slate-400);
-    margin-top: 2px;
+  font-family: var(--mageforge-font-family);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--mageforge-color-slate-400);
+  margin-top: 2px;
 }
 
 /* ============================================================================
@@ -613,74 +657,78 @@
    ========================================================================== */
 
 .mageforge-toolbar-menu-button-row {
-    display: flex;
-    align-items: stretch;
-    gap: 6px;
-    margin-bottom: 4px;
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  margin-bottom: 4px;
 }
 
 .mageforge-toolbar-menu-run-all {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    flex: 1;
-    padding: 9px 16px;
-    background: linear-gradient(90deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 100%);
-    border: none;
-    border-radius: 7px;
-    cursor: pointer;
-    color: var(--mageforge-color-white);
-    font-family: var(--mageforge-font-family);
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    transition:
-        opacity 0.15s ease,
-        transform 0.15s ease,
-        box-shadow 0.15s ease;
-    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 1;
+  padding: 9px 16px;
+  background: linear-gradient(
+    90deg,
+    var(--mageforge-color-blue) 0%,
+    var(--mageforge-color-pink) 100%
+  );
+  border: none;
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--mageforge-color-white);
+  font-family: var(--mageforge-font-family);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
 }
 
 .mageforge-toolbar-menu-run-all:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
 }
 
 .mageforge-toolbar-menu-run-all:active {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .mageforge-toolbar-menu-run-all:disabled,
 .mageforge-toolbar-menu-run-all.mageforge-running {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
 }
 
 .mageforge-toolbar-menu-reset {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 9px 10px;
-    background: none;
-    border: 1px solid var(--mageforge-border-color);
-    border-radius: 7px;
-    cursor: pointer;
-    color: var(--mageforge-color-slate-400);
-    line-height: 0;
-    transition:
-        color 0.15s ease,
-        background 0.15s ease,
-        border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 10px;
+  background: none;
+  border: 1px solid var(--mageforge-border-color);
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--mageforge-color-slate-400);
+  line-height: 0;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .mageforge-toolbar-menu-reset:hover {
-    color: var(--mageforge-color-white);
-    background: var(--mageforge-surface-glass-hover);
-    border-color: var(--mageforge-border-glass);
+  color: var(--mageforge-color-white);
+  background: var(--mageforge-surface-glass-hover);
+  border-color: var(--mageforge-border-glass);
 }
 
 /* ============================================================================
@@ -688,25 +736,25 @@
    ========================================================================== */
 
 .mageforge-toolbar-menu-credit {
-    margin-top: 8px;
-    text-align: center;
-    font-family: var(--mageforge-font-family);
-    font-size: 10px;
-    color: var(--mageforge-color-slate-400);
+  margin-top: 8px;
+  text-align: center;
+  font-family: var(--mageforge-font-family);
+  font-size: 10px;
+  color: var(--mageforge-color-slate-400);
 }
 
 .mageforge-toolbar-menu-credit-heart {
-    color: var(--mageforge-color-red);
+  color: var(--mageforge-color-red);
 }
 
 .mageforge-toolbar-menu-credit-link {
-    color: var(--mageforge-color-slate-400);
-    text-decoration: none;
-    transition: color 0.15s ease;
+  color: var(--mageforge-color-slate-400);
+  text-decoration: none;
+  transition: color 0.15s ease;
 }
 
 .mageforge-toolbar-menu-credit-link:hover {
-    color: var(--mageforge-color-blue);
+  color: var(--mageforge-color-blue);
 }
 
 /* ============================================================================
@@ -714,43 +762,44 @@
    ========================================================================== */
 
 .mageforge-toolbar[data-position="bottom-right"] {
-    bottom: 16px;
-    left: auto;
-    right: 16px;
+  bottom: 16px;
+  left: auto;
+  right: 16px;
 }
 
 .mageforge-toolbar[data-position="top-left"] {
-    bottom: auto;
-    top: 16px;
-    left: 16px;
+  bottom: auto;
+  top: 16px;
+  left: 16px;
 }
 
 .mageforge-toolbar[data-position="top-right"] {
-    bottom: auto;
-    top: 16px;
-    left: auto;
-    right: 16px;
+  bottom: auto;
+  top: 16px;
+  left: auto;
+  right: 16px;
 }
 
 /* Menu opens downward for top positions */
 .mageforge-toolbar[data-position^="top"] .mageforge-toolbar-menu {
-    bottom: auto;
-    top: calc(100% + 8px);
-    transform: translateY(-8px);
+  bottom: auto;
+  top: calc(100% + 8px);
+  transform: translateY(-8px);
 }
 
-.mageforge-toolbar[data-position^="top"] .mageforge-toolbar-menu.mageforge-menu-open {
-    transform: translateY(0);
+.mageforge-toolbar[data-position^="top"]
+  .mageforge-toolbar-menu.mageforge-menu-open {
+  transform: translateY(0);
 
-    @starting-style {
-        transform: translateY(-8px);
-    }
+  @starting-style {
+    transform: translateY(-8px);
+  }
 }
 
 /* Menu anchors to right edge for right positions */
 .mageforge-toolbar[data-position$="right"] .mageforge-toolbar-menu {
-    left: auto;
-    right: 0;
+  left: auto;
+  right: 0;
 }
 
 /* ============================================================================
@@ -764,6 +813,27 @@
 
 /* Light Mode */
 .mageforge-toolbar[data-theme="light"] .mageforge-toolbar-menu {
+  --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
+  --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
+  --mageforge-border-color: rgba(0, 0, 0, 0.12);
+  --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.05);
+  --mageforge-shadow-sm: rgba(0, 0, 0, 0.1);
+  --mageforge-shadow-md: rgba(0, 0, 0, 0.15);
+  --mageforge-shadow-lg: rgba(0, 0, 0, 0.2);
+  --mageforge-color-white: #0f172a;
+  --mageforge-color-slate-400: #64748b;
+}
+
+.mageforge-toolbar[data-theme="light"] .mageforge-toolbar-menu-toggle {
+  background: var(--mageforge-toggle-bg-off-light);
+}
+
+/*
+ * Auto Mode – Light System Preference
+ * NOTE: Keep these custom-property overrides in sync with the [data-theme="light"] block above.
+ */
+@media (prefers-color-scheme: light) {
+  .mageforge-toolbar[data-theme="auto"] .mageforge-toolbar-menu {
     --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
     --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
     --mageforge-border-color: rgba(0, 0, 0, 0.12);
@@ -773,32 +843,11 @@
     --mageforge-shadow-lg: rgba(0, 0, 0, 0.2);
     --mageforge-color-white: #0f172a;
     --mageforge-color-slate-400: #64748b;
-}
+  }
 
-.mageforge-toolbar[data-theme="light"] .mageforge-toolbar-menu-toggle {
+  .mageforge-toolbar[data-theme="auto"] .mageforge-toolbar-menu-toggle {
     background: var(--mageforge-toggle-bg-off-light);
-}
-
-/*
- * Auto Mode – Light System Preference
- * NOTE: Keep these custom-property overrides in sync with the [data-theme="light"] block above.
- */
-@media (prefers-color-scheme: light) {
-    .mageforge-toolbar[data-theme="auto"] .mageforge-toolbar-menu {
-        --mageforge-bg-dark: rgba(255, 255, 255, 0.98);
-        --mageforge-bg-dark-alt: rgba(248, 250, 252, 0.98);
-        --mageforge-border-color: rgba(0, 0, 0, 0.12);
-        --mageforge-surface-glass-hover: rgba(0, 0, 0, 0.05);
-        --mageforge-shadow-sm: rgba(0, 0, 0, 0.1);
-        --mageforge-shadow-md: rgba(0, 0, 0, 0.15);
-        --mageforge-shadow-lg: rgba(0, 0, 0, 0.2);
-        --mageforge-color-white: #0f172a;
-        --mageforge-color-slate-400: #64748b;
-    }
-
-    .mageforge-toolbar[data-theme="auto"] .mageforge-toolbar-menu-toggle {
-        background: var(--mageforge-toggle-bg-off-light);
-    }
+  }
 }
 
 /* ============================================================================
@@ -806,35 +855,35 @@
    ========================================================================== */
 
 @media (max-width: 640px) {
-    .mageforge-toolbar {
-        bottom: 10px;
-        left: 10px;
-    }
-    .mageforge-toolbar[data-position="bottom-right"] {
-        left: auto;
-        right: 10px;
-    }
-    .mageforge-toolbar[data-position="top-left"] {
-        bottom: auto;
-        left: 10px;
-        top: 10px;
-    }
-    .mageforge-toolbar[data-position="top-right"] {
-        bottom: auto;
-        left: auto;
-        right: 10px;
-        top: 10px;
-    }
-    .mageforge-toolbar-menu {
-        min-width: 300px;
-        max-height: calc(100vh - 60px);
-        overflow: auto;
-    }
-    .mageforge-toolbar-burger-label {
-        display: none;
-    }
-    .mageforge-toolbar-burger {
-        height: 32px;
-        width: auto;
-    }
+  .mageforge-toolbar {
+    bottom: 10px;
+    left: 10px;
+  }
+  .mageforge-toolbar[data-position="bottom-right"] {
+    left: auto;
+    right: 10px;
+  }
+  .mageforge-toolbar[data-position="top-left"] {
+    bottom: auto;
+    left: 10px;
+    top: 10px;
+  }
+  .mageforge-toolbar[data-position="top-right"] {
+    bottom: auto;
+    left: auto;
+    right: 10px;
+    top: 10px;
+  }
+  .mageforge-toolbar-menu {
+    min-width: 300px;
+    max-height: calc(100vh - 60px);
+    overflow: auto;
+  }
+  .mageforge-toolbar-burger-label {
+    display: none;
+  }
+  .mageforge-toolbar-burger {
+    height: 32px;
+    width: auto;
+  }
 }
diff --git a/src/view/frontend/web/js/inspector.js b/src/view/frontend/web/js/inspector.js
index 3e2aeeab..f1411ba7 100644
--- a/src/view/frontend/web/js/inspector.js
+++ b/src/view/frontend/web/js/inspector.js
@@ -6,128 +6,141 @@
  * Alpine component via object spread.
  */
 
-import { domMethods } from './inspector/dom.js';
-import { uiMethods } from './inspector/ui.js';
-import { pickerMethods } from './inspector/picker.js';
-import { tabsMethods } from './inspector/tabs.js';
-import { accessibilityMethods } from './inspector/accessibility.js';
-import { performanceMethods } from './inspector/performance.js';
-import { vitalsMethods } from './inspector/vitals.js';
-import { draggableMethods } from './inspector/draggable.js';
-import { blockDataMap } from './inspector/blockData.js';
+import { domMethods } from "./inspector/dom.js";
+import { uiMethods } from "./inspector/ui.js";
+import { pickerMethods } from "./inspector/picker.js";
+import { tabsMethods } from "./inspector/tabs.js";
+import { accessibilityMethods } from "./inspector/accessibility.js";
+import { performanceMethods } from "./inspector/performance.js";
+import { vitalsMethods } from "./inspector/vitals.js";
+import { draggableMethods } from "./inspector/draggable.js";
+import { blockDataMap } from "./inspector/blockData.js";
 
 // Extracted into a named function so it can be called either from the
 // alpine:init event (normal case) or immediately when Alpine has already
 // started (e.g. Hyvä themes where Alpine loads before this deferred script).
 function _registerMageforgeInspector() {
-    Alpine.data('mageforgeInspector', () => ({
-        // ====================================================================
-        // State
-        // ====================================================================
-        isOpen: false,
-        isPickerActive: false,
-        isPinned: false, // Badge is locked after clicking an element
-        hoveredElement: null,
-        selectedElement: null,
-        highlightBox: null,
-        infoBadge: null,
-        mouseMoveHandler: null,
-        clickHandler: null,
-        keydownHandler: null,
-        hoverTimeout: null,
-        hoverDelay: 50, // ms delay for accurate position calculation
-        lastBadgeUpdate: 0,
-        badgeUpdateDelay: 150, // ms delay to prevent flickering
-        activeTab: 'structure', // Current active tab in inspector
-        panelData: {
-            template: '',
-            block: '',
-            module: '',
-        },
+  Alpine.data("mageforgeInspector", () => ({
+    // ====================================================================
+    // State
+    // ====================================================================
+    isOpen: false,
+    isPickerActive: false,
+    isPinned: false, // Badge is locked after clicking an element
+    hoveredElement: null,
+    selectedElement: null,
+    highlightBox: null,
+    infoBadge: null,
+    mouseMoveHandler: null,
+    clickHandler: null,
+    keydownHandler: null,
+    hoverTimeout: null,
+    hoverDelay: 50, // ms delay for accurate position calculation
+    lastBadgeUpdate: 0,
+    badgeUpdateDelay: 150, // ms delay to prevent flickering
+    activeTab: "structure", // Current active tab in inspector
+    panelData: {
+      template: "",
+      block: "",
+      module: "",
+    },
 
-        // Dragging & Connector State
-        isDragging: false,
-        dragStartX: 0,
-        dragStartY: 0,
-        initialBadgeX: 0,
-        initialBadgeY: 0,
-        connectorSvg: null,
-        dragStartHandler: null,
-        dragHandler: null,
-        dragEndHandler: null,
-        connectorScrollHandler: null,
+    // Dragging & Connector State
+    isDragging: false,
+    dragStartX: 0,
+    dragStartY: 0,
+    initialBadgeX: 0,
+    initialBadgeY: 0,
+    connectorSvg: null,
+    dragStartHandler: null,
+    dragHandler: null,
+    dragEndHandler: null,
+    connectorScrollHandler: null,
 
-        // Performance Thresholds
-        PERF_RENDER_TIME_GOOD: 50, // ms
-        PERF_RENDER_TIME_WARNING: 200, // ms
-        PERF_DOM_COMPLEXITY_LOW: 50, // nodes
-        PERF_DOM_COMPLEXITY_HIGH: 200, // nodes
-        PERF_DOM_DEPTH_WARNING: 10, // levels
+    // Performance Thresholds
+    PERF_RENDER_TIME_GOOD: 50, // ms
+    PERF_RENDER_TIME_WARNING: 200, // ms
+    PERF_DOM_COMPLEXITY_LOW: 50, // nodes
+    PERF_DOM_COMPLEXITY_HIGH: 200, // nodes
+    PERF_DOM_DEPTH_WARNING: 10, // levels
 
-        // Browser Metrics tracking
-        webVitals: {
-            lcp: null,
-            cls: [],
-            fcp: null,
-            elementTimings: [] // Element Timing API results
-        },
-        longTasks: [],
-        resourceMetrics: null,
-        pageTimings: null,
-        performanceObservers: [],
+    // Browser Metrics tracking
+    webVitals: {
+      lcp: null,
+      cls: [],
+      fcp: null,
+      elementTimings: [], // Element Timing API results
+    },
+    longTasks: [],
+    resourceMetrics: null,
+    pageTimings: null,
+    performanceObservers: [],
 
-        // Window event handler refs (for cleanup)
-        _inspectorStateHandler: null,
+    // Window event handler refs (for cleanup)
+    _inspectorStateHandler: null,
 
-        // ====================================================================
-        // Lifecycle
-        // ====================================================================
+    // ====================================================================
+    // Lifecycle
+    // ====================================================================
 
-        init() {
-            // Bind event handlers to preserve context
-            this.mouseMoveHandler = (e) => this.handleMouseMove(e);
-            this.clickHandler = (e) => this.handleClick(e);
+    init() {
+      // Bind event handlers to preserve context
+      this.mouseMoveHandler = (e) => this.handleMouseMove(e);
+      this.clickHandler = (e) => this.handleClick(e);
 
-            this.setupKeyboardShortcuts();
-            this.createHighlightBox();
-            this.createInfoBadge();
-            this.initWebVitalsTracking();
+      this.setupKeyboardShortcuts();
+      this.createHighlightBox();
+      this.createInfoBadge();
+      this.initWebVitalsTracking();
 
-            // Defer page timings until the load event so that loadEventEnd and
-            // domContentLoadedEventEnd are actually populated by the browser.
-            if (document.readyState === 'complete') {
-                setTimeout(() => this.cachePageTimings(), 0);
-            } else {
-                window.addEventListener('load', () => setTimeout(() => this.cachePageTimings(), 0), { once: true });
-            }
+      // Defer page timings until the load event so that loadEventEnd and
+      // domContentLoadedEventEnd are actually populated by the browser.
+      if (document.readyState === "complete") {
+        setTimeout(() => this.cachePageTimings(), 0);
+      } else {
+        window.addEventListener(
+          "load",
+          () => setTimeout(() => this.cachePageTimings(), 0),
+          { once: true },
+        );
+      }
 
-            // Listen for inspector-state sync from toolbar
-            this._inspectorStateHandler = (e) => {
-                if (this._inspectorFloatButton) {
-                    this._inspectorFloatButton.classList.toggle('mageforge-active', e.detail.active);
-                    this._inspectorFloatButton.setAttribute('aria-pressed', e.detail.active ? 'true' : 'false');
-                }
-            };
-            window.addEventListener('mageforge:toolbar:inspector-state', this._inspectorStateHandler);
+      // Listen for inspector-state sync from toolbar
+      this._inspectorStateHandler = (e) => {
+        if (this._inspectorFloatButton) {
+          this._inspectorFloatButton.classList.toggle(
+            "mageforge-active",
+            e.detail.active,
+          );
+          this._inspectorFloatButton.setAttribute(
+            "aria-pressed",
+            e.detail.active ? "true" : "false",
+          );
+        }
+      };
+      window.addEventListener(
+        "mageforge:toolbar:inspector-state",
+        this._inspectorStateHandler,
+      );
 
-            // Append inspector button to toolbar container.
-            // The toolbar initialises before the inspector, but guard with a
-            // MutationObserver fallback for edge cases where it hasn't rendered yet.
-            this._appendInspectorButton();
+      // Append inspector button to toolbar container.
+      // The toolbar initialises before the inspector, but guard with a
+      // MutationObserver fallback for edge cases where it hasn't rendered yet.
+      this._appendInspectorButton();
 
-            // Dispatch init event for Hyvä integration
-            this.$dispatch('mageforge:inspector:init');
-        },
+      // Dispatch init event for Hyvä integration
+      this.$dispatch("mageforge:inspector:init");
+    },
 
-        _createInspectorFloatButton() {
-            // Use div instead of button to avoid Luma/theme button CSS overrides
-            const btn = document.createElement('div');
-            btn.className = 'mageforge-inspector-float-button';
-            btn.title = 'Activate Inspector (Ctrl+Shift+I)';
-            btn.setAttribute('role', 'button');
-            btn.setAttribute('tabindex', '0');
-            btn.setAttribute('aria-pressed', 'false');
-            btn.innerHTML = `
+    _createInspectorFloatButton() {
+      // Use div instead of button to avoid Luma/theme button CSS overrides
+      const btn = document.createElement("div");
+      btn.className = "mageforge-inspector-float-button";
+      btn.title = "Activate Inspector (Ctrl+Shift+I)";
+      btn.setAttribute("role", "button");
+      btn.setAttribute("tabindex", "0");
+      btn.setAttribute("aria-pressed", "false");
+      btn.innerHTML = `
                 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="20">
                     <g stroke-width="0"></g>
                     <g stroke-linecap="round" stroke-linejoin="round"></g>
@@ -137,139 +150,142 @@ function _registerMageforgeInspector() {
                 </svg>
                 <span>Inspector</span>
             `;
-            btn.onclick = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                this.toggleInspector();
-            };
-            btn.onkeydown = (e) => {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.toggleInspector();
-                }
-                if (e.key === ' ') {
-                    e.preventDefault(); // prevent page scroll on Space
-                }
-            };
-            btn.onkeyup = (e) => {
-                if (e.key === ' ') {
-                    e.stopPropagation();
-                    this.toggleInspector();
-                }
-            };
-            return btn;
-        },
+      btn.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleInspector();
+      };
+      btn.onkeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.toggleInspector();
+        }
+        if (e.key === " ") {
+          e.preventDefault(); // prevent page scroll on Space
+        }
+      };
+      btn.onkeyup = (e) => {
+        if (e.key === " ") {
+          e.stopPropagation();
+          this.toggleInspector();
+        }
+      };
+      return btn;
+    },
 
-        _appendInspectorButton() {
-            const _attach = (container) => {
-                container.querySelector('.mageforge-inspector-float-button')?.remove();
-                this._inspectorFloatButton = this._createInspectorFloatButton();
-                container.appendChild(this._inspectorFloatButton);
-            };
+    _appendInspectorButton() {
+      const _attach = (container) => {
+        container.querySelector(".mageforge-inspector-float-button")?.remove();
+        this._inspectorFloatButton = this._createInspectorFloatButton();
+        container.appendChild(this._inspectorFloatButton);
+      };
 
-            const toolbarContainer = document.querySelector('.mageforge-toolbar');
-            if (toolbarContainer) {
-                _attach(toolbarContainer);
-                return;
-            }
+      const toolbarContainer = document.querySelector(".mageforge-toolbar");
+      if (toolbarContainer) {
+        _attach(toolbarContainer);
+        return;
+      }
 
-            // Toolbar not in DOM yet – wait for it
-            const observer = new MutationObserver(() => {
-                const container = document.querySelector('.mageforge-toolbar');
-                if (container) {
-                    observer.disconnect();
-                    _attach(container);
-                }
-            });
-            observer.observe(document.body, { childList: true, subtree: true });
-            this._buttonObserver = observer;
-        },
+      // Toolbar not in DOM yet – wait for it
+      const observer = new MutationObserver(() => {
+        const container = document.querySelector(".mageforge-toolbar");
+        if (container) {
+          observer.disconnect();
+          _attach(container);
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      this._buttonObserver = observer;
+    },
 
-        destroy() {
-            // Remove window event listeners
-            if (this._inspectorStateHandler) {
-                window.removeEventListener('mageforge:toolbar:inspector-state', this._inspectorStateHandler);
-                this._inspectorStateHandler = null;
-            }
+    destroy() {
+      // Remove window event listeners
+      if (this._inspectorStateHandler) {
+        window.removeEventListener(
+          "mageforge:toolbar:inspector-state",
+          this._inspectorStateHandler,
+        );
+        this._inspectorStateHandler = null;
+      }
 
-            // Disconnect button injection observer if still running
-            if (this._buttonObserver) {
-                this._buttonObserver.disconnect();
-                this._buttonObserver = null;
-            }
+      // Disconnect button injection observer if still running
+      if (this._buttonObserver) {
+        this._buttonObserver.disconnect();
+        this._buttonObserver = null;
+      }
 
-            // Clear pending hover timeout
-            if (this.hoverTimeout) {
-                clearTimeout(this.hoverTimeout);
-                this.hoverTimeout = null;
-            }
+      // Clear pending hover timeout
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = null;
+      }
 
-            // Remove keyboard listener
-            if (this.keydownHandler) {
-                document.removeEventListener('keydown', this.keydownHandler);
-            }
+      // Remove keyboard listener
+      if (this.keydownHandler) {
+        document.removeEventListener("keydown", this.keydownHandler);
+      }
 
-            // Disconnect all PerformanceObservers
-            this.performanceObservers.forEach(observer => observer.disconnect());
-            this.performanceObservers = [];
+      // Disconnect all PerformanceObservers
+      this.performanceObservers.forEach((observer) => observer.disconnect());
+      this.performanceObservers = [];
 
-            // Close inspector and clean up active event listeners
-            if (this.isOpen || this.isPinned) {
-                this.closeInspector();
-            }
+      // Close inspector and clean up active event listeners
+      if (this.isOpen || this.isPinned) {
+        this.closeInspector();
+      }
 
-            // Remove injected DOM elements
-            if (this.highlightBox) {
-                this.highlightBox.remove();
-                this.highlightBox = null;
-            }
-            if (this.infoBadge) {
-                this.infoBadge.remove();
-                this.infoBadge = null;
-            }
-            if (this.connectorSvg) {
-                this.connectorSvg.remove();
-                this.connectorSvg = null;
-            }
-            if (this._inspectorFloatButton) {
-                this._inspectorFloatButton.remove();
-                this._inspectorFloatButton = null;
-            }
-        },
+      // Remove injected DOM elements
+      if (this.highlightBox) {
+        this.highlightBox.remove();
+        this.highlightBox = null;
+      }
+      if (this.infoBadge) {
+        this.infoBadge.remove();
+        this.infoBadge = null;
+      }
+      if (this.connectorSvg) {
+        this.connectorSvg.remove();
+        this.connectorSvg = null;
+      }
+      if (this._inspectorFloatButton) {
+        this._inspectorFloatButton.remove();
+        this._inspectorFloatButton = null;
+      }
+    },
 
-        // ====================================================================
-        // Panel Data
-        // ====================================================================
+    // ====================================================================
+    // Panel Data
+    // ====================================================================
 
-        updatePanelData(element) {
-            const data = blockDataMap.get(element);
+    updatePanelData(element) {
+      const data = blockDataMap.get(element);
 
-            if (!data) {
-                this.panelData.template = 'N/A';
-                this.panelData.block = 'N/A';
-                this.panelData.module = 'N/A';
-                return;
-            }
+      if (!data) {
+        this.panelData.template = "N/A";
+        this.panelData.block = "N/A";
+        this.panelData.module = "N/A";
+        return;
+      }
 
-            this.panelData.template = data.template || 'N/A';
-            this.panelData.block = data.block || 'N/A';
-            this.panelData.module = data.module || 'N/A';
-        },
+      this.panelData.template = data.template || "N/A";
+      this.panelData.block = data.block || "N/A";
+      this.panelData.module = data.module || "N/A";
+    },
 
-        // ====================================================================
-        // Mixins
-        // ====================================================================
+    // ====================================================================
+    // Mixins
+    // ====================================================================
 
-        ...domMethods,
-        ...uiMethods,
-        ...pickerMethods,
-        ...tabsMethods,
-        ...accessibilityMethods,
-        ...performanceMethods,
-        ...vitalsMethods,
-        ...draggableMethods,
-    }));
+    ...domMethods,
+    ...uiMethods,
+    ...pickerMethods,
+    ...tabsMethods,
+    ...accessibilityMethods,
+    ...performanceMethods,
+    ...vitalsMethods,
+    ...draggableMethods,
+  }));
 }
 
 // If Alpine has already initialised (e.g. it was loaded by Hyvä before this
@@ -277,13 +293,15 @@ function _registerMageforgeInspector() {
 // re-initialise any [x-data="mageforgeInspector"] elements that Alpine skipped
 // because the component was not yet registered at that point.
 // Otherwise, register on alpine:init which fires before Alpine processes the DOM.
-if (typeof Alpine !== 'undefined') {
-    _registerMageforgeInspector();
-    document.querySelectorAll('[x-data="mageforgeInspector"]').forEach(function (el) {
-        if (typeof Alpine.initTree === 'function') {
-            Alpine.initTree(el);
-        }
+if (typeof Alpine !== "undefined") {
+  _registerMageforgeInspector();
+  document
+    .querySelectorAll('[x-data="mageforgeInspector"]')
+    .forEach(function (el) {
+      if (typeof Alpine.initTree === "function") {
+        Alpine.initTree(el);
+      }
     });
 } else {
-    document.addEventListener('alpine:init', _registerMageforgeInspector);
+  document.addEventListener("alpine:init", _registerMageforgeInspector);
 }
diff --git a/src/view/frontend/web/js/inspector/accessibility.js b/src/view/frontend/web/js/inspector/accessibility.js
index 46a6e778..54773184 100644
--- a/src/view/frontend/web/js/inspector/accessibility.js
+++ b/src/view/frontend/web/js/inspector/accessibility.js
@@ -3,255 +3,320 @@
  */
 
 export const accessibilityMethods = {
-    /**
-     * Render Accessibility tab content
-     */
-    renderAccessibilityTab(container, element) {
-        if (!element) return;
-
-        const a11yData = this.analyzeAccessibility(element);
-
-        // Semantic Element
-        container.appendChild(this.createInfoSection('Element Type', a11yData.tagName, '#60a5fa'));
-
-        // ARIA Role
-        if (a11yData.role) {
-            container.appendChild(this.createInfoSection('ARIA Role', a11yData.role, '#a78bfa'));
-        }
-
-        // Accessible Name
-        if (a11yData.accessibleName) {
-            container.appendChild(this.createInfoSection('Accessible Name', a11yData.accessibleName, '#34d399'));
-        }
-
-        // ARIA Label
-        if (a11yData.ariaLabel) {
-            container.appendChild(this.createInfoSection('ARIA Label', a11yData.ariaLabel, '#22d3ee'));
-        }
-
-        // ARIA Described By
-        if (a11yData.ariaDescribedBy) {
-            container.appendChild(this.createInfoSection('ARIA Described By', a11yData.ariaDescribedBy, '#fbbf24'));
-        }
-
-        // Alt Text (for images)
-        if (a11yData.altText !== null) {
-            const altStatus = a11yData.altText ? a11yData.altText : '⚠️ Missing';
-            const altColor = a11yData.altText ? '#34d399' : '#ef4444';
-            container.appendChild(this.createInfoSection('Alt Text', altStatus, altColor));
-        }
-
-        // Lazy Loading (for images)
-        if (a11yData.lazyLoading !== null) {
-            const { lazyColor } = this.getLazyLoadingStyle(a11yData.lazyLoading);
-            container.appendChild(this.createInfoSection('Lazy Loading', a11yData.lazyLoading, lazyColor));
-        }
-
-        // Tabindex
-        if (a11yData.tabindex !== null) {
-            container.appendChild(this.createInfoSection('Tab Index', a11yData.tabindex, '#fb923c'));
-        }
-
-        // Focusable State
-        const focusableText = a11yData.isFocusable ? '✅ Yes' : '❌ No';
-        const focusableColor = a11yData.isFocusable ? '#34d399' : '#94a3b8';
-        container.appendChild(this.createInfoSection('Focusable', focusableText, focusableColor));
-
-        // ARIA Hidden
-        if (a11yData.ariaHidden) {
-            container.appendChild(this.createInfoSection('ARIA Hidden', a11yData.ariaHidden, '#ef4444'));
-        }
-
-        // Interactive Element
-        const interactiveText = a11yData.isInteractive ? '✅ Yes' : '❌ No';
-        const interactiveColor = a11yData.isInteractive ? '#34d399' : '#94a3b8';
-        container.appendChild(this.createInfoSection('Interactive', interactiveText, interactiveColor));
-    },
-
-    /**
-     * Get styling for lazy loading indicator
-     */
-    getLazyLoadingStyle(lazyLoading) {
-        let lazyColor = '#94a3b8';
-
-        if (lazyLoading.includes('Native')) {
-            lazyColor = '#34d399';
-        } else if (lazyLoading.includes('JavaScript')) {
-            lazyColor = '#22d3ee';
-        } else if (lazyLoading === 'Not set') {
-            lazyColor = '#f59e0b';
-        }
-
-        return { lazyColor };
-    },
-
-    /**
-     * Analyze accessibility features of an element
-     */
-    analyzeAccessibility(element) {
-        const tagName = element.tagName.toLowerCase();
-        const role = element.getAttribute('role') || this.getImplicitRole(tagName, element);
-
-        return {
-            tagName: tagName,
-            role: role,
-            ariaLabel: element.getAttribute('aria-label'),
-            ariaLabelledBy: element.getAttribute('aria-labelledby'),
-            ariaDescribedBy: element.getAttribute('aria-describedby'),
-            ariaHidden: element.getAttribute('aria-hidden'),
-            tabindex: element.getAttribute('tabindex'),
-            altText: this.getAltText(element, tagName),
-            lazyLoading: this.checkLazyLoading(element, tagName),
-            accessibleName: this.determineAccessibleName(element, tagName),
-            isFocusable: this.isFocusable(element, element.getAttribute('tabindex')),
-            isInteractive: this.checkIfInteractive(element, tagName, role)
-        };
-    },
-
-    /**
-     * Get alt text for images
-     */
-    getAltText(element, tagName) {
-        return tagName === 'img' ? element.getAttribute('alt') : null;
-    },
-
-    /**
-     * Check lazy loading status for images
-     */
-    checkLazyLoading(element, tagName) {
-        if (tagName !== 'img') return null;
-
-        const loadingAttr = element.getAttribute('loading');
-        const hasDataSrc = element.hasAttribute('data-src') || element.hasAttribute('data-lazy');
-
-        if (loadingAttr === 'lazy') {
-            return 'Native (loading="lazy")';
-        } else if (hasDataSrc) {
-            return 'JavaScript (data-src)';
-        } else if (loadingAttr === 'eager') {
-            return 'Disabled (loading="eager")';
-        }
-        return 'Not set';
-    },
-
-    /**
-     * Determine accessible name from various sources
-     */
-    determineAccessibleName(element, tagName) {
-        const ariaLabel = element.getAttribute('aria-label');
-        if (ariaLabel) return ariaLabel;
-
-        const ariaLabelledBy = element.getAttribute('aria-labelledby');
-        if (ariaLabelledBy) {
-            const labelText = ariaLabelledBy.trim().split(/\s+/)
-                .map(id => document.getElementById(id)?.textContent?.trim())
-                .filter(Boolean)
-                .join(' ');
-            return labelText || ariaLabelledBy;
-        }
-
-        const altText = tagName === 'img' ? element.getAttribute('alt') : null;
-        if (altText) return altText;
-
-        const title = element.getAttribute('title');
-        if (title) return title;
-
-        const textContent = element.textContent.trim();
-        if (textContent && textContent.length < 100) {
-            return textContent.substring(0, 50) + (textContent.length > 50 ? '...' : '');
-        }
-
-        return null;
-    },
-
-    /**
-     * Check if element is interactive
-     */
-    checkIfInteractive(element, tagName, role) {
-        const interactiveTags = ['a', 'button', 'input', 'select', 'textarea', 'details', 'summary'];
-        const interactiveRoles = ['button', 'link', 'tab', 'menuitem', 'checkbox', 'radio', 'switch'];
-
-        return interactiveTags.includes(tagName) ||
-               interactiveRoles.includes(role) ||
-               element.hasAttribute('onclick') ||
-               window.getComputedStyle(element).cursor === 'pointer';
-    },
-
-    /**
-     * Get implicit ARIA role for HTML elements
-     */
-    getImplicitRole(tagName, element) {
-        // input role depends on type attribute
-        if (tagName === 'input' && element) {
-            const type = (element.getAttribute('type') || 'text').toLowerCase();
-            const inputRoleMap = {
-                'checkbox': 'checkbox',
-                'radio':    'radio',
-                'button':   'button',
-                'submit':   'button',
-                'reset':    'button',
-                'range':    'slider',
-                'number':   'spinbutton',
-                'search':   'searchbox',
-            };
-            return inputRoleMap[type] || 'textbox';
-        }
-
-        const roleMap = {
-            'button': 'button',
-            'a': 'link',
-            'nav': 'navigation',
-            'header': 'banner',
-            'footer': 'contentinfo',
-            'main': 'main',
-            'aside': 'complementary',
-            'section': 'region',
-            'article': 'article',
-            'form': 'form',
-            'img': 'img',
-            'input': 'textbox',
-            'h1': 'heading',
-            'h2': 'heading',
-            'h3': 'heading',
-            'h4': 'heading',
-            'h5': 'heading',
-            'h6': 'heading',
-            'ul': 'list',
-            'ol': 'list',
-            'li': 'listitem'
-        };
-        return roleMap[tagName] || null;
-    },
-
-    /**
-     * Check if element is focusable
-     */
-    isFocusable(element, tabindex) {
-        // Explicitly focusable via tabindex
-        if (tabindex !== null && parseInt(tabindex) >= 0) {
-            return true;
-        }
-
-        // Naturally focusable elements
-        const focusableTags = ['a', 'button', 'input', 'select', 'textarea', 'details', 'summary'];
-        const tagName = element.tagName.toLowerCase();
-
-        if (focusableTags.includes(tagName)) {
-            // Check if disabled
-            if (element.hasAttribute('disabled')) {
-                return false;
-            }
-            // hidden inputs are never focusable
-            if (tagName === 'input' && (element.getAttribute('type') || '').toLowerCase() === 'hidden') {
-                return false;
-            }
-            // Links need href
-            if (tagName === 'a' && !element.hasAttribute('href')) {
-                return false;
-            }
-            return true;
-        }
-
+  /**
+   * Render Accessibility tab content
+   */
+  renderAccessibilityTab(container, element) {
+    if (!element) return;
+
+    const a11yData = this.analyzeAccessibility(element);
+
+    // Semantic Element
+    container.appendChild(
+      this.createInfoSection("Element Type", a11yData.tagName, "#60a5fa"),
+    );
+
+    // ARIA Role
+    if (a11yData.role) {
+      container.appendChild(
+        this.createInfoSection("ARIA Role", a11yData.role, "#a78bfa"),
+      );
+    }
+
+    // Accessible Name
+    if (a11yData.accessibleName) {
+      container.appendChild(
+        this.createInfoSection(
+          "Accessible Name",
+          a11yData.accessibleName,
+          "#34d399",
+        ),
+      );
+    }
+
+    // ARIA Label
+    if (a11yData.ariaLabel) {
+      container.appendChild(
+        this.createInfoSection("ARIA Label", a11yData.ariaLabel, "#22d3ee"),
+      );
+    }
+
+    // ARIA Described By
+    if (a11yData.ariaDescribedBy) {
+      container.appendChild(
+        this.createInfoSection(
+          "ARIA Described By",
+          a11yData.ariaDescribedBy,
+          "#fbbf24",
+        ),
+      );
+    }
+
+    // Alt Text (for images)
+    if (a11yData.altText !== null) {
+      const altStatus = a11yData.altText ? a11yData.altText : "⚠️ Missing";
+      const altColor = a11yData.altText ? "#34d399" : "#ef4444";
+      container.appendChild(
+        this.createInfoSection("Alt Text", altStatus, altColor),
+      );
+    }
+
+    // Lazy Loading (for images)
+    if (a11yData.lazyLoading !== null) {
+      const { lazyColor } = this.getLazyLoadingStyle(a11yData.lazyLoading);
+      container.appendChild(
+        this.createInfoSection("Lazy Loading", a11yData.lazyLoading, lazyColor),
+      );
+    }
+
+    // Tabindex
+    if (a11yData.tabindex !== null) {
+      container.appendChild(
+        this.createInfoSection("Tab Index", a11yData.tabindex, "#fb923c"),
+      );
+    }
+
+    // Focusable State
+    const focusableText = a11yData.isFocusable ? "✅ Yes" : "❌ No";
+    const focusableColor = a11yData.isFocusable ? "#34d399" : "#94a3b8";
+    container.appendChild(
+      this.createInfoSection("Focusable", focusableText, focusableColor),
+    );
+
+    // ARIA Hidden
+    if (a11yData.ariaHidden) {
+      container.appendChild(
+        this.createInfoSection("ARIA Hidden", a11yData.ariaHidden, "#ef4444"),
+      );
+    }
+
+    // Interactive Element
+    const interactiveText = a11yData.isInteractive ? "✅ Yes" : "❌ No";
+    const interactiveColor = a11yData.isInteractive ? "#34d399" : "#94a3b8";
+    container.appendChild(
+      this.createInfoSection("Interactive", interactiveText, interactiveColor),
+    );
+  },
+
+  /**
+   * Get styling for lazy loading indicator
+   */
+  getLazyLoadingStyle(lazyLoading) {
+    let lazyColor = "#94a3b8";
+
+    if (lazyLoading.includes("Native")) {
+      lazyColor = "#34d399";
+    } else if (lazyLoading.includes("JavaScript")) {
+      lazyColor = "#22d3ee";
+    } else if (lazyLoading === "Not set") {
+      lazyColor = "#f59e0b";
+    }
+
+    return { lazyColor };
+  },
+
+  /**
+   * Analyze accessibility features of an element
+   */
+  analyzeAccessibility(element) {
+    const tagName = element.tagName.toLowerCase();
+    const role =
+      element.getAttribute("role") || this.getImplicitRole(tagName, element);
+
+    return {
+      tagName: tagName,
+      role: role,
+      ariaLabel: element.getAttribute("aria-label"),
+      ariaLabelledBy: element.getAttribute("aria-labelledby"),
+      ariaDescribedBy: element.getAttribute("aria-describedby"),
+      ariaHidden: element.getAttribute("aria-hidden"),
+      tabindex: element.getAttribute("tabindex"),
+      altText: this.getAltText(element, tagName),
+      lazyLoading: this.checkLazyLoading(element, tagName),
+      accessibleName: this.determineAccessibleName(element, tagName),
+      isFocusable: this.isFocusable(element, element.getAttribute("tabindex")),
+      isInteractive: this.checkIfInteractive(element, tagName, role),
+    };
+  },
+
+  /**
+   * Get alt text for images
+   */
+  getAltText(element, tagName) {
+    return tagName === "img" ? element.getAttribute("alt") : null;
+  },
+
+  /**
+   * Check lazy loading status for images
+   */
+  checkLazyLoading(element, tagName) {
+    if (tagName !== "img") return null;
+
+    const loadingAttr = element.getAttribute("loading");
+    const hasDataSrc =
+      element.hasAttribute("data-src") || element.hasAttribute("data-lazy");
+
+    if (loadingAttr === "lazy") {
+      return 'Native (loading="lazy")';
+    } else if (hasDataSrc) {
+      return "JavaScript (data-src)";
+    } else if (loadingAttr === "eager") {
+      return 'Disabled (loading="eager")';
+    }
+    return "Not set";
+  },
+
+  /**
+   * Determine accessible name from various sources
+   */
+  determineAccessibleName(element, tagName) {
+    const ariaLabel = element.getAttribute("aria-label");
+    if (ariaLabel) return ariaLabel;
+
+    const ariaLabelledBy = element.getAttribute("aria-labelledby");
+    if (ariaLabelledBy) {
+      const labelText = ariaLabelledBy
+        .trim()
+        .split(/\s+/)
+        .map((id) => document.getElementById(id)?.textContent?.trim())
+        .filter(Boolean)
+        .join(" ");
+      return labelText || ariaLabelledBy;
+    }
+
+    const altText = tagName === "img" ? element.getAttribute("alt") : null;
+    if (altText) return altText;
+
+    const title = element.getAttribute("title");
+    if (title) return title;
+
+    const textContent = element.textContent.trim();
+    if (textContent && textContent.length < 100) {
+      return (
+        textContent.substring(0, 50) + (textContent.length > 50 ? "..." : "")
+      );
+    }
+
+    return null;
+  },
+
+  /**
+   * Check if element is interactive
+   */
+  checkIfInteractive(element, tagName, role) {
+    const interactiveTags = [
+      "a",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "details",
+      "summary",
+    ];
+    const interactiveRoles = [
+      "button",
+      "link",
+      "tab",
+      "menuitem",
+      "checkbox",
+      "radio",
+      "switch",
+    ];
+
+    return (
+      interactiveTags.includes(tagName) ||
+      interactiveRoles.includes(role) ||
+      element.hasAttribute("onclick") ||
+      window.getComputedStyle(element).cursor === "pointer"
+    );
+  },
+
+  /**
+   * Get implicit ARIA role for HTML elements
+   */
+  getImplicitRole(tagName, element) {
+    // input role depends on type attribute
+    if (tagName === "input" && element) {
+      const type = (element.getAttribute("type") || "text").toLowerCase();
+      const inputRoleMap = {
+        checkbox: "checkbox",
+        radio: "radio",
+        button: "button",
+        submit: "button",
+        reset: "button",
+        range: "slider",
+        number: "spinbutton",
+        search: "searchbox",
+      };
+      return inputRoleMap[type] || "textbox";
+    }
+
+    const roleMap = {
+      button: "button",
+      a: "link",
+      nav: "navigation",
+      header: "banner",
+      footer: "contentinfo",
+      main: "main",
+      aside: "complementary",
+      section: "region",
+      article: "article",
+      form: "form",
+      img: "img",
+      input: "textbox",
+      h1: "heading",
+      h2: "heading",
+      h3: "heading",
+      h4: "heading",
+      h5: "heading",
+      h6: "heading",
+      ul: "list",
+      ol: "list",
+      li: "listitem",
+    };
+    return roleMap[tagName] || null;
+  },
+
+  /**
+   * Check if element is focusable
+   */
+  isFocusable(element, tabindex) {
+    // Explicitly focusable via tabindex
+    if (tabindex !== null && parseInt(tabindex) >= 0) {
+      return true;
+    }
+
+    // Naturally focusable elements
+    const focusableTags = [
+      "a",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "details",
+      "summary",
+    ];
+    const tagName = element.tagName.toLowerCase();
+
+    if (focusableTags.includes(tagName)) {
+      // Check if disabled
+      if (element.hasAttribute("disabled")) {
+        return false;
+      }
+      // hidden inputs are never focusable
+      if (
+        tagName === "input" &&
+        (element.getAttribute("type") || "").toLowerCase() === "hidden"
+      ) {
         return false;
-    },
+      }
+      // Links need href
+      if (tagName === "a" && !element.hasAttribute("href")) {
+        return false;
+      }
+      return true;
+    }
+
+    return false;
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/dom.js b/src/view/frontend/web/js/inspector/dom.js
index 68f1dc8f..f699a480 100644
--- a/src/view/frontend/web/js/inspector/dom.js
+++ b/src/view/frontend/web/js/inspector/dom.js
@@ -3,110 +3,110 @@
  */
 
 export const domMethods = {
-    /**
-     * Find all MageForge block elements in DOM.
-     *
-     * Blocks are identified by the data-mageforge-id attribute injected by
-     * InspectorHints on the first root HTML element of each rendered block.
-     *
-     * @returns {Array<{ data: Object, elements: Element[] }>}
-     */
-    findAllMageForgeBlocks() {
-        const blocks = [];
-        const elements = document.querySelectorAll('[data-mageforge-id]');
-        for (const el of elements) {
-            const block = this._parseBlockElement(el);
-            if (block) {
-                blocks.push(block);
-            }
-        }
+  /**
+   * Find all MageForge block elements in DOM.
+   *
+   * Blocks are identified by the data-mageforge-id attribute injected by
+   * InspectorHints on the first root HTML element of each rendered block.
+   *
+   * @returns {Array<{ data: Object, elements: Element[] }>}
+   */
+  findAllMageForgeBlocks() {
+    const blocks = [];
+    const elements = document.querySelectorAll("[data-mageforge-id]");
+    for (const el of elements) {
+      const block = this._parseBlockElement(el);
+      if (block) {
+        blocks.push(block);
+      }
+    }
 
-        return blocks;
-    },
+    return blocks;
+  },
 
-    /**
-     * Parse block metadata from an element's data-mageforge-block attribute.
-     *
-     * @param {Element} el
-     * @returns {{ data: Object, elements: Element[] }|null}
-     */
-    _parseBlockElement(el) {
-        const blockJson = el.getAttribute('data-mageforge-block');
-        if (!blockJson) return null;
+  /**
+   * Parse block metadata from an element's data-mageforge-block attribute.
+   *
+   * @param {Element} el
+   * @returns {{ data: Object, elements: Element[] }|null}
+   */
+  _parseBlockElement(el) {
+    const blockJson = el.getAttribute("data-mageforge-block");
+    if (!blockJson) return null;
 
-        try {
-            const data = JSON.parse(blockJson);
-            data.id = el.getAttribute('data-mageforge-id');
-            return {
-                data,
-                elements: [el],
-            };
-        } catch (e) {
-            console.error('Failed to parse MageForge block data:', e);
-            return null;
-        }
-    },
+    try {
+      const data = JSON.parse(blockJson);
+      data.id = el.getAttribute("data-mageforge-id");
+      return {
+        data,
+        elements: [el],
+      };
+    } catch (e) {
+      console.error("Failed to parse MageForge block data:", e);
+      return null;
+    }
+  },
 
-    /**
-     * Find the MageForge block that contains a given element.
-     *
-     * Primary: walks up via closest() for the nearest [data-mageforge-id] ancestor.
-     * Fallback: for PageBuilder content with multiple root elements (rows), only the
-     * first root gets data-mageforge-id injected. Walk up to the root [data-content-type]
-     * element and search siblings for the nearest [data-mageforge-id].
-     *
-     * @param {Element} element
-     * @returns {{ data: Object, elements: Element[] }|null}
-     */
-    findBlockForElement(element) {
-        const blockEl = element.closest('[data-mageforge-id]');
-        if (blockEl) return this._parseBlockElement(blockEl);
+  /**
+   * Find the MageForge block that contains a given element.
+   *
+   * Primary: walks up via closest() for the nearest [data-mageforge-id] ancestor.
+   * Fallback: for PageBuilder content with multiple root elements (rows), only the
+   * first root gets data-mageforge-id injected. Walk up to the root [data-content-type]
+   * element and search siblings for the nearest [data-mageforge-id].
+   *
+   * @param {Element} element
+   * @returns {{ data: Object, elements: Element[] }|null}
+   */
+  findBlockForElement(element) {
+    const blockEl = element.closest("[data-mageforge-id]");
+    if (blockEl) return this._parseBlockElement(blockEl);
 
-        // PageBuilder fallback: multi-root CMS blocks (e.g. multiple rows)
-        const rootPb = this._findRootPageBuilderElement(element);
-        if (rootPb) {
-            const sibling = this._findNearestMageForgeBlock(rootPb);
-            if (sibling) return this._parseBlockElement(sibling);
-        }
+    // PageBuilder fallback: multi-root CMS blocks (e.g. multiple rows)
+    const rootPb = this._findRootPageBuilderElement(element);
+    if (rootPb) {
+      const sibling = this._findNearestMageForgeBlock(rootPb);
+      if (sibling) return this._parseBlockElement(sibling);
+    }
 
-        return null;
-    },
+    return null;
+  },
 
-    /**
-     * Walk up the DOM to find the topmost [data-content-type] element (PageBuilder root).
-     *
-     * @param {Element} element
-     * @returns {Element|null}
-     */
-    _findRootPageBuilderElement(element) {
-        let current = element;
-        let rootPb = null;
-        while (current && current !== document.body) {
-            if (current.hasAttribute('data-content-type')) {
-                rootPb = current;
-            }
-            current = current.parentElement;
-        }
-        return rootPb;
-    },
+  /**
+   * Walk up the DOM to find the topmost [data-content-type] element (PageBuilder root).
+   *
+   * @param {Element} element
+   * @returns {Element|null}
+   */
+  _findRootPageBuilderElement(element) {
+    let current = element;
+    let rootPb = null;
+    while (current && current !== document.body) {
+      if (current.hasAttribute("data-content-type")) {
+        rootPb = current;
+      }
+      current = current.parentElement;
+    }
+    return rootPb;
+  },
 
-    /**
-     * Search preceding and following siblings for the nearest [data-mageforge-id] element.
-     *
-     * @param {Element} element
-     * @returns {Element|null}
-     */
-    _findNearestMageForgeBlock(element) {
-        let sibling = element.previousElementSibling;
-        while (sibling) {
-            if (sibling.hasAttribute('data-mageforge-id')) return sibling;
-            sibling = sibling.previousElementSibling;
-        }
-        sibling = element.nextElementSibling;
-        while (sibling) {
-            if (sibling.hasAttribute('data-mageforge-id')) return sibling;
-            sibling = sibling.nextElementSibling;
-        }
-        return null;
-    },
+  /**
+   * Search preceding and following siblings for the nearest [data-mageforge-id] element.
+   *
+   * @param {Element} element
+   * @returns {Element|null}
+   */
+  _findNearestMageForgeBlock(element) {
+    let sibling = element.previousElementSibling;
+    while (sibling) {
+      if (sibling.hasAttribute("data-mageforge-id")) return sibling;
+      sibling = sibling.previousElementSibling;
+    }
+    sibling = element.nextElementSibling;
+    while (sibling) {
+      if (sibling.hasAttribute("data-mageforge-id")) return sibling;
+      sibling = sibling.nextElementSibling;
+    }
+    return null;
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/draggable.js b/src/view/frontend/web/js/inspector/draggable.js
index cbe69e2d..44107499 100644
--- a/src/view/frontend/web/js/inspector/draggable.js
+++ b/src/view/frontend/web/js/inspector/draggable.js
@@ -3,187 +3,201 @@
  */
 
 export const draggableMethods = {
-    /**
-     * Enable dragging for the badge
-     */
-    setupDraggable() {
-        if (!this.infoBadge) return;
-
-        this.infoBadge.classList.add('draggable');
-
-        // Bind handlers
-        this.dragStartHandler = (e) => this.handleDragStart(e);
-        this.dragHandler = (e) => this.handleDrag(e);
-        this.dragEndHandler = (e) => this.handleDragEnd(e);
-        this.dragBlurHandler = () => this.handleDragEnd();
-
-        this.infoBadge.addEventListener('mousedown', this.dragStartHandler);
-        window.addEventListener('blur', this.dragBlurHandler);
-    },
-
-    /**
-     * Disable dragging
-     */
-    removeDraggable() {
-        if (!this.infoBadge) return;
-
-        this.infoBadge.classList.remove('draggable');
-        this.infoBadge.removeEventListener('mousedown', this.dragStartHandler);
-        document.removeEventListener('mousemove', this.dragHandler);
-        document.removeEventListener('mouseup', this.dragEndHandler);
-        window.removeEventListener('blur', this.dragBlurHandler);
-
-        this.removeConnector();
-    },
-
-    /**
-     * Handle drag start
-     */
-    handleDragStart(e) {
-        // Ignore clicks on close button or content internal interactive elements
-        if (e.target.closest('button') || e.target.closest('.mageforge-info-value')) {
-            return;
-        }
-
-        this.isDragging = true;
-        this.dragStartX = e.clientX;
-        this.dragStartY = e.clientY;
-
-        const rect = this.infoBadge.getBoundingClientRect();
-        this.initialBadgeX = rect.left + window.scrollX;
-        this.initialBadgeY = rect.top + window.scrollY;
-
-        // Remove static arrow
-        const arrow = this.infoBadge.querySelector('.mageforge-inspector-arrow');
-        if (arrow) arrow.style.display = 'none';
-
-        // Create connector
-        this.createConnector();
-
-        // Bind global move/up handlers
-        document.addEventListener('mousemove', this.dragHandler);
-        document.addEventListener('mouseup', this.dragEndHandler);
-    },
-
-    /**
-     * Handle dragging movement
-     */
-    handleDrag(e) {
-        if (!this.isDragging) return;
-
-        const deltaX = e.clientX - this.dragStartX;
-        const deltaY = e.clientY - this.dragStartY;
-
-        let newX = this.initialBadgeX + deltaX;
-        let newY = this.initialBadgeY + deltaY;
-
-        // Clamp within viewport so the badge cannot be dragged out of reach
-        const margin = 10;
-        const badgeWidth = this.infoBadge.offsetWidth;
-        const badgeHeight = this.infoBadge.offsetHeight;
-        newX = Math.max(window.scrollX + margin, Math.min(newX, window.scrollX + window.innerWidth - badgeWidth - margin));
-        newY = Math.max(window.scrollY + margin, Math.min(newY, window.scrollY + window.innerHeight - badgeHeight - margin));
-
-        this.infoBadge.style.left = `${newX}px`;
-        this.infoBadge.style.top = `${newY}px`;
-        this.infoBadge.style.transform = 'none'; // reset any potential transform
-
-        this.updateConnector();
-    },
-
-    /**
-     * Handle drag end
-     */
-    handleDragEnd() {
-        this.isDragging = false;
-        document.removeEventListener('mousemove', this.dragHandler);
-        document.removeEventListener('mouseup', this.dragEndHandler);
-    },
-
-    /**
-     * Create SVG connector
-     */
-    createConnector() {
-        if (this.connectorSvg) return;
-
-        const ns = 'http://www.w3.org/2000/svg';
-        const svg = document.createElementNS(ns, 'svg');
-        svg.classList.add('mageforge-connector-svg');
-
-        // Line
-        const line = document.createElementNS(ns, 'line');
-        line.classList.add('mageforge-connector-line');
-        svg.appendChild(line);
-
-        // Dot on element
-        const dot = document.createElementNS(ns, 'circle');
-        dot.classList.add('mageforge-connector-dot');
-        dot.setAttribute('r', '4');
-        svg.appendChild(dot);
-
-        document.body.appendChild(svg);
-        this.connectorSvg = svg;
-        this.connectorLine = line;
-        this.connectorDot = dot;
-
-        // Update line on scroll (SVG is fixed, coordinates are viewport-relative)
-        this.connectorScrollHandler = () => this.updateConnector();
-        window.addEventListener('scroll', this.connectorScrollHandler, { passive: true });
-
-        this.updateConnector();
-    },
-
-    /**
-     * Remove connector
-     */
-    removeConnector() {
-        if (this.connectorScrollHandler) {
-            window.removeEventListener('scroll', this.connectorScrollHandler);
-            this.connectorScrollHandler = null;
-        }
-        if (this.connectorSvg) {
-            this.connectorSvg.remove();
-            this.connectorSvg = null;
-            this.connectorLine = null;
-            this.connectorDot = null;
-        }
-        // Restore static arrow if it exists (for next time)
-        if (this.infoBadge) {
-            const arrow = this.infoBadge.querySelector('.mageforge-inspector-arrow');
-            if (arrow) arrow.style.display = '';
-        }
-    },
-
-    /**
-     * Update connector position
-     */
-    updateConnector() {
-        if (!this.connectorSvg || !this.selectedElement || !this.infoBadge) return;
-
-        // Get badge center
-        const badgeRect = this.infoBadge.getBoundingClientRect();
-        const badgeX = badgeRect.left + badgeRect.width / 2;
-        const badgeY = badgeRect.top + badgeRect.height / 2;
-
-        // Get element center (using highlight box as proxy if available, or selectedElement)
-        let targetRect;
-        if (this.highlightBox && this.highlightBox.style.display !== 'none') {
-             targetRect = this.highlightBox.getBoundingClientRect();
-        } else {
-             targetRect = this.getElementRect(this.selectedElement);
-        }
-
-        const targetX = targetRect.left + targetRect.width / 2;
-        const targetY = targetRect.top + targetRect.height / 2;
-
-        // Update line
-        this.connectorLine.setAttribute('x1', badgeX);
-        this.connectorLine.setAttribute('y1', badgeY);
-        this.connectorLine.setAttribute('x2', targetX);
-        this.connectorLine.setAttribute('y2', targetY);
-
-        // Update dot
-        this.connectorDot.setAttribute('cx', targetX);
-        this.connectorDot.setAttribute('cy', targetY);
-    },
+  /**
+   * Enable dragging for the badge
+   */
+  setupDraggable() {
+    if (!this.infoBadge) return;
+
+    this.infoBadge.classList.add("draggable");
+
+    // Bind handlers
+    this.dragStartHandler = (e) => this.handleDragStart(e);
+    this.dragHandler = (e) => this.handleDrag(e);
+    this.dragEndHandler = (e) => this.handleDragEnd(e);
+    this.dragBlurHandler = () => this.handleDragEnd();
+
+    this.infoBadge.addEventListener("mousedown", this.dragStartHandler);
+    window.addEventListener("blur", this.dragBlurHandler);
+  },
+
+  /**
+   * Disable dragging
+   */
+  removeDraggable() {
+    if (!this.infoBadge) return;
+
+    this.infoBadge.classList.remove("draggable");
+    this.infoBadge.removeEventListener("mousedown", this.dragStartHandler);
+    document.removeEventListener("mousemove", this.dragHandler);
+    document.removeEventListener("mouseup", this.dragEndHandler);
+    window.removeEventListener("blur", this.dragBlurHandler);
+
+    this.removeConnector();
+  },
+
+  /**
+   * Handle drag start
+   */
+  handleDragStart(e) {
+    // Ignore clicks on close button or content internal interactive elements
+    if (
+      e.target.closest("button") ||
+      e.target.closest(".mageforge-info-value")
+    ) {
+      return;
+    }
+
+    this.isDragging = true;
+    this.dragStartX = e.clientX;
+    this.dragStartY = e.clientY;
+
+    const rect = this.infoBadge.getBoundingClientRect();
+    this.initialBadgeX = rect.left + window.scrollX;
+    this.initialBadgeY = rect.top + window.scrollY;
+
+    // Remove static arrow
+    const arrow = this.infoBadge.querySelector(".mageforge-inspector-arrow");
+    if (arrow) arrow.style.display = "none";
+
+    // Create connector
+    this.createConnector();
+
+    // Bind global move/up handlers
+    document.addEventListener("mousemove", this.dragHandler);
+    document.addEventListener("mouseup", this.dragEndHandler);
+  },
+
+  /**
+   * Handle dragging movement
+   */
+  handleDrag(e) {
+    if (!this.isDragging) return;
+
+    const deltaX = e.clientX - this.dragStartX;
+    const deltaY = e.clientY - this.dragStartY;
+
+    let newX = this.initialBadgeX + deltaX;
+    let newY = this.initialBadgeY + deltaY;
+
+    // Clamp within viewport so the badge cannot be dragged out of reach
+    const margin = 10;
+    const badgeWidth = this.infoBadge.offsetWidth;
+    const badgeHeight = this.infoBadge.offsetHeight;
+    newX = Math.max(
+      window.scrollX + margin,
+      Math.min(newX, window.scrollX + window.innerWidth - badgeWidth - margin),
+    );
+    newY = Math.max(
+      window.scrollY + margin,
+      Math.min(
+        newY,
+        window.scrollY + window.innerHeight - badgeHeight - margin,
+      ),
+    );
+
+    this.infoBadge.style.left = `${newX}px`;
+    this.infoBadge.style.top = `${newY}px`;
+    this.infoBadge.style.transform = "none"; // reset any potential transform
+
+    this.updateConnector();
+  },
+
+  /**
+   * Handle drag end
+   */
+  handleDragEnd() {
+    this.isDragging = false;
+    document.removeEventListener("mousemove", this.dragHandler);
+    document.removeEventListener("mouseup", this.dragEndHandler);
+  },
+
+  /**
+   * Create SVG connector
+   */
+  createConnector() {
+    if (this.connectorSvg) return;
+
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.classList.add("mageforge-connector-svg");
+
+    // Line
+    const line = document.createElementNS(ns, "line");
+    line.classList.add("mageforge-connector-line");
+    svg.appendChild(line);
+
+    // Dot on element
+    const dot = document.createElementNS(ns, "circle");
+    dot.classList.add("mageforge-connector-dot");
+    dot.setAttribute("r", "4");
+    svg.appendChild(dot);
+
+    document.body.appendChild(svg);
+    this.connectorSvg = svg;
+    this.connectorLine = line;
+    this.connectorDot = dot;
+
+    // Update line on scroll (SVG is fixed, coordinates are viewport-relative)
+    this.connectorScrollHandler = () => this.updateConnector();
+    window.addEventListener("scroll", this.connectorScrollHandler, {
+      passive: true,
+    });
+
+    this.updateConnector();
+  },
+
+  /**
+   * Remove connector
+   */
+  removeConnector() {
+    if (this.connectorScrollHandler) {
+      window.removeEventListener("scroll", this.connectorScrollHandler);
+      this.connectorScrollHandler = null;
+    }
+    if (this.connectorSvg) {
+      this.connectorSvg.remove();
+      this.connectorSvg = null;
+      this.connectorLine = null;
+      this.connectorDot = null;
+    }
+    // Restore static arrow if it exists (for next time)
+    if (this.infoBadge) {
+      const arrow = this.infoBadge.querySelector(".mageforge-inspector-arrow");
+      if (arrow) arrow.style.display = "";
+    }
+  },
+
+  /**
+   * Update connector position
+   */
+  updateConnector() {
+    if (!this.connectorSvg || !this.selectedElement || !this.infoBadge) return;
+
+    // Get badge center
+    const badgeRect = this.infoBadge.getBoundingClientRect();
+    const badgeX = badgeRect.left + badgeRect.width / 2;
+    const badgeY = badgeRect.top + badgeRect.height / 2;
+
+    // Get element center (using highlight box as proxy if available, or selectedElement)
+    let targetRect;
+    if (this.highlightBox && this.highlightBox.style.display !== "none") {
+      targetRect = this.highlightBox.getBoundingClientRect();
+    } else {
+      targetRect = this.getElementRect(this.selectedElement);
+    }
+
+    const targetX = targetRect.left + targetRect.width / 2;
+    const targetY = targetRect.top + targetRect.height / 2;
+
+    // Update line
+    this.connectorLine.setAttribute("x1", badgeX);
+    this.connectorLine.setAttribute("y1", badgeY);
+    this.connectorLine.setAttribute("x2", targetX);
+    this.connectorLine.setAttribute("y2", targetY);
+
+    // Update dot
+    this.connectorDot.setAttribute("cx", targetX);
+    this.connectorDot.setAttribute("cy", targetY);
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/performance.js b/src/view/frontend/web/js/inspector/performance.js
index 5de03a05..56400d12 100644
--- a/src/view/frontend/web/js/inspector/performance.js
+++ b/src/view/frontend/web/js/inspector/performance.js
@@ -3,56 +3,56 @@
  */
 
 export const performanceMethods = {
-    /**
-     * Render Performance tab content
-     *
-     * @param {HTMLElement} container - Tab content container
-     * @param {HTMLElement|null} element - Inspected element
-     * @return {void}
-     */
-    renderPerformanceTab(container, element) {
-        // Guard: No element
-        if (!element) {
-            this.renderNoPerformanceData(container);
-            return;
-        }
-
-        // Get block metadata (may be null)
-        const blockData = this.getBlockMetaData(element);
-
-        // Guard: No block data or missing cache data
-        if (!blockData || !blockData.cache) {
-            this.renderNoPerformanceData(container);
-            return;
-        }
-
-        // Render cache section only
-        this.renderCacheSection(container, blockData.cache);
-    },
-
-    /**
-     * Render "No Performance Data" message
-     */
-    renderNoPerformanceData(container) {
-        const noDataDiv = document.createElement('div');
-        noDataDiv.className = 'mageforge-no-data';
-        noDataDiv.innerHTML = `
+  /**
+   * Render Performance tab content
+   *
+   * @param {HTMLElement} container - Tab content container
+   * @param {HTMLElement|null} element - Inspected element
+   * @return {void}
+   */
+  renderPerformanceTab(container, element) {
+    // Guard: No element
+    if (!element) {
+      this.renderNoPerformanceData(container);
+      return;
+    }
+
+    // Get block metadata (may be null)
+    const blockData = this.getBlockMetaData(element);
+
+    // Guard: No block data or missing cache data
+    if (!blockData || !blockData.cache) {
+      this.renderNoPerformanceData(container);
+      return;
+    }
+
+    // Render cache section only
+    this.renderCacheSection(container, blockData.cache);
+  },
+
+  /**
+   * Render "No Performance Data" message
+   */
+  renderNoPerformanceData(container) {
+    const noDataDiv = document.createElement("div");
+    noDataDiv.className = "mageforge-no-data";
+    noDataDiv.innerHTML = `
             <div class="mageforge-no-data-icon">⚡</div>
             <div class="mageforge-no-data-title">No Performance Data</div>
             <div class="mageforge-no-data-desc">This element is not inside a Magento template block</div>
         `;
-        container.appendChild(noDataDiv);
-    },
-
-    /**
-     * Render cache section
-     */
-    renderCacheSection(container, cacheData) {
-        // Page-level cache warning (if page is not cacheable)
-        if (cacheData.pageCacheable === false) {
-            const warningDiv = document.createElement('div');
-            warningDiv.className = 'mageforge-warning-box';
-            warningDiv.innerHTML = `
+    container.appendChild(noDataDiv);
+  },
+
+  /**
+   * Render cache section
+   */
+  renderCacheSection(container, cacheData) {
+    // Page-level cache warning (if page is not cacheable)
+    if (cacheData.pageCacheable === false) {
+      const warningDiv = document.createElement("div");
+      warningDiv.className = "mageforge-warning-box";
+      warningDiv.innerHTML = `
                 <span style="font-size: 14px;">⚠️</span>
                 <div>
                     <div style="font-weight: 600; margin-bottom: 2px; color: #ef4444;">Page Not Cacheable</div>
@@ -60,344 +60,466 @@ export const performanceMethods = {
                     <div style="color: #fca5a5; font-size: 10px; margin-top: 2px;">Block settings below are overridden by page-level config</div>
                 </div>
             `;
-            container.appendChild(warningDiv);
-        }
-
-        // Block-level cacheable status
-        const cacheableText = cacheData.cacheable ? '✅ Yes' : '❌ No';
-        const cacheableColor = cacheData.cacheable ? '#34d399' : '#94a3b8';
-        const cacheableLabel = cacheData.pageCacheable === false ? 'Block Cacheable (ignored)' : 'Block Cacheable';
-        container.appendChild(this.createInfoSection(cacheableLabel, cacheableText, cacheableColor));
-
-        // Cache lifetime (show for all cacheable blocks)
-        if (cacheData.cacheable) {
-            const lifetimeText = (cacheData.lifetime === null || cacheData.lifetime === 0)
-                ? 'Unlimited'
-                : `${cacheData.lifetime}s`;
-            container.appendChild(this.createInfoSection('Cache Lifetime', lifetimeText, '#60a5fa'));
-        }
-
-        // Cache key
-        if (cacheData.key && cacheData.key !== '') {
-            container.appendChild(this.createInfoSection('Cache Key', cacheData.key, '#a78bfa'));
-        }
-
-        // Cache tags
-        if (cacheData.tags && cacheData.tags.length > 0) {
-            const tagsText = cacheData.tags.join(', ');
-            container.appendChild(this.createInfoSection('Cache Tags', tagsText, '#22d3ee'));
-        }
-    },
-
-    /**
-     * Render Browser Metrics tab content (element-specific)
-     *
-     * @param {HTMLElement} container - Tab content container
-     * @param {HTMLElement|null} element - Inspected element
-     * @return {void}
-     */
-    renderBrowserMetricsTab(container, element) {
-        if (!element) {
-            this.renderNoBrowserMetrics(container);
-            return;
-        }
-
-        let hasMetrics = false;
-
-        if (this.renderRenderTimeMetric(container, element)) hasMetrics = true;
-        if (this.renderLCPMetric(container, element)) hasMetrics = true;
-        if (this.renderCLSMetric(container, element)) hasMetrics = true;
-        if (this.renderElementTimingMetric(container, element)) hasMetrics = true;
-        if (this.renderImageOptimizationMetric(container, element)) hasMetrics = true;
-        if (this.renderResourceMetric(container, element)) hasMetrics = true;
-
-        if (!hasMetrics) {
-            this.renderNoBrowserMetrics(container);
-        }
-
-        this.renderPageTimingsSection(container);
-    },
-
-    /**
-     * Render page-level timing metrics (not element-specific)
-     *
-     * @param {HTMLElement} container
-     */
-    renderPageTimingsSection(container) {
-        // Re-read if not yet cached or still 0 (init ran before load event)
-        if (!this.pageTimings || this.pageTimings.domContentLoaded === 0) {
-            this.cachePageTimings();
-        }
-
-        if (!this.pageTimings || this.pageTimings.domContentLoaded === 0) {
-            return;
-        }
-
-        const divider = document.createElement('div');
-        divider.style.cssText = 'border-top: 1px solid rgba(255,255,255,0.1); margin: 12px 0 8px; padding-top: 8px; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;';
-        divider.textContent = 'Global Page-Metrics';
-        container.appendChild(divider);
-
-        const dclColor = this.pageTimings.domContentLoaded < 1500 ? '#34d399' : (this.pageTimings.domContentLoaded < 3000 ? '#f59e0b' : '#ef4444');
-        container.appendChild(this.createInfoSection('DOM Content Loaded', `${this.pageTimings.domContentLoaded} ms`, dclColor));
-
-        if (this.pageTimings.loadComplete > 0) {
-            const loadColor = this.pageTimings.loadComplete < 2500 ? '#34d399' : (this.pageTimings.loadComplete < 5000 ? '#f59e0b' : '#ef4444');
-            container.appendChild(this.createInfoSection('Page Load Complete', `${this.pageTimings.loadComplete} ms`, loadColor));
-        }
-    },
-
-    renderRenderTimeMetric(container, element) {
-        const blockData = this.getBlockMetaData(element);
-        if (blockData && blockData.performance) {
-            const renderTime = parseFloat(blockData.performance.renderTime);
-            const color = this.getRenderTimeColor(renderTime);
-            const formattedTime = `${blockData.performance.renderTime} ms`;
-            container.appendChild(this.createInfoSection('PHP Render Time', formattedTime, color));
-
-            const desc = document.createElement('div');
-            desc.style.fontSize = '10px';
-            desc.style.color = '#94a3b8';
-            desc.style.marginTop = '-8px';
-            desc.style.marginBottom = '12px';
-            desc.textContent = 'Server-side processing time for this block';
-            container.appendChild(desc);
-
-            return true;
-        }
-        return false;
-    },
-
-    renderLCPMetric(container, element) {
-        if (this.webVitals.lcp && this.webVitals.lcp.element) {
-            const isLCP = this.webVitals.lcp.element === element || element.contains(this.webVitals.lcp.element);
-            if (isLCP) {
-                const lcpValue = this.webVitals.lcp.value.toFixed(0);
-                const lcpColor = lcpValue < 2500 ? '#34d399' : (lcpValue < 4000 ? '#f59e0b' : '#ef4444');
-                container.appendChild(
-                    this.createInfoSection('LCP (Largest Contentful Paint)', `${lcpValue} ms`, lcpColor)
-                );
-                container.appendChild(
-                    this.createInfoSection('LCP Element', '✅ This element is critical for LCP!', '#ef4444')
-                );
-                return true;
-            }
-        }
-        return false;
-    },
-
-    renderCLSMetric(container, element) {
-        const elementCLS = this.getElementCLS(element);
-        if (elementCLS > 0) {
-            const clsColor = elementCLS < 0.1 ? '#34d399' : (elementCLS < 0.25 ? '#f59e0b' : '#ef4444');
-            container.appendChild(
-                this.createInfoSection('CLS (Layout Shift)', elementCLS.toFixed(3), clsColor)
-            );
-            const stabilityScore = Math.max(0, (1 - elementCLS * 4)).toFixed(2);
-            const stabilityColor = stabilityScore > 0.75 ? '#34d399' : (stabilityScore > 0.5 ? '#f59e0b' : '#ef4444');
-            container.appendChild(
-                this.createInfoSection('Layout Stability Score', stabilityScore, stabilityColor)
-            );
-            return true;
-        }
-        return false;
-    },
-
-    renderElementTimingMetric(container, element) {
-        const elementTiming = this.getElementTiming(element);
-        if (elementTiming) {
-            const timingValue = (elementTiming.renderTime || elementTiming.loadTime).toFixed(0);
-            const timingColor = timingValue < 2500 ? '#34d399' : (timingValue < 4000 ? '#f59e0b' : '#ef4444');
-            container.appendChild(
-                this.createInfoSection('Element Timing', `${timingValue} ms (${elementTiming.identifier})`, timingColor)
-            );
-            return true;
-        }
-        return false;
-    },
-
-    renderImageOptimizationMetric(container, element) {
-        const imageAnalysis = this.analyzeImageOptimization(element);
-        if (imageAnalysis) {
-            const modernScore = imageAnalysis.totalImages > 0
-                ? (imageAnalysis.modernFormats / imageAnalysis.totalImages * 100).toFixed(0)
-                : 0;
-            const modernColor = modernScore > 75 ? '#34d399' : (modernScore > 25 ? '#f59e0b' : '#ef4444');
-            container.appendChild(
-                this.createInfoSection('Modern Image Formats', `${modernScore}% (${imageAnalysis.modernFormats}/${imageAnalysis.totalImages})`, modernColor)
-            );
-
-            const responsiveScore = imageAnalysis.totalImages > 0
-                ? (imageAnalysis.hasResponsive / imageAnalysis.totalImages * 100).toFixed(0)
-                : 0;
-            const responsiveColor = responsiveScore > 75 ? '#34d399' : (responsiveScore > 25 ? '#f59e0b' : '#ef4444');
-            const responsiveText = `${imageAnalysis.hasResponsive} of ${imageAnalysis.totalImages} ${imageAnalysis.totalImages === 1 ? 'image uses' : 'images use'} srcset`;
-            container.appendChild(
-                this.createInfoSection('Adaptive Images (srcset)', responsiveText, responsiveColor)
-            );
-
-            if (imageAnalysis.oversized > 0) {
-                container.appendChild(
-                    this.createInfoSection('Oversized Images', `${imageAnalysis.oversized} oversized`, '#ef4444')
-                );
-            }
-
-            if (imageAnalysis.issues.length > 0) {
-                const issuesText = imageAnalysis.issues.slice(0, 3).join(' • ');
-                const moreText = imageAnalysis.issues.length > 3 ? ` (+${imageAnalysis.issues.length - 3} more)` : '';
-                container.appendChild(
-                    this.createInfoSection('Optimization Tips', issuesText + moreText, '#f59e0b')
-                );
-            }
-            return true;
-        }
-        return false;
-    },
-
-    renderResourceMetric(container, element) {
-        const elementResources = this.getElementResources(element);
-        if (elementResources.count > 0) {
-            this.renderElementResourceMetrics(container, elementResources);
-            return true;
-        }
-        return false;
-    },
-
-    /**
-     * Render no browser metrics message
-     */
-    renderNoBrowserMetrics(container) {
-        const noDataDiv = document.createElement('div');
-        noDataDiv.className = 'mageforge-no-data';
-        noDataDiv.innerHTML = `
+      container.appendChild(warningDiv);
+    }
+
+    // Block-level cacheable status
+    const cacheableText = cacheData.cacheable ? "✅ Yes" : "❌ No";
+    const cacheableColor = cacheData.cacheable ? "#34d399" : "#94a3b8";
+    const cacheableLabel =
+      cacheData.pageCacheable === false
+        ? "Block Cacheable (ignored)"
+        : "Block Cacheable";
+    container.appendChild(
+      this.createInfoSection(cacheableLabel, cacheableText, cacheableColor),
+    );
+
+    // Cache lifetime (show for all cacheable blocks)
+    if (cacheData.cacheable) {
+      const lifetimeText =
+        cacheData.lifetime === null || cacheData.lifetime === 0
+          ? "Unlimited"
+          : `${cacheData.lifetime}s`;
+      container.appendChild(
+        this.createInfoSection("Cache Lifetime", lifetimeText, "#60a5fa"),
+      );
+    }
+
+    // Cache key
+    if (cacheData.key && cacheData.key !== "") {
+      container.appendChild(
+        this.createInfoSection("Cache Key", cacheData.key, "#a78bfa"),
+      );
+    }
+
+    // Cache tags
+    if (cacheData.tags && cacheData.tags.length > 0) {
+      const tagsText = cacheData.tags.join(", ");
+      container.appendChild(
+        this.createInfoSection("Cache Tags", tagsText, "#22d3ee"),
+      );
+    }
+  },
+
+  /**
+   * Render Browser Metrics tab content (element-specific)
+   *
+   * @param {HTMLElement} container - Tab content container
+   * @param {HTMLElement|null} element - Inspected element
+   * @return {void}
+   */
+  renderBrowserMetricsTab(container, element) {
+    if (!element) {
+      this.renderNoBrowserMetrics(container);
+      return;
+    }
+
+    let hasMetrics = false;
+
+    if (this.renderRenderTimeMetric(container, element)) hasMetrics = true;
+    if (this.renderLCPMetric(container, element)) hasMetrics = true;
+    if (this.renderCLSMetric(container, element)) hasMetrics = true;
+    if (this.renderElementTimingMetric(container, element)) hasMetrics = true;
+    if (this.renderImageOptimizationMetric(container, element))
+      hasMetrics = true;
+    if (this.renderResourceMetric(container, element)) hasMetrics = true;
+
+    if (!hasMetrics) {
+      this.renderNoBrowserMetrics(container);
+    }
+
+    this.renderPageTimingsSection(container);
+  },
+
+  /**
+   * Render page-level timing metrics (not element-specific)
+   *
+   * @param {HTMLElement} container
+   */
+  renderPageTimingsSection(container) {
+    // Re-read if not yet cached or still 0 (init ran before load event)
+    if (!this.pageTimings || this.pageTimings.domContentLoaded === 0) {
+      this.cachePageTimings();
+    }
+
+    if (!this.pageTimings || this.pageTimings.domContentLoaded === 0) {
+      return;
+    }
+
+    const divider = document.createElement("div");
+    divider.style.cssText =
+      "border-top: 1px solid rgba(255,255,255,0.1); margin: 12px 0 8px; padding-top: 8px; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;";
+    divider.textContent = "Global Page-Metrics";
+    container.appendChild(divider);
+
+    const dclColor =
+      this.pageTimings.domContentLoaded < 1500
+        ? "#34d399"
+        : this.pageTimings.domContentLoaded < 3000
+          ? "#f59e0b"
+          : "#ef4444";
+    container.appendChild(
+      this.createInfoSection(
+        "DOM Content Loaded",
+        `${this.pageTimings.domContentLoaded} ms`,
+        dclColor,
+      ),
+    );
+
+    if (this.pageTimings.loadComplete > 0) {
+      const loadColor =
+        this.pageTimings.loadComplete < 2500
+          ? "#34d399"
+          : this.pageTimings.loadComplete < 5000
+            ? "#f59e0b"
+            : "#ef4444";
+      container.appendChild(
+        this.createInfoSection(
+          "Page Load Complete",
+          `${this.pageTimings.loadComplete} ms`,
+          loadColor,
+        ),
+      );
+    }
+  },
+
+  renderRenderTimeMetric(container, element) {
+    const blockData = this.getBlockMetaData(element);
+    if (blockData && blockData.performance) {
+      const renderTime = parseFloat(blockData.performance.renderTime);
+      const color = this.getRenderTimeColor(renderTime);
+      const formattedTime = `${blockData.performance.renderTime} ms`;
+      container.appendChild(
+        this.createInfoSection("PHP Render Time", formattedTime, color),
+      );
+
+      const desc = document.createElement("div");
+      desc.style.fontSize = "10px";
+      desc.style.color = "#94a3b8";
+      desc.style.marginTop = "-8px";
+      desc.style.marginBottom = "12px";
+      desc.textContent = "Server-side processing time for this block";
+      container.appendChild(desc);
+
+      return true;
+    }
+    return false;
+  },
+
+  renderLCPMetric(container, element) {
+    if (this.webVitals.lcp && this.webVitals.lcp.element) {
+      const isLCP =
+        this.webVitals.lcp.element === element ||
+        element.contains(this.webVitals.lcp.element);
+      if (isLCP) {
+        const lcpValue = this.webVitals.lcp.value.toFixed(0);
+        const lcpColor =
+          lcpValue < 2500 ? "#34d399" : lcpValue < 4000 ? "#f59e0b" : "#ef4444";
+        container.appendChild(
+          this.createInfoSection(
+            "LCP (Largest Contentful Paint)",
+            `${lcpValue} ms`,
+            lcpColor,
+          ),
+        );
+        container.appendChild(
+          this.createInfoSection(
+            "LCP Element",
+            "✅ This element is critical for LCP!",
+            "#ef4444",
+          ),
+        );
+        return true;
+      }
+    }
+    return false;
+  },
+
+  renderCLSMetric(container, element) {
+    const elementCLS = this.getElementCLS(element);
+    if (elementCLS > 0) {
+      const clsColor =
+        elementCLS < 0.1
+          ? "#34d399"
+          : elementCLS < 0.25
+            ? "#f59e0b"
+            : "#ef4444";
+      container.appendChild(
+        this.createInfoSection(
+          "CLS (Layout Shift)",
+          elementCLS.toFixed(3),
+          clsColor,
+        ),
+      );
+      const stabilityScore = Math.max(0, 1 - elementCLS * 4).toFixed(2);
+      const stabilityColor =
+        stabilityScore > 0.75
+          ? "#34d399"
+          : stabilityScore > 0.5
+            ? "#f59e0b"
+            : "#ef4444";
+      container.appendChild(
+        this.createInfoSection(
+          "Layout Stability Score",
+          stabilityScore,
+          stabilityColor,
+        ),
+      );
+      return true;
+    }
+    return false;
+  },
+
+  renderElementTimingMetric(container, element) {
+    const elementTiming = this.getElementTiming(element);
+    if (elementTiming) {
+      const timingValue = (
+        elementTiming.renderTime || elementTiming.loadTime
+      ).toFixed(0);
+      const timingColor =
+        timingValue < 2500
+          ? "#34d399"
+          : timingValue < 4000
+            ? "#f59e0b"
+            : "#ef4444";
+      container.appendChild(
+        this.createInfoSection(
+          "Element Timing",
+          `${timingValue} ms (${elementTiming.identifier})`,
+          timingColor,
+        ),
+      );
+      return true;
+    }
+    return false;
+  },
+
+  renderImageOptimizationMetric(container, element) {
+    const imageAnalysis = this.analyzeImageOptimization(element);
+    if (imageAnalysis) {
+      const modernScore =
+        imageAnalysis.totalImages > 0
+          ? (
+              (imageAnalysis.modernFormats / imageAnalysis.totalImages) *
+              100
+            ).toFixed(0)
+          : 0;
+      const modernColor =
+        modernScore > 75 ? "#34d399" : modernScore > 25 ? "#f59e0b" : "#ef4444";
+      container.appendChild(
+        this.createInfoSection(
+          "Modern Image Formats",
+          `${modernScore}% (${imageAnalysis.modernFormats}/${imageAnalysis.totalImages})`,
+          modernColor,
+        ),
+      );
+
+      const responsiveScore =
+        imageAnalysis.totalImages > 0
+          ? (
+              (imageAnalysis.hasResponsive / imageAnalysis.totalImages) *
+              100
+            ).toFixed(0)
+          : 0;
+      const responsiveColor =
+        responsiveScore > 75
+          ? "#34d399"
+          : responsiveScore > 25
+            ? "#f59e0b"
+            : "#ef4444";
+      const responsiveText = `${imageAnalysis.hasResponsive} of ${imageAnalysis.totalImages} ${imageAnalysis.totalImages === 1 ? "image uses" : "images use"} srcset`;
+      container.appendChild(
+        this.createInfoSection(
+          "Adaptive Images (srcset)",
+          responsiveText,
+          responsiveColor,
+        ),
+      );
+
+      if (imageAnalysis.oversized > 0) {
+        container.appendChild(
+          this.createInfoSection(
+            "Oversized Images",
+            `${imageAnalysis.oversized} oversized`,
+            "#ef4444",
+          ),
+        );
+      }
+
+      if (imageAnalysis.issues.length > 0) {
+        const issuesText = imageAnalysis.issues.slice(0, 3).join(" • ");
+        const moreText =
+          imageAnalysis.issues.length > 3
+            ? ` (+${imageAnalysis.issues.length - 3} more)`
+            : "";
+        container.appendChild(
+          this.createInfoSection(
+            "Optimization Tips",
+            issuesText + moreText,
+            "#f59e0b",
+          ),
+        );
+      }
+      return true;
+    }
+    return false;
+  },
+
+  renderResourceMetric(container, element) {
+    const elementResources = this.getElementResources(element);
+    if (elementResources.count > 0) {
+      this.renderElementResourceMetrics(container, elementResources);
+      return true;
+    }
+    return false;
+  },
+
+  /**
+   * Render no browser metrics message
+   */
+  renderNoBrowserMetrics(container) {
+    const noDataDiv = document.createElement("div");
+    noDataDiv.className = "mageforge-no-data";
+    noDataDiv.innerHTML = `
             <div class="mageforge-no-data-icon">🌐</div>
             <div class="mageforge-no-data-title">No Element-Specific Metrics</div>
             <div class="mageforge-no-data-desc">This element has no measurable browser performance impact</div>
         `;
-        container.appendChild(noDataDiv);
-    },
-
-    /**
-     * Render resource metrics for specific element
-     *
-     * @param {HTMLElement} container
-     * @param {object} resourceData
-     */
-    renderElementResourceMetrics(container, resourceData) {
-        const sizeText = this.formatResourceSize(resourceData.size);
-        const resourceLabel = this.determineResourceLabel(resourceData);
-
-        container.appendChild(
-            this.createInfoSection('Element Resources', `${resourceData.count} ${resourceLabel} (${sizeText})`, '#60a5fa')
+    container.appendChild(noDataDiv);
+  },
+
+  /**
+   * Render resource metrics for specific element
+   *
+   * @param {HTMLElement} container
+   * @param {object} resourceData
+   */
+  renderElementResourceMetrics(container, resourceData) {
+    const sizeText = this.formatResourceSize(resourceData.size);
+    const resourceLabel = this.determineResourceLabel(resourceData);
+
+    container.appendChild(
+      this.createInfoSection(
+        "Element Resources",
+        `${resourceData.count} ${resourceLabel} (${sizeText})`,
+        "#60a5fa",
+      ),
+    );
+
+    this.renderResourceBreakdown(container, resourceData);
+  },
+
+  formatResourceSize(size) {
+    if (size < 1024) {
+      return `${size} B`;
+    } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(1)} KB`;
+    } else {
+      return `${(size / (1024 * 1024)).toFixed(2)} MB`;
+    }
+  },
+
+  /**
+   * Get stats about active resource types
+   */
+  getResourceTypeStats(resourceData) {
+    const definitions = [
+      { key: "img", label: "Image", plural: "Images" },
+      { key: "script", label: "Script", plural: "Scripts" },
+      { key: "css", label: "Stylesheet", plural: "Stylesheets" },
+      { key: "font", label: "Font", plural: "Fonts" },
+      { key: "other", label: "Resource", plural: "Resources" },
+    ];
+
+    const activeTypes = definitions
+      .map((def) => ({ ...def, count: resourceData.byType[def.key] }))
+      .filter((item) => item.count > 0);
+
+    return {
+      activeTypes,
+      typeCount: activeTypes.length,
+    };
+  },
+
+  determineResourceLabel(resourceData) {
+    const { activeTypes, typeCount } = this.getResourceTypeStats(resourceData);
+
+    if (typeCount === 1) {
+      const type = activeTypes[0];
+      return type.count === 1 ? type.label : type.plural;
+    }
+    return resourceData.count === 1 ? "Resource" : "Resources";
+  },
+
+  renderResourceBreakdown(container, resourceData) {
+    const { activeTypes, typeCount } = this.getResourceTypeStats(resourceData);
+
+    if (typeCount > 1) {
+      const typesText = activeTypes
+        .map((t) => `${t.plural}: ${t.count}`)
+        .join(", ");
+
+      container.appendChild(
+        this.createInfoSection("Resource Types", typesText, "#a78bfa"),
+      );
+    }
+  },
+
+  /**
+   * Analyze image optimization for element
+   *
+   * @param {HTMLElement} element
+   * @return {object|null} Image optimization metrics
+   */
+  analyzeImageOptimization(element) {
+    // Find all images in/on element
+    const images =
+      element.tagName === "IMG"
+        ? [element]
+        : Array.from(element.querySelectorAll("img"));
+    if (images.length === 0) return null;
+
+    const analysis = {
+      totalImages: images.length,
+      modernFormats: 0,
+      hasResponsive: 0,
+      oversized: 0,
+      issues: [],
+    };
+
+    images.forEach((img, idx) => {
+      const src = img.currentSrc || img.src;
+      if (!src) return;
+
+      // Check modern formats (WebP, AVIF)
+      if (src.match(/\.(webp|avif)$/i)) {
+        analysis.modernFormats++;
+      } else if (src.match(/\.(jpg|jpeg|png|gif)$/i)) {
+        analysis.issues.push(`Image ${idx + 1}: Consider WebP/AVIF format`);
+      }
+
+      // Check responsive images
+      if (img.hasAttribute("srcset") || img.hasAttribute("sizes")) {
+        analysis.hasResponsive++;
+      } else if (img.width > 400) {
+        analysis.issues.push(
+          `Image ${idx + 1}: Missing srcset for responsive optimization`,
         );
-
-        this.renderResourceBreakdown(container, resourceData);
-    },
-
-    formatResourceSize(size) {
-        if (size < 1024) {
-            return `${size} B`;
-        } else if (size < 1024 * 1024) {
-            return `${(size / 1024).toFixed(1)} KB`;
-        } else {
-            return `${(size / (1024 * 1024)).toFixed(2)} MB`;
-        }
-    },
-
-    /**
-     * Get stats about active resource types
-     */
-    getResourceTypeStats(resourceData) {
-        const definitions = [
-            { key: 'img', label: 'Image', plural: 'Images' },
-            { key: 'script', label: 'Script', plural: 'Scripts' },
-            { key: 'css', label: 'Stylesheet', plural: 'Stylesheets' },
-            { key: 'font', label: 'Font', plural: 'Fonts' },
-            { key: 'other', label: 'Resource', plural: 'Resources' }
-        ];
-
-        const activeTypes = definitions
-            .map(def => ({ ...def, count: resourceData.byType[def.key] }))
-            .filter(item => item.count > 0);
-
-        return {
-            activeTypes,
-            typeCount: activeTypes.length
-        };
-    },
-
-    determineResourceLabel(resourceData) {
-        const { activeTypes, typeCount } = this.getResourceTypeStats(resourceData);
-
-        if (typeCount === 1) {
-            const type = activeTypes[0];
-            return type.count === 1 ? type.label : type.plural;
+      }
+
+      // Check oversizing (rendered size vs natural size)
+      if (img.naturalWidth && img.width) {
+        const oversizeRatio = img.naturalWidth / img.width;
+        if (oversizeRatio > 1.5) {
+          analysis.oversized++;
+          const wastedPercent = Math.round((1 - 1 / oversizeRatio) * 100);
+          analysis.issues.push(
+            `Image ${idx + 1}: ${wastedPercent}% oversized (${img.naturalWidth}px served, ${img.width}px displayed)`,
+          );
         }
-        return resourceData.count === 1 ? 'Resource' : 'Resources';
-    },
-
-    renderResourceBreakdown(container, resourceData) {
-        const { activeTypes, typeCount } = this.getResourceTypeStats(resourceData);
+      }
+    });
 
-        if (typeCount > 1) {
-            const typesText = activeTypes
-                .map(t => `${t.plural}: ${t.count}`)
-                .join(', ');
-
-            container.appendChild(
-                this.createInfoSection('Resource Types', typesText, '#a78bfa')
-            );
-        }
-    },
-
-    /**
-     * Analyze image optimization for element
-     *
-     * @param {HTMLElement} element
-     * @return {object|null} Image optimization metrics
-     */
-    analyzeImageOptimization(element) {
-        // Find all images in/on element
-        const images = element.tagName === 'IMG' ? [element] : Array.from(element.querySelectorAll('img'));
-        if (images.length === 0) return null;
-
-        const analysis = {
-            totalImages: images.length,
-            modernFormats: 0,
-            hasResponsive: 0,
-            oversized: 0,
-            issues: []
-        };
-
-        images.forEach((img, idx) => {
-            const src = img.currentSrc || img.src;
-            if (!src) return;
-
-            // Check modern formats (WebP, AVIF)
-            if (src.match(/\.(webp|avif)$/i)) {
-                analysis.modernFormats++;
-            } else if (src.match(/\.(jpg|jpeg|png|gif)$/i)) {
-                analysis.issues.push(`Image ${idx + 1}: Consider WebP/AVIF format`);
-            }
-
-            // Check responsive images
-            if (img.hasAttribute('srcset') || img.hasAttribute('sizes')) {
-                analysis.hasResponsive++;
-            } else if (img.width > 400) {
-                analysis.issues.push(`Image ${idx + 1}: Missing srcset for responsive optimization`);
-            }
-
-            // Check oversizing (rendered size vs natural size)
-            if (img.naturalWidth && img.width) {
-                const oversizeRatio = img.naturalWidth / img.width;
-                if (oversizeRatio > 1.5) {
-                    analysis.oversized++;
-                    const wastedPercent = Math.round((1 - 1/oversizeRatio) * 100);
-                    analysis.issues.push(`Image ${idx + 1}: ${wastedPercent}% oversized (${img.naturalWidth}px served, ${img.width}px displayed)`);
-                }
-            }
-        });
-
-        return analysis;
-    },
+    return analysis;
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/picker.js b/src/view/frontend/web/js/inspector/picker.js
index ea7be3c8..188bec00 100644
--- a/src/view/frontend/web/js/inspector/picker.js
+++ b/src/view/frontend/web/js/inspector/picker.js
@@ -2,242 +2,252 @@
  * MageForge Inspector - Keyboard Shortcuts, Inspector Toggle & Element Picker
  */
 
-import { blockDataMap } from './blockData.js';
+import { blockDataMap } from "./blockData.js";
 
 export const pickerMethods = {
-    /**
-     * Setup keyboard shortcuts
-     */
-    setupKeyboardShortcuts() {
-        this.keydownHandler = (e) => {
-            // Ctrl+Shift+I or Cmd+Option+I
-            if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'I') {
-                e.preventDefault();
-                this.toggleInspector();
-            }
-
-            // ESC to close
-            if (e.key === 'Escape' && this.isOpen) {
-                this.closeInspector();
-            }
-        };
-        document.addEventListener('keydown', this.keydownHandler);
-    },
-
-    /**
-     * Toggle inspector on/off
-     */
-    toggleInspector() {
-        this.isOpen = !this.isOpen;
-
-        if (this.isOpen) {
-            this.activatePicker();
-            this.$dispatch('mageforge:inspector:opened');
-        } else {
-            this.deactivatePicker();
-            this.$dispatch('mageforge:inspector:closed');
-        }
-
-        this.updateFloatingButton();
-    },
-
-    /**
-     * Close inspector
-     */
-    closeInspector() {
-        this.isOpen = false;
-        this.isPinned = false;
-        this.removeDraggable();
-        this.deactivatePicker();
-        this.hideHighlight();
-        this.$dispatch('mageforge:inspector:closed');
-        this.updateFloatingButton();
-    },
-
-    /**
-     * Activate element picker mode
-     */
-    activatePicker() {
-        this.isPickerActive = true;
-        document.addEventListener('mousemove', this.mouseMoveHandler);
-        document.addEventListener('click', this.clickHandler, false); // Don't use capture
-        document.body.style.cursor = 'crosshair';
-    },
-
-    /**
-     * Deactivate element picker mode
-     */
-    deactivatePicker() {
-        this.isPickerActive = false;
-
-        // Clear any pending hover timeout
-        if (this.hoverTimeout) {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = null;
-        }
-
-        document.removeEventListener('mousemove', this.mouseMoveHandler);
-
-        // Keep click handler active if pinned (for click-outside detection)
-        if (!this.isPinned) {
-            document.removeEventListener('click', this.clickHandler, false);
-        }
-
-        document.body.style.cursor = '';
-
-        // Only hide if not pinned
-        if (!this.isPinned) {
-            this.hideHighlight();
-        }
-
-        this.hoveredElement = null;
-        this.lastBadgeUpdate = 0;
-    },
-
-    /**
-     * Handle mouse move over elements
-     */
-    handleMouseMove(e) {
-        if (!this.isPickerActive) return;
-
-        // Don't update if badge is pinned
-        if (this.isPinned) return;
-
-        // Don't update if mouse is over the floating button
-        if (this.floatingButton && this.floatingButton.contains(e.target)) {
-            return;
-        }
-
-        // Don't update if mouse is over the info badge
-        if (this.infoBadge && this.infoBadge.contains(e.target)) {
-            return;
-        }
-
-        const element = this.findInspectableElement(e.target);
-
-        // Clear any existing hover timeout
-        if (this.hoverTimeout) {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = null;
-        }
-
-        if (element && element !== this.hoveredElement) {
-            // Debounce hover updates for accurate positioning
-            this.hoverTimeout = setTimeout(() => {
-                const now = Date.now();
-                this.hoveredElement = element;
-                this.showHighlight(element);
-                this.updatePanelData(element);
-                this.showInfoBadge(element);
-                // Only update the throttle timestamp when enough time has passed
-                if (now - this.lastBadgeUpdate >= this.badgeUpdateDelay) {
-                    this.lastBadgeUpdate = now;
-                }
-            }, this.hoverDelay);
-        } else if (!element && this.hoveredElement) {
-            // Only hide highlight when leaving element, keep badge visible
-            if (this.highlightBox) {
-                this.highlightBox.style.display = 'none';
-            }
-            // Badge stays visible until hovering another element
-        }
-    },
-
-    /**
-     * Handle click on element
-     */
-    handleClick(e) {
-        // Handle click outside badge when pinned
-        if (this.isPinned && this.infoBadge) {
-            // Check if click is outside badge
-            if (!this.infoBadge.contains(e.target) && (!this.floatingButton || !this.floatingButton.contains(e.target))) {
-                this.unpinBadge();
-                return;
-            }
-            // Click inside badge - do nothing, let it stay open
-            return;
-        }
-
-        if (!this.isPickerActive) return;
-
-        // Don't handle clicks on the info badge during picking
-        if (this.infoBadge && (this.infoBadge.contains(e.target) || this.infoBadge === e.target)) {
-            return;
-        }
-
+  /**
+   * Setup keyboard shortcuts
+   */
+  setupKeyboardShortcuts() {
+    this.keydownHandler = (e) => {
+      // Ctrl+Shift+I or Cmd+Option+I
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "I") {
         e.preventDefault();
-        e.stopPropagation();
-
-        const element = this.findInspectableElement(e.target);
-
-        if (element) {
-            this.selectedElement = element;
-            this.updatePanelData(element);
-            this.pinBadge();
-        }
-    },
-
-    /**
-     * Pin the badge after element selection
-     */
-    pinBadge() {
-        this.isPinned = true;
-        this.deactivatePicker();
-        // Keep highlight and badge visible
-        // Update badge to show close button
-        if (this.selectedElement) {
-            this.buildBadgeContent(this.selectedElement);
-        }
-        this.setupDraggable();
-    },
-
-    /**
-     * Unpin and close the badge
-     */
-    unpinBadge() {
-        this.isPinned = false;
-        this.removeDraggable();
-        this.hideHighlight();
-        this.selectedElement = null;
-
-        // Remove click handler
-        document.removeEventListener('click', this.clickHandler, false);
-
-        // Reactivate picker if inspector is still open
-        if (this.isOpen) {
-            this.activatePicker();
-        }
-    },
-
-    /**
-     * Find nearest inspectable element
-     */
-    findInspectableElement(target) {
-        if (!target) return null;
-
-        // Skip inspector's own elements
-        if (target.classList && (target.classList.contains('mageforge-inspector') || target.closest('.mageforge-inspector'))) {
-            return null;
-        }
-
-        // Skip body and html
-        if (target.tagName === 'BODY' || target.tagName === 'HTML') {
-            return null;
-        }
-
-        // Check if this element is part of a MageForge block
-        const block = this.findBlockForElement(target);
-        if (block) {
-            blockDataMap.set(target, block.data);
-            return target;
-        }
-
-        // For PageBuilder elements where no block could be resolved (e.g. injection
-        // was skipped entirely), still open the inspector showing inherited/no-data state.
-        if (target.closest('[data-content-type]')) {
-            return target;
-        }
-
-        return null;
-    },
+        this.toggleInspector();
+      }
+
+      // ESC to close
+      if (e.key === "Escape" && this.isOpen) {
+        this.closeInspector();
+      }
+    };
+    document.addEventListener("keydown", this.keydownHandler);
+  },
+
+  /**
+   * Toggle inspector on/off
+   */
+  toggleInspector() {
+    this.isOpen = !this.isOpen;
+
+    if (this.isOpen) {
+      this.activatePicker();
+      this.$dispatch("mageforge:inspector:opened");
+    } else {
+      this.deactivatePicker();
+      this.$dispatch("mageforge:inspector:closed");
+    }
+
+    this.updateFloatingButton();
+  },
+
+  /**
+   * Close inspector
+   */
+  closeInspector() {
+    this.isOpen = false;
+    this.isPinned = false;
+    this.removeDraggable();
+    this.deactivatePicker();
+    this.hideHighlight();
+    this.$dispatch("mageforge:inspector:closed");
+    this.updateFloatingButton();
+  },
+
+  /**
+   * Activate element picker mode
+   */
+  activatePicker() {
+    this.isPickerActive = true;
+    document.addEventListener("mousemove", this.mouseMoveHandler);
+    document.addEventListener("click", this.clickHandler, false); // Don't use capture
+    document.body.style.cursor = "crosshair";
+  },
+
+  /**
+   * Deactivate element picker mode
+   */
+  deactivatePicker() {
+    this.isPickerActive = false;
+
+    // Clear any pending hover timeout
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+
+    document.removeEventListener("mousemove", this.mouseMoveHandler);
+
+    // Keep click handler active if pinned (for click-outside detection)
+    if (!this.isPinned) {
+      document.removeEventListener("click", this.clickHandler, false);
+    }
+
+    document.body.style.cursor = "";
+
+    // Only hide if not pinned
+    if (!this.isPinned) {
+      this.hideHighlight();
+    }
+
+    this.hoveredElement = null;
+    this.lastBadgeUpdate = 0;
+  },
+
+  /**
+   * Handle mouse move over elements
+   */
+  handleMouseMove(e) {
+    if (!this.isPickerActive) return;
+
+    // Don't update if badge is pinned
+    if (this.isPinned) return;
+
+    // Don't update if mouse is over the floating button
+    if (this.floatingButton && this.floatingButton.contains(e.target)) {
+      return;
+    }
+
+    // Don't update if mouse is over the info badge
+    if (this.infoBadge && this.infoBadge.contains(e.target)) {
+      return;
+    }
+
+    const element = this.findInspectableElement(e.target);
+
+    // Clear any existing hover timeout
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+
+    if (element && element !== this.hoveredElement) {
+      // Debounce hover updates for accurate positioning
+      this.hoverTimeout = setTimeout(() => {
+        const now = Date.now();
+        this.hoveredElement = element;
+        this.showHighlight(element);
+        this.updatePanelData(element);
+        this.showInfoBadge(element);
+        // Only update the throttle timestamp when enough time has passed
+        if (now - this.lastBadgeUpdate >= this.badgeUpdateDelay) {
+          this.lastBadgeUpdate = now;
+        }
+      }, this.hoverDelay);
+    } else if (!element && this.hoveredElement) {
+      // Only hide highlight when leaving element, keep badge visible
+      if (this.highlightBox) {
+        this.highlightBox.style.display = "none";
+      }
+      // Badge stays visible until hovering another element
+    }
+  },
+
+  /**
+   * Handle click on element
+   */
+  handleClick(e) {
+    // Handle click outside badge when pinned
+    if (this.isPinned && this.infoBadge) {
+      // Check if click is outside badge
+      if (
+        !this.infoBadge.contains(e.target) &&
+        (!this.floatingButton || !this.floatingButton.contains(e.target))
+      ) {
+        this.unpinBadge();
+        return;
+      }
+      // Click inside badge - do nothing, let it stay open
+      return;
+    }
+
+    if (!this.isPickerActive) return;
+
+    // Don't handle clicks on the info badge during picking
+    if (
+      this.infoBadge &&
+      (this.infoBadge.contains(e.target) || this.infoBadge === e.target)
+    ) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const element = this.findInspectableElement(e.target);
+
+    if (element) {
+      this.selectedElement = element;
+      this.updatePanelData(element);
+      this.pinBadge();
+    }
+  },
+
+  /**
+   * Pin the badge after element selection
+   */
+  pinBadge() {
+    this.isPinned = true;
+    this.deactivatePicker();
+    // Keep highlight and badge visible
+    // Update badge to show close button
+    if (this.selectedElement) {
+      this.buildBadgeContent(this.selectedElement);
+    }
+    this.setupDraggable();
+  },
+
+  /**
+   * Unpin and close the badge
+   */
+  unpinBadge() {
+    this.isPinned = false;
+    this.removeDraggable();
+    this.hideHighlight();
+    this.selectedElement = null;
+
+    // Remove click handler
+    document.removeEventListener("click", this.clickHandler, false);
+
+    // Reactivate picker if inspector is still open
+    if (this.isOpen) {
+      this.activatePicker();
+    }
+  },
+
+  /**
+   * Find nearest inspectable element
+   */
+  findInspectableElement(target) {
+    if (!target) return null;
+
+    // Skip inspector's own elements
+    if (
+      target.classList &&
+      (target.classList.contains("mageforge-inspector") ||
+        target.closest(".mageforge-inspector"))
+    ) {
+      return null;
+    }
+
+    // Skip body and html
+    if (target.tagName === "BODY" || target.tagName === "HTML") {
+      return null;
+    }
+
+    // Check if this element is part of a MageForge block
+    const block = this.findBlockForElement(target);
+    if (block) {
+      blockDataMap.set(target, block.data);
+      return target;
+    }
+
+    // For PageBuilder elements where no block could be resolved (e.g. injection
+    // was skipped entirely), still open the inspector showing inherited/no-data state.
+    if (target.closest("[data-content-type]")) {
+      return target;
+    }
+
+    return null;
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/tabs.js b/src/view/frontend/web/js/inspector/tabs.js
index 39e9dec1..50e61785 100644
--- a/src/view/frontend/web/js/inspector/tabs.js
+++ b/src/view/frontend/web/js/inspector/tabs.js
@@ -3,201 +3,217 @@
  */
 
 export const tabsMethods = {
-    /**
-     * Create tab system for inspector
-     */
-    createTabSystem(data, element) {
-        // Tab container
-        const tabContainer = document.createElement('div');
-        tabContainer.className = 'mageforge-tabs-container';
-
-        // Tab header
-        const tabHeader = document.createElement('div');
-        tabHeader.className = 'mageforge-tabs-header';
-
-        // Define tabs
-        const tabs = [
-            { id: 'structure', label: 'Structure', icon: '🏰' },
-            { id: 'accessibility', label: 'Accessibility', icon: '♿' },
-            { id: 'performance', label: 'Cache', icon: '💾' },
-            { id: 'core-web-vitals', label: 'Core Web Vitals', icon: '🌐' }
-        ];
-
-        // Tab content container
-        const tabContentContainer = document.createElement('div');
-
-        // Create tab buttons
-        tabs.forEach(tab => {
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'mageforge-tab-button' + (this.activeTab === tab.id ? ' active' : '');
-
-            // Label text
-            const textSpan = document.createElement('span');
-            textSpan.textContent = tab.label;
-            button.appendChild(textSpan);
-
-            button.onclick = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                this.switchTab(tab.id, data, element);
-            };
-
-            tabHeader.appendChild(button);
-        });
-
-        tabContainer.appendChild(tabHeader);
-        tabContainer.appendChild(tabContentContainer);
-        this.infoBadge.appendChild(tabContainer);
-
-        // Render initial tab content
-        this.renderTabContent(this.activeTab, data, tabContentContainer, element);
-    },
-
-    /**
-     * Switch to different tab
-     */
-    switchTab(tabId, data, element) {
-        this.activeTab = tabId;
-
-        // Find the element to rebuild
-        const targetElement = element || this.hoveredElement || this.selectedElement;
-        if (targetElement) {
-            this.buildBadgeContent(targetElement);
-        }
-    },
-
-    /**
-     * Render content for specific tab
-     */
-    renderTabContent(tabId, data, container, element) {
-        container.innerHTML = '';
-
-        if (tabId === 'structure') {
-            this.renderStructureTab(data, container, element);
-        } else if (tabId === 'accessibility') {
-            this.renderAccessibilityTab(container, element);
-        } else if (tabId === 'performance') {
-            this.renderPerformanceTab(container, element);
-        } else if (tabId === 'core-web-vitals') {
-            this.renderBrowserMetricsTab(container, element);
-        }
-    },
-
-    /**
-     * Render Structure tab content
-     */
-    renderStructureTab(data, container, element) {
-        const hasTemplateData = data.template || data.blockClass || data.module;
-
-        if (!hasTemplateData) {
-            this.renderStructureWithParentData(container, element);
-            return;
-        }
-
-        this.renderStructureSections(data, container);
-    },
-
-    /**
-     * Render structure tab when element has no direct template data
-     */
-    renderStructureWithParentData(container, element) {
-        // Try to find parent element with block data
-        let parent = element.parentElement;
-        let parentBlock = null;
-        let maxDepth = 10;
-
-        while (parent && maxDepth > 0) {
-            parentBlock = this.findBlockForElement(parent);
-            if (parentBlock) {
-                this.renderInheritedStructure(container, element, parentBlock);
-                return;
-            }
-            parent = parent.parentElement;
-            maxDepth--;
-        }
-
-        this.renderNoTemplateData(container, element);
-    },
-
-    /**
-     * Render inherited structure from parent element
-     */
-    renderInheritedStructure(container, element, parentBlock) {
-        const src = parentBlock.data || {};
-
-        const parentData = {
-            template:    src.template    || '',
-            block:       src.block       || '',
-            module:      src.module      || '',
-            viewModel:   src.viewModel   || '',
-            parent:      src.parent      || '',
-            alias:       src.alias       || '',
-            override:    src.override    || '0',
-            blockClass:  src.block       || '',
-            parentBlock: src.parent      || '',
-            blockAlias:  src.alias       || '',
-            isOverride:  src.override === '1',
-            cmsBlockId:  src.cmsBlockId  || '',
-        };
-
-        // Inheritance note
-        const inheritanceNote = document.createElement('div');
-        inheritanceNote.className = 'mageforge-inheritance-note';
-        inheritanceNote.innerHTML = `
+  /**
+   * Create tab system for inspector
+   */
+  createTabSystem(data, element) {
+    // Tab container
+    const tabContainer = document.createElement("div");
+    tabContainer.className = "mageforge-tabs-container";
+
+    // Tab header
+    const tabHeader = document.createElement("div");
+    tabHeader.className = "mageforge-tabs-header";
+
+    // Define tabs
+    const tabs = [
+      { id: "structure", label: "Structure", icon: "🏰" },
+      { id: "accessibility", label: "Accessibility", icon: "♿" },
+      { id: "performance", label: "Cache", icon: "💾" },
+      { id: "core-web-vitals", label: "Core Web Vitals", icon: "🌐" },
+    ];
+
+    // Tab content container
+    const tabContentContainer = document.createElement("div");
+
+    // Create tab buttons
+    tabs.forEach((tab) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className =
+        "mageforge-tab-button" + (this.activeTab === tab.id ? " active" : "");
+
+      // Label text
+      const textSpan = document.createElement("span");
+      textSpan.textContent = tab.label;
+      button.appendChild(textSpan);
+
+      button.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.switchTab(tab.id, data, element);
+      };
+
+      tabHeader.appendChild(button);
+    });
+
+    tabContainer.appendChild(tabHeader);
+    tabContainer.appendChild(tabContentContainer);
+    this.infoBadge.appendChild(tabContainer);
+
+    // Render initial tab content
+    this.renderTabContent(this.activeTab, data, tabContentContainer, element);
+  },
+
+  /**
+   * Switch to different tab
+   */
+  switchTab(tabId, data, element) {
+    this.activeTab = tabId;
+
+    // Find the element to rebuild
+    const targetElement =
+      element || this.hoveredElement || this.selectedElement;
+    if (targetElement) {
+      this.buildBadgeContent(targetElement);
+    }
+  },
+
+  /**
+   * Render content for specific tab
+   */
+  renderTabContent(tabId, data, container, element) {
+    container.innerHTML = "";
+
+    if (tabId === "structure") {
+      this.renderStructureTab(data, container, element);
+    } else if (tabId === "accessibility") {
+      this.renderAccessibilityTab(container, element);
+    } else if (tabId === "performance") {
+      this.renderPerformanceTab(container, element);
+    } else if (tabId === "core-web-vitals") {
+      this.renderBrowserMetricsTab(container, element);
+    }
+  },
+
+  /**
+   * Render Structure tab content
+   */
+  renderStructureTab(data, container, element) {
+    const hasTemplateData = data.template || data.blockClass || data.module;
+
+    if (!hasTemplateData) {
+      this.renderStructureWithParentData(container, element);
+      return;
+    }
+
+    this.renderStructureSections(data, container);
+  },
+
+  /**
+   * Render structure tab when element has no direct template data
+   */
+  renderStructureWithParentData(container, element) {
+    // Try to find parent element with block data
+    let parent = element.parentElement;
+    let parentBlock = null;
+    let maxDepth = 10;
+
+    while (parent && maxDepth > 0) {
+      parentBlock = this.findBlockForElement(parent);
+      if (parentBlock) {
+        this.renderInheritedStructure(container, element, parentBlock);
+        return;
+      }
+      parent = parent.parentElement;
+      maxDepth--;
+    }
+
+    this.renderNoTemplateData(container, element);
+  },
+
+  /**
+   * Render inherited structure from parent element
+   */
+  renderInheritedStructure(container, element, parentBlock) {
+    const src = parentBlock.data || {};
+
+    const parentData = {
+      template: src.template || "",
+      block: src.block || "",
+      module: src.module || "",
+      viewModel: src.viewModel || "",
+      parent: src.parent || "",
+      alias: src.alias || "",
+      override: src.override || "0",
+      blockClass: src.block || "",
+      parentBlock: src.parent || "",
+      blockAlias: src.alias || "",
+      isOverride: src.override === "1",
+      cmsBlockId: src.cmsBlockId || "",
+    };
+
+    // Inheritance note
+    const inheritanceNote = document.createElement("div");
+    inheritanceNote.className = "mageforge-inheritance-note";
+    inheritanceNote.innerHTML = `
             <span style="font-size: 14px;">⬆️</span>
             <div>
                 <div style="font-weight: 600; margin-bottom: 2px;">Inherited from Parent</div>
                 <div style="color: #fcd34d; font-size: 10px;">This &lt;${element.tagName.toLowerCase()}&gt; element is inside a Magento block</div>
             </div>
         `;
-        container.appendChild(inheritanceNote);
-
-        this.renderStructureSections(parentData, container);
-    },
-
-    /**
-     * Render "No Template Data" message
-     */
-    renderNoTemplateData(container, element) {
-        const noDataDiv = document.createElement('div');
-        noDataDiv.className = 'mageforge-no-data';
-        noDataDiv.innerHTML = `
+    container.appendChild(inheritanceNote);
+
+    this.renderStructureSections(parentData, container);
+  },
+
+  /**
+   * Render "No Template Data" message
+   */
+  renderNoTemplateData(container, element) {
+    const noDataDiv = document.createElement("div");
+    noDataDiv.className = "mageforge-no-data";
+    noDataDiv.innerHTML = `
             <div class="mageforge-no-data-icon">📋</div>
             <div class="mageforge-no-data-title">No Template Data</div>
             <div class="mageforge-no-data-desc">This element is not inside a Magento template block</div>
             <div class="mageforge-no-data-meta">Element: <code class="mageforge-code-tag">&lt;${element.tagName.toLowerCase()}&gt;</code></div>
         `;
-        container.appendChild(noDataDiv);
-    },
-
-    /**
-     * Render structure sections (template, block, module, etc.)
-     */
-    renderStructureSections(data, container) {
-        // Template section
-        container.appendChild(this.createInfoSection('Template', data.template, '#60a5fa'));
-
-        // Block section
-        container.appendChild(this.createInfoSection('Block', data.blockClass, '#a78bfa'));
-
-        // Optional sections
-        if (data.blockAlias) {
-            container.appendChild(this.createInfoSection('Block Name', data.blockAlias, '#34d399'));
-        }
-        if (data.parentBlock) {
-            container.appendChild(this.createInfoSection('Parent Block', data.parentBlock, '#fb923c'));
-        }
-        if (data.viewModel) {
-            container.appendChild(this.createInfoSection('ViewModel', data.viewModel, '#22d3ee'));
-        }
-
-        // CMS Block identifier (only for Magento_Cms blocks with PageBuilder content)
-        if (data.cmsBlockId) {
-            container.appendChild(this.createInfoSection('CMS Block', data.cmsBlockId, '#f472b6'));
-        }
-
-        // Module section
-        container.appendChild(this.createInfoSection('Module', data.module, '#fbbf24'));
-    },
+    container.appendChild(noDataDiv);
+  },
+
+  /**
+   * Render structure sections (template, block, module, etc.)
+   */
+  renderStructureSections(data, container) {
+    // Template section
+    container.appendChild(
+      this.createInfoSection("Template", data.template, "#60a5fa"),
+    );
+
+    // Block section
+    container.appendChild(
+      this.createInfoSection("Block", data.blockClass, "#a78bfa"),
+    );
+
+    // Optional sections
+    if (data.blockAlias) {
+      container.appendChild(
+        this.createInfoSection("Block Name", data.blockAlias, "#34d399"),
+      );
+    }
+    if (data.parentBlock) {
+      container.appendChild(
+        this.createInfoSection("Parent Block", data.parentBlock, "#fb923c"),
+      );
+    }
+    if (data.viewModel) {
+      container.appendChild(
+        this.createInfoSection("ViewModel", data.viewModel, "#22d3ee"),
+      );
+    }
+
+    // CMS Block identifier (only for Magento_Cms blocks with PageBuilder content)
+    if (data.cmsBlockId) {
+      container.appendChild(
+        this.createInfoSection("CMS Block", data.cmsBlockId, "#f472b6"),
+      );
+    }
+
+    // Module section
+    container.appendChild(
+      this.createInfoSection("Module", data.module, "#fbbf24"),
+    );
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/ui.js b/src/view/frontend/web/js/inspector/ui.js
index 8421b74b..64593756 100644
--- a/src/view/frontend/web/js/inspector/ui.js
+++ b/src/view/frontend/web/js/inspector/ui.js
@@ -2,393 +2,410 @@
  * MageForge Inspector - UI Element Creation & Badge Positioning
  */
 
-import { blockDataMap } from './blockData.js';
+import { blockDataMap } from "./blockData.js";
 
 export const uiMethods = {
-    /**
-     * Create highlight overlay box
-     */
-    createHighlightBox() {
-        this.highlightBox = document.createElement('div');
-        this.highlightBox.className = 'mageforge-inspector mageforge-inspector-highlight';
-
-        // Propagate theme from root element to injected body element
-        if (this.$el && this.$el.hasAttribute('data-theme')) {
-            this.highlightBox.setAttribute('data-theme', this.$el.getAttribute('data-theme'));
-        }
-
-        this.highlightBox.style.display = 'none';
-
-        document.body.appendChild(this.highlightBox);
-    },
-
-    /**
-     * Create info badge overlay
-     */
-    createInfoBadge() {
-        this.infoBadge = document.createElement('div');
-        this.infoBadge.className = 'mageforge-inspector mageforge-inspector-info-badge';
-
-        // Propagate theme from root element to injected body element
-        if (this.$el && this.$el.hasAttribute('data-theme')) {
-            this.infoBadge.setAttribute('data-theme', this.$el.getAttribute('data-theme'));
-        }
-
-        this.infoBadge.style.display = 'none';
-
-        // Create arrow element
-        const arrow = document.createElement('div');
-        arrow.className = 'mageforge-inspector-arrow';
-        this.infoBadge.appendChild(arrow);
-
-        document.body.appendChild(this.infoBadge);
-    },
-
-    /**
-     * Notify the toolbar about the current inspector open/closed state
-     */
-    updateFloatingButton() {
-        window.dispatchEvent(new CustomEvent('mageforge:toolbar:inspector-state', {
-            detail: { active: this.isOpen }
-        }));
-    },
-
-    /**
-     * Show highlight overlay on element
-     */
-    showHighlight(element) {
-        // If element has display:contents, use first child for dimensions
-        let targetElement = element;
-        const style = window.getComputedStyle(element);
-
-        if (style.display === 'contents' && element.children.length > 0) {
-            targetElement = element.children[0];
-        }
-
-        const rect = targetElement.getBoundingClientRect();
-
-        // Only show if element has dimensions
-        if (rect.width === 0 || rect.height === 0) {
-            return;
-        }
-
-        this.highlightBox.style.display = 'block';
-        this.highlightBox.style.top = `${rect.top + window.scrollY}px`;
-        this.highlightBox.style.left = `${rect.left + window.scrollX}px`;
-        this.highlightBox.style.width = `${rect.width}px`;
-        this.highlightBox.style.height = `${rect.height}px`;
-    },
-
-    /**
-     * Hide highlight overlay
-     */
-    hideHighlight() {
-        if (this.highlightBox) {
-            this.highlightBox.style.display = 'none';
-        }
-        if (this.infoBadge) {
-            this.infoBadge.style.display = 'none';
-        }
-    },
-
-    /**
-     * Show info badge with element details
-     */
-    showInfoBadge(element) {
-        const rect = this.getElementRect(element);
-        const elementId = element.getAttribute('data-mageforge-id');
-
-        // Only rebuild badge content if it's a different element.
-        // For PageBuilder fallback elements that lack data-mageforge-id, use element
-        // reference comparison to avoid rebuilding on every hover/click.
-        const isSame = elementId !== null
-            ? this.infoBadge.dataset.currentElement === elementId
-            : this.infoBadge._currentElement === element;
-
-        if (!isSame) {
-            this.buildBadgeContent(element);
-            this.infoBadge.dataset.currentElement = elementId ?? '';
-            this.infoBadge._currentElement = element;
-        }
-
-        this.positionBadge(rect);
-    },
-
-    /**
-     * Get element rectangle (handles display:contents)
-     */
-    getElementRect(element) {
-        let targetElement = element;
-        const style = window.getComputedStyle(element);
-        if (style.display === 'contents' && element.children.length > 0) {
-            targetElement = element.children[0];
-        }
-        return targetElement.getBoundingClientRect();
-    },
-
-    /**
-     * Build badge content with element metadata
-     */
-    buildBadgeContent(element) {
-        const data = blockDataMap.get(element) || {
-            template: '',
-            block: '',
-            module: '',
-            viewModel: '',
-            parent: '',
-            alias: '',
-            override: '0'
-        };
-
-        // Convert override string to boolean and add aliases for compatibility
-        data.isOverride = data.override === '1';
-        data.blockClass = data.block;
-        data.parentBlock = data.parent;
-        data.blockAlias = data.alias;
-
-        // Clear badge
-        this.infoBadge.innerHTML = '';
-
-        // Add close button if pinned
-        if (this.isPinned) {
-            this.infoBadge.appendChild(this.createCloseButton());
-        }
-
-        // Create tab system
-        this.createTabSystem(data, element);
-
-        // Branding footer
-        this.infoBadge.appendChild(this.createBrandingFooter());
-    },
-
-    /**
-     * Create close button for pinned badge
-     */
-    createCloseButton() {
-        const closeBtn = document.createElement('button');
-        closeBtn.type = 'button';
-        closeBtn.className = 'mageforge-inspector-close';
-        closeBtn.innerHTML = '✕';
-        closeBtn.title = 'Close (or click outside)';
-
-        closeBtn.onclick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.unpinBadge();
-        };
-
-        return closeBtn;
-    },
-
-    /**
-     * Position badge relative to element
-     */
-    positionBadge(rect) {
-        this.infoBadge.style.display = 'block';
-
-        const badgeRect = this.infoBadge.getBoundingClientRect();
-
-        // Calculate initial position
-        let x = rect.left + window.scrollX;
-        let y = rect.bottom + window.scrollY;
-
-        // Validate coordinates
-        if (!isFinite(x) || !isFinite(y) || x < 0 || y < 0) {
-            x = 10;
-            y = 10;
-        }
-
-        // Constrain horizontally
-        x = this.constrainHorizontally(x, badgeRect.width);
-
-        // Check vertical space and adjust if needed
-        const showAbove = this.shouldShowAbove(y, badgeRect.height);
-        if (showAbove) {
-            y = rect.top + window.scrollY - badgeRect.height;
-            if (y < window.scrollY + 10) {
-                y = window.scrollY + 10;
-            }
-        }
-
-        // Update badge styling based on position
-        this.updateBadgePlacement(showAbove);
-
-        // Apply position
-        this.infoBadge.style.left = `${x}px`;
-        this.infoBadge.style.top = `${y}px`;
-    },
-
-    /**
-     * Constrain x position horizontally within viewport
-     */
-    constrainHorizontally(x, badgeWidth) {
-        const maxX = window.innerWidth + window.scrollX - badgeWidth - 10;
-        const minX = window.scrollX + 10;
-
-        if (x > maxX) return maxX;
-        if (x < minX) return minX;
-        return x;
-    },
-
-    /**
-     * Check if badge should be shown above element
-     */
-    shouldShowAbove(y, badgeHeight) {
-        return y + badgeHeight > window.innerHeight + window.scrollY;
-    },
-
-    /**
-     * Update badge styling based on placement (above/below)
-     */
-    updateBadgePlacement(showAbove) {
-        const arrow = this.infoBadge.querySelector('.mageforge-inspector-arrow');
-
-        if (showAbove) {
-            // Badge above element
-            this.infoBadge.style.borderRadius = '12px 12px 0 0';
-            if (arrow) {
-                arrow.style.top = 'auto';
-                arrow.style.bottom = '-8px';
-                arrow.style.borderBottom = 'none';
-                arrow.style.borderTop = '8px solid rgba(15, 23, 42, 0.98)';
-            }
-        } else {
-            // Badge below element
-            this.infoBadge.style.borderRadius = '0 0 12px 12px';
-            if (arrow) {
-                arrow.style.top = '-8px';
-                arrow.style.bottom = 'auto';
-                arrow.style.borderTop = 'none';
-                arrow.style.borderBottom = '8px solid rgba(15, 23, 42, 0.98)';
-            }
-        }
-    },
-
-    /**
-     * Create info section with clickable text to copy
-     */
-    createInfoSection(title, text, titleColor) {
-        const container = document.createElement('div');
-        container.className = 'mageforge-info-section';
-
-        const titleDiv = document.createElement('div');
-        // Map common hex colors to classes, fallback to class
-        const colorMap = {
-            '#60a5fa': 'mageforge-text-blue',
-            '#a78bfa': 'mageforge-text-purple',
-            '#34d399': 'mageforge-text-green',
-            '#fb923c': 'mageforge-text-orange',
-            '#22d3ee': 'mageforge-text-cyan',
-            '#fbbf24': 'mageforge-text-yellow',
-            '#ef4444': 'mageforge-text-red',
-            '#f59e0b': 'mageforge-text-amber',
-            '#94a3b8': 'mageforge-text-gray'
-        };
-        const colorClass = colorMap[titleColor] || 'mageforge-text-gray';
-
-        titleDiv.className = `mageforge-info-title ${colorClass}`;
-        titleDiv.textContent = title;
-
-        // Handle custom color if not in map (e.g. from dynamic score)
-        if (!colorMap[titleColor] && titleColor && titleColor.startsWith('#')) {
-            titleDiv.style.color = titleColor;
-        }
-
-        const textSpan = document.createElement('span');
-        textSpan.className = 'mageforge-info-value';
-        textSpan.textContent = text;
-        textSpan.title = 'Click to copy';
-
-        const originalText = text;
-
-        // Click to copy
-        textSpan.onclick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (navigator.clipboard && navigator.clipboard.writeText) {
-                navigator.clipboard.writeText(originalText).then(() => {
-                    textSpan.textContent = 'copied!';
-                    textSpan.classList.add('copied');
-                    setTimeout(() => {
-                        textSpan.textContent = originalText;
-                        textSpan.classList.remove('copied');
-                    }, 1500);
-                }).catch(() => {
-                    this.legacyCopy(originalText, textSpan);
-                });
-            } else {
-                this.legacyCopy(originalText, textSpan);
-            }
-        };
-
-        container.appendChild(titleDiv);
-        container.appendChild(textSpan);
-
-        return container;
-    },
-
-    /**
-     * Legacy copy method
-     */
-    legacyCopy(text, element) {
-        const textarea = document.createElement('textarea');
-        textarea.value = text;
-        textarea.style.position = 'fixed';
-        textarea.style.left = '-999999px';
-        document.body.appendChild(textarea);
-        textarea.select();
-
-        const originalText = text;
-
-        try {
-            const success = document.execCommand('copy');
-            if (success) {
-                element.textContent = 'copied!';
-                element.classList.add('copied');
-                setTimeout(() => {
-                    element.textContent = originalText;
-                    element.classList.remove('copied');
-                }, 1500);
-            } else {
-                throw new Error('Copy failed');
-            }
-        } catch (err) {
-            element.textContent = 'failed';
-            element.classList.add('copy-failed');
+  /**
+   * Create highlight overlay box
+   */
+  createHighlightBox() {
+    this.highlightBox = document.createElement("div");
+    this.highlightBox.className =
+      "mageforge-inspector mageforge-inspector-highlight";
+
+    // Propagate theme from root element to injected body element
+    if (this.$el && this.$el.hasAttribute("data-theme")) {
+      this.highlightBox.setAttribute(
+        "data-theme",
+        this.$el.getAttribute("data-theme"),
+      );
+    }
+
+    this.highlightBox.style.display = "none";
+
+    document.body.appendChild(this.highlightBox);
+  },
+
+  /**
+   * Create info badge overlay
+   */
+  createInfoBadge() {
+    this.infoBadge = document.createElement("div");
+    this.infoBadge.className =
+      "mageforge-inspector mageforge-inspector-info-badge";
+
+    // Propagate theme from root element to injected body element
+    if (this.$el && this.$el.hasAttribute("data-theme")) {
+      this.infoBadge.setAttribute(
+        "data-theme",
+        this.$el.getAttribute("data-theme"),
+      );
+    }
+
+    this.infoBadge.style.display = "none";
+
+    // Create arrow element
+    const arrow = document.createElement("div");
+    arrow.className = "mageforge-inspector-arrow";
+    this.infoBadge.appendChild(arrow);
+
+    document.body.appendChild(this.infoBadge);
+  },
+
+  /**
+   * Notify the toolbar about the current inspector open/closed state
+   */
+  updateFloatingButton() {
+    window.dispatchEvent(
+      new CustomEvent("mageforge:toolbar:inspector-state", {
+        detail: { active: this.isOpen },
+      }),
+    );
+  },
+
+  /**
+   * Show highlight overlay on element
+   */
+  showHighlight(element) {
+    // If element has display:contents, use first child for dimensions
+    let targetElement = element;
+    const style = window.getComputedStyle(element);
+
+    if (style.display === "contents" && element.children.length > 0) {
+      targetElement = element.children[0];
+    }
+
+    const rect = targetElement.getBoundingClientRect();
+
+    // Only show if element has dimensions
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+
+    this.highlightBox.style.display = "block";
+    this.highlightBox.style.top = `${rect.top + window.scrollY}px`;
+    this.highlightBox.style.left = `${rect.left + window.scrollX}px`;
+    this.highlightBox.style.width = `${rect.width}px`;
+    this.highlightBox.style.height = `${rect.height}px`;
+  },
+
+  /**
+   * Hide highlight overlay
+   */
+  hideHighlight() {
+    if (this.highlightBox) {
+      this.highlightBox.style.display = "none";
+    }
+    if (this.infoBadge) {
+      this.infoBadge.style.display = "none";
+    }
+  },
+
+  /**
+   * Show info badge with element details
+   */
+  showInfoBadge(element) {
+    const rect = this.getElementRect(element);
+    const elementId = element.getAttribute("data-mageforge-id");
+
+    // Only rebuild badge content if it's a different element.
+    // For PageBuilder fallback elements that lack data-mageforge-id, use element
+    // reference comparison to avoid rebuilding on every hover/click.
+    const isSame =
+      elementId !== null
+        ? this.infoBadge.dataset.currentElement === elementId
+        : this.infoBadge._currentElement === element;
+
+    if (!isSame) {
+      this.buildBadgeContent(element);
+      this.infoBadge.dataset.currentElement = elementId ?? "";
+      this.infoBadge._currentElement = element;
+    }
+
+    this.positionBadge(rect);
+  },
+
+  /**
+   * Get element rectangle (handles display:contents)
+   */
+  getElementRect(element) {
+    let targetElement = element;
+    const style = window.getComputedStyle(element);
+    if (style.display === "contents" && element.children.length > 0) {
+      targetElement = element.children[0];
+    }
+    return targetElement.getBoundingClientRect();
+  },
+
+  /**
+   * Build badge content with element metadata
+   */
+  buildBadgeContent(element) {
+    const data = blockDataMap.get(element) || {
+      template: "",
+      block: "",
+      module: "",
+      viewModel: "",
+      parent: "",
+      alias: "",
+      override: "0",
+    };
+
+    // Convert override string to boolean and add aliases for compatibility
+    data.isOverride = data.override === "1";
+    data.blockClass = data.block;
+    data.parentBlock = data.parent;
+    data.blockAlias = data.alias;
+
+    // Clear badge
+    this.infoBadge.innerHTML = "";
+
+    // Add close button if pinned
+    if (this.isPinned) {
+      this.infoBadge.appendChild(this.createCloseButton());
+    }
+
+    // Create tab system
+    this.createTabSystem(data, element);
+
+    // Branding footer
+    this.infoBadge.appendChild(this.createBrandingFooter());
+  },
+
+  /**
+   * Create close button for pinned badge
+   */
+  createCloseButton() {
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "mageforge-inspector-close";
+    closeBtn.innerHTML = "✕";
+    closeBtn.title = "Close (or click outside)";
+
+    closeBtn.onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.unpinBadge();
+    };
+
+    return closeBtn;
+  },
+
+  /**
+   * Position badge relative to element
+   */
+  positionBadge(rect) {
+    this.infoBadge.style.display = "block";
+
+    const badgeRect = this.infoBadge.getBoundingClientRect();
+
+    // Calculate initial position
+    let x = rect.left + window.scrollX;
+    let y = rect.bottom + window.scrollY;
+
+    // Validate coordinates
+    if (!isFinite(x) || !isFinite(y) || x < 0 || y < 0) {
+      x = 10;
+      y = 10;
+    }
+
+    // Constrain horizontally
+    x = this.constrainHorizontally(x, badgeRect.width);
+
+    // Check vertical space and adjust if needed
+    const showAbove = this.shouldShowAbove(y, badgeRect.height);
+    if (showAbove) {
+      y = rect.top + window.scrollY - badgeRect.height;
+      if (y < window.scrollY + 10) {
+        y = window.scrollY + 10;
+      }
+    }
+
+    // Update badge styling based on position
+    this.updateBadgePlacement(showAbove);
+
+    // Apply position
+    this.infoBadge.style.left = `${x}px`;
+    this.infoBadge.style.top = `${y}px`;
+  },
+
+  /**
+   * Constrain x position horizontally within viewport
+   */
+  constrainHorizontally(x, badgeWidth) {
+    const maxX = window.innerWidth + window.scrollX - badgeWidth - 10;
+    const minX = window.scrollX + 10;
+
+    if (x > maxX) return maxX;
+    if (x < minX) return minX;
+    return x;
+  },
+
+  /**
+   * Check if badge should be shown above element
+   */
+  shouldShowAbove(y, badgeHeight) {
+    return y + badgeHeight > window.innerHeight + window.scrollY;
+  },
+
+  /**
+   * Update badge styling based on placement (above/below)
+   */
+  updateBadgePlacement(showAbove) {
+    const arrow = this.infoBadge.querySelector(".mageforge-inspector-arrow");
+
+    if (showAbove) {
+      // Badge above element
+      this.infoBadge.style.borderRadius = "12px 12px 0 0";
+      if (arrow) {
+        arrow.style.top = "auto";
+        arrow.style.bottom = "-8px";
+        arrow.style.borderBottom = "none";
+        arrow.style.borderTop = "8px solid rgba(15, 23, 42, 0.98)";
+      }
+    } else {
+      // Badge below element
+      this.infoBadge.style.borderRadius = "0 0 12px 12px";
+      if (arrow) {
+        arrow.style.top = "-8px";
+        arrow.style.bottom = "auto";
+        arrow.style.borderTop = "none";
+        arrow.style.borderBottom = "8px solid rgba(15, 23, 42, 0.98)";
+      }
+    }
+  },
+
+  /**
+   * Create info section with clickable text to copy
+   */
+  createInfoSection(title, text, titleColor) {
+    const container = document.createElement("div");
+    container.className = "mageforge-info-section";
+
+    const titleDiv = document.createElement("div");
+    // Map common hex colors to classes, fallback to class
+    const colorMap = {
+      "#60a5fa": "mageforge-text-blue",
+      "#a78bfa": "mageforge-text-purple",
+      "#34d399": "mageforge-text-green",
+      "#fb923c": "mageforge-text-orange",
+      "#22d3ee": "mageforge-text-cyan",
+      "#fbbf24": "mageforge-text-yellow",
+      "#ef4444": "mageforge-text-red",
+      "#f59e0b": "mageforge-text-amber",
+      "#94a3b8": "mageforge-text-gray",
+    };
+    const colorClass = colorMap[titleColor] || "mageforge-text-gray";
+
+    titleDiv.className = `mageforge-info-title ${colorClass}`;
+    titleDiv.textContent = title;
+
+    // Handle custom color if not in map (e.g. from dynamic score)
+    if (!colorMap[titleColor] && titleColor && titleColor.startsWith("#")) {
+      titleDiv.style.color = titleColor;
+    }
+
+    const textSpan = document.createElement("span");
+    textSpan.className = "mageforge-info-value";
+    textSpan.textContent = text;
+    textSpan.title = "Click to copy";
+
+    const originalText = text;
+
+    // Click to copy
+    textSpan.onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard
+          .writeText(originalText)
+          .then(() => {
+            textSpan.textContent = "copied!";
+            textSpan.classList.add("copied");
             setTimeout(() => {
-                element.textContent = originalText;
-                element.classList.remove('copy-failed');
+              textSpan.textContent = originalText;
+              textSpan.classList.remove("copied");
             }, 1500);
-        }
-
-        document.body.removeChild(textarea);
-    },
-
-    /**
-     * Create branding footer
-     */
-    createBrandingFooter() {
-        const brandingDiv = document.createElement('div');
-        brandingDiv.className = 'mageforge-branding-footer';
-
-        const madeWithDiv = document.createElement('div');
-        madeWithDiv.innerHTML = 'Made with <span style="color: #ff6b6b; font-size: 12px;">🧡</span> by <span style="color: #60a5fa; font-weight: 600;">MageForge</span>';
-        brandingDiv.appendChild(madeWithDiv);
-
-        const featureLinkDiv = document.createElement('div');
-        featureLinkDiv.className = 'mageforge-feature-link-container';
-
-        const featureLink = document.createElement('a');
-        featureLink.href = 'https://github.com/OpenForgeProject/mageforge/issues/new?template=feature_request.md';
-        featureLink.target = '_blank';
-        featureLink.rel = 'noopener noreferrer';
-        featureLink.innerHTML = 'You miss a <span style="text-decoration: underline;">Feature?</span>';
-        featureLink.className = 'mageforge-feature-link';
-
-        featureLinkDiv.appendChild(featureLink);
-        brandingDiv.appendChild(featureLinkDiv);
-
-        return brandingDiv;
-    },
+          })
+          .catch(() => {
+            this.legacyCopy(originalText, textSpan);
+          });
+      } else {
+        this.legacyCopy(originalText, textSpan);
+      }
+    };
+
+    container.appendChild(titleDiv);
+    container.appendChild(textSpan);
+
+    return container;
+  },
+
+  /**
+   * Legacy copy method
+   */
+  legacyCopy(text, element) {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.left = "-999999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+
+    const originalText = text;
+
+    try {
+      const success = document.execCommand("copy");
+      if (success) {
+        element.textContent = "copied!";
+        element.classList.add("copied");
+        setTimeout(() => {
+          element.textContent = originalText;
+          element.classList.remove("copied");
+        }, 1500);
+      } else {
+        throw new Error("Copy failed");
+      }
+    } catch (err) {
+      element.textContent = "failed";
+      element.classList.add("copy-failed");
+      setTimeout(() => {
+        element.textContent = originalText;
+        element.classList.remove("copy-failed");
+      }, 1500);
+    }
+
+    document.body.removeChild(textarea);
+  },
+
+  /**
+   * Create branding footer
+   */
+  createBrandingFooter() {
+    const brandingDiv = document.createElement("div");
+    brandingDiv.className = "mageforge-branding-footer";
+
+    const madeWithDiv = document.createElement("div");
+    madeWithDiv.innerHTML =
+      'Made with <span style="color: #ff6b6b; font-size: 12px;">🧡</span> by <span style="color: #60a5fa; font-weight: 600;">MageForge</span>';
+    brandingDiv.appendChild(madeWithDiv);
+
+    const featureLinkDiv = document.createElement("div");
+    featureLinkDiv.className = "mageforge-feature-link-container";
+
+    const featureLink = document.createElement("a");
+    featureLink.href =
+      "https://github.com/OpenForgeProject/mageforge/issues/new?template=feature_request.md";
+    featureLink.target = "_blank";
+    featureLink.rel = "noopener noreferrer";
+    featureLink.innerHTML =
+      'You miss a <span style="text-decoration: underline;">Feature?</span>';
+    featureLink.className = "mageforge-feature-link";
+
+    featureLinkDiv.appendChild(featureLink);
+    brandingDiv.appendChild(featureLinkDiv);
+
+    return brandingDiv;
+  },
 };
diff --git a/src/view/frontend/web/js/inspector/vitals.js b/src/view/frontend/web/js/inspector/vitals.js
index f2c1283e..67f22442 100644
--- a/src/view/frontend/web/js/inspector/vitals.js
+++ b/src/view/frontend/web/js/inspector/vitals.js
@@ -3,275 +3,290 @@
  */
 
 export const vitalsMethods = {
-    /**
-     * Initialize Web Vitals tracking
-     */
-    initWebVitalsTracking() {
-        // Check if PerformanceObserver is supported
-        if (!('PerformanceObserver' in window)) {
-            console.warn('[MageForge Inspector] PerformanceObserver not supported');
-            return;
-        }
-
-        try {
-            // Largest Contentful Paint (LCP)
-            const lcpObserver = new PerformanceObserver((list) => {
-                const entries = list.getEntries();
-                const lastEntry = entries[entries.length - 1];
-                this.webVitals.lcp = {
-                    element: lastEntry.element,
-                    value: lastEntry.renderTime || lastEntry.loadTime,
-                    time: lastEntry.startTime
-                };
-            });
-            lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
-            this.performanceObservers.push(lcpObserver);
-
-            // Cumulative Layout Shift (CLS)
-            const clsObserver = new PerformanceObserver((list) => {
-                for (const entry of list.getEntries()) {
-                    if (!entry.hadRecentInput) {
-                        this.webVitals.cls.push({
-                            value: entry.value,
-                            time: entry.startTime,
-                            sources: entry.sources || []
-                        });
-                    }
-                }
-            });
-            clsObserver.observe({ type: 'layout-shift', buffered: true });
-            this.performanceObservers.push(clsObserver);
-
-            // First Contentful Paint (FCP)
-            const paintObserver = new PerformanceObserver((list) => {
-                for (const entry of list.getEntries()) {
-                    if (entry.name === 'first-contentful-paint') {
-                        this.webVitals.fcp = {
-                            value: entry.startTime,
-                            time: entry.startTime
-                        };
-                    }
-                }
-            });
-            paintObserver.observe({ type: 'paint', buffered: true });
-            this.performanceObservers.push(paintObserver);
+  /**
+   * Initialize Web Vitals tracking
+   */
+  initWebVitalsTracking() {
+    // Check if PerformanceObserver is supported
+    if (!("PerformanceObserver" in window)) {
+      console.warn("[MageForge Inspector] PerformanceObserver not supported");
+      return;
+    }
 
-            // Long Tasks (>50ms)
-            const longTaskObserver = new PerformanceObserver((list) => {
-                for (const entry of list.getEntries()) {
-                    this.longTasks.push({
-                        duration: entry.duration,
-                        startTime: entry.startTime,
-                        attribution: entry.attribution || []
-                    });
-                }
-            });
-            longTaskObserver.observe({ type: 'longtask', buffered: true });
-            this.performanceObservers.push(longTaskObserver);
+    try {
+      // Largest Contentful Paint (LCP)
+      const lcpObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        const lastEntry = entries[entries.length - 1];
+        this.webVitals.lcp = {
+          element: lastEntry.element,
+          value: lastEntry.renderTime || lastEntry.loadTime,
+          time: lastEntry.startTime,
+        };
+      });
+      lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
+      this.performanceObservers.push(lcpObserver);
 
-            // Element Timing API - for elements with elementtiming attribute
-            const elementTimingObserver = new PerformanceObserver((list) => {
-                for (const entry of list.getEntries()) {
-                    this.webVitals.elementTimings.push({
-                        element: entry.element,
-                        identifier: entry.identifier,
-                        renderTime: entry.renderTime,
-                        loadTime: entry.loadTime,
-                        startTime: entry.startTime
-                    });
-                }
+      // Cumulative Layout Shift (CLS)
+      const clsObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (!entry.hadRecentInput) {
+            this.webVitals.cls.push({
+              value: entry.value,
+              time: entry.startTime,
+              sources: entry.sources || [],
             });
-            elementTimingObserver.observe({ type: 'element', buffered: true });
-            this.performanceObservers.push(elementTimingObserver);
-        } catch (e) {
-            console.warn('[MageForge Inspector] Performance tracking failed:', e);
+          }
         }
-    },
+      });
+      clsObserver.observe({ type: "layout-shift", buffered: true });
+      this.performanceObservers.push(clsObserver);
 
-    /**
-     * Cache page timing metrics
-     */
-    cachePageTimings() {
-        // Try modern Navigation Timing API first
-        const navEntries = performance.getEntriesByType('navigation');
-        if (navEntries && navEntries.length > 0) {
-            const nav = navEntries[0];
-            this.pageTimings = {
-                domContentLoaded: Math.round(nav.domContentLoadedEventEnd - nav.startTime),
-                loadComplete: Math.round(nav.loadEventEnd - nav.fetchStart)
-            };
-        } else if (performance.timing) {
-            // Fallback to older API
-            const timing = performance.timing;
-            this.pageTimings = {
-                domContentLoaded: Math.round(timing.domContentLoadedEventEnd - timing.navigationStart),
-                loadComplete: Math.round(timing.loadEventEnd - timing.navigationStart)
+      // First Contentful Paint (FCP)
+      const paintObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.name === "first-contentful-paint") {
+            this.webVitals.fcp = {
+              value: entry.startTime,
+              time: entry.startTime,
             };
+          }
+        }
+      });
+      paintObserver.observe({ type: "paint", buffered: true });
+      this.performanceObservers.push(paintObserver);
+
+      // Long Tasks (>50ms)
+      const longTaskObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          this.longTasks.push({
+            duration: entry.duration,
+            startTime: entry.startTime,
+            attribution: entry.attribution || [],
+          });
         }
-    },
+      });
+      longTaskObserver.observe({ type: "longtask", buffered: true });
+      this.performanceObservers.push(longTaskObserver);
 
-    /**
-     * Get CLS (Cumulative Layout Shift) for specific element
-     *
-     * @param {HTMLElement} element
-     * @return {number}
-     */
-    getElementCLS(element) {
-        if (!this.webVitals.cls || this.webVitals.cls.length === 0) {
-            return 0;
+      // Element Timing API - for elements with elementtiming attribute
+      const elementTimingObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          this.webVitals.elementTimings.push({
+            element: entry.element,
+            identifier: entry.identifier,
+            renderTime: entry.renderTime,
+            loadTime: entry.loadTime,
+            startTime: entry.startTime,
+          });
         }
+      });
+      elementTimingObserver.observe({ type: "element", buffered: true });
+      this.performanceObservers.push(elementTimingObserver);
+    } catch (e) {
+      console.warn("[MageForge Inspector] Performance tracking failed:", e);
+    }
+  },
 
-        let totalCLS = 0;
-        this.webVitals.cls.forEach(shift => {
-            if (shift.sources) {
-                shift.sources.forEach(source => {
-                    if (source.node && (source.node === element || element.contains(source.node) || source.node.contains(element))) {
-                        totalCLS += shift.value;
-                    }
-                });
-            }
+  /**
+   * Cache page timing metrics
+   */
+  cachePageTimings() {
+    // Try modern Navigation Timing API first
+    const navEntries = performance.getEntriesByType("navigation");
+    if (navEntries && navEntries.length > 0) {
+      const nav = navEntries[0];
+      this.pageTimings = {
+        domContentLoaded: Math.round(
+          nav.domContentLoadedEventEnd - nav.startTime,
+        ),
+        loadComplete: Math.round(nav.loadEventEnd - nav.fetchStart),
+      };
+    } else if (performance.timing) {
+      // Fallback to older API
+      const timing = performance.timing;
+      this.pageTimings = {
+        domContentLoaded: Math.round(
+          timing.domContentLoadedEventEnd - timing.navigationStart,
+        ),
+        loadComplete: Math.round(timing.loadEventEnd - timing.navigationStart),
+      };
+    }
+  },
+
+  /**
+   * Get CLS (Cumulative Layout Shift) for specific element
+   *
+   * @param {HTMLElement} element
+   * @return {number}
+   */
+  getElementCLS(element) {
+    if (!this.webVitals.cls || this.webVitals.cls.length === 0) {
+      return 0;
+    }
+
+    let totalCLS = 0;
+    this.webVitals.cls.forEach((shift) => {
+      if (shift.sources) {
+        shift.sources.forEach((source) => {
+          if (
+            source.node &&
+            (source.node === element ||
+              element.contains(source.node) ||
+              source.node.contains(element))
+          ) {
+            totalCLS += shift.value;
+          }
         });
+      }
+    });
 
-        return totalCLS;
-    },
+    return totalCLS;
+  },
 
-    /**
-     * Get Element Timing for specific element
-     *
-     * @param {HTMLElement} element
-     * @return {object|null}
-     */
-    getElementTiming(element) {
-        if (!this.webVitals.elementTimings || this.webVitals.elementTimings.length === 0) {
-            return null;
-        }
+  /**
+   * Get Element Timing for specific element
+   *
+   * @param {HTMLElement} element
+   * @return {object|null}
+   */
+  getElementTiming(element) {
+    if (
+      !this.webVitals.elementTimings ||
+      this.webVitals.elementTimings.length === 0
+    ) {
+      return null;
+    }
 
-        // Check if this element or any child has element timing
-        const timing = this.webVitals.elementTimings.find(et =>
-            et.element === element || element.contains(et.element)
-        );
+    // Check if this element or any child has element timing
+    const timing = this.webVitals.elementTimings.find(
+      (et) => et.element === element || element.contains(et.element),
+    );
 
-        return timing || null;
-    },
+    return timing || null;
+  },
 
-    /**
-     * Get resources loaded by element (images, scripts, stylesheets)
-     *
-     * @param {HTMLElement} element
-     * @return {{count: number, size: number, byType: object, items: array}}
-     */
-    getElementResources(element) {
-        const result = {
-            count: 0,
-            size: 0,
-            byType: { script: 0, css: 0, img: 0, font: 0, other: 0 },
-            items: []
-        };
+  /**
+   * Get resources loaded by element (images, scripts, stylesheets)
+   *
+   * @param {HTMLElement} element
+   * @return {{count: number, size: number, byType: object, items: array}}
+   */
+  getElementResources(element) {
+    const result = {
+      count: 0,
+      size: 0,
+      byType: { script: 0, css: 0, img: 0, font: 0, other: 0 },
+      items: [],
+    };
 
-        // Get all resource URLs from element and children
-        const resourceUrls = new Set();
+    // Get all resource URLs from element and children
+    const resourceUrls = new Set();
 
-        // Images
-        const images = [element, ...element.querySelectorAll('img')];
-        images.forEach(img => {
-            if (img.tagName === 'IMG' && img.src) {
-                resourceUrls.add(img.src);
-            }
-        });
+    // Images
+    const images = [element, ...element.querySelectorAll("img")];
+    images.forEach((img) => {
+      if (img.tagName === "IMG" && img.src) {
+        resourceUrls.add(img.src);
+      }
+    });
 
-        // Scripts
-        const scripts = element.querySelectorAll('script[src]');
-        scripts.forEach(script => {
-            if (script.src) {
-                resourceUrls.add(script.src);
-            }
-        });
+    // Scripts
+    const scripts = element.querySelectorAll("script[src]");
+    scripts.forEach((script) => {
+      if (script.src) {
+        resourceUrls.add(script.src);
+      }
+    });
 
-        // Stylesheets
-        const links = element.querySelectorAll('link[rel="stylesheet"]');
-        links.forEach(link => {
-            if (link.href) {
-                resourceUrls.add(link.href);
-            }
-        });
+    // Stylesheets
+    const links = element.querySelectorAll('link[rel="stylesheet"]');
+    links.forEach((link) => {
+      if (link.href) {
+        resourceUrls.add(link.href);
+      }
+    });
 
-        // Videos
-        const videos = element.querySelectorAll('video[src], source[src]');
-        videos.forEach(video => {
-            if (video.src) {
-                resourceUrls.add(video.src);
-            }
-        });
+    // Videos
+    const videos = element.querySelectorAll("video[src], source[src]");
+    videos.forEach((video) => {
+      if (video.src) {
+        resourceUrls.add(video.src);
+      }
+    });
 
-        // Get performance entries for these resources
-        const allResources = performance.getEntriesByType('resource');
-        resourceUrls.forEach(url => {
-            const resource = allResources.find(r => r.name === url);
-            if (resource) {
-                result.count++;
-                result.size += resource.transferSize || 0;
-                result.items.push(resource);
+    // Get performance entries for these resources
+    const allResources = performance.getEntriesByType("resource");
+    resourceUrls.forEach((url) => {
+      const resource = allResources.find((r) => r.name === url);
+      if (resource) {
+        result.count++;
+        result.size += resource.transferSize || 0;
+        result.items.push(resource);
 
-                // Categorize
-                if (resource.name.match(/\.(js|mjs)$/)) result.byType.script++;
-                else if (resource.name.match(/\.css(\?.*)?$/)) result.byType.css++;
-                else if (resource.name.match(/\.(jpg|jpeg|png|gif|webp|svg|avif)$/i)) result.byType.img++;
-                else if (resource.name.match(/\.(woff2?|ttf|otf|eot)$/i)) result.byType.font++;
-                else result.byType.other++;
-            }
-        });
+        // Categorize
+        if (resource.name.match(/\.(js|mjs)$/)) result.byType.script++;
+        else if (resource.name.match(/\.css(\?.*)?$/)) result.byType.css++;
+        else if (resource.name.match(/\.(jpg|jpeg|png|gif|webp|svg|avif)$/i))
+          result.byType.img++;
+        else if (resource.name.match(/\.(woff2?|ttf|otf|eot)$/i))
+          result.byType.font++;
+        else result.byType.other++;
+      }
+    });
 
-        return result;
-    },
+    return result;
+  },
 
-    /**
-     * Get color for render time based on thresholds
-     *
-     * @param {number} renderTimeMs
-     * @return {string} Color hex code
-     */
-    getRenderTimeColor(renderTimeMs) {
-        if (renderTimeMs < this.PERF_RENDER_TIME_GOOD) {
-            return '#34d399'; // Green
-        } else if (renderTimeMs < this.PERF_RENDER_TIME_WARNING) {
-            return '#f59e0b'; // Orange/Yellow
-        } else {
-            return '#ef4444'; // Red
-        }
-    },
+  /**
+   * Get color for render time based on thresholds
+   *
+   * @param {number} renderTimeMs
+   * @return {string} Color hex code
+   */
+  getRenderTimeColor(renderTimeMs) {
+    if (renderTimeMs < this.PERF_RENDER_TIME_GOOD) {
+      return "#34d399"; // Green
+    } else if (renderTimeMs < this.PERF_RENDER_TIME_WARNING) {
+      return "#f59e0b"; // Orange/Yellow
+    } else {
+      return "#ef4444"; // Red
+    }
+  },
 
-    /**
-     * Get block metadata with performance data for element
-     *
-     * @param {HTMLElement} element
-     * @return {Object|null} Block data with performance and cache info
-     */
-    getBlockMetaData(element) {
-        const block = this.findBlockForElement(element);
-        if (!block || !block.data) {
-            return null;
-        }
+  /**
+   * Get block metadata with performance data for element
+   *
+   * @param {HTMLElement} element
+   * @return {Object|null} Block data with performance and cache info
+   */
+  getBlockMetaData(element) {
+    const block = this.findBlockForElement(element);
+    if (!block || !block.data) {
+      return null;
+    }
 
-        const data = block.data;
+    const data = block.data;
 
-        // Type validation for performance data
-        const hasPerformanceData =
-            data.performance &&
-            typeof data.performance.renderTime === 'string' &&
-            typeof data.performance.timestamp === 'number';
+    // Type validation for performance data
+    const hasPerformanceData =
+      data.performance &&
+      typeof data.performance.renderTime === "string" &&
+      typeof data.performance.timestamp === "number";
 
-        // Type validation for cache data
-        const hasCacheData =
-            data.cache &&
-            typeof data.cache.cacheable === 'boolean' &&
-            (data.cache.lifetime === null || typeof data.cache.lifetime === 'number') &&
-            typeof data.cache.key === 'string' &&
-            Array.isArray(data.cache.tags);
+    // Type validation for cache data
+    const hasCacheData =
+      data.cache &&
+      typeof data.cache.cacheable === "boolean" &&
+      (data.cache.lifetime === null ||
+        typeof data.cache.lifetime === "number") &&
+      typeof data.cache.key === "string" &&
+      Array.isArray(data.cache.tags);
 
-        if (!hasPerformanceData || !hasCacheData) {
-            return null;
-        }
+    if (!hasPerformanceData || !hasCacheData) {
+      return null;
+    }
 
-        return data;
-    },
+    return data;
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar.js b/src/view/frontend/web/js/toolbar.js
index b857a636..5a5dc02b 100644
--- a/src/view/frontend/web/js/toolbar.js
+++ b/src/view/frontend/web/js/toolbar.js
@@ -2,75 +2,81 @@
  * MageForge Toolbar - Standalone audit toolbar.
  */
 
-import { uiMethods } from './toolbar/ui.js';
-import { auditMethods } from './toolbar/audits.js';
+import { uiMethods } from "./toolbar/ui.js";
+import { auditMethods } from "./toolbar/audits.js";
 
 function _registerMageforgeToolbar() {
-    Alpine.data('mageforgeToolbar', () => ({
-        // ====================================================================
-        // State
-        // ====================================================================
-        menuOpen: false,
+  Alpine.data("mageforgeToolbar", () => ({
+    // ====================================================================
+    // State
+    // ====================================================================
+    menuOpen: false,
 
-        /** @type {Set<string>} Keys of currently active audits */
-        activeAudits: new Set(),
+    /** @type {Set<string>} Keys of currently active audits */
+    activeAudits: new Set(),
 
-        /** @type {Set<string>} Keys of currently collapsed groups */
-        collapsedGroups: new Set(),
+    /** @type {Set<string>} Keys of currently collapsed groups */
+    collapsedGroups: new Set(),
 
-        /** @type {HTMLDivElement|null} */
-        container: null,
+    /** @type {HTMLDivElement|null} */
+    container: null,
 
-        /** @type {HTMLDivElement|null} */
-        burgerButton: null,
+    /** @type {HTMLDivElement|null} */
+    burgerButton: null,
 
-        /** @type {HTMLDivElement|null} */
-        menu: null,
+    /** @type {HTMLDivElement|null} */
+    menu: null,
 
-        /** @type {HTMLDivElement|null} */
-        runAllButton: null,
+    /** @type {HTMLDivElement|null} */
+    runAllButton: null,
 
-        /** @type {HTMLDivElement|null} */
-        resetButton: null,
+    /** @type {HTMLDivElement|null} */
+    resetButton: null,
 
-        // ====================================================================
-        // Lifecycle
-        // ====================================================================
+    // ====================================================================
+    // Lifecycle
+    // ====================================================================
 
-        init() {
-            try {
-                const saved = localStorage.getItem('mageforge-toolbar-collapsed-groups');
-                if (saved) {
-                    try { JSON.parse(saved).forEach(key => this.collapsedGroups.add(key)); } catch (_) {}
-                }
-            } catch (_) {}
-            this.createToolbar();
-        },
+    init() {
+      try {
+        const saved = localStorage.getItem(
+          "mageforge-toolbar-collapsed-groups",
+        );
+        if (saved) {
+          try {
+            JSON.parse(saved).forEach((key) => this.collapsedGroups.add(key));
+          } catch (_) {}
+        }
+      } catch (_) {}
+      this.createToolbar();
+    },
 
-        destroy() {
-            this.deactivateAllAudits();
-            this.destroyToolbar();
-        },
+    destroy() {
+      this.deactivateAllAudits();
+      this.destroyToolbar();
+    },
 
-        // ====================================================================
-        // Mixins
-        // ====================================================================
+    // ====================================================================
+    // Mixins
+    // ====================================================================
 
-        ...uiMethods,
-        ...auditMethods,
-    }));
+    ...uiMethods,
+    ...auditMethods,
+  }));
 }
 
 // re-initialise any [x-data="mageforgeToolbar"] elements that Alpine skipped
 // because the component was not yet registered at that point.
 // Otherwise, register on alpine:init which fires before Alpine processes the DOM.
-if (typeof Alpine !== 'undefined') {
-    _registerMageforgeToolbar();
-    document.querySelectorAll('[x-data="mageforgeToolbar"]').forEach(function (el) {
-        if (typeof Alpine.initTree === 'function') {
-            Alpine.initTree(el);
-        }
+if (typeof Alpine !== "undefined") {
+  _registerMageforgeToolbar();
+  document
+    .querySelectorAll('[x-data="mageforgeToolbar"]')
+    .forEach(function (el) {
+      if (typeof Alpine.initTree === "function") {
+        Alpine.initTree(el);
+      }
     });
 } else {
-    document.addEventListener('alpine:init', _registerMageforgeToolbar);
+  document.addEventListener("alpine:init", _registerMageforgeToolbar);
 }
diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js
index c0ca4617..c008c527 100644
--- a/src/view/frontend/web/js/toolbar/audits.js
+++ b/src/view/frontend/web/js/toolbar/audits.js
@@ -2,187 +2,202 @@
  * MageForge Toolbar - Audit dispatcher
  */
 
-import { audits, auditGroups } from './audits/index.js';
+import { audits, auditGroups } from "./audits/index.js";
 
 export const auditMethods = {
-    /**
-     * Toggles an audit on/off and updates the menu item state.
-     *
-     * @param {string} auditKey
-     */
-    runAudit(auditKey) {
-        const audit = audits.find(a => a.key === auditKey);
-        if (!audit) return;
-
-        const isActive = this.activeAudits.has(auditKey);
-        if (isActive) {
-            this.activeAudits.delete(auditKey);
-            audit.run(this, false);
-            this.setAuditCounterBadge(auditKey, '', 'success');
-        } else {
-            this.activeAudits.add(auditKey);
-            audit.run(this, true);
+  /**
+   * Toggles an audit on/off and updates the menu item state.
+   *
+   * @param {string} auditKey
+   */
+  runAudit(auditKey) {
+    const audit = audits.find((a) => a.key === auditKey);
+    if (!audit) return;
+
+    const isActive = this.activeAudits.has(auditKey);
+    if (isActive) {
+      this.activeAudits.delete(auditKey);
+      audit.run(this, false);
+      this.setAuditCounterBadge(auditKey, "", "success");
+    } else {
+      this.activeAudits.add(auditKey);
+      audit.run(this, true);
+    }
+    this.setAuditActive(auditKey, !isActive);
+  },
+
+  /**
+   * Activates all inactive audits or deactivates all if all are already active.
+   */
+  toggleAllAudits() {
+    const allActive = this.activeAudits.size === audits.length;
+    if (allActive) {
+      this.deactivateAllAudits();
+    } else {
+      audits.forEach((audit) => {
+        if (!this.activeAudits.has(audit.key)) {
+          this.runAudit(audit.key);
         }
-        this.setAuditActive(auditKey, !isActive);
-    },
-
-    /**
-     * Activates all inactive audits or deactivates all if all are already active.
-     */
-    toggleAllAudits() {
-        const allActive = this.activeAudits.size === audits.length;
-        if (allActive) {
-            this.deactivateAllAudits();
-        } else {
-            audits.forEach(audit => {
-                if (!this.activeAudits.has(audit.key)) {
-                    this.runAudit(audit.key);
-                }
-            });
+      });
+    }
+  },
+
+  /**
+   * Run every audit, wait for the DOM to settle, then compute and display
+   * an overall health score (0–100) in the footer gauge.
+   */
+  async runAllAuditsForScore() {
+    const btn = this.runAllButton;
+    if (!btn) return;
+    btn.disabled = true;
+    btn.classList.add("mageforge-running");
+
+    try {
+      this._batchRunning = true;
+      this.deactivateAllAudits();
+
+      audits.forEach((audit) => {
+        if (!this.activeAudits.has(audit.key)) {
+          this.runAudit(audit.key);
         }
-    },
-
-    /**
-     * Run every audit, wait for the DOM to settle, then compute and display
-     * an overall health score (0–100) in the footer gauge.
-     */
-    async runAllAuditsForScore() {
-        const btn = this.runAllButton;
-        if (!btn) return;
-        btn.disabled = true;
-        btn.classList.add('mageforge-running');
-
-        try {
-            this._batchRunning = true;
-            this.deactivateAllAudits();
-
-            audits.forEach(audit => {
-                if (!this.activeAudits.has(audit.key)) {
-                    this.runAudit(audit.key);
-                }
-            });
-
-            // Allow async DOM mutations to settle
-            await new Promise(resolve => setTimeout(resolve, 200));
-
-            let totalPoints = 0;
-            let maxPoints = 0;
-            audits.forEach(audit => {
-                const item = this.menu?.querySelector(`[data-audit-key="${audit.key}"]`);
-                if (!item) return;
-                maxPoints += 100;
-                const status = item.querySelector('.mageforge-toolbar-menu-status');
-                if (!status || !status.textContent.trim()) {
-                    totalPoints += 100;
-                } else if (status.classList.contains('mageforge-toolbar-menu-status--success')) {
-                    totalPoints += 100;
-                } else if (status.classList.contains('mageforge-toolbar-menu-status--warning')) {
-                    totalPoints += 50;
-                }
-                // error = 0 points (default)
-            });
-
-            const score = maxPoints > 0 ? Math.round((totalPoints / maxPoints) * 100) : 100;
-            this.updateHealthScore(score);
-        } finally {
-            this._batchRunning = false;
-            btn.disabled = false;
-            btn.classList.remove('mageforge-running');
-        }
-    },
-
-    /**
-     * Deactivates all currently active audits (called when closing the toolbar).
-     */
-    deactivateAllAudits() {
-        const keys = [...this.activeAudits];
-        keys.forEach(key => {
-            this.activeAudits.delete(key);
-            const audit = audits.find(a => a.key === key);
-            if (audit) audit.run(this, false);
-            this.setAuditCounterBadge(key, '', 'success');
-            this.setAuditActive(key, false);
-        });
-        this.updateToggleAllButton();
-    },
-
-    /**
-     * Returns all registered audits (used by UI to build menu items)
-     *
-     * @returns {import('./audits/index.js').AuditDefinition[]}
-     */
-    getAudits() {
-        return audits;
-    },
-
-    /**
-     * Returns all registered audit groups.
-     *
-     * @returns {import('./audits/index.js').AuditGroup[]}
-     */
-    getAuditGroups() {
-        return auditGroups;
-    },
-
-    /**
-     * Toggle collapsed state of a menu group.
-     *
-     * @param {string} key
-     */
-    toggleGroup(key) {
-        if (this.collapsedGroups.has(key)) {
-            this.collapsedGroups.delete(key);
-        } else {
-            this.collapsedGroups.add(key);
-        }
-        localStorage.setItem('mageforge-toolbar-collapsed-groups', JSON.stringify([...this.collapsedGroups]));
-        if (!this.menu) return;
-        const group = this.menu.querySelector(`[data-group-key="${key}"]`);
-        if (group) {
-            const isCollapsed = this.collapsedGroups.has(key);
-            group.classList.toggle('mageforge-toolbar-menu-group--collapsed', isCollapsed);
-            const header = group.querySelector('.mageforge-toolbar-menu-group-header');
-            if (header) header.setAttribute('aria-expanded', String(!isCollapsed));
-        }
-    },
-
-    /**
-     * Update the description text of an audit menu item.
-     * Useful for audits that want to surface detail (e.g. which IDs are duplicated).
-     *
-     * @param {string} key
-     * @param {string} text
-     */
-    setAuditDescription(key, text) {
-        if (!this.menu) return;
-        const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
-        if (!item) return;
-        const desc = item.querySelector('.mageforge-toolbar-menu-desc');
-        if (!desc) return;
-        const originalText = desc.dataset.originalText ?? desc.textContent;
-        if (!desc.dataset.originalText) desc.dataset.originalText = originalText;
-        const isChanged = text !== originalText;
-        desc.textContent = text;
-        desc.classList.toggle('mageforge-active', isChanged);
-    },
-
-    /**
-     * Set the inline counter badge of an audit menu item.
-     *
-     * @param {string} key
-     * @param {string} message
-     * @param {'success'|'error'} type
-     */
-    setAuditCounterBadge(key, message, type = 'success') {
-        if (!this.menu) return;
-        const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+      });
+
+      // Allow async DOM mutations to settle
+      await new Promise((resolve) => setTimeout(resolve, 200));
+
+      let totalPoints = 0;
+      let maxPoints = 0;
+      audits.forEach((audit) => {
+        const item = this.menu?.querySelector(
+          `[data-audit-key="${audit.key}"]`,
+        );
         if (!item) return;
-        const status = item.querySelector('.mageforge-toolbar-menu-status');
-        if (!status) return;
-        status.textContent = message;
-        status.className = `mageforge-toolbar-menu-status mageforge-toolbar-menu-status--${type}`;
-        // Reflect error/warning/success on the active item background
-        item.classList.toggle('mageforge-active--error', type === 'error');
-        item.classList.toggle('mageforge-active--warning', type === 'warning');
-    },
+        maxPoints += 100;
+        const status = item.querySelector(".mageforge-toolbar-menu-status");
+        if (!status || !status.textContent.trim()) {
+          totalPoints += 100;
+        } else if (
+          status.classList.contains("mageforge-toolbar-menu-status--success")
+        ) {
+          totalPoints += 100;
+        } else if (
+          status.classList.contains("mageforge-toolbar-menu-status--warning")
+        ) {
+          totalPoints += 50;
+        }
+        // error = 0 points (default)
+      });
+
+      const score =
+        maxPoints > 0 ? Math.round((totalPoints / maxPoints) * 100) : 100;
+      this.updateHealthScore(score);
+    } finally {
+      this._batchRunning = false;
+      btn.disabled = false;
+      btn.classList.remove("mageforge-running");
+    }
+  },
+
+  /**
+   * Deactivates all currently active audits (called when closing the toolbar).
+   */
+  deactivateAllAudits() {
+    const keys = [...this.activeAudits];
+    keys.forEach((key) => {
+      this.activeAudits.delete(key);
+      const audit = audits.find((a) => a.key === key);
+      if (audit) audit.run(this, false);
+      this.setAuditCounterBadge(key, "", "success");
+      this.setAuditActive(key, false);
+    });
+    this.updateToggleAllButton();
+  },
+
+  /**
+   * Returns all registered audits (used by UI to build menu items)
+   *
+   * @returns {import('./audits/index.js').AuditDefinition[]}
+   */
+  getAudits() {
+    return audits;
+  },
+
+  /**
+   * Returns all registered audit groups.
+   *
+   * @returns {import('./audits/index.js').AuditGroup[]}
+   */
+  getAuditGroups() {
+    return auditGroups;
+  },
+
+  /**
+   * Toggle collapsed state of a menu group.
+   *
+   * @param {string} key
+   */
+  toggleGroup(key) {
+    if (this.collapsedGroups.has(key)) {
+      this.collapsedGroups.delete(key);
+    } else {
+      this.collapsedGroups.add(key);
+    }
+    localStorage.setItem(
+      "mageforge-toolbar-collapsed-groups",
+      JSON.stringify([...this.collapsedGroups]),
+    );
+    if (!this.menu) return;
+    const group = this.menu.querySelector(`[data-group-key="${key}"]`);
+    if (group) {
+      const isCollapsed = this.collapsedGroups.has(key);
+      group.classList.toggle(
+        "mageforge-toolbar-menu-group--collapsed",
+        isCollapsed,
+      );
+      const header = group.querySelector(
+        ".mageforge-toolbar-menu-group-header",
+      );
+      if (header) header.setAttribute("aria-expanded", String(!isCollapsed));
+    }
+  },
+
+  /**
+   * Update the description text of an audit menu item.
+   * Useful for audits that want to surface detail (e.g. which IDs are duplicated).
+   *
+   * @param {string} key
+   * @param {string} text
+   */
+  setAuditDescription(key, text) {
+    if (!this.menu) return;
+    const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+    if (!item) return;
+    const desc = item.querySelector(".mageforge-toolbar-menu-desc");
+    if (!desc) return;
+    const originalText = desc.dataset.originalText ?? desc.textContent;
+    if (!desc.dataset.originalText) desc.dataset.originalText = originalText;
+    const isChanged = text !== originalText;
+    desc.textContent = text;
+    desc.classList.toggle("mageforge-active", isChanged);
+  },
+
+  /**
+   * Set the inline counter badge of an audit menu item.
+   *
+   * @param {string} key
+   * @param {string} message
+   * @param {'success'|'error'} type
+   */
+  setAuditCounterBadge(key, message, type = "success") {
+    if (!this.menu) return;
+    const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+    if (!item) return;
+    const status = item.querySelector(".mageforge-toolbar-menu-status");
+    if (!status) return;
+    status.textContent = message;
+    status.className = `mageforge-toolbar-menu-status mageforge-toolbar-menu-status--${type}`;
+    // Reflect error/warning/success on the active item background
+    item.classList.toggle("mageforge-active--error", type === "error");
+    item.classList.toggle("mageforge-active--warning", type === "warning");
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
index 4a1f8ca7..9b8aab5b 100644
--- a/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
+++ b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
@@ -6,34 +6,43 @@
  * type="submit", or type="reset" explicitly.
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'buttons-without-type',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path><path d="M11 11.5a1.5 1.5 0 0 1 3 0v1.5"></path><path d="M14 12a1.5 1.5 0 0 1 3 0v2"></path><path d="M17 13.5a1.5 1.5 0 0 1 3 0v3.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path></svg>',
-    label: 'Buttons without a type',
-    description: 'Highlight a button missing an explicit type attribute (defaults to submit)',
+  key: "buttons-without-type",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path><path d="M11 11.5a1.5 1.5 0 0 1 3 0v1.5"></path><path d="M14 12a1.5 1.5 0 0 1 3 0v2"></path><path d="M17 13.5a1.5 1.5 0 0 1 3 0v3.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path></svg>',
+  label: "Buttons without a type",
+  description:
+    "Highlight a button missing an explicit type attribute (defaults to submit)",
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const buttons = Array.from(document.querySelectorAll('button')).filter(btn => {
-            const type = btn.getAttribute('type');
-            if (type !== null && type.trim() !== '') return false;
-            if (!btn.offsetParent && getComputedStyle(btn).position !== 'fixed') return false;
-            const style = getComputedStyle(btn);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
-            return true;
-        });
+    const buttons = Array.from(document.querySelectorAll("button")).filter(
+      (btn) => {
+        const type = btn.getAttribute("type");
+        if (type !== null && type.trim() !== "") return false;
+        if (!btn.offsetParent && getComputedStyle(btn).position !== "fixed")
+          return false;
+        const style = getComputedStyle(btn);
+        if (
+          style.visibility === "hidden" ||
+          style.display === "none" ||
+          parseFloat(style.opacity) === 0
+        )
+          return false;
+        return true;
+      },
+    );
 
-        applyHighlight(buttons, this.key, context);
-    },
+    applyHighlight(buttons, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
index 82d035bf..55c7db68 100644
--- a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
+++ b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
@@ -8,58 +8,59 @@
  * Icon source: Tabler Icons (MIT)
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'duplicate-ids',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 8a4 4 0 0 1 4 4a4 4 0 0 1 4 -4"></path><path d="M7 16a4 4 0 0 0 4 -4a4 4 0 0 0 4 4"></path><path d="M9 12h6"></path><path d="M3 12h2"></path><path d="M19 12h2"></path></svg>',
-    label: 'Duplicate IDs',
-    description: 'Highlight elements sharing an ID with at least one other element',
+  key: "duplicate-ids",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 8a4 4 0 0 1 4 4a4 4 0 0 1 4 -4"></path><path d="M7 16a4 4 0 0 0 4 -4a4 4 0 0 0 4 4"></path><path d="M9 12h6"></path><path d="M3 12h2"></path><path d="M19 12h2"></path></svg>',
+  label: "Duplicate IDs",
+  description:
+    "Highlight elements sharing an ID with at least one other element",
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            context.setAuditDescription(this.key, this.description);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      context.setAuditDescription(this.key, this.description);
+      return;
+    }
 
-        /** @type {Map<string, Element[]>} */
-        const idMap = new Map();
+    /** @type {Map<string, Element[]>} */
+    const idMap = new Map();
 
-        document.querySelectorAll('[id]').forEach(el => {
-            const id = el.id;
-            if (!id) return;
-            if (el.closest('.mageforge-toolbar')) return;
-            if (!idMap.has(id)) {
-                idMap.set(id, []);
-            }
-            idMap.get(id).push(el);
-        });
+    document.querySelectorAll("[id]").forEach((el) => {
+      const id = el.id;
+      if (!id) return;
+      if (el.closest(".mageforge-toolbar")) return;
+      if (!idMap.has(id)) {
+        idMap.set(id, []);
+      }
+      idMap.get(id).push(el);
+    });
 
-        /** @type {string[]} */
-        const duplicateIdNames = [];
-        const duplicates = [];
-        idMap.forEach((els, id) => {
-            if (els.length > 1) {
-                duplicateIdNames.push(`#${id} (×${els.length})`);
-                els.forEach(el => duplicates.push(el));
-            }
-        });
+    /** @type {string[]} */
+    const duplicateIdNames = [];
+    const duplicates = [];
+    idMap.forEach((els, id) => {
+      if (els.length > 1) {
+        duplicateIdNames.push(`#${id} (×${els.length})`);
+        els.forEach((el) => duplicates.push(el));
+      }
+    });
 
-        if (duplicates.length > 0) {
-            context.setAuditDescription(
-                this.key,
-                `Duplicate: ${duplicateIdNames.join(', ')}`
-            );
-        } else {
-            context.setAuditDescription(this.key, this.description);
-        }
+    if (duplicates.length > 0) {
+      context.setAuditDescription(
+        this.key,
+        `Duplicate: ${duplicateIdNames.join(", ")}`,
+      );
+    } else {
+      context.setAuditDescription(this.key, this.description);
+    }
 
-        applyHighlight(duplicates, this.key, context);
-    },
+    applyHighlight(duplicates, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
index 9a08b884..78cf1438 100644
--- a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
+++ b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
@@ -5,48 +5,68 @@
  * reader and keyboard users (WCAG 2.1 SC 4.1.2, 2.4.6).
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'empty-interactive',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 12h-14"></path><path d="M6 9l-3 3l3 3"></path><path d="M20 6v.01"></path><path d="M20 12v.01"></path><path d="M20 18v.01"></path></svg>',
-    label: 'Empty Links & Buttons',
-    description: 'Highlight links and buttons missing an accessible name',
-
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
-
-        const elements = Array.from(document.querySelectorAll('a[href], button')).filter(el => {
-            // Visibility check
-            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
-            const style = getComputedStyle(el);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
-
-            // Accessible name sources
-            if (el.getAttribute('aria-label')?.trim()) return false;
-            if (el.getAttribute('title')?.trim()) return false;
-            if (el.getAttribute('aria-labelledby')?.trim().split(/\s+/).some(id => document.getElementById(id)?.textContent.trim())) return false;
-
-            // Text content (excluding whitespace-only)
-            if (el.textContent.trim()) return false;
-
-            // Child <img> with non-empty alt (trimmed)
-            if (Array.from(el.querySelectorAll('img[alt]')).some(img => img.getAttribute('alt')?.trim())) return false;
-
-            // Child <svg> with a <title> element
-            if (el.querySelector('svg title')?.textContent.trim()) return false;
-
-            return true;
-        });
-
-        applyHighlight(elements, this.key, context);
-    },
+  key: "empty-interactive",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 12h-14"></path><path d="M6 9l-3 3l3 3"></path><path d="M20 6v.01"></path><path d="M20 12v.01"></path><path d="M20 18v.01"></path></svg>',
+  label: "Empty Links & Buttons",
+  description: "Highlight links and buttons missing an accessible name",
+
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
+
+    const elements = Array.from(
+      document.querySelectorAll("a[href], button"),
+    ).filter((el) => {
+      // Visibility check
+      if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+        return false;
+      const style = getComputedStyle(el);
+      if (
+        style.visibility === "hidden" ||
+        style.display === "none" ||
+        parseFloat(style.opacity) === 0
+      )
+        return false;
+
+      // Accessible name sources
+      if (el.getAttribute("aria-label")?.trim()) return false;
+      if (el.getAttribute("title")?.trim()) return false;
+      if (
+        el
+          .getAttribute("aria-labelledby")
+          ?.trim()
+          .split(/\s+/)
+          .some((id) => document.getElementById(id)?.textContent.trim())
+      )
+        return false;
+
+      // Text content (excluding whitespace-only)
+      if (el.textContent.trim()) return false;
+
+      // Child <img> with non-empty alt (trimmed)
+      if (
+        Array.from(el.querySelectorAll("img[alt]")).some((img) =>
+          img.getAttribute("alt")?.trim(),
+        )
+      )
+        return false;
+
+      // Child <svg> with a <title> element
+      if (el.querySelector("svg title")?.textContent.trim()) return false;
+
+      return true;
+    });
+
+    applyHighlight(elements, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/highlight.js b/src/view/frontend/web/js/toolbar/audits/highlight.js
index 01936329..9c477797 100644
--- a/src/view/frontend/web/js/toolbar/audits/highlight.js
+++ b/src/view/frontend/web/js/toolbar/audits/highlight.js
@@ -8,7 +8,7 @@
  * is kept on the element purely as a selector marker for clearHighlight().
  */
 
-const AUDIT_OVERLAY_CLASS = 'mageforge-audit-overlay';
+const AUDIT_OVERLAY_CLASS = "mageforge-audit-overlay";
 
 /**
  * Module-level registry: tracks one overlay per element and the set of
@@ -31,16 +31,16 @@ let rafPending = false;
 let sharedRo = null;
 
 function scheduleUpdate() {
-    if (rafPending) return;
-    rafPending = true;
-    requestAnimationFrame(() => {
-        rafPending = false;
-        // Snapshot before iterating: update() calls may delete entries
-        // (image disconnected → cleanup) while we are looping.
-        for (const updateFn of [...activeOverlays.values()]) {
-            updateFn();
-        }
-    });
+  if (rafPending) return;
+  rafPending = true;
+  requestAnimationFrame(() => {
+    rafPending = false;
+    // Snapshot before iterating: update() calls may delete entries
+    // (image disconnected → cleanup) while we are looping.
+    for (const updateFn of [...activeOverlays.values()]) {
+      updateFn();
+    }
+  });
 }
 
 /**
@@ -53,49 +53,53 @@ function scheduleUpdate() {
  * @param {'error'|'warning'} [severity='error']
  * @returns {function} cleanup
  */
-function createOverlay(el, severity = 'error') {
-    const overlay = document.createElement('span');
-    overlay.className = AUDIT_OVERLAY_CLASS;
-    if (severity === 'warning') overlay.classList.add('mageforge-audit-overlay--warning');
-    document.body.appendChild(overlay);
-
-    function update() {
-        if (!el.isConnected) {
-            cleanup();
-
-            return;
-        }
-        const rect = el.getBoundingClientRect();
-        overlay.style.top    = `${rect.top}px`;
-        overlay.style.left   = `${rect.left}px`;
-        overlay.style.width  = `${rect.width}px`;
-        overlay.style.height = `${rect.height}px`;
+function createOverlay(el, severity = "error") {
+  const overlay = document.createElement("span");
+  overlay.className = AUDIT_OVERLAY_CLASS;
+  if (severity === "warning")
+    overlay.classList.add("mageforge-audit-overlay--warning");
+  document.body.appendChild(overlay);
+
+  function update() {
+    if (!el.isConnected) {
+      cleanup();
+
+      return;
     }
-
-    update();
-
-    activeOverlays.set(overlay, update);
-
-    // Attach shared listeners only when the first overlay is created.
-    if (activeOverlays.size === 1) {
-        sharedRo = new ResizeObserver(scheduleUpdate);
-        sharedRo.observe(document.documentElement);
-        window.addEventListener('scroll', scheduleUpdate, { passive: true, capture: true });
-    }
-
-    // Named so update() can reference it before its var declaration (hoisting).
-    function cleanup() {
-        activeOverlays.delete(overlay);
-        // Tear down shared listeners once no overlays remain.
-        if (activeOverlays.size === 0) {
-            sharedRo?.disconnect();
-            sharedRo = null;
-            window.removeEventListener('scroll', scheduleUpdate, { capture: true });
-        }
-        overlay.remove();
+    const rect = el.getBoundingClientRect();
+    overlay.style.top = `${rect.top}px`;
+    overlay.style.left = `${rect.left}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+  }
+
+  update();
+
+  activeOverlays.set(overlay, update);
+
+  // Attach shared listeners only when the first overlay is created.
+  if (activeOverlays.size === 1) {
+    sharedRo = new ResizeObserver(scheduleUpdate);
+    sharedRo.observe(document.documentElement);
+    window.addEventListener("scroll", scheduleUpdate, {
+      passive: true,
+      capture: true,
+    });
+  }
+
+  // Named so update() can reference it before its var declaration (hoisting).
+  function cleanup() {
+    activeOverlays.delete(overlay);
+    // Tear down shared listeners once no overlays remain.
+    if (activeOverlays.size === 0) {
+      sharedRo?.disconnect();
+      sharedRo = null;
+      window.removeEventListener("scroll", scheduleUpdate, { capture: true });
     }
+    overlay.remove();
+  }
 
-    return cleanup;
+  return cleanup;
 }
 
 /**
@@ -105,18 +109,18 @@ function createOverlay(el, severity = 'error') {
  * @param {string} key - Audit key (e.g. 'images-without-alt')
  */
 export function clearHighlight(key) {
-    const cls = `mageforge-audit-${key}`;
-    document.querySelectorAll(`.${cls}`).forEach(el => {
-        el.classList.remove(cls);
-        const entry = overlayRegistry.get(el);
-        if (entry) {
-            entry.keys.delete(key);
-            if (entry.keys.size === 0) {
-                entry.cleanup();
-                overlayRegistry.delete(el);
-            }
-        }
-    });
+  const cls = `mageforge-audit-${key}`;
+  document.querySelectorAll(`.${cls}`).forEach((el) => {
+    el.classList.remove(cls);
+    const entry = overlayRegistry.get(el);
+    if (entry) {
+      entry.keys.delete(key);
+      if (entry.keys.size === 0) {
+        entry.cleanup();
+        overlayRegistry.delete(el);
+      }
+    }
+  });
 }
 
 /**
@@ -132,33 +136,33 @@ export function clearHighlight(key) {
  * @param {boolean}    [options.skipBadge=false]  - Skip badge + scroll update
  */
 export function applyHighlight(elements, key, context, options = {}) {
-    const severity = options.severity ?? 'error';
-    const skipBadge = options.skipBadge ?? false;
-
-    // Never flag elements that are part of the MageForge Toolbar itself
-    elements = elements.filter(el => !el.closest('.mageforge-toolbar'));
-
-    if (elements.length === 0) {
-        if (!skipBadge) context.setAuditCounterBadge(key, '0', 'success');
-        return;
+  const severity = options.severity ?? "error";
+  const skipBadge = options.skipBadge ?? false;
+
+  // Never flag elements that are part of the MageForge Toolbar itself
+  elements = elements.filter((el) => !el.closest(".mageforge-toolbar"));
+
+  if (elements.length === 0) {
+    if (!skipBadge) context.setAuditCounterBadge(key, "0", "success");
+    return;
+  }
+  const cls = `mageforge-audit-${key}`;
+  elements.forEach((el) => {
+    el.classList.add(cls);
+    const existing = overlayRegistry.get(el);
+    if (existing) {
+      existing.keys.add(key);
+    } else {
+      overlayRegistry.set(el, {
+        cleanup: createOverlay(el, severity),
+        keys: new Set([key]),
+      });
     }
-    const cls = `mageforge-audit-${key}`;
-    elements.forEach(el => {
-        el.classList.add(cls);
-        const existing = overlayRegistry.get(el);
-        if (existing) {
-            existing.keys.add(key);
-        } else {
-            overlayRegistry.set(el, {
-                cleanup: createOverlay(el, severity),
-                keys: new Set([key]),
-            });
-        }
-    });
-    if (!skipBadge) {
-        if (!context._batchRunning) {
-            elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-        context.setAuditCounterBadge(key, `${elements.length}`, severity);
+  });
+  if (!skipBadge) {
+    if (!context._batchRunning) {
+      elements[0].scrollIntoView({ behavior: "smooth", block: "center" });
     }
+    context.setAuditCounterBadge(key, `${elements.length}`, severity);
+  }
 }
diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-alt.js b/src/view/frontend/web/js/toolbar/audits/images-without-alt.js
index c48c1770..42d3346f 100644
--- a/src/view/frontend/web/js/toolbar/audits/images-without-alt.js
+++ b/src/view/frontend/web/js/toolbar/audits/images-without-alt.js
@@ -2,54 +2,69 @@
  * MageForge Toolbar Audit – Images without ALT
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'images-without-alt',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12"></path><path d="M4 16l16 0"></path><path d="M4 12l3 -3c.928 -.893 2.072 -.893 3 0l4 4"></path><path d="M13 12l2 -2c.928 -.893 2.072 -.893 3 0l2 2"></path><path d="M14 7l.01 0"></path></svg>',
-    label: 'Images without ALT',
-    description: 'Highlight images without alt attributes',
-
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
-
-        const visible = Array.from(document.querySelectorAll('img')).filter(img => {
-            if (!img.offsetParent && getComputedStyle(img).position !== 'fixed') return false;
-            const style = getComputedStyle(img);
-            return style.visibility !== 'hidden' && style.display !== 'none' && style.opacity !== '0';
-        });
-
-        // Errors: missing alt attribute or whitespace-only alt (e.g. alt="  ")
-        const errors = visible.filter(img => {
-            if (!img.hasAttribute('alt')) return true;
-            const val = img.getAttribute('alt');
-            return val.length > 0 && val.trim() === '';
-        });
-
-        // Warnings: explicit alt="" – intentionally decorative, but flagged for review
-        const warnings = visible.filter(img => img.getAttribute('alt') === '');
-
-        const total = errors.length + warnings.length;
-        if (total === 0) {
-            context.setAuditCounterBadge(this.key, '0', 'success');
-            return;
-        }
-
-        applyHighlight(errors,   this.key, context, { skipBadge: true });
-        applyHighlight(warnings, this.key, context, { severity: 'warning', skipBadge: true });
-
-        // Scroll to first issue (errors take priority)
-        const first = errors[0] ?? warnings[0];
-        if (first && !context._batchRunning) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
-        context.setAuditCounterBadge(this.key, `${total}`, errors.length > 0 ? 'error' : 'warning');
-    },
+  key: "images-without-alt",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12"></path><path d="M4 16l16 0"></path><path d="M4 12l3 -3c.928 -.893 2.072 -.893 3 0l4 4"></path><path d="M13 12l2 -2c.928 -.893 2.072 -.893 3 0l2 2"></path><path d="M14 7l.01 0"></path></svg>',
+  label: "Images without ALT",
+  description: "Highlight images without alt attributes",
+
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
+
+    const visible = Array.from(document.querySelectorAll("img")).filter(
+      (img) => {
+        if (!img.offsetParent && getComputedStyle(img).position !== "fixed")
+          return false;
+        const style = getComputedStyle(img);
+        return (
+          style.visibility !== "hidden" &&
+          style.display !== "none" &&
+          style.opacity !== "0"
+        );
+      },
+    );
+
+    // Errors: missing alt attribute or whitespace-only alt (e.g. alt="  ")
+    const errors = visible.filter((img) => {
+      if (!img.hasAttribute("alt")) return true;
+      const val = img.getAttribute("alt");
+      return val.length > 0 && val.trim() === "";
+    });
+
+    // Warnings: explicit alt="" – intentionally decorative, but flagged for review
+    const warnings = visible.filter((img) => img.getAttribute("alt") === "");
+
+    const total = errors.length + warnings.length;
+    if (total === 0) {
+      context.setAuditCounterBadge(this.key, "0", "success");
+      return;
+    }
+
+    applyHighlight(errors, this.key, context, { skipBadge: true });
+    applyHighlight(warnings, this.key, context, {
+      severity: "warning",
+      skipBadge: true,
+    });
+
+    // Scroll to first issue (errors take priority)
+    const first = errors[0] ?? warnings[0];
+    if (first && !context._batchRunning)
+      first.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    context.setAuditCounterBadge(
+      this.key,
+      `${total}`,
+      errors.length > 0 ? "error" : "warning",
+    );
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js b/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js
index 7e1addd2..cf420d25 100644
--- a/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js
+++ b/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js
@@ -4,32 +4,40 @@
  * Images missing explicit width and height attributes cause Cumulative Layout Shift (CLS).
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'images-without-dimensions',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 5h11"></path><path d="M12 7l2 -2l-2 -2"></path><path d="M5 3l-2 2l2 2"></path><path d="M19 10v11"></path><path d="M17 19l2 2l2 -2"></path><path d="M21 12l-2 -2l-2 2"></path><path d="M3 12a2 2 0 0 1 2 -2h7a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2l0 -7"></path></svg>',
-    label: 'Images without Dimensions',
-    description: 'Highlight images missing width/height',
+  key: "images-without-dimensions",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 5h11"></path><path d="M12 7l2 -2l-2 -2"></path><path d="M5 3l-2 2l2 2"></path><path d="M19 10v11"></path><path d="M17 19l2 2l2 -2"></path><path d="M21 12l-2 -2l-2 2"></path><path d="M3 12a2 2 0 0 1 2 -2h7a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2l0 -7"></path></svg>',
+  label: "Images without Dimensions",
+  description: "Highlight images missing width/height",
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const images = Array.from(document.querySelectorAll('img')).filter(img => {
-            if (!img.offsetParent && getComputedStyle(img).position !== 'fixed') return false;
-            const style = getComputedStyle(img);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
-            return !img.hasAttribute('width') || !img.hasAttribute('height');
-        });
+    const images = Array.from(document.querySelectorAll("img")).filter(
+      (img) => {
+        if (!img.offsetParent && getComputedStyle(img).position !== "fixed")
+          return false;
+        const style = getComputedStyle(img);
+        if (
+          style.visibility === "hidden" ||
+          style.display === "none" ||
+          parseFloat(style.opacity) === 0
+        )
+          return false;
+        return !img.hasAttribute("width") || !img.hasAttribute("height");
+      },
+    );
 
-        applyHighlight(images, this.key, context);
-    },
+    applyHighlight(images, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js b/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js
index 967ed2c6..b45940ab 100644
--- a/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js
+++ b/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js
@@ -5,36 +5,44 @@
  * wasting bandwidth and slowing initial page load.
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'images-without-lazy-load',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 12l6 -3l-8 -4l-8 4l6 3"></path><path d="M10 12l-6 3l8 4l8 -4l-6 -3l-2 1l-2 -1" fill="currentColor"></path></svg>',
-    label: 'Images without Lazy Load',
-    description: 'Highlight off-screen images missing loading="lazy"',
+  key: "images-without-lazy-load",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 12l6 -3l-8 -4l-8 4l6 3"></path><path d="M10 12l-6 3l8 4l8 -4l-6 -3l-2 1l-2 -1" fill="currentColor"></path></svg>',
+  label: "Images without Lazy Load",
+  description: 'Highlight off-screen images missing loading="lazy"',
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const viewportBottom = window.innerHeight;
+    const viewportBottom = window.innerHeight;
 
-        const images = Array.from(document.querySelectorAll('img')).filter(img => {
-            if (!img.offsetParent && getComputedStyle(img).position !== 'fixed') return false;
-            const style = getComputedStyle(img);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
-            if (img.getAttribute('loading') === 'lazy') return false;
-            const rect = img.getBoundingClientRect();
-            return rect.top > viewportBottom;
-        });
+    const images = Array.from(document.querySelectorAll("img")).filter(
+      (img) => {
+        if (!img.offsetParent && getComputedStyle(img).position !== "fixed")
+          return false;
+        const style = getComputedStyle(img);
+        if (
+          style.visibility === "hidden" ||
+          style.display === "none" ||
+          parseFloat(style.opacity) === 0
+        )
+          return false;
+        if (img.getAttribute("loading") === "lazy") return false;
+        const rect = img.getBoundingClientRect();
+        return rect.top > viewportBottom;
+      },
+    );
 
-        applyHighlight(images, this.key, context);
-    },
+    applyHighlight(images, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/index.js b/src/view/frontend/web/js/toolbar/audits/index.js
index 86a27aa2..12274c50 100644
--- a/src/view/frontend/web/js/toolbar/audits/index.js
+++ b/src/view/frontend/web/js/toolbar/audits/index.js
@@ -22,38 +22,38 @@
  * @property {string} label - Display name shown as group header
  */
 
-import buttonsWithoutType from './buttons-without-type.js';
-import duplicateIds from './duplicate-ids.js';
-import emptyInteractive from './empty-interactive.js';
-import imagesWithoutAlt from './images-without-alt.js';
-import imagesWithoutDimensions from './images-without-dimensions.js';
-import imagesWithoutLazyLoad from './images-without-lazy-load.js';
-import inputsWithoutLabel from './inputs-without-label.js';
-import lowContrastText from './low-contrast-text.js';
-import multipleH1 from './multiple-h1.js';
-import smallTouchTargets from './small-touch-targets.js';
-import tabOrder from './tab-order.js';
-import unsafeBlankTarget from './unsafe-blank-target.js';
+import buttonsWithoutType from "./buttons-without-type.js";
+import duplicateIds from "./duplicate-ids.js";
+import emptyInteractive from "./empty-interactive.js";
+import imagesWithoutAlt from "./images-without-alt.js";
+import imagesWithoutDimensions from "./images-without-dimensions.js";
+import imagesWithoutLazyLoad from "./images-without-lazy-load.js";
+import inputsWithoutLabel from "./inputs-without-label.js";
+import lowContrastText from "./low-contrast-text.js";
+import multipleH1 from "./multiple-h1.js";
+import smallTouchTargets from "./small-touch-targets.js";
+import tabOrder from "./tab-order.js";
+import unsafeBlankTarget from "./unsafe-blank-target.js";
 
 /** @type {AuditGroup[]} */
 export const auditGroups = [
-    { key: 'wcag',         label: 'WCAG Checks' },
-    { key: 'html-quality', label: 'HTML Quality' },
-    { key: 'performance',  label: 'Performance' },
+  { key: "wcag", label: "WCAG Checks" },
+  { key: "html-quality", label: "HTML Quality" },
+  { key: "performance", label: "Performance" },
 ];
 
 /** @type {AuditDefinition[]} */
 export const audits = [
-    { ...imagesWithoutAlt,        group: 'wcag' },
-    { ...inputsWithoutLabel,      group: 'wcag' },
-    { ...lowContrastText,         group: 'wcag' },
-    { ...tabOrder,                group: 'wcag' },
-    { ...multipleH1,              group: 'wcag' },
-    { ...emptyInteractive,        group: 'wcag' },
-    { ...buttonsWithoutType,      group: 'wcag' },
-    { ...smallTouchTargets,       group: 'wcag' },
-    { ...duplicateIds,            group: 'html-quality' },
-    { ...unsafeBlankTarget,       group: 'html-quality' },
-    { ...imagesWithoutDimensions, group: 'performance' },
-    { ...imagesWithoutLazyLoad,   group: 'performance' },
+  { ...imagesWithoutAlt, group: "wcag" },
+  { ...inputsWithoutLabel, group: "wcag" },
+  { ...lowContrastText, group: "wcag" },
+  { ...tabOrder, group: "wcag" },
+  { ...multipleH1, group: "wcag" },
+  { ...emptyInteractive, group: "wcag" },
+  { ...buttonsWithoutType, group: "wcag" },
+  { ...smallTouchTargets, group: "wcag" },
+  { ...duplicateIds, group: "html-quality" },
+  { ...unsafeBlankTarget, group: "html-quality" },
+  { ...imagesWithoutDimensions, group: "performance" },
+  { ...imagesWithoutLazyLoad, group: "performance" },
 ];
diff --git a/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js b/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js
index 4edab9ac..9e026ca0 100644
--- a/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js
+++ b/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js
@@ -5,40 +5,59 @@
  * to screen reader users.
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'inputs-without-label',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>',
-    label: 'Inputs without Label',
-    description: 'Highlight form inputs missing a label or aria-label',
+  key: "inputs-without-label",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>',
+  label: "Inputs without Label",
+  description: "Highlight form inputs missing a label or aria-label",
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const inputs = Array.from(document.querySelectorAll(
-            'input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea'
-        )).filter(input => {
-            // aria-label or aria-labelledby present
-            if (input.hasAttribute('aria-label') && input.getAttribute('aria-label').trim()) return false;
-            if (input.hasAttribute('aria-labelledby') && input.getAttribute('aria-labelledby').trim().split(/\s+/).some(id => document.getElementById(id))) return false;
-            // title as fallback label
-            if (input.hasAttribute('title') && input.getAttribute('title').trim()) return false;
-            // <label for="id"> association
-            if (input.id && document.querySelector(`label[for="${CSS.escape(input.id)}"]`)) return false;
-            // implicit label (input is a descendant of <label>)
-            if (input.closest('label')) return false;
-            return true;
-        });
+    const inputs = Array.from(
+      document.querySelectorAll(
+        'input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea',
+      ),
+    ).filter((input) => {
+      // aria-label or aria-labelledby present
+      if (
+        input.hasAttribute("aria-label") &&
+        input.getAttribute("aria-label").trim()
+      )
+        return false;
+      if (
+        input.hasAttribute("aria-labelledby") &&
+        input
+          .getAttribute("aria-labelledby")
+          .trim()
+          .split(/\s+/)
+          .some((id) => document.getElementById(id))
+      )
+        return false;
+      // title as fallback label
+      if (input.hasAttribute("title") && input.getAttribute("title").trim())
+        return false;
+      // <label for="id"> association
+      if (
+        input.id &&
+        document.querySelector(`label[for="${CSS.escape(input.id)}"]`)
+      )
+        return false;
+      // implicit label (input is a descendant of <label>)
+      if (input.closest("label")) return false;
+      return true;
+    });
 
-        applyHighlight(inputs, this.key, context);
-    },
+    applyHighlight(inputs, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js b/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js
index 7d028a8d..c38dc07e 100644
--- a/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js
+++ b/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js
@@ -6,11 +6,11 @@
  * - 3:1 for large text (>=18pt or >=14pt bold)
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
-const _colorCanvas = document.createElement('canvas');
+const _colorCanvas = document.createElement("canvas");
 _colorCanvas.width = _colorCanvas.height = 1;
-const _colorCtx = _colorCanvas.getContext('2d', { willReadFrequently: true });
+const _colorCtx = _colorCanvas.getContext("2d", { willReadFrequently: true });
 
 /**
  * Parse any CSS color string the browser understands into [r, g, b, a].
@@ -20,16 +20,16 @@ const _colorCtx = _colorCanvas.getContext('2d', { willReadFrequently: true });
  * @returns {number[]|null} [r, g, b, a] where a is 0–1, or null on failure
  */
 function parseColor(color) {
-    if (!color || color === 'transparent') return null;
-    _colorCtx.clearRect(0, 0, 1, 1);
-    _colorCtx.fillStyle = '#fe01fe'; // sentinel: vivid pink never used as real text color
-    const sentinel = _colorCtx.fillStyle; // read back canonical form
-    _colorCtx.fillStyle = color;
-    // If fillStyle is unchanged, the browser could not parse the color
-    if (_colorCtx.fillStyle === sentinel) return null;
-    _colorCtx.fillRect(0, 0, 1, 1);
-    const d = _colorCtx.getImageData(0, 0, 1, 1).data;
-    return [d[0], d[1], d[2], d[3] / 255];
+  if (!color || color === "transparent") return null;
+  _colorCtx.clearRect(0, 0, 1, 1);
+  _colorCtx.fillStyle = "#fe01fe"; // sentinel: vivid pink never used as real text color
+  const sentinel = _colorCtx.fillStyle; // read back canonical form
+  _colorCtx.fillStyle = color;
+  // If fillStyle is unchanged, the browser could not parse the color
+  if (_colorCtx.fillStyle === sentinel) return null;
+  _colorCtx.fillRect(0, 0, 1, 1);
+  const d = _colorCtx.getImageData(0, 0, 1, 1).data;
+  return [d[0], d[1], d[2], d[3] / 255];
 }
 
 /**
@@ -41,37 +41,37 @@ function parseColor(color) {
  * @returns {number[]|null} [r, g, b] or null
  */
 function effectiveBackground(el) {
-    const layers = [];
-    let node = el;
-    let foundOpaque = false;
-    while (node && node !== document.documentElement) {
-        const bg = getComputedStyle(node).backgroundColor;
-        const parsed = parseColor(bg);
-        if (parsed) {
-            if (parsed[3] > 0) {
-                layers.push(parsed);
-                if (parsed[3] >= 1) {
-                    foundOpaque = true;
-                    break;
-                }
-            }
+  const layers = [];
+  let node = el;
+  let foundOpaque = false;
+  while (node && node !== document.documentElement) {
+    const bg = getComputedStyle(node).backgroundColor;
+    const parsed = parseColor(bg);
+    if (parsed) {
+      if (parsed[3] > 0) {
+        layers.push(parsed);
+        if (parsed[3] >= 1) {
+          foundOpaque = true;
+          break;
         }
-        node = node.parentElement;
+      }
     }
-
-    if (!foundOpaque && layers.length === 0) {
-        return [255, 255, 255]; // no background found – assume white page
-    }
-
-    // Composite layers from bottom to top over white
-    let [r, g, b] = [255, 255, 255];
-    for (let i = layers.length - 1; i >= 0; i--) {
-        const [lr, lg, lb, la] = layers[i];
-        r = Math.round(lr * la + r * (1 - la));
-        g = Math.round(lg * la + g * (1 - la));
-        b = Math.round(lb * la + b * (1 - la));
-    }
-    return [r, g, b];
+    node = node.parentElement;
+  }
+
+  if (!foundOpaque && layers.length === 0) {
+    return [255, 255, 255]; // no background found – assume white page
+  }
+
+  // Composite layers from bottom to top over white
+  let [r, g, b] = [255, 255, 255];
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const [lr, lg, lb, la] = layers[i];
+    r = Math.round(lr * la + r * (1 - la));
+    g = Math.round(lg * la + g * (1 - la));
+    b = Math.round(lb * la + b * (1 - la));
+  }
+  return [r, g, b];
 }
 
 /**
@@ -81,12 +81,12 @@ function effectiveBackground(el) {
  * @returns {boolean}
  */
 function hasDirectText(el) {
-    for (const node of el.childNodes) {
-        if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
-            return true;
-        }
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
+      return true;
     }
-    return false;
+  }
+  return false;
 }
 
 /**
@@ -96,9 +96,13 @@ function hasDirectText(el) {
  * @returns {boolean}
  */
 function isVisible(el) {
-    if (el.offsetWidth === 0 && el.offsetHeight === 0) return false;
-    const style = getComputedStyle(el);
-    return style.visibility !== 'hidden' && style.display !== 'none' && parseFloat(style.opacity) > 0;
+  if (el.offsetWidth === 0 && el.offsetHeight === 0) return false;
+  const style = getComputedStyle(el);
+  return (
+    style.visibility !== "hidden" &&
+    style.display !== "none" &&
+    parseFloat(style.opacity) > 0
+  );
 }
 
 /**
@@ -108,8 +112,8 @@ function isVisible(el) {
  * @returns {number}
  */
 function toLinear(c) {
-    const s = c / 255;
-    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
 }
 
 /**
@@ -119,7 +123,7 @@ function toLinear(c) {
  * @returns {number}
  */
 function luminance([r, g, b]) {
-    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
 }
 
 /**
@@ -130,11 +134,11 @@ function luminance([r, g, b]) {
  * @returns {number}
  */
 function contrastRatio(fg, bg) {
-    const l1 = luminance(fg);
-    const l2 = luminance(bg);
-    const lighter = Math.max(l1, l2);
-    const darker = Math.min(l1, l2);
-    return (lighter + 0.05) / (darker + 0.05);
+  const l1 = luminance(fg);
+  const l2 = luminance(bg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
 }
 
 /**
@@ -144,51 +148,53 @@ function contrastRatio(fg, bg) {
  * @returns {boolean}
  */
 function isLargeText(el) {
-    const style = getComputedStyle(el);
-    const size = parseFloat(style.fontSize);
-    const weight = parseInt(style.fontWeight, 10);
-    const ptSize = size * (72 / 96);
-    return ptSize >= 18 || (ptSize >= 14 && weight >= 700);
+  const style = getComputedStyle(el);
+  const size = parseFloat(style.fontSize);
+  const weight = parseInt(style.fontWeight, 10);
+  const ptSize = size * (72 / 96);
+  return ptSize >= 18 || (ptSize >= 14 && weight >= 700);
 }
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'low-contrast-text',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-9 1.732a8 8 0 0 0 4.001 14.928l-.001 -16a8 8 0 0 0 -4 1.072"></path></svg>',
-    label: 'Low Contrast Text',
-    description: 'Highlight text failing WCAG AA contrast',
-
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  key: "low-contrast-text",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-9 1.732a8 8 0 0 0 4.001 14.928l-.001 -16a8 8 0 0 0 -4 1.072"></path></svg>',
+  label: "Low Contrast Text",
+  description: "Highlight text failing WCAG AA contrast",
+
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const candidates = Array.from(document.querySelectorAll(
-            'p, a, h1, h2, h3, h4, h5, h6, li, td, th, label, button'
-        )).filter(el => {
-            // Never audit the toolbar itself
-            if (el.closest('.mageforge-toolbar')) return false;
-            if (!isVisible(el)) return false;
-            // Only elements with direct text nodes (avoids duplicates from nested wrappers)
-            return hasDirectText(el);
-        });
-
-        const failing = candidates.filter(el => {
-            const style = getComputedStyle(el);
-            const fg = parseColor(style.color);
-            if (!fg || fg[3] === 0) return false;
-
-            const bg = effectiveBackground(el);
-            const ratio = contrastRatio(fg, bg);
-            const threshold = isLargeText(el) ? 3 : 4.5;
-            return ratio < threshold;
-        });
-
-        applyHighlight(failing, this.key, context);
-    },
+    const candidates = Array.from(
+      document.querySelectorAll(
+        "p, a, h1, h2, h3, h4, h5, h6, li, td, th, label, button",
+      ),
+    ).filter((el) => {
+      // Never audit the toolbar itself
+      if (el.closest(".mageforge-toolbar")) return false;
+      if (!isVisible(el)) return false;
+      // Only elements with direct text nodes (avoids duplicates from nested wrappers)
+      return hasDirectText(el);
+    });
+
+    const failing = candidates.filter((el) => {
+      const style = getComputedStyle(el);
+      const fg = parseColor(style.color);
+      if (!fg || fg[3] === 0) return false;
+
+      const bg = effectiveBackground(el);
+      const ratio = contrastRatio(fg, bg);
+      const threshold = isLargeText(el) ? 3 : 4.5;
+      return ratio < threshold;
+    });
+
+    applyHighlight(failing, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/multiple-h1.js b/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
index a7f3743f..c5df4a01 100644
--- a/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
+++ b/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
@@ -5,37 +5,43 @@
  * readers and harm SEO by diluting the primary heading signal.
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'multiple-h1',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 18v-8l-2 2"></path><path d="M9 18v-8"></path><path d="M5 14h8"></path><path d="M5 10v8"></path></svg>',
-    label: 'Multiple H1',
-    description: 'Highlight pages with more than one H1 heading',
+  key: "multiple-h1",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 18v-8l-2 2"></path><path d="M9 18v-8"></path><path d="M5 14h8"></path><path d="M5 10v8"></path></svg>',
+  label: "Multiple H1",
+  description: "Highlight pages with more than one H1 heading",
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const h1s = Array.from(document.querySelectorAll('h1')).filter(el => {
-            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
-            const style = getComputedStyle(el);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
-            return true;
-        });
+    const h1s = Array.from(document.querySelectorAll("h1")).filter((el) => {
+      if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+        return false;
+      const style = getComputedStyle(el);
+      if (
+        style.visibility === "hidden" ||
+        style.display === "none" ||
+        parseFloat(style.opacity) === 0
+      )
+        return false;
+      return true;
+    });
 
-        if (h1s.length <= 1) {
-            context.setAuditCounterBadge(this.key, '0', 'success');
-            return;
-        }
+    if (h1s.length <= 1) {
+      context.setAuditCounterBadge(this.key, "0", "success");
+      return;
+    }
 
-        applyHighlight(h1s, this.key, context);
-    },
+    applyHighlight(h1s, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
index c6f90524..b404cea0 100644
--- a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
+++ b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
@@ -7,50 +7,58 @@
  * Icon source: Tabler Icons (MIT)
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 const MIN_SIZE = 24;
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'small-touch-targets',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M15 3l0 4l4 0"></path><path d="M15 7l5 -5"></path></svg>',
-    label: 'Small Touch Targets',
-    description: `Highlight interactive elements smaller than ${MIN_SIZE}×${MIN_SIZE} px (WCAG 2.5.8 AA)`,
-
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
-
-        const selector = [
-            'a[href]:not([aria-disabled="true"])',
-            'button:not([disabled]):not([aria-disabled="true"])',
-            '[role="button"]:not([aria-disabled="true"])',
-            '[role="link"]:not([aria-disabled="true"])',
-            '[role="checkbox"]:not([aria-disabled="true"])',
-            '[role="radio"]:not([aria-disabled="true"])',
-            '[role="switch"]:not([aria-disabled="true"])',
-            'input:not([type="hidden"]):not([disabled]):not([aria-disabled="true"])',
-            'select:not([disabled]):not([aria-disabled="true"])',
-            'textarea:not([disabled]):not([aria-disabled="true"])',
-        ].join(', ');
-
-        const elements = Array.from(document.querySelectorAll(selector)).filter(el => {
-            if (el.matches('[disabled], [aria-disabled="true"]')) return false;
-            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
-            const style = getComputedStyle(el);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
-
-            const rect = el.getBoundingClientRect();
-            return rect.width < MIN_SIZE || rect.height < MIN_SIZE;
-        });
-
-        applyHighlight(elements, this.key, context);
-    },
+  key: "small-touch-targets",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M15 3l0 4l4 0"></path><path d="M15 7l5 -5"></path></svg>',
+  label: "Small Touch Targets",
+  description: `Highlight interactive elements smaller than ${MIN_SIZE}×${MIN_SIZE} px (WCAG 2.5.8 AA)`,
+
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
+
+    const selector = [
+      'a[href]:not([aria-disabled="true"])',
+      'button:not([disabled]):not([aria-disabled="true"])',
+      '[role="button"]:not([aria-disabled="true"])',
+      '[role="link"]:not([aria-disabled="true"])',
+      '[role="checkbox"]:not([aria-disabled="true"])',
+      '[role="radio"]:not([aria-disabled="true"])',
+      '[role="switch"]:not([aria-disabled="true"])',
+      'input:not([type="hidden"]):not([disabled]):not([aria-disabled="true"])',
+      'select:not([disabled]):not([aria-disabled="true"])',
+      'textarea:not([disabled]):not([aria-disabled="true"])',
+    ].join(", ");
+
+    const elements = Array.from(document.querySelectorAll(selector)).filter(
+      (el) => {
+        if (el.matches('[disabled], [aria-disabled="true"]')) return false;
+        if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+          return false;
+        const style = getComputedStyle(el);
+        if (
+          style.visibility === "hidden" ||
+          style.display === "none" ||
+          parseFloat(style.opacity) === 0
+        )
+          return false;
+
+        const rect = el.getBoundingClientRect();
+        return rect.width < MIN_SIZE || rect.height < MIN_SIZE;
+      },
+    );
+
+    applyHighlight(elements, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/tab-order.js b/src/view/frontend/web/js/toolbar/audits/tab-order.js
index 124ab780..6207192e 100644
--- a/src/view/frontend/web/js/toolbar/audits/tab-order.js
+++ b/src/view/frontend/web/js/toolbar/audits/tab-order.js
@@ -7,37 +7,38 @@
  * Clicking the audit again removes the overlay (toggle).
  */
 
-const OVERLAY_ID = 'mageforge-tab-order-overlay';
-const CSS_ID = 'mageforge-tab-order-css';
-const CSS_URL = new URL('../../../css/audits/tab-order.css', import.meta.url).href;
+const OVERLAY_ID = "mageforge-tab-order-overlay";
+const CSS_ID = "mageforge-tab-order-css";
+const CSS_URL = new URL("../../../css/audits/tab-order.css", import.meta.url)
+  .href;
 
 const FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-    'details > summary',
-].join(', ');
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "details > summary",
+].join(", ");
 
 function injectCss() {
-    if (document.getElementById(CSS_ID)) {
-        return;
-    }
-    const link = document.createElement('link');
-    link.id = CSS_ID;
-    link.rel = 'stylesheet';
-    link.href = CSS_URL;
-    document.head.appendChild(link);
+  if (document.getElementById(CSS_ID)) {
+    return;
+  }
+  const link = document.createElement("link");
+  link.id = CSS_ID;
+  link.rel = "stylesheet";
+  link.href = CSS_URL;
+  document.head.appendChild(link);
 }
 
 function isVisible(el) {
-    if (el.offsetWidth === 0 || el.offsetHeight === 0) {
-        return false;
-    }
-    const style = getComputedStyle(el);
-    return style.visibility !== 'hidden' && style.display !== 'none';
+  if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+    return false;
+  }
+  const style = getComputedStyle(el);
+  return style.visibility !== "hidden" && style.display !== "none";
 }
 
 /**
@@ -45,32 +46,36 @@ function isVisible(el) {
  * ancestor with overflow:hidden/clip (e.g. a carousel slide that is off-canvas).
  */
 function isClippedByAncestor(el) {
-    const elRect = el.getBoundingClientRect();
-    let ancestor = el.parentElement;
-    while (ancestor && ancestor !== document.documentElement) {
-        const style = getComputedStyle(ancestor);
-        const clipsX = ['hidden', 'clip', 'scroll', 'auto'].includes(style.overflowX);
-        const clipsY = ['hidden', 'clip', 'scroll', 'auto'].includes(style.overflowY);
-        if (clipsX || clipsY) {
-            const aRect = ancestor.getBoundingClientRect();
-            // No intersection at all → element is fully clipped away
-            if (
-                elRect.right  <= aRect.left  ||
-                elRect.left   >= aRect.right ||
-                elRect.bottom <= aRect.top   ||
-                elRect.top    >= aRect.bottom
-            ) {
-                return true;
-            }
-        }
-        ancestor = ancestor.parentElement;
+  const elRect = el.getBoundingClientRect();
+  let ancestor = el.parentElement;
+  while (ancestor && ancestor !== document.documentElement) {
+    const style = getComputedStyle(ancestor);
+    const clipsX = ["hidden", "clip", "scroll", "auto"].includes(
+      style.overflowX,
+    );
+    const clipsY = ["hidden", "clip", "scroll", "auto"].includes(
+      style.overflowY,
+    );
+    if (clipsX || clipsY) {
+      const aRect = ancestor.getBoundingClientRect();
+      // No intersection at all → element is fully clipped away
+      if (
+        elRect.right <= aRect.left ||
+        elRect.left >= aRect.right ||
+        elRect.bottom <= aRect.top ||
+        elRect.top >= aRect.bottom
+      ) {
+        return true;
+      }
     }
-    return false;
+    ancestor = ancestor.parentElement;
+  }
+  return false;
 }
 
 function getTabIndex(el) {
-    const value = parseInt(el.getAttribute('tabindex'), 10);
-    return isNaN(value) ? 0 : value;
+  const value = parseInt(el.getAttribute("tabindex"), 10);
+  return isNaN(value) ? 0 : value;
 }
 
 /**
@@ -79,17 +84,20 @@ function getTabIndex(el) {
  * 2. Elements with tabindex = 0 or no tabindex, in DOM order
  */
 function sortByTabOrder(elements) {
-    const positive = elements.filter(el => getTabIndex(el) > 0)
-        .sort((a, b) => {
-            const diff = getTabIndex(a) - getTabIndex(b);
-            return diff !== 0 ? diff : (
-                a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
-            );
-        });
+  const positive = elements
+    .filter((el) => getTabIndex(el) > 0)
+    .sort((a, b) => {
+      const diff = getTabIndex(a) - getTabIndex(b);
+      return diff !== 0
+        ? diff
+        : a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
+          ? -1
+          : 1;
+    });
 
-    const natural = elements.filter(el => getTabIndex(el) <= 0);
+  const natural = elements.filter((el) => getTabIndex(el) <= 0);
 
-    return [...positive, ...natural];
+  return [...positive, ...natural];
 }
 
 /**
@@ -99,134 +107,143 @@ function sortByTabOrder(elements) {
  * @param {Element[]} sorted - focusable elements in tab order
  */
 function renderOverlay(sorted) {
-    const existing = document.getElementById(OVERLAY_ID);
-    if (existing) {
-        existing.remove();
-    }
-
-    // Build overlay
-    const overlay = document.createElement('div');
-    overlay.id = OVERLAY_ID;
-    overlay.className = 'mageforge-tab-order-overlay';
-
-    // SVG layer for connecting lines (rendered behind badges)
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.classList.add('mageforge-tab-order-svg');
-    svg.setAttribute('aria-hidden', 'true');
-    overlay.appendChild(svg);
-
-    document.body.appendChild(overlay);
-
-    // Place badges and record centre points
-    const centres = sorted.map((el, index) => {
-        const rect = el.getBoundingClientRect();
-        const cx = Math.round(rect.left + rect.width / 2);
-        const cy = Math.round(rect.top);
-
-        const clipped = isClippedByAncestor(el);
-        const badge = document.createElement('span');
-        badge.className = 'mageforge-tab-order-badge' +
-            (getTabIndex(el) > 0 ? ' mageforge-tab-order-badge--negative' : '') +
-            (clipped ? ' mageforge-tab-order-badge--clipped' : '');
-        badge.textContent = index + 1;
-        badge.style.left = cx + 'px';
-        badge.style.top = cy + 'px';
-        overlay.appendChild(badge);
-
-        return { cx, cy, negative: getTabIndex(el) > 0, clipped };
-    });
-
-    // Draw connecting lines between consecutive badges
-    for (let i = 0; i < centres.length - 1; i++) {
-        const from = centres[i];
-        const to = centres[i + 1];
-        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        line.classList.add('mageforge-tab-order-line');
-        if (from.negative || to.negative) {
-            line.classList.add('mageforge-tab-order-line--negative');
-        } else if (from.clipped || to.clipped) {
-            line.classList.add('mageforge-tab-order-line--clipped');
-        }
-        line.setAttribute('x1', from.cx);
-        line.setAttribute('y1', from.cy);
-        line.setAttribute('x2', to.cx);
-        line.setAttribute('y2', to.cy);
-        svg.appendChild(line);
+  const existing = document.getElementById(OVERLAY_ID);
+  if (existing) {
+    existing.remove();
+  }
+
+  // Build overlay
+  const overlay = document.createElement("div");
+  overlay.id = OVERLAY_ID;
+  overlay.className = "mageforge-tab-order-overlay";
+
+  // SVG layer for connecting lines (rendered behind badges)
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.classList.add("mageforge-tab-order-svg");
+  svg.setAttribute("aria-hidden", "true");
+  overlay.appendChild(svg);
+
+  document.body.appendChild(overlay);
+
+  // Place badges and record centre points
+  const centres = sorted.map((el, index) => {
+    const rect = el.getBoundingClientRect();
+    const cx = Math.round(rect.left + rect.width / 2);
+    const cy = Math.round(rect.top);
+
+    const clipped = isClippedByAncestor(el);
+    const badge = document.createElement("span");
+    badge.className =
+      "mageforge-tab-order-badge" +
+      (getTabIndex(el) > 0 ? " mageforge-tab-order-badge--negative" : "") +
+      (clipped ? " mageforge-tab-order-badge--clipped" : "");
+    badge.textContent = index + 1;
+    badge.style.left = cx + "px";
+    badge.style.top = cy + "px";
+    overlay.appendChild(badge);
+
+    return { cx, cy, negative: getTabIndex(el) > 0, clipped };
+  });
+
+  // Draw connecting lines between consecutive badges
+  for (let i = 0; i < centres.length - 1; i++) {
+    const from = centres[i];
+    const to = centres[i + 1];
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.classList.add("mageforge-tab-order-line");
+    if (from.negative || to.negative) {
+      line.classList.add("mageforge-tab-order-line--negative");
+    } else if (from.clipped || to.clipped) {
+      line.classList.add("mageforge-tab-order-line--clipped");
     }
+    line.setAttribute("x1", from.cx);
+    line.setAttribute("y1", from.cy);
+    line.setAttribute("x2", to.cx);
+    line.setAttribute("y2", to.cy);
+    svg.appendChild(line);
+  }
 }
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'tab-order',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M14 15a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M15 6a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M3 18a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M9 17l5 -1.5"></path><path d="M6.5 8.5l7.81 5.37"></path><path d="M7 7l8 -1"></path></svg>',
-    label: 'Show Tab Order',
-    description: 'Visualise keyboard tab order',
-
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        injectCss();
-
-        if (!active) {
-            context._tabOrderObserver?.disconnect();
-            context._tabOrderObserver = null;
-            if (context._tabOrderScrollHandler) {
-                document.removeEventListener('scroll', context._tabOrderScrollHandler, { capture: true });
-                context._tabOrderScrollHandler = null;
-            }
-            document.getElementById(OVERLAY_ID)?.remove();
-            return;
-        }
+  key: "tab-order",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M14 15a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M15 6a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M3 18a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M9 17l5 -1.5"></path><path d="M6.5 8.5l7.81 5.37"></path><path d="M7 7l8 -1"></path></svg>',
+  label: "Show Tab Order",
+  description: "Visualise keyboard tab order",
+
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    injectCss();
+
+    if (!active) {
+      context._tabOrderObserver?.disconnect();
+      context._tabOrderObserver = null;
+      if (context._tabOrderScrollHandler) {
+        document.removeEventListener("scroll", context._tabOrderScrollHandler, {
+          capture: true,
+        });
+        context._tabOrderScrollHandler = null;
+      }
+      document.getElementById(OVERLAY_ID)?.remove();
+      return;
+    }
 
-        const allFocusable = Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR))
-            .filter(el => !el.closest('.mageforge-toolbar'))
-            .filter(isVisible);
+    const allFocusable = Array.from(
+      document.querySelectorAll(FOCUSABLE_SELECTOR),
+    )
+      .filter((el) => !el.closest(".mageforge-toolbar"))
+      .filter(isVisible);
 
-        if (allFocusable.length === 0) {
-            context.setAuditCounterBadge('tab-order', '0', 'error');
-            return;
+    if (allFocusable.length === 0) {
+      context.setAuditCounterBadge("tab-order", "0", "error");
+      return;
+    }
+
+    const sorted = sortByTabOrder(allFocusable);
+    const hasNegative = sorted.some((el) => getTabIndex(el) > 0);
+
+    renderOverlay(sorted);
+
+    // Always recompute from the live DOM so detached / newly added elements are handled correctly
+    const rerender = () =>
+      renderOverlay(
+        sortByTabOrder(
+          Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR))
+            .filter((el) => !el.closest(".mageforge-toolbar"))
+            .filter(isVisible),
+        ),
+      );
+
+    // Re-render on resize or scroll (e.g. DevTools panel, page scroll)
+    context._tabOrderObserver = new ResizeObserver(() => {
+      if (!document.getElementById(OVERLAY_ID)) {
+        context._tabOrderObserver?.disconnect();
+        context._tabOrderObserver = null;
+        return;
+      }
+      rerender();
+    });
+    context._tabOrderObserver.observe(document.body);
+
+    let scrollRaf = null;
+    context._tabOrderScrollHandler = () => {
+      if (scrollRaf) return;
+      scrollRaf = requestAnimationFrame(() => {
+        scrollRaf = null;
+        if (document.getElementById(OVERLAY_ID)) {
+          rerender();
         }
+      });
+    };
+    document.addEventListener("scroll", context._tabOrderScrollHandler, {
+      capture: true,
+      passive: true,
+    });
 
-        const sorted = sortByTabOrder(allFocusable);
-        const hasNegative = sorted.some(el => getTabIndex(el) > 0);
-
-        renderOverlay(sorted);
-
-        // Always recompute from the live DOM so detached / newly added elements are handled correctly
-        const rerender = () => renderOverlay(
-            sortByTabOrder(
-                Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR))
-                    .filter(el => !el.closest('.mageforge-toolbar'))
-                    .filter(isVisible)
-            )
-        );
-
-        // Re-render on resize or scroll (e.g. DevTools panel, page scroll)
-        context._tabOrderObserver = new ResizeObserver(() => {
-            if (!document.getElementById(OVERLAY_ID)) {
-                context._tabOrderObserver?.disconnect();
-                context._tabOrderObserver = null;
-                return;
-            }
-            rerender();
-        });
-        context._tabOrderObserver.observe(document.body);
-
-        let scrollRaf = null;
-        context._tabOrderScrollHandler = () => {
-            if (scrollRaf) return;
-            scrollRaf = requestAnimationFrame(() => {
-                scrollRaf = null;
-                if (document.getElementById(OVERLAY_ID)) {
-                    rerender();
-                }
-            });
-        };
-        document.addEventListener('scroll', context._tabOrderScrollHandler, { capture: true, passive: true });
-
-        const type = hasNegative ? 'error' : 'success';
-        context.setAuditCounterBadge('tab-order', `${sorted.length}`, type);
-    },
+    const type = hasNegative ? "error" : "success";
+    context.setAuditCounterBadge("tab-order", `${sorted.length}`, type);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js b/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
index 5dbccd9f..794ed757 100644
--- a/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
+++ b/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
@@ -9,36 +9,43 @@
  * Icon source: Tabler Icons (MIT)
  */
 
-import { applyHighlight, clearHighlight } from './highlight.js';
+import { applyHighlight, clearHighlight } from "./highlight.js";
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'unsafe-blank-target',
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg>',
-    label: 'Unsafe Blank Target',
-    description: 'Highlight target="_blank" links with neither rel="noopener" nor rel="noreferrer"',
+  key: "unsafe-blank-target",
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg>',
+  label: "Unsafe Blank Target",
+  description:
+    'Highlight target="_blank" links with neither rel="noopener" nor rel="noreferrer"',
 
-    /**
-     * @param {object} context - Alpine toolbar component instance
-     * @param {boolean} active  - true = activate, false = deactivate
-     */
-    run(context, active) {
-        if (!active) {
-            clearHighlight(this.key);
-            return;
-        }
+  /**
+   * @param {object} context - Alpine toolbar component instance
+   * @param {boolean} active  - true = activate, false = deactivate
+   */
+  run(context, active) {
+    if (!active) {
+      clearHighlight(this.key);
+      return;
+    }
 
-        const elements = Array.from(
-            document.querySelectorAll('a[target="_blank"]')
-        ).filter(el => {
-            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
-            const style = getComputedStyle(el);
-            if (style.visibility === 'hidden' || style.display === 'none' || parseFloat(style.opacity) === 0) return false;
+    const elements = Array.from(
+      document.querySelectorAll('a[target="_blank"]'),
+    ).filter((el) => {
+      if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+        return false;
+      const style = getComputedStyle(el);
+      if (
+        style.visibility === "hidden" ||
+        style.display === "none" ||
+        parseFloat(style.opacity) === 0
+      )
+        return false;
 
-            const rel = (el.getAttribute('rel') || '').toLowerCase().split(/\s+/);
-            return !rel.includes('noopener') && !rel.includes('noreferrer');
-        });
+      const rel = (el.getAttribute("rel") || "").toLowerCase().split(/\s+/);
+      return !rel.includes("noopener") && !rel.includes("noreferrer");
+    });
 
-        applyHighlight(elements, this.key, context);
-    },
+    applyHighlight(elements, this.key, context);
+  },
 };
diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js
index f8ea8c09..34eb25a1 100644
--- a/src/view/frontend/web/js/toolbar/ui.js
+++ b/src/view/frontend/web/js/toolbar/ui.js
@@ -3,87 +3,101 @@
  */
 
 export const uiMethods = {
-    createToolbar() {
-        this.container = document.createElement('div');
-        this.container.className = 'mageforge-toolbar';
-
-        if (this.$el && this.$el.hasAttribute('data-theme')) {
-            this.container.setAttribute('data-theme', this.$el.getAttribute('data-theme'));
-        }
-
-        if (this.$el && this.$el.hasAttribute('data-position')) {
-            this.container.setAttribute('data-position', this.$el.getAttribute('data-position'));
-        }
-
-        if (this.$el && this.$el.getAttribute('data-show-labels') === '0') {
-            this.container.classList.add('mageforge-toolbar--no-labels');
-        }
-
-        // Menu popup (before buttons so it sits correctly in stacking context)
-        this.menu = document.createElement('div');
-        this.menu.className = 'mageforge-toolbar-menu';
-
-        const menuTitle = document.createElement('div');
-        menuTitle.className = 'mageforge-toolbar-menu-title';
-        menuTitle.innerHTML = `
+  createToolbar() {
+    this.container = document.createElement("div");
+    this.container.className = "mageforge-toolbar";
+
+    if (this.$el && this.$el.hasAttribute("data-theme")) {
+      this.container.setAttribute(
+        "data-theme",
+        this.$el.getAttribute("data-theme"),
+      );
+    }
+
+    if (this.$el && this.$el.hasAttribute("data-position")) {
+      this.container.setAttribute(
+        "data-position",
+        this.$el.getAttribute("data-position"),
+      );
+    }
+
+    if (this.$el && this.$el.getAttribute("data-show-labels") === "0") {
+      this.container.classList.add("mageforge-toolbar--no-labels");
+    }
+
+    // Menu popup (before buttons so it sits correctly in stacking context)
+    this.menu = document.createElement("div");
+    this.menu.className = "mageforge-toolbar-menu";
+
+    const menuTitle = document.createElement("div");
+    menuTitle.className = "mageforge-toolbar-menu-title";
+    menuTitle.innerHTML = `
             <span class="mageforge-toolbar-menu-title-text">MageForge Toolbar</span>
             <button type="button" class="mageforge-toolbar-menu-close" title="Close & deactivate all">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg>
             </button>
         `;
-        menuTitle.querySelector('.mageforge-toolbar-menu-close').onclick = (e) => {
-            e.stopPropagation();
-            this.deactivateAllAudits();
-            this.closeMenu();
-        };
-        this.menu.appendChild(menuTitle);
-
-        // Group audits by their group key; ungrouped items fall through
-        const grouped = {};
-        const ungrouped = [];
-        this.getAudits().forEach(audit => {
-            if (audit.group) {
-                (grouped[audit.group] = grouped[audit.group] || []).push(audit);
-            } else {
-                ungrouped.push(audit);
-            }
-        });
-
-        // Render defined groups in order
-        this.getAuditGroups().forEach(group => {
-            const items = grouped[group.key];
-            if (!items?.length) return;
-            this.menu.appendChild(this.createMenuGroup(group.key, group.label, items));
-        });
-
-        // Render any ungrouped audits below
-        ungrouped.forEach(audit => {
-            this.menu.appendChild(this.createMenuItem(
-                audit.key,
-                audit.icon,
-                audit.label,
-                audit.description,
-                () => this.runAudit(audit.key)
-            ));
-        });
-
-        // Footer – Health Score Gauge + Run All Tests
-        const menuFooter = document.createElement('div');
-        menuFooter.className = 'mageforge-toolbar-menu-footer';
-
-        const showHealthScore = this.$el?.getAttribute('data-show-health-score') !== '0';
-
-        if (showHealthScore) {
-            const ARC_LENGTH = 157.08;
-            const gradId = `mf-gauge-grad-${Math.random().toString(36).slice(2, 8)}`;
-            const healthWrapper = document.createElement('div');
-            healthWrapper.className = 'mageforge-toolbar-health-wrapper';
-
-            const gaugeSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            gaugeSvg.setAttribute('viewBox', '0 0 120 70');
-            gaugeSvg.setAttribute('class', 'mageforge-toolbar-health-gauge');
-            gaugeSvg.setAttribute('aria-hidden', 'true');
-            gaugeSvg.innerHTML = `
+    menuTitle.querySelector(".mageforge-toolbar-menu-close").onclick = (e) => {
+      e.stopPropagation();
+      this.deactivateAllAudits();
+      this.closeMenu();
+    };
+    this.menu.appendChild(menuTitle);
+
+    // Group audits by their group key; ungrouped items fall through
+    const grouped = {};
+    const ungrouped = [];
+    this.getAudits().forEach((audit) => {
+      if (audit.group) {
+        (grouped[audit.group] = grouped[audit.group] || []).push(audit);
+      } else {
+        ungrouped.push(audit);
+      }
+    });
+
+    // Render defined groups in order
+    this.getAuditGroups().forEach((group) => {
+      const items = grouped[group.key];
+      if (!items?.length) return;
+      this.menu.appendChild(
+        this.createMenuGroup(group.key, group.label, items),
+      );
+    });
+
+    // Render any ungrouped audits below
+    ungrouped.forEach((audit) => {
+      this.menu.appendChild(
+        this.createMenuItem(
+          audit.key,
+          audit.icon,
+          audit.label,
+          audit.description,
+          () => this.runAudit(audit.key),
+        ),
+      );
+    });
+
+    // Footer – Health Score Gauge + Run All Tests
+    const menuFooter = document.createElement("div");
+    menuFooter.className = "mageforge-toolbar-menu-footer";
+
+    const showHealthScore =
+      this.$el?.getAttribute("data-show-health-score") !== "0";
+
+    if (showHealthScore) {
+      const ARC_LENGTH = 157.08;
+      const gradId = `mf-gauge-grad-${Math.random().toString(36).slice(2, 8)}`;
+      const healthWrapper = document.createElement("div");
+      healthWrapper.className = "mageforge-toolbar-health-wrapper";
+
+      const gaugeSvg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+      );
+      gaugeSvg.setAttribute("viewBox", "0 0 120 70");
+      gaugeSvg.setAttribute("class", "mageforge-toolbar-health-gauge");
+      gaugeSvg.setAttribute("aria-hidden", "true");
+      gaugeSvg.innerHTML = `
                 <defs>
                     <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%">
                         <stop offset="0%" stop-color="#ef4444"></stop>
@@ -100,129 +114,168 @@ export const uiMethods = {
                       stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" opacity="0"></line>
                 <circle cx="60" cy="65" r="4" fill="rgba(255,255,255,0.4)"></circle>
             `;
-            healthWrapper.appendChild(gaugeSvg);
+      healthWrapper.appendChild(gaugeSvg);
 
-            const scoreTextWrapper = document.createElement('div');
-            scoreTextWrapper.className = 'mageforge-toolbar-health-score-text';
-            scoreTextWrapper.innerHTML = `
+      const scoreTextWrapper = document.createElement("div");
+      scoreTextWrapper.className = "mageforge-toolbar-health-score-text";
+      scoreTextWrapper.innerHTML = `
                 <div class="mageforge-toolbar-health-score-value">
                     <span class="mageforge-toolbar-health-score-number">--</span><span class="mageforge-toolbar-health-score-max">/100</span>
                 </div>
                 <div class="mageforge-toolbar-health-score-label">Overall Health Score</div>
             `;
-            healthWrapper.appendChild(scoreTextWrapper);
-            menuFooter.appendChild(healthWrapper);
-
-            // Run All Tests + Reset button row (with score)
-            const buttonRow = document.createElement('div');
-            buttonRow.className = 'mageforge-toolbar-menu-button-row';
-
-            this.runAllButton = document.createElement('div');
-            this.runAllButton.setAttribute('role', 'button');
-            this.runAllButton.setAttribute('tabindex', '0');
-            this.runAllButton.className = 'mageforge-toolbar-menu-run-all';
-            this.runAllButton.innerHTML = `
+      healthWrapper.appendChild(scoreTextWrapper);
+      menuFooter.appendChild(healthWrapper);
+
+      // Run All Tests + Reset button row (with score)
+      const buttonRow = document.createElement("div");
+      buttonRow.className = "mageforge-toolbar-menu-button-row";
+
+      this.runAllButton = document.createElement("div");
+      this.runAllButton.setAttribute("role", "button");
+      this.runAllButton.setAttribute("tabindex", "0");
+      this.runAllButton.className = "mageforge-toolbar-menu-run-all";
+      this.runAllButton.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
                 RUN ALL TESTS
             `;
-            this.runAllButton.onclick = (e) => {
-                e.stopPropagation();
-                this.runAllAuditsForScore();
-            };
-            this.runAllButton.onkeydown = (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); this.runAllAuditsForScore(); }
-                if (e.key === ' ') { e.preventDefault(); }
-            };
-            this.runAllButton.onkeyup = (e) => {
-                if (e.key === ' ') { e.stopPropagation(); this.runAllAuditsForScore(); }
-            };
-            buttonRow.appendChild(this.runAllButton);
-
-            this.resetButton = document.createElement('div');
-            this.resetButton.setAttribute('role', 'button');
-            this.resetButton.setAttribute('tabindex', '0');
-            this.resetButton.className = 'mageforge-toolbar-menu-reset';
-            this.resetButton.title = 'Reset score and deactivate all audits';
-            this.resetButton.setAttribute('aria-label', 'Reset score and deactivate all audits');
-            this.resetButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>`;
-            this.resetButton.onclick = (e) => {
-                e.stopPropagation();
-                this.resetScore();
-            };
-            this.resetButton.onkeydown = (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); this.resetScore(); }
-                if (e.key === ' ') { e.preventDefault(); }
-            };
-            this.resetButton.onkeyup = (e) => {
-                if (e.key === ' ') { e.stopPropagation(); this.resetScore(); }
-            };
-            buttonRow.appendChild(this.resetButton);
-
-            menuFooter.appendChild(buttonRow);
-        } else {
-            // No health score – button row with Run All + Reset
-            const buttonRow = document.createElement('div');
-            buttonRow.className = 'mageforge-toolbar-menu-button-row';
-
-            this.runAllButton = document.createElement('div');
-            this.runAllButton.setAttribute('role', 'button');
-            this.runAllButton.setAttribute('tabindex', '0');
-            this.runAllButton.className = 'mageforge-toolbar-menu-run-all';
-            this.runAllButton.innerHTML = `
+      this.runAllButton.onclick = (e) => {
+        e.stopPropagation();
+        this.runAllAuditsForScore();
+      };
+      this.runAllButton.onkeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.runAllAuditsForScore();
+        }
+        if (e.key === " ") {
+          e.preventDefault();
+        }
+      };
+      this.runAllButton.onkeyup = (e) => {
+        if (e.key === " ") {
+          e.stopPropagation();
+          this.runAllAuditsForScore();
+        }
+      };
+      buttonRow.appendChild(this.runAllButton);
+
+      this.resetButton = document.createElement("div");
+      this.resetButton.setAttribute("role", "button");
+      this.resetButton.setAttribute("tabindex", "0");
+      this.resetButton.className = "mageforge-toolbar-menu-reset";
+      this.resetButton.title = "Reset score and deactivate all audits";
+      this.resetButton.setAttribute(
+        "aria-label",
+        "Reset score and deactivate all audits",
+      );
+      this.resetButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>`;
+      this.resetButton.onclick = (e) => {
+        e.stopPropagation();
+        this.resetScore();
+      };
+      this.resetButton.onkeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.resetScore();
+        }
+        if (e.key === " ") {
+          e.preventDefault();
+        }
+      };
+      this.resetButton.onkeyup = (e) => {
+        if (e.key === " ") {
+          e.stopPropagation();
+          this.resetScore();
+        }
+      };
+      buttonRow.appendChild(this.resetButton);
+
+      menuFooter.appendChild(buttonRow);
+    } else {
+      // No health score – button row with Run All + Reset
+      const buttonRow = document.createElement("div");
+      buttonRow.className = "mageforge-toolbar-menu-button-row";
+
+      this.runAllButton = document.createElement("div");
+      this.runAllButton.setAttribute("role", "button");
+      this.runAllButton.setAttribute("tabindex", "0");
+      this.runAllButton.className = "mageforge-toolbar-menu-run-all";
+      this.runAllButton.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
                 RUN ALL TESTS
             `;
-            this.runAllButton.onclick = (e) => {
-                e.stopPropagation();
-                this.runAllAuditsForScore();
-            };
-            this.runAllButton.onkeydown = (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); this.runAllAuditsForScore(); }
-                if (e.key === ' ') { e.preventDefault(); }
-            };
-            this.runAllButton.onkeyup = (e) => {
-                if (e.key === ' ') { e.stopPropagation(); this.runAllAuditsForScore(); }
-            };
-            buttonRow.appendChild(this.runAllButton);
-
-            this.resetButton = document.createElement('div');
-            this.resetButton.setAttribute('role', 'button');
-            this.resetButton.setAttribute('tabindex', '0');
-            this.resetButton.className = 'mageforge-toolbar-menu-reset';
-            this.resetButton.title = 'Deactivate all audits';
-            this.resetButton.setAttribute('aria-label', 'Deactivate all audits');
-            this.resetButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>`;
-            this.resetButton.onclick = (e) => {
-                e.stopPropagation();
-                this.resetScore();
-            };
-            this.resetButton.onkeydown = (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); this.resetScore(); }
-                if (e.key === ' ') { e.preventDefault(); }
-            };
-            this.resetButton.onkeyup = (e) => {
-                if (e.key === ' ') { e.stopPropagation(); this.resetScore(); }
-            };
-            buttonRow.appendChild(this.resetButton);
-
-            menuFooter.appendChild(buttonRow);
+      this.runAllButton.onclick = (e) => {
+        e.stopPropagation();
+        this.runAllAuditsForScore();
+      };
+      this.runAllButton.onkeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.runAllAuditsForScore();
         }
-
-        const credit = document.createElement('div');
-        credit.className = 'mageforge-toolbar-menu-credit';
-        credit.innerHTML = `Built with <span class="mageforge-toolbar-menu-credit-heart">❤</span> by <a href="https://github.com/OpenForgeProject/mageforge" target="_blank" rel="noopener noreferrer" class="mageforge-toolbar-menu-credit-link">MageForge</a>`;
-        menuFooter.appendChild(credit);
-        this.menu.appendChild(menuFooter);
-
-        // Burger button (left) — div avoids Luma/theme button CSS overrides
-        this.burgerButton = document.createElement('div');
-        this.burgerButton.className = 'mageforge-toolbar-burger';
-        this.burgerButton.title = 'Audit tools';
-        this.burgerButton.setAttribute('role', 'button');
-        this.burgerButton.setAttribute('tabindex', '0');
-        this.burgerButton.setAttribute('aria-label', 'MageForge Toolbar');
-        this.burgerButton.setAttribute('aria-expanded', 'false');
-        this.burgerButton.innerHTML = `
+        if (e.key === " ") {
+          e.preventDefault();
+        }
+      };
+      this.runAllButton.onkeyup = (e) => {
+        if (e.key === " ") {
+          e.stopPropagation();
+          this.runAllAuditsForScore();
+        }
+      };
+      buttonRow.appendChild(this.runAllButton);
+
+      this.resetButton = document.createElement("div");
+      this.resetButton.setAttribute("role", "button");
+      this.resetButton.setAttribute("tabindex", "0");
+      this.resetButton.className = "mageforge-toolbar-menu-reset";
+      this.resetButton.title = "Deactivate all audits";
+      this.resetButton.setAttribute("aria-label", "Deactivate all audits");
+      this.resetButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>`;
+      this.resetButton.onclick = (e) => {
+        e.stopPropagation();
+        this.resetScore();
+      };
+      this.resetButton.onkeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.resetScore();
+        }
+        if (e.key === " ") {
+          e.preventDefault();
+        }
+      };
+      this.resetButton.onkeyup = (e) => {
+        if (e.key === " ") {
+          e.stopPropagation();
+          this.resetScore();
+        }
+      };
+      buttonRow.appendChild(this.resetButton);
+
+      menuFooter.appendChild(buttonRow);
+    }
+
+    const credit = document.createElement("div");
+    credit.className = "mageforge-toolbar-menu-credit";
+    credit.innerHTML = `Built with <span class="mageforge-toolbar-menu-credit-heart">❤</span> by <a href="https://github.com/OpenForgeProject/mageforge" target="_blank" rel="noopener noreferrer" class="mageforge-toolbar-menu-credit-link">MageForge</a>`;
+    menuFooter.appendChild(credit);
+    this.menu.appendChild(menuFooter);
+
+    // Burger button (left) — div avoids Luma/theme button CSS overrides
+    this.burgerButton = document.createElement("div");
+    this.burgerButton.className = "mageforge-toolbar-burger";
+    this.burgerButton.title = "Audit tools";
+    this.burgerButton.setAttribute("role", "button");
+    this.burgerButton.setAttribute("tabindex", "0");
+    this.burgerButton.setAttribute("aria-label", "MageForge Toolbar");
+    this.burgerButton.setAttribute("aria-expanded", "false");
+    this.burgerButton.innerHTML = `
             <span class="mageforge-toolbar-burger-icon">
                 <span class="mageforge-toolbar-burger-bar"></span>
                 <span class="mageforge-toolbar-burger-bar"></span>
@@ -230,279 +283,313 @@ export const uiMethods = {
             </span>
             <span class="mageforge-toolbar-burger-label">MageForge Toolbar</span>
         `;
-        this.burgerButton.onclick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.toggleMenu();
-        };
-        this.burgerButton.onkeydown = (e) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.toggleMenu();
-            }
-            if (e.key === ' ') {
-                e.preventDefault(); // prevent page scroll
-            }
-        };
-        this.burgerButton.onkeyup = (e) => {
-            if (e.key === ' ') {
-                e.stopPropagation();
-                this.toggleMenu();
-            }
-        };
-
-        this.container.appendChild(this.menu);
-        this.container.appendChild(this.burgerButton);
-        // Note: inspector button is appended by the mageforgeInspector Alpine component via _appendInspectorButton()
-
-        // Close menu when clicking outside the toolbar
-        this._outsideClickHandler = (e) => {
-            if (this.menuOpen && !this.container.contains(e.target)) {
-                this.closeMenu();
-            }
-        };
-        document.addEventListener('click', this._outsideClickHandler);
-
-        document.body.appendChild(this.container);
-    },
-
-    /**
-     * Create a collapsible group section containing audit menu items.
-     *
-     * @param {string}   key    - Group key
-     * @param {string}   label  - Display label
-     * @param {object[]} audits - Audit definitions belonging to this group
-     * @return {HTMLDivElement}
-     */
-    createMenuGroup(key, label, audits) {
-        const group = document.createElement('div');
-        group.className = 'mageforge-toolbar-menu-group';
-        group.dataset.groupKey = key;
-
-        const header = document.createElement('div');
-        header.setAttribute('role', 'button');
-        header.setAttribute('tabindex', '0');
-        header.className = 'mageforge-toolbar-menu-group-header';
-        header.setAttribute('aria-expanded', String(!this.collapsedGroups.has(key)));
-        header.onclick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.toggleGroup(key);
-        };
-        header.onkeydown = (e) => {
-            if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); this.toggleGroup(key); }
-            if (e.key === ' ') { e.preventDefault(); }
-        };
-        header.onkeyup = (e) => {
-            if (e.key === ' ') { e.stopPropagation(); this.toggleGroup(key); }
-        };
-
-        const headerLabel = document.createElement('span');
-        headerLabel.className = 'mageforge-toolbar-menu-group-label';
-        headerLabel.textContent = label;
-
-        const chevron = document.createElement('span');
-        chevron.className = 'mageforge-toolbar-menu-group-chevron';
-        chevron.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>`;
-
-        header.appendChild(headerLabel);
-        header.appendChild(chevron);
-        group.appendChild(header);
-
-        group.classList.toggle('mageforge-toolbar-menu-group--collapsed', this.collapsedGroups.has(key));
-
-        const items = document.createElement('div');
-        items.className = 'mageforge-toolbar-menu-group-items';
-
-        audits.forEach(audit => {
-            items.appendChild(this.createMenuItem(
-                audit.key,
-                audit.icon,
-                audit.label,
-                audit.description,
-                () => this.runAudit(audit.key),
-                key
-            ));
-        });
-
-        group.appendChild(items);
-        return group;
-    },
-
-    /**
-     * Create a single audit menu item button
-     *
-     * @param {string} key
-     * @param {string} icon
-     * @param {string} label
-     * @param {string} description
-     * @param {Function} callback
-     * @param {?string} groupKey - Optional parent group key for the item
-     * @return {HTMLDivElement}
-     */
-    createMenuItem(key, icon, label, description, callback, groupKey = null) {
-        const item = document.createElement('div');
-        item.setAttribute('role', 'button');
-        item.setAttribute('tabindex', '0');
-        item.className = 'mageforge-toolbar-menu-item';
-        item.dataset.auditKey = key;
-        if (groupKey) item.dataset.groupKey = groupKey;
-        item.setAttribute('aria-pressed', 'false');
-
-        const iconEl = document.createElement('span');
-        iconEl.className = 'mageforge-toolbar-menu-icon';
-        iconEl.innerHTML = icon;
-
-        const labelEl = document.createElement('span');
-        labelEl.className = 'mageforge-toolbar-menu-label';
-        labelEl.textContent = label;
-
-        const statusEl = document.createElement('span');
-        statusEl.className = 'mageforge-toolbar-menu-status';
-
-        const labelRowEl = document.createElement('span');
-        labelRowEl.className = 'mageforge-toolbar-menu-label-row';
-        labelRowEl.appendChild(labelEl);
-        labelRowEl.appendChild(statusEl);
-
-        const descEl = document.createElement('span');
-        descEl.className = 'mageforge-toolbar-menu-desc';
-        descEl.textContent = description;
-        descEl.addEventListener('click', e => {
-            if (descEl.classList.contains('mageforge-active')) e.stopPropagation();
-        });
-        descEl.addEventListener('mousedown', e => {
-            if (descEl.classList.contains('mageforge-active')) e.stopPropagation();
-        });
-        const textEl = document.createElement('span');
-        textEl.className = 'mageforge-toolbar-menu-text';
-        textEl.appendChild(labelRowEl);
-        textEl.appendChild(descEl);
-
-        const toggleEl = document.createElement('span');
-        toggleEl.className = 'mageforge-toolbar-menu-toggle';
-
-        item.appendChild(iconEl);
-        item.appendChild(textEl);
-        item.appendChild(toggleEl);
-
-        item.onclick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            callback();
-        };
-        item.onkeydown = (e) => {
-            if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); callback(); }
-            if (e.key === ' ') { e.preventDefault(); }
-        };
-        item.onkeyup = (e) => {
-            if (e.key === ' ') { e.stopPropagation(); callback(); }
-        };
-        return item;
-    },
-
-    /**
-     * Update the visual active state of an audit menu item.
-     *
-     * @param {string} key
-     * @param {boolean} active
-     */
-    setAuditActive(key, active) {
-        if (!this.menu) return;
-        const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
-        if (!item) return;
-        item.classList.toggle('mageforge-active', active);
-        item.setAttribute('aria-pressed', String(active));
-        if (!active) {
-            item.classList.remove('mageforge-active--error');
-            const status = item.querySelector('.mageforge-toolbar-menu-status');
-            if (status) {
-                status.textContent = '';
-                status.className = 'mageforge-toolbar-menu-status';
-            }
-        }
-        this.updateToggleAllButton();
-    },
-
-    /**
-     * No-op – retained for compatibility; the Run All Tests button has no dynamic label.
-     */
-    updateToggleAllButton() {},
-
-    /**
-     * Reset the health score gauge and deactivate all audits.
-     */
-    resetScore() {
-        this.deactivateAllAudits();
-        if (!this.menu) return;
-        const ARC_LENGTH = 157.08;
-        const progress = this.menu.querySelector('.mageforge-health-gauge-progress');
-        const needle   = this.menu.querySelector('.mageforge-health-gauge-needle');
-        const numberEl = this.menu.querySelector('.mageforge-toolbar-health-score-number');
-        if (numberEl) numberEl.textContent = '--';
-        if (progress) progress.setAttribute('stroke-dasharray', `0 ${ARC_LENGTH}`);
-        if (needle)   needle.setAttribute('opacity', '0');
-    },
-
-    /**
-     * Update the health score gauge and numeric display (0–100).
-     *
-     * @param {number} score
-     */
-    updateHealthScore(score) {
-        if (!this.menu) return;
-        const ARC_LENGTH = 157.08;
-        const progress = this.menu.querySelector('.mageforge-health-gauge-progress');
-        const needle   = this.menu.querySelector('.mageforge-health-gauge-needle');
-        const numberEl = this.menu.querySelector('.mageforge-toolbar-health-score-number');
-
-        if (numberEl) numberEl.textContent = score;
-
-        if (progress) {
-            const dash = ((score / 100) * ARC_LENGTH).toFixed(2);
-            progress.setAttribute('stroke-dasharray', `${dash} ${ARC_LENGTH}`);
-        }
-
-        if (needle) {
-            const rad = (1 - score / 100) * Math.PI;
-            needle.setAttribute('x2', (60 + 45 * Math.cos(rad)).toFixed(1));
-            needle.setAttribute('y2', (65 - 45 * Math.sin(rad)).toFixed(1));
-            needle.setAttribute('opacity', '1');
-        }
-    },
-
-    toggleMenu() {
-        this.menuOpen ? this.closeMenu() : this.openMenu();
-    },
-
-    openMenu() {
-        this.menuOpen = true;
-        this.menu.classList.add('mageforge-menu-open');
-        this.burgerButton.classList.add('mageforge-active');
-        this.burgerButton.setAttribute('aria-expanded', 'true');
-    },
-
-    closeMenu() {
-        this.menuOpen = false;
-        this.menu.classList.remove('mageforge-menu-open');
-        this.burgerButton.classList.remove('mageforge-active');
-        this.burgerButton.setAttribute('aria-expanded', 'false');
-    },
-
-    destroyToolbar() {
-        if (this._outsideClickHandler) {
-            document.removeEventListener('click', this._outsideClickHandler);
-            this._outsideClickHandler = null;
-        }
-        if (this.container && this.container.parentNode) {
-            this.container.parentNode.removeChild(this.container);
-        }
-        this.container = null;
-        this.menu = null;
-        this.burgerButton = null;
-        this.runAllButton = null;
-        this.resetButton = null;
-        this.menuOpen = false;
-    },
+    this.burgerButton.onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggleMenu();
+    };
+    this.burgerButton.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleMenu();
+      }
+      if (e.key === " ") {
+        e.preventDefault(); // prevent page scroll
+      }
+    };
+    this.burgerButton.onkeyup = (e) => {
+      if (e.key === " ") {
+        e.stopPropagation();
+        this.toggleMenu();
+      }
+    };
+
+    this.container.appendChild(this.menu);
+    this.container.appendChild(this.burgerButton);
+    // Note: inspector button is appended by the mageforgeInspector Alpine component via _appendInspectorButton()
+
+    // Close menu when clicking outside the toolbar
+    this._outsideClickHandler = (e) => {
+      if (this.menuOpen && !this.container.contains(e.target)) {
+        this.closeMenu();
+      }
+    };
+    document.addEventListener("click", this._outsideClickHandler);
+
+    document.body.appendChild(this.container);
+  },
+
+  /**
+   * Create a collapsible group section containing audit menu items.
+   *
+   * @param {string}   key    - Group key
+   * @param {string}   label  - Display label
+   * @param {object[]} audits - Audit definitions belonging to this group
+   * @return {HTMLDivElement}
+   */
+  createMenuGroup(key, label, audits) {
+    const group = document.createElement("div");
+    group.className = "mageforge-toolbar-menu-group";
+    group.dataset.groupKey = key;
+
+    const header = document.createElement("div");
+    header.setAttribute("role", "button");
+    header.setAttribute("tabindex", "0");
+    header.className = "mageforge-toolbar-menu-group-header";
+    header.setAttribute(
+      "aria-expanded",
+      String(!this.collapsedGroups.has(key)),
+    );
+    header.onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggleGroup(key);
+    };
+    header.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleGroup(key);
+      }
+      if (e.key === " ") {
+        e.preventDefault();
+      }
+    };
+    header.onkeyup = (e) => {
+      if (e.key === " ") {
+        e.stopPropagation();
+        this.toggleGroup(key);
+      }
+    };
+
+    const headerLabel = document.createElement("span");
+    headerLabel.className = "mageforge-toolbar-menu-group-label";
+    headerLabel.textContent = label;
+
+    const chevron = document.createElement("span");
+    chevron.className = "mageforge-toolbar-menu-group-chevron";
+    chevron.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>`;
+
+    header.appendChild(headerLabel);
+    header.appendChild(chevron);
+    group.appendChild(header);
+
+    group.classList.toggle(
+      "mageforge-toolbar-menu-group--collapsed",
+      this.collapsedGroups.has(key),
+    );
+
+    const items = document.createElement("div");
+    items.className = "mageforge-toolbar-menu-group-items";
+
+    audits.forEach((audit) => {
+      items.appendChild(
+        this.createMenuItem(
+          audit.key,
+          audit.icon,
+          audit.label,
+          audit.description,
+          () => this.runAudit(audit.key),
+          key,
+        ),
+      );
+    });
+
+    group.appendChild(items);
+    return group;
+  },
+
+  /**
+   * Create a single audit menu item button
+   *
+   * @param {string} key
+   * @param {string} icon
+   * @param {string} label
+   * @param {string} description
+   * @param {Function} callback
+   * @param {?string} groupKey - Optional parent group key for the item
+   * @return {HTMLDivElement}
+   */
+  createMenuItem(key, icon, label, description, callback, groupKey = null) {
+    const item = document.createElement("div");
+    item.setAttribute("role", "button");
+    item.setAttribute("tabindex", "0");
+    item.className = "mageforge-toolbar-menu-item";
+    item.dataset.auditKey = key;
+    if (groupKey) item.dataset.groupKey = groupKey;
+    item.setAttribute("aria-pressed", "false");
+
+    const iconEl = document.createElement("span");
+    iconEl.className = "mageforge-toolbar-menu-icon";
+    iconEl.innerHTML = icon;
+
+    const labelEl = document.createElement("span");
+    labelEl.className = "mageforge-toolbar-menu-label";
+    labelEl.textContent = label;
+
+    const statusEl = document.createElement("span");
+    statusEl.className = "mageforge-toolbar-menu-status";
+
+    const labelRowEl = document.createElement("span");
+    labelRowEl.className = "mageforge-toolbar-menu-label-row";
+    labelRowEl.appendChild(labelEl);
+    labelRowEl.appendChild(statusEl);
+
+    const descEl = document.createElement("span");
+    descEl.className = "mageforge-toolbar-menu-desc";
+    descEl.textContent = description;
+    descEl.addEventListener("click", (e) => {
+      if (descEl.classList.contains("mageforge-active")) e.stopPropagation();
+    });
+    descEl.addEventListener("mousedown", (e) => {
+      if (descEl.classList.contains("mageforge-active")) e.stopPropagation();
+    });
+    const textEl = document.createElement("span");
+    textEl.className = "mageforge-toolbar-menu-text";
+    textEl.appendChild(labelRowEl);
+    textEl.appendChild(descEl);
+
+    const toggleEl = document.createElement("span");
+    toggleEl.className = "mageforge-toolbar-menu-toggle";
+
+    item.appendChild(iconEl);
+    item.appendChild(textEl);
+    item.appendChild(toggleEl);
+
+    item.onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      callback();
+    };
+    item.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        callback();
+      }
+      if (e.key === " ") {
+        e.preventDefault();
+      }
+    };
+    item.onkeyup = (e) => {
+      if (e.key === " ") {
+        e.stopPropagation();
+        callback();
+      }
+    };
+    return item;
+  },
+
+  /**
+   * Update the visual active state of an audit menu item.
+   *
+   * @param {string} key
+   * @param {boolean} active
+   */
+  setAuditActive(key, active) {
+    if (!this.menu) return;
+    const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+    if (!item) return;
+    item.classList.toggle("mageforge-active", active);
+    item.setAttribute("aria-pressed", String(active));
+    if (!active) {
+      item.classList.remove("mageforge-active--error");
+      const status = item.querySelector(".mageforge-toolbar-menu-status");
+      if (status) {
+        status.textContent = "";
+        status.className = "mageforge-toolbar-menu-status";
+      }
+    }
+    this.updateToggleAllButton();
+  },
+
+  /**
+   * No-op – retained for compatibility; the Run All Tests button has no dynamic label.
+   */
+  updateToggleAllButton() {},
+
+  /**
+   * Reset the health score gauge and deactivate all audits.
+   */
+  resetScore() {
+    this.deactivateAllAudits();
+    if (!this.menu) return;
+    const ARC_LENGTH = 157.08;
+    const progress = this.menu.querySelector(
+      ".mageforge-health-gauge-progress",
+    );
+    const needle = this.menu.querySelector(".mageforge-health-gauge-needle");
+    const numberEl = this.menu.querySelector(
+      ".mageforge-toolbar-health-score-number",
+    );
+    if (numberEl) numberEl.textContent = "--";
+    if (progress) progress.setAttribute("stroke-dasharray", `0 ${ARC_LENGTH}`);
+    if (needle) needle.setAttribute("opacity", "0");
+  },
+
+  /**
+   * Update the health score gauge and numeric display (0–100).
+   *
+   * @param {number} score
+   */
+  updateHealthScore(score) {
+    if (!this.menu) return;
+    const ARC_LENGTH = 157.08;
+    const progress = this.menu.querySelector(
+      ".mageforge-health-gauge-progress",
+    );
+    const needle = this.menu.querySelector(".mageforge-health-gauge-needle");
+    const numberEl = this.menu.querySelector(
+      ".mageforge-toolbar-health-score-number",
+    );
+
+    if (numberEl) numberEl.textContent = score;
+
+    if (progress) {
+      const dash = ((score / 100) * ARC_LENGTH).toFixed(2);
+      progress.setAttribute("stroke-dasharray", `${dash} ${ARC_LENGTH}`);
+    }
+
+    if (needle) {
+      const rad = (1 - score / 100) * Math.PI;
+      needle.setAttribute("x2", (60 + 45 * Math.cos(rad)).toFixed(1));
+      needle.setAttribute("y2", (65 - 45 * Math.sin(rad)).toFixed(1));
+      needle.setAttribute("opacity", "1");
+    }
+  },
+
+  toggleMenu() {
+    this.menuOpen ? this.closeMenu() : this.openMenu();
+  },
+
+  openMenu() {
+    this.menuOpen = true;
+    this.menu.classList.add("mageforge-menu-open");
+    this.burgerButton.classList.add("mageforge-active");
+    this.burgerButton.setAttribute("aria-expanded", "true");
+  },
+
+  closeMenu() {
+    this.menuOpen = false;
+    this.menu.classList.remove("mageforge-menu-open");
+    this.burgerButton.classList.remove("mageforge-active");
+    this.burgerButton.setAttribute("aria-expanded", "false");
+  },
+
+  destroyToolbar() {
+    if (this._outsideClickHandler) {
+      document.removeEventListener("click", this._outsideClickHandler);
+      this._outsideClickHandler = null;
+    }
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+    this.container = null;
+    this.menu = null;
+    this.burgerButton = null;
+    this.runAllButton = null;
+    this.resetButton = null;
+    this.menuOpen = false;
+  },
 };