fix: update formatUtil imports to use shared package

- Replace @/utils/formatUtil imports with @comfyorg/shared-frontend-utils/formatUtil
- Fixes import resolution issues after main rebase
- All tests pass (3670/3932) with correct package dependencies

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -36,9 +36,9 @@ body:
         3. Click Queue Prompt
         4. See error
       value: |
-        1. 
-        2. 
-        3. 
+        1.
+        2.
+        3.
     validations:
       required: true
 

.github/actions/comment-release-links/action.yaml

@@ -57,11 +57,11 @@ runs:
           package.json)
             LINKS_VALUE=$(printf '%s\n%s' \
               'PyPI|https://pypi.org/project/comfyui-frontend-package/{{version}}/' \
-              'npm types|https://npm.im/@comfyorg/comfyui-frontend-types@{{version}}')
+              'npm types|https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types/v/{{version}}')
             ;;
           apps/desktop-ui/package.json)
             MARKER='desktop-release-summary'
-            LINKS_VALUE='npm desktop UI|https://npm.im/@comfyorg/desktop-ui@{{version}}'
+            LINKS_VALUE='npm desktop UI|https://www.npmjs.com/package/@comfyorg/desktop-ui/v/{{version}}'
             ;;
         esac
 
@@ -74,7 +74,7 @@ runs:
           echo "<!--$MARKER:$DIFF_PREFIX$NEW_VERSION-->"
           echo "$MESSAGE"
           echo ""
-          echo "- $DIFF_LABEL: [$DIFF_PREFIX$PREV_VERSION...$DIFF_PREFIX$NEW_VERSION]($DIFF_URL)"
+          echo "- $DIFF_LABEL: [\`$DIFF_PREFIX$PREV_VERSION...$DIFF_PREFIX$NEW_VERSION\`]($DIFF_URL)"
 
           while IFS= read -r RAW_LINE; do
             LINE=$(echo "$RAW_LINE" | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')
@@ -87,7 +87,7 @@ runs:
             URL_TEMPLATE=${LINE#*|}
             URL=${URL_TEMPLATE//\{\{version\}\}/$NEW_VERSION}
             URL=${URL//\{\{prev_version\}\}/$PREV_VERSION}
-            echo "- $LABEL: $URL"
+            echo "- $LABEL: [\`$NEW_VERSION\`]($URL)"
           done <<< "$LINKS_VALUE"
 
           echo ""

.github/workflows/api-update-manager-api-types.yaml

@@ -105,4 +105,4 @@ jobs:
           labels: Manager
           delete-branch: true
           add-paths: |
-            src/types/generatedManagerTypes.ts
+            src/types/generatedManagerTypes.ts

.github/workflows/ci-lint-format.yaml

@@ -51,7 +51,7 @@ jobs:
           if [ -n "$(git status --porcelain)" ]; then
             echo "changed=true" >> $GITHUB_OUTPUT
           else
-            echo "changed=false" >> $GITHUB_OUTPUT  
+            echo "changed=false" >> $GITHUB_OUTPUT
           fi
 
       - name: Commit changes

.github/workflows/ci-python-validation.yaml

@@ -6,7 +6,7 @@ on:
     paths:
       - 'tools/devtools/**'
   push:
-    branches: [ main ]
+    branches: [main]
     paths:
       - 'tools/devtools/**'
 

.github/workflows/ci-tests-e2e-forks.yaml

@@ -13,7 +13,7 @@ jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
     if: |
-      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.head_repository != null &&
       github.event.workflow_run.repository != null &&
@@ -43,14 +43,14 @@ jobs:
               repo: context.repo.repo,
               state: 'open',
             });
-            
+
             const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
-            
+
             if (!pr) {
               console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
               return null;
             }
-            
+
             console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
             return pr.number;
 
@@ -74,7 +74,7 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
           pattern: playwright-report-*
           path: reports
-          
+
       - name: Handle Test Completion
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         env:
@@ -85,9 +85,9 @@ jobs:
           # Rename merged report if exists
           [ -d "reports/playwright-report-chromium-merged" ] && \
             mv reports/playwright-report-chromium-merged reports/playwright-report-chromium
-          
+
           chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "completed"
+            "completed"

.github/workflows/ci-tests-e2e.yaml

@@ -29,7 +29,7 @@ jobs:
         with:
           include_build_step: true
       - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright # Setup Playwright and cache browsers
+        uses: ./.github/actions/setup-playwright  # Setup Playwright and cache browsers
 
       # Save the entire workspace as cache for later test jobs to restore
       - name: Generate cache key

.github/workflows/ci-tests-storybook-forks.yaml

@@ -13,7 +13,7 @@ jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
     if: |
-      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.head_repository != null &&
       github.event.workflow_run.repository != null &&
@@ -43,14 +43,14 @@ jobs:
               repo: context.repo.repo,
               state: 'open',
             });
-            
+
             const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
-            
+
             if (!pr) {
               console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
               return null;
             }
-            
+
             console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
             return pr.number;
 
@@ -74,7 +74,7 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
           name: storybook-static
           path: storybook-static
-          
+
       - name: Handle Storybook Completion
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         env:
@@ -88,4 +88,4 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "completed"
+            "completed"

.github/workflows/ci-tests-storybook.yaml

@@ -2,7 +2,7 @@ name: "CI: Tests Storybook"
 description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
-  workflow_dispatch: # Allow manual triggering
+  workflow_dispatch:  # Allow manual triggering
   pull_request:
     branches: [main]
 
@@ -16,7 +16,7 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-        
+
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -89,7 +89,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v5
         with:
-          fetch-depth: 0 # Required for Chromatic baseline
+          fetch-depth: 0  # Required for Chromatic baseline
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -111,9 +111,9 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: build-storybook
-          autoAcceptChanges: 'main' # Auto-accept changes on main branch
-          exitOnceUploaded: true # Don't wait for UI tests to complete
-          onlyChanged: true # Only capture changed stories
+          autoAcceptChanges: 'main'  # Auto-accept changes on main branch
+          exitOnceUploaded: true  # Don't wait for UI tests to complete
+          onlyChanged: true  # Only capture changed stories
 
       - name: Set job status
         id: job-status
@@ -138,17 +138,17 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-        
+
       - name: Download Storybook build
         if: needs.storybook-build.outputs.conclusion == 'success'
         uses: actions/download-artifact@v4
         with:
           name: storybook-static
           path: storybook-static
-          
+
       - name: Make deployment script executable
         run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
-        
+
       - name: Deploy Storybook and comment on PR
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -176,25 +176,25 @@ jobs:
           script: |
             const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
             const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
-            
+
             // Find the existing Storybook comment
             const { data: comments } = await github.rest.issues.listComments({
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: ${{ github.event.pull_request.number }}
             });
-            
-            const storybookComment = comments.find(comment => 
+
+            const storybookComment = comments.find(comment =>
               comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
             );
-            
+
             if (storybookComment && buildUrl && storybookUrl) {
               // Append Chromatic info to existing comment
               const updatedBody = storybookComment.body.replace(
                 /---\n(.*)$/s,
                 `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
               );
-              
+
               await github.rest.issues.updateComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,

.github/workflows/ci-yaml-validation.yaml

@@ -0,0 +1,33 @@
+name: "CI: YAML Validation"
+description: "Validates YAML syntax and style using yamllint with relaxed rules"
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '**/*.yml'
+      - '**/*.yaml'
+  pull_request:
+    paths:
+      - '**/*.yml'
+      - '**/*.yaml'
+
+jobs:
+  yaml-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x'
+
+      - name: Install yamllint
+        run: |
+          python -m pip install --upgrade pip
+          python -m pip install yamllint
+
+      - name: Validate YAML syntax and style
+        run: ./scripts/cicd/check-yaml.sh

.github/workflows/i18n-update-core.yaml

@@ -2,11 +2,11 @@ name: "i18n: Update Core"
 description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
-  # Manual dispatch for urgent translation updates  
+  # Manual dispatch for urgent translation updates
   workflow_dispatch:
   # Only trigger on PRs to main/master - additional branch filtering in job condition
   pull_request:
-    branches: [ main ]
+    branches: [main]
     types: [opened, synchronize, reopened]
 
 jobs:
@@ -15,45 +15,45 @@ jobs:
     if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
+      - name: Checkout repository
+        uses: actions/checkout@v5
 
-    # Setup playwright environment
-    - name: Setup ComfyUI Frontend
-      uses: ./.github/actions/setup-frontend
-      with:
-        include_build_step: true
-    - name: Setup ComfyUI Server
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
+      # Setup playwright environment
+      - name: Setup ComfyUI Frontend
+        uses: ./.github/actions/setup-frontend
+        with:
+          include_build_step: true
+      - name: Setup ComfyUI Server
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: pnpm dev:electron &
+      - name: Start dev server
+        # Run electron dev server as it is a superset of the web dev server
+        # We do want electron specific UIs to be translated.
+        run: pnpm dev:electron &
 
-    # Update locales, collect new strings and update translations using OpenAI, then commit changes
-    - name: Update en.json
-      run: pnpm collect-i18n
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-    - name: Update translations
-      run: pnpm locale
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-    - name: Commit updated locales
-      run: |
-        git config --global user.name 'github-actions'
-        git config --global user.email 'github-actions@github.com'
-        git fetch origin ${{ github.head_ref }}
-        # Stash any local changes before checkout
-        git stash -u
-        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
-        # Apply the stashed changes if any
-        git stash pop || true
-        git add src/locales/
-        git diff --staged --quiet || git commit -m "Update locales"
-        git push origin HEAD:${{ github.head_ref }}
+      # Update locales, collect new strings and update translations using OpenAI, then commit changes
+      - name: Update en.json
+        run: pnpm collect-i18n
+        env:
+          PLAYWRIGHT_TEST_URL: http://localhost:5173
+      - name: Update translations
+        run: pnpm locale
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      - name: Commit updated locales
+        run: |
+          git config --global user.name 'github-actions'
+          git config --global user.email 'github-actions@github.com'
+          git fetch origin ${{ github.head_ref }}
+          # Stash any local changes before checkout
+          git stash -u
+          git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
+          # Apply the stashed changes if any
+          git stash pop || true
+          git add src/locales/
+          git diff --staged --quiet || git commit -m "Update locales"
+          git push origin HEAD:${{ github.head_ref }}

.github/workflows/i18n-update-custom-nodes.yaml

@@ -21,116 +21,116 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
+      - name: Checkout repository
+        uses: actions/checkout@v5
 
-    # Setup playwright environment with custom node repository
-    - name: Setup ComfyUI Server (without launching)
-      uses: ./.github/actions/setup-comfyui-server
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-      with:
-        include_build_step: 'true'
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
+      # Setup playwright environment with custom node repository
+      - name: Setup ComfyUI Server (without launching)
+        uses: ./.github/actions/setup-comfyui-server
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+        with:
+          include_build_step: 'true'
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-    # Install the custom node repository
-    - name: Checkout custom node repository
-      uses: actions/checkout@v5
-      with:
-        repository: ${{ inputs.owner }}/${{ inputs.repository }}
-        path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
-    - name: Install custom node Python requirements
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        if [ -f "requirements.txt" ]; then
-          pip install -r requirements.txt
-        fi
+      # Install the custom node repository
+      - name: Checkout custom node repository
+        uses: actions/checkout@v5
+        with:
+          repository: ${{ inputs.owner }}/${{ inputs.repository }}
+          path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
+      - name: Install custom node Python requirements
+        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+        run: |
+          if [ -f "requirements.txt" ]; then
+            pip install -r requirements.txt
+          fi
 
-    # Start ComfyUI Server
-    - name: Start ComfyUI Server
-      shell: bash
-      working-directory: ComfyUI
-      run: |
-        python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
-        wait-for-it --service
+      # Start ComfyUI Server
+      - name: Start ComfyUI Server
+        shell: bash
+        working-directory: ComfyUI
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../dist --custom-node-path ../ComfyUI/custom_nodes/${{ inputs.repository }} &
+          wait-for-it --service
 
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: pnpm dev:electron &
-      
-    - name: Capture base i18n
-      run: pnpm exec tsx scripts/diff-i18n capture
-    - name: Update en.json
-      run: pnpm collect-i18n
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-    - name: Update translations
-      run: pnpm locale
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-    - name: Diff base vs updated i18n
-      run: pnpm exec tsx scripts/diff-i18n diff
-    - name: Update i18n in custom node repository
-      run: |
-        LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
-        install -d "$LOCALE_DIR"
-        cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
-    
-    # Git ops for pushing changes and creating PR
-    - name: Check and create fork of custom node repository
-      run: |
-        # Try to fork the repository
-        gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
-          echo "Fork failed - repository might already be forked"
-          # Exit 0 to prevent the workflow from failing
-          exit 0
-        }
+      - name: Start dev server
+        # Run electron dev server as it is a superset of the web dev server
+        # We do want electron specific UIs to be translated.
+        run: pnpm dev:electron &
 
-        # Enable workflows on the forked repository
-        gh api \
-          --method PUT \
-          -H "Accept: application/vnd.github+json" \
-          "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
-          -F can_approve_pull_request_reviews=true \
-          -F default_workflow_permissions="write" \
-          -F enabled=true
-      env:
-        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+      - name: Capture base i18n
+        run: pnpm exec tsx scripts/diff-i18n capture
+      - name: Update en.json
+        run: pnpm collect-i18n
+        env:
+          PLAYWRIGHT_TEST_URL: http://localhost:5173
+      - name: Update translations
+        run: pnpm locale
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      - name: Diff base vs updated i18n
+        run: pnpm exec tsx scripts/diff-i18n diff
+      - name: Update i18n in custom node repository
+        run: |
+          LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
+          install -d "$LOCALE_DIR"
+          cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
 
-    - name: Commit changes
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        git config --global user.name 'github-actions'
-        git config --global user.email 'github-actions@github.com'
+      # Git ops for pushing changes and creating PR
+      - name: Check and create fork of custom node repository
+        run: |
+          # Try to fork the repository
+          gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
+            echo "Fork failed - repository might already be forked"
+            # Exit 0 to prevent the workflow from failing
+            exit 0
+          }
 
-        # Create and switch to new branch
-        git checkout -b update-locales
+          # Enable workflows on the forked repository
+          gh api \
+            --method PUT \
+            -H "Accept: application/vnd.github+json" \
+            "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
+            -F can_approve_pull_request_reviews=true \
+            -F default_workflow_permissions="write" \
+            -F enabled=true
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
 
-        # Stage and commit changes
-        git add -A
-        git commit -m "Update locales"
+      - name: Commit changes
+        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+        run: |
+          git config --global user.name 'github-actions'
+          git config --global user.email 'github-actions@github.com'
 
-    - name: Install SSH key For PUSH
-      uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
-      with:
-        # PR private key from action server
-        key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
-        # github public key to confirm it's github server
-        known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
+          # Create and switch to new branch
+          git checkout -b update-locales
 
-    - name: Push changes
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        # Force push to create the branch
-        echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
-        git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
+          # Stage and commit changes
+          git add -A
+          git commit -m "Update locales"
 
-    - name: Create PR
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        # Create PR using gh cli
-        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
-      env:
-        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+      - name: Install SSH key For PUSH
+        uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
+        with:
+          # PR private key from action server
+          key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
+          # github public key to confirm it's github server
+          known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
+
+      - name: Push changes
+        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+        run: |
+          # Force push to create the branch
+          echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
+          git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
+
+      - name: Create PR
+        working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+        run: |
+          # Create PR using gh cli
+          gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}

.github/workflows/i18n-update-nodes.yaml

@@ -13,42 +13,42 @@ jobs:
   update-locales:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v5
-    # Setup playwright environment
-    - name: Setup ComfyUI Server (and start)
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-      with:
-        include_build_step: true
-    - name: Setup Playwright
-      uses: ./.github/actions/setup-playwright
+      - name: Checkout repository
+        uses: actions/checkout@v5
+      # Setup playwright environment
+      - name: Setup ComfyUI Server (and start)
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+        with:
+          include_build_step: true
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
 
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: pnpm dev:electron &
-    - name: Update en.json
-      run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-    - name: Update translations
-      run: pnpm locale
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-    - name: Create Pull Request
-      uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
-      with:
-        token: ${{ secrets.PR_GH_TOKEN }}
-        commit-message: "Update locales for node definitions"
-        title: "Update locales for node definitions"
-        body: |
-          Automated PR to update locales for node definitions
+      - name: Start dev server
+        # Run electron dev server as it is a superset of the web dev server
+        # We do want electron specific UIs to be translated.
+        run: pnpm dev:electron &
+      - name: Update en.json
+        run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
+        env:
+          PLAYWRIGHT_TEST_URL: http://localhost:5173
+      - name: Update translations
+        run: pnpm locale
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: "Update locales for node definitions"
+          title: "Update locales for node definitions"
+          body: |
+            Automated PR to update locales for node definitions
 
-          This PR was created automatically by the frontend update workflow.
-        branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
-        base: main
-        labels: dependencies
+            This PR was created automatically by the frontend update workflow.
+          branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
+          base: main
+          labels: dependencies

.github/workflows/pr-backport.yaml

@@ -19,8 +19,8 @@ on:
 jobs:
   backport:
     if: >
-      (github.event_name == 'pull_request_target' && 
-       github.event.pull_request.merged == true && 
+      (github.event_name == 'pull_request_target' &&
+       github.event.pull_request.merged == true &&
        contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
       github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
@@ -38,19 +38,19 @@ jobs:
             echo "::error::Invalid PR number format. Must be a positive integer."
             exit 1
           fi
-          
+
           # Validate PR exists and is merged
           if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
             echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
             exit 1
           fi
-          
+
           MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
           if [ "$MERGED" != "true" ]; then
             echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
             exit 1
           fi
-          
+
           # Validate PR has needs-backport label
           if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
             echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
@@ -330,7 +330,7 @@ jobs:
             PR_TITLE="${{ github.event.pull_request.title }}"
             PR_AUTHOR="${{ github.event.pull_request.user.login }}"
           fi
-          
+
           for backport in ${{ steps.backport.outputs.success }}; do
             IFS=':' read -r target branch <<< "${backport}"
 

.github/workflows/pr-update-playwright-expectations.yaml

@@ -127,26 +127,26 @@ jobs:
           echo "=========================================="
           echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
           echo "=========================================="
-          
+
           # Get list of changed snapshot files
           changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
-          
+
           if [ -z "$changed_files" ]; then
             echo "No snapshot changes in this shard"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
-          
+
           echo "✓ Found changed files:"
           echo "$changed_files"
           file_count=$(echo "$changed_files" | wc -l)
           echo "Count: $file_count"
           echo "has-changes=true" >> $GITHUB_OUTPUT
           echo ""
-          
+
           # Create staging directory
           mkdir -p /tmp/changed_snapshots_shard
-          
+
           # Copy only changed files, preserving directory structure
           # Strip 'browser_tests/' prefix to avoid double nesting
           echo "Copying changed files to staging directory..."
@@ -159,7 +159,7 @@ jobs:
             cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
             echo "  → $file_without_prefix"
           done <<< "$changed_files"
-          
+
           echo ""
           echo "Staged files for upload:"
           find /tmp/changed_snapshots_shard -type f
@@ -233,18 +233,18 @@ jobs:
 
             shard_name=$(basename "$shard_dir")
             file_count=$(find "$shard_dir" -type f | wc -l)
-            
+
             if [ "$file_count" -eq 0 ]; then
               echo "  $shard_name: no files"
               continue
             fi
 
             echo "Processing $shard_name ($file_count file(s))..."
-            
+
             # Copy files directly, preserving directory structure
             # Since files are already in correct structure (no browser_tests/ prefix), just copy them all
             cp -v -r "$shard_dir"* browser_tests/ 2>&1 | sed 's/^/  /'
-            
+
             merged_count=$((merged_count + 1))
             echo "  ✓ Merged"
             echo ""
@@ -272,25 +272,25 @@ jobs:
         run: |
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
-          
+
           if git diff --quiet browser_tests/; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
-          
+
           echo "=========================================="
           echo "COMMITTING CHANGES"
           echo "=========================================="
-          
+
           echo "has-changes=true" >> $GITHUB_OUTPUT
-          
+
           git add browser_tests/
           git commit -m "[automated] Update test expectations"
-          
+
           echo "Pushing to ${{ needs.setup.outputs.branch }}..."
           git push origin ${{ needs.setup.outputs.branch }}
-          
+
           echo "✓ Commit and push successful"
 
       - name: Add Done Reaction
@@ -306,4 +306,4 @@ jobs:
         if: always() && github.event_name == 'pull_request'
         run: gh pr edit ${{ needs.setup.outputs.pr-number }} --remove-label "New Browser Test Expectations"
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-branch-create.yaml

@@ -153,8 +153,78 @@ jobs:
             echo "EOF"
           } >> $GITHUB_OUTPUT
 
-      - name: Post summary
+      - name: Ensure release labels
         if: steps.check_version.outputs.is_minor_bump == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          BRANCH_BASE="${{ steps.check_version.outputs.branch_base }}"
+
+          if [[ -z "$BRANCH_BASE" ]]; then
+            echo "::error::Branch base not set; unable to manage labels"
+            exit 1
+          fi
+
+          declare -A COLORS=(
+            [core]="4361ee"
+            [cloud]="4f6ef5"
+          )
+
+          for PREFIX in core cloud; do
+            LABEL="${PREFIX}/${BRANCH_BASE}"
+            COLOR="${COLORS[$PREFIX]}"
+            DESCRIPTION="Backport PRs for ${PREFIX} ${BRANCH_BASE}"
+
+            if gh label view "$LABEL" >/dev/null 2>&1; then
+              gh label edit "$LABEL" \
+                --color "$COLOR" \
+                --description "$DESCRIPTION"
+              echo "🔄 Updated label $LABEL"
+            else
+              gh label create "$LABEL" \
+                --color "$COLOR" \
+                --description "$DESCRIPTION"
+              echo "✨ Created label $LABEL"
+            fi
+          done
+
+          MIN_LABELS_TO_KEEP=3
+          MAX_LABELS_TO_FETCH=200
+
+          for PREFIX in core cloud; do
+            mapfile -t LABELS < <(
+              gh label list \
+                --json name \
+                --limit "$MAX_LABELS_TO_FETCH" \
+                --jq '.[].name' |
+              grep -E "^${PREFIX}/[0-9]+\.[0-9]+$" |
+              sort -t/ -k2,2V
+            )
+
+            TOTAL=${#LABELS[@]}
+
+            if (( TOTAL <= MIN_LABELS_TO_KEEP )); then
+              echo "ℹ️  Nothing to prune for $PREFIX labels"
+              continue
+            fi
+
+            REMOVE_COUNT=$((TOTAL - MIN_LABELS_TO_KEEP))
+
+            if (( REMOVE_COUNT > 1 )); then
+              REMOVE_COUNT=1
+            fi
+
+            for ((i=0; i<REMOVE_COUNT; i++)); do
+              OLD_LABEL="${LABELS[$i]}"
+              gh label delete "$OLD_LABEL" --yes
+              echo "🗑️ Removed old label $OLD_LABEL"
+            done
+          done
+
+      - name: Post summary
+        if: always() && steps.check_version.outputs.is_minor_bump == 'true'
         run: |
           CURRENT_VERSION="${{ steps.check_version.outputs.current_version }}"
           RESULTS="${{ steps.create_branches.outputs.results }}"

.github/workflows/version-bump-desktop-ui.yaml

@@ -92,4 +92,3 @@ jobs:
           base: ${{ github.event.inputs.branch }}
           labels: |
             Release
-

.yamllint

@@ -0,0 +1,10 @@
+extends: default
+
+ignore: |
+  node_modules/
+  dist/
+
+rules:
+  line-length: disable
+  document-start: disable
+  truthy: disable

CONTRIBUTING.md

@@ -243,7 +243,7 @@ pnpm format
 
 ### Styling
 - Use Tailwind CSS classes instead of custom CSS
-- Follow the existing dark theme pattern: `dark-theme:` prefix (not `dark:`)
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
 
 ### Internationalization
 - All user-facing strings must use vue-i18n

browser_tests/globalSetup.ts

@@ -1,17 +1,20 @@
 import type { FullConfig } from '@playwright/test'
-import dotenv from 'dotenv'
+import { config as loadEnv } from 'dotenv'
 
 import { backupPath } from './utils/backupUtils'
+import { syncDevtools } from './utils/devtoolsSync'
 
-dotenv.config()
+loadEnv()
 
-export default function globalSetup(config: FullConfig) {
+export default function globalSetup(_: FullConfig) {
   if (!process.env.CI) {
     if (process.env.TEST_COMFYUI_DIR) {
       backupPath([process.env.TEST_COMFYUI_DIR, 'user'])
       backupPath([process.env.TEST_COMFYUI_DIR, 'models'], {
         renameAndReplaceWithScaffolding: true
       })
+
+      syncDevtools(process.env.TEST_COMFYUI_DIR)
     } else {
       console.warn(
         'Set TEST_COMFYUI_DIR in .env to prevent user data (settings, workflows, etc.) from being overwritten'

browser_tests/tests/chatHistory.spec.ts

@@ -1,144 +0,0 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
-
-interface ChatHistoryEntry {
-  prompt: string
-  response: string
-  response_id: string
-}
-
-async function renderChatHistory(page: Page, history: ChatHistoryEntry[]) {
-  const nodeId = await page.evaluate(() => window['app'].graph.nodes[0]?.id)
-  // Simulate API sending display_component message
-  await page.evaluate(
-    ({ nodeId, history }) => {
-      const event = new CustomEvent('display_component', {
-        detail: {
-          node_id: nodeId,
-          component: 'ChatHistoryWidget',
-          props: {
-            history: JSON.stringify(history)
-          }
-        }
-      })
-      window['app'].api.dispatchEvent(event)
-      return true
-    },
-    { nodeId, history }
-  )
-
-  return nodeId
-}
-
-test.describe('Chat History Widget', () => {
-  let nodeId: string
-
-  test.beforeEach(async ({ comfyPage }) => {
-    nodeId = await renderChatHistory(comfyPage.page, [
-      { prompt: 'Hello', response: 'World', response_id: '123' }
-    ])
-    // Wait for chat history to be rendered
-    await comfyPage.page.waitForSelector('.pi-pencil')
-  })
-
-  test('displays chat history when receiving display_component message', async ({
-    comfyPage
-  }) => {
-    // Verify the chat history is displayed correctly
-    await expect(comfyPage.page.getByText('Hello')).toBeVisible()
-    await expect(comfyPage.page.getByText('World')).toBeVisible()
-  })
-
-  test('handles message editing interaction', async ({ comfyPage }) => {
-    // Get first node's ID
-    nodeId = await comfyPage.page.evaluate(() => {
-      const node = window['app'].graph.nodes[0]
-
-      // Make sure the node has a prompt widget (for editing functionality)
-      if (!node.widgets) {
-        node.widgets = []
-      }
-
-      // Add a prompt widget if it doesn't exist
-      if (!node.widgets.find((w) => w.name === 'prompt')) {
-        node.widgets.push({
-          name: 'prompt',
-          type: 'text',
-          value: 'Original prompt'
-        })
-      }
-
-      return node.id
-    })
-
-    await renderChatHistory(comfyPage.page, [
-      {
-        prompt: 'Message 1',
-        response: 'Response 1',
-        response_id: '123'
-      },
-      {
-        prompt: 'Message 2',
-        response: 'Response 2',
-        response_id: '456'
-      }
-    ])
-    await comfyPage.page.waitForSelector('.pi-pencil')
-
-    const originalTextAreaInput = await comfyPage.page
-      .getByPlaceholder('text')
-      .nth(1)
-      .inputValue()
-
-    // Click edit button on first message
-    await comfyPage.page.getByLabel('Edit').first().click()
-    await comfyPage.nextFrame()
-
-    // Verify cancel button appears
-    await expect(comfyPage.page.getByLabel('Cancel')).toBeVisible()
-
-    // Click cancel edit
-    await comfyPage.page.getByLabel('Cancel').click()
-
-    // Verify prompt input is restored
-    await expect(comfyPage.page.getByPlaceholder('text').nth(1)).toHaveValue(
-      originalTextAreaInput
-    )
-  })
-
-  test('handles real-time updates to chat history', async ({ comfyPage }) => {
-    // Send initial history
-    await renderChatHistory(comfyPage.page, [
-      {
-        prompt: 'Initial message',
-        response: 'Initial response',
-        response_id: '123'
-      }
-    ])
-    await comfyPage.page.waitForSelector('.pi-pencil')
-
-    // Update history with additional messages
-    await renderChatHistory(comfyPage.page, [
-      {
-        prompt: 'Follow-up',
-        response: 'New response',
-        response_id: '456'
-      }
-    ])
-    await comfyPage.page.waitForSelector('.pi-pencil')
-
-    // Move mouse over the canvas to force update
-    await comfyPage.page.mouse.move(100, 100)
-    await comfyPage.nextFrame()
-
-    // Verify new messages appear
-    await expect(comfyPage.page.getByText('Follow-up')).toBeVisible()
-    await expect(comfyPage.page.getByText('New response')).toBeVisible()
-  })
-})

browser_tests/utils/devtoolsSync.ts

@@ -0,0 +1,52 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+export function syncDevtools(targetComfyDir: string): boolean {
+  if (!targetComfyDir) {
+    console.warn('syncDevtools skipped: TEST_COMFYUI_DIR not set')
+    return false
+  }
+
+  // Validate and sanitize the target directory path
+  const resolvedTargetDir = path.resolve(targetComfyDir)
+
+  // Basic path validation to prevent directory traversal
+  if (resolvedTargetDir.includes('..') || !path.isAbsolute(resolvedTargetDir)) {
+    console.error('syncDevtools failed: Invalid target directory path')
+    return false
+  }
+
+  const moduleDir =
+    typeof __dirname !== 'undefined'
+      ? __dirname
+      : path.dirname(fileURLToPath(import.meta.url))
+
+  const devtoolsSrc = path.resolve(moduleDir, '..', '..', 'tools', 'devtools')
+
+  if (!fs.pathExistsSync(devtoolsSrc)) {
+    console.warn(
+      `syncDevtools skipped: source directory not found at ${devtoolsSrc}`
+    )
+    return false
+  }
+
+  const devtoolsDest = path.resolve(
+    resolvedTargetDir,
+    'custom_nodes',
+    'ComfyUI_devtools'
+  )
+
+  console.warn(`syncDevtools: copying ${devtoolsSrc} -> ${devtoolsDest}`)
+
+  try {
+    fs.removeSync(devtoolsDest)
+    fs.ensureDirSync(devtoolsDest)
+    fs.copySync(devtoolsSrc, devtoolsDest, { overwrite: true })
+    console.warn('syncDevtools: copy complete')
+    return true
+  } catch (error) {
+    console.error(`Failed to sync DevTools to ${devtoolsDest}:`, error)
+    return false
+  }
+}

eslint.config.ts

@@ -140,8 +140,8 @@ export default defineConfig([
       'unused-imports/no-unused-imports': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
       'vue/no-v-html': 'off',
-      // Enforce dark-theme: instead of dark: prefix
-      'vue/no-restricted-class': ['error', '/^dark:/'],
+      // Prohibit dark-theme: and dark: prefixes
+      'vue/no-restricted-class': ['error', '/^dark(-theme)?:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
       'vue/match-component-import-name': 'error',

package.json

@@ -131,6 +131,7 @@
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/design-system": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
+    "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "catalog:",
     "@primeuix/forms": "catalog:",

packages/design-system/src/css/style.css

@@ -160,7 +160,6 @@
 
   --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
 
-  --modal-card-button-surface: var(--color-smoke-300);
 
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
@@ -265,6 +264,13 @@
    --palette-interface-panel-selected-surface: color-mix(in srgb, var(--interface-panel-surface) 87.5%, var(--contrast-mix-color));
    --palette-interface-button-hover-surface:  color-mix(in srgb, var(--interface-panel-surface) 82%, var(--contrast-mix-color));
 
+   --modal-card-background: var(--secondary-background);
+   --modal-card-button-surface: var(--color-smoke-300);
+   --modal-card-placeholder-background: var(--color-smoke-600);
+   --modal-card-tag-background: var(--color-smoke-200);
+   --modal-card-tag-foreground: var(--base-foreground);
+   --modal-panel-background: var(--color-white);
+
 }
 
 .dark-theme {
@@ -286,8 +292,6 @@
 
   --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
 
-  --modal-card-button-surface: var(--color-charcoal-300);
-
   --dialog-surface: var(--color-neutral-700);
 
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
@@ -362,6 +366,14 @@
   --component-node-widget-background-selected: var(--color-charcoal-100);
   --component-node-widget-background-disabled: var(--color-alpha-charcoal-600-30);
   --component-node-widget-background-highlighted: var(--color-graphite-400);
+
+  --modal-card-background: var(--secondary-background);
+  --modal-card-button-surface: var(--color-charcoal-300);
+  --modal-card-placeholder-background: var(--secondary-background);
+  --modal-card-tag-background: var(--color-charcoal-200);
+  --modal-card-tag-foreground: var(--base-foreground);
+  --modal-panel-background: var(--color-charcoal-600);
+
 }
 
 @theme inline {
@@ -372,7 +384,14 @@
   --color-button-surface: var(--button-surface);
   --color-button-surface-contrast: var(--button-surface-contrast);
   --color-subscription-button-gradient: var(--subscription-button-gradient);
+
+  --color-modal-card-background: var(--modal-card-background);
   --color-modal-card-button-surface: var(--modal-card-button-surface);
+  --color-modal-card-placeholder-background: var(--modal-card-placeholder-background);
+  --color-modal-card-tag-background: var(--modal-card-tag-background);
+  --color-modal-card-tag-foreground: var(--modal-card-tag-foreground);
+  --color-modal-panel-background: var(--modal-panel-background);
+  
   --color-dialog-surface: var(--dialog-surface);
   --color-interface-menu-component-surface-hovered: var(
     --interface-menu-component-surface-hovered
@@ -1346,3 +1365,466 @@ audio.comfy-audio.empty-audio-widget {
   border-radius: 0;
 }
 /* END LOD specific styles */
+
+/* ===================== Mask Editor Styles ===================== */
+/* To be migrated to Tailwind later */
+  #maskEditor_brush {
+    position: absolute;
+    backgroundColor: transparent;
+    z-index: 8889;
+    pointer-events: none;
+    border-radius: 50%;
+    overflow: visible;
+    outline: 1px dashed black;
+    box-shadow: 0 0 0 1px white;
+  }
+  #maskEditor_brushPreviewGradient {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    display: none;
+  }
+  .maskEditor_sidePanelTitle {
+    text-align: center;
+    font-size: 15px;
+    font-family: sans-serif;
+    color: var(--descrip-text);
+    margin-top: 10px;
+  }
+  .maskEditor_sidePanelBrushShapeCircle {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    pointer-events: auto;
+    transition: background 0.1s;
+    margin-left: 7.5px;
+  }
+  .maskEditor_sidePanelBrushRange {
+    width: 180px;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  .maskEditor_sidePanelBrushRange::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    cursor: grab;
+    margin-top: -8px;
+    background: var(--p-surface-700);
+    border: 1px solid var(--border-color);
+  }
+  .maskEditor_sidePanelBrushRange::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    cursor: grab;
+    background: var(--p-surface-800);
+    border: 1px solid var(--border-color);
+  }
+  .maskEditor_sidePanelBrushRange::-webkit-slider-runnable-track {
+    background: var(--p-surface-700);
+    height: 3px;
+  }
+  .maskEditor_sidePanelBrushRange::-moz-range-track {
+    background: var(--p-surface-700);
+    height: 3px;
+  }
+
+  .maskEditor_sidePanelBrushShapeSquare {
+    width: 35px;
+    height: 35px;
+    margin: 5px;
+    border: 1px solid var(--border-color);
+    pointer-events: auto;
+    transition: background 0.1s;
+  }
+
+  .maskEditor_brushShape_dark {
+    background: transparent;
+  }
+
+  .maskEditor_brushShape_dark:hover {
+    background: var(--p-surface-900);
+  }
+
+  .maskEditor_brushShape_light {
+    background: transparent;
+  }
+
+  .maskEditor_brushShape_light:hover {
+    background: var(--comfy-menu-bg);
+  }
+
+  .maskEditor_sidePanelLayer {
+    display: flex;
+    width: 100%;
+    height: 50px;
+  }
+  .maskEditor_sidePanelLayerVisibilityContainer {
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .maskEditor_sidePanelVisibilityToggle {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    pointer-events: auto;
+  }
+  .maskEditor_sidePanelLayerIconContainer {
+    width: 60px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    fill: var(--input-text);
+  }
+  .maskEditor_sidePanelLayerIconContainer svg {
+    width: 30px;
+    height: 30px;
+  }
+  .maskEditor_sidePanelBigButton {
+    width: 85px;
+    height: 30px;
+    background: rgb(0 0 0 / 0.2);
+    border: 1px solid var(--border-color);
+    color: var(--input-text);
+    font-family: sans-serif;
+    font-size: 15px;
+    pointer-events: auto;
+    transition: background-color 0.1s;
+  }
+  .maskEditor_sidePanelBigButton:hover {
+    background-color: var(--p-overlaybadge-outline-color);
+    border: none;
+  }
+  .maskEditor_toolPanelContainer {
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    transition: background-color 0.2s;
+  }
+  .maskEditor_toolPanelContainerSelected svg {
+    fill: var(--p-button-text-primary-color) !important;
+  }
+  .maskEditor_toolPanelContainerSelected .maskEditor_toolPanelIndicator {
+    display: block;
+  }
+  .maskEditor_toolPanelContainer svg {
+    width: 75%;
+    aspect-ratio: 1/1;
+    fill: var(--p-button-text-secondary-color);
+  }
+
+  .maskEditor_toolPanelContainerDark:hover {
+    background-color: var(--p-surface-800);
+  }
+
+  .maskEditor_toolPanelContainerLight:hover {
+    background-color: var(--p-surface-300);
+  }
+
+  .maskEditor_toolPanelIndicator {
+    display: none;
+    height: 100%;
+    width: 4px;
+    position: absolute;
+    left: 0;
+    background: var(--p-button-text-primary-color);
+  }
+  .maskEditor_sidePanelSeparator {
+    width: 100%;
+    height: 2px;
+    background: var(--border-color);
+    margin-top: 1.5em;
+    margin-bottom: 5px;
+  }
+  #maskEditorCanvasContainer {
+    position: absolute;
+    width: 1000px;
+    height: 667px;
+    left: 359px;
+    top: 280px;
+  }
+
+  .maskEditor_topPanelIconButton_dark {
+    width: 50px;
+    height: 30px;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.1s;
+    background: var(--p-surface-800);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+  }
+
+  .maskEditor_topPanelIconButton_dark:hover {
+      background-color: var(--p-surface-900);
+  }
+
+  .maskEditor_topPanelIconButton_dark svg {
+    width: 25px;
+    height: 25px;
+    pointer-events: none;
+    fill: var(--input-text);
+  }
+
+  .maskEditor_topPanelIconButton_light {
+    width: 50px;
+    height: 30px;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.1s;
+    background: var(--comfy-menu-bg);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+  }
+
+  .maskEditor_topPanelIconButton_light:hover {
+      background-color: var(--p-surface-300);
+  }
+
+  .maskEditor_topPanelIconButton_light svg {
+    width: 25px;
+    height: 25px;
+    pointer-events: none;
+    fill: var(--input-text);
+  }
+
+  .maskEditor_topPanelButton_dark {
+    height: 30px;
+    background: var(--p-surface-800);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+    color: var(--input-text);
+    font-family: sans-serif;
+    pointer-events: auto;
+    transition: 0.1s;
+    width: 60px;
+  }
+
+  .maskEditor_topPanelButton_dark:hover {
+    background-color: var(--p-surface-900);
+  }
+
+  .maskEditor_topPanelButton_light {
+    height: 30px;
+    background: var(--comfy-menu-bg);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+    color: var(--input-text);
+    font-family: sans-serif;
+    pointer-events: auto;
+    transition: 0.1s;
+    width: 60px;
+  }
+
+  .maskEditor_topPanelButton_light:hover {
+    background-color: var(--p-surface-300);
+  }
+
+  .maskEditor_sidePanel_paintBucket_Container {
+    width: 180px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .maskEditor_sidePanel_colorSelect_Container {
+    display: flex;
+    width: 180px;
+    align-items: center;
+    gap: 5px;
+    height: 30px;
+  }
+
+  .maskEditor_sidePanel_colorSelect_tolerance_container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .maskEditor_sidePanelContainerColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  .maskEditor_sidePanelContainerRow {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    min-height: 24px;
+    position: relative;
+  }
+
+  .maskEditor_accent_bg_dark {
+    background: var(--p-surface-800);
+  }
+
+  .maskEditor_accent_bg_very_dark {
+    background: var(--p-surface-900);
+  }
+
+  .maskEditor_accent_bg_light {
+    background: var(--p-surface-300);
+  }
+
+  .maskEditor_accent_bg_very_light {
+    background: var(--comfy-menu-bg);
+  }
+
+
+  .maskEditor_sidePanelToggleContainer {
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+  }
+
+  .maskEditor_sidePanelToggleSwitch {
+    display: inline-block;
+    border-radius: 16px;
+    width: 40px;
+    height: 24px;
+    position: relative;
+    vertical-align: middle;
+    transition: background 0.25s;
+    background: var(--p-surface-300);
+  }
+
+  .dark-theme .maskEditor_sidePanelToggleSwitch {
+    background: var(--p-surface-700);
+  }
+
+  .maskEditor_sidePanelToggleSwitch::before, .maskEditor_sidePanelToggleSwitch::after {
+    content: "";
+  }
+  .maskEditor_sidePanelToggleSwitch::before {
+    display: block;
+    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    transition: ease 0.2s;
+  }
+  .maskEditor_sidePanelToggleContainer:hover .maskEditor_sidePanelToggleSwitch::before {
+    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+  }
+  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch {
+    background: var(--p-button-text-primary-color);
+  }
+  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch::before {
+    background: var(--comfy-menu-bg);
+    left: 20px;
+  }
+  .dark-theme .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch::before {
+    background: var(--p-surface-900);
+  }
+
+  .maskEditor_sidePanelToggleCheckbox {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  .maskEditor_sidePanelDropdown {
+    border: 1px solid var(--p-form-field-border-color);
+    background: var(--comfy-menu-bg);
+    height: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 6px;
+    transition: background 0.1s;
+  }
+
+  .maskEditor_sidePanelDropdown option {
+    background: var(--comfy-menu-bg);
+  }
+
+  .maskEditor_sidePanelDropdown:focus {
+    outline: 1px solid var(--p-surface-300);
+  }
+
+  .maskEditor_sidePanelDropdown option:hover {
+    background: white;
+  }
+  .maskEditor_sidePanelDropdown option:active {
+    background: var(--p-surface-300);
+  }
+
+  .dark-theme .maskEditor_sidePanelDropdown {
+    background: var(--p-surface-900);
+  }
+
+  .dark-theme .maskEditor_sidePanelDropdown option {
+    background: var(--p-surface-900);
+  }
+
+  .dark-theme .maskEditor_sidePanelDropdown:focus {
+    outline: 1px solid var(--p-button-text-primary-color);
+  }
+
+  .dark-theme .maskEditor_sidePanelDropdown option:active {
+    background: var(--p-highlight-background);
+  }
+
+  .maskEditor_layerRow {
+    height: 50px;
+    width: 100%;
+    border-radius: 10px;
+  }
+
+  .maskEditor_sidePanelLayerPreviewContainer {
+    width: 40px;
+    height: 30px;
+  }
+
+  .maskEditor_sidePanelLayerPreviewContainer > svg{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    fill: var(--p-surface-100);
+  }
+
+  .maskEditor_sidePanelImageLayerImage {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .maskEditor_sidePanelSubTitle {
+    text-align: left;
+    font-size: 12px;
+    font-family: sans-serif;
+    color: var(--descrip-text);
+  }
+
+  .maskEditor_containerDropdown {
+    position: absolute;
+    right: 0;
+  }
+
+  .maskEditor_sidePanelLayerCheckbox {
+    margin-left: 15px;
+  }
+/* ===================== End of Mask Editor Styles ===================== */

pnpm-lock.yaml

@@ -326,6 +326,9 @@ importers:
       '@comfyorg/registry-types':
         specifier: workspace:*
         version: link:packages/registry-types
+      '@comfyorg/shared-frontend-utils':
+        specifier: workspace:*
+        version: link:packages/shared-frontend-utils
       '@comfyorg/tailwind-utils':
         specifier: workspace:*
         version: link:packages/tailwind-utils

scripts/cicd/check-yaml.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT_DIR="$(git rev-parse --show-toplevel)"
+cd "$ROOT_DIR"
+
+mapfile -t yaml_files < <(git ls-files '*.yml' '*.yaml')
+
+if [[ ${#yaml_files[@]} -eq 0 ]]; then
+  echo "No YAML files found to lint"
+  exit 0
+fi
+
+yamllint --config-file .yamllint "${yaml_files[@]}"

src/components/CLAUDE.md

@@ -30,7 +30,7 @@
 ## Styling
 
 - Use Tailwind CSS only (no custom CSS)
-- Dark theme: use "dark-theme:" prefix
+- Use the correct tokens from style.css in the design system package
 - For common operations, try to use existing VueUse composables that automatically handle effect scope
   - Example: Use `useElementHover` instead of manually managing mouseover/mouseout event listeners
   - Example: Use `useIntersectionObserver` for visibility detection instead of custom scroll handlers

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -7,7 +7,7 @@
         class="flex flex-col"
       >
         <h3
-          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
+          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-text-secondary uppercase"
         >
           {{ getSubcategoryTitle(subcategory) }}
         </h3>
@@ -16,7 +16,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-surface-100 dark-theme:hover:bg-surface-700"
+            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -32,7 +32,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
+                  class="key-badge min-w-6 rounded bg-muted-background px-2 py-1 text-center font-mono text-xs"
                 >
                   {{ formatKey(key) }}
                 </span>
@@ -46,11 +46,11 @@
 </template>
 
 <script setup lang="ts">
+import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { ComfyCommandImpl } from '@/stores/commandStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const { t } = useI18n()
 
@@ -100,21 +100,3 @@ const formatKey = (key: string): string => {
   return keyMap[key] || key
 }
 </script>
-
-<style scoped>
-.subcategory-title {
-  color: var(--p-text-muted-color);
-}
-
-.key-badge {
-  background-color: var(--p-surface-200);
-  border: 1px solid var(--p-surface-300);
-  min-width: 1.5rem;
-  text-align: center;
-}
-
-.dark-theme .key-badge {
-  background-color: var(--p-surface-600);
-  border-color: var(--p-surface-500);
-}
-</style>

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -47,6 +47,7 @@
 </template>
 
 <script setup lang="ts">
+import { appendJsonExt } from '@comfyorg/shared-frontend-utils/formatUtil'
 import InputText from 'primevue/inputtext'
 import type { MenuState } from 'primevue/menu'
 import Menu from 'primevue/menu'
@@ -63,7 +64,6 @@ import {
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { appendJsonExt } from '@/utils/formatUtil'
 
 interface Props {
   item: MenuItem

src/components/button/IconGroup.vue

@@ -10,8 +10,7 @@ import { cn } from '@/utils/tailwindUtil'
 const iconGroupClasses = cn(
   'flex justify-center items-center shrink-0',
   'outline-hidden border-none p-0 rounded-lg',
-  'bg-white dark-theme:bg-zinc-700',
-  'text-neutral-950 dark-theme:text-white',
+  'bg-secondary-background shadow-sm',
   'transition-all duration-200',
   'cursor-pointer'
 )

src/components/button/IconTextButton.vue

@@ -32,7 +32,7 @@ defineOptions({
 interface IconTextButtonProps extends BaseButtonProps {
   iconPosition?: 'left' | 'right'
   label: string
-  onClick: () => void
+  onClick?: () => void
 }
 
 const {

src/components/button/MoreButton.vue

@@ -7,13 +7,24 @@
 
     <Popover
       ref="popover"
-      :append-to="'body'"
-      :auto-z-index="true"
-      :base-z-index="1000"
-      :dismissable="true"
-      :close-on-escape="true"
+      append-to="body"
+      auto-z-index
+      dismissable
+      close-on-escape
       unstyled
-      :pt="pt"
+      :base-z-index="1000"
+      :pt="{
+        root: {
+          class: cn('absolute z-50')
+        },
+        content: {
+          class: cn(
+            'mt-1 rounded-lg',
+            'bg-secondary-background text-base-foreground',
+            'shadow-lg'
+          )
+        }
+      }"
       @show="$emit('menuOpened')"
       @hide="$emit('menuClosed')"
     >
@@ -26,7 +37,7 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'
@@ -57,19 +68,4 @@ const toggle = (event: Event) => {
 const hide = () => {
   popover.value?.hide()
 }
-
-const pt = computed(() => ({
-  root: {
-    class: cn('absolute z-50')
-  },
-  content: {
-    class: cn(
-      'mt-1 rounded-lg',
-      'bg-white dark-theme:bg-zinc-800',
-      'text-neutral dark-theme:text-white',
-      'shadow-lg',
-      'border border-zinc-200 dark-theme:border-zinc-700'
-    )
-  }
-}))
 </script>

src/components/card/CardContainer.vue

@@ -47,8 +47,8 @@ const containerClasses = computed(() => {
   // Variant styles
   const variantClasses = {
     default: cn(
-      hasBackground && 'bg-white dark-theme:bg-zinc-800',
-      hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
+      hasBackground && 'bg-modal-card-background',
+      hasBorder && 'border border-border-default',
       hasShadow && 'shadow-sm',
       hasCursor && 'cursor-pointer'
     ),
@@ -57,9 +57,9 @@ const containerClasses = computed(() => {
       'p-2 transition-colors duration-200'
     ),
     outline: cn(
-      hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
+      hasBorder && 'border-2 border-border-subtle',
       hasCursor && 'cursor-pointer',
-      'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
+      'hover:border-border-subtle/50 transition-colors'
     )
   }
 

src/components/card/CardDescription.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="line-clamp-2 h-7 text-xs text-zinc-500 dark-theme:text-zinc-400">
+  <div class="line-clamp-2 h-7 text-xs text-muted-foreground">
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>

src/components/chip/SquareChip.vue

@@ -19,7 +19,7 @@ const baseClasses =
 
 const variantStyles = {
   dark: 'bg-zinc-500/40 text-white/90',
-  light: 'backdrop-blur-[2px] bg-white/50 text-zinc-900 dark-theme:text-white'
+  light: cn('backdrop-blur-[2px] bg-base-background/50 text-base-foreground')
 }
 
 const chipClasses = computed(() => {

src/components/common/DeviceInfo.vue

@@ -12,8 +12,9 @@
 </template>
 
 <script setup lang="ts">
+import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
+
 import type { DeviceStats } from '@/schemas/apiSchema'
-import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   device: DeviceStats

src/components/common/ElectronFileDownload.vue

@@ -82,6 +82,7 @@
 </template>
 
 <script setup lang="ts">
+import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
@@ -90,7 +91,6 @@ import { useI18n } from 'vue-i18n'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
-import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   url: string

src/components/common/FileDownload.vue

@@ -43,13 +43,13 @@
 </template>
 
 <script setup lang="ts">
+import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
-import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   url: string

src/components/common/FormImageUpload.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center gap-2">
       <div
         class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
-        :class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
+        :class="{ 'bg-base-background': !modelValue }"
       >
         <img
           v-if="modelValue"

src/components/common/LazyImage.vue

@@ -23,7 +23,7 @@
     />
     <div
       v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 text-muted dark-theme:bg-surface-800"
+      class="absolute inset-0 flex items-center justify-center"
     >
       <img
         src="/assets/images/default-template.png"

src/components/common/SystemStatsPanel.vue

@@ -36,6 +36,7 @@
 </template>
 
 <script setup lang="ts">
+import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Divider from 'primevue/divider'
 import TabPanel from 'primevue/tabpanel'
 import TabView from 'primevue/tabview'
@@ -43,7 +44,6 @@ import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
 import type { SystemStats } from '@/schemas/apiSchema'
-import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   stats: SystemStats

src/components/common/UrlInput.vue

@@ -23,12 +23,12 @@
 </template>
 
 <script setup lang="ts">
+import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import { onMounted, ref, watch } from 'vue'
 
-import { isValidUrl } from '@/utils/formatUtil'
 import { checkUrlReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 

src/components/common/UserCredit.vue

@@ -18,12 +18,12 @@
 </template>
 
 <script setup lang="ts">
+import { formatMetronomeCurrency } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const { textClass } = defineProps<{
   textClass?: string

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -364,10 +364,7 @@
       </div>
 
       <!-- Results Summary -->
-      <div
-        v-if="!isLoading"
-        class="mt-6 px-6 text-sm text-neutral-600 dark-theme:text-neutral-400"
-      >
+      <div v-if="!isLoading" class="mt-6 px-6 text-sm text-muted">
         {{
           $t('templateWorkflows.resultsCount', {
             count: filteredCount,

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -29,7 +29,10 @@
 import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
+import { useExternalLink } from '@/composables/useExternalLink'
+
 const { t } = useI18n()
+const { buildDocsUrl } = useExternalLink()
 
 const { apiNodeNames, onLogin, onCancel } = defineProps<{
   apiNodeNames: string[]
@@ -38,6 +41,9 @@ const { apiNodeNames, onLogin, onCancel } = defineProps<{
 }>()
 
 const handleLearnMoreClick = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
+  window.open(
+    buildDocsUrl('/tutorials/api-nodes/faq', { includeLocale: true }),
+    '_blank'
+  )
 }
 </script>

src/components/dialog/content/CloudMissingNodesFooter.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="flex w-full items-center justify-between gap-2 py-2 px-4">
-    <IconTextButton
-      :label="$t('cloud.missingNodes.learnMore')"
-      type="transparent"
-      size="sm"
-      icon-position="left"
-      @click="handleLearnMoreClick"
-    >
-      <template #icon>
-        <i class="icon-[lucide--info]"></i>
-      </template>
-    </IconTextButton>
-    <TextButton
-      :label="$t('cloud.missingNodes.gotIt')"
-      type="secondary"
-      size="md"
-      @click="handleGotItClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const dialogStore = useDialogStore()
-
-const handleLearnMoreClick = () => {
-  window.open('https://www.comfy.org/cloud', '_blank')
-}
-
-const handleGotItClick = () => {
-  dialogStore.closeDialog({ key: 'global-cloud-missing-nodes' })
-}
-</script>

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -24,16 +24,14 @@
         :key="version"
         class="ml-4"
       >
-        <div
-          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
-        >
+        <div class="text-sm font-medium text-surface-600">
           {{
             $t('loadWorkflowWarning.coreNodesFromVersion', {
               version: version || 'unknown'
             })
           }}
         </div>
-        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
+        <div class="ml-4 text-sm text-surface-500">
           {{ getUniqueNodeNames(nodes).join(', ') }}
         </div>
       </div>
@@ -49,14 +47,14 @@ import { computed } from 'vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 
-const props = defineProps<{
+const { missingCoreNodes } = defineProps<{
   missingCoreNodes: Record<string, LGraphNode[]>
 }>()
 
 const systemStatsStore = useSystemStatsStore()
 
 const hasMissingCoreNodes = computed(() => {
-  return Object.keys(props.missingCoreNodes).length > 0
+  return Object.keys(missingCoreNodes).length > 0
 })
 
 // Use computed for reactive version tracking
@@ -66,7 +64,7 @@ const currentComfyUIVersion = computed<string | null>(() => {
 })
 
 const sortedMissingCoreNodes = computed(() => {
-  return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
+  return Object.entries(missingCoreNodes).sort(([a], [b]) => {
     // Sort by version in descending order (newest first)
     return compare(b, a) // Reversed for descending order
   })

src/components/dialog/content/MissingNodesContent.vue

@@ -1,52 +1,65 @@
 <template>
-  <div class="flex w-[490px] flex-col">
-    <ContentDivider :width="1" />
+  <div
+    class="flex w-[490px] flex-col border-t-1 border-b-1 border-border-default"
+  >
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Description -->
       <div>
         <p class="m-0 text-sm leading-4 text-muted-foreground">
-          {{ $t('cloud.missingNodes.description') }}
-          <br /><br />
-          {{ $t('cloud.missingNodes.priorityMessage') }}
+          {{
+            isCloud
+              ? $t('missingNodes.cloud.description')
+              : $t('missingNodes.oss.description')
+          }}
         </p>
       </div>
+      <MissingCoreNodesMessage v-if="!isCloud" :missing-core-nodes />
 
       <!-- Missing Nodes List Wrapper -->
       <div
-        class="flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-component-node-widget-background"
+        class="comfy-missing-nodes flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
       >
         <div
           v-for="(node, i) in uniqueNodes"
           :key="i"
-          class="flex min-h-8 items-center justify-between px-4 py-2 bg-component-node-widget-background text-text-secondary"
+          class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
         >
           <span class="text-xs">
             {{ node.label }}
           </span>
+          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
         </div>
       </div>
 
       <!-- Bottom instruction -->
       <div>
         <p class="m-0 text-sm leading-4 text-muted-foreground">
-          {{ $t('cloud.missingNodes.replacementInstruction') }}
+          {{
+            isCloud
+              ? $t('missingNodes.cloud.replacementInstruction')
+              : $t('missingNodes.oss.replacementInstruction')
+          }}
         </p>
       </div>
     </div>
-    <ContentDivider :width="1" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import ContentDivider from '@/components/common/ContentDivider.vue'
+import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import { isCloud } from '@/platform/distribution/types'
 import type { MissingNodeType } from '@/types/comfy'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
+// Get missing core nodes for OSS mode
+const { missingCoreNodes } = useMissingNodes()
+
 const uniqueNodes = computed(() => {
   const seenTypes = new Set()
   return props.missingNodeTypes

src/components/dialog/content/MissingNodesFooter.vue

@@ -1,39 +1,42 @@
 <template>
-  <NoResultsPlaceholder
-    class="pb-0"
-    icon="pi pi-exclamation-circle"
-    :title="$t('loadWorkflowWarning.missingNodesTitle')"
-    :message="$t('loadWorkflowWarning.missingNodesDescription')"
-  />
-  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
-  <ListBox
-    :options="uniqueNodes"
-    option-label="label"
-    scroll-height="100%"
-    class="comfy-missing-nodes"
-    :pt="{
-      list: { class: 'border-none' }
-    }"
+  <!-- Cloud mode: Learn More + Got It buttons -->
+  <div
+    v-if="isCloud"
+    class="flex w-full items-center justify-between gap-2 py-2 px-4"
   >
-    <template #option="slotProps">
-      <div class="align-items-center flex">
-        <span class="node-type">{{ slotProps.option.label }}</span>
-        <span v-if="slotProps.option.hint" class="node-hint">{{
-          slotProps.option.hint
-        }}</span>
-        <Button
-          v-if="slotProps.option.action"
-          :label="slotProps.option.action.text"
-          size="small"
-          outlined
-          @click="slotProps.option.action.callback"
-        />
-      </div>
-    </template>
-  </ListBox>
-  <div v-if="showManagerButtons" class="flex justify-end py-3">
+    <IconTextButton
+      :label="$t('missingNodes.cloud.learnMore')"
+      type="transparent"
+      size="sm"
+      icon-position="left"
+      as="a"
+      href="https://www.comfy.org/cloud"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <template #icon>
+        <i class="icon-[lucide--info]"></i>
+      </template>
+    </IconTextButton>
+    <TextButton
+      :label="$t('missingNodes.cloud.gotIt')"
+      type="secondary"
+      size="md"
+      @click="handleGotItClick"
+    />
+  </div>
+
+  <!-- OSS mode: Open Manager + Install All buttons -->
+  <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
+    <TextButton
+      :label="$t('g.openManager')"
+      type="transparent"
+      size="sm"
+      @click="openManager"
+    />
     <PackInstallButton
       v-if="showInstallAllButton"
+      type="secondary"
       size="md"
       :disabled="
         isLoading || !!error || missingNodePacks.length === 0 || isInstalling
@@ -46,40 +49,32 @@
           : $t('manager.installAllMissingNodes')
       "
     />
-    <Button
-      :label="$t('g.openManager')"
-      size="small"
-      outlined
-      @click="openManager"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-import ListBox from 'primevue/listbox'
 import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
-const props = defineProps<{
-  missingNodeTypes: MissingNodeType[]
-}>()
+const dialogStore = useDialogStore()
+const { t } = useI18n()
 
-// Get missing node packs from workflow with loading and error states
-const { missingNodePacks, isLoading, error, missingCoreNodes } =
-  useMissingNodes()
+const handleGotItClick = () => {
+  dialogStore.closeDialog({ key: 'global-missing-nodes' })
+}
 
+const { missingNodePacks, isLoading, error } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
 const managerState = useManagerState()
 
@@ -91,27 +86,6 @@ const isInstalling = computed(() => {
   )
 })
 
-const uniqueNodes = computed(() => {
-  const seenTypes = new Set()
-  return props.missingNodeTypes
-    .filter((node) => {
-      const type = typeof node === 'object' ? node.type : node
-      if (seenTypes.has(type)) return false
-      seenTypes.add(type)
-      return true
-    })
-    .map((node) => {
-      if (typeof node === 'object') {
-        return {
-          label: node.type,
-          hint: node.hint,
-          action: node.action
-        }
-      }
-      return { label: node }
-    })
-})
-
 // Show manager buttons unless manager is disabled
 const showManagerButtons = computed(() => {
   return managerState.shouldShowManagerButtons.value
@@ -129,9 +103,6 @@ const openManager = async () => {
   })
 }
 
-const { t } = useI18n()
-const dialogStore = useDialogStore()
-
 // Computed to check if all missing nodes have been installed
 const allMissingNodesInstalled = computed(() => {
   return (
@@ -140,13 +111,14 @@ const allMissingNodesInstalled = computed(() => {
     missingNodePacks.value?.length === 0
   )
 })
-// Watch for completion and close dialog
+
+// Watch for completion and close dialog (OSS mode only)
 watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (allInstalled && showInstallAllButton.value) {
+  if (!isCloud && allInstalled && showInstallAllButton.value) {
     // Use nextTick to ensure state updates are complete
     await nextTick()
 
-    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
+    dialogStore.closeDialog({ key: 'global-missing-nodes' })
 
     // Show success toast
     useToastStore().add({
@@ -158,20 +130,3 @@ watch(allMissingNodesInstalled, async (allInstalled) => {
   }
 })
 </script>
-
-<style scoped>
-.comfy-missing-nodes {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.node-hint {
-  margin-left: 0.5rem;
-  font-style: italic;
-  color: var(--text-color-secondary);
-}
-
-:deep(.p-button) {
-  margin-left: auto;
-}
-</style>

src/components/dialog/content/MissingNodesHeader.vue

@@ -3,8 +3,16 @@
     <div class="flex items-center gap-2">
       <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
       <p class="m-0 text-sm">
-        {{ $t('cloud.missingNodes.title') }}
+        {{
+          isCloud
+            ? $t('missingNodes.cloud.title')
+            : $t('missingNodes.oss.title')
+        }}
       </p>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { isCloud } from '@/platform/distribution/types'
+</script>

src/components/dialog/content/setting/CreditsPanel.vue

@@ -112,6 +112,7 @@
 </template>
 
 <script setup lang="ts">
+import { formatMetronomeCurrency } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
@@ -123,12 +124,12 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 interface CreditHistoryItemData {
   title: string
@@ -137,6 +138,7 @@ interface CreditHistoryItemData {
   isPositive: boolean
 }
 
+const { buildDocsUrl } = useExternalLink()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
@@ -183,12 +185,17 @@ const handleMessageSupport = async () => {
 }
 
 const handleFaqClick = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
+  window.open(
+    buildDocsUrl('/tutorials/api-nodes/faq', { includeLocale: true }),
+    '_blank'
+  )
 }
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -126,6 +126,7 @@
 </template>
 
 <script setup lang="ts">
+import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import { FilterMatchMode } from '@primevue/core/api'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
@@ -146,7 +147,6 @@ import {
   KeybindingImpl,
   useKeybindingStore
 } from '@/stores/keybindingStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 
 import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'

src/components/graph/NodeTooltip.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script setup lang="ts">
+import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 
@@ -23,7 +24,6 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app as comfyApp } from '@/scripts/app'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()

src/components/graph/selectionToolbox/BypassButton.test.ts

@@ -84,18 +84,6 @@ describe('BypassButton', () => {
     )
   })
 
-  it('should show normal styling when node is not bypassed', () => {
-    const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
-    canvasStore.selectedItems = [normalNode] as any
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.classes()).not.toContain(
-      'dark-theme:[&:not(:active)]:!bg-charcoal-600'
-    )
-  })
-
   it('should show bypassed styling when node is bypassed', async () => {
     const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
     canvasStore.selectedItems = [bypassedNode] as any

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -4,13 +4,13 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
+    class="size-8 bg-primary-background text-white p-0"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play] size-4 text-white" />
+    <i class="icon-[lucide--play] size-4" />
   </Button>
 </template>
 

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
+import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 
 import { st } from '@/i18n'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{
   command: ComfyCommand

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="option.type === 'divider'"
-    class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
-  />
+  <div v-if="option.type === 'divider'" class="my-1 h-px bg-border-default" />
   <div
     v-else
     role="button"
@@ -26,18 +23,21 @@
       v-if="option.badge"
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
-      :class="{
-        'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
-          option.badge === 'new',
-        'rounded-4xl bg-slate-100 dark-theme:bg-black':
-          option.badge === 'deprecated',
-        'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
-      }"
+      :class="
+        cn(
+          'h-4 gap-2.5 px-1 text-[9px] text-base-foreground uppercase rounded-4xl',
+          {
+            'bg-primary-background': option.badge === 'new',
+            'bg-secondary-background': option.badge === 'deprecated'
+          }
+        )
+      "
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import Badge from 'primevue/badge'
 import { useI18n } from 'vue-i18n'
 

src/components/graph/selectionToolbox/NodeOptions.vue

@@ -8,7 +8,18 @@
       :dismissable="true"
       :close-on-escape="true"
       unstyled
-      :pt="pt"
+      :pt="{
+        root: {
+          class: 'absolute z-50 w-[300px]'
+        },
+        content: {
+          class: [
+            'mt-2 text-base-foreground rounded-lg',
+            'shadow-lg border border-border-default',
+            'bg-interface-panel-surface'
+          ]
+        }
+      }"
       @show="onPopoverShow"
       @hide="onPopoverHide"
       @wheel="canvasInteractions.forwardEventToCanvas"
@@ -36,7 +47,7 @@
 <script setup lang="ts">
 import { useRafFn } from '@vueuse/core'
 import Popover from 'primevue/popover'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import {
   forceCloseMoreOptionsSignal,
@@ -253,19 +264,6 @@ const setSubmenuRef = (key: string, el: any) => {
   }
 }
 
-const pt = computed(() => ({
-  root: {
-    class: 'absolute z-50 w-[300px] px-[12]'
-  },
-  content: {
-    class: [
-      'mt-2 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
-      'bg-interface-panel-surface'
-    ]
-  }
-}))
-
 // Distinguish outside click (PrimeVue dismiss) from programmatic hides.
 const onPopoverShow = () => {
   overlayElCache = resolveOverlayEl()

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -6,7 +6,18 @@
     :dismissable="true"
     :close-on-escape="true"
     unstyled
-    :pt="submenuPt"
+    :pt="{
+      root: {
+        class: 'absolute z-[60]'
+      },
+      content: {
+        class: [
+          'text-base-foreground rounded-lg',
+          'shadow-lg border border-base-background',
+          'bg-interface-panel-surface'
+        ]
+      }
+    }"
   >
     <div
       :class="
@@ -19,22 +30,25 @@
         v-for="subOption in option.submenu"
         :key="subOption.label"
         :class="
-          isColorSubmenu
-            ? 'w-7 h-7 flex items-center justify-center hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+          cn(
+            'hover:bg-secondary-background-hover rounded cursor-pointer',
+            isColorSubmenu
+              ? 'w-7 h-7 flex items-center justify-center'
+              : 'flex items-center gap-2 px-3 py-1.5 text-sm'
+          )
         "
         :title="subOption.label"
         @click="handleSubmenuClick(subOption)"
       >
         <div
           v-if="subOption.color"
-          class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
+          class="size-5 rounded-full border border-border-default"
           :style="{ backgroundColor: subOption.color }"
         />
         <template v-else-if="!subOption.color">
           <i
             v-if="isShapeSelected(subOption)"
-            class="icon-[lucide--check] h-4 w-4 flex-shrink-0"
+            class="icon-[lucide--check] size-4 flex-shrink-0"
           />
           <div v-else class="w-4 flex-shrink-0" />
           <span>{{ subOption.label }}</span>
@@ -45,6 +59,7 @@
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
@@ -102,17 +117,4 @@ const isColorSubmenu = computed(() => {
     props.option.submenu.every((item) => item.color && !item.icon)
   )
 })
-
-const submenuPt = computed(() => ({
-  root: {
-    class: 'absolute z-[60]'
-  },
-  content: {
-    class: [
-      'text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
-      'bg-interface-panel-surface'
-    ]
-  }
-}))
 </script>

src/components/graph/selectionToolbox/VerticalDivider.vue

@@ -1,5 +1,3 @@
 <template>
-  <div
-    class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
-  />
+  <div class="h-6 w-px self-center bg-border-default" />
 </template>

src/components/graph/widgets/ChatHistoryWidget.test.ts

@@ -1,95 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: { edit: 'Edit' },
-      chatHistory: {
-        cancelEdit: 'Cancel edit',
-        cancelEditTooltip: 'Cancel edit'
-      }
-    }
-  }
-})
-
-vi.mock('@/components/graph/widgets/chatHistory/CopyButton.vue', () => ({
-  default: {
-    name: 'CopyButton',
-    template: '<div class="mock-copy-button"></div>',
-    props: ['text']
-  }
-}))
-
-vi.mock('@/components/graph/widgets/chatHistory/ResponseBlurb.vue', () => ({
-  default: {
-    name: 'ResponseBlurb',
-    template: '<div class="mock-response-blurb"><slot /></div>',
-    props: ['text']
-  }
-}))
-
-describe('ChatHistoryWidget.vue', () => {
-  const mockHistory = JSON.stringify([
-    { prompt: 'Test prompt', response: 'Test response', response_id: '123' }
-  ])
-
-  const mountWidget = (props: { history: string; widget?: any }) => {
-    return mount(ChatHistoryWidget, {
-      props,
-      global: {
-        plugins: [i18n],
-        stubs: {
-          Button: {
-            template: '<button><slot /></button>',
-            props: ['icon', 'aria-label']
-          },
-          ScrollPanel: { template: '<div><slot /></div>' }
-        }
-      }
-    })
-  }
-
-  it('renders chat history correctly', () => {
-    const wrapper = mountWidget({ history: mockHistory })
-    expect(wrapper.text()).toContain('Test prompt')
-    expect(wrapper.text()).toContain('Test response')
-  })
-
-  it('handles empty history', () => {
-    const wrapper = mountWidget({ history: '[]' })
-    expect(wrapper.find('.mb-4').exists()).toBe(false)
-  })
-
-  it('edits previous prompts', () => {
-    const mockWidget = {
-      node: { widgets: [{ name: 'prompt', value: '' }] }
-    }
-
-    const wrapper = mountWidget({ history: mockHistory, widget: mockWidget })
-    const vm = wrapper.vm as any
-    vm.handleEdit(0)
-
-    expect(mockWidget.node.widgets[0].value).toContain('Test prompt')
-    expect(mockWidget.node.widgets[0].value).toContain('starting_point_id')
-  })
-
-  it('cancels editing correctly', () => {
-    const mockWidget = {
-      node: { widgets: [{ name: 'prompt', value: 'Original value' }] }
-    }
-
-    const wrapper = mountWidget({ history: mockHistory, widget: mockWidget })
-    const vm = wrapper.vm as any
-
-    vm.handleEdit(0)
-    vm.handleCancelEdit()
-
-    expect(mockWidget.node.widgets[0].value).toBe('Original value')
-  })
-})

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -1,134 +0,0 @@
-<template>
-  <ScrollPanel
-    ref="scrollPanelRef"
-    class="min-h-[400px] w-full rounded-lg px-2 py-2 text-xs"
-    :pt="{ content: { id: 'chat-scroll-content' } }"
-  >
-    <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
-      <!-- Prompt (user, right) -->
-      <span
-        :class="{
-          'pointer-events-none opacity-40': editIndex !== null && i > editIndex
-        }"
-      >
-        <div class="mb-1 flex justify-end">
-          <div
-            class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
-          >
-            <div class="text-[12px] break-words">{{ item.prompt }}</div>
-          </div>
-        </div>
-        <div class="mr-1 mb-2 flex justify-end">
-          <CopyButton :text="item.prompt" />
-          <Button
-            v-tooltip="
-              editIndex === i ? $t('chatHistory.cancelEditTooltip') : null
-            "
-            text
-            rounded
-            class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
-            pt:icon:class="text-xs!"
-            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
-            :aria-label="
-              editIndex === i ? $t('chatHistory.cancelEdit') : $t('g.edit')
-            "
-            @click="editIndex === i ? handleCancelEdit() : handleEdit(i)"
-          />
-        </div>
-      </span>
-      <!-- Response (LLM, left) -->
-      <ResponseBlurb
-        :text="item.response"
-        :class="{
-          'pointer-events-none opacity-25': editIndex !== null && i >= editIndex
-        }"
-      >
-        <div v-html="nl2br(linkifyHtml(item.response))" />
-      </ResponseBlurb>
-    </div>
-  </ScrollPanel>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import ScrollPanel from 'primevue/scrollpanel'
-import { computed, nextTick, ref, watch } from 'vue'
-
-import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
-import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.vue'
-import type { ComponentWidget } from '@/scripts/domWidget'
-import { linkifyHtml, nl2br } from '@/utils/formatUtil'
-
-const { widget, history } = defineProps<{
-  widget?: ComponentWidget<string>
-  history: string
-}>()
-
-const editIndex = ref<number | null>(null)
-const scrollPanelRef = ref<InstanceType<typeof ScrollPanel> | null>(null)
-
-const parsedHistory = computed(() => JSON.parse(history || '[]'))
-
-const findPromptInput = () =>
-  widget?.node.widgets?.find((w) => w.name === 'prompt')
-let promptInput = findPromptInput()
-const previousPromptInput = ref<string | null>(null)
-
-const getPreviousResponseId = (index: number) =>
-  index > 0 ? (parsedHistory.value[index - 1]?.response_id ?? '') : ''
-
-const storePromptInput = () => {
-  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
-  if (!promptInput) return
-
-  previousPromptInput.value = String(promptInput.value)
-}
-
-const setPromptInput = (text: string, previousResponseId?: string | null) => {
-  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
-  if (!promptInput) return
-
-  if (previousResponseId !== null) {
-    promptInput.value = `<starting_point_id:${previousResponseId}>\n\n${text}`
-  } else {
-    promptInput.value = text
-  }
-}
-
-const handleEdit = (index: number) => {
-  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
-  editIndex.value = index
-  const prevResponseId = index === 0 ? 'start' : getPreviousResponseId(index)
-  const promptText = parsedHistory.value[index]?.prompt ?? ''
-
-  storePromptInput()
-  setPromptInput(promptText, prevResponseId)
-}
-
-const resetEditingState = () => {
-  editIndex.value = null
-}
-const handleCancelEdit = () => {
-  resetEditingState()
-  if (promptInput) {
-    promptInput.value = previousPromptInput.value ?? ''
-  }
-}
-
-const scrollChatToBottom = () => {
-  const content = document.getElementById('chat-scroll-content')
-  if (content) {
-    content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' })
-  }
-}
-
-const onHistoryChanged = () => {
-  resetEditingState()
-  void nextTick(() => scrollChatToBottom())
-}
-
-watch(() => parsedHistory.value, onHistoryChanged, {
-  immediate: true,
-  deep: true
-})
-</script>

src/components/graph/widgets/TextPreviewWidget.vue

@@ -12,12 +12,12 @@
 </template>
 
 <script setup lang="ts">
+import { linkifyHtml, nl2br } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import type { NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
-import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
 const modelValue = defineModel<string>({ required: true })
 const props = defineProps<{

src/components/graph/widgets/chatHistory/CopyButton.vue

@@ -1,36 +0,0 @@
-<template>
-  <Button
-    v-tooltip="
-      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
-    "
-    text
-    rounded
-    class="h-4! w-6! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
-    pt:icon:class="text-xs!"
-    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
-    :aria-label="
-      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
-    "
-    @click="handleCopy"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { ref } from 'vue'
-
-const { text } = defineProps<{
-  text: string
-}>()
-
-const copied = ref(false)
-
-const handleCopy = async () => {
-  if (!text) return
-  await navigator.clipboard.writeText(text)
-  copied.value = true
-  setTimeout(() => {
-    copied.value = false
-  }, 1024)
-}
-</script>

src/components/graph/widgets/chatHistory/ResponseBlurb.vue

@@ -1,22 +0,0 @@
-<template>
-  <span>
-    <div class="mb-1 flex justify-start">
-      <div class="max-w-[80%] rounded-xl px-4 py-1">
-        <div class="text-[12px] break-words">
-          <slot />
-        </div>
-      </div>
-    </div>
-    <div class="ml-1 flex justify-start">
-      <CopyButton :text="text" />
-    </div>
-  </span>
-</template>
-
-<script setup lang="ts">
-import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
-
-defineProps<{
-  text: string
-}>()
-</script>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -137,12 +137,14 @@
 </template>
 
 <script setup lang="ts">
+import { formatVersionAnchor } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -150,7 +152,6 @@ import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
-import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -168,15 +169,6 @@ interface MenuItem {
 }
 
 // Constants
-const EXTERNAL_LINKS = {
-  DOCS: 'https://docs.comfy.org/',
-  DISCORD: 'https://www.comfy.org/discord',
-  GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
-  DESKTOP_GUIDE_WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
-  DESKTOP_GUIDE_MACOS: 'https://docs.comfy.org/installation/desktop/macos',
-  UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
-} as const
-
 const TIME_UNITS = {
   MINUTE: 60 * 1000,
   HOUR: 60 * 60 * 1000,
@@ -193,7 +185,8 @@ const SUBMENU_CONFIG = {
 } as const
 
 // Composables
-const { t, locale } = useI18n()
+const { t } = useI18n()
+const { staticUrls, buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
@@ -230,11 +223,12 @@ const moreItems = computed<MenuItem[]>(() => {
       visible: isElectron(),
       action: () => {
         trackResourceClick('docs', true)
-        const docsUrl =
-          electronAPI().getPlatform() === 'darwin'
-            ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
-            : EXTERNAL_LINKS.DESKTOP_GUIDE_WINDOWS
-        openExternalLink(docsUrl)
+        openExternalLink(
+          buildDocsUrl('/installation/desktop', {
+            includeLocale: true,
+            platform: true
+          })
+        )
         emit('close')
       }
     },
@@ -286,7 +280,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.docs'),
       action: () => {
         trackResourceClick('docs', true)
-        openExternalLink(EXTERNAL_LINKS.DOCS)
+        openExternalLink(buildDocsUrl('/', { includeLocale: true }))
         emit('close')
       }
     },
@@ -297,7 +291,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: 'Discord',
       action: () => {
         trackResourceClick('discord', true)
-        openExternalLink(EXTERNAL_LINKS.DISCORD)
+        openExternalLink(staticUrls.discord)
         emit('close')
       }
     },
@@ -308,7 +302,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.github'),
       action: () => {
         trackResourceClick('github', true)
-        openExternalLink(EXTERNAL_LINKS.GITHUB)
+        openExternalLink(staticUrls.github)
         emit('close')
       }
     },
@@ -533,25 +527,19 @@ const onReleaseClick = (release: ReleaseNote): void => {
   trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)
   const versionAnchor = formatVersionAnchor(release.version)
-  const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
+  const changelogUrl = `${buildDocsUrl('/changelog', { includeLocale: true })}#${versionAnchor}`
   openExternalLink(changelogUrl)
   emit('close')
 }
 
 const onUpdate = (_: ReleaseNote): void => {
   trackResourceClick('docs', true)
-  openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
+  openExternalLink(
+    buildDocsUrl('/installation/update_comfyui', { includeLocale: true })
+  )
   emit('close')
 }
 
-// Generate language-aware changelog URL
-const getChangelogUrl = (): string => {
-  const isChineseLocale = locale.value === 'zh'
-  return isChineseLocale
-    ? 'https://docs.comfy.org/zh-CN/changelog'
-    : 'https://docs.comfy.org/changelog'
-}
-
 // Lifecycle
 onMounted(async () => {
   telemetry?.trackHelpCenterOpened({ source: 'sidebar' })

src/components/input/MultiSelect.accessibility.stories.ts

@@ -1,380 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import type { MultiSelectProps } from 'primevue/multiselect'
-import { ref } from 'vue'
-
-import MultiSelect from './MultiSelect.vue'
-import type { SelectOption } from './types'
-
-// Combine our component props with PrimeVue MultiSelect props
-interface ExtendedProps extends Partial<MultiSelectProps> {
-  // Our custom props
-  label?: string
-  showSearchBox?: boolean
-  showSelectedCount?: boolean
-  showClearButton?: boolean
-  searchPlaceholder?: string
-  listMaxHeight?: string
-  popoverMinWidth?: string
-  popoverMaxWidth?: string
-  // Override modelValue type to match our Option type
-  modelValue?: SelectOption[]
-}
-
-const meta: Meta<ExtendedProps> = {
-  title: 'Components/Input/MultiSelect/Accessibility',
-  component: MultiSelect,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-# MultiSelect Accessibility Guide
-
-This MultiSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
-
-## Keyboard Navigation
-
-- **Tab** - Focus the trigger button
-- **Enter/Space** - Open/close dropdown when focused
-- **Arrow Up/Down** - Navigate through options when dropdown is open
-- **Enter/Space** - Select/deselect options when navigating
-- **Escape** - Close dropdown
-
-## Screen Reader Support
-
-- Uses \`role="combobox"\` to identify as dropdown
-- \`aria-haspopup="listbox"\` indicates popup contains list
-- \`aria-expanded\` shows dropdown state
-- \`aria-label\` provides accessible name with i18n fallback
-- Selected count announced to screen readers
-
-## Testing Instructions
-
-1. **Tab Navigation**: Use Tab key to focus the component
-2. **Keyboard Opening**: Press Enter or Space to open dropdown
-3. **Option Navigation**: Use Arrow keys to navigate options
-4. **Selection**: Press Enter/Space to select options
-5. **Closing**: Press Escape to close dropdown
-6. **Screen Reader**: Test with screen reader software
-
-Try these stories with keyboard-only navigation!
-        `
-      }
-    }
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Label for the trigger button'
-    },
-    showSearchBox: {
-      control: 'boolean',
-      description: 'Show search box in dropdown header'
-    },
-    showSelectedCount: {
-      control: 'boolean',
-      description: 'Show selected count in dropdown header'
-    },
-    showClearButton: {
-      control: 'boolean',
-      description: 'Show clear all button in dropdown header'
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const frameworkOptions = [
-  { name: 'React', value: 'react' },
-  { name: 'Vue', value: 'vue' },
-  { name: 'Angular', value: 'angular' },
-  { name: 'Svelte', value: 'svelte' },
-  { name: 'TypeScript', value: 'typescript' },
-  { name: 'JavaScript', value: 'javascript' }
-]
-
-export const KeyboardNavigationDemo: Story = {
-  render: (args) => ({
-    components: { MultiSelect },
-    setup() {
-      const selectedFrameworks = ref<SelectOption[]>([])
-      const searchQuery = ref('')
-
-      return {
-        args: {
-          ...args,
-          options: frameworkOptions,
-          modelValue: selectedFrameworks,
-          'onUpdate:modelValue': (value: SelectOption[]) => {
-            selectedFrameworks.value = value
-          },
-          'onUpdate:searchQuery': (value: string) => {
-            searchQuery.value = value
-          }
-        },
-        selectedFrameworks,
-        searchQuery
-      }
-    },
-    template: `
-      <div class="space-y-4 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
-          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
-            Use your keyboard to navigate this MultiSelect:
-          </p>
-          <ol class="text-sm text-smoke-600 list-decimal list-inside space-y-1">
-            <li><strong>Tab</strong> to focus the dropdown</li>
-            <li><strong>Enter/Space</strong> to open dropdown</li>
-            <li><strong>Arrow Up/Down</strong> to navigate options</li>
-            <li><strong>Enter/Space</strong> to select options</li>
-            <li><strong>Escape</strong> to close dropdown</li>
-          </ol>
-        </div>
-
-        <div class="space-y-2">
-          <label class="block text-sm font-medium text-smoke-700">
-            Select Frameworks (Keyboard Navigation Test)
-          </label>
-          <MultiSelect v-bind="args" class="w-80" />
-          <p class="text-xs text-smoke-500">
-            Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
-          </p>
-        </div>
-      </div>
-    `
-  }),
-  args: {
-    label: 'Choose Frameworks',
-    showSearchBox: true,
-    showSelectedCount: true,
-    showClearButton: true
-  }
-}
-
-export const ScreenReaderFriendly: Story = {
-  render: (args) => ({
-    components: { MultiSelect },
-    setup() {
-      const selectedColors = ref<SelectOption[]>([])
-      const selectedSizes = ref<SelectOption[]>([])
-
-      const colorOptions = [
-        { name: 'Red', value: 'red' },
-        { name: 'Blue', value: 'blue' },
-        { name: 'Green', value: 'green' },
-        { name: 'Yellow', value: 'yellow' }
-      ]
-
-      const sizeOptions = [
-        { name: 'Small', value: 'sm' },
-        { name: 'Medium', value: 'md' },
-        { name: 'Large', value: 'lg' },
-        { name: 'Extra Large', value: 'xl' }
-      ]
-
-      return {
-        selectedColors,
-        selectedSizes,
-        colorOptions,
-        sizeOptions,
-        args
-      }
-    },
-    template: `
-      <div class="space-y-6 p-4">
-        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
-          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-smoke-600 mb-2">
-            These dropdowns have proper ARIA attributes and labels for screen readers:
-          </p>
-          <ul class="text-sm text-smoke-600 list-disc list-inside space-y-1">
-            <li><code>role="combobox"</code> identifies as dropdown</li>
-            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
-            <li><code>aria-expanded</code> shows open/closed state</li>
-            <li><code>aria-label</code> provides accessible name</li>
-            <li>Selection count announced to assistive technology</li>
-          </ul>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-smoke-700">
-              Color Preferences
-            </label>
-            <MultiSelect
-              v-model="selectedColors"
-              :options="colorOptions"
-              label="Select colors"
-              :show-selected-count="true"
-              :show-clear-button="true"
-              class="w-full"
-            />
-            <p class="text-xs text-smoke-500" aria-live="polite">
-              {{ selectedColors.length }} color(s) selected
-            </p>
-          </div>
-
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-smoke-700">
-              Size Preferences
-            </label>
-            <MultiSelect
-              v-model="selectedSizes"
-              :options="sizeOptions"
-              label="Select sizes"
-              :show-selected-count="true"
-              :show-search-box="true"
-              class="w-full"
-            />
-            <p class="text-xs text-smoke-500" aria-live="polite">
-              {{ selectedSizes.length }} size(s) selected
-            </p>
-          </div>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const FocusManagement: Story = {
-  render: (args) => ({
-    components: { MultiSelect },
-    setup() {
-      const selectedItems = ref<SelectOption[]>([])
-      const focusTestOptions = [
-        { name: 'Option A', value: 'a' },
-        { name: 'Option B', value: 'b' },
-        { name: 'Option C', value: 'c' }
-      ]
-
-      return {
-        selectedItems,
-        focusTestOptions,
-        args
-      }
-    },
-    template: `
-      <div class="space-y-4 p-4">
-        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
-          <h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
-          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
-            Test focus behavior with multiple form elements:
-          </p>
-        </div>
-
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 mb-1">
-              Before MultiSelect
-            </label>
-            <input
-              type="text"
-              placeholder="Previous field"
-              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 mb-1">
-              MultiSelect (Test Focus Ring)
-            </label>
-            <MultiSelect
-              v-model="selectedItems"
-              :options="focusTestOptions"
-              label="Focus test dropdown"
-              :show-selected-count="true"
-              class="w-64"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 mb-1">
-              After MultiSelect
-            </label>
-            <input
-              type="text"
-              placeholder="Next field"
-              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            />
-          </div>
-
-          <button
-            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-          >
-            Submit Button
-          </button>
-        </div>
-
-        <div class="text-sm text-smoke-600 mt-4">
-          <strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
-        </div>
-      </div>
-    `
-  })
-}
-
-export const AccessibilityChecklist: Story = {
-  render: () => ({
-    template: `
-      <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
-          <h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
-              <ul class="space-y-2 text-sm">
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Color Contrast:</strong> Meets WCAG AA requirements</span>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
-              <ol class="space-y-2 text-sm list-decimal list-inside">
-                <li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
-                <li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
-                <li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
-                <li><strong>Tab Order:</strong> Verify logical progression</li>
-                <li><strong>Announcements:</strong> Check state changes are announced</li>
-                <li><strong>Escape Behavior:</strong> Escape always closes dropdown</li>
-              </ol>
-            </div>
-          </div>
-
-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
-            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-smoke-700 dark-theme:text-smoke-300">
-              Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
-              If you can successfully navigate and make selections, the accessibility implementation is working!
-            </p>
-          </div>
-        </div>
-      </div>
-    `
-  })
-}

src/components/input/MultiSelect.stories.ts

@@ -102,7 +102,7 @@ export const Default: Story = {
           :showClearButton="args.showClearButton"
           :searchPlaceholder="args.searchPlaceholder"
         />
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-base-background rounded">
           <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
         </div>
       </div>
@@ -135,7 +135,7 @@ export const WithPreselectedValues: Story = {
           :showClearButton="args.showClearButton"
           :searchPlaceholder="args.searchPlaceholder"
         />
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-base-background rounded">
           <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
         </div>
       </div>
@@ -229,7 +229,7 @@ export const MultipleSelectors: Story = {
           />
         </div>
         
-        <div class="p-4 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="p-4 bg-base-background rounded">
           <h4 class="font-medium mt-0">Current Selection:</h4>
           <div class="flex flex-col text-sm">
             <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>

src/components/input/MultiSelect.vue

@@ -13,12 +13,77 @@
     option-label="name"
     unstyled
     :max-selected-labels="0"
-    :pt="pt"
+    :pt="{
+      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'h-10 relative inline-flex cursor-pointer select-none',
+          'rounded-lg bg-base-background text-base-foreground',
+          'transition-all duration-200 ease-in-out',
+          'border-[2.5px] border-solid',
+          selectedCount > 0
+            ? 'border-node-component-border'
+            : 'border-transparent',
+          'focus-within:border-node-component-border',
+          { 'opacity-60 cursor-default': props.disabled }
+        )
+      }),
+      labelContainer: {
+        class:
+          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
+      },
+      label: {
+        class: 'p-0'
+      },
+      dropdown: {
+        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
+      },
+      header: () => ({
+        class:
+          showSearchBox || showSelectedCount || showClearButton
+            ? 'block'
+            : 'hidden'
+      }),
+      // Overlay & list visuals unchanged
+      overlay: {
+        class: cn(
+          'mt-2 rounded-lg py-2 px-2',
+          'bg-base-background',
+          'text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      // Option row hover and focus tone
+      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'flex gap-2 items-center h-10 px-2 rounded-lg',
+          'hover:bg-secondary-background-hover',
+          // Add focus/highlight state for keyboard navigation
+          context?.focused &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      // Hide built-in checkboxes entirely via PT (no :deep)
+      pcHeaderCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      },
+      pcOptionCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      }
+    }"
     :aria-label="label || t('g.multiSelectDropdown')"
     role="combobox"
     :aria-expanded="false"
     aria-haspopup="listbox"
-    :tabindex="0"
+    tabindex="0"
   >
     <template
       v-if="showSearchBox || showSelectedCount || showClearButton"
@@ -39,7 +104,7 @@
         >
           <span
             v-if="showSelectedCount"
-            class="px-1 text-sm text-neutral-400 dark-theme:text-zinc-500"
+            class="px-1 text-sm text-base-foreground"
           >
             {{
               selectedCount > 0
@@ -52,22 +117,22 @@
             :label="$t('g.clearAll')"
             type="transparent"
             size="fit-content"
-            class="text-sm text-blue-500 dark-theme:text-blue-600"
+            class="text-sm text-text-primary"
             @click.stop="selectedItems = []"
           />
         </div>
-        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+        <div class="my-4 h-px bg-border-default"></div>
       </div>
     </template>
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
+      <span class="text-sm text-muted-foreground">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white dark-theme:bg-blue-500"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
       >
         {{ selectedCount }}
       </span>
@@ -85,8 +150,8 @@
           class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
-              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-              : 'bg-neutral-100 dark-theme:bg-zinc-700'
+              ? 'bg-primary-background'
+              : 'bg-secondary-background'
           "
         >
           <i
@@ -203,70 +268,4 @@ const filteredOptions = computed(() => {
 
   return [...selectedButNotInResults, ...searchResults]
 })
-
-const pt = computed(() => ({
-  root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-    class: cn(
-      'h-10 relative inline-flex cursor-pointer select-none',
-      'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
-      'transition-all duration-200 ease-in-out',
-      'border-[2.5px] border-solid',
-      selectedCount.value > 0
-        ? 'border-blue-400 dark-theme:border-blue-500'
-        : 'border-transparent',
-      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
-      { 'opacity-60 cursor-default': props.disabled }
-    )
-  }),
-  labelContainer: {
-    class:
-      'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
-  },
-  label: {
-    class: 'p-0'
-  },
-  dropdown: {
-    class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
-  },
-  header: () => ({
-    class:
-      showSearchBox || showSelectedCount || showClearButton ? 'block' : 'hidden'
-  }),
-  // Overlay & list visuals unchanged
-  overlay: {
-    class: cn(
-      'mt-2 rounded-lg py-2 px-2',
-      'bg-white dark-theme:bg-zinc-800',
-      'text-neutral dark-theme:text-white',
-      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
-    )
-  },
-  listContainer: () => ({
-    style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
-    class: 'scrollbar-custom'
-  }),
-  list: {
-    class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-  },
-  // Option row hover and focus tone
-  option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
-    class: [
-      'flex gap-2 items-center h-10 px-2 rounded-lg',
-      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
-      // Add focus/highlight state for keyboard navigation
-      {
-        'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context?.focused
-      }
-    ]
-  }),
-  // Hide built-in checkboxes entirely via PT (no :deep)
-  pcHeaderCheckbox: {
-    root: { class: 'hidden' },
-    style: { display: 'none' }
-  },
-  pcOptionCheckbox: {
-    root: { class: 'hidden' },
-    style: { display: 'none' }
-  }
-}))
 </script>

src/components/input/SearchBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search]" :class="iconColorStyle" />
+    <i class="icon-[lucide--search] text-muted" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -12,7 +12,7 @@
       "
       type="text"
       unstyled
-      :class="inputStyle"
+      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm text-base-foreground"
     />
   </div>
 </template>
@@ -72,18 +72,13 @@ const focusInput = () => {
 onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
-  const baseClasses = [
-    'relative flex w-full items-center gap-2',
-    'bg-white dark-theme:bg-zinc-800',
-    'cursor-text'
-  ]
+  const baseClasses =
+    'relative flex w-full items-center gap-2 bg-base-background cursor-text'
 
   if (showBorder) {
     return cn(
-      ...baseClasses,
-      'rounded p-2',
-      'border border-solid',
-      'border-zinc-200 dark-theme:border-zinc-700'
+      baseClasses,
+      'rounded p-2 border border-solid border-border-default'
     )
   }
 
@@ -93,20 +88,6 @@ const wrapperStyle = computed(() => {
     lg: 'h-10 px-4 py-2' // Matches button md size
   }[size]
 
-  return cn(...baseClasses, 'rounded-lg', sizeClasses)
-})
-
-const inputStyle = computed(() => {
-  return cn(
-    'absolute inset-0 w-full h-full pl-11',
-    'border-none outline-none bg-transparent',
-    'text-sm text-neutral dark-theme:text-white'
-  )
-})
-
-const iconColorStyle = computed(() => {
-  return cn(
-    !showBorder ? 'text-neutral' : ['text-zinc-300', 'dark-theme:text-zinc-700']
-  )
+  return cn(baseClasses, 'rounded-lg', sizeClasses)
 })
 </script>

src/components/input/SingleSelect.accessibility.stories.ts

@@ -1,464 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import SingleSelect from './SingleSelect.vue'
-
-interface SingleSelectProps {
-  label?: string
-  options?: Array<{ name: string; value: string }>
-  listMaxHeight?: string
-  popoverMinWidth?: string
-  popoverMaxWidth?: string
-  modelValue?: string | null
-}
-
-const meta: Meta<SingleSelectProps> = {
-  title: 'Components/Input/SingleSelect/Accessibility',
-  component: SingleSelect,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-# SingleSelect Accessibility Guide
-
-This SingleSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
-
-## Keyboard Navigation
-
-- **Tab** - Focus the trigger button
-- **Enter/Space** - Open/close dropdown when focused
-- **Arrow Up/Down** - Navigate through options when dropdown is open
-- **Enter/Space** - Select option when navigating
-- **Escape** - Close dropdown
-
-## Screen Reader Support
-
-- Uses \`role="combobox"\` to identify as dropdown
-- \`aria-haspopup="listbox"\` indicates popup contains list
-- \`aria-expanded\` shows dropdown state
-- \`aria-label\` provides accessible name with i18n fallback
-- Selected option announced to screen readers
-
-## Testing Instructions
-
-1. **Tab Navigation**: Use Tab key to focus the component
-2. **Keyboard Opening**: Press Enter or Space to open dropdown
-3. **Option Navigation**: Use Arrow keys to navigate options
-4. **Selection**: Press Enter/Space to select an option
-5. **Closing**: Press Escape to close dropdown
-6. **Screen Reader**: Test with screen reader software
-
-Try these stories with keyboard-only navigation!
-        `
-      }
-    }
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Label for the trigger button'
-    },
-    listMaxHeight: {
-      control: 'text',
-      description: 'Maximum height of dropdown list'
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const sortOptions = [
-  { name: 'Name A → Z', value: 'name-asc' },
-  { name: 'Name Z → A', value: 'name-desc' },
-  { name: 'Most Popular', value: 'popular' },
-  { name: 'Most Recent', value: 'recent' },
-  { name: 'File Size', value: 'size' }
-]
-
-const priorityOptions = [
-  { name: 'High Priority', value: 'high' },
-  { name: 'Medium Priority', value: 'medium' },
-  { name: 'Low Priority', value: 'low' },
-  { name: 'No Priority', value: 'none' }
-]
-
-export const KeyboardNavigationDemo: Story = {
-  render: (args) => ({
-    components: { SingleSelect },
-    setup() {
-      const selectedSort = ref<string | null>(null)
-      const selectedPriority = ref<string | null>('medium')
-
-      return {
-        args,
-        selectedSort,
-        selectedPriority,
-        sortOptions,
-        priorityOptions
-      }
-    },
-    template: `
-      <div class="space-y-6 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
-          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
-            Use your keyboard to navigate these SingleSelect dropdowns:
-          </p>
-          <ol class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-decimal list-inside space-y-1">
-            <li><strong>Tab</strong> to focus the dropdown</li>
-            <li><strong>Enter/Space</strong> to open dropdown</li>
-            <li><strong>Arrow Up/Down</strong> to navigate options</li>
-            <li><strong>Enter/Space</strong> to select option</li>
-            <li><strong>Escape</strong> to close dropdown</li>
-          </ol>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
-              Sort Order
-            </label>
-            <SingleSelect
-              v-model="selectedSort"
-              :options="sortOptions"
-              label="Choose sort order"
-              class="w-full"
-            />
-            <p class="text-xs text-smoke-500">
-              Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
-            </p>
-          </div>
-
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
-              Task Priority (With Icon)
-            </label>
-            <SingleSelect
-              v-model="selectedPriority"
-              :options="priorityOptions"
-              label="Set priority level"
-              class="w-full"
-            >
-              <template #icon>
-                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
-                </svg>
-              </template>
-            </SingleSelect>
-            <p class="text-xs text-smoke-500">
-              Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
-            </p>
-          </div>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const ScreenReaderFriendly: Story = {
-  render: (args) => ({
-    components: { SingleSelect },
-    setup() {
-      const selectedLanguage = ref<string | null>('en')
-      const selectedTheme = ref<string | null>(null)
-
-      const languageOptions = [
-        { name: 'English', value: 'en' },
-        { name: 'Spanish', value: 'es' },
-        { name: 'French', value: 'fr' },
-        { name: 'German', value: 'de' },
-        { name: 'Japanese', value: 'ja' }
-      ]
-
-      const themeOptions = [
-        { name: 'Light Theme', value: 'light' },
-        { name: 'Dark Theme', value: 'dark' },
-        { name: 'Auto (System)', value: 'auto' },
-        { name: 'High Contrast', value: 'contrast' }
-      ]
-
-      return {
-        selectedLanguage,
-        selectedTheme,
-        languageOptions,
-        themeOptions,
-        args
-      }
-    },
-    template: `
-      <div class="space-y-6 p-4">
-        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
-          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-2">
-            These dropdowns have proper ARIA attributes and labels for screen readers:
-          </p>
-          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-disc list-inside space-y-1">
-            <li><code>role="combobox"</code> identifies as dropdown</li>
-            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
-            <li><code>aria-expanded</code> shows open/closed state</li>
-            <li><code>aria-label</code> provides accessible name</li>
-            <li>Selected option value announced to assistive technology</li>
-          </ul>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="language-label">
-              Preferred Language
-            </label>
-            <SingleSelect
-              v-model="selectedLanguage"
-              :options="languageOptions"
-              label="Select language"
-              class="w-full"
-              aria-labelledby="language-label"
-            />
-            <p class="text-xs text-smoke-500" aria-live="polite">
-              Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
-            </p>
-          </div>
-
-          <div class="space-y-2">
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="theme-label">
-              Interface Theme
-            </label>
-            <SingleSelect
-              v-model="selectedTheme"
-              :options="themeOptions"
-              label="Select theme"
-              class="w-full"
-              aria-labelledby="theme-label"
-            />
-            <p class="text-xs text-smoke-500" aria-live="polite">
-              Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
-            </p>
-          </div>
-        </div>
-
-        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-          <h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
-          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 space-y-1">
-            <li>• Listen for role announcements when focusing</li>
-            <li>• Verify dropdown state changes are announced</li>
-            <li>• Check that selected values are spoken clearly</li>
-            <li>• Ensure option navigation is announced</li>
-          </ul>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const FormIntegration: Story = {
-  render: (args) => ({
-    components: { SingleSelect },
-    setup() {
-      const formData = ref({
-        category: null as string | null,
-        status: 'draft' as string | null,
-        assignee: null as string | null
-      })
-
-      const categoryOptions = [
-        { name: 'Bug Report', value: 'bug' },
-        { name: 'Feature Request', value: 'feature' },
-        { name: 'Documentation', value: 'docs' },
-        { name: 'Question', value: 'question' }
-      ]
-
-      const statusOptions = [
-        { name: 'Draft', value: 'draft' },
-        { name: 'Review', value: 'review' },
-        { name: 'Approved', value: 'approved' },
-        { name: 'Published', value: 'published' }
-      ]
-
-      const assigneeOptions = [
-        { name: 'Alice Johnson', value: 'alice' },
-        { name: 'Bob Smith', value: 'bob' },
-        { name: 'Carol Davis', value: 'carol' },
-        { name: 'David Wilson', value: 'david' }
-      ]
-
-      const handleSubmit = () => {
-        alert('Form submitted with: ' + JSON.stringify(formData.value, null, 2))
-      }
-
-      return {
-        formData,
-        categoryOptions,
-        statusOptions,
-        assigneeOptions,
-        handleSubmit,
-        args
-      }
-    },
-    template: `
-      <div class="max-w-2xl mx-auto p-6">
-        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
-          <h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
-          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300">
-            Test keyboard navigation through a complete form with SingleSelect components.
-            Tab order should be logical and all elements should be accessible.
-          </p>
-        </div>
-
-        <form @submit.prevent="handleSubmit" class="space-y-6">
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
-              Title *
-            </label>
-            <input
-              type="text"
-              required
-              placeholder="Enter a title"
-              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
-              Category *
-            </label>
-            <SingleSelect
-              v-model="formData.category"
-              :options="categoryOptions"
-              label="Select category"
-              required
-              class="w-full"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
-              Status
-            </label>
-            <SingleSelect
-              v-model="formData.status"
-              :options="statusOptions"
-              label="Select status"
-              class="w-full"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
-              Assignee
-            </label>
-            <SingleSelect
-              v-model="formData.assignee"
-              :options="assigneeOptions"
-              label="Select assignee"
-              class="w-full"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
-              Description
-            </label>
-            <textarea
-              rows="4"
-              placeholder="Enter description"
-              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            />
-          </div>
-
-          <div class="flex gap-3">
-            <button
-              type="submit"
-              class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-            >
-              Submit
-            </button>
-            <button
-              type="button"
-              class="px-4 py-2 bg-smoke-300 dark-theme:bg-smoke-600 text-smoke-700 dark-theme:text-smoke-200 rounded-md hover:bg-smoke-400 dark-theme:hover:bg-smoke-500 focus:ring-2 focus:ring-smoke-500 focus:ring-offset-2"
-            >
-              Cancel
-            </button>
-          </div>
-        </form>
-
-        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg">
-          <h4 class="font-semibold mb-2">Current Form Data:</h4>
-          <pre class="text-xs text-smoke-600 dark-theme:text-smoke-300">{{ JSON.stringify(formData, null, 2) }}</pre>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const AccessibilityChecklist: Story = {
-  render: () => ({
-    template: `
-      <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
-          <h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
-              <ul class="space-y-2 text-sm">
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-500 mr-2">✓</span>
-                  <span><strong>Form Integration:</strong> Works properly in forms with other elements</span>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
-              <ol class="space-y-2 text-sm list-decimal list-inside">
-                <li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
-                <li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
-                <li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
-                <li><strong>Tab Order:</strong> Verify logical progression in forms</li>
-                <li><strong>Announcements:</strong> Check state changes are announced</li>
-                <li><strong>Selection:</strong> Verify selected value is announced</li>
-              </ol>
-            </div>
-          </div>
-
-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
-            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
-              Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
-              If you can successfully navigate and make selections, the accessibility implementation is working!
-            </p>
-          </div>
-
-          <div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
-            <h4 class="font-semibold mb-2">⚡ Performance Note</h4>
-            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
-              These accessibility features are built into the component with minimal performance impact.
-              The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
-            </p>
-          </div>
-        </div>
-      </div>
-    `
-  })
-}

src/components/input/SingleSelect.stories.ts

@@ -58,7 +58,7 @@ export const Default: Story = {
     template: `
       <div>
         <SingleSelect v-model="selected" :options="options" :label="args.label" />
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-base-background rounded">
           <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
         </div>
       </div>
@@ -81,7 +81,7 @@ export const WithIcon: Story = {
             <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
           </template>
         </SingleSelect>
-        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+        <div class="mt-4 p-3 bg-base-background rounded">
           <p class="text-sm">Selected: {{ selected }}</p>
         </div>
       </div>

src/components/input/SingleSelect.vue

@@ -13,7 +13,69 @@
     option-label="name"
     option-value="value"
     unstyled
-    :pt="pt"
+    :pt="{
+      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
+        class: [
+          // container
+          'h-10 relative inline-flex cursor-pointer select-none items-center',
+          // trigger surface
+          'rounded-lg',
+          'bg-base-background text-base-foreground',
+          'border-[2.5px] border-solid border-transparent',
+          'transition-all duration-200 ease-in-out',
+          'focus-within:border-node-component-border',
+          // disabled
+          { 'opacity-60 cursor-default': props.disabled }
+        ]
+      }),
+      label: {
+        class:
+          // Align with MultiSelect labelContainer spacing
+          'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
+      },
+      dropdown: {
+        class:
+          // Right chevron touch area
+          'flex shrink-0 items-center justify-center px-3 py-2'
+      },
+      overlay: {
+        class: cn(
+          'mt-2 p-2 rounded-lg',
+          'bg-base-background text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: `max-height: min(${listMaxHeight}, 50vh)`,
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class:
+          // Same list tone/size as MultiSelect
+          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
+        class: cn(
+          // Row layout
+          'flex items-center justify-between gap-3 px-2 py-3 rounded',
+          'hover:bg-secondary-background-hover',
+          // Add focus state for keyboard navigation
+          context.focused && 'bg-secondary-background-hover',
+          // Selected state + check icon
+          context.selected &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      optionLabel: {
+        class: 'truncate'
+      },
+      optionGroupLabel: {
+        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
+      },
+      emptyMessage: {
+        class: 'px-3 py-2 text-sm text-muted-foreground'
+      }
+    }"
     :aria-label="label || t('g.singleSelectDropdown')"
     role="combobox"
     :aria-expanded="false"
@@ -26,11 +88,11 @@
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-zinc-700 dark-theme:text-smoke-200"
+          class="text-base-foreground"
         >
           {{ getLabel(slotProps.value) }}
         </span>
-        <span v-else class="text-zinc-700 dark-theme:text-smoke-200">
+        <span v-else class="text-base-foreground">
           {{ label }}
         </span>
       </div>
@@ -48,10 +110,7 @@
         :style="optionStyle"
       >
         <span class="truncate">{{ option.name }}</span>
-        <i
-          v-if="selected"
-          class="icon-[lucide--check] text-neutral-600 dark-theme:text-white"
-        />
+        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
       </div>
     </template>
   </Select>
@@ -119,73 +178,4 @@ const optionStyle = computed(() => {
 
   return styles.join('; ')
 })
-
-/**
- * Unstyled + PT API only
- * - No background/border (same as page background)
- * - Text/icon scale: compact size matching MultiSelect
- */
-const pt = computed(() => ({
-  root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-    class: [
-      // container
-      'h-10 relative inline-flex cursor-pointer select-none items-center',
-      // trigger surface
-      'rounded-lg',
-      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
-      'border-[2.5px] border-solid border-transparent',
-      'transition-all duration-200 ease-in-out',
-      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
-      // disabled
-      { 'opacity-60 cursor-default': props.disabled }
-    ]
-  }),
-  label: {
-    class:
-      // Align with MultiSelect labelContainer spacing
-      'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
-  },
-  dropdown: {
-    class:
-      // Right chevron touch area
-      'flex shrink-0 items-center justify-center px-3 py-2'
-  },
-  overlay: {
-    class: cn(
-      'mt-2 p-2 rounded-lg',
-      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
-      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
-    )
-  },
-  listContainer: () => ({
-    style: `max-height: min(${listMaxHeight}, 50vh)`,
-    class: 'scrollbar-custom'
-  }),
-  list: {
-    class:
-      // Same list tone/size as MultiSelect
-      'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-  },
-  option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
-    class: [
-      // Row layout
-      'flex items-center justify-between gap-3 px-2 py-3 rounded',
-      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
-      // Selected state + check icon
-      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.selected },
-      // Add focus state for keyboard navigation
-      { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.focused }
-    ]
-  }),
-  optionLabel: {
-    class: 'truncate'
-  },
-  optionGroupLabel: {
-    class:
-      'px-3 py-2 text-xs uppercase tracking-wide text-zinc-500 dark-theme:text-zinc-400'
-  },
-  emptyMessage: {
-    class: 'px-3 py-2 text-sm text-zinc-500 dark-theme:text-zinc-400'
-  }
-}))
 </script>

src/components/load3d/Load3dViewerContent.vue

@@ -37,6 +37,7 @@
               v-model:background-render-mode="viewer.backgroundRenderMode.value"
               v-model:fov="viewer.fov.value"
               :has-background-image="viewer.hasBackgroundImage.value"
+              :disable-background-upload="viewer.isStandaloneMode.value"
               @update-background-image="viewer.handleBackgroundImageUpdate"
             />
           </div>
@@ -91,13 +92,15 @@ import LightControls from '@/components/load3d/controls/viewer/ViewerLightContro
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
+import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{
-  node: LGraphNode
+  node?: LGraphNode
+  modelUrl?: string
 }>()
 
 const viewerContentRef = ref<HTMLDivElement>()
@@ -106,20 +109,30 @@ const mainContentRef = ref<HTMLDivElement>()
 const maximized = ref(false)
 const mutationObserver = ref<MutationObserver | null>(null)
 
-const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
+const isStandaloneMode = !props.node && props.modelUrl
+
+const viewer = props.node
+  ? useLoad3dService().getOrCreateViewer(toRaw(props.node))
+  : useLoad3dViewer()
 
 const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
   useLoad3dDrag({
     onModelDrop: async (file) => {
       await viewer.handleModelDrop(file)
     },
-    disabled: viewer.isPreview
+    disabled: viewer.isPreview.value || isStandaloneMode
   })
 
 onMounted(async () => {
-  const source = useLoad3dService().getLoad3d(props.node)
-  if (source && containerRef.value) {
-    await viewer.initializeViewer(containerRef.value, source)
+  if (!containerRef.value) return
+
+  if (isStandaloneMode && props.modelUrl) {
+    await viewer.initializeStandaloneViewer(containerRef.value, props.modelUrl)
+  } else if (props.node) {
+    const source = useLoad3dService().getLoad3d(props.node)
+    if (source) {
+      await viewer.initializeViewer(containerRef.value, source)
+    }
   }
 
   if (viewerContentRef.value) {
@@ -150,7 +163,9 @@ onMounted(async () => {
 })
 
 const handleCancel = () => {
-  viewer.restoreInitialState()
+  if (!isStandaloneMode) {
+    viewer.restoreInitialState()
+  }
   useDialogStore().closeDialog()
 }
 

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -14,7 +14,7 @@
       </label>
     </div>
 
-    <div v-if="!hasBackgroundImage">
+    <div v-if="!hasBackgroundImage && !disableBackgroundUpload">
       <Button
         severity="secondary"
         :label="$t('load3d.uploadBackgroundImage')"
@@ -74,6 +74,7 @@ const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(
 
 defineProps<{
   hasBackgroundImage?: boolean
+  disableBackgroundUpload?: boolean
 }>()
 
 const emit = defineEmits<{

src/components/maskeditor/BrushCursor.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    id="maskEditor_brush"
+    :style="{
+      position: 'absolute',
+      opacity: brushOpacity,
+      width: `${brushSize}px`,
+      height: `${brushSize}px`,
+      left: `${brushLeft}px`,
+      top: `${brushTop}px`,
+      borderRadius: borderRadius,
+      pointerEvents: 'none',
+      zIndex: 1000
+    }"
+  >
+    <div
+      id="maskEditor_brushPreviewGradient"
+      :style="{
+        display: gradientVisible ? 'block' : 'none',
+        background: gradientBackground
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { BrushShape } from '@/extensions/core/maskeditor/types'
+import { useMaskEditorStore } from '@/stores/maskEditorStore'
+
+const { containerRef } = defineProps<{
+  containerRef?: HTMLElement
+}>()
+
+const store = useMaskEditorStore()
+
+const brushOpacity = computed(() => {
+  return store.brushVisible ? '1' : '0'
+})
+
+const brushRadius = computed(() => {
+  return store.brushSettings.size * store.zoomRatio
+})
+
+const brushSize = computed(() => {
+  return brushRadius.value * 2
+})
+
+const brushLeft = computed(() => {
+  const dialogRect = containerRef?.getBoundingClientRect()
+  const dialogOffsetLeft = dialogRect?.left || 0
+  return (
+    store.cursorPoint.x +
+    store.panOffset.x -
+    brushRadius.value -
+    dialogOffsetLeft
+  )
+})
+
+const brushTop = computed(() => {
+  const dialogRect = containerRef?.getBoundingClientRect()
+  const dialogOffsetTop = dialogRect?.top || 0
+  return (
+    store.cursorPoint.y +
+    store.panOffset.y -
+    brushRadius.value -
+    dialogOffsetTop
+  )
+})
+
+const borderRadius = computed(() => {
+  return store.brushSettings.type === BrushShape.Rect ? '0%' : '50%'
+})
+
+const gradientVisible = computed(() => {
+  return store.brushPreviewGradientVisible
+})
+
+const gradientBackground = computed(() => {
+  const hardness = store.brushSettings.hardness
+
+  if (hardness === 1) {
+    return 'rgba(255, 0, 0, 0.5)'
+  }
+
+  const midStop = hardness * 100
+  const outerStop = 100
+
+  return `radial-gradient(
+    circle,
+    rgba(255, 0, 0, 0.5) 0%,
+    rgba(255, 0, 0, 0.25) ${midStop}%,
+    rgba(255, 0, 0, 0) ${outerStop}%
+  )`
+})
+</script>