updates component explorer (#296938)

* updates component explorer

* updates package.json

* fix screenshot CI: install build/ dependencies for jsonc-parser

* sets relative base

* updates lockfile

.github/workflows/screenshot-test.yml

@@ -36,10 +36,18 @@ jobs:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Install build dependencies
+        run: npm ci
+        working-directory: build
+
       - name: Install build/vite dependencies
         run: rm -f package-lock.json && npm install
         working-directory: build/vite
 
+      - name: Build vite
+        run: npm run build
+        working-directory: build/vite
+
       - name: Install Playwright Chromium
         run: npx playwright install chromium
 
@@ -51,10 +59,23 @@ jobs:
         run: |
           npx component-explorer screenshot:compare \
             --project ./test/componentFixtures \
-            --report ./test/componentFixtures/.screenshots/report.json \
-            --report-markdown ./test/componentFixtures/.screenshots/report.md
+            --report ./test/componentFixtures/.screenshots/report
         continue-on-error: true
 
+      - name: Prepare explorer artifact
+        run: |
+          mkdir -p /tmp/explorer-artifact/screenshot-report
+          cp -r build/vite/dist/* /tmp/explorer-artifact/
+          if [ -d test/componentFixtures/.screenshots/report ]; then
+            cp -r test/componentFixtures/.screenshots/report/* /tmp/explorer-artifact/screenshot-report/
+          fi
+
+      - name: Upload explorer artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: component-explorer
+          path: /tmp/explorer-artifact/
+
       - name: Upload screenshot report
         if: steps.compare.outcome == 'failure'
         uses: actions/upload-artifact@v4
@@ -62,14 +83,13 @@ jobs:
           name: screenshot-diff
           path: |
             test/componentFixtures/.screenshots/current/
-            test/componentFixtures/.screenshots/report.json
-            test/componentFixtures/.screenshots/report.md
+            test/componentFixtures/.screenshots/report/
 
       - name: Set check title
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          REPORT="test/componentFixtures/.screenshots/report.json"
+          REPORT="test/componentFixtures/.screenshots/report/report.json"
           if [ -f "$REPORT" ]; then
             CHANGED=$(node -e "const r = require('./$REPORT'); console.log(r.summary.added + r.summary.removed + r.summary.changed)")
             TITLE="${CHANGED} screenshots changed"
@@ -90,8 +110,8 @@ jobs:
 
       - name: Post summary
         run: |
-          if [ -f test/componentFixtures/.screenshots/report.md ]; then
-            cat test/componentFixtures/.screenshots/report.md >> $GITHUB_STEP_SUMMARY
+          if [ -f test/componentFixtures/.screenshots/report/report.md ]; then
+            cat test/componentFixtures/.screenshots/report/report.md >> $GITHUB_STEP_SUMMARY
           else
             echo "## Screenshots ✅" >> $GITHUB_STEP_SUMMARY
             echo "No visual changes detected." >> $GITHUB_STEP_SUMMARY