diff --git a/.claude/commands/create-hotfix-release.md b/.claude/commands/create-hotfix-release.md
index de314309d..f35a8ad23 100644
--- a/.claude/commands/create-hotfix-release.md
+++ b/.claude/commands/create-hotfix-release.md
@@ -1,30 +1,85 @@
 # Create Hotfix Release
 
-This command guides you through creating a patch/hotfix release for ComfyUI Frontend with comprehensive safety checks and human confirmations at each step.
+This command creates patch/hotfix releases for ComfyUI Frontend by backporting fixes to stable core branches. It handles both automated backports (preferred) and manual cherry-picking (fallback).
+
+**Process Overview:**
+1. **Check automated backports first** (via labels)
+2. **Skip to version bump** if backports already merged
+3. **Manual cherry-picking** if automation failed
+4. **Create patch release** with version bump  
+5. **Publish GitHub release** (manually uncheck "latest")
+6. **Update ComfyUI requirements.txt** via PR
 
 <task>
-Create a hotfix release by cherry-picking commits or PR commits from main to a core branch: $ARGUMENTS
+Create a hotfix release by backporting commits/PRs from main to a core branch: $ARGUMENTS
 
 Expected format: Comma-separated list of commits or PR numbers
 Examples: 
-- `abc123,def456,ghi789` (commits)
-- `#1234,#5678` (PRs)
-- `abc123,#1234,def456` (mixed)
+- `#1234,#5678` (PRs - preferred)
+- `abc123,def456` (commit hashes)
+- `#1234,abc123` (mixed)
 
-If no arguments provided, the command will help identify the correct core branch and guide you through selecting commits/PRs.
+If no arguments provided, the command will guide you through identifying commits/PRs to backport.
 </task>
 
 ## Prerequisites
 
-Before starting, ensure:
-- You have push access to the repository
-- GitHub CLI (`gh`) is authenticated
-- You're on a clean working tree
-- You understand the commits/PRs you're cherry-picking
+- Push access to repository
+- GitHub CLI (`gh`) authenticated  
+- Clean working tree
+- Understanding of what fixes need backporting
 
 ## Hotfix Release Process
 
-### Step 1: Identify Target Core Branch
+### Step 1: Try Automated Backports First
+
+**Check if automated backports were attempted:**
+
+1. **For each PR, check existing backport labels:**
+   ```bash
+   gh pr view #1234 --json labels | jq -r '.labels[].name'
+   ```
+
+2. **If no backport labels exist, add them now:**
+   ```bash
+   # Add backport labels (this triggers automated backports)
+   gh pr edit #1234 --add-label "needs-backport"
+   gh pr edit #1234 --add-label "1.24"  # Replace with target version
+   ```
+
+3. **Check for existing backport PRs:**
+   ```bash
+   # Check for backport PRs created by automation
+   PR_NUMBER=${ARGUMENTS%%,*}  # Extract first PR number from arguments
+   PR_NUMBER=${PR_NUMBER#\#}   # Remove # prefix
+   gh pr list --search "backport-${PR_NUMBER}-to" --json number,title,state,baseRefName
+   ```
+
+4. **Handle existing backport scenarios:**
+
+   **Scenario A: Automated backports already merged**
+   ```bash
+   # Check if backport PRs were merged to core branches
+   gh pr list --search "backport-${PR_NUMBER}-to" --state merged
+   ```
+   - If backport PRs are merged → Skip to Step 10 (Version Bump)
+   - **CONFIRMATION**: Automated backports completed, proceeding to version bump?
+
+   **Scenario B: Automated backport PRs exist but not merged**
+   ```bash
+   # Show open backport PRs that need merging
+   gh pr list --search "backport-${PR_NUMBER}-to" --state open
+   ```
+   - **ACTION REQUIRED**: Merge the existing backport PRs first
+   - Use: `gh pr merge [PR_NUMBER] --merge` for each backport PR
+   - After merging, return to this command and skip to Step 10 (Version Bump)
+   - **CONFIRMATION**: Have you merged all backport PRs? Ready to proceed to version bump?
+
+   **Scenario C: No automated backports or they failed**
+   - Continue to Step 2 for manual cherry-picking
+   - **CONFIRMATION**: Proceeding with manual cherry-picking because automation failed?
+
+### Step 2: Identify Target Core Branch
 
 1. Fetch the current ComfyUI requirements.txt from master branch:
    ```bash
@@ -36,7 +91,7 @@ Before starting, ensure:
 5. Verify the core branch exists: `git ls-remote origin refs/heads/core/*`
 6. **CONFIRMATION REQUIRED**: Is `core/X.Y` the correct target branch?
 
-### Step 2: Parse and Validate Arguments
+### Step 3: Parse and Validate Arguments
 
 1. Parse the comma-separated list of commits/PRs
 2. For each item:
@@ -49,7 +104,7 @@ Before starting, ensure:
    - **CONFIRMATION REQUIRED**: Use merge commit or cherry-pick individual commits?
 4. Validate all commit hashes exist in the repository
 
-### Step 3: Analyze Target Changes
+### Step 4: Analyze Target Changes
 
 1. For each commit/PR to cherry-pick:
    - Display commit hash, author, date
@@ -60,7 +115,7 @@ Before starting, ensure:
 2. Identify potential conflicts by checking changed files
 3. **CONFIRMATION REQUIRED**: Proceed with these commits?
 
-### Step 4: Create Hotfix Branch
+### Step 5: Create Hotfix Branch
 
 1. Checkout the core branch (e.g., `core/1.23`)
 2. Pull latest changes: `git pull origin core/X.Y`
@@ -69,7 +124,7 @@ Before starting, ensure:
    - Example: `hotfix/1.23.4-20241120`
 5. **CONFIRMATION REQUIRED**: Created branch correctly?
 
-### Step 5: Cherry-pick Changes
+### Step 6: Cherry-pick Changes
 
 For each commit:
 1. Attempt cherry-pick: `git cherry-pick <commit>`
@@ -83,7 +138,7 @@ For each commit:
    - Run validation: `pnpm typecheck && pnpm lint`
 4. **CONFIRMATION REQUIRED**: Cherry-pick successful and valid?
 
-### Step 6: Create PR to Core Branch
+### Step 7: Create PR to Core Branch
 
 1. Push the hotfix branch: `git push origin hotfix/<version>-<timestamp>`
 2. Create PR using gh CLI:
@@ -100,7 +155,7 @@ For each commit:
    - Impact assessment
 5. **CONFIRMATION REQUIRED**: PR created correctly?
 
-### Step 7: Wait for Tests
+### Step 8: Wait for Tests
 
 1. Monitor PR checks: `gh pr checks`
 2. Display test results as they complete
@@ -111,7 +166,7 @@ For each commit:
 4. Wait for all required checks to pass
 5. **CONFIRMATION REQUIRED**: All tests passing?
 
-### Step 8: Merge Hotfix PR
+### Step 9: Merge Hotfix PR
 
 1. Verify all checks have passed
 2. Check for required approvals
@@ -119,7 +174,7 @@ For each commit:
 4. Delete the hotfix branch
 5. **CONFIRMATION REQUIRED**: PR merged successfully?
 
-### Step 9: Create Version Bump
+### Step 10: Create Version Bump
 
 1. Checkout the core branch: `git checkout core/X.Y`
 2. Pull latest changes: `git pull origin core/X.Y`
@@ -131,7 +186,7 @@ For each commit:
 7. Commit: `git commit -m "[release] Bump version to 1.23.5"`
 8. **CONFIRMATION REQUIRED**: Version bump correct?
 
-### Step 10: Create Release PR
+### Step 11: Create Release PR
 
 1. Push release branch: `git push origin release/1.23.5`
 2. Create PR with Release label:
@@ -184,7 +239,7 @@ For each commit:
      ```
 5. **CONFIRMATION REQUIRED**: Release PR has "Release" label?
 
-### Step 11: Monitor Release Process
+### Step 12: Monitor Release Process
 
 1. Wait for PR checks to pass
 2. **FINAL CONFIRMATION**: Ready to trigger release by merging?
@@ -199,7 +254,102 @@ For each commit:
    - PyPI upload
    - pnpm types publication
 
-### Step 12: Post-Release Verification
+### Step 13: Manually Publish Draft Release
+
+**CRITICAL**: The release workflow creates a DRAFT release. You must manually publish it:
+
+1. **Go to GitHub Releases:** https://github.com/Comfy-Org/ComfyUI_frontend/releases
+2. **Find the DRAFT release** (e.g., "v1.23.5 Draft")
+3. **Click "Edit release"**
+4. **UNCHECK "Set as the latest release"** ⚠️ **CRITICAL**
+   - This prevents the hotfix from showing as "latest" 
+   - Main branch should always be "latest release"
+5. **Click "Publish release"**
+6. **CONFIRMATION REQUIRED**: Draft release published with "latest" unchecked?
+
+### Step 14: Create ComfyUI Requirements.txt Update PR
+
+**IMPORTANT**: Create PR to update ComfyUI's requirements.txt via fork:
+
+1. **Setup fork (if needed):**
+   ```bash
+   # Check if fork already exists
+   if gh repo view ComfyUI --json owner | jq -r '.owner.login' | grep -q "$(gh api user --jq .login)"; then
+     echo "Fork already exists"
+   else
+     # Fork the ComfyUI repository
+     gh repo fork comfyanonymous/ComfyUI --clone=false
+     echo "Created fork of ComfyUI"
+   fi
+   ```
+
+2. **Clone fork and create branch:**
+   ```bash
+   # Clone your fork (or use existing clone)
+   GITHUB_USER=$(gh api user --jq .login)
+   if [ ! -d "ComfyUI-fork" ]; then
+     gh repo clone ${GITHUB_USER}/ComfyUI ComfyUI-fork
+   fi
+   
+   cd ComfyUI-fork
+   git checkout master
+   git pull origin master
+   
+   # Create update branch
+   BRANCH_NAME="update-frontend-${NEW_VERSION}"
+   git checkout -b ${BRANCH_NAME}
+   ```
+
+3. **Update requirements.txt:**
+   ```bash
+   # Update the version in requirements.txt
+   sed -i "s/comfyui-frontend-package==[0-9].*$/comfyui-frontend-package==${NEW_VERSION}/" requirements.txt
+   
+   # Verify the change
+   grep "comfyui-frontend-package" requirements.txt
+   
+   # Commit the change
+   git add requirements.txt
+   git commit -m "Bump frontend to ${NEW_VERSION}"
+   git push origin ${BRANCH_NAME}
+   ```
+
+4. **Create PR from fork:**
+   ```bash
+   # Create PR using gh CLI from fork
+   gh pr create \
+     --repo comfyanonymous/ComfyUI \
+     --title "Bump frontend to ${NEW_VERSION}" \
+     --body "$(cat <<EOF
+Bump frontend to ${NEW_VERSION}
+
+\`\`\`
+python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
+\`\`\`
+
+- Diff: [Comfy-Org/ComfyUI_frontend: v${OLD_VERSION}...v${NEW_VERSION}](https://github.com/Comfy-Org/ComfyUI_frontend/compare/v${OLD_VERSION}...v${NEW_VERSION})
+- PyPI Package: https://pypi.org/project/comfyui-frontend-package/${NEW_VERSION}/
+- npm Types: https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types/v/${NEW_VERSION}
+
+## Changes
+
+- Fix: [Brief description of hotfixes included]
+EOF
+)"
+   ```
+
+5. **Clean up:**
+   ```bash
+   # Return to original directory
+   cd ..
+   
+   # Keep fork directory for future updates
+   echo "Fork directory 'ComfyUI-fork' kept for future use"
+   ```
+
+6. **CONFIRMATION REQUIRED**: ComfyUI requirements.txt PR created from fork?
+
+### Step 15: Post-Release Verification
 
 1. Verify GitHub release:
    ```bash
@@ -213,12 +363,14 @@ For each commit:
    ```bash
    pnpm view @comfyorg/comfyui-frontend-types@1.23.5
    ```
-4. Generate release summary with:
+4. Monitor ComfyUI requirements.txt PR for approval/merge
+5. Generate release summary with:
    - Version released
    - Commits included
    - Issues fixed
    - Distribution status
-5. **CONFIRMATION REQUIRED**: Release completed successfully?
+   - ComfyUI integration status
+6. **CONFIRMATION REQUIRED**: Hotfix release fully completed?
 
 ## Safety Checks
 
@@ -240,19 +392,28 @@ If something goes wrong:
 
 ## Important Notes
 
+- **Always try automated backports first** - This command is for when automation fails
 - Core branch version will be behind main - this is expected
 - The "Release" label triggers the PyPI/npm publication
+- **CRITICAL**: Always uncheck "Set as latest release" for hotfix releases
+- **Must create ComfyUI requirements.txt PR** - Hotfix isn't complete without it
 - PR numbers must include the `#` prefix
 - Mixed commits/PRs are supported but review carefully
 - Always wait for full test suite before proceeding
 
-## Expected Timeline
+## Modern Workflow Context
 
-- Step 1-3: ~10 minutes (analysis)
-- Steps 4-6: ~15-30 minutes (cherry-picking)
-- Step 7: ~10-20 minutes (tests)
-- Steps 8-10: ~10 minutes (version bump)
-- Step 11-12: ~15-20 minutes (release)
-- Total: ~60-90 minutes
+**Primary Backport Method:** Automated via `needs-backport` + `X.YY` labels
+**This Command Usage:** 
+- Smart path detection - skip to version bump if backports already merged
+- Fallback to manual cherry-picking only when automation fails/has conflicts
+**Complete Hotfix:** Includes GitHub release publishing + ComfyUI requirements.txt integration
 
-This process ensures a safe, verified hotfix release with multiple confirmation points and clear tracking of what changes are being released.
\ No newline at end of file
+## Workflow Paths
+
+- **Path A:** Backports already merged → Skip to Step 10 (Version Bump)
+- **Path B:** Backport PRs need merging → Merge them → Skip to Step 10 (Version Bump)  
+- **Path C:** No/failed backports → Manual cherry-picking (Steps 2-9) → Version Bump (Step 10)
+
+
+This process ensures a complete hotfix release with proper GitHub publishing, ComfyUI integration, and multiple safety checkpoints.
\ No newline at end of file
diff --git a/.env_example b/.env_example
index 520521fe0..a6987ae26 100644
--- a/.env_example
+++ b/.env_example
@@ -33,3 +33,4 @@ DISABLE_VUE_PLUGINS=false
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
+
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index fa318da4f..8decf07cd 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -4,3 +4,6 @@
 
 # npm run format on litegraph merge (10,672 insertions, 7,327 deletions across 129 files)
 c53f197de2a3e0fa66b16dedc65c131235c1c4b6
+
+# Reorganize renderer components into domain-driven folder structure
+c8a83a9caede7bdb5f8598c5492b07d08c339d49
diff --git a/.github/workflows/backport.yaml b/.github/workflows/backport.yaml
index f9106caee..3f4b93242 100644
--- a/.github/workflows/backport.yaml
+++ b/.github/workflows/backport.yaml
@@ -2,7 +2,7 @@ name: Auto Backport
 
 on:
   pull_request_target:
-    types: [closed]
+    types: [closed, labeled]
     branches: [main]
 
 jobs:
@@ -25,7 +25,27 @@ jobs:
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
+      - name: Check if backports already exist
+        id: check-existing
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          # Check for existing backport PRs for this PR number
+          EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
+          
+          if [ -z "$EXISTING_BACKPORTS" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+          
+          echo "Found existing backport PRs:"
+          echo "$EXISTING_BACKPORTS"
+          echo "skip=true" >> $GITHUB_OUTPUT
+          echo "::warning::Backport PRs already exist for PR #${PR_NUMBER}, skipping to avoid duplicates"
+
       - name: Extract version labels
+        if: steps.check-existing.outputs.skip != 'true'
         id: versions
         run: |
           # Extract version labels (e.g., "1.24", "1.22")
@@ -52,6 +72,7 @@ jobs:
           echo "Found version labels: ${VERSIONS}"
 
       - name: Backport commits
+        if: steps.check-existing.outputs.skip != 'true'
         id: backport
         env:
           PR_NUMBER: ${{ github.event.pull_request.number }}
@@ -109,7 +130,7 @@ jobs:
           fi
 
       - name: Create PR for each successful backport
-        if: steps.backport.outputs.success
+        if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
         run: |
@@ -141,7 +162,7 @@ jobs:
           done
 
       - name: Comment on failures
-        if: failure() && steps.backport.outputs.failed
+        if: steps.check-existing.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
diff --git a/.github/workflows/claude-pr-review.yml b/.github/workflows/claude-pr-review.yml
index 3ec61cb3c..d1eecafe3 100644
--- a/.github/workflows/claude-pr-review.yml
+++ b/.github/workflows/claude-pr-review.yml
@@ -47,6 +47,7 @@ jobs:
     needs: wait-for-ci
     if: needs.wait-for-ci.outputs.should-proceed == 'true'
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -69,19 +70,17 @@ jobs:
           pnpm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
-        uses: anthropics/claude-code-action@main
+        uses: anthropics/claude-code-action@v1.0.6
         with:
           label_trigger: "claude-review"
-          direct_prompt: |
+          prompt: |
             Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
             
             CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
             DO NOT create a summary comment. 
             Each issue must be posted as a separate inline comment on the specific line of code.
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-          max_turns: 256
-          timeout_minutes: 30
-          allowed_tools: "Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch"
+          claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
         env:
           PR_NUMBER: ${{ github.event.pull_request.number }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/create-release-candidate-branch.yaml b/.github/workflows/create-release-candidate-branch.yaml
index 84b545478..e3fcd9e2b 100644
--- a/.github/workflows/create-release-candidate-branch.yaml
+++ b/.github/workflows/create-release-candidate-branch.yaml
@@ -128,45 +128,6 @@ jobs:
           echo "- Critical security patches"
           echo "- Documentation updates"
 
-      - name: Create branch protection rules
-        if: steps.check_version.outputs.is_minor_bump == 'true' && env.branch_exists != 'true'
-        env:
-          GITHUB_TOKEN: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
-        run: |
-          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
-
-          # Create branch protection using GitHub API
-          echo "Setting up branch protection for $BRANCH_NAME..."
-
-          RESPONSE=$(curl -s -w "\n%{http_code}" -X PUT \
-            -H "Authorization: token $GITHUB_TOKEN" \
-            -H "Accept: application/vnd.github.v3+json" \
-            "https://api.github.com/repos/${{ github.repository }}/branches/$BRANCH_NAME/protection" \
-            -d '{
-              "required_status_checks": {
-                "strict": true,
-                "contexts": ["lint-and-format", "test", "playwright-tests"]
-              },
-              "enforce_admins": false,
-              "required_pull_request_reviews": {
-                "required_approving_review_count": 1,
-                "dismiss_stale_reviews": true
-              },
-              "restrictions": null,
-              "allow_force_pushes": false,
-              "allow_deletions": false
-            }')
-
-          HTTP_CODE=$(echo "$RESPONSE" | tail -n 1)
-          BODY=$(echo "$RESPONSE" | sed '$d')
-
-          if [[ "$HTTP_CODE" -eq 200 ]] || [[ "$HTTP_CODE" -eq 201 ]]; then
-            echo "✅ Branch protection successfully applied"
-          else
-            echo "⚠️  Failed to apply branch protection (HTTP $HTTP_CODE)"
-            echo "Response: $BODY"
-            # Don't fail the workflow, just warn
-          fi
 
       - name: Post summary
         if: steps.check_version.outputs.is_minor_bump == 'true'
diff --git a/.github/workflows/pr-playwright-deploy.yaml b/.github/workflows/pr-playwright-deploy.yaml
index 12051fa99..19bb28253 100644
--- a/.github/workflows/pr-playwright-deploy.yaml
+++ b/.github/workflows/pr-playwright-deploy.yaml
@@ -1,4 +1,4 @@
-name: PR Playwright Deploy and Comment
+name: PR Playwright Deploy (Forks)
 
 on:
   workflow_run:
@@ -9,272 +9,84 @@ env:
   DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
 
 jobs:
-  deploy-reports:
+  deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'completed'
+    if: |
+      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 &&
+      github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name
     permissions:
+      pull-requests: write
       actions: read
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
-      - name: Get PR info
-        id: pr-info
+      - name: Log workflow trigger info
+        run: |
+          echo "Repository: ${{ github.repository }}"
+          echo "Event: ${{ github.event.workflow_run.event }}"
+          echo "Head repo: ${{ github.event.workflow_run.head_repository.full_name || 'null' }}"
+          echo "Base repo: ${{ github.event.workflow_run.repository.full_name || 'null' }}"
+          echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Get PR Number
+        id: pr
         uses: actions/github-script@v7
         with:
           script: |
-            const { data: pullRequests } = await github.rest.pulls.list({
+            const { data: prs } = await github.rest.pulls.list({
               owner: context.repo.owner,
               repo: context.repo.repo,
               state: 'open',
-              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
             });
             
-            if (pullRequests.length === 0) {
-              console.log('No open PR found for this branch');
-              return { number: null, sanitized_branch: null };
+            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;
             }
             
-            const pr = pullRequests[0];
-            const branchName = context.payload.workflow_run.head_branch;
-            const sanitizedBranch = branchName.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-').replace(/^-|-$/g, '');
-            
-            return {
-              number: pr.number,
-              sanitized_branch: sanitizedBranch
-            };
+            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
+            return pr.number;
 
-      - name: Set project name
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        id: project-name
+      - name: Handle Test Start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
         run: |
-          if [ "${{ matrix.browser }}" = "chromium-0.5x" ]; then
-            echo "name=comfyui-playwright-chromium-0-5x" >> $GITHUB_OUTPUT
-          else
-            echo "name=comfyui-playwright-${{ matrix.browser }}" >> $GITHUB_OUTPUT
-          fi
-          echo "branch=${{ fromJSON(steps.pr-info.outputs.result).sanitized_branch }}" >> $GITHUB_OUTPUT
+          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 }}" \
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
-      - name: Download playwright report
-        if: fromJSON(steps.pr-info.outputs.result).number != null
+      - name: Download and Deploy Reports
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
-          name: playwright-report-${{ matrix.browser }}
-          path: playwright-report
-
-      - name: Install Wrangler
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        run: npm install -g wrangler
-
-      - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        id: cloudflare-deploy
-        continue-on-error: true
-        run: |
-          # Retry logic for wrangler deploy (3 attempts)
-          RETRY_COUNT=0
-          MAX_RETRIES=3
-          SUCCESS=false
+          pattern: playwright-report-*
+          path: reports
           
-          while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
-            RETRY_COUNT=$((RETRY_COUNT + 1))
-            echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
-            
-            if npx wrangler pages deploy playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
-              SUCCESS=true
-              echo "Deployment successful on attempt $RETRY_COUNT"
-            else
-              echo "Deployment failed on attempt $RETRY_COUNT"
-              if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
-                echo "Retrying in 10 seconds..."
-                sleep 10
-              fi
-            fi
-          done
-          
-          if [ $SUCCESS = false ]; then
-            echo "All deployment attempts failed"
-            exit 1
-          fi
+      - name: Handle Test Completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-
-  comment-tests-starting:
-    runs-on: ubuntu-latest
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'requested'
-    permissions:
-      pull-requests: write
-      actions: read
-    steps:
-      - name: Get PR number
-        id: pr
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const { data: pullRequests } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
-            });
-
-            if (pullRequests.length === 0) {
-              console.log('No open PR found for this branch');
-              return null;
-            }
-
-            return pullRequests[0].number;
-
-      - name: Get completion time
-        id: completion-time
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Generate comment body for start
-        if: steps.pr.outputs.result != 'null'
-        id: comment-body-start
+          GITHUB_TOKEN: ${{ github.token }}
         run: |
-          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
-          echo "## 🎭 Playwright Test Results" >> comment.md
-          echo "" >> comment.md
-          echo "<img alt='comfy-loading-gif' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px' style='vertical-align: middle; margin-right: 4px;' /> **Tests are starting...** " >> comment.md
-          echo "" >> comment.md
-          echo "⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
-          echo "" >> comment.md
-          echo "### 🚀 Running Tests" >> comment.md
-          echo "- 🧪 **chromium**: Running tests..." >> comment.md
-          echo "- 🧪 **chromium-0.5x**: Running tests..." >> comment.md
-          echo "- 🧪 **chromium-2x**: Running tests..." >> comment.md
-          echo "- 🧪 **mobile-chrome**: Running tests..." >> comment.md
-          echo "" >> comment.md
-          echo "---" >> comment.md
-          echo "⏱️ Please wait while tests are running across all browsers..." >> comment.md
-
-      - name: Comment PR - Tests Started
-        if: steps.pr.outputs.result != 'null'
-        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
-        with:
-          issue-number: ${{ steps.pr.outputs.result }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body-path: comment.md
-
-  comment-tests-completed:
-    runs-on: ubuntu-latest
-    needs: deploy-reports
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'completed' && always()
-    permissions:
-      pull-requests: write
-      actions: read
-    steps:
-      - name: Get PR number
-        id: pr
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const { data: pullRequests } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
-            });
-
-            if (pullRequests.length === 0) {
-              console.log('No open PR found for this branch');
-              return null;
-            }
-
-            return pullRequests[0].number;
-
-      - name: Download all deployment info
-        if: steps.pr.outputs.result != 'null'
-        uses: actions/download-artifact@v4
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
-          pattern: deployment-info-*
-          merge-multiple: true
-          path: deployment-info
-
-      - name: Get completion time
-        id: completion-time
-        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
-
-      - name: Generate comment body for completion
-        if: steps.pr.outputs.result != 'null'
-        id: comment-body-completed
-        run: |
-          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
-          echo "## 🎭 Playwright Test Results" >> comment.md
-          echo "" >> comment.md
-
-          # Check if all tests passed
-          ALL_PASSED=true
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              browser=$(basename "$file" .txt)
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              if [ "$exit_code" != "0" ]; then
-                ALL_PASSED=false
-                break
-              fi
-            fi
-          done
-
-          if [ "$ALL_PASSED" = "true" ]; then
-            echo "✅ **All tests passed across all browsers!**" >> comment.md
-          else
-            echo "❌ **Some tests failed!**" >> comment.md
-          fi
-
-          echo "" >> comment.md
-          echo "⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
-          echo "" >> comment.md
-          echo "### 📊 Test Reports by Browser" >> comment.md
-
-          for file in deployment-info/*.txt; do
-            if [ -f "$file" ]; then
-              browser=$(basename "$file" .txt)
-              info=$(cat "$file")
-              exit_code=$(echo "$info" | cut -d'|' -f2)
-              url=$(echo "$info" | cut -d'|' -f3)
-              
-              # Validate URLs before using them in comments
-              sanitized_url=$(echo "$url" | grep -E '^https://[a-z0-9.-]+\.pages\.dev(/.*)?$' || echo "INVALID_URL")
-              if [ "$sanitized_url" = "INVALID_URL" ]; then
-                echo "Invalid deployment URL detected: $url"
-                url="#" # Use safe fallback
-              fi
-              
-              if [ "$exit_code" = "0" ]; then
-                status="✅"
-              else
-                status="❌"
-              fi
-              
-              echo "- $status **$browser**: [View Report]($url)" >> comment.md
-            fi
-          done
-
-          echo "" >> comment.md
-          echo "---" >> comment.md
-          if [ "$ALL_PASSED" = "true" ]; then
-            echo "🎉 Your tests are passing across all browsers!" >> comment.md
-          else
-            echo "⚠️ Please check the test reports for details on failures." >> comment.md
-          fi
-
-      - name: Comment PR - Tests Complete
-        if: steps.pr.outputs.result != 'null'
-        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
-        with:
-          issue-number: ${{ steps.pr.outputs.result }}
-          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
-          comment-author: 'github-actions[bot]'
-          edit-mode: replace
-          body-path: comment.md
\ No newline at end of file
+          # 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"
\ No newline at end of file
diff --git a/.github/workflows/test-ui.yaml b/.github/workflows/test-ui.yaml
index 451c4b903..f8f6cf955 100644
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/test-ui.yaml
@@ -284,3 +284,65 @@ jobs:
           name: playwright-report-chromium
           path: ComfyUI_frontend/playwright-report/
           retention-days: 30
+
+  #### BEGIN Deployment and commenting (non-forked PRs only)
+  # when using pull_request event, we have permission to comment directly
+  # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
+
+  # Post starting comment for non-forked PRs
+  comment-on-pr-start:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+        
+      - name: Post starting comment
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
+          
+  # Deploy and comment for non-forked PRs only
+  deploy-and-comment:
+    needs: [playwright-tests, merge-reports]
+    runs-on: ubuntu-latest
+    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Download all playwright reports
+        uses: actions/download-artifact@v4
+        with:
+          pattern: playwright-report-*
+          path: reports
+          
+      - name: Make deployment script executable
+        run: chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
+        
+      - name: Deploy reports and comment on PR
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
+            "${{ github.event.pull_request.number }}" \
+            "${{ github.head_ref }}" \
+            "completed"
+  #### END Deployment and commenting (non-forked PRs only)
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index db0b8454c..100bcd13e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,6 +51,7 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
+browser-tests/local/
 
 .env
 
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 6b8a399e4..578271509 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 
-npx lint-staged
-npx tsx scripts/check-unused-i18n-keys.ts
\ No newline at end of file
+pnpm exec lint-staged
+pnpm exec tsx scripts/check-unused-i18n-keys.ts
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 000000000..ec1fc17d0
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+# Run Knip with cache via package script
+pnpm knip
+
diff --git a/.mcp.json b/.mcp.json
deleted file mode 100644
index 82e215be0..000000000
--- a/.mcp.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "mcpServers": {
-    "playwright": {
-      "command": "npx",
-      "args": ["-y", "@executeautomation/playwright-mcp-server"]
-    },
-    "context7": {
-      "command": "npx",
-      "args": ["-y", "@upstash/context7-mcp"]
-    }
-  }
-}
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index 2ac2ab06e..68be11a12 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -127,3 +127,6 @@ const value = api.getServerFeature('config_name', defaultValue)  // Get config
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
+- NEVER use `dark:` prefix - always use `dark-theme:` for dark mode styles, for example: `dark-theme:text-white dark-theme:bg-black`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('bg-red-500', { 'bg-blue-500': condition })" />`
+
diff --git a/browser_tests/fixtures/ComfyMouse.ts b/browser_tests/fixtures/ComfyMouse.ts
index 306f4352b..dfb0281eb 100644
--- a/browser_tests/fixtures/ComfyMouse.ts
+++ b/browser_tests/fixtures/ComfyMouse.ts
@@ -10,7 +10,7 @@ import type { Position } from './types'
  * - {@link Mouse.move}
  * - {@link Mouse.up}
  */
-export interface DragOptions {
+interface DragOptions {
   button?: 'left' | 'right' | 'middle'
   clickCount?: number
   steps?: number
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index f64ca5c94..c32dd3937 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -453,6 +453,32 @@ export class ComfyPage {
     await workflowsTab.close()
   }
 
+  /**
+   * Attach a screenshot to the test report.
+   * By default, screenshots are only taken in non-CI environments.
+   * @param name - Name for the screenshot attachment
+   * @param options - Optional configuration
+   * @param options.runInCI - Whether to take screenshot in CI (default: false)
+   * @param options.fullPage - Whether to capture full page (default: false)
+   */
+  async attachScreenshot(
+    name: string,
+    options: { runInCI?: boolean; fullPage?: boolean } = {}
+  ) {
+    const { runInCI = false, fullPage = false } = options
+
+    // Skip in CI unless explicitly requested
+    if (process.env.CI && !runInCI) {
+      return
+    }
+
+    const testInfo = comfyPageFixture.info()
+    await testInfo.attach(name, {
+      body: await this.page.screenshot({ fullPage }),
+      contentType: 'image/png'
+    })
+  }
+
   async resetView() {
     if (await this.resetViewButton.isVisible()) {
       await this.resetViewButton.click()
diff --git a/browser_tests/fixtures/components/Topbar.ts b/browser_tests/fixtures/components/Topbar.ts
index f2c9dfa16..04a9117ce 100644
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -1,7 +1,13 @@
-import { Locator, Page } from '@playwright/test'
+import { Locator, Page, expect } from '@playwright/test'
 
 export class Topbar {
-  constructor(public readonly page: Page) {}
+  private readonly menuLocator: Locator
+  private readonly menuTrigger: Locator
+
+  constructor(public readonly page: Page) {
+    this.menuLocator = page.locator('.comfy-command-menu')
+    this.menuTrigger = page.locator('.comfyui-logo-wrapper')
+  }
 
   async getTabNames(): Promise<string[]> {
     return await this.page
@@ -15,10 +21,33 @@ export class Topbar {
       .innerText()
   }
 
-  getMenuItem(itemLabel: string): Locator {
+  /**
+   * Get a menu item by its label, optionally within a specific parent container
+   */
+  getMenuItem(itemLabel: string, parent?: Locator): Locator {
+    if (parent) {
+      return parent.locator(`.p-tieredmenu-item:has-text("${itemLabel}")`)
+    }
+
     return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
   }
 
+  /**
+   * Get the visible submenu (last visible submenu in case of nested menus)
+   */
+  getVisibleSubmenu(): Locator {
+    return this.page.locator('.p-tieredmenu-submenu:visible').last()
+  }
+
+  /**
+   * Check if a menu item has an active checkmark
+   */
+  async isMenuItemActive(menuItem: Locator): Promise<boolean> {
+    const checkmark = menuItem.locator('.pi-check')
+    const classes = await checkmark.getAttribute('class')
+    return classes ? !classes.includes('invisible') : false
+  }
+
   getWorkflowTab(tabName: string): Locator {
     return this.page
       .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
@@ -66,10 +95,50 @@ export class Topbar {
 
   async openTopbarMenu() {
     await this.page.waitForTimeout(1000)
-    await this.page.locator('.comfyui-logo-wrapper').click()
-    const menu = this.page.locator('.comfy-command-menu')
-    await menu.waitFor({ state: 'visible' })
-    return menu
+    await this.menuTrigger.click()
+    await this.menuLocator.waitFor({ state: 'visible' })
+    return this.menuLocator
+  }
+
+  /**
+   * Close the topbar menu by clicking outside
+   */
+  async closeTopbarMenu() {
+    await this.page.locator('body').click({ position: { x: 10, y: 10 } })
+    await expect(this.menuLocator).not.toBeVisible()
+  }
+
+  /**
+   * Navigate to a submenu by hovering over a menu item
+   */
+  async openSubmenu(menuItemLabel: string): Promise<Locator> {
+    const menuItem = this.getMenuItem(menuItemLabel)
+    await menuItem.hover()
+    const submenu = this.getVisibleSubmenu()
+    await submenu.waitFor({ state: 'visible' })
+    return submenu
+  }
+
+  /**
+   * Get theme menu items and interact with theme switching
+   */
+  async getThemeMenuItems() {
+    const themeSubmenu = await this.openSubmenu('Theme')
+    return {
+      submenu: themeSubmenu,
+      darkTheme: this.getMenuItem('Dark (Default)', themeSubmenu),
+      lightTheme: this.getMenuItem('Light', themeSubmenu)
+    }
+  }
+
+  /**
+   * Switch to a specific theme
+   */
+  async switchTheme(theme: 'dark' | 'light') {
+    const { darkTheme, lightTheme } = await this.getThemeMenuItems()
+    const themeItem = theme === 'dark' ? darkTheme : lightTheme
+    const themeLabel = themeItem.locator('.p-menubar-item-label')
+    await themeLabel.click()
   }
 
   async triggerTopbarCommand(path: string[]) {
@@ -79,9 +148,7 @@ export class Topbar {
 
     const menu = await this.openTopbarMenu()
     const tabName = path[0]
-    const topLevelMenuItem = this.page.locator(
-      `.p-menubar-item-label:text-is("${tabName}")`
-    )
+    const topLevelMenuItem = this.getMenuItem(tabName)
     const topLevelMenu = menu
       .locator('.p-tieredmenu-item')
       .filter({ has: topLevelMenuItem })
diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index 8a52d8b66..c9bf88a91 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -134,7 +134,7 @@ export class SubgraphSlotReference {
   }
 }
 
-export class NodeSlotReference {
+class NodeSlotReference {
   constructor(
     readonly type: 'input' | 'output',
     readonly index: number,
@@ -201,7 +201,7 @@ export class NodeSlotReference {
   }
 }
 
-export class NodeWidgetReference {
+class NodeWidgetReference {
   constructor(
     readonly index: number,
     readonly node: NodeReference
diff --git a/browser_tests/fixtures/utils/vueNodeFixtures.ts b/browser_tests/fixtures/utils/vueNodeFixtures.ts
new file mode 100644
index 000000000..5c4541b92
--- /dev/null
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -0,0 +1,131 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
+export class VueNodeFixture {
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
+
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  }
+
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
+  }
+
+  /**
+   * Get the current title text
+   */
+  async getTitle(): Promise<string> {
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
+  }
+
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
+    await input.press('Enter')
+  }
+
+  /**
+   * Cancel title editing
+   */
+  async cancelTitleEdit(): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.press('Escape')
+  }
+
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
+  async toggleCollapse(): Promise<void> {
+    const button = await this.getCollapseButton()
+    await button.click()
+  }
+
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
+  async getCollapseIconClass(): Promise<string> {
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
+  }
+
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
+  }
+}
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png
index 1ba61954e..423859696 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-light-red-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png
index 70c81dfbb..7751d090e 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png
index 47083ae5c..22e014cff 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/custom-color-palette-obsidian-dark-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png
index 722020a96..4a5c11c2b 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/default-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png
index 1ba61954e..423859696 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-lightened-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png
index ee50ed0c5..95ef93d47 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-2-arc-theme-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png
index 3d490143e..ec52820b1 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-changed-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png
index f5eeaa61b..3702c5e46 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-3-color-removed-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png
index 6b0e3a30a..ba4591403 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-0-5-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png
index 722020a96..4a5c11c2b 100644
Binary files a/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png and b/browser_tests/tests/colorPalette.spec.ts-snapshots/node-opacity-1-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png
index 6f5edfd8f..acd3b340e 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png
index 9a695eed8..bb6defb05 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-node-with-link-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png
index 1c1a63047..1927ba4ae 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/copied-widget-value-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png
index 164773278..1cd84c832 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/drag-copy-copied-node-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png
index be7214acf..b7bead810 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png differ
diff --git a/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png b/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png
index fdc151be1..241a48448 100644
Binary files a/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png and b/browser_tests/tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png differ
diff --git a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
index 3acc073ff..4d4bd7c57 100644
Binary files a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png and b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png differ
diff --git a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
index 8b8287a40..109c5436a 100644
Binary files a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png and b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
index f5ca69e54..b0c849b88 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
index af9081d0a..cbf2b4f08 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png
index e2e2f2206..ed5712f00 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png
index 27c987620..8a387cb47 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/batch-disconnect-links-disconnected-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png
index 5732eea2b..e1c4fe01a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png
index 3ebdeb306..98027277e 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/batch-move-links-moved-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png
index ba16c1a37..36be4e4fc 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/default-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png
index fd4b5a115..fa37a19a8 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/deleted-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png
index c07494c21..a73a56622 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/disconnected-edge-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
index a3d7a8443..86c45da4d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png
index b8e5cdab9..ce0c454eb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link1-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png
index e425d88e8..7fe839d52 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/dragging-link2-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png
index 99bd797a8..351b73b99 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png
index 3e8474a2b..046886851 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/group-selected-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png
index 082281496..b36ec42fd 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png
index 750d15c1b..6eb2b1ac1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-alt-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png
index d0bd046ad..e2e04c7e7 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-click-node-select-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png
index 750d15c1b..6eb2b1ac1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-left-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png
index 750d15c1b..6eb2b1ac1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-middle-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png
index c457dea5c..2d944759e 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/legacy-wheel-zoom-out-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png
index 7a631a02f..391228994 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/moved-link-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png
index 8255f0f5a..117d4bb8a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/node-title-edited-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png
index 7181cdcfc..099a0b05b 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-bypassed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png
index f6b135cb6..23f5e9c7e 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-pinned-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png
index a6d09ff18..349014360 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unbypassed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png
index a6d09ff18..349014360 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/nodes-unpinned-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png
index 7445cc3f9..892b43b72 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-from-far-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-one-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png
index 5b2380510..1648d9e8f 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-back-to-two-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png
index 02d3823e4..788a96295 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png
index fd4b5a115..fa37a19a8 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-far-away-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png
index 5b2380510..1648d9e8f 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-one-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png
index 7445cc3f9..892b43b72 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-step-two-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png
index 89cdd22d2..d0798275d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panned-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png
index 6d06644e3..e2984d5c3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/panning-when-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png
index 51f5fc50e..1b221cac9 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/pinned-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png
index a8fed2ac0..0ba6e8df2 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png
index 6811cb646..d23f7108a 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png
index 6ce3ce119..1f5fd61ed 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-opened-text-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png
index a149cb8ef..336d7526d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png
index f57ca3be8..a9f182581 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png
index d0bd046ad..e2e04c7e7 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png
index 9e998d26f..8590a08d8 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png
index f76d1945d..9c5c9677b 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png
index 797b10f6f..869a1c4b6 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png
index 797b10f6f..869a1c4b6 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png
index 1dfcfa4fe..764f05410 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-modified-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png
index dc1258e21..71dcfaed8 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png
index 2a80227ab..6640f4f38 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png
index 37866d892..7f0f6f24f 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png
index d0bd046ad..e2e04c7e7 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-click-node-select-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png
index c457dea5c..2d944759e 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-ctrl-wheel-zoom-out-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png
index a9d0efb74..2f5526019 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-initial-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png
index a6d09ff18..349014360 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-left-drag-select-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png
index 750d15c1b..6eb2b1ac1 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-middle-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png
index 57b6438ae..1c8538715 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png
index a9d0efb74..2f5526019 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png
index 57b6438ae..1c8538715 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png
index 3db5f8a8c..a6baaa6ad 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-space-drag-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png
index 2c3343f6b..51725b7e7 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/string-input-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png
index 7b7b8f84a..a727dce70 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png
index 67a37ae57..56e147eba 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png
index dfd279b57..3744ac657 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-off-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png
index a149cb8ef..336d7526d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/unpinned-all-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-back-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png
index 3d891b985..96ed23cf5 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-default-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png
index 39ec12552..3ecf7ebb2 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index ef8c2d9b2..759d66b50 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png
index 4be78a0bd..6b3c9f349 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-high-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png
index a3f68aaf7..5b60237c3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-in-low-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png
index 2006231c7..c0112a796 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png
index 910bf98e6..aa411c13c 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png
index 27b3ff339..73cc47ffa 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png
index a135084e8..bc5a9c57c 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-low-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png
index e807682d3..a39ae0d7d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png
index eb4903bf8..15b1e0f14 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png
index 2e327dff0..c1a5b4340 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png
index 2ff59b391..082c4a0c6 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/large-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png
index 8f347b607..1464d93a2 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png
index 65446a6c7..37ccbb323 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png
index 65446a6c7..37ccbb323 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png
index 65446a6c7..37ccbb323 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png
index 2e327dff0..c1a5b4340 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-svg-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png
index 58e7be2ea..662eefd90 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png
index 2e327dff0..c1a5b4340 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png
index 0b2859d12..8d69066c2 100644
Binary files a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png and b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-high-quality-chromium-linux.png differ
diff --git a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png
index a6d8fe852..ea86cb4e1 100644
Binary files a/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png and b/browser_tests/tests/lodThreshold.spec.ts-snapshots/lod-comparison-low-quality-chromium-linux.png differ
diff --git a/browser_tests/tests/menu.spec.ts b/browser_tests/tests/menu.spec.ts
index 355acb590..fa46778a4 100644
--- a/browser_tests/tests/menu.spec.ts
+++ b/browser_tests/tests/menu.spec.ts
@@ -178,6 +178,72 @@ test.describe('Menu', () => {
       await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
       expect(await comfyPage.getVisibleToastCount()).toBe(1)
     })
+
+    test('Can navigate Theme menu and switch between Dark and Light themes', async ({
+      comfyPage
+    }) => {
+      const { topbar } = comfyPage.menu
+
+      // Take initial screenshot with default theme
+      await comfyPage.attachScreenshot('theme-initial')
+
+      // Open the topbar menu
+      const menu = await topbar.openTopbarMenu()
+      await expect(menu).toBeVisible()
+
+      // Get theme menu items
+      const {
+        submenu: themeSubmenu,
+        darkTheme: darkThemeItem,
+        lightTheme: lightThemeItem
+      } = await topbar.getThemeMenuItems()
+
+      await expect(darkThemeItem).toBeVisible()
+      await expect(lightThemeItem).toBeVisible()
+
+      // Switch to Light theme
+      await topbar.switchTheme('light')
+
+      // Verify menu stays open and Light theme shows as active
+      await expect(menu).toBeVisible()
+      await expect(themeSubmenu).toBeVisible()
+
+      // Check that Light theme is active
+      expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
+
+      // Screenshot with light theme active
+      await comfyPage.attachScreenshot('theme-menu-light-active')
+
+      // Verify ColorPalette setting is set to "light"
+      expect(await comfyPage.getSetting('Comfy.ColorPalette')).toBe('light')
+
+      // Close menu to see theme change
+      await topbar.closeTopbarMenu()
+
+      // Re-open menu and get theme items again
+      await topbar.openTopbarMenu()
+      const themeItems2 = await topbar.getThemeMenuItems()
+
+      // Switch back to Dark theme
+      await topbar.switchTheme('dark')
+
+      // Verify menu stays open and Dark theme shows as active
+      await expect(menu).toBeVisible()
+      await expect(themeItems2.submenu).toBeVisible()
+
+      // Check that Dark theme is active and Light theme is not
+      expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
+      expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(false)
+
+      // Screenshot with dark theme active
+      await comfyPage.attachScreenshot('theme-menu-dark-active')
+
+      // Verify ColorPalette setting is set to "dark"
+      expect(await comfyPage.getSetting('Comfy.ColorPalette')).toBe('dark')
+
+      // Close menu
+      await topbar.closeTopbarMenu()
+    })
   })
 
   // Only test 'Top' to reduce test time.
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png
index eaf2a528c..68985db05 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Hide-built-in-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png
index 8b8c993c3..eec02ef30 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-None-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png
index 97a24c6dc..ca68ad258 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-Show-all-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png
index 3e28c594a..57c5199b1 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png
index b81e9e785..7bde04b28 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-left-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png
index 7b5a380fc..d64c6c93b 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-light-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png
index 1c2e2e274..6d7c32276 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-multiple-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png
index 6975bdeae..942bbf724 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png
index 415531498..196990019 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/default-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png
index 5ae61ea03..aff3b2012 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/dynamically-added-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png
index f76546805..5d97d949b 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/force-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png
index 84ed95b0d..9d086a2e7 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/missing-nodes-converted-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png
index 10c5870f3..b58d1cd5b 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/optional-input-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png
index ecea34922..e5855068f 100644
Binary files a/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png and b/browser_tests/tests/nodeDisplay.spec.ts-snapshots/simple-slider-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png
index 1202e34d9..17e2e13e2 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png
index f4bd4d3f9..0ca779dc6 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png
index 0d57dcd25..ac61db5cd 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-batch-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png
index 127e5be05..aacd4d499 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/auto-linked-node-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png
index 127e5be05..aacd4d499 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-context-menu-search-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png
index ade1f674d..84ee3f655 100644
Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png b/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png
index 509067e9f..789f31c5a 100644
Binary files a/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png and b/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png
index d64126266..b09ed4e59 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png
index 40d877ff9..76c6e3bd2 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png
index ff50afcd4..d2c15dc6b 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/primitive-node-connected-dom-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png b/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png
index b8c243f0b..f6b317330 100644
Binary files a/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png and b/browser_tests/tests/primitiveNode.spec.ts-snapshots/static-primitive-connected-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png
index 75c7dd2b3..91ff758aa 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-0-5x-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png
index be8c019f3..ef29bdd8e 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png
index d7ee9ff26..7a2f59080 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png
index 30b9a3894..aac33499e 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png
index 8723985d2..694049cdd 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png
index c07494c21..a73a56622 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/native-reroute-delete-from-midpoint-context-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
index d14a6e132..38c957f06 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png
index d141d9912..8d2b7c63f 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-group-group-added-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png
index 9443182e3..a44032d6d 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png
index fbadb08da..ce3c5ac6b 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/node-pinned-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png
index a73ca4c33..520dfbb51 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png
index 238946afa..dc82953e1 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-bypassed-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
index 1635e4e89..2ae5c3ff2 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png
index 4c1ed8d69..5241f3517 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-badge-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png
index ea0156109..31ac480af 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png
index 4910f554a..b92e9b1aa 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png
index f381be240..26e017ff5 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
index 4440ef029..fc30c3368 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
index 1635e4e89..2ae5c3ff2 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png
index 700e9d2c5..59ea157f9 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-moved-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png
index a6d09ff18..349014360 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png
index c0b91f3ec..5e26ed857 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-pinned-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png
index a80e1ad38..a3c584b32 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/selected-nodes-unpinned-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts b/browser_tests/tests/selectionToolbox.spec.ts
index ce45eb3fb..a9a5fc9c2 100644
--- a/browser_tests/tests/selectionToolbox.spec.ts
+++ b/browser_tests/tests/selectionToolbox.spec.ts
@@ -149,7 +149,7 @@ test.describe('Selection Toolbox', () => {
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
       const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-      expect(selectedNode.getProperty('color')).not.toBeNull()
+      expect(await selectedNode.getProperty('color')).not.toBeNull()
     })
 
     test('color picker shows current color of selected nodes', async ({
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
index e638f12ce..0d9878344 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
index e638f12ce..7c454dd81 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
index 3cec1c675..8973c1ed3 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png
index 3cec1c675..c0112a796 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-selection-no-border-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png
index 5e105418c..719ec65e4 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png
index 4bafa8784..b880fca84 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-desktop-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-desktop-chromium-linux.png
index ff6a6c017..0c34b0607 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-desktop-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-desktop-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-mobile-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-mobile-chromium-linux.png
index fadb02348..54f14ea0d 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-mobile-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-mobile-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-tablet-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-tablet-chromium-linux.png
index 350b01a28..a5cf133cb 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-tablet-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-tablet-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
index cabfe9a20..6c330c2f4 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/NodeHeader.spec.ts b/browser_tests/tests/vueNodes/NodeHeader.spec.ts
new file mode 100644
index 000000000..7a8ae5dd2
--- /dev/null
+++ b/browser_tests/tests/vueNodes/NodeHeader.spec.ts
@@ -0,0 +1,134 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+
+test.describe('NodeHeader', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.EnableTooltips', true)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  test('displays node title', async ({ comfyPage }) => {
+    // Get the KSampler node from the default workflow
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('KSampler')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('KSampler')
+  })
+
+  test('allows title renaming', async ({ comfyPage }) => {
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('handles node collapsing', async ({ comfyPage }) => {
+    // Get the KSampler node from the default workflow
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Initially should not be collapsed
+    expect(await node.isCollapsed()).toBe(false)
+    const body = await vueNode.getBody()
+    await expect(body).toBeVisible()
+
+    // Collapse the node
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(true)
+
+    // Verify node content is hidden
+    const collapsedSize = await node.getSize()
+    await expect(body).not.toBeVisible()
+
+    // Expand again
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(false)
+    await expect(body).toBeVisible()
+
+    // Size should be restored
+    const expandedSize = await node.getSize()
+    expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
+  })
+
+  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Check initial expanded state icon
+    let iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+
+    // Collapse and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-right')
+
+    // Expand and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+  })
+
+  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Set custom title
+    await vueNode.setTitle('Test Sampler')
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Collapse
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Expand
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Verify title is still displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Test Sampler')
+  })
+})
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png
index 3f3d831bb..b2fe8bb40 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png
index 05764b532..2879c3d15 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png
index fb055e8c8..d882ba9fb 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/boolean-widget-toggled-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png
index 745e69148..4bd504117 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/empty-latent-resized-80-percent-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png
index 0b7cb495d..39bd0fd14 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png
index 0b7cb495d..39bd0fd14 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/image-preview-drag-and-dropped-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png
index 520576df1..2d95e6dd1 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-resized-min-width-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png
index 1b01d4972..52f20bbce 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/ksampler-widget-added-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png
index fde5a2de9..9fd907f38 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/load-audio-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png
index 538e0b460..5af9039e0 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/load-checkpoint-resized-min-width-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png
index b631cd32d..843ebacc7 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/load-image-widget-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png
index d5e10e061..566ab88e8 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/resized-to-original-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png
index b356214e8..ff3fdcbfb 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png
index 2c82d9c8d..6fe4d1e2b 100644
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png and b/browser_tests/tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png differ
diff --git a/docs/adr/0003-crdt-based-layout-system.md b/docs/adr/0003-crdt-based-layout-system.md
new file mode 100644
index 000000000..1eceb2a1f
--- /dev/null
+++ b/docs/adr/0003-crdt-based-layout-system.md
@@ -0,0 +1,156 @@
+# 3. Centralized Layout Management with CRDT
+
+Date: 2025-08-27
+
+## Status
+
+Proposed
+
+## Context
+
+ComfyUI's node graph editor currently suffers from fundamental architectural limitations around spatial data management that prevent us from achieving key product goals.
+
+### Current Architecture Problems
+
+The existing system allows each node to directly mutate its position within LiteGraph's canvas renderer. This creates several critical issues:
+
+1. **Performance Bottlenecks**: UI updates require full graph traversals to detect position changes. Large workflows (100+ nodes) can create bottlenecks during interactions due to this O(n) polling approach.
+
+2. **Position Conflicts**: Multiple systems (LiteGraph canvas, DOMwidgets.ts overlays) currently compete to control node positions. Future Vue widget overlays will compound this maintenance burden.
+
+3. **No Collaboration Foundation**: Direct position mutations make concurrent editing impossible—there's no mechanism to merge conflicting position updates from multiple users.
+
+4. **Renderer Lock-in**: Spatial data is tightly coupled to LiteGraph's canvas implementation, preventing alternative rendering approaches (WebGL, DOM, other libraries, hybrid approaches).
+
+5. **Inefficient Change Detection**: While LiteGraph provides some events, many operations require polling via changeTracker.ts. The current undo/redo system performs expensive diffs on every interaction rather than using reactive push/pull signals, creating performance bottlenecks and blocking efficient animations and viewport culling.
+
+   This represents a fundamental architectural limitation: diff-based systems scale O(n) with graph complexity (traverse entire structure to detect changes), while signal-based reactive systems scale O(1) with actual changes (data mutations automatically notify subscribers). Modern frameworks (Vue 3, Angular signals, SolidJS) have moved to reactive approaches for precisely this performance reason. 
+
+### Business Context
+
+- Performance issues emerge with workflow complexity (100+ nodes)
+- The AI workflow community increasingly expects collaborative features (similar to Figma, Miro)
+- Accessibility requirements will necessitate DOM-based rendering options
+- Technical debt compounds with each new spatial feature
+
+This decision builds on [ADR-0001 (Merge LiteGraph)](0001-merge-litegraph-into-frontend.md), which enables the architectural restructuring proposed here.
+
+## Decision
+
+We will implement a centralized layout management system using CRDT (Conflict-free Replicated Data Types) with command pattern architecture to separate spatial data from rendering behavior.
+
+### Centralized State Management Foundation
+
+This solution applies proven centralized state management patterns:
+
+- **Centralized Store**: All spatial data (position, size, bounds, transform) managed in a single CRDT-backed store
+- **Command Interface**: All mutations flow through explicit commands rather than direct property access
+- **Observer Pattern**: Independent systems (rendering, interaction, layout) subscribe to state changes
+- **Domain Separation**: Layout logic completely separated from rendering and UI concerns
+
+This provides single source of truth, predictable state updates, and natural system decoupling—solving our core architectural problems.
+
+### Core Architecture
+
+1. **Centralized Layout Store**: A Yjs CRDT maintains all spatial data in a single authoritative store:
+   ```typescript
+   // Instead of: node.position = {x, y}
+   layoutStore.moveNode(nodeId, {x, y})
+   ```
+
+2. **Command Pattern**: All spatial mutations flow through explicit commands:
+   ```
+   User Input → Commands → Layout Store → Observer Notifications → Renderers
+   ```
+
+3. **Observer-Based Systems**: Multiple independent systems subscribe to layout changes:
+   - **Rendering Systems**: LiteGraph canvas, WebGL, DOM accessibility renderers
+   - **Interaction Systems**: Drag handlers, selection, hover states
+   - **Layout Systems**: Auto-layout, alignment, distribution
+   - **Animation Systems**: Smooth transitions, physics simulations
+
+4. **Reactive Updates**: Store changes propagate through observers, eliminating polling and enabling efficient system coordination.
+
+### Implementation Strategy
+
+**Phase 1: Parallel System**
+- Build CRDT layout store alongside existing system
+- Layout store initially mirrors LiteGraph changes via observers
+- Gradually migrate user interactions to use command interface
+- Maintain full backward compatibility
+
+**Phase 2: Inversion of Control**
+- CRDT store becomes single source of truth
+- LiteGraph receives position updates via reactive subscriptions
+- Enable alternative renderers and advanced features
+
+### Why Centralized State + CRDT?
+
+This combination provides both architectural and technical benefits:
+
+**Centralized State Benefits:**
+- **Single Source of Truth**: All layout data managed in one place, eliminating conflicts
+- **System Decoupling**: Rendering, interaction, and layout systems operate independently
+- **Predictable Updates**: Clear data flow makes debugging and testing easier
+- **Extensibility**: Easy to add new layout behaviors without modifying existing systems
+
+**CRDT Benefits:**
+- **Conflict Resolution**: Automatic merging eliminates position conflicts between systems
+- **Collaboration-Ready**: Built-in support for multi-user editing
+- **Eventual Consistency**: Guaranteed convergence to same state across all clients
+
+**Yjs-Specific Benefits:**
+- **Event-Driven**: Native observer pattern removes need for polling
+- **Selective Updates**: Only changed nodes trigger system updates
+- **Fine-Grained Changes**: Efficient delta synchronization
+
+## Consequences
+
+### Positive
+
+- **Eliminates Polling**: Observer pattern removes O(n) graph traversals, improving performance
+- **System Modularity**: Independent systems can be developed, tested, and optimized separately  
+- **Renderer Flexibility**: Easy to add WebGL, DOM accessibility, or hybrid rendering systems
+- **Rich Interactions**: Command pattern enables robust undo/redo, macros, and interaction history
+- **Collaboration-Ready**: CRDT foundation enables real-time multi-user editing
+- **Conflict Resolution**: Eliminates position "snap-back" behavior between competing systems
+- **Better Developer Experience**: Clear separation of concerns and predictable data flow patterns
+
+### Negative
+
+- **Learning Curve**: Team must understand CRDT concepts and centralized state management
+- **Migration Complexity**: Gradual migration of existing direct property access requires careful coordination
+- **Memory Overhead**: Yjs library (~30KB) plus operation history storage
+- **CRDT Performance**: CRDTs have computational overhead compared to direct property access
+- **Increased Abstraction**: Additional layer between user interactions and visual updates
+
+### Risk Mitigations
+
+- Provide comprehensive migration documentation and examples
+- Build compatibility layer for gradual, low-risk migration
+- Implement operation history pruning for long-running sessions
+- Phase implementation to validate approach before full migration
+
+## Notes
+
+This centralized state + CRDT architecture follows patterns from modern collaborative applications:
+
+**Centralized State Management**: Similar to Redux/Vuex patterns in complex web applications, but with CRDT backing for collaboration. This provides predictable state updates while enabling real-time multi-user features.
+
+**CRDT in Collaboration**: Tools like Figma, Linear, and Notion use similar approaches for real-time collaboration, demonstrating the effectiveness of separating authoritative data from presentation logic.
+
+**Future Capabilities**: This foundation enables advanced features that would be difficult with the current architecture:
+- Macro recording and workflow automation
+- Programmatic layout optimization and constraints
+- API-driven workflow construction  
+- Multiple simultaneous renderers (canvas + accessibility DOM)
+- Real-time collaborative editing
+- Advanced spatial features (physics, animations, auto-layout)
+
+The architecture provides immediate single-user benefits while creating infrastructure for collaborative and advanced spatial features.
+
+## References
+
+- [Yjs Documentation](https://docs.yjs.dev/)
+- [CRDTs: The Hard Parts](https://martin.kleppmann.com/2020/07/06/crdt-hard-parts-hydra.html) by Martin Kleppmann
+- [Figma's Multiplayer Technology](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)
diff --git a/docs/adr/README.md b/docs/adr/README.md
index 3ebf340d5..00e50a639 100644
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -11,7 +11,8 @@ An Architecture Decision Record captures an important architectural decision mad
 | ADR | Title | Status | Date |
 |-----|-------|--------|------|
 | [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
-| [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Proposed | 2025-08-25 |
+| [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
+| [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
 
 ## Creating a New ADR
 
@@ -77,4 +78,4 @@ Optional section for additional information, references, or clarifications.
 ## Further Reading
 
 - [Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) by Michael Nygard
-- [Architecture Decision Records](https://adr.github.io/) - Collection of ADR resources
\ No newline at end of file
+- [Architecture Decision Records](https://adr.github.io/) - Collection of ADR resources
diff --git a/eslint.config.js b/eslint.config.js
index 59c5f46df..7e3248b20 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -62,6 +62,41 @@ export default [
       '@typescript-eslint/prefer-as-const': 'off',
       'unused-imports/no-unused-imports': 'error',
       'vue/no-v-html': 'off',
+      // Enforce dark-theme: instead of dark: prefix
+      'vue/no-restricted-class': ['error', '/^dark:/'],
+      // Restrict deprecated PrimeVue components
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'primevue/calendar',
+              message:
+                'Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from "primevue/datepicker"'
+            },
+            {
+              name: 'primevue/dropdown',
+              message:
+                'Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from "primevue/select"'
+            },
+            {
+              name: 'primevue/inputswitch',
+              message:
+                'InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from "primevue/toggleswitch"'
+            },
+            {
+              name: 'primevue/overlaypanel',
+              message:
+                'OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from "primevue/popover"'
+            },
+            {
+              name: 'primevue/sidebar',
+              message:
+                'Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from "primevue/drawer"'
+            }
+          ]
+        }
+      ],
       // i18n rules
       '@intlify/vue-i18n/no-raw-text': [
         'error',
diff --git a/knip.config.ts b/knip.config.ts
index 556ec5bc4..64e836f08 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -2,30 +2,22 @@ import type { KnipConfig } from 'knip'
 
 const config: KnipConfig = {
   entry: [
-    'build/**/*.ts',
-    'scripts/**/*.{js,ts}',
+    '{build,scripts}/**/*.{js,ts}',
+    'src/assets/css/style.css',
     'src/main.ts',
-    'vite.electron.config.mts',
-    'vite.types.config.mts'
-  ],
-  project: [
-    'browser_tests/**/*.{js,ts}',
-    'build/**/*.{js,ts,vue}',
-    'scripts/**/*.{js,ts}',
-    'src/**/*.{js,ts,vue}',
-    'tests-ui/**/*.{js,ts,vue}',
-    '*.{js,ts,mts}'
+    'src/scripts/ui/menu/index.ts',
+    'src/types/index.ts'
   ],
+  project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}'],
+  ignoreBinaries: ['only-allow', 'openapi-typescript'],
   ignoreDependencies: [
+    // Weird importmap things
+    '@iconify/json',
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
     '@primevue/icons',
-    '@iconify/json',
-    'tailwindcss',
-    'tailwindcss-primeui', // Need to figure out why tailwind plugin isn't applying
     // Dev
-    '@executeautomation/playwright-mcp-server',
     '@trivago/prettier-plugin-sort-imports'
   ],
   ignore: [
@@ -56,32 +48,35 @@ const config: KnipConfig = {
     'vite.types.config.mts',
     // Auto generated manager types
     'src/types/generatedManagerTypes.ts',
-    // Design system components (may not be used immediately)
-    'src/components/button/IconGroup.vue',
-    'src/components/button/MoreButton.vue',
-    'src/components/button/TextButton.vue',
-    'src/components/card/CardTitle.vue',
-    'src/components/card/CardDescription.vue',
-    'src/components/input/SingleSelect.vue'
+    'src/types/comfyRegistryTypes.ts',
+    // Used by a custom node (that should move off of this)
+    'src/scripts/ui/components/splitButton.ts'
   ],
-  ignoreExportsUsedInFile: true,
-  // Vue-specific configuration
-  vue: true,
-  tailwind: true,
-  // Only check for unused files, disable all other rules
-  // TODO: Gradually enable other rules - see https://github.com/Comfy-Org/ComfyUI_frontend/issues/4888
-  rules: {
-    binaries: 'off',
-    classMembers: 'off',
-    duplicates: 'off',
-    enumMembers: 'off',
-    exports: 'off',
-    nsExports: 'off',
-    nsTypes: 'off',
-    types: 'off'
+  compilers: {
+    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
+    css: (text: string) =>
+      [
+        ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
+      ].join('\n')
   },
-  // Include dependencies analysis
-  includeEntryExports: true
+  vite: {
+    config: ['vite?(.*).config.mts']
+  },
+  vitest: {
+    config: ['vitest?(.*).config.ts'],
+    entry: [
+      '**/*.{bench,test,test-d,spec}.?(c|m)[jt]s?(x)',
+      '**/__mocks__/**/*.[jt]s?(x)'
+    ]
+  },
+  playwright: {
+    config: ['playwright?(.*).config.ts'],
+    entry: ['**/*.@(spec|test).?(c|m)[jt]s?(x)', 'browser_tests/**/*.ts']
+  },
+  tags: [
+    '-knipIgnoreUnusedButUsedByCustomNodes',
+    '-knipIgnoreUnusedButUsedByVueNodesBranch'
+  ]
 }
 
 export default config
diff --git a/package.json b/package.json
index c7acbf645..63a28a2dc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.0",
+  "version": "1.27.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -25,10 +25,10 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
-    "lint": "eslint src --cache",
-    "lint:fix": "eslint src --cache --fix",
-    "lint:no-cache": "eslint src",
-    "lint:fix:no-cache": "eslint src --fix",
+    "lint": "eslint src --cache --concurrency=$npm_package_config_eslint_concurrency",
+    "lint:fix": "eslint src --fix --cache --concurrency=$npm_package_config_eslint_concurrency",
+    "lint:no-cache": "eslint src --concurrency=$npm_package_config_eslint_concurrency",
+    "lint:fix:no-cache": "eslint src --fix --concurrency=$npm_package_config_eslint_concurrency",
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
@@ -37,9 +37,12 @@
     "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
+  "config": {
+    "eslint_concurrency": "4"
+  },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@executeautomation/playwright-mcp-server": "^1.0.6",
+    "@iconify-json/lucide": "^1.2.66",
     "@iconify/tailwind": "^1.2.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
     "@lobehub/i18n-cli": "^1.25.1",
@@ -63,7 +66,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.0.0",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.12.0",
+    "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-storybook": "^9.1.1",
@@ -77,7 +80,6 @@
     "jsdom": "^26.1.0",
     "knip": "^5.62.0",
     "lint-staged": "^15.2.7",
-    "lucide-vue-next": "^0.540.0",
     "nx": "21.4.1",
     "prettier": "^3.3.2",
     "storybook": "^9.1.1",
@@ -85,7 +87,7 @@
     "tailwindcss-primeui": "^0.6.1",
     "tsx": "^4.15.6",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.0.0",
+    "typescript-eslint": "^8.42.0",
     "unplugin-icons": "^0.22.0",
     "unplugin-vue-components": "^0.28.0",
     "uuid": "^11.1.0",
@@ -124,6 +126,8 @@
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
+    "chart.js": "^4.5.0",
+    "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
@@ -140,12 +144,14 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
     "semver": "^7.7.2",
+    "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.5.13",
     "vue-i18n": "^9.14.3",
     "vue-router": "^4.4.3",
     "vuefire": "^3.2.1",
+    "yjs": "^13.6.27",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4784c4b53..903a6c551 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,12 @@ importers:
       axios:
         specifier: ^1.8.2
         version: 1.11.0
+      chart.js:
+        specifier: ^4.5.0
+        version: 4.5.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       dompurify:
         specifier: ^3.2.5
         version: 3.2.5
@@ -131,6 +137,9 @@ importers:
       semver:
         specifier: ^7.7.2
         version: 7.7.2
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
       three:
         specifier: ^0.170.0
         version: 0.170.0
@@ -149,6 +158,9 @@ importers:
       vuefire:
         specifier: ^3.2.1
         version: 3.2.1(consola@3.4.2)(firebase@11.6.0)(vue@3.5.13(typescript@5.9.2))
+      yjs:
+        specifier: ^13.6.27
+        version: 13.6.27
       zod:
         specifier: ^3.23.8
         version: 3.24.1
@@ -159,27 +171,27 @@ importers:
       '@eslint/js':
         specifier: ^9.8.0
         version: 9.12.0
-      '@executeautomation/playwright-mcp-server':
-        specifier: ^1.0.6
-        version: 1.0.6(react@19.1.1)(ws@8.18.3)(zod@3.24.1)
+      '@iconify-json/lucide':
+        specifier: ^1.2.66
+        version: 1.2.66
       '@iconify/tailwind':
         specifier: ^1.2.0
         version: 1.2.0
       '@intlify/eslint-plugin-vue-i18n':
         specifier: ^3.2.0
-        version: 3.2.0(eslint@9.12.0(jiti@2.4.2))
+        version: 3.2.0(eslint@9.35.0(jiti@2.4.2))
       '@lobehub/i18n-cli':
         specifier: ^1.25.1
         version: 1.25.1(@types/react@19.1.9)(typescript@5.9.2)(use-sync-external-store@1.5.0(react@19.1.1))(ws@8.18.3)(zod@3.24.1)
       '@nx/eslint':
         specifier: 21.4.1
-        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)
+        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)
       '@nx/playwright':
         specifier: 21.4.1
-        version: 21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
+        version: 21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/storybook':
         specifier: 21.4.1
-        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
       '@nx/vite':
         specifier: 21.4.1
         version: 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vitest@3.2.4)
@@ -232,23 +244,23 @@ importers:
         specifier: ^2.4.6
         version: 2.4.6
       eslint:
-        specifier: ^9.12.0
-        version: 9.12.0(jiti@2.4.2)
+        specifier: ^9.34.0
+        version: 9.35.0(jiti@2.4.2)
       eslint-config-prettier:
         specifier: ^10.1.2
-        version: 10.1.2(eslint@9.12.0(jiti@2.4.2))
+        version: 10.1.2(eslint@9.35.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.2.6
-        version: 5.2.6(eslint-config-prettier@10.1.2(eslint@9.12.0(jiti@2.4.2)))(eslint@9.12.0(jiti@2.4.2))(prettier@3.3.2)
+        version: 5.2.6(eslint-config-prettier@10.1.2(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2)
       eslint-plugin-storybook:
         specifier: ^9.1.1
-        version: 9.1.1(eslint@9.12.0(jiti@2.4.2))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+        version: 9.1.1(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
       eslint-plugin-unused-imports:
         specifier: ^4.1.4
-        version: 4.1.4(@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2))
+        version: 4.1.4(@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
       eslint-plugin-vue:
         specifier: ^9.27.0
-        version: 9.27.0(eslint@9.12.0(jiti@2.4.2))
+        version: 9.27.0(eslint@9.35.0(jiti@2.4.2))
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
@@ -273,9 +285,6 @@ importers:
       lint-staged:
         specifier: ^15.2.7
         version: 15.2.7
-      lucide-vue-next:
-        specifier: ^0.540.0
-        version: 0.540.0(vue@3.5.13(typescript@5.9.2))
       nx:
         specifier: 21.4.1
         version: 21.4.1
@@ -298,8 +307,8 @@ importers:
         specifier: ^5.4.5
         version: 5.9.2
       typescript-eslint:
-        specifier: ^8.0.0
-        version: 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
+        specifier: ^8.42.0
+        version: 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       unplugin-icons:
         specifier: ^0.22.0
         version: 0.22.0(@vue/compiler-sfc@3.5.13)
@@ -336,53 +345,9 @@ importers:
 
 packages:
 
-  '@actions/core@1.11.1':
-    resolution: {integrity: sha512-hXJCSrkwfA46Vd9Z3q4cpEpHB1rL5NG04+/rbqW9d3+CSvtB1tYe8UTpAlixa1vj0m/ULglfEK2UKxMGxCxv5A==}
-
-  '@actions/exec@1.1.1':
-    resolution: {integrity: sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==}
-
-  '@actions/http-client@2.2.3':
-    resolution: {integrity: sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==}
-
-  '@actions/io@1.1.3':
-    resolution: {integrity: sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==}
-
   '@adobe/css-tools@4.4.3':
     resolution: {integrity: sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==}
 
-  '@ai-sdk/openai@1.3.24':
-    resolution: {integrity: sha512-GYXnGJTHRTZc4gJMSmFRgEQudjqd4PUN0ZjQhPwOAYH1yOAvQoG/Ikqs+HyISRbLPCrhbZnPKCNHuRU4OfpW0Q==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.0.0
-
-  '@ai-sdk/provider-utils@2.2.8':
-    resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.23.8
-
-  '@ai-sdk/provider@1.1.3':
-    resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
-    engines: {node: '>=18'}
-
-  '@ai-sdk/react@1.2.12':
-    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      zod:
-        optional: true
-
-  '@ai-sdk/ui-utils@1.2.11':
-    resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.23.8
-
   '@alcalzone/ansi-tokenize@0.2.0':
     resolution: {integrity: sha512-qI/5TaaaCZE4yeSZ83lu0+xi1r88JSxUjnH4OP/iZF7+KKZ75u3ee5isd0LxX+6N8U0npL61YrpbthILHB6BnA==}
     engines: {node: '>=18'}
@@ -459,9 +424,6 @@ packages:
   '@antfu/utils@8.1.1':
     resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
 
-  '@anthropic-ai/sdk@0.8.1':
-    resolution: {integrity: sha512-59etePenCizVx1O8Qhi1T1ruE04ISfNzCnyhZNcsss1QljsLmYS83jttarMNEvGYcsUF7rwxw2lzcC3Zbxao7g==}
-
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
@@ -1004,8 +966,8 @@ packages:
     resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.28.3':
-    resolution: {integrity: sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==}
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/template@7.27.2':
@@ -1358,41 +1320,51 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.11.0':
-    resolution: {integrity: sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==}
+  '@eslint-community/eslint-utils@4.8.0':
+    resolution: {integrity: sha512-MJQFqrZgcW0UNYLGOuQpey/oTN59vyWwplvCGZztn1cKz9agZPPYpJB7h2OMmuu7VLqkvEjN8feFZJmxNF9D+Q==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.18.0':
-    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
+  '@eslint/config-array@0.21.0':
+    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.6.0':
-    resolution: {integrity: sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==}
+  '@eslint/config-helpers@0.3.1':
+    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.15.2':
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.1.0':
     resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/js@9.12.0':
     resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@2.1.4':
-    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
+  '@eslint/js@9.35.0':
+    resolution: {integrity: sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.3':
-    resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@executeautomation/playwright-mcp-server@1.0.6':
-    resolution: {integrity: sha512-Yq5dM5XCzWTc2hjC0mYJPbGaNPn3giGS9XR47bRGSQIF1t3zcjrH4i/z0Fc4PfJj/6kaPMFzp/7N49LDZBJlzA==}
-    hasBin: true
-
-  '@fastify/busboy@2.1.1':
-    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
-    engines: {node: '>=14'}
+  '@eslint/plugin-kit@0.3.5':
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@firebase/analytics-compat@0.2.18':
     resolution: {integrity: sha512-Hw9mzsSMZaQu6wrTbi3kYYwGw9nBqOHr47pVLxfr5v8CalsdrG5gfs9XUlPOZjHRVISp3oQrh1j7d3E+ulHPjQ==}
@@ -1613,22 +1585,25 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  '@humanfs/core@0.19.0':
-    resolution: {integrity: sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==}
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
 
-  '@humanfs/node@0.16.5':
-    resolution: {integrity: sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==}
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
     engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/retry@0.3.1':
-    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/lucide@1.2.66':
+    resolution: {integrity: sha512-TrhmfThWY2FHJIckjz7g34gUx3+cmja61DcHNdmu0rVDBQHIjPMYO1O8mMjoDSqIXEllz9wDZxCqT3lFuI+f/A==}
+
   '@iconify/json@2.2.380':
     resolution: {integrity: sha512-+Al/Q+mMB/nLz/tawmJEOkCs6+RKKVUS/Yg9I80h2yRpu0kIzxVLQRfF0NifXz/fH92vDVXbS399wio4lMVF4Q==}
 
@@ -1713,6 +1688,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@lobehub/cli-ui@1.13.0':
     resolution: {integrity: sha512-7kXm84dc6yiniEFb/KRZv5H4g43n+xKTSpKSczlv54DY3tHSuZjBARyI/UDxFVgn7ezWYAIFuphzs0hSdhs6hw==}
     engines: {node: '>=18'}
@@ -1741,10 +1719,6 @@ packages:
   '@microsoft/tsdoc@0.15.1':
     resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==}
 
-  '@modelcontextprotocol/sdk@1.11.1':
-    resolution: {integrity: sha512-9LfmxKTb1v+vUS1/emSk1f5ePmTLkb9Le9AxOB5T0XM59EUumwcS45z05h7aiZx3GI0Bl7mjb3FMEglYj+acuQ==}
-    engines: {node: '>=18'}
-
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
@@ -1868,10 +1842,6 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
-  '@opentelemetry/api@1.9.0':
-    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
-    engines: {node: '>=8.0.0'}
-
   '@oxc-resolver/binding-android-arm-eabi@11.6.1':
     resolution: {integrity: sha512-Ma/kg29QJX1Jzelv0Q/j2iFuUad1WnjgPjpThvjqPjpOyLjCUaiFCCnshhmWjyS51Ki1Iol3fjf1qAzObf8GIA==}
     cpu: [arm]
@@ -1989,28 +1959,11 @@ packages:
     resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@playwright/browser-chromium@1.53.1':
-    resolution: {integrity: sha512-xsujbzJAgn3A0RVV00cT/XekdPUOqsJoy8WWyKdqhQnuA7A88m/x0MnbcaCeZcs2M5JVRqpbsFKRos+IIeZLjw==}
-    engines: {node: '>=18'}
-
-  '@playwright/browser-firefox@1.53.1':
-    resolution: {integrity: sha512-1+jAvoMYrh8rT/7VJQZ+J4+3/sFEx+/TPesdKjITmLlia2NrdxEnB2jvu5N2bhuPluFccZBWTUibPkULpva0YA==}
-    engines: {node: '>=18'}
-
-  '@playwright/browser-webkit@1.53.1':
-    resolution: {integrity: sha512-6z0KsU1A6hppMSkVVstEoQhK/tjMTf8ZIaegTTDD/bKIq7osUcgkVdGKt4cd2gFvjxZH4HqV6wKGmuWcdWmmQQ==}
-    engines: {node: '>=18'}
-
   '@playwright/test@1.52.0':
     resolution: {integrity: sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==}
     engines: {node: '>=18'}
     hasBin: true
 
-  '@playwright/test@1.55.0':
-    resolution: {integrity: sha512-04IXzPwHrW69XusN/SIdDdKZBzMfOT9UNT/YiJit/xpy2VuAoB8NHc8Aplb96zsWDddLnbkPL3TsmrS04ZU2xQ==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   '@pnpm/config.env-replace@1.1.0':
     resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
     engines: {node: '>=12.22.0'}
@@ -2584,9 +2537,6 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
-  '@types/estree@1.0.6':
-    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -2668,26 +2618,20 @@ packages:
   '@types/webxr@0.5.20':
     resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==}
 
-  '@typescript-eslint/eslint-plugin@8.0.0':
-    resolution: {integrity: sha512-STIZdwEQRXAHvNUS6ILDf5z3u95Gc8jzywunxSNqX00OooIemaaNIA0vEgynJlycL5AjabYLLrIyHd4iazyvtg==}
+  '@typescript-eslint/eslint-plugin@8.42.0':
+    resolution: {integrity: sha512-Aq2dPqsQkxHOLfb2OPv43RnIvfj05nw8v/6n3B2NABIPpHnjQnaLo9QGMTvml+tv4korl/Cjfrb/BYhoL8UUTQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      '@typescript-eslint/parser': ^8.42.0
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.0.0':
-    resolution: {integrity: sha512-pS1hdZ+vnrpDIxuFXYQpLTILglTjSYJ9MbetZctrUawogUsPdz31DIIRZ9+rab0LhYNTsk88w4fIzVheiTbWOQ==}
+  '@typescript-eslint/parser@8.42.0':
+    resolution: {integrity: sha512-r1XG74QgShUgXph1BYseJ+KZd17bKQib/yF3SR+demvytiRXrwd12Blnz5eYGm8tXaeRdd4x88MlfwldHoudGg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/project-service@8.39.0':
     resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
@@ -2695,45 +2639,46 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.0.0':
-    resolution: {integrity: sha512-V0aa9Csx/ZWWv2IPgTfY7T4agYwJyILESu/PVqFtTFz9RIS823mAze+NbnBI8xiwdX3iqeQbcTYlvB04G9wyQw==}
+  '@typescript-eslint/project-service@8.42.0':
+    resolution: {integrity: sha512-vfVpLHAhbPjilrabtOSNcUDmBboQNrJUiNAGoImkZKnMjs2TIcWG33s4Ds0wY3/50aZmTMqJa6PiwkwezaAklg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/scope-manager@8.39.0':
     resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/scope-manager@8.42.0':
+    resolution: {integrity: sha512-51+x9o78NBAVgQzOPd17DkNTnIzJ8T/O2dmMBLoK9qbY0Gm52XJcdJcCl18ExBMiHo6jPMErUQWUv5RLE51zJw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/tsconfig-utils@8.39.0':
     resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.0.0':
-    resolution: {integrity: sha512-mJAFP2mZLTBwAn5WI4PMakpywfWFH5nQZezUQdSKV23Pqo6o9iShQg1hP2+0hJJXP2LnZkWPphdIq4juYYwCeg==}
+  '@typescript-eslint/tsconfig-utils@8.42.0':
+    resolution: {integrity: sha512-kHeFUOdwAJfUmYKjR3CLgZSglGHjbNTi1H8sTYRYV2xX6eNz4RyJ2LIgsDLKf8Yi0/GL1WZAC/DgZBeBft8QAQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.0.0':
-    resolution: {integrity: sha512-wgdSGs9BTMWQ7ooeHtu5quddKKs5Z5dS+fHLbrQI+ID0XWJLODGMHRfhwImiHoeO2S5Wir2yXuadJN6/l4JRxw==}
+  '@typescript-eslint/type-utils@8.42.0':
+    resolution: {integrity: sha512-9KChw92sbPTYVFw3JLRH1ockhyR3zqqn9lQXol3/YbI6jVxzWoGcT3AsAW0mu1MY0gYtsXnUGV/AKpkAj5tVlQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/types@8.39.0':
     resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.0.0':
-    resolution: {integrity: sha512-5b97WpKMX+Y43YKi4zVcCVLtK5F98dFls3Oxui8LbnmRsseKenbbDinmvxrWegKDMmlkIq/XHuyy0UGLtpCDKg==}
+  '@typescript-eslint/types@8.42.0':
+    resolution: {integrity: sha512-LdtAWMiFmbRLNP7JNeY0SqEtJvGMYSzfiWBSmx+VSZ1CH+1zyl8Mmw1TT39OrtsRvIYShjJWzTDMPWZJCpwBlw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
 
   '@typescript-eslint/typescript-estree@8.39.0':
     resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
@@ -2741,11 +2686,11 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.0.0':
-    resolution: {integrity: sha512-k/oS/A/3QeGLRvOWCg6/9rATJL5rec7/5s1YmdS0ZU6LHveJyGFwBvLhSRBv6i9xaj7etmosp+l+ViN1I9Aj/Q==}
+  '@typescript-eslint/typescript-estree@8.42.0':
+    resolution: {integrity: sha512-ku/uYtT4QXY8sl9EDJETD27o3Ewdi72hcXg1ah/kkUgBvAYHLwj2ofswFFNXS+FL5G+AGkxBtvGt8pFBHKlHsQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/utils@8.39.0':
     resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
@@ -2754,14 +2699,21 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.0.0':
-    resolution: {integrity: sha512-oN0K4nkHuOyF3PVMyETbpP5zp6wfyOvm7tWhTMfoqxSSsPmJIh6JNASuZDlODE8eE+0EB9uar+6+vxr9DBTYOA==}
+  '@typescript-eslint/utils@8.42.0':
+    resolution: {integrity: sha512-JnIzu7H3RH5BrKC4NoZqRfmjqCIS1u3hGZltDYJgkVdqAezl4L9d1ZLw+36huCujtSBSAirGINF/S4UxOcR+/g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/visitor-keys@8.39.0':
     resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/visitor-keys@8.42.0':
+    resolution: {integrity: sha512-3WbiuzoEowaEn8RSnhJBrxSwX8ULYE9CXaPepS2C2W3NSA5NNIvBaslpBSBElPq0UGr0xVJlXFWOAKIkyylydQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@vitejs/plugin-vue@5.1.4':
     resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2957,10 +2909,6 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
-  accepts@2.0.0:
-    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
-    engines: {node: '>= 0.6'}
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2976,6 +2924,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   address@1.2.2:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
     engines: {node: '>= 10.0.0'}
@@ -2988,16 +2941,6 @@ packages:
     resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
     engines: {node: '>= 8.0.0'}
 
-  ai@4.3.19:
-    resolution: {integrity: sha512-dIE2bfNpqHN3r6IINp9znguYdhIOheKW2LDigAMrgt/upT3B8eBGPSCblENvaZGoq+hxaN9fSMzjWpbqloP+7Q==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      react:
-        optional: true
-
   ajv-draft-04@1.0.0:
     resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
     peerDependencies:
@@ -3088,10 +3031,6 @@ packages:
     resolution: {integrity: sha512-yOzOZcR9Tn7enTF66bqKorGGH0F36vcPaSWg8fO0c0UYb3LX3VMXj5ZxEqQLNOecAhlRJ7wYZja5i4jTlnbIfQ==}
     engines: {node: '>=4'}
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
@@ -3172,9 +3111,6 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  base-64@0.1.0:
-    resolution: {integrity: sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -3195,10 +3131,6 @@ packages:
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
-  body-parser@2.2.0:
-    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
-    engines: {node: '>=18'}
-
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -3234,10 +3166,6 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
-  bytes@3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
-    engines: {node: '>= 0.8'}
-
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -3293,8 +3221,9 @@ packages:
   character-parser@2.2.0:
     resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
 
-  charenc@0.0.2:
-    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+  chart.js@4.5.0:
+    resolution: {integrity: sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==}
+    engines: {pnpm: '>=8'}
 
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
@@ -3348,6 +3277,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   code-excerpt@4.0.0:
     resolution: {integrity: sha512-xxodCmBen3iy2i0WtAK8FlFNrRzjUqjRsMfho58xT/wvZU1YTM3fCnRjcy1gJPMepaRlgm/0e6w8SpWHpn3/cA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3429,14 +3362,6 @@ packages:
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
-  content-disposition@1.0.0:
-    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
-    engines: {node: '>= 0.6'}
-
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -3444,14 +3369,6 @@ packages:
     resolution: {integrity: sha512-rcQ1bsQO9799wq24uE5AM2tAILy4gXGIK/njFWcVQkGNZ96edlpY+A7bjwvzjYvLDyzmG1MmMLZhpcsb+klNMQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  cookie-signature@1.2.2:
-    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
-    engines: {node: '>=6.6.0'}
-
-  cookie@0.7.2:
-    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
-    engines: {node: '>= 0.6'}
-
   copy-anything@3.0.5:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
@@ -3462,10 +3379,6 @@ packages:
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  cors@2.8.5:
-    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
-    engines: {node: '>= 0.10'}
-
   cosmiconfig@7.1.0:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
@@ -3486,9 +3399,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crypt@0.0.2:
-    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
-
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
@@ -3588,10 +3498,6 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
-  depd@2.0.0:
-    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
-    engines: {node: '>= 0.8'}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -3611,13 +3517,6 @@ packages:
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
-  digest-fetch@1.3.0:
-    resolution: {integrity: sha512-CGJuv6iKNM7QyZlM2T3sPAdZWd/p9zQiRNS9G+9COUCwzWFTs0Xp8NF5iePx7wtvhDykReiRRrSeNb4oMmB8lA==}
-
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-
   dirty-json@0.9.2:
     resolution: {integrity: sha512-7SCDfnQtBObcngVXNPZcnxGxqqPTK4UqeXeKAch+RGH5qpqadWbV9FmN71x9Bb4tTs0TNFb4FT/4Kz4P4Cjqcw==}
     engines: {node: '>=6.0.0'}
@@ -3682,9 +3581,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  ee-first@1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
-
   ejs@3.1.10:
     resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
     engines: {node: '>=0.10.0'}
@@ -3702,10 +3598,6 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  encodeurl@2.0.0:
-    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
-    engines: {node: '>= 0.8'}
-
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
@@ -3794,9 +3686,6 @@ packages:
     resolution: {integrity: sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==}
     engines: {node: '>=12'}
 
-  escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -3865,8 +3754,8 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-scope@8.1.0:
-    resolution: {integrity: sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==}
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
@@ -3877,8 +3766,8 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.12.0:
-    resolution: {integrity: sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==}
+  eslint@9.35.0:
+    resolution: {integrity: sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -3894,6 +3783,10 @@ packages:
     resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3925,10 +3818,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  etag@1.8.1:
-    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
-    engines: {node: '>= 0.6'}
-
   event-target-shim@5.0.1:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
@@ -3936,14 +3825,6 @@ packages:
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
-  eventsource-parser@3.0.5:
-    resolution: {integrity: sha512-bSRG85ZrMdmWtm7qkF9He9TNRzc/Bm99gEJMaQoHJ9E6Kv9QBbsldh2oMj7iXmYNEAVvNgvv5vPorG6W+XtBhQ==}
-    engines: {node: '>=20.0.0'}
-
-  eventsource@3.0.7:
-    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
-    engines: {node: '>=18.0.0'}
-
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -3956,16 +3837,6 @@ packages:
     resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
     engines: {node: '>=12.0.0'}
 
-  express-rate-limit@7.5.1:
-    resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
-    engines: {node: '>= 16'}
-    peerDependencies:
-      express: '>= 4.11'
-
-  express@5.1.0:
-    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
-    engines: {node: '>= 18'}
-
   exsolve@1.0.7:
     resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
@@ -4055,10 +3926,6 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  finalhandler@2.1.0:
-    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
-    engines: {node: '>= 0.8'}
-
   find-package-json@1.2.0:
     resolution: {integrity: sha512-+SOGcLGYDJHtyqHd87ysBhmaeQ95oWspDKnMXBrnQ9Eq4OkLNqejgoaD8xVWu6GPa0B6roa6KinCMEMcVeqONw==}
 
@@ -4077,9 +3944,6 @@ packages:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
     hasBin: true
 
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
-
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
@@ -4120,14 +3984,6 @@ packages:
     resolution: {integrity: sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==}
     engines: {node: '>= 12.20'}
 
-  forwarded@0.2.0:
-    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
-    engines: {node: '>= 0.6'}
-
-  fresh@2.0.0:
-    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
-    engines: {node: '>= 0.8'}
-
   front-matter@4.0.2:
     resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
 
@@ -4227,10 +4083,6 @@ packages:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -4300,10 +4152,6 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  http-errors@2.0.0:
-    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
-    engines: {node: '>= 0.8'}
-
   http-parser-js@0.5.10:
     resolution: {integrity: sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==}
 
@@ -4349,6 +4197,10 @@ packages:
     resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
     engines: {node: '>= 4'}
 
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
@@ -4399,10 +4251,6 @@ packages:
       react-devtools-core:
         optional: true
 
-  ipaddr.js@1.9.1:
-    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
-    engines: {node: '>= 0.10'}
-
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
@@ -4410,9 +4258,6 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
-  is-buffer@1.1.6:
-    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
-
   is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
@@ -4502,9 +4347,6 @@ packages:
   is-promise@2.2.2:
     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
 
-  is-promise@4.0.0:
-    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
-
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -4546,6 +4388,9 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isomorphic.js@0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -4653,9 +4498,6 @@ packages:
   json-schema-typed@8.0.1:
     resolution: {integrity: sha512-XQmWYj2Sm4kn4WeTYvmpKEbyPsL7nBsb647c7pMe6l02/yx2+Jfc4dT6UZkEXnIUb5LhD55r2HPsJ1milQ4rDg==}
 
-  json-schema@0.4.0:
-    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
-
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -4732,6 +4574,11 @@ packages:
     resolution: {integrity: sha512-vzaalVBmFLnMaedq0QAsBAaXsWahzRpvnIBdBjj7y+7EKTS6lnziU2y/PsU2c6rV5qYj2B5IDw0uNJ9peXD0vw==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
+  lib0@0.2.114:
+    resolution: {integrity: sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
@@ -4898,11 +4745,6 @@ packages:
     resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
     engines: {node: '>=16.14'}
 
-  lucide-vue-next@0.540.0:
-    resolution: {integrity: sha512-H7qhKVNKLyoFMo05pWcGSWBiLPiI3zJmWV65SuXWHlrIGIcvDer10xAyWcRJ0KLzIH5k5+yi7AGw/Xi1VF8Pbw==}
-    peerDependencies:
-      vue: '>=3.0.1'
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -4939,15 +4781,6 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mcp-evals@1.0.18:
-    resolution: {integrity: sha512-khDcEG0XWshdCRirqLXogNoDLmzFA86QyuKoi5ioXsbeRZ3XQra8Zsg7vD+C0K5vwkFIoB1vTuPjHEHMhdLFtQ==}
-    hasBin: true
-    peerDependencies:
-      react: ^19.1.0
-
-  md5@2.3.0:
-    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
-
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -4996,14 +4829,6 @@ packages:
   media-encoder-host@9.0.20:
     resolution: {integrity: sha512-IyEYxw6az97RNuETOAZV4YZqNAPOiF9GKIp5mVZb4HOyWd6mhkWQ34ydOzhqAWogMyc4W05kjN/VCgTtgyFmsw==}
 
-  media-typer@1.1.0:
-    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
-    engines: {node: '>= 0.8'}
-
-  merge-descriptors@2.0.0:
-    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
-    engines: {node: '>=18'}
-
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -5109,18 +4934,10 @@ packages:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
-  mime-db@1.54.0:
-    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
-    engines: {node: '>= 0.6'}
-
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mime-types@3.0.1:
-    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
-    engines: {node: '>= 0.6'}
-
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -5199,11 +5016,6 @@ packages:
     resolution: {integrity: sha512-SsI/exkodHsh+ofCV7An2PZWRaJC7eFVl7gtHQlMWFEDmWtb7cELr/GK32Nhe/6dZQhbr81o+Moswx9aXN3RRg==}
     engines: {node: '>=18.2.0'}
 
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5222,10 +5034,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  negotiator@1.0.0:
-    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
-    engines: {node: '>= 0.6'}
-
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -5299,18 +5107,10 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
-
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  on-finished@2.4.1:
-    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
-    engines: {node: '>= 0.8'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -5409,10 +5209,6 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
-  parseurl@1.3.3:
-    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
-    engines: {node: '>= 0.8'}
-
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 
@@ -5446,10 +5242,6 @@ packages:
     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
     engines: {node: 20 || >=22}
 
-  path-to-regexp@8.2.0:
-    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
-    engines: {node: '>=16'}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -5502,10 +5294,6 @@ packages:
       typescript:
         optional: true
 
-  pkce-challenge@5.0.0:
-    resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
-    engines: {node: '>=16.20.0'}
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -5517,31 +5305,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright-core@1.53.1:
-    resolution: {integrity: sha512-Z46Oq7tLAyT0lGoFx4DOuB1IA9D1TPj0QkYxpPVUnGDqHHvDpCftu1J2hM2PiWsNMoZh8+LQaarAWcDfPBc6zg==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  playwright-core@1.55.0:
-    resolution: {integrity: sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   playwright@1.52.0:
     resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.53.1:
-    resolution: {integrity: sha512-LJ13YLr/ocweuwxyGf1XNFWIU4M2zUSo149Qbp+A4cpwDjsxRPj7k6H25LBrEHiEwxvRbD8HdwvQmRMSvquhYw==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  playwright@1.55.0:
-    resolution: {integrity: sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   postcss-selector-parser@6.1.0:
     resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
     engines: {node: '>=4'}
@@ -5657,10 +5425,6 @@ packages:
     resolution: {integrity: sha512-Z2E/kOY1QjoMlCytmexzYfDm/w5fKAiRwpSzGtdnXW1zC88Z2yXazHHrOtwCzn+7wSxyE8PYM4rvVcMphF9sOA==}
     engines: {node: '>=12.0.0'}
 
-  proxy-addr@2.0.7:
-    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
-    engines: {node: '>= 0.10'}
-
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -5712,10 +5476,6 @@ packages:
     resolution: {integrity: sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==}
     engines: {node: '>=12.20'}
 
-  qs@6.14.0:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
-    engines: {node: '>=0.6'}
-
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -5725,14 +5485,6 @@ packages:
   raf-schd@4.0.3:
     resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
 
-  range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
-    engines: {node: '>= 0.6'}
-
-  raw-body@3.0.0:
-    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
-    engines: {node: '>= 0.8'}
-
   rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -5876,10 +5628,6 @@ packages:
   rope-sequence@1.3.4:
     resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
 
-  router@2.2.0:
-    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
-    engines: {node: '>= 18'}
-
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -5913,9 +5661,6 @@ packages:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
 
-  secure-json-parse@2.7.0:
-    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
-
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -5930,14 +5675,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  send@1.2.0:
-    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
-    engines: {node: '>= 18'}
-
-  serve-static@2.2.0:
-    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
-    engines: {node: '>= 18'}
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -5945,9 +5682,6 @@ packages:
   setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
-  setprototypeof@1.2.0:
-    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -5956,22 +5690,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
-
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
-
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -5986,10 +5704,6 @@ packages:
     resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
     engines: {node: '>=18'}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
   slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
@@ -6033,14 +5747,6 @@ packages:
   standardized-audio-context@25.3.77:
     resolution: {integrity: sha512-Ki9zNz6pKcC5Pi+QPjPyVsD9GwJIJWgryji0XL9cAJXMGyn+dPOf6Qik1AHei0+UNVcc4BOCa0hWLBzlwqsW/A==}
 
-  statuses@2.0.1:
-    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
-    engines: {node: '>= 0.8'}
-
-  statuses@2.0.2:
-    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
-    engines: {node: '>= 0.8'}
-
   std-env@3.9.0:
     resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
@@ -6156,6 +5862,9 @@ packages:
     resolution: {integrity: sha512-JJoOEKTfL1urb1mDoEblhD9NhEbWmq9jHEMEnxoC4ujUaZ4itA8vKgwkFAyNClgxplLi9tsUKX+EduK0p/l7sg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
   tailwindcss-primeui@0.6.1:
     resolution: {integrity: sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==}
     peerDependencies:
@@ -6185,16 +5894,9 @@ packages:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   three@0.170.0:
     resolution: {integrity: sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==}
 
-  throttleit@2.1.0:
-    resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
-    engines: {node: '>=18'}
-
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -6243,10 +5945,6 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  toidentifier@1.0.1:
-    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
-    engines: {node: '>=0.6'}
-
   token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
 
@@ -6272,12 +5970,6 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-api-utils@1.3.0:
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -6303,10 +5995,6 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  tunnel@0.0.6:
-    resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
-    engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -6323,18 +6011,12 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  type-is@2.0.1:
-    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
-    engines: {node: '>= 0.6'}
-
-  typescript-eslint@8.0.0:
-    resolution: {integrity: sha512-yQWBJutWL1PmpmDddIOl9/Mi6vZjqNCjqSGBMQ4vsc2Aiodk0SnbQQWPXbSy0HNuKCuGkw1+u4aQ2mO40TdhDQ==}
+  typescript-eslint@8.42.0:
+    resolution: {integrity: sha512-ozR/rQn+aQXQxh1YgbCzQWDFrsi9mcg+1PM3l/z5o1+20P7suOIaNg515bpr/OYt6FObz/NHcBstydDLHWeEKg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
   typescript@5.4.2:
     resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
@@ -6364,10 +6046,6 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  undici@5.29.0:
-    resolution: {integrity: sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==}
-    engines: {node: '>=14.0'}
-
   unescape-js@1.1.4:
     resolution: {integrity: sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==}
 
@@ -6414,10 +6092,6 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  unpipe@1.0.0:
-    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
-    engines: {node: '>= 0.8'}
-
   unplugin-icons@0.22.0:
     resolution: {integrity: sha512-CP+iZq5U7doOifer5bcM0jQ9t3Is7EGybIYt3myVxceI8Zuk8EZEpe1NPtJvh7iqMs1VdbK0L41t9+um9VuuLw==}
     peerDependencies:
@@ -6494,10 +6168,6 @@ packages:
     resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
-
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -6712,10 +6382,6 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
-  web-streams-polyfill@3.3.3:
-    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
-    engines: {node: '>= 8'}
-
   web-streams-polyfill@4.0.0-beta.3:
     resolution: {integrity: sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==}
     engines: {node: '>= 14'}
@@ -6882,6 +6548,10 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
+  yjs@13.6.27:
+    resolution: {integrity: sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -6933,58 +6603,8 @@ packages:
 
 snapshots:
 
-  '@actions/core@1.11.1':
-    dependencies:
-      '@actions/exec': 1.1.1
-      '@actions/http-client': 2.2.3
-
-  '@actions/exec@1.1.1':
-    dependencies:
-      '@actions/io': 1.1.3
-
-  '@actions/http-client@2.2.3':
-    dependencies:
-      tunnel: 0.0.6
-      undici: 5.29.0
-
-  '@actions/io@1.1.3': {}
-
   '@adobe/css-tools@4.4.3': {}
 
-  '@ai-sdk/openai@1.3.24(zod@3.24.1)':
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.1)
-      zod: 3.24.1
-
-  '@ai-sdk/provider-utils@2.2.8(zod@3.24.1)':
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      nanoid: 3.3.11
-      secure-json-parse: 2.7.0
-      zod: 3.24.1
-
-  '@ai-sdk/provider@1.1.3':
-    dependencies:
-      json-schema: 0.4.0
-
-  '@ai-sdk/react@1.2.12(react@19.1.1)(zod@3.24.1)':
-    dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.1)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.1)
-      react: 19.1.1
-      swr: 2.3.6(react@19.1.1)
-      throttleit: 2.1.0
-    optionalDependencies:
-      zod: 3.24.1
-
-  '@ai-sdk/ui-utils@1.2.11(zod@3.24.1)':
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.1)
-      zod: 3.24.1
-      zod-to-json-schema: 3.24.1(zod@3.24.1)
-
   '@alcalzone/ansi-tokenize@0.2.0':
     dependencies:
       ansi-styles: 6.2.1
@@ -7088,20 +6708,6 @@ snapshots:
 
   '@antfu/utils@8.1.1': {}
 
-  '@anthropic-ai/sdk@0.8.1':
-    dependencies:
-      '@types/node': 18.19.123
-      '@types/node-fetch': 2.6.13
-      abort-controller: 3.0.0
-      agentkeepalive: 4.6.0
-      digest-fetch: 1.3.0
-      form-data-encoder: 1.7.2
-      formdata-node: 4.4.1
-      node-fetch: 2.7.0
-      web-streams-polyfill: 3.3.3
-    transitivePeerDependencies:
-      - encoding
-
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -7819,7 +7425,7 @@ snapshots:
 
   '@babel/runtime@7.27.6': {}
 
-  '@babel/runtime@7.28.3': {}
+  '@babel/runtime@7.28.4': {}
 
   '@babel/template@7.27.2':
     dependencies:
@@ -8025,22 +7631,31 @@ snapshots:
   '@esbuild/win32-x64@0.25.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.12.0(jiti@2.4.2))':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.35.0(jiti@2.4.2))':
     dependencies:
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.11.0': {}
-
-  '@eslint/config-array@0.18.0':
+  '@eslint-community/eslint-utils@4.8.0(eslint@9.35.0(jiti@2.4.2))':
     dependencies:
-      '@eslint/object-schema': 2.1.4
+      eslint: 9.35.0(jiti@2.4.2)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.21.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
       debug: 4.4.1
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/core@0.6.0': {}
+  '@eslint/config-helpers@0.3.1': {}
+
+  '@eslint/core@0.15.2':
+    dependencies:
+      '@types/json-schema': 7.0.15
 
   '@eslint/eslintrc@3.1.0':
     dependencies:
@@ -8056,33 +7671,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@eslint/js@9.12.0': {}
 
-  '@eslint/object-schema@2.1.4': {}
+  '@eslint/js@9.35.0': {}
 
-  '@eslint/plugin-kit@0.2.3':
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.5':
     dependencies:
+      '@eslint/core': 0.15.2
       levn: 0.4.1
 
-  '@executeautomation/playwright-mcp-server@1.0.6(react@19.1.1)(ws@8.18.3)(zod@3.24.1)':
-    dependencies:
-      '@modelcontextprotocol/sdk': 1.11.1
-      '@playwright/browser-chromium': 1.53.1
-      '@playwright/browser-firefox': 1.53.1
-      '@playwright/browser-webkit': 1.53.1
-      '@playwright/test': 1.55.0
-      mcp-evals: 1.0.18(react@19.1.1)(ws@8.18.3)(zod@3.24.1)
-      playwright: 1.53.1
-      uuid: 11.1.0
-    transitivePeerDependencies:
-      - encoding
-      - react
-      - supports-color
-      - ws
-      - zod
-
-  '@fastify/busboy@2.1.1': {}
-
   '@firebase/analytics-compat@0.2.18(@firebase/app-compat@0.2.53)(@firebase/app@0.11.4)':
     dependencies:
       '@firebase/analytics': 0.10.12(@firebase/app@0.11.4)
@@ -8413,16 +8026,20 @@ snapshots:
       protobufjs: 7.5.0
       yargs: 17.7.2
 
-  '@humanfs/core@0.19.0': {}
+  '@humanfs/core@0.19.1': {}
 
-  '@humanfs/node@0.16.5':
+  '@humanfs/node@0.16.7':
     dependencies:
-      '@humanfs/core': 0.19.0
-      '@humanwhocodes/retry': 0.3.1
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/retry@0.3.1': {}
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@iconify-json/lucide@1.2.66':
+    dependencies:
+      '@iconify/types': 2.0.0
 
   '@iconify/json@2.2.380':
     dependencies:
@@ -8453,14 +8070,14 @@ snapshots:
       '@intlify/message-compiler': 9.14.3
       '@intlify/shared': 9.14.3
 
-  '@intlify/eslint-plugin-vue-i18n@3.2.0(eslint@9.12.0(jiti@2.4.2))':
+  '@intlify/eslint-plugin-vue-i18n@3.2.0(eslint@9.35.0(jiti@2.4.2))':
     dependencies:
       '@eslint/eslintrc': 3.1.0
       '@intlify/core-base': 9.14.3
       '@intlify/message-compiler': 9.14.3
       debug: 4.4.1
-      eslint: 9.12.0(jiti@2.4.2)
-      eslint-compat-utils: 0.6.5(eslint@9.12.0(jiti@2.4.2))
+      eslint: 9.35.0(jiti@2.4.2)
+      eslint-compat-utils: 0.6.5(eslint@9.35.0(jiti@2.4.2))
       glob: 10.4.5
       globals: 15.15.0
       ignore: 6.0.2
@@ -8473,7 +8090,7 @@ snapshots:
       parse5: 7.1.2
       semver: 7.7.2
       synckit: 0.9.3
-      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.4.2))
+      vue-eslint-parser: 9.4.3(eslint@9.35.0(jiti@2.4.2))
       yaml-eslint-parser: 1.3.0
     transitivePeerDependencies:
       - supports-color
@@ -8540,6 +8157,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kurkle/color@0.3.4': {}
+
   '@lobehub/cli-ui@1.13.0(@types/react@19.1.9)':
     dependencies:
       arr-rotate: 1.0.0
@@ -8643,21 +8262,6 @@ snapshots:
 
   '@microsoft/tsdoc@0.15.1': {}
 
-  '@modelcontextprotocol/sdk@1.11.1':
-    dependencies:
-      content-type: 1.0.5
-      cors: 2.8.5
-      cross-spawn: 7.0.6
-      eventsource: 3.0.7
-      express: 5.1.0
-      express-rate-limit: 7.5.1(express@5.1.0)
-      pkce-challenge: 5.0.0
-      raw-body: 3.0.0
-      zod: 3.24.1
-      zod-to-json-schema: 3.24.1(zod@3.24.1)
-    transitivePeerDependencies:
-      - supports-color
-
   '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
       '@emnapi/core': 1.4.5
@@ -8683,10 +8287,10 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@nx/cypress@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)':
+  '@nx/cypress@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)':
     dependencies:
       '@nx/devkit': 21.4.1(nx@21.4.1)
-      '@nx/eslint': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)
+      '@nx/eslint': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.9.2)
       detect-port: 1.6.1
@@ -8717,11 +8321,11 @@ snapshots:
       tslib: 2.8.1
       yargs-parser: 21.1.1
 
-  '@nx/eslint@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)':
+  '@nx/eslint@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)':
     dependencies:
       '@nx/devkit': 21.4.1(nx@21.4.1)
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
       semver: 7.7.2
       tslib: 2.8.1
       typescript: 5.8.3
@@ -8805,10 +8409,10 @@ snapshots:
   '@nx/nx-win32-x64-msvc@21.4.1':
     optional: true
 
-  '@nx/playwright@21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)':
+  '@nx/playwright@21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)':
     dependencies:
       '@nx/devkit': 21.4.1(nx@21.4.1)
-      '@nx/eslint': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)
+      '@nx/eslint': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.9.2)
       minimatch: 9.0.3
@@ -8827,11 +8431,11 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)':
+  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)':
     dependencies:
-      '@nx/cypress': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
+      '@nx/cypress': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/devkit': 21.4.1(nx@21.4.1)
-      '@nx/eslint': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.12.0(jiti@2.4.2))(nx@21.4.1)
+      '@nx/eslint': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.9.2)
       semver: 7.7.2
@@ -8891,8 +8495,6 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
-  '@opentelemetry/api@1.9.0': {}
-
   '@oxc-resolver/binding-android-arm-eabi@11.6.1':
     optional: true
 
@@ -8972,26 +8574,10 @@ snapshots:
 
   '@pkgr/core@0.2.2': {}
 
-  '@playwright/browser-chromium@1.53.1':
-    dependencies:
-      playwright-core: 1.53.1
-
-  '@playwright/browser-firefox@1.53.1':
-    dependencies:
-      playwright-core: 1.53.1
-
-  '@playwright/browser-webkit@1.53.1':
-    dependencies:
-      playwright-core: 1.53.1
-
   '@playwright/test@1.52.0':
     dependencies:
       playwright: 1.52.0
 
-  '@playwright/test@1.55.0':
-    dependencies:
-      playwright: 1.55.0
-
   '@pnpm/config.env-replace@1.1.0': {}
 
   '@pnpm/network.ca-file@1.0.2':
@@ -9337,7 +8923,7 @@ snapshots:
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.3
+      '@babel/runtime': 7.28.4
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -9555,8 +9141,6 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
-  '@types/estree@1.0.6': {}
-
   '@types/estree@1.0.8': {}
 
   '@types/fs-extra@11.0.4':
@@ -9645,33 +9229,31 @@ snapshots:
 
   '@types/webxr@0.5.20': {}
 
-  '@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.0
-      '@typescript-eslint/parser': 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/scope-manager': 8.0.0
-      '@typescript-eslint/type-utils': 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.0.0
-      eslint: 9.12.0(jiti@2.4.2)
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.42.0
+      '@typescript-eslint/type-utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.42.0
+      eslint: 9.35.0(jiti@2.4.2)
       graphemer: 1.4.0
-      ignore: 5.3.1
+      ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.9.2)
-    optionalDependencies:
+      ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.0.0
-      '@typescript-eslint/types': 8.0.0
-      '@typescript-eslint/typescript-estree': 8.0.0(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.0.0
+      '@typescript-eslint/scope-manager': 8.42.0
+      '@typescript-eslint/types': 8.42.0
+      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.42.0
       debug: 4.4.1
-      eslint: 9.12.0(jiti@2.4.2)
-    optionalDependencies:
+      eslint: 9.35.0(jiti@2.4.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -9685,50 +9267,48 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.0.0':
+  '@typescript-eslint/project-service@8.42.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/types': 8.0.0
-      '@typescript-eslint/visitor-keys': 8.0.0
+      '@typescript-eslint/tsconfig-utils': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.42.0
+      debug: 4.4.1
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@typescript-eslint/scope-manager@8.39.0':
     dependencies:
       '@typescript-eslint/types': 8.39.0
       '@typescript-eslint/visitor-keys': 8.39.0
 
+  '@typescript-eslint/scope-manager@8.42.0':
+    dependencies:
+      '@typescript-eslint/types': 8.42.0
+      '@typescript-eslint/visitor-keys': 8.42.0
+
   '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.9.2)':
     dependencies:
       typescript: 5.9.2
 
-  '@typescript-eslint/type-utils@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/tsconfig-utils@8.42.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.0.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
+      typescript: 5.9.2
+
+  '@typescript-eslint/type-utils@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.42.0
+      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       debug: 4.4.1
-      ts-api-utils: 1.3.0(typescript@5.9.2)
-    optionalDependencies:
+      eslint: 9.35.0(jiti@2.4.2)
+      ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
     transitivePeerDependencies:
-      - eslint
       - supports-color
 
-  '@typescript-eslint/types@8.0.0': {}
-
   '@typescript-eslint/types@8.39.0': {}
 
-  '@typescript-eslint/typescript-estree@8.0.0(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/types': 8.0.0
-      '@typescript-eslint/visitor-keys': 8.0.0
-      debug: 4.4.1
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.2
-      ts-api-utils: 1.3.0(typescript@5.9.2)
-    optionalDependencies:
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
+  '@typescript-eslint/types@8.42.0': {}
 
   '@typescript-eslint/typescript-estree@8.39.0(typescript@5.9.2)':
     dependencies:
@@ -9746,38 +9326,54 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/typescript-estree@8.42.0(typescript@5.9.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.12.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.0.0
-      '@typescript-eslint/types': 8.0.0
-      '@typescript-eslint/typescript-estree': 8.0.0(typescript@5.9.2)
-      eslint: 9.12.0(jiti@2.4.2)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@typescript-eslint/utils@8.39.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.12.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      eslint: 9.12.0(jiti@2.4.2)
+      '@typescript-eslint/project-service': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.42.0
+      '@typescript-eslint/visitor-keys': 8.42.0
+      debug: 4.4.1
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.2
+      ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.0.0':
+  '@typescript-eslint/utils@8.39.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/types': 8.0.0
-      eslint-visitor-keys: 3.4.3
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.35.0(jiti@2.4.2))
+      '@typescript-eslint/scope-manager': 8.39.0
+      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.4.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.8.0(eslint@9.35.0(jiti@2.4.2))
+      '@typescript-eslint/scope-manager': 8.42.0
+      '@typescript-eslint/types': 8.42.0
+      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.4.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@typescript-eslint/visitor-keys@8.39.0':
     dependencies:
       '@typescript-eslint/types': 8.39.0
       eslint-visitor-keys: 4.2.1
 
+  '@typescript-eslint/visitor-keys@8.42.0':
+    dependencies:
+      '@typescript-eslint/types': 8.42.0
+      eslint-visitor-keys: 4.2.1
+
   '@vitejs/plugin-vue@5.1.4(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
@@ -10077,19 +9673,20 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  accepts@2.0.0:
-    dependencies:
-      mime-types: 3.0.1
-      negotiator: 1.0.0
-
   acorn-jsx@5.3.2(acorn@8.14.1):
     dependencies:
       acorn: 8.14.1
 
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
   acorn@7.4.1: {}
 
   acorn@8.14.1: {}
 
+  acorn@8.15.0: {}
+
   address@1.2.2: {}
 
   agent-base@7.1.4: {}
@@ -10098,18 +9695,6 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
-  ai@4.3.19(react@19.1.1)(zod@3.24.1):
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.1)
-      '@ai-sdk/react': 1.2.12(react@19.1.1)(zod@3.24.1)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.1)
-      '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
-      zod: 3.24.1
-    optionalDependencies:
-      react: 19.1.1
-
   ajv-draft-04@1.0.0(ajv@8.13.0):
     optionalDependencies:
       ajv: 8.13.0
@@ -10211,8 +9796,6 @@ snapshots:
 
   arr-rotate@1.0.0: {}
 
-  array-union@2.1.0: {}
-
   asap@2.0.6: {}
 
   assert-never@1.4.0: {}
@@ -10307,8 +9890,6 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  base-64@0.1.0: {}
-
   base64-js@1.5.1: {}
 
   better-opn@3.0.2:
@@ -10327,20 +9908,6 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  body-parser@2.2.0:
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 4.4.1
-      http-errors: 2.0.0
-      iconv-lite: 0.6.3
-      on-finished: 2.4.1
-      qs: 6.14.0
-      raw-body: 3.0.0
-      type-is: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
   boolbase@1.0.0: {}
 
   boxen@8.0.1:
@@ -10392,8 +9959,6 @@ snapshots:
     dependencies:
       run-applescript: 7.0.0
 
-  bytes@3.1.2: {}
-
   cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
@@ -10449,7 +10014,9 @@ snapshots:
     dependencies:
       is-regex: 1.2.1
 
-  charenc@0.0.2: {}
+  chart.js@4.5.0:
+    dependencies:
+      '@kurkle/color': 0.3.4
 
   check-error@2.1.1: {}
 
@@ -10500,6 +10067,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clsx@2.1.1: {}
+
   code-excerpt@4.0.0:
     dependencies:
       convert-to-spaces: 2.0.1
@@ -10576,20 +10145,10 @@ snapshots:
       '@babel/parser': 7.28.3
       '@babel/types': 7.28.2
 
-  content-disposition@1.0.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
-  content-type@1.0.5: {}
-
   convert-source-map@2.0.0: {}
 
   convert-to-spaces@2.0.1: {}
 
-  cookie-signature@1.2.2: {}
-
-  cookie@0.7.2: {}
-
   copy-anything@3.0.5:
     dependencies:
       is-what: 4.1.16
@@ -10600,11 +10159,6 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cors@2.8.5:
-    dependencies:
-      object-assign: 4.1.1
-      vary: 1.1.2
-
   cosmiconfig@7.1.0:
     dependencies:
       '@types/parse-json': 4.0.2
@@ -10630,8 +10184,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crypt@0.0.2: {}
-
   css-select@4.3.0:
     dependencies:
       boolbase: 1.0.0
@@ -10709,8 +10261,6 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
-  depd@2.0.0: {}
-
   dequal@2.0.3: {}
 
   detect-libc@2.0.4: {}
@@ -10728,15 +10278,6 @@ snapshots:
 
   diff-match-patch@1.0.5: {}
 
-  digest-fetch@1.3.0:
-    dependencies:
-      base-64: 0.1.0
-      md5: 2.3.0
-
-  dir-glob@3.0.1:
-    dependencies:
-      path-type: 4.0.0
-
   dirty-json@0.9.2:
     dependencies:
       lex: 1.7.9
@@ -10805,8 +10346,6 @@ snapshots:
       minimatch: 9.0.1
       semver: 7.7.2
 
-  ee-first@1.1.1: {}
-
   ejs@3.1.10:
     dependencies:
       jake: 10.9.2
@@ -10819,8 +10358,6 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
-  encodeurl@2.0.0: {}
-
   end-of-stream@1.4.5:
     dependencies:
       once: 1.4.0
@@ -10938,8 +10475,6 @@ snapshots:
 
   escape-goat@4.0.0: {}
 
-  escape-html@1.0.3: {}
-
   escape-string-regexp@1.0.5: {}
 
   escape-string-regexp@2.0.0: {}
@@ -10948,49 +10483,49 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.6.5(eslint@9.12.0(jiti@2.4.2)):
+  eslint-compat-utils@0.6.5(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
       semver: 7.7.2
 
-  eslint-config-prettier@10.1.2(eslint@9.12.0(jiti@2.4.2)):
+  eslint-config-prettier@10.1.2(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
 
-  eslint-plugin-prettier@5.2.6(eslint-config-prettier@10.1.2(eslint@9.12.0(jiti@2.4.2)))(eslint@9.12.0(jiti@2.4.2))(prettier@3.3.2):
+  eslint-plugin-prettier@5.2.6(eslint-config-prettier@10.1.2(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2):
     dependencies:
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
       prettier: 3.3.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.3
     optionalDependencies:
-      eslint-config-prettier: 10.1.2(eslint@9.12.0(jiti@2.4.2))
+      eslint-config-prettier: 10.1.2(eslint@9.35.0(jiti@2.4.2))
 
-  eslint-plugin-storybook@9.1.1(eslint@9.12.0(jiti@2.4.2))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2):
+  eslint-plugin-storybook@9.1.1(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/utils': 8.39.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-      eslint: 9.12.0(jiti@2.4.2)
+      '@typescript-eslint/utils': 8.39.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.4.2)
       storybook: 9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
 
-  eslint-plugin-vue@9.27.0(eslint@9.12.0(jiti@2.4.2)):
+  eslint-plugin-vue@9.27.0(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.12.0(jiti@2.4.2))
-      eslint: 9.12.0(jiti@2.4.2)
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.35.0(jiti@2.4.2))
+      eslint: 9.35.0(jiti@2.4.2)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.0
       semver: 7.7.2
-      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.4.2))
+      vue-eslint-parser: 9.4.3(eslint@9.35.0(jiti@2.4.2))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -11000,7 +10535,7 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.1.0:
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
@@ -11009,28 +10544,29 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.12.0(jiti@2.4.2):
+  eslint@9.35.0(jiti@2.4.2):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.12.0(jiti@2.4.2))
-      '@eslint-community/regexpp': 4.11.0
-      '@eslint/config-array': 0.18.0
-      '@eslint/core': 0.6.0
-      '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.12.0
-      '@eslint/plugin-kit': 0.2.3
-      '@humanfs/node': 0.16.5
+      '@eslint-community/eslint-utils': 4.8.0(eslint@9.35.0(jiti@2.4.2))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.21.0
+      '@eslint/config-helpers': 0.3.1
+      '@eslint/core': 0.15.2
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.35.0
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.1
-      '@types/estree': 1.0.6
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.1
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.1.0
+      eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
-      espree: 10.2.0
+      espree: 10.4.0
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -11045,7 +10581,6 @@ snapshots:
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      text-table: 0.2.0
     optionalDependencies:
       jiti: 2.4.2
     transitivePeerDependencies:
@@ -11059,6 +10594,12 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.14.1)
       eslint-visitor-keys: 4.2.1
 
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
   espree@9.6.1:
     dependencies:
       acorn: 8.14.1
@@ -11085,18 +10626,10 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  etag@1.8.1: {}
-
   event-target-shim@5.0.1: {}
 
   eventemitter3@5.0.1: {}
 
-  eventsource-parser@3.0.5: {}
-
-  eventsource@3.0.7:
-    dependencies:
-      eventsource-parser: 3.0.5
-
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -11126,42 +10659,6 @@ snapshots:
 
   expect-type@1.2.2: {}
 
-  express-rate-limit@7.5.1(express@5.1.0):
-    dependencies:
-      express: 5.1.0
-
-  express@5.1.0:
-    dependencies:
-      accepts: 2.0.0
-      body-parser: 2.2.0
-      content-disposition: 1.0.0
-      content-type: 1.0.5
-      cookie: 0.7.2
-      cookie-signature: 1.2.2
-      debug: 4.4.1
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 2.1.0
-      fresh: 2.0.0
-      http-errors: 2.0.0
-      merge-descriptors: 2.0.0
-      mime-types: 3.0.1
-      on-finished: 2.4.1
-      once: 1.4.0
-      parseurl: 1.3.3
-      proxy-addr: 2.0.7
-      qs: 6.14.0
-      range-parser: 1.2.1
-      router: 2.2.0
-      send: 1.2.0
-      serve-static: 2.2.0
-      statuses: 2.0.2
-      type-is: 2.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   exsolve@1.0.7: {}
 
   extend-shallow@2.0.1:
@@ -11265,17 +10762,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  finalhandler@2.1.0:
-    dependencies:
-      debug: 4.4.1
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   find-package-json@1.2.0: {}
 
   find-up@5.0.0:
@@ -11318,13 +10804,11 @@ snapshots:
 
   flat-cache@4.0.1:
     dependencies:
-      flatted: 3.3.1
+      flatted: 3.3.3
       keyv: 4.5.4
 
   flat@5.0.2: {}
 
-  flatted@3.3.1: {}
-
   flatted@3.3.3: {}
 
   follow-redirects@1.15.6: {}
@@ -11360,10 +10844,6 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 4.0.0-beta.3
 
-  forwarded@0.2.0: {}
-
-  fresh@2.0.0: {}
-
   front-matter@4.0.2:
     dependencies:
       js-yaml: 3.14.1
@@ -11471,15 +10951,6 @@ snapshots:
 
   globals@15.15.0: {}
 
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.3
-      ignore: 5.3.1
-      merge2: 1.4.1
-      slash: 3.0.0
-
   gopd@1.2.0: {}
 
   gpt-tokenizer@2.9.0: {}
@@ -11545,14 +11016,6 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.39.2
 
-  http-errors@2.0.0:
-    dependencies:
-      depd: 2.0.0
-      inherits: 2.0.4
-      setprototypeof: 1.2.0
-      statuses: 2.0.1
-      toidentifier: 1.0.1
-
   http-parser-js@0.5.10: {}
 
   http-proxy-agent@7.0.2:
@@ -11591,6 +11054,8 @@ snapshots:
 
   ignore@6.0.2: {}
 
+  ignore@7.0.5: {}
+
   immediate@3.0.6: {}
 
   import-fresh@3.3.0:
@@ -11650,16 +11115,12 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  ipaddr.js@1.9.1: {}
-
   is-arrayish@0.2.1: {}
 
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
 
-  is-buffer@1.1.6: {}
-
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
@@ -11720,8 +11181,6 @@ snapshots:
 
   is-promise@2.2.2: {}
 
-  is-promise@4.0.0: {}
-
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -11753,6 +11212,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  isomorphic.js@0.2.5: {}
+
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-report@3.0.1:
@@ -11872,8 +11333,6 @@ snapshots:
 
   json-schema-typed@8.0.1: {}
 
-  json-schema@0.4.0: {}
-
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json-stable-stringify@1.3.0:
@@ -11966,6 +11425,10 @@ snapshots:
 
   lex@1.7.9: {}
 
+  lib0@0.2.114:
+    dependencies:
+      isomorphic.js: 0.2.5
+
   lie@3.3.0:
     dependencies:
       immediate: 3.0.6
@@ -12117,10 +11580,6 @@ snapshots:
 
   lru-cache@8.0.5: {}
 
-  lucide-vue-next@0.540.0(vue@3.5.13(typescript@5.9.2)):
-    dependencies:
-      vue: 3.5.13(typescript@5.9.2)
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.17:
@@ -12158,30 +11617,6 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mcp-evals@1.0.18(react@19.1.1)(ws@8.18.3)(zod@3.24.1):
-    dependencies:
-      '@actions/core': 1.11.1
-      '@ai-sdk/openai': 1.3.24(zod@3.24.1)
-      '@anthropic-ai/sdk': 0.8.1
-      '@modelcontextprotocol/sdk': 1.11.1
-      ai: 4.3.19(react@19.1.1)(zod@3.24.1)
-      chalk: 4.1.2
-      dotenv: 16.4.5
-      openai: 4.104.0(ws@8.18.3)(zod@3.24.1)
-      react: 19.1.1
-      tsx: 4.19.4
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-      - ws
-      - zod
-
-  md5@2.3.0:
-    dependencies:
-      charenc: 0.0.2
-      crypt: 0.0.2
-      is-buffer: 1.1.6
-
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -12319,10 +11754,6 @@ snapshots:
       media-encoder-host-worker: 10.0.19
       tslib: 2.8.1
 
-  media-typer@1.1.0: {}
-
-  merge-descriptors@2.0.0: {}
-
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -12534,16 +11965,10 @@ snapshots:
 
   mime-db@1.52.0: {}
 
-  mime-db@1.54.0: {}
-
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
 
-  mime-types@3.0.1:
-    dependencies:
-      mime-db: 1.54.0
-
   mimic-fn@2.1.0: {}
 
   mimic-fn@4.0.0: {}
@@ -12610,8 +12035,6 @@ snapshots:
       '@babel/runtime': 7.27.6
       tslib: 2.8.1
 
-  nanoid@3.3.11: {}
-
   nanoid@3.3.8: {}
 
   nanoid@5.1.5: {}
@@ -12620,8 +12043,6 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  negotiator@1.0.0: {}
-
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -12727,14 +12148,8 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-inspect@1.13.4: {}
-
   object-keys@1.1.1: {}
 
-  on-finished@2.4.1:
-    dependencies:
-      ee-first: 1.1.1
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -12876,8 +12291,6 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
-  parseurl@1.3.3: {}
-
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
@@ -12905,8 +12318,6 @@ snapshots:
       lru-cache: 11.1.0
       minipass: 7.1.2
 
-  path-to-regexp@8.2.0: {}
-
   path-type@4.0.0: {}
 
   pathe@0.2.0: {}
@@ -12937,8 +12348,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.2
 
-  pkce-challenge@5.0.0: {}
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -12953,28 +12362,12 @@ snapshots:
 
   playwright-core@1.52.0: {}
 
-  playwright-core@1.53.1: {}
-
-  playwright-core@1.55.0: {}
-
   playwright@1.52.0:
     dependencies:
       playwright-core: 1.52.0
     optionalDependencies:
       fsevents: 2.3.2
 
-  playwright@1.53.1:
-    dependencies:
-      playwright-core: 1.53.1
-    optionalDependencies:
-      fsevents: 2.3.2
-
-  playwright@1.55.0:
-    dependencies:
-      playwright-core: 1.55.0
-    optionalDependencies:
-      fsevents: 2.3.2
-
   postcss-selector-parser@6.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -13149,11 +12542,6 @@ snapshots:
       '@types/node': 20.14.10
       long: 5.3.1
 
-  proxy-addr@2.0.7:
-    dependencies:
-      forwarded: 0.2.0
-      ipaddr.js: 1.9.1
-
   proxy-from-env@1.1.0: {}
 
   pug-attrs@3.0.0:
@@ -13231,25 +12619,12 @@ snapshots:
     dependencies:
       escape-goat: 4.0.0
 
-  qs@6.14.0:
-    dependencies:
-      side-channel: 1.1.0
-
   quansync@0.2.11: {}
 
   queue-microtask@1.2.3: {}
 
   raf-schd@4.0.3: {}
 
-  range-parser@1.2.1: {}
-
-  raw-body@3.0.0:
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.0
-      iconv-lite: 0.6.3
-      unpipe: 1.0.0
-
   rc@1.2.8:
     dependencies:
       deep-extend: 0.6.0
@@ -13448,16 +12823,6 @@ snapshots:
 
   rope-sequence@1.3.4: {}
 
-  router@2.2.0:
-    dependencies:
-      debug: 4.4.1
-      depd: 2.0.0
-      is-promise: 4.0.0
-      parseurl: 1.3.3
-      path-to-regexp: 8.2.0
-    transitivePeerDependencies:
-      - supports-color
-
   rrweb-cssom@0.8.0: {}
 
   run-applescript@7.0.0: {}
@@ -13485,8 +12850,6 @@ snapshots:
       extend-shallow: 2.0.1
       kind-of: 6.0.3
 
-  secure-json-parse@2.7.0: {}
-
   semver@6.3.1: {}
 
   semver@7.5.4:
@@ -13495,31 +12858,6 @@ snapshots:
 
   semver@7.7.2: {}
 
-  send@1.2.0:
-    dependencies:
-      debug: 4.4.1
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      fresh: 2.0.0
-      http-errors: 2.0.0
-      mime-types: 3.0.1
-      ms: 2.1.3
-      on-finished: 2.4.1
-      range-parser: 1.2.1
-      statuses: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  serve-static@2.2.0:
-    dependencies:
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      parseurl: 1.3.3
-      send: 1.2.0
-    transitivePeerDependencies:
-      - supports-color
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -13531,42 +12869,12 @@ snapshots:
 
   setimmediate@1.0.5: {}
 
-  setprototypeof@1.2.0: {}
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
-  side-channel-list@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-map@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-weakmap@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-map: 1.0.1
-
-  side-channel@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-list: 1.0.0
-      side-channel-map: 1.0.1
-      side-channel-weakmap: 1.0.2
-
   siginfo@2.0.0: {}
 
   signal-exit@3.0.7: {}
@@ -13579,8 +12887,6 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
-  slash@3.0.0: {}
-
   slice-ansi@5.0.0:
     dependencies:
       ansi-styles: 6.2.1
@@ -13623,10 +12929,6 @@ snapshots:
       automation-events: 7.1.11
       tslib: 2.8.1
 
-  statuses@2.0.1: {}
-
-  statuses@2.0.2: {}
-
   std-env@3.9.0: {}
 
   storybook@9.1.1(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
@@ -13749,6 +13051,8 @@ snapshots:
       '@pkgr/core': 0.1.2
       tslib: 2.8.1
 
+  tailwind-merge@3.3.1: {}
+
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
     dependencies:
       tailwindcss: 4.1.12
@@ -13787,12 +13091,8 @@ snapshots:
       glob: 10.4.5
       minimatch: 9.0.5
 
-  text-table@0.2.0: {}
-
   three@0.170.0: {}
 
-  throttleit@2.1.0: {}
-
   tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
@@ -13832,8 +13132,6 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  toidentifier@1.0.1: {}
-
   token-stream@1.0.0: {}
 
   totalist@3.0.1: {}
@@ -13852,10 +13150,6 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-api-utils@1.3.0(typescript@5.9.2):
-    dependencies:
-      typescript: 5.9.2
-
   ts-api-utils@2.1.0(typescript@5.9.2):
     dependencies:
       typescript: 5.9.2
@@ -13879,8 +13173,6 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  tunnel@0.0.6: {}
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -13891,21 +13183,15 @@ snapshots:
 
   type-fest@4.41.0: {}
 
-  type-is@2.0.1:
+  typescript-eslint@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
     dependencies:
-      content-type: 1.0.5
-      media-typer: 1.1.0
-      mime-types: 3.0.1
-
-  typescript-eslint@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2):
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.0.0(@typescript-eslint/parser@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2)
-    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.4.2)
       typescript: 5.9.2
     transitivePeerDependencies:
-      - eslint
       - supports-color
 
   typescript@5.4.2: {}
@@ -13922,10 +13208,6 @@ snapshots:
 
   undici-types@5.26.5: {}
 
-  undici@5.29.0:
-    dependencies:
-      '@fastify/busboy': 2.1.1
-
   unescape-js@1.1.4:
     dependencies:
       string.fromcodepoint: 0.2.1
@@ -13976,8 +13258,6 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unpipe@1.0.0: {}
-
   unplugin-icons@0.22.0(@vue/compiler-sfc@3.5.13):
     dependencies:
       '@antfu/install-pkg': 0.5.0
@@ -14057,8 +13337,6 @@ snapshots:
 
   validate-npm-package-name@5.0.1: {}
 
-  vary@1.1.2: {}
-
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -14263,10 +13541,10 @@ snapshots:
       vue: 3.5.13(typescript@5.9.2)
       vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.5.13(typescript@5.9.2))
 
-  vue-eslint-parser@9.4.3(eslint@9.12.0(jiti@2.4.2)):
+  vue-eslint-parser@9.4.3(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       debug: 4.4.1
-      eslint: 9.12.0(jiti@2.4.2)
+      eslint: 9.35.0(jiti@2.4.2)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -14329,8 +13607,6 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
-  web-streams-polyfill@3.3.3: {}
-
   web-streams-polyfill@4.0.0-beta.3: {}
 
   web-vitals@4.2.4: {}
@@ -14460,6 +13736,10 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
+  yjs@13.6.27:
+    dependencies:
+      lib0: 0.2.114
+
   yocto-queue@0.1.0: {}
 
   yoctocolors@2.1.1: {}
diff --git a/scripts/cicd/pr-playwright-deploy-and-comment.sh b/scripts/cicd/pr-playwright-deploy-and-comment.sh
new file mode 100755
index 000000000..767a7f514
--- /dev/null
+++ b/scripts/cicd/pr-playwright-deploy-and-comment.sh
@@ -0,0 +1,241 @@
+#!/bin/bash
+set -e
+
+# Deploy Playwright test reports to Cloudflare Pages and comment on PR
+# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
+
+# Input validation
+# Validate PR number is numeric
+case "$1" in
+    ''|*[!0-9]*) 
+        echo "Error: PR_NUMBER must be numeric" >&2
+        exit 1
+        ;;
+esac
+PR_NUMBER="$1"
+
+# Sanitize and validate branch name (allow alphanumeric, dots, dashes, underscores, slashes)
+BRANCH_NAME=$(echo "$2" | sed 's/[^a-zA-Z0-9._/-]//g')
+if [ -z "$BRANCH_NAME" ]; then
+    echo "Error: Invalid or empty branch name" >&2
+    exit 1
+fi
+
+# Validate status parameter
+STATUS="${3:-completed}"
+case "$STATUS" in
+    starting|completed) ;;
+    *) 
+        echo "Error: STATUS must be 'starting' or 'completed'" >&2
+        exit 1
+        ;;
+esac
+
+START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
+
+# Required environment variables
+: "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
+: "${GITHUB_REPOSITORY:?GITHUB_REPOSITORY is required}"
+
+# Cloudflare variables only required for deployment
+if [ "$STATUS" = "completed" ]; then
+    : "${CLOUDFLARE_API_TOKEN:?CLOUDFLARE_API_TOKEN is required for deployment}"
+    : "${CLOUDFLARE_ACCOUNT_ID:?CLOUDFLARE_ACCOUNT_ID is required for deployment}"
+fi
+
+# Configuration
+COMMENT_MARKER="<!-- PLAYWRIGHT_TEST_STATUS -->"
+# Use dot notation for artifact names (as Playwright creates them)
+BROWSERS="chromium chromium-2x chromium-0.5x mobile-chrome"
+
+# Install wrangler if not available (output to stderr for debugging)
+if ! command -v wrangler > /dev/null 2>&1; then
+    echo "Installing wrangler v4..." >&2
+    npm install -g wrangler@^4.0.0 >&2 || {
+        echo "Failed to install wrangler" >&2
+        echo "failed"
+        return
+    }
+fi
+
+# Deploy a single browser report, WARN: ensure inputs are sanitized before calling this function
+deploy_report() {
+    dir="$1"
+    browser="$2"
+    branch="$3"
+    
+    [ ! -d "$dir" ] && echo "failed" && return
+    
+    
+    # Project name with dots converted to dashes for Cloudflare
+    sanitized_browser=$(echo "$browser" | sed 's/\./-/g')
+    project="comfyui-playwright-${sanitized_browser}"
+    
+    echo "Deploying $browser to project $project on branch $branch..." >&2
+    
+    # Try deployment up to 3 times
+    i=1
+    while [ $i -le 3 ]; do
+        echo "Deployment attempt $i of 3..." >&2
+        # Branch and project are already sanitized, use them directly
+        # Branch was sanitized at script start, project uses sanitized_browser
+        if output=$(wrangler pages deploy "$dir" \
+            --project-name="$project" \
+            --branch="$branch" 2>&1); then
+            
+            # Extract URL from output (improved regex for valid URL characters)
+            url=$(echo "$output" | grep -oE 'https://[a-zA-Z0-9.-]+\.pages\.dev\S*' | head -1)
+            result="${url:-https://${branch}.${project}.pages.dev}"
+            echo "Success! URL: $result" >&2
+            echo "$result"  # Only this goes to stdout for capture
+            return
+        else
+            echo "Deployment failed on attempt $i: $output" >&2
+        fi
+        [ $i -lt 3 ] && sleep 10
+        i=$((i + 1))
+    done
+    
+    echo "failed"
+}
+
+# Post or update GitHub comment
+post_comment() {
+    body="$1"
+    temp_file=$(mktemp)
+    echo "$body" > "$temp_file"
+    
+    if command -v gh > /dev/null 2>&1; then
+        # Find existing comment ID
+        existing=$(gh api "repos/$GITHUB_REPOSITORY/issues/$PR_NUMBER/comments" \
+            --jq ".[] | select(.body | contains(\"$COMMENT_MARKER\")) | .id" | head -1)
+        
+        if [ -n "$existing" ]; then
+            # Update specific comment by ID
+            gh api --method PATCH "repos/$GITHUB_REPOSITORY/issues/comments/$existing" \
+                --field body="$(cat "$temp_file")"
+        else
+            # Create new comment
+            gh pr comment "$PR_NUMBER" --body-file "$temp_file"
+        fi
+    else
+        echo "GitHub CLI not available, outputting comment:"
+        cat "$temp_file"
+    fi
+    
+    rm -f "$temp_file"
+}
+
+# Main execution
+if [ "$STATUS" = "starting" ]; then
+    # Post starting comment
+    comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎭 Playwright Test Results
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Tests are starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Running Tests
+- 🧪 **chromium**: Running tests...
+- 🧪 **chromium-0.5x**: Running tests...
+- 🧪 **chromium-2x**: Running tests...
+- 🧪 **mobile-chrome**: Running tests...
+
+---
+⏱️ Please wait while tests are running...
+EOF
+)
+    post_comment "$comment"
+    
+else
+    # Deploy and post completion comment
+    # Convert branch name to Cloudflare-compatible format (lowercase, only alphanumeric and dashes)
+    cloudflare_branch=$(echo "$BRANCH_NAME" | tr '[:upper:]' '[:lower:]' | \
+        sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
+    
+    echo "Looking for reports in: $(pwd)/reports"
+    echo "Available reports:"
+    ls -la reports/ 2>/dev/null || echo "Reports directory not found"
+    
+    # Deploy all reports in parallel and collect URLs
+    temp_dir=$(mktemp -d)
+    pids=""
+    i=0
+    
+    # Start parallel deployments
+    for browser in $BROWSERS; do
+        if [ -d "reports/playwright-report-$browser" ]; then
+            echo "Found report for $browser, deploying in parallel..."
+            (
+                url=$(deploy_report "reports/playwright-report-$browser" "$browser" "$cloudflare_branch")
+                echo "$url" > "$temp_dir/$i.url"
+                echo "Deployment result for $browser: $url"
+            ) &
+            pids="$pids $!"
+        else
+            echo "Report not found for $browser at reports/playwright-report-$browser"
+            echo "failed" > "$temp_dir/$i.url"
+        fi
+        i=$((i + 1))
+    done
+    
+    # Wait for all deployments to complete
+    for pid in $pids; do
+        wait $pid
+    done
+    
+    # Collect URLs in order
+    urls=""
+    i=0
+    for browser in $BROWSERS; do
+        if [ -f "$temp_dir/$i.url" ]; then
+            url=$(cat "$temp_dir/$i.url")
+        else
+            url="failed"
+        fi
+        if [ -z "$urls" ]; then
+            urls="$url"
+        else
+            urls="$urls $url"
+        fi
+        i=$((i + 1))
+    done
+    
+    # Clean up temp directory
+    rm -rf "$temp_dir"
+    
+    # Generate completion comment
+    comment="$COMMENT_MARKER
+## 🎭 Playwright Test Results
+
+✅ **Tests completed successfully!**
+
+⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
+
+### 📊 Test Reports by Browser"
+    
+    # Add browser results
+    i=0
+    for browser in $BROWSERS; do
+        # Get URL at position i
+        url=$(echo "$urls" | cut -d' ' -f$((i + 1)))
+        
+        if [ "$url" != "failed" ] && [ -n "$url" ]; then
+            comment="$comment
+- ✅ **${browser}**: [View Report](${url})"
+        else
+            comment="$comment
+- ❌ **${browser}**: Deployment failed"
+        fi
+        i=$((i + 1))
+    done
+    
+    comment="$comment
+
+---
+🎉 Click on the links above to view detailed test results for each browser configuration."
+    
+    post_comment "$comment"
+fi
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 1a4068a27..5e183c430 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,10 +15,10 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
-import { useConflictDetection } from '@/composables/useConflictDetection'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import { useConflictDetection } from './composables/useConflictDetection'
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index dcf8e55fe..3258cbba5 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -29,7 +29,7 @@
   --content-fg: #000;
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
-  
+
   /* Code styling colors for help menu*/
   --code-text-color: rgba(0, 122, 255, 1);
   --code-bg-color: rgba(96, 165, 250, 0.2);
@@ -47,6 +47,91 @@
   }
 }
 
+@theme {
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: calc(1 / 0.625);
+
+  /* Palette Colors */
+  --color-charcoal-100: #171718;
+  --color-charcoal-200: #202121;
+  --color-charcoal-300: #262729;
+  --color-charcoal-400: #2d2e32;
+  --color-charcoal-500: #313235;
+  --color-charcoal-600: #3c3d42;
+  --color-charcoal-700: #494a50;
+  --color-charcoal-800: #55565e;
+
+  --color-stone-100: #444444;
+  --color-stone-200: #828282;
+  --color-stone-300: #bbbbbb;
+
+  --color-ivory-100: #fdfbfa;
+  --color-ivory-200: #faf9f5;
+  --color-ivory-300: #f0eee6;
+
+  --color-gray-100: #f3f3f3;
+  --color-gray-200: #e9e9e9;
+  --color-gray-300: #e1e1e1;
+  --color-gray-400: #d9d9d9;
+  --color-gray-500: #c5c5c5;
+  --color-gray-600: #b4b4b4;
+  --color-gray-700: #a0a0a0;
+  --color-gray-800: #8a8a8a;
+
+  --color-sand-100: #e1ded5;
+  --color-sand-200: #d6cfc2;
+  --color-sand-300: #888682;
+
+  --color-slate-100: #9c9eab;
+  --color-slate-200: #9fa2bd;
+  --color-slate-300: #5b5e7d;
+
+  --color-brand-yellow: #f0ff41;
+  --color-brand-blue: #172dd7;
+
+  --color-blue-100: #0b8ce9;
+  --color-blue-200: #31b9f4;
+  --color-success-100: #00cd72;
+  --color-success-200: #47e469;
+  --color-warning-100: #fd9903;
+  --color-warning-200: #fcbf64;
+  --color-danger-100: #c02323;
+  --color-danger-200: #d62952;
+
+  --color-error: #962a2a;
+
+  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
+  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
+
+  /* PrimeVue pulled colors */
+  --color-muted: var(--p-text-muted-color);
+  --color-highlight: var(--p-primary-color);
+
+  /* Special Colors (temporary) */
+  --color-dark-elevation-1.5: rgba(from white r g b/ 0.015);
+  --color-dark-elevation-2: rgba(from white r g b / 0.03);
+}
+
+@custom-variant dark-theme {
+  .dark-theme & {
+    @slot;
+  }
+}
+
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar { 
+    width: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+/* Everthing below here to be cleaned up over time. */
+
 body {
   width: 100vw;
   height: 100vh;
@@ -136,6 +221,188 @@ body {
   border: thin solid;
 }
 
+/* Shared markdown content styling for consistent rendering across components */
+.comfy-markdown-content {
+  /* Typography */
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.6;
+  word-wrap: break-word;
+}
+
+/* Headings */
+.comfy-markdown-content h1 {
+  font-size: 22px; /* text-[22px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h1:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h2 {
+  font-size: 18px; /* text-[18px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h2:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h3 {
+  font-size: 16px; /* text-[16px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h3:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h4,
+.comfy-markdown-content h5,
+.comfy-markdown-content h6 {
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h4:first-child,
+.comfy-markdown-content h5:first-child,
+.comfy-markdown-content h6:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+/* Paragraphs */
+.comfy-markdown-content p {
+  margin: 0 0 0.5em;
+}
+
+.comfy-markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* First child reset */
+.comfy-markdown-content *:first-child {
+  margin-top: 0; /* mt-0 */
+}
+
+/* Lists */
+.comfy-markdown-content ul,
+.comfy-markdown-content ol {
+  padding-left: 2rem; /* pl-8 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Nested lists */
+.comfy-markdown-content ul ul,
+.comfy-markdown-content ol ol,
+.comfy-markdown-content ul ol,
+.comfy-markdown-content ol ul {
+  padding-left: 1.5rem; /* pl-6 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+.comfy-markdown-content li {
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Code */
+.comfy-markdown-content code {
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */
+  font-family: monospace;
+}
+
+.comfy-markdown-content pre {
+  background-color: var(--code-block-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 1rem; /* p-4 */
+  margin: 1rem 0; /* my-4 */
+  overflow-x: auto; /* overflow-x-auto */
+}
+
+.comfy-markdown-content pre code {
+  background-color: transparent; /* bg-transparent */
+  padding: 0; /* p-0 */
+  color: var(--p-text-color);
+}
+
+/* Tables */
+.comfy-markdown-content table {
+  width: 100%; /* w-full */
+  border-collapse: collapse; /* border-collapse */
+}
+
+.comfy-markdown-content th,
+.comfy-markdown-content td {
+  padding: 0.5rem; /* px-2 py-2 */
+}
+
+.comfy-markdown-content th {
+  color: var(--fg-color);
+}
+
+.comfy-markdown-content td {
+  color: var(--drag-text);
+}
+
+.comfy-markdown-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.comfy-markdown-content tr:last-child {
+  border-bottom: none;
+}
+
+.comfy-markdown-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+
+/* Links */
+.comfy-markdown-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+/* Media */
+.comfy-markdown-content img,
+.comfy-markdown-content video {
+  max-width: 100%; /* max-w-full */
+  height: auto; /* h-auto */
+  display: block; /* block */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+/* Blockquotes */
+.comfy-markdown-content blockquote {
+  border-left: 3px solid var(--p-primary-color, var(--primary-bg));
+  padding-left: 0.75em;
+  margin: 0.5em 0;
+  opacity: 0.8;
+}
+
+/* Horizontal rule */
+.comfy-markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--p-border-color, var(--border-color));
+  margin: 1em 0;
+}
+
+/* Strong and emphasis */
+.comfy-markdown-content strong {
+  font-weight: bold;
+}
+
+.comfy-markdown-content em {
+  font-style: italic;
+}
+
 .comfy-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
@@ -607,7 +874,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d,
 .comfy-load-3d-animation,
 .comfy-preview-3d,
-.comfy-preview-3d-animation{
+.comfy-preview-3d-animation {
   display: flex;
   flex-direction: column;
   background: transparent;
@@ -620,7 +887,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
 .comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas{
+.comfy-load-3d-viewer canvas {
   display: flex;
   width: 100% !important;
   height: 100% !important;
@@ -641,3 +908,93 @@ audio.comfy-audio.empty-audio-widget {
   width: calc(100vw - env(titlebar-area-width, 100vw));
 }
 /* End of [Desktop] Electron window specific styles */
+
+/* Vue Node LOD (Level of Detail) System */
+/* These classes control rendering detail based on zoom level */
+
+/* Minimal LOD (zoom <= 0.4) - Title only for performance */
+.lg-node--lod-minimal {
+  min-height: 32px;
+  transition: min-height 0.2s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+  backdrop-filter: none;
+}
+
+.lg-node--lod-minimal .lg-node-body {
+  display: none !important;
+}
+
+/* Reduced LOD (0.4 < zoom <= 0.8) - Essential widgets, simplified styling */
+.lg-node--lod-reduced {
+  transition: opacity 0.1s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+}
+
+.lg-node--lod-reduced .lg-widget-label,
+.lg-node--lod-reduced .lg-slot-label {
+  display: none;
+}
+
+.lg-node--lod-reduced .lg-slot {
+  opacity: 0.6;
+  font-size: 0.75rem;
+}
+
+.lg-node--lod-reduced .lg-widget {
+  margin: 2px 0;
+  font-size: 0.875rem;
+}
+
+/* Full LOD (zoom > 0.8) - Complete detail rendering */
+.lg-node--lod-full {
+  /* Uses default styling - no overrides needed */
+}
+
+/* Smooth transitions between LOD levels */
+.lg-node {
+  transition: min-height 0.2s ease;
+  /* Disable text selection on all nodes */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.lg-node .lg-slot,
+.lg-node .lg-widget {
+  transition:
+    opacity 0.1s ease,
+    font-size 0.1s ease;
+}
+
+/* Performance optimization during canvas interaction */
+.transform-pane--interacting .lg-node * {
+  transition: none !important;
+}
+
+.transform-pane--interacting .lg-node {
+  will-change: transform;
+}
+
+/* Global performance optimizations for LOD */
+.lg-node--lod-minimal,
+.lg-node--lod-reduced {
+  /* Remove ALL expensive paint effects */
+  box-shadow: none !important;
+  filter: none !important;
+  backdrop-filter: none !important;
+  text-shadow: none !important;
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+  clip-path: none !important;
+}
+
+/* Reduce paint complexity for minimal LOD */
+.lg-node--lod-minimal {
+  /* Skip complex borders */
+  border-radius: 0 !important;
+  /* Use solid colors only */
+  background-image: none !important;
+}
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index af6324aa9..e710f6c82 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -40,6 +40,7 @@ import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbIt
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
 
@@ -52,6 +53,9 @@ const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
+const isBlueprint = computed(() =>
+  useSubgraphStore().isSubgraphBlueprint(workflowStore.activeWorkflow)
+)
 const collapseTabs = ref(false)
 const overflowingTabs = ref(false)
 
@@ -89,6 +93,7 @@ const home = computed(() => ({
   label: workflowName.value,
   icon: 'pi pi-home',
   key: 'root',
+  isBlueprint: isBlueprint.value,
   command: () => {
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index b980c0e2d..eb688dff6 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -16,6 +16,7 @@
     @click="handleClick"
   >
     <span class="p-breadcrumb-item-label">{{ item.label }}</span>
+    <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
   <Menu
@@ -48,6 +49,7 @@
 import InputText from 'primevue/inputtext'
 import Menu, { MenuState } from 'primevue/menu'
 import type { MenuItem } from 'primevue/menuitem'
+import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -121,7 +123,7 @@ const menuItems = computed<MenuItem[]>(() => {
       command: async () => {
         await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!)
       },
-      visible: isRoot
+      visible: isRoot && !props.item.isBlueprint
     },
     {
       separator: true,
@@ -153,12 +155,26 @@ const menuItems = computed<MenuItem[]>(() => {
         await useCommandStore().execute('Comfy.ClearWorkflow')
       }
     },
+    {
+      separator: true,
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      label: t('subgraphStore.publish'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!)
+      },
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
     {
       separator: true,
       visible: isRoot
     },
     {
-      label: t('breadcrumbsMenu.deleteWorkflow'),
+      label: props.item.isBlueprint
+        ? t('breadcrumbsMenu.deleteBlueprint')
+        : t('breadcrumbsMenu.deleteWorkflow'),
       icon: 'pi pi-times',
       command: async () => {
         await workflowService.deleteWorkflow(workflowStore.activeWorkflow!)
diff --git a/src/components/button/IconButton.stories.ts b/src/components/button/IconButton.stories.ts
index 7caf298e9..d774c0e5b 100644
--- a/src/components/button/IconButton.stories.ts
+++ b/src/components/button/IconButton.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { Bell, Download, Heart, Settings, Trophy, X } from 'lucide-vue-next'
 
 import IconButton from './IconButton.vue'
 
@@ -33,13 +32,13 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { IconButton, Trophy },
+    components: { IconButton },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <Trophy :size="16" />
+        <i class="icon-[lucide--trophy] size-4" />
       </IconButton>
     `
   }),
@@ -51,13 +50,13 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: (args) => ({
-    components: { IconButton, Settings },
+    components: { IconButton },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <Settings :size="16" />
+        <i class="icon-[lucide--settings] size-4" />
       </IconButton>
     `
   }),
@@ -69,13 +68,13 @@ export const Secondary: Story = {
 
 export const Transparent: Story = {
   render: (args) => ({
-    components: { IconButton, X },
+    components: { IconButton },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <X :size="16" />
+        <i class="icon-[lucide--x] size-4" />
       </IconButton>
     `
   }),
@@ -87,13 +86,13 @@ export const Transparent: Story = {
 
 export const Small: Story = {
   render: (args) => ({
-    components: { IconButton, Bell },
+    components: { IconButton },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <Bell :size="12" />
+        <i class="icon-[lucide--bell] size-3" />
       </IconButton>
     `
   }),
@@ -105,42 +104,42 @@ export const Small: Story = {
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { IconButton, Trophy, Settings, X, Bell, Heart, Download },
+    components: { IconButton },
     template: `
       <div class="flex flex-col gap-4">
         <div class="flex gap-2 items-center">
           <IconButton type="primary" size="sm" @click="() => {}">
-            <Trophy :size="12" />
+            <i class="icon-[lucide--trophy] size-3" />
           </IconButton>
           <IconButton type="primary" size="md" @click="() => {}">
-            <Trophy :size="16" />
+            <i class="icon-[lucide--trophy] size-4" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="secondary" size="sm" @click="() => {}">
-            <Settings :size="12" />
+            <i class="icon-[lucide--settings] size-3" />
           </IconButton>
           <IconButton type="secondary" size="md" @click="() => {}">
-            <Settings :size="16" />
+            <i class="icon-[lucide--settings] size-4" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="transparent" size="sm" @click="() => {}">
-            <X :size="12" />
+            <i class="icon-[lucide--x] size-3" />
           </IconButton>
           <IconButton type="transparent" size="md" @click="() => {}">
-            <X :size="16" />
+            <i class="icon-[lucide--x] size-4" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="primary" size="md" @click="() => {}">
-            <Bell :size="16" />
+            <i class="icon-[lucide--bell] size-4" />
           </IconButton>
           <IconButton type="secondary" size="md" @click="() => {}">
-            <Heart :size="16" />
+            <i class="icon-[lucide--heart] size-4" />
           </IconButton>
           <IconButton type="transparent" size="md" @click="() => {}">
-            <Download :size="16" />
+            <i class="icon-[lucide--download] size-4" />
           </IconButton>
         </div>
       </div>
diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue
index 1f5b24bac..1038a82e4 100644
--- a/src/components/button/IconButton.vue
+++ b/src/components/button/IconButton.vue
@@ -1,5 +1,11 @@
 <template>
-  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
     <slot></slot>
   </Button>
 </template>
@@ -20,6 +26,10 @@ interface IconButtonProps extends BaseButtonProps {
   onClick: (event: Event) => void
 }
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const {
   size = 'md',
   type = 'secondary',
diff --git a/src/components/button/IconGroup.stories.ts b/src/components/button/IconGroup.stories.ts
index 1eb0d6e0a..c2fa1b96d 100644
--- a/src/components/button/IconGroup.stories.ts
+++ b/src/components/button/IconGroup.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { Download, ExternalLink, Heart } from 'lucide-vue-next'
 
 import IconButton from './IconButton.vue'
 import IconGroup from './IconGroup.vue'
@@ -17,17 +16,17 @@ type Story = StoryObj<typeof IconGroup>
 
 export const Basic: Story = {
   render: () => ({
-    components: { IconGroup, IconButton, Download, ExternalLink, Heart },
+    components: { IconGroup, IconButton },
     template: `
       <IconGroup>
         <IconButton @click="console.log('Hello World!!')">
-          <Heart :size="16" />
+          <i class="icon-[lucide--heart] size-4" />
         </IconButton>
         <IconButton @click="console.log('Hello World!!')">
-          <Download :size="16" />
+          <i class="icon-[lucide--download] size-4" />
         </IconButton>
         <IconButton @click="console.log('Hello World!!')">
-          <ExternalLink :size="16" />
+          <i class="icon-[lucide--external-link] size-4" />
         </IconButton>
       </IconGroup>
     `
diff --git a/src/components/button/IconTextButton.stories.ts b/src/components/button/IconTextButton.stories.ts
index da07d9a66..0139b9bd6 100644
--- a/src/components/button/IconTextButton.stories.ts
+++ b/src/components/button/IconTextButton.stories.ts
@@ -1,14 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import {
-  ChevronLeft,
-  ChevronRight,
-  Download,
-  Package,
-  Save,
-  Settings,
-  Trash2,
-  X
-} from 'lucide-vue-next'
 
 import IconTextButton from './IconTextButton.vue'
 
@@ -49,14 +39,14 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { IconTextButton, Package },
+    components: { IconTextButton },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <Package :size="16" />
+          <i class="icon-[lucide--package] size-4" />
         </template>
       </IconTextButton>
     `
@@ -70,14 +60,14 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: (args) => ({
-    components: { IconTextButton, Settings },
+    components: { IconTextButton },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <Settings :size="16" />
+          <i class="icon-[lucide--settings] size-4" />
         </template>
       </IconTextButton>
     `
@@ -91,14 +81,14 @@ export const Secondary: Story = {
 
 export const Transparent: Story = {
   render: (args) => ({
-    components: { IconTextButton, X },
+    components: { IconTextButton },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <X :size="16" />
+          <i class="icon-[lucide--x] size-4" />
         </template>
       </IconTextButton>
     `
@@ -112,14 +102,14 @@ export const Transparent: Story = {
 
 export const WithIconRight: Story = {
   render: (args) => ({
-    components: { IconTextButton, ChevronRight },
+    components: { IconTextButton },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <ChevronRight :size="16" />
+          <i class="icon-[lucide--chevron-right] size-4" />
         </template>
       </IconTextButton>
     `
@@ -134,14 +124,14 @@ export const WithIconRight: Story = {
 
 export const Small: Story = {
   render: (args) => ({
-    components: { IconTextButton, Save },
+    components: { IconTextButton },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <Save :size="12" />
+          <i class="icon-[lucide--save] size-3" />
         </template>
       </IconTextButton>
     `
@@ -156,66 +146,60 @@ export const Small: Story = {
 export const AllVariants: Story = {
   render: () => ({
     components: {
-      IconTextButton,
-      Download,
-      Settings,
-      Trash2,
-      ChevronRight,
-      ChevronLeft,
-      Save
+      IconTextButton
     },
     template: `
       <div class="flex flex-col gap-4">
         <div class="flex gap-2 items-center">
           <IconTextButton label="Download" type="primary" size="sm" @click="() => {}">
             <template #icon>
-              <Download :size="12" />
+              <i class="icon-[lucide--download] size-3" />
             </template>
           </IconTextButton>
           <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
             <template #icon>
-              <Download :size="16" />
+              <i class="icon-[lucide--download] size-4" />
             </template>
           </IconTextButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconTextButton label="Settings" type="secondary" size="sm" @click="() => {}">
             <template #icon>
-              <Settings :size="12" />
+              <i class="icon-[lucide--settings] size-3" />
             </template>
           </IconTextButton>
           <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
             <template #icon>
-              <Settings :size="16" />
+              <i class="icon-[lucide--settings] size-4" />
             </template>
           </IconTextButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconTextButton label="Delete" type="transparent" size="sm" @click="() => {}">
             <template #icon>
-              <Trash2 :size="12" />
+              <i class="icon-[lucide--trash-2] size-3" />
             </template>
           </IconTextButton>
           <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
             <template #icon>
-              <Trash2 :size="16" />
+              <i class="icon-[lucide--trash-2] size-4" />
             </template>
           </IconTextButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconTextButton label="Next" type="primary" size="md" iconPosition="right" @click="() => {}">
             <template #icon>
-              <ChevronRight :size="16" />
+              <i class="icon-[lucide--chevron-right] size-4" />
             </template>
           </IconTextButton>
           <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
             <template #icon>
-              <ChevronLeft :size="16" />
+              <i class="icon-[lucide--chevron-left] size-4" />
             </template>
           </IconTextButton>
           <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
             <template #icon>
-              <Save :size="16" />
+              <i class="icon-[lucide--save] size-4" />
             </template>
           </IconTextButton>
         </div>
diff --git a/src/components/button/IconTextButton.vue b/src/components/button/IconTextButton.vue
index 656761757..bdf40d4ed 100644
--- a/src/components/button/IconTextButton.vue
+++ b/src/components/button/IconTextButton.vue
@@ -1,5 +1,11 @@
 <template>
-  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
     <slot v-if="iconPosition !== 'right'" name="icon"></slot>
     <span>{{ label }}</span>
     <slot v-if="iconPosition === 'right'" name="icon"></slot>
@@ -18,6 +24,10 @@ import {
   getButtonTypeClasses
 } from '@/types/buttonTypes'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 interface IconTextButtonProps extends BaseButtonProps {
   iconPosition?: 'left' | 'right'
   label: string
diff --git a/src/components/button/MoreButton.stories.ts b/src/components/button/MoreButton.stories.ts
index 3ec3dd491..ae1f86545 100644
--- a/src/components/button/MoreButton.stories.ts
+++ b/src/components/button/MoreButton.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { Download, ScrollText } from 'lucide-vue-next'
 
 import IconTextButton from './IconTextButton.vue'
 import MoreButton from './MoreButton.vue'
@@ -18,7 +17,7 @@ type Story = StoryObj<typeof MoreButton>
 
 export const Basic: Story = {
   render: () => ({
-    components: { MoreButton, IconTextButton, Download, ScrollText },
+    components: { MoreButton, IconTextButton },
     template: `
       <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
         <MoreButton>
@@ -29,7 +28,7 @@ export const Basic: Story = {
               @click="() => { close() }"
             >
               <template #icon>
-                <Download :size="16" />
+                <i class="icon-[lucide--download] size-4" />
               </template>
             </IconTextButton>
 
@@ -39,7 +38,7 @@ export const Basic: Story = {
               @click="() => { close() }"
             >
               <template #icon>
-                <ScrollText :size="16" />
+                <i class="icon-[lucide--scroll-text] size-4" />
               </template>
             </IconTextButton>
           </template>
diff --git a/src/components/button/TextButton.vue b/src/components/button/TextButton.vue
index a183ea788..14d32cc73 100644
--- a/src/components/button/TextButton.vue
+++ b/src/components/button/TextButton.vue
@@ -1,5 +1,11 @@
 <template>
-  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
     <span>{{ label }}</span>
   </Button>
 </template>
@@ -21,6 +27,10 @@ interface TextButtonProps extends BaseButtonProps {
   onClick: () => void
 }
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const {
   size = 'md',
   type = 'primary',
diff --git a/src/components/card/Card.stories.ts b/src/components/card/Card.stories.ts
index 0d8bf4385..923327a79 100644
--- a/src/components/card/Card.stories.ts
+++ b/src/components/card/Card.stories.ts
@@ -1,13 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import {
-  Download,
-  Folder,
-  Heart,
-  Info,
-  MoreVertical,
-  Star,
-  Upload
-} from 'lucide-vue-next'
 import { ref } from 'vue'
 
 import IconButton from '../button/IconButton.vue'
@@ -149,14 +140,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardTitle,
     CardDescription,
     IconButton,
-    SquareChip,
-    Info,
-    Folder,
-    Heart,
-    Download,
-    Star,
-    Upload,
-    MoreVertical
+    SquareChip
   },
   setup() {
     const favorited = ref(false)
@@ -202,14 +186,14 @@ const createCardTemplate = (args: CardStoryArgs) => ({
                 class="!bg-white/90 !text-neutral-900"
                 @click="() => console.log('Info clicked')"
               >
-                <Info :size="16" />
+                <i class="icon-[lucide--info] size-4" />
               </IconButton>
               <IconButton
                 class="!bg-white/90"
                 :class="favorited ? '!text-red-500' : '!text-neutral-900'"
                 @click="toggleFavorite"
               >
-                <Heart :size="16" :fill="favorited ? 'currentColor' : 'none'" />
+                <i class="icon-[lucide--heart] size-4" :class="favorited ? 'fill-current' : ''" />
               </IconButton>
             </template>
             
@@ -222,7 +206,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
               <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
               <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
                 <template v-if="tag === 'LoRA'" #icon>
-                  <Folder :size="12" />
+                  <i class="icon-[lucide--folder] size-3" />
                 </template>
               </SquareChip>
             </template>
@@ -409,11 +393,7 @@ export const GridOfCards: Story = {
       CardTitle,
       CardDescription,
       IconButton,
-      SquareChip,
-      Info,
-      Folder,
-      Heart,
-      Download
+      SquareChip
     },
     setup() {
       const cards = ref([
@@ -500,7 +480,7 @@ export const GridOfCards: Story = {
                     class="!bg-white/90 !text-neutral-900"
                     @click="() => console.log('Info:', card.title)"
                   >
-                    <Info :size="16" />
+                    <i class="icon-[lucide--info] size-4" />
                   </IconButton>
                 </template>
                 
@@ -511,7 +491,7 @@ export const GridOfCards: Story = {
                     :label="tag"
                   >
                     <template v-if="tag === 'LoRA'" #icon>
-                      <Folder :size="12" />
+                      <i class="icon-[lucide--folder] size-3" />
                     </template>
                   </SquareChip>
                   <SquareChip :label="card.size" />
diff --git a/src/components/common/EditableText.spec.ts b/src/components/common/EditableText.spec.ts
index 2e7b036b5..2d31123b9 100644
--- a/src/components/common/EditableText.spec.ts
+++ b/src/components/common/EditableText.spec.ts
@@ -68,4 +68,73 @@ describe('EditableText', () => {
     // @ts-expect-error fixme ts strict error
     expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
   })
+
+  it('cancels editing on escape key', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Should emit cancel event
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+
+    // Should NOT emit edit event
+    expect(wrapper.emitted('edit')).toBeFalsy()
+
+    // Input value should be reset to original
+    expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
+      'Original Text'
+    )
+  })
+
+  it('does not save changes when escape is pressed and blur occurs', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape (which triggers blur internally)
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Manually trigger blur to simulate the blur that happens after escape
+    await wrapper.findComponent(InputText).trigger('blur')
+
+    // Should emit cancel but not edit
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+    expect(wrapper.emitted('edit')).toBeFalsy()
+  })
+
+  it('saves changes on enter but not on escape', async () => {
+    // Test Enter key saves changes
+    const enterWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await enterWrapper.findComponent(InputText).setValue('Saved Text')
+    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+    // Trigger blur that happens after enter
+    await enterWrapper.findComponent(InputText).trigger('blur')
+    expect(enterWrapper.emitted('edit')).toBeTruthy()
+    // @ts-expect-error fixme ts strict error
+    expect(enterWrapper.emitted('edit')[0]).toEqual(['Saved Text'])
+
+    // Test Escape key cancels changes with a fresh wrapper
+    const escapeWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+    expect(escapeWrapper.emitted('cancel')).toBeTruthy()
+    expect(escapeWrapper.emitted('edit')).toBeFalsy()
+  })
 })
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 16510d3fd..c6fa18a8d 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -14,10 +14,12 @@
       fluid
       :pt="{
         root: {
-          onBlur: finishEditing
+          onBlur: finishEditing,
+          ...inputAttrs
         }
       }"
       @keyup.enter="blurInputElement"
+      @keyup.escape="cancelEditing"
       @click.stop
     />
   </div>
@@ -27,21 +29,41 @@
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
 
-const { modelValue, isEditing = false } = defineProps<{
+const {
+  modelValue,
+  isEditing = false,
+  inputAttrs = {}
+} = defineProps<{
   modelValue: string
   isEditing?: boolean
+  inputAttrs?: Record<string, any>
 }>()
 
-const emit = defineEmits(['update:modelValue', 'edit'])
+const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
 const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
+const isCanceling = ref(false)
 
 const blurInputElement = () => {
   // @ts-expect-error - $el is an internal property of the InputText component
   inputRef.value?.$el.blur()
 }
 const finishEditing = () => {
-  emit('edit', inputValue.value)
+  // Don't save if we're canceling
+  if (!isCanceling.value) {
+    emit('edit', inputValue.value)
+  }
+  isCanceling.value = false
+}
+const cancelEditing = () => {
+  // Set canceling flag to prevent blur from saving
+  isCanceling.value = true
+  // Reset to original value
+  inputValue.value = modelValue
+  // Emit cancel event
+  emit('cancel')
+  // Blur the input to exit edit mode
+  blurInputElement()
 }
 watch(
   () => isEditing,
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index 1515289cc..efb09c900 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -3,7 +3,7 @@
     <div class="flex gap-2 items-center">
       <div
         class="preview-box border rounded p-2 w-16 h-16 flex items-center justify-center"
-        :class="{ 'bg-gray-100 dark:bg-gray-800': !modelValue }"
+        :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
       >
         <img
           v-if="modelValue"
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index e589b468e..842017783 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -16,6 +16,21 @@
       {{ hint }}
     </Message>
     <div class="flex gap-4 justify-end">
+      <div
+        v-if="type === 'overwriteBlueprint'"
+        class="flex gap-4 justify-start"
+      >
+        <Checkbox
+          v-model="doNotAskAgain"
+          class="flex gap-4 justify-start"
+          input-id="doNotAskAgain"
+          binary
+        />
+        <label for="doNotAskAgain" severity="secondary">{{
+          t('missingModelsDialog.doNotAskAgain')
+        }}</label>
+      </div>
+
       <Button
         :label="$t('g.cancel')"
         icon="pi pi-undo"
@@ -38,7 +53,7 @@
         @click="onConfirm"
       />
       <Button
-        v-else-if="type === 'overwrite'"
+        v-else-if="type === 'overwrite' || type === 'overwriteBlueprint'"
         :label="$t('g.overwrite')"
         severity="warn"
         icon="pi pi-save"
@@ -74,10 +89,14 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   message: string
@@ -87,14 +106,20 @@ const props = defineProps<{
   hint?: string
 }>()
 
+const { t } = useI18n()
+
 const onCancel = () => useDialogStore().closeDialog()
 
+const doNotAskAgain = ref(false)
+
 const onDeny = () => {
   props.onConfirm(false)
   useDialogStore().closeDialog()
 }
 
 const onConfirm = () => {
+  if (props.type === 'overwriteBlueprint' && doNotAskAgain.value)
+    void useSettingStore().set('Comfy.Workflow.WarnBlueprintOverwrite', false)
   props.onConfirm(true)
   useDialogStore().closeDialog()
 }
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index 4f35511cf..5b732ebbc 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -105,7 +105,7 @@ const showContactSupport = async () => {
 
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
+    await systemStatsStore.refetchSystemStats()
   }
 
   try {
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index 216e54dd0..54a006bee 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -2,8 +2,8 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    title="Some Nodes Are Missing"
-    message="When loading the graph, the following node types were not found"
+    :title="$t('loadWorkflowWarning.missingNodesTitle')"
+    :message="$t('loadWorkflowWarning.missingNodesDescription')"
   />
   <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
   <ListBox
@@ -54,19 +54,12 @@
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useDialogService } from '@/services/dialogService'
+import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useCommandStore } from '@/stores/commandStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
-import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -81,6 +74,7 @@ const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
 const comfyManagerStore = useComfyManagerStore()
+const managerState = useManagerState()
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -111,47 +105,21 @@ const uniqueNodes = computed(() => {
     })
 })
 
-const managerStateStore = useManagerStateStore()
-
 // Show manager buttons unless manager is disabled
 const showManagerButtons = computed(() => {
-  return managerStateStore.managerUIState !== ManagerUIState.DISABLED
+  return managerState.shouldShowManagerButtons.value
 })
 
 // Only show Install All button for NEW_UI (new manager with v4 support)
 const showInstallAllButton = computed(() => {
-  return managerStateStore.managerUIState === ManagerUIState.NEW_UI
+  return managerState.shouldShowInstallButton.value
 })
 
 const openManager = async () => {
-  const state = managerStateStore.managerUIState
-
-  switch (state) {
-    case ManagerUIState.DISABLED:
-      useDialogService().showSettingsDialog('extension')
-      break
-
-    case ManagerUIState.LEGACY_UI:
-      try {
-        await useCommandStore().execute('Comfy.Manager.Menu.ToggleVisibility')
-      } catch {
-        // If legacy command doesn't exist, show toast
-        const { t } = useI18n()
-        useToastStore().add({
-          severity: 'error',
-          summary: t('g.error'),
-          detail: t('manager.legacyMenuNotAvailable'),
-          life: 3000
-        })
-      }
-      break
-
-    case ManagerUIState.NEW_UI:
-      useDialogService().showManagerDialog({
-        initialTab: ManagerTab.Missing
-      })
-      break
-  }
+  await managerState.openManager({
+    initialTab: ManagerTab.Missing,
+    showToastOnLegacyError: true
+  })
 }
 </script>
 
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index 036f088b3..cf81441f1 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -42,9 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
 import Message from 'primevue/message'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
@@ -60,20 +59,11 @@ const hasMissingCoreNodes = computed(() => {
   return Object.keys(props.missingCoreNodes).length > 0
 })
 
-const currentComfyUIVersion = ref<string | null>(null)
-whenever(
-  hasMissingCoreNodes,
-  async () => {
-    if (!systemStatsStore.systemStats) {
-      await systemStatsStore.fetchSystemStats()
-    }
-    currentComfyUIVersion.value =
-      systemStatsStore.systemStats?.system?.comfyui_version ?? null
-  },
-  {
-    immediate: true
-  }
-)
+// Use computed for reactive version tracking
+const currentComfyUIVersion = computed<string | null>(() => {
+  if (!hasMissingCoreNodes.value) return null
+  return systemStatsStore.systemStats?.system?.comfyui_version ?? null
+})
 
 const sortedMissingCoreNodes = computed(() => {
   return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index 9c637261f..fe3441457 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -29,7 +29,7 @@
           <!-- Conflict Warning Banner -->
           <div
             v-if="shouldShowManagerBanner"
-            class="bg-yellow-600 bg-opacity-20 border border-yellow-400 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
+            class="bg-yellow-500/20 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
           >
             <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
             <div class="flex flex-col gap-2 flex-1">
@@ -46,14 +46,15 @@
                 {{ $t('manager.conflicts.warningBanner.button') }}
               </p>
             </div>
-            <button
-              type="button"
-              class="absolute top-2 right-2 w-6 h-6 border-none outline-none bg-transparent flex items-center justify-center text-yellow-600 rounded transition-colors"
-              :aria-label="$t('g.close')"
+            <IconButton
+              class="absolute top-0 right-0"
+              type="transparent"
               @click="dismissWarningBanner"
             >
-              <i class="pi pi-times text-sm"></i>
-            </button>
+              <i
+                class="pi pi-times text-neutral-900 dark-theme:text-white text-xs"
+              ></i>
+            </IconButton>
           </div>
           <RegistrySearchBar
             v-model:searchQuery="searchQuery"
@@ -138,6 +139,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
diff --git a/src/components/dialog/content/manager/PackVersionBadge.test.ts b/src/components/dialog/content/manager/PackVersionBadge.test.ts
index 71d3383d8..1246de66b 100644
--- a/src/components/dialog/content/manager/PackVersionBadge.test.ts
+++ b/src/components/dialog/content/manager/PackVersionBadge.test.ts
@@ -1,6 +1,7 @@
 import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -31,11 +32,14 @@ const mockInstalledPacks = {
   'installed-pack': { ver: '2.0.0' }
 }
 
+const mockIsPackEnabled = vi.fn(() => true)
+
 vi.mock('@/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     installedPacks: mockInstalledPacks,
     isPackInstalled: (id: string) =>
-      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks]
+      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks],
+    isPackEnabled: mockIsPackEnabled
   }))
 }))
 
@@ -60,6 +64,7 @@ describe('PackVersionBadge', () => {
   beforeEach(() => {
     mockToggle.mockReset()
     mockHide.mockReset()
+    mockIsPackEnabled.mockReturnValue(true) // Reset to default enabled state
   })
 
   const mountComponent = ({
@@ -79,6 +84,9 @@ describe('PackVersionBadge', () => {
       },
       global: {
         plugins: [PrimeVue, createPinia(), i18n],
+        directives: {
+          tooltip: Tooltip
+        },
         stubs: {
           Popover: PopoverStub,
           PackVersionSelectorPopover: true
@@ -229,4 +237,63 @@ describe('PackVersionBadge', () => {
       expect(mockHide).not.toHaveBeenCalled()
     })
   })
+
+  describe('disabled state', () => {
+    beforeEach(() => {
+      mockIsPackEnabled.mockReturnValue(false) // Set all packs as disabled for these tests
+    })
+
+    it('adds disabled styles when pack is disabled', () => {
+      const wrapper = mountComponent()
+
+      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
+      expect(badge.exists()).toBe(true)
+      expect(badge.classes()).toContain('cursor-not-allowed')
+      expect(badge.classes()).toContain('opacity-60')
+    })
+
+    it('does not show chevron icon when disabled', () => {
+      const wrapper = mountComponent()
+
+      const chevronIcon = wrapper.find('.pi-chevron-right')
+      expect(chevronIcon.exists()).toBe(false)
+    })
+
+    it('does not show update arrow when disabled', () => {
+      const wrapper = mountComponent()
+
+      const updateIcon = wrapper.find('.pi-arrow-circle-up')
+      expect(updateIcon.exists()).toBe(false)
+    })
+
+    it('does not toggle popover when clicked while disabled', async () => {
+      const wrapper = mountComponent()
+
+      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
+      expect(badge.exists()).toBe(true)
+      await badge.trigger('click')
+
+      // Since it's disabled, the popover should not be toggled
+      expect(mockToggle).not.toHaveBeenCalled()
+    })
+
+    it('has correct tabindex when disabled', () => {
+      const wrapper = mountComponent()
+
+      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
+      expect(badge.exists()).toBe(true)
+      expect(badge.attributes('tabindex')).toBe('-1')
+    })
+
+    it('does not respond to keyboard events when disabled', async () => {
+      const wrapper = mountComponent()
+
+      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
+      expect(badge.exists()).toBe(true)
+      await badge.trigger('keydown.enter')
+      await badge.trigger('keydown.space')
+
+      expect(mockToggle).not.toHaveBeenCalled()
+    })
+  })
 })
diff --git a/src/components/dialog/content/manager/PackVersionBadge.vue b/src/components/dialog/content/manager/PackVersionBadge.vue
index f9dabf1f5..e0fc111ca 100644
--- a/src/components/dialog/content/manager/PackVersionBadge.vue
+++ b/src/components/dialog/content/manager/PackVersionBadge.vue
@@ -1,21 +1,28 @@
 <template>
   <div>
     <div
-      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer py-1"
-      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill }"
-      aria-haspopup="true"
-      role="button"
-      tabindex="0"
-      @click="toggleVersionSelector"
-      @keydown.enter="toggleVersionSelector"
-      @keydown.space="toggleVersionSelector"
+      v-tooltip.top="
+        isDisabled ? $t('manager.enablePackToChangeVersion') : null
+      "
+      class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
+      :class="{
+        'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
+        'cursor-pointer': !isDisabled,
+        'cursor-not-allowed opacity-60': isDisabled
+      }"
+      :aria-haspopup="!isDisabled"
+      :role="isDisabled ? 'text' : 'button'"
+      :tabindex="isDisabled ? -1 : 0"
+      @click="!isDisabled && toggleVersionSelector($event)"
+      @keydown.enter="!isDisabled && toggleVersionSelector($event)"
+      @keydown.space="!isDisabled && toggleVersionSelector($event)"
     >
       <i
         v-if="isUpdateAvailable"
         class="pi pi-arrow-circle-up text-blue-600 text-xs"
       />
       <span>{{ installedVersion }}</span>
-      <i class="pi pi-chevron-right text-xxs" />
+      <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
     </div>
 
     <Popover
@@ -61,6 +68,11 @@ const popoverRef = ref()
 
 const managerStore = useComfyManagerStore()
 
+const isInstalled = computed(() => managerStore.isPackInstalled(nodePack?.id))
+const isDisabled = computed(
+  () => isInstalled.value && !managerStore.isPackEnabled(nodePack?.id)
+)
+
 const installedVersion = computed(() => {
   if (!nodePack.id) return 'nightly'
   const version =
diff --git a/src/components/dialog/content/manager/button/PackUpdateButton.vue b/src/components/dialog/content/manager/button/PackUpdateButton.vue
index 447f370f4..50222d105 100644
--- a/src/components/dialog/content/manager/button/PackUpdateButton.vue
+++ b/src/components/dialog/content/manager/button/PackUpdateButton.vue
@@ -1,5 +1,8 @@
 <template>
   <IconTextButton
+    v-tooltip.top="
+      hasDisabledUpdatePacks ? $t('manager.disabledNodesWontUpdate') : null
+    "
     v-bind="$attrs"
     type="transparent"
     :label="$t('manager.updateAll')"
@@ -24,8 +27,9 @@ import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks } = defineProps<{
+const { nodePacks, hasDisabledUpdatePacks } = defineProps<{
   nodePacks: NodePack[]
+  hasDisabledUpdatePacks?: boolean
 }>()
 
 const isUpdating = ref<boolean>(false)
diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
index 86f41a44e..6e8d0d058 100644
--- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue
+++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
@@ -13,7 +13,11 @@
       :has-conflict="hasConflicts"
       :conflict-info="conflictInfo"
     />
-    <PackEnableToggle v-else :node-pack="nodePack" />
+    <PackEnableToggle
+      v-else
+      :has-conflict="hasConflicts"
+      :node-pack="nodePack"
+    />
   </div>
 </template>
 
diff --git a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue b/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
index 56cd0f98e..ead99e062 100644
--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
@@ -34,7 +34,8 @@
       />
       <PackUpdateButton
         v-if="isUpdateAvailableTab && hasUpdateAvailable"
-        :node-packs="updateAvailableNodePacks"
+        :node-packs="enabledUpdateAvailableNodePacks"
+        :has-disabled-update-packs="hasDisabledUpdatePacks"
       />
     </div>
     <div class="flex mt-3 text-sm">
@@ -103,8 +104,11 @@ const { t } = useI18n()
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 
 // Use the composable to get update available nodes
-const { hasUpdateAvailable, updateAvailableNodePacks } =
-  useUpdateAvailableNodes()
+const {
+  hasUpdateAvailable,
+  enabledUpdateAvailableNodePacks,
+  hasDisabledUpdatePacks
+} = useUpdateAvailableNodes()
 
 const hasResults = computed(
   () => searchQuery.value?.trim() && searchResults?.length
diff --git a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue b/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
index f91035b3c..e9ded729f 100644
--- a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
+// eslint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
 import Dropdown from 'primevue/dropdown'
 
 import type { SearchOption } from '@/types/comfyManagerTypes'
diff --git a/src/components/dialog/content/setting/AboutPanel.vue b/src/components/dialog/content/setting/AboutPanel.vue
index 166da2c48..9c74f2cd7 100644
--- a/src/components/dialog/content/setting/AboutPanel.vue
+++ b/src/components/dialog/content/setting/AboutPanel.vue
@@ -34,7 +34,6 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import Tag from 'primevue/tag'
-import { onMounted } from 'vue'
 
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
@@ -44,10 +43,4 @@ import PanelTemplate from './PanelTemplate.vue'
 
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
-
-onMounted(async () => {
-  if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
-  }
-})
 </script>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index b8b8baa4f..ee9bea3ba 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -31,6 +31,34 @@
     class="w-full h-full touch-none"
   />
 
+  <!-- TransformPane for Vue node rendering -->
+  <TransformPane
+    v-if="isVueNodesEnabled && comfyApp.canvas && comfyAppReady"
+    :canvas="comfyApp.canvas"
+    @transform-update="handleTransformUpdate"
+  >
+    <!-- Vue nodes rendered based on graph nodes -->
+    <VueGraphNode
+      v-for="nodeData in nodesToRender"
+      :key="nodeData.id"
+      :node-data="nodeData"
+      :position="nodePositions.get(nodeData.id)"
+      :size="nodeSizes.get(nodeData.id)"
+      :readonly="false"
+      :executing="executionStore.executingNodeId === nodeData.id"
+      :error="
+        executionStore.lastExecutionError?.node_id === nodeData.id
+          ? 'Execution error'
+          : null
+      "
+      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
+      :data-node-id="nodeData.id"
+      @node-click="handleNodeSelect"
+      @update:collapsed="handleNodeCollapse"
+      @update:title="handleNodeTitleUpdate"
+    />
+  </TransformPane>
+
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
 
@@ -39,19 +67,28 @@
   <template v-if="comfyAppReady">
     <TitleEditor />
     <SelectionToolbox v-if="selectionToolboxEnabled" />
-    <DomWidgets />
+    <!-- Render legacy DOM widgets only when Vue nodes are disabled -->
+    <DomWidgets v-if="!shouldRenderVueNodes" />
   </template>
 </template>
 
 <script setup lang="ts">
 import { useEventListener, whenever } from '@vueuse/core'
-import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect
+} from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
-import MiniMap from '@/components/graph/MiniMap.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
@@ -59,6 +96,8 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useViewportCulling } from '@/composables/graph/useViewportCulling'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
@@ -66,11 +105,17 @@ import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import TransformPane from '@/renderer/core/layout/TransformPane.vue'
+import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
+import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -118,6 +163,44 @@ const selectionToolboxEnabled = computed(() =>
 
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 
+// Feature flags
+const { shouldRenderVueNodes } = useVueFeatureFlags()
+const isVueNodesEnabled = computed(() => shouldRenderVueNodes.value)
+
+// Vue node system
+const vueNodeLifecycle = useVueNodeLifecycle(isVueNodesEnabled)
+const viewportCulling = useViewportCulling(
+  isVueNodesEnabled,
+  vueNodeLifecycle.vueNodeData,
+  vueNodeLifecycle.nodeDataTrigger,
+  vueNodeLifecycle.nodeManager
+)
+const nodeEventHandlers = useNodeEventHandlers(vueNodeLifecycle.nodeManager)
+
+const nodePositions = vueNodeLifecycle.nodePositions
+const nodeSizes = vueNodeLifecycle.nodeSizes
+const nodesToRender = viewportCulling.nodesToRender
+
+const handleTransformUpdate = () => {
+  viewportCulling.handleTransformUpdate(
+    vueNodeLifecycle.detectChangesInRAF.value
+  )
+}
+const handleNodeSelect = nodeEventHandlers.handleNodeSelect
+const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
+const handleNodeTitleUpdate = nodeEventHandlers.handleNodeTitleUpdate
+
+// Provide selection state to all Vue nodes
+const selectedNodeIds = computed(
+  () =>
+    new Set(
+      canvasStore.selectedItems
+        .filter((item) => item.id !== undefined)
+        .map((item) => String(item.id))
+    )
+)
+provide(SelectedNodeIdsKey, selectedNodeIds)
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -286,6 +369,7 @@ onMounted(async () => {
   useCopy()
   usePaste()
   useWorkflowAutoSave()
+  useVueFeatureFlags()
 
   comfyApp.vueAppReady = true
 
@@ -298,9 +382,6 @@ onMounted(async () => {
     await settingStore.loadSettingValues()
   } catch (error) {
     if (error instanceof UnauthorizedError) {
-      console.log(
-        'Failed loading user settings, user unauthorized, cleaning local Comfy.userId'
-      )
       localStorage.removeItem('Comfy.userId')
       localStorage.removeItem('Comfy.userName')
       window.location.reload()
@@ -326,6 +407,8 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  vueNodeLifecycle.setupEmptyGraphListener()
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()
@@ -366,4 +449,8 @@ onMounted(async () => {
 
   emit('ready')
 })
+
+onUnmounted(() => {
+  vueNodeLifecycle.cleanup()
+})
 </script>
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index 38f0a2c0d..8ce9353aa 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -2,12 +2,12 @@
   <div
     ref="toolboxRef"
     style="transform: translate(var(--tb-x), var(--tb-y))"
-    class="fixed left-0 top-0 z-40"
+    class="fixed left-0 top-0 z-40 pointer-events-none"
   >
     <Transition name="slide-up">
       <Panel
         v-if="visible"
-        class="rounded-lg selection-toolbox"
+        class="rounded-lg selection-toolbox pointer-events-auto"
         :pt="{
           header: 'hidden',
           content: 'p-0 flex flex-row'
@@ -21,6 +21,7 @@
         <Load3DViewerButton />
         <MaskEditorButton />
         <ConvertToSubgraphButton />
+        <PublishSubgraphButton />
         <DeleteButton />
         <RefreshSelectionButton />
         <ExtensionCommandButton
@@ -49,6 +50,7 @@ import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewer
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
+import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
 import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
@@ -83,7 +85,6 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
 <style scoped>
 .selection-toolbox {
   transform: translateX(-50%) translateY(-120%);
-  will-change: transform, opacity;
 }
 
 @keyframes slideUp {
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index df5a93cf6..0092e473e 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -147,7 +147,8 @@ watch(
     showColorPicker.value = false
     selectedColorOption.value = null
     currentColorOption.value = getItemsColorOption(newSelectedItems)
-  }
+  },
+  { immediate: true }
 )
 </script>
 
diff --git a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
new file mode 100644
index 000000000..8fa1b94d6
--- /dev/null
+++ b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
@@ -0,0 +1,37 @@
+<template>
+  <Button
+    v-show="isVisible"
+    v-tooltip.top="{
+      value: t('commands.Comfy_PublishSubgraph.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    @click="() => commandStore.execute('Comfy.PublishSubgraph')"
+  >
+    <template #icon>
+      <i-lucide:book-open />
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isVisible = computed(() => {
+  return (
+    canvasStore.selectedItems?.length === 1 &&
+    canvasStore.selectedItems[0] instanceof SubgraphNode
+  )
+})
+</script>
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index 852b1b593..c91589407 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -142,11 +142,12 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
-import { useDialogService } from '@/services/dialogService'
+import { useManagerState } from '@/composables/useManagerState'
 import { type ReleaseNote } from '@/services/releaseService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
@@ -191,7 +192,6 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
-const dialogService = useDialogService()
 
 // Emits
 const emit = defineEmits<{
@@ -313,8 +313,11 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: PuzzleIcon,
       label: t('helpCenter.managerExtension'),
       showRedDot: shouldShowManagerRedDot.value,
-      action: () => {
-        dialogService.showManagerDialog()
+      action: async () => {
+        await useManagerState().openManager({
+          initialTab: ManagerTab.All,
+          showToastOnLegacyError: false
+        })
         emit('close')
       }
     },
diff --git a/src/components/input/SingleSelect.stories.ts b/src/components/input/SingleSelect.stories.ts
index c0a279822..a529a2fe1 100644
--- a/src/components/input/SingleSelect.stories.ts
+++ b/src/components/input/SingleSelect.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ArrowUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 import SingleSelect from './SingleSelect.vue'
@@ -57,7 +56,7 @@ export const Default: Story = {
 
 export const WithIcon: Story = {
   render: () => ({
-    components: { SingleSelect, ArrowUpDown },
+    components: { SingleSelect },
     setup() {
       const selected = ref<string | null>('popular')
       const options = sampleOptions
@@ -67,7 +66,7 @@ export const WithIcon: Story = {
       <div>
         <SingleSelect v-model="selected" :options="options" label="Sorting Type">
           <template #icon>
-            <ArrowUpDown :size="14" />
+            <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">
@@ -94,7 +93,7 @@ export const Preselected: Story = {
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { SingleSelect, ArrowUpDown },
+    components: { SingleSelect },
     setup() {
       const options = sampleOptions
       const a = ref<string | null>(null)
@@ -110,7 +109,7 @@ export const AllVariants: Story = {
         <div class="flex items-center gap-3">
           <SingleSelect v-model="b" :options="options" label="With Icon">
             <template #icon>
-              <ArrowUpDown :size="14" />
+              <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
             </template>
           </SingleSelect>
         </div>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index 1f1d782f3..2dc099c41 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="container" class="node-lib-node-container">
-    <TreeExplorerTreeNode :node="node">
+    <TreeExplorerTreeNode :node="node" @contextmenu="handleContextMenu">
       <template #before-label>
         <Tag
           v-if="nodeDef.experimental"
@@ -13,7 +13,30 @@
           severity="danger"
         />
       </template>
-      <template #actions>
+      <template
+        v-if="nodeDef.name.startsWith(useSubgraphStore().typePrefix)"
+        #actions
+      >
+        <Button
+          size="small"
+          icon="pi pi-trash"
+          text
+          severity="danger"
+          @click.stop="deleteBlueprint"
+        >
+        </Button>
+        <Button
+          size="small"
+          text
+          severity="secondary"
+          @click.stop="editBlueprint"
+        >
+          <template #icon>
+            <i-lucide:square-pen />
+          </template>
+        </Button>
+      </template>
+      <template v-else #actions>
         <Button
           class="bookmark-button"
           size="small"
@@ -40,10 +63,13 @@
       </div>
     </teleport>
   </div>
+  <ContextMenu ref="menu" :model="menuItems" />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
 import {
   CSSProperties,
@@ -53,14 +79,18 @@ import {
   onUnmounted,
   ref
 } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
   openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
@@ -80,6 +110,33 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
 const toggleBookmark = async () => {
   await nodeBookmarkStore.toggleBookmark(nodeDef.value)
 }
+const editBlueprint = async () => {
+  if (!props.node.data)
+    throw new Error(
+      'Failed to edit subgraph blueprint lacking backing node data'
+    )
+  await useSubgraphStore().editBlueprint(props.node.data.name)
+}
+const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
+const menuItems = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = [
+    {
+      label: t('g.delete'),
+      icon: 'pi pi-trash',
+      severity: 'error',
+      command: deleteBlueprint
+    }
+  ]
+  return items
+})
+function handleContextMenu(event: Event) {
+  if (!nodeDef.value.name.startsWith(useSubgraphStore().typePrefix)) return
+  menu.value?.show(event)
+}
+function deleteBlueprint() {
+  if (!props.node.data) return
+  void useSubgraphStore().deleteBlueprint(props.node.data.name)
+}
 
 const previewRef = ref<InstanceType<typeof NodePreview> | null>(null)
 const nodePreviewStyle = ref<CSSProperties>({
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue
index a64b2e4ba..811dbd62c 100644
--- a/src/components/topbar/CommandMenubar.vue
+++ b/src/components/topbar/CommandMenubar.vue
@@ -28,29 +28,7 @@
     @show="onMenuShow"
   >
     <template #item="{ item, props }">
-      <div
-        v-if="item.key === 'theme'"
-        class="flex items-center gap-4 px-4 py-5"
-        @click.stop.prevent
-      >
-        {{ item.label }}
-        <SelectButton
-          :options="[darkLabel, lightLabel]"
-          :model-value="activeTheme"
-          @click.stop.prevent
-          @update:model-value="onThemeChange"
-        >
-          <template #option="{ option }">
-            <div class="flex items-center gap-2">
-              <i v-if="option === lightLabel" class="pi pi-sun" />
-              <i v-if="option === darkLabel" class="pi pi-moon" />
-              <span>{{ option }}</span>
-            </div>
-          </template>
-        </SelectButton>
-      </div>
       <a
-        v-else
         class="p-menubar-item-link px-4 py-2"
         v-bind="props.action"
         :href="item.url"
@@ -95,7 +73,6 @@
 
 <script setup lang="ts">
 import type { MenuItem } from 'primevue/menuitem'
-import SelectButton from 'primevue/selectbutton'
 import TieredMenu, {
   type TieredMenuMethods,
   type TieredMenuState
@@ -106,27 +83,28 @@ import { useI18n } from 'vue-i18n'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
-import { useDialogService } from '@/services/dialogService'
+import { useManagerState } from '@/composables/useManagerState'
+import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 const colorPaletteStore = useColorPaletteStore()
+const colorPaletteService = useColorPaletteService()
 const menuItemsStore = useMenuItemStore()
 const commandStore = useCommandStore()
 const dialogStore = useDialogStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
+const managerState = useManagerState()
+
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
@@ -159,36 +137,33 @@ const showSettings = (defaultPanel?: string) => {
   })
 }
 
-const managerStateStore = useManagerStateStore()
-
 const showManageExtensions = async () => {
-  const state = managerStateStore.managerUIState
-
-  switch (state) {
-    case ManagerUIState.DISABLED:
-      showSettings('extension')
-      break
-
-    case ManagerUIState.LEGACY_UI:
-      try {
-        await commandStore.execute('Comfy.Manager.Menu.ToggleVisibility')
-      } catch {
-        // If legacy command doesn't exist, fall back to extensions panel
-        showSettings('extension')
-      }
-      break
-
-    case ManagerUIState.NEW_UI:
-      useDialogService().showManagerDialog()
-      break
-  }
+  await managerState.openManager({
+    initialTab: ManagerTab.All,
+    showToastOnLegacyError: false
+  })
 }
 
-const extraMenuItems = computed<MenuItem[]>(() => [
+const themeMenuItems = computed(() => {
+  return colorPaletteStore.palettes.map((palette) => ({
+    key: `theme-${palette.id}`,
+    label: palette.name,
+    parentPath: 'theme',
+    comfyCommand: {
+      active: () => colorPaletteStore.activePaletteId === palette.id
+    },
+    command: async () => {
+      await colorPaletteService.loadColorPalette(palette.id)
+    }
+  }))
+})
+
+const extraMenuItems = computed(() => [
   { separator: true },
   {
     key: 'theme',
-    label: t('menu.theme')
+    label: t('menu.theme'),
+    items: themeMenuItems.value
   },
   { separator: true },
   {
@@ -211,19 +186,6 @@ const extraMenuItems = computed<MenuItem[]>(() => [
   }
 ])
 
-const lightLabel = computed(() => t('menu.light'))
-const darkLabel = computed(() => t('menu.dark'))
-
-const activeTheme = computed(() => {
-  return colorPaletteStore.completedActivePalette.light_theme
-    ? lightLabel.value
-    : darkLabel.value
-})
-
-const onThemeChange = async () => {
-  await commandStore.execute('Comfy.ToggleTheme')
-}
-
 const translatedItems = computed(() => {
   const items = menuItemsStore.menuItems.map(translateMenuItem)
   let helpIndex = items.findIndex((item) => item.key === 'Help')
@@ -308,7 +270,12 @@ const handleItemClick = (item: MenuItem, event: MouseEvent) => {
 }
 
 const hasActiveStateSiblings = (item: MenuItem): boolean => {
-  return menuItemsStore.menuItemHasActiveStateChildren[item.parentPath]
+  // Check if this item has siblings with active state (either from store or theme items)
+  return (
+    item.parentPath &&
+    (item.parentPath === 'theme' ||
+      menuItemsStore.menuItemHasActiveStateChildren[item.parentPath])
+  )
 }
 </script>
 
@@ -332,6 +299,18 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
 </style>
 
 <style>
+.comfy-command-menu {
+  --p-tieredmenu-item-focus-background: color-mix(
+    in srgb,
+    var(--fg-color) 15%,
+    transparent
+  );
+  --p-tieredmenu-item-active-background: color-mix(
+    in srgb,
+    var(--fg-color) 10%,
+    transparent
+  );
+}
 .comfy-command-menu ul {
   background-color: var(--comfy-menu-secondary-bg) !important;
 }
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 8a5ea674e..8fcf0409f 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -87,8 +87,6 @@
 
     <template #content>
       <!-- Card Examples -->
-      <!-- <div class="min-h-0 px-6 py-4 overflow-y-auto scrollbar-hide"> -->
-      <!-- <h2 class="text-xxl py-4 pt-0 m-0">{{ $t('Checkpoints') }}</h2> -->
       <div class="flex flex-wrap gap-2">
         <CardContainer
           v-for="i in 100"
@@ -175,20 +173,20 @@ const sortOptions = ref([
 ])
 
 const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
-  { id: 'installed', label: 'Installed' },
+  { id: 'installed', label: 'Installed', icon: 'icon-[lucide--download]' },
   {
     title: 'TAGS',
     items: [
-      { id: 'tag-sd15', label: 'SD 1.5' },
-      { id: 'tag-sdxl', label: 'SDXL' },
-      { id: 'tag-utility', label: 'Utility' }
+      { id: 'tag-sd15', label: 'SD 1.5', icon: 'icon-[lucide--tag]' },
+      { id: 'tag-sdxl', label: 'SDXL', icon: 'icon-[lucide--tag]' },
+      { id: 'tag-utility', label: 'Utility', icon: 'icon-[lucide--tag]' }
     ]
   },
   {
     title: 'CATEGORIES',
     items: [
-      { id: 'cat-models', label: 'Models' },
-      { id: 'cat-nodes', label: 'Nodes' }
+      { id: 'cat-models', label: 'Models', icon: 'icon-[lucide--layers]' },
+      { id: 'cat-nodes', label: 'Nodes', icon: 'icon-[lucide--grid-3x3]' }
     ]
   }
 ])
diff --git a/src/components/widget/layout/BaseWidget.stories.ts b/src/components/widget/layout/BaseWidget.stories.ts
index 0ac0341de..8ec98b980 100644
--- a/src/components/widget/layout/BaseWidget.stories.ts
+++ b/src/components/widget/layout/BaseWidget.stories.ts
@@ -1,19 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import {
-  Download,
-  Filter,
-  Folder,
-  Info,
-  PanelLeft,
-  PanelLeftClose,
-  PanelRight,
-  PanelRightClose,
-  Puzzle,
-  Scroll,
-  Settings,
-  Upload,
-  X
-} from 'lucide-vue-next'
 import { provide, ref } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -94,20 +79,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
     CardContainer,
     CardTop,
     CardBottom,
-    SquareChip,
-    Settings,
-    Upload,
-    Download,
-    Scroll,
-    Info,
-    Filter,
-    Folder,
-    Puzzle,
-    PanelLeft,
-    PanelLeftClose,
-    PanelRight,
-    PanelRightClose,
-    X
+    SquareChip
   },
   setup() {
     const t = (k: string) => k
@@ -118,20 +90,44 @@ const createStoryTemplate = (args: StoryArgs) => ({
     provide(OnCloseKey, onClose)
 
     const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
-      { id: 'installed', label: 'Installed' },
+      {
+        id: 'installed',
+        label: 'Installed',
+        icon: 'icon-[lucide--folder]'
+      },
       {
         title: 'TAGS',
         items: [
-          { id: 'tag-sd15', label: 'SD 1.5' },
-          { id: 'tag-sdxl', label: 'SDXL' },
-          { id: 'tag-utility', label: 'Utility' }
+          {
+            id: 'tag-sd15',
+            label: 'SD 1.5',
+            icon: 'icon-[lucide--tag]'
+          },
+          {
+            id: 'tag-sdxl',
+            label: 'SDXL',
+            icon: 'icon-[lucide--tag]'
+          },
+          {
+            id: 'tag-utility',
+            label: 'Utility',
+            icon: 'icon-[lucide--tag]'
+          }
         ]
       },
       {
         title: 'CATEGORIES',
         items: [
-          { id: 'cat-models', label: 'Models' },
-          { id: 'cat-nodes', label: 'Nodes' }
+          {
+            id: 'cat-models',
+            label: 'Models',
+            icon: 'icon-[lucide--layers]'
+          },
+          {
+            id: 'cat-nodes',
+            label: 'Nodes',
+            icon: 'icon-[lucide--grid-3x3]'
+          }
         ]
       }
     ])
@@ -181,7 +177,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
             <template #header-icon>
-              <Puzzle :size="16" class="text-neutral" />
+              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
             </template>
             <template #header-title>
               <span class="text-neutral text-base">Title</span>
@@ -203,7 +199,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
           <div class="flex gap-2">
             <IconTextButton type="primary" label="Upload Model" @click="() => {}">
               <template #icon>
-                <Upload :size="12" />
+                <i class="icon-[lucide--upload] size-3" />
               </template>
             </IconTextButton>
 
@@ -215,7 +211,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <Download :size="12" />
+                    <i class="icon-[lucide--download] size-3" />
                   </template>
                 </IconTextButton>
 
@@ -225,7 +221,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <Scroll :size="12" />
+                    <i class="icon-[lucide--scroll] size-3" />
                   </template>
                 </IconTextButton>
               </template>
@@ -256,7 +252,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
               class="w-[135px]"
             >
               <template #icon>
-                <Filter :size="12" />
+                <i class="icon-[lucide--filter] size-3" />
               </template>
             </SingleSelect>
           </div>
@@ -277,7 +273,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   </template>
                   <template #top-right>
                     <IconButton class="!bg-white !text-neutral-900" @click="() => {}">
-                      <Info :size="16" />
+                      <i class="icon-[lucide--info] size-4" />
                     </IconButton>
                   </template>
                   <template #bottom-right>
@@ -285,7 +281,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     <SquareChip label="1.2 MB" />
                     <SquareChip label="LoRA">
                       <template #icon>
-                        <Folder :size="12" />
+                        <i class="icon-[lucide--folder] size-3" />
                       </template>
                     </SquareChip>
                   </template>
@@ -305,7 +301,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
             <template #header-icon>
-              <Puzzle :size="16" class="text-neutral" />
+              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
             </template>
             <template #header-title>
               <span class="text-neutral text-base">Title</span>
@@ -327,7 +323,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
           <div class="flex gap-2">
             <IconTextButton type="primary" label="Upload Model" @click="() => {}">
               <template #icon>
-                <Upload :size="12" />
+                <i class="icon-[lucide--upload] size-3" />
               </template>
             </IconTextButton>
 
@@ -339,7 +335,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <Download :size="12" />
+                    <i class="icon-[lucide--download] size-3" />
                   </template>
                 </IconTextButton>
 
@@ -349,7 +345,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <Scroll :size="12" />
+                    <i class="icon-[lucide--scroll] size-3" />
                   </template>
                 </IconTextButton>
               </template>
@@ -377,7 +373,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
               class="w-[135px]"
             >
               <template #icon>
-                <Filter :size="12" />
+                <i class="icon-[lucide--filter] size-3" />
               </template>
             </SingleSelect>
           </div>
@@ -398,7 +394,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   </template>
                   <template #top-right>
                     <IconButton class="!bg-white !text-neutral-900" @click="() => {}">
-                      <Info :size="16" />
+                      <i class="icon-[lucide--info] size-4" />
                     </IconButton>
                   </template>
                   <template #bottom-right>
@@ -406,7 +402,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     <SquareChip label="1.2 MB" />
                     <SquareChip label="LoRA">
                       <template #icon>
-                        <Folder :size="12" />
+                        <i class="icon-[lucide--folder] size-3" />
                       </template>
                     </SquareChip>
                   </template>
diff --git a/src/components/widget/nav/NavIcon.vue b/src/components/widget/nav/NavIcon.vue
new file mode 100644
index 000000000..d26155705
--- /dev/null
+++ b/src/components/widget/nav/NavIcon.vue
@@ -0,0 +1,11 @@
+<template>
+  <i :class="icon" class="text-xs text-neutral" />
+</template>
+
+<script setup lang="ts">
+import { NavItemData } from '@/types/navTypes'
+
+defineProps<{
+  icon: NavItemData['icon']
+}>()
+</script>
diff --git a/src/components/widget/nav/NavItem.stories.ts b/src/components/widget/nav/NavItem.stories.ts
new file mode 100644
index 000000000..0f8df80b8
--- /dev/null
+++ b/src/components/widget/nav/NavItem.stories.ts
@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import NavItem from './NavItem.vue'
+
+const meta: Meta<typeof NavItem> = {
+  title: 'Components/Widget/Nav/NavItem',
+  component: NavItem,
+  argTypes: {
+    icon: {
+      control: 'select',
+      description: 'Icon component to display'
+    },
+    active: {
+      control: 'boolean',
+      description: 'Active state of the nav item'
+    },
+    onClick: {
+      table: { disable: true }
+    },
+    default: {
+      control: 'text',
+      description: 'Text content for the nav item'
+    }
+  },
+  args: {
+    active: false,
+    onClick: () => {},
+    default: 'Navigation Item'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const InteractiveList: Story = {
+  render: () => ({
+    components: { NavItem },
+    template: `
+      <div class="space-y-1">
+        <NavItem
+          v-for="item in items"
+          :key="item.id"
+          :icon="item.icon"
+          :active="selectedId === item.id"
+          :on-click="() => selectedId = item.id"
+        >
+          {{ item.label }}
+        </NavItem>
+      </div>
+    `,
+    data() {
+      return {
+        selectedId: 'downloads'
+      }
+    },
+    setup() {
+      const items = [
+        {
+          id: 'downloads',
+          label: 'Downloads',
+          icon: 'icon-[lucide--download]'
+        },
+        {
+          id: 'models',
+          label: 'Models',
+          icon: 'icon-[lucide--layers]'
+        },
+        {
+          id: 'nodes',
+          label: 'Nodes',
+          icon: 'icon-[lucide--grid-3x3]'
+        },
+        {
+          id: 'tags',
+          label: 'Tags',
+          icon: 'icon-[lucide--tag]'
+        },
+        {
+          id: 'settings',
+          label: 'Settings',
+          icon: 'icon-[lucide--wrench]'
+        },
+        {
+          id: 'default',
+          label: 'Default Icon',
+          icon: 'icon-[lucide--folder]'
+        }
+      ]
+
+      return { items }
+    }
+  }),
+  parameters: {
+    controls: { disable: true }
+  }
+}
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 4d96327ea..c159dc6d5 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -9,7 +9,8 @@
     role="button"
     @click="onClick"
   >
-    <i-lucide:folder v-if="hasFolderIcon" class="text-xs text-neutral" />
+    <NavIcon v-if="icon" :icon="icon" />
+    <i-lucide:folder v-else class="text-xs text-neutral" />
     <span class="flex items-center">
       <slot></slot>
     </span>
@@ -17,12 +18,12 @@
 </template>
 
 <script setup lang="ts">
-const {
-  hasFolderIcon = true,
-  active,
-  onClick
-} = defineProps<{
-  hasFolderIcon?: boolean
+import { NavItemData } from '@/types/navTypes'
+
+import NavIcon from './NavIcon.vue'
+
+const { icon, active, onClick } = defineProps<{
+  icon: NavItemData['icon']
   active?: boolean
   onClick: () => void
 }>()
diff --git a/src/components/widget/nav/Navigation.stories.ts b/src/components/widget/nav/Navigation.stories.ts
deleted file mode 100644
index 78e11996f..000000000
--- a/src/components/widget/nav/Navigation.stories.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import {
-  BarChart3,
-  Bell,
-  BookOpen,
-  FolderOpen,
-  GraduationCap,
-  Home,
-  LogOut,
-  MessageSquare,
-  Settings,
-  User,
-  Users
-} from 'lucide-vue-next'
-import { ref } from 'vue'
-
-import LeftSidePanel from '../panel/LeftSidePanel.vue'
-import NavItem from './NavItem.vue'
-import NavTitle from './NavTitle.vue'
-
-const meta: Meta = {
-  title: 'Components/Widget/Navigation',
-  tags: ['autodocs']
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const NavigationItem: Story = {
-  render: () => ({
-    components: { NavItem },
-    template: `
-      <div class="space-y-2">
-        <NavItem>Dashboard</NavItem>
-        <NavItem>Projects</NavItem>
-        <NavItem>Messages</NavItem>
-        <NavItem>Settings</NavItem>
-      </div>
-    `
-  })
-}
-
-export const CustomNavigation: Story = {
-  render: () => ({
-    components: {
-      NavTitle,
-      NavItem,
-      Home,
-      FolderOpen,
-      BarChart3,
-      Users,
-      BookOpen,
-      GraduationCap,
-      MessageSquare,
-      Settings,
-      User,
-      Bell,
-      LogOut
-    },
-    template: `
-      <nav class="w-64 p-4 bg-white dark-theme:bg-zinc-800 rounded-lg">
-        <NavTitle title="Main Menu" />
-        <div class="mt-4 space-y-2">
-          <NavItem :hasFolderIcon="false"><Home :size="16" class="inline mr-2" />Dashboard</NavItem>
-          <NavItem :hasFolderIcon="false"><FolderOpen :size="16" class="inline mr-2" />Projects</NavItem>
-          <NavItem :hasFolderIcon="false"><BarChart3 :size="16" class="inline mr-2" />Analytics</NavItem>
-          <NavItem :hasFolderIcon="false"><Users :size="16" class="inline mr-2" />Team</NavItem>
-        </div>
-        <div class="mt-6">
-          <NavTitle title="Resources" />
-          <div class="mt-4 space-y-2">
-            <NavItem :hasFolderIcon="false"><BookOpen :size="16" class="inline mr-2" />Documentation</NavItem>
-            <NavItem :hasFolderIcon="false"><GraduationCap :size="16" class="inline mr-2" />Tutorials</NavItem>
-            <NavItem :hasFolderIcon="false"><MessageSquare :size="16" class="inline mr-2" />Community</NavItem>
-          </div>
-        </div>
-        <div class="mt-6">
-          <NavTitle title="Account" />
-          <div class="mt-4 space-y-2">
-            <NavItem :hasFolderIcon="false"><Settings :size="16" class="inline mr-2" />Settings</NavItem>
-            <NavItem :hasFolderIcon="false"><User :size="16" class="inline mr-2" />Profile</NavItem>
-            <NavItem :hasFolderIcon="false"><Bell :size="16" class="inline mr-2" />Notifications</NavItem>
-            <NavItem :hasFolderIcon="false"><LogOut :size="16" class="inline mr-2" />Logout</NavItem>
-          </div>
-        </div>
-      </nav>
-    `
-  })
-}
-
-export const LeftSidePanelDemo: Story = {
-  render: () => ({
-    components: { LeftSidePanel, FolderOpen },
-    setup() {
-      const navItems = [
-        {
-          title: 'Workspace',
-          items: [
-            { id: 'dashboard', label: 'Dashboard' },
-            { id: 'projects', label: 'Projects' },
-            { id: 'workflows', label: 'Workflows' },
-            { id: 'models', label: 'Models' }
-          ]
-        },
-        {
-          title: 'Tools',
-          items: [
-            { id: 'node-editor', label: 'Node Editor' },
-            { id: 'image-browser', label: 'Image Browser' },
-            { id: 'queue-manager', label: 'Queue Manager' },
-            { id: 'extensions', label: 'Extensions' }
-          ]
-        },
-        { id: 'settings', label: 'Settings' }
-      ]
-      const active = ref<string | null>(null)
-      return { navItems, active }
-    },
-    template: `
-      <div class="w-full h-[560px] flex">
-        <div class="w-64 rounded-lg">
-          <LeftSidePanel v-model="active" :nav-items="navItems">
-            <template #header-icon>
-              <FolderOpen :size="14" />
-            </template>
-            <template #header-title>
-              Navigation
-            </template>
-          </LeftSidePanel>
-        </div>
-
-        <div class="flex-1 p-3 text-sm bg-gray-50 dark-theme:bg-zinc-900 border-t border-zinc-200 dark-theme:border-zinc-700">
-          Active: {{ active ?? 'None' }}
-        </div>
-      </div>
-    `
-  })
-}
diff --git a/src/components/widget/panel/LeftSidePanel.stories.ts b/src/components/widget/panel/LeftSidePanel.stories.ts
new file mode 100644
index 000000000..bbfee54c4
--- /dev/null
+++ b/src/components/widget/panel/LeftSidePanel.stories.ts
@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import LeftSidePanel from './LeftSidePanel.vue'
+
+const meta: Meta<typeof LeftSidePanel> = {
+  title: 'Components/Widget/Panel/LeftSidePanel',
+  component: LeftSidePanel,
+  argTypes: {
+    'header-icon': {
+      table: {
+        type: { summary: 'slot' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: false
+    },
+    'header-title': {
+      table: {
+        type: { summary: 'slot' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: false
+    },
+    'onUpdate:modelValue': {
+      table: { disable: true }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    modelValue: 'installed',
+    navItems: [
+      {
+        id: 'installed',
+        label: 'Installed',
+        icon: 'icon-[lucide--download]'
+      },
+      {
+        id: 'models',
+        label: 'Models',
+        icon: 'icon-[lucide--layers]'
+      },
+      {
+        id: 'nodes',
+        label: 'Nodes',
+        icon: 'icon-[lucide--grid-3x3]'
+      }
+    ]
+  },
+  render: (args) => ({
+    components: { LeftSidePanel },
+    setup() {
+      const selectedItem = ref(args.modelValue)
+      return { args, selectedItem }
+    },
+    template: `
+      <div style="height: 500px; width: 256px;">
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
+          <template #header-icon>
+            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+          </template>
+          <template #header-title>
+            <span class="text-neutral text-base">Navigation</span>
+          </template>
+        </LeftSidePanel>
+      </div>
+    `
+  })
+}
+
+export const WithGroups: Story = {
+  args: {
+    modelValue: 'tag-sd15',
+    navItems: [
+      {
+        id: 'installed',
+        label: 'Installed',
+        icon: 'icon-[lucide--download]'
+      },
+      {
+        title: 'TAGS',
+        items: [
+          {
+            id: 'tag-sd15',
+            label: 'SD 1.5',
+            icon: 'icon-[lucide--tag]'
+          },
+          {
+            id: 'tag-sdxl',
+            label: 'SDXL',
+            icon: 'icon-[lucide--tag]'
+          },
+          {
+            id: 'tag-utility',
+            label: 'Utility',
+            icon: 'icon-[lucide--tag]'
+          }
+        ]
+      },
+      {
+        title: 'CATEGORIES',
+        items: [
+          {
+            id: 'cat-models',
+            label: 'Models',
+            icon: 'icon-[lucide--layers]'
+          },
+          {
+            id: 'cat-nodes',
+            label: 'Nodes',
+            icon: 'icon-[lucide--grid-3x3]'
+          }
+        ]
+      }
+    ]
+  },
+  render: (args) => ({
+    components: { LeftSidePanel },
+    setup() {
+      const selectedItem = ref(args.modelValue)
+      return { args, selectedItem }
+    },
+    template: `
+      <div style="height: 500px; width: 256px;">
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
+          <template #header-icon>
+            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+          </template>
+          <template #header-title>
+            <span class="text-neutral text-base">Model Selector</span>
+          </template>
+        </LeftSidePanel>
+        <div class="mt-4 p-2 text-sm">
+          Selected: {{ selectedItem }}
+        </div>
+      </div>
+    `
+  })
+}
+
+export const DefaultIcons: Story = {
+  args: {
+    modelValue: 'home',
+    navItems: [
+      {
+        id: 'home',
+        label: 'Home',
+        icon: 'icon-[lucide--folder]'
+      },
+      {
+        id: 'documents',
+        label: 'Documents',
+        icon: 'icon-[lucide--folder]'
+      },
+      {
+        id: 'downloads',
+        label: 'Downloads',
+        icon: 'icon-[lucide--folder]'
+      },
+      {
+        id: 'desktop',
+        label: 'Desktop',
+        icon: 'icon-[lucide--folder]'
+      }
+    ]
+  },
+  render: (args) => ({
+    components: { LeftSidePanel },
+    setup() {
+      const selectedItem = ref(args.modelValue)
+      return { args, selectedItem }
+    },
+    template: `
+      <div style="height: 400px; width: 256px;">
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
+          <template #header-icon>
+            <i class="icon-[lucide--folder] size-4 text-neutral" />
+          </template>
+          <template #header-title>
+            <span class="text-neutral text-base">Files</span>
+          </template>
+        </LeftSidePanel>
+      </div>
+    `
+  })
+}
+
+export const LongLabels: Story = {
+  args: {
+    modelValue: 'general',
+    navItems: [
+      {
+        id: 'general',
+        label: 'General Settings',
+        icon: 'icon-[lucide--wrench]'
+      },
+      {
+        id: 'appearance',
+        label: 'Appearance & Themes Configuration',
+        icon: 'icon-[lucide--wrench]'
+      },
+      {
+        title: 'ADVANCED OPTIONS',
+        items: [
+          {
+            id: 'performance',
+            label: 'Performance & Optimization Settings',
+            icon: 'icon-[lucide--zap]'
+          },
+          {
+            id: 'experimental',
+            label: 'Experimental Features (Beta)',
+            icon: 'icon-[lucide--puzzle]'
+          }
+        ]
+      }
+    ]
+  },
+  render: (args) => ({
+    components: { LeftSidePanel },
+    setup() {
+      const selectedItem = ref(args.modelValue)
+      return { args, selectedItem }
+    },
+    template: `
+      <div style="height: 500px; width: 256px;">
+        <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
+          <template #header-icon>
+            <i class="icon-[lucide--settings] size-4 text-neutral" />
+          </template>
+          <template #header-title>
+            <span class="text-neutral text-base">Settings</span>
+          </template>
+        </LeftSidePanel>
+      </div>
+    `
+  })
+}
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index 425d37132..bcc84ffde 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -14,6 +14,7 @@
           <NavItem
             v-for="subItem in item.items"
             :key="subItem.id"
+            :icon="subItem.icon"
             :active="activeItem === subItem.id"
             @click="activeItem = subItem.id"
           >
@@ -22,6 +23,7 @@
         </div>
         <div v-else class="flex flex-col gap-2">
           <NavItem
+            :icon="item.icon"
             :active="activeItem === item.id"
             @click="activeItem = item.id"
           >
diff --git a/src/composables/bottomPanelTabs/useCommandSubcategories.ts b/src/composables/bottomPanelTabs/useCommandSubcategories.ts
index 18131b033..0fbf37ebe 100644
--- a/src/composables/bottomPanelTabs/useCommandSubcategories.ts
+++ b/src/composables/bottomPanelTabs/useCommandSubcategories.ts
@@ -2,12 +2,12 @@ import { type ComputedRef, computed } from 'vue'
 
 import { type ComfyCommandImpl } from '@/stores/commandStore'
 
-export type SubcategoryRule = {
+type SubcategoryRule = {
   pattern: string | RegExp
   subcategory: string
 }
 
-export type SubcategoryConfig = {
+type SubcategoryConfig = {
   defaultSubcategory: string
   rules: SubcategoryRule[]
 }
diff --git a/src/composables/canvas/useSelectionToolboxPosition.ts b/src/composables/canvas/useSelectionToolboxPosition.ts
index 8e327b05f..efb8d5ca7 100644
--- a/src/composables/canvas/useSelectionToolboxPosition.ts
+++ b/src/composables/canvas/useSelectionToolboxPosition.ts
@@ -3,8 +3,12 @@ import type { Ref } from 'vue'
 
 import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import { createBounds } from '@/lib/litegraph/src/litegraph'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { computeUnionBounds } from '@/utils/mathUtil'
 
 /**
  * Manages the position of the selection toolbox independently.
@@ -16,6 +20,7 @@ export function useSelectionToolboxPosition(
   const canvasStore = useCanvasStore()
   const lgCanvas = canvasStore.getCanvas()
   const { getSelectableItems } = useSelectedLiteGraphItems()
+  const { shouldRenderVueNodes } = useVueFeatureFlags()
 
   // World position of selection center
   const worldPosition = ref({ x: 0, y: 0 })
@@ -34,17 +39,40 @@ export function useSelectionToolboxPosition(
     }
 
     visible.value = true
-    const bounds = createBounds(selectableItems)
 
-    if (!bounds) {
-      return
+    // Get bounds for all selected items
+    const allBounds: ReadOnlyRect[] = []
+    for (const item of selectableItems) {
+      // Skip items without valid IDs
+      if (item.id == null) continue
+
+      if (shouldRenderVueNodes.value && typeof item.id === 'string') {
+        // Use layout store for Vue nodes (only works with string IDs)
+        const layout = layoutStore.getNodeLayoutRef(item.id).value
+        if (layout) {
+          allBounds.push([
+            layout.bounds.x,
+            layout.bounds.y,
+            layout.bounds.width,
+            layout.bounds.height
+          ])
+        }
+      } else {
+        // Fallback to LiteGraph bounds for regular nodes or non-string IDs
+        if (item instanceof LGraphNode) {
+          const bounds = item.getBounding()
+          allBounds.push([bounds[0], bounds[1], bounds[2], bounds[3]] as const)
+        }
+      }
     }
 
-    const [xBase, y, width] = bounds
+    // Compute union bounds
+    const unionBounds = computeUnionBounds(allBounds)
+    if (!unionBounds) return
 
     worldPosition.value = {
-      x: xBase + width / 2,
-      y: y
+      x: unionBounds.x + unionBounds.width / 2,
+      y: unionBounds.y - 10
     }
 
     updateTransform()
diff --git a/src/composables/element/useDomClipping.ts b/src/composables/element/useDomClipping.ts
index 843f76944..c3d41c998 100644
--- a/src/composables/element/useDomClipping.ts
+++ b/src/composables/element/useDomClipping.ts
@@ -23,7 +23,7 @@ function intersect(a: Rect, b: Rect): [number, number, number, number] | null {
   return [x1, y1, x2 - x1, y2 - y1]
 }
 
-export interface ClippingOptions {
+interface ClippingOptions {
   margin?: number
 }
 
diff --git a/src/composables/graph/useCanvasTransformSync.ts b/src/composables/graph/useCanvasTransformSync.ts
new file mode 100644
index 000000000..02145c100
--- /dev/null
+++ b/src/composables/graph/useCanvasTransformSync.ts
@@ -0,0 +1,115 @@
+import { onUnmounted, ref } from 'vue'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+interface CanvasTransformSyncOptions {
+  /**
+   * Whether to automatically start syncing when canvas is available
+   * @default true
+   */
+  autoStart?: boolean
+}
+
+interface CanvasTransformSyncCallbacks {
+  /**
+   * Called when sync starts
+   */
+  onStart?: () => void
+  /**
+   * Called after each sync update with timing information
+   */
+  onUpdate?: (duration: number) => void
+  /**
+   * Called when sync stops
+   */
+  onStop?: () => void
+}
+
+/**
+ * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
+ *
+ * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
+ * on every frame. It handles RAF lifecycle management, provides performance timing,
+ * and ensures proper cleanup.
+ *
+ * The sync function typically reads canvas.ds (draw state) properties like offset and scale
+ * to keep Vue components aligned with the canvas coordinate system.
+ *
+ * @example
+ * ```ts
+ * const { isActive, startSync, stopSync } = useCanvasTransformSync(
+ *   canvas,
+ *   (canvas) => syncWithCanvas(canvas),
+ *   {
+ *     onStart: () => emit('rafStatusChange', true),
+ *     onUpdate: (time) => emit('transformUpdate', time),
+ *     onStop: () => emit('rafStatusChange', false)
+ *   }
+ * )
+ * ```
+ */
+export function useCanvasTransformSync(
+  canvas: LGraphCanvas | undefined | null,
+  syncFn: (canvas: LGraphCanvas) => void,
+  callbacks: CanvasTransformSyncCallbacks = {},
+  options: CanvasTransformSyncOptions = {}
+) {
+  const { autoStart = true } = options
+  const { onStart, onUpdate, onStop } = callbacks
+
+  const isActive = ref(false)
+  let rafId: number | null = null
+
+  const startSync = () => {
+    if (isActive.value || !canvas) return
+
+    isActive.value = true
+    onStart?.()
+
+    const sync = () => {
+      if (!isActive.value || !canvas) return
+
+      try {
+        const startTime = performance.now()
+        syncFn(canvas)
+        const endTime = performance.now()
+
+        onUpdate?.(endTime - startTime)
+      } catch (error) {
+        console.warn('Canvas transform sync error:', error)
+      }
+
+      rafId = requestAnimationFrame(sync)
+    }
+
+    sync()
+  }
+
+  const stopSync = () => {
+    if (!isActive.value) return
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
+    isActive.value = false
+    onStop?.()
+  }
+
+  // Auto-start if canvas is available and autoStart is enabled
+  if (autoStart && canvas) {
+    startSync()
+  }
+
+  // Clean up on unmount
+  onUnmounted(() => {
+    stopSync()
+  })
+
+  return {
+    isActive,
+    startSync,
+    stopSync
+  }
+}
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
new file mode 100644
index 000000000..262d37639
--- /dev/null
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -0,0 +1,834 @@
+/**
+ * Vue node lifecycle management for LiteGraph integration
+ * Provides event-driven reactivity with performance optimizations
+ */
+import { nextTick, reactive } from 'vue'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
+import type { WidgetValue } from '@/types/simplifiedWidget'
+import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
+
+import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
+
+export interface NodeState {
+  visible: boolean
+  dirty: boolean
+  lastUpdate: number
+  culled: boolean
+}
+
+interface NodeMetadata {
+  lastRenderTime: number
+  cachedBounds: DOMRect | null
+  lodLevel: 'high' | 'medium' | 'low'
+  spatialIndex?: QuadTree<string>
+}
+
+interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  updateTime: number
+  nodeCount: number
+  culledCount: number
+  callbackUpdateCount: number
+  rafUpdateCount: number
+  adaptiveQuality: boolean
+}
+
+export interface SafeWidgetData {
+  name: string
+  type: string
+  value: WidgetValue
+  options?: Record<string, unknown>
+  callback?: ((value: unknown) => void) | undefined
+}
+
+export interface VueNodeData {
+  id: string
+  title: string
+  type: string
+  mode: number
+  selected: boolean
+  executing: boolean
+  widgets?: SafeWidgetData[]
+  inputs?: unknown[]
+  outputs?: unknown[]
+  flags?: {
+    collapsed?: boolean
+  }
+}
+
+interface SpatialMetrics {
+  queryTime: number
+  nodesInIndex: number
+}
+
+interface GraphNodeManager {
+  // Reactive state - safe data extracted from LiteGraph nodes
+  vueNodeData: ReadonlyMap<string, VueNodeData>
+  nodeState: ReadonlyMap<string, NodeState>
+  nodePositions: ReadonlyMap<string, { x: number; y: number }>
+  nodeSizes: ReadonlyMap<string, { width: number; height: number }>
+
+  // Access to original LiteGraph nodes (non-reactive)
+  getNode(id: string): LGraphNode | undefined
+
+  // Lifecycle methods
+  setupEventListeners(): () => void
+  cleanup(): void
+
+  // Update methods
+  scheduleUpdate(
+    nodeId?: string,
+    priority?: 'critical' | 'normal' | 'low'
+  ): void
+  forceSync(): void
+  detectChangesInRAF(): void
+
+  // Spatial queries
+  getVisibleNodeIds(viewportBounds: Bounds): Set<string>
+
+  // Performance
+  performanceMetrics: PerformanceMetrics
+  spatialMetrics: SpatialMetrics
+
+  // Debug
+  getSpatialIndexDebugInfo(): SpatialIndexDebugInfo | null
+}
+
+export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
+  // Get layout mutations composable
+  const { moveNode, resizeNode, createNode, deleteNode, setSource } =
+    useLayoutMutations()
+  // Safe reactive data extracted from LiteGraph nodes
+  const vueNodeData = reactive(new Map<string, VueNodeData>())
+  const nodeState = reactive(new Map<string, NodeState>())
+  const nodePositions = reactive(new Map<string, { x: number; y: number }>())
+  const nodeSizes = reactive(
+    new Map<string, { width: number; height: number }>()
+  )
+
+  // Non-reactive storage for original LiteGraph nodes
+  const nodeRefs = new Map<string, LGraphNode>()
+
+  // WeakMap for heavy data that auto-GCs when nodes are removed
+  const nodeMetadata = new WeakMap<LGraphNode, NodeMetadata>()
+
+  // Performance tracking
+  const performanceMetrics = reactive<PerformanceMetrics>({
+    fps: 0,
+    frameTime: 0,
+    updateTime: 0,
+    nodeCount: 0,
+    culledCount: 0,
+    callbackUpdateCount: 0,
+    rafUpdateCount: 0,
+    adaptiveQuality: false
+  })
+
+  // Spatial indexing using QuadTree
+  const spatialIndex = new QuadTree<string>(
+    { x: -10000, y: -10000, width: 20000, height: 20000 },
+    { maxDepth: 6, maxItemsPerNode: 4 }
+  )
+  let lastSpatialQueryTime = 0
+
+  // Spatial metrics
+  const spatialMetrics = reactive<SpatialMetrics>({
+    queryTime: 0,
+    nodesInIndex: 0
+  })
+
+  // Update batching
+  const pendingUpdates = new Set<string>()
+  const criticalUpdates = new Set<string>()
+  const lowPriorityUpdates = new Set<string>()
+  let updateScheduled = false
+  let batchTimeoutId: number | null = null
+
+  // Change detection state
+  const lastNodesSnapshot = new Map<
+    string,
+    { pos: [number, number]; size: [number, number] }
+  >()
+
+  const attachMetadata = (node: LGraphNode) => {
+    nodeMetadata.set(node, {
+      lastRenderTime: performance.now(),
+      cachedBounds: null,
+      lodLevel: 'high',
+      spatialIndex: undefined
+    })
+  }
+
+  // Extract safe data from LiteGraph node for Vue consumption
+  const extractVueNodeData = (node: LGraphNode): VueNodeData => {
+    // Extract safe widget data
+    const safeWidgets = node.widgets?.map((widget) => {
+      try {
+        // TODO: Use widget.getReactiveData() once TypeScript types are updated
+        let value = widget.value
+
+        // For combo widgets, if value is undefined, use the first option as default
+        if (
+          value === undefined &&
+          widget.type === 'combo' &&
+          widget.options?.values &&
+          Array.isArray(widget.options.values) &&
+          widget.options.values.length > 0
+        ) {
+          value = widget.options.values[0]
+        }
+
+        return {
+          name: widget.name,
+          type: widget.type,
+          value: value,
+          options: widget.options ? { ...widget.options } : undefined,
+          callback: widget.callback
+        }
+      } catch (error) {
+        return {
+          name: widget.name || 'unknown',
+          type: widget.type || 'text',
+          value: undefined, // Already a valid WidgetValue
+          options: undefined,
+          callback: undefined
+        }
+      }
+    })
+
+    return {
+      id: String(node.id),
+      title: node.title || 'Untitled',
+      type: node.type || 'Unknown',
+      mode: node.mode || 0,
+      selected: node.selected || false,
+      executing: false, // Will be updated separately based on execution state
+      widgets: safeWidgets,
+      inputs: node.inputs ? [...node.inputs] : undefined,
+      outputs: node.outputs ? [...node.outputs] : undefined,
+      flags: node.flags ? { ...node.flags } : undefined
+    }
+  }
+
+  // Get access to original LiteGraph node (non-reactive)
+  const getNode = (id: string): LGraphNode | undefined => {
+    return nodeRefs.get(id)
+  }
+
+  /**
+   * Validates that a value is a valid WidgetValue type
+   */
+  const validateWidgetValue = (value: unknown): WidgetValue => {
+    if (value === null || value === undefined || value === void 0) {
+      return undefined
+    }
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      return value
+    }
+    if (typeof value === 'object') {
+      // Check if it's a File array
+      if (
+        Array.isArray(value) &&
+        value.length > 0 &&
+        value.every((item): item is File => item instanceof File)
+      ) {
+        return value
+      }
+      // Otherwise it's a generic object
+      return value
+    }
+    // If none of the above, return undefined
+    console.warn(`Invalid widget value type: ${typeof value}`, value)
+    return undefined
+  }
+
+  /**
+   * Updates Vue state when widget values change
+   */
+  const updateVueWidgetState = (
+    nodeId: string,
+    widgetName: string,
+    value: unknown
+  ): void => {
+    try {
+      const currentData = vueNodeData.get(nodeId)
+      if (!currentData?.widgets) return
+
+      const updatedWidgets = currentData.widgets.map((w) =>
+        w.name === widgetName ? { ...w, value: validateWidgetValue(value) } : w
+      )
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        widgets: updatedWidgets
+      })
+      performanceMetrics.callbackUpdateCount++
+    } catch (error) {
+      // Ignore widget update errors to prevent cascade failures
+    }
+  }
+
+  /**
+   * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
+   */
+  const createWrappedWidgetCallback = (
+    widget: { value?: unknown; name: string }, // LiteGraph widget with minimal typing
+    originalCallback: ((value: unknown) => void) | undefined,
+    nodeId: string
+  ) => {
+    let updateInProgress = false
+
+    return (value: unknown) => {
+      if (updateInProgress) return
+      updateInProgress = true
+
+      try {
+        // 1. Update the widget value in LiteGraph (critical for LiteGraph state)
+        // Validate that the value is of an acceptable type
+        if (
+          value !== null &&
+          value !== undefined &&
+          typeof value !== 'string' &&
+          typeof value !== 'number' &&
+          typeof value !== 'boolean' &&
+          typeof value !== 'object'
+        ) {
+          console.warn(`Invalid widget value type: ${typeof value}`)
+          updateInProgress = false
+          return
+        }
+
+        // Always update widget.value to ensure sync
+        widget.value = value
+
+        // 2. Call the original callback if it exists
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        // 3. Update Vue state to maintain synchronization
+        updateVueWidgetState(nodeId, widget.name, value)
+      } finally {
+        updateInProgress = false
+      }
+    }
+  }
+
+  /**
+   * Sets up widget callbacks for a node - now with reduced nesting
+   */
+  const setupNodeWidgetCallbacks = (node: LGraphNode) => {
+    if (!node.widgets) return
+
+    const nodeId = String(node.id)
+
+    node.widgets.forEach((widget) => {
+      const originalCallback = widget.callback
+      widget.callback = createWrappedWidgetCallback(
+        widget,
+        originalCallback,
+        nodeId
+      )
+    })
+  }
+
+  // Uncomment when needed for future features
+  // const getNodeMetadata = (node: LGraphNode): NodeMetadata => {
+  //   let metadata = nodeMetadata.get(node)
+  //   if (!metadata) {
+  //     attachMetadata(node)
+  //     metadata = nodeMetadata.get(node)!
+  //   }
+  //   return metadata
+  // }
+
+  const scheduleUpdate = (
+    nodeId?: string,
+    priority: 'critical' | 'normal' | 'low' = 'normal'
+  ) => {
+    if (nodeId) {
+      const state = nodeState.get(nodeId)
+      if (state) state.dirty = true
+
+      // Priority queuing
+      if (priority === 'critical') {
+        criticalUpdates.add(nodeId)
+        flush() // Immediate flush for critical updates
+        return
+      } else if (priority === 'low') {
+        lowPriorityUpdates.add(nodeId)
+      } else {
+        pendingUpdates.add(nodeId)
+      }
+    }
+
+    if (!updateScheduled) {
+      updateScheduled = true
+
+      // Adaptive batching strategy
+      if (pendingUpdates.size > 10) {
+        // Many updates - batch in nextTick
+        void nextTick(() => flush())
+      } else {
+        // Few updates - small delay for more batching
+        batchTimeoutId = window.setTimeout(() => flush(), 4)
+      }
+    }
+  }
+
+  const flush = () => {
+    const startTime = performance.now()
+
+    if (batchTimeoutId !== null) {
+      clearTimeout(batchTimeoutId)
+      batchTimeoutId = null
+    }
+
+    // Clear all pending updates
+    criticalUpdates.clear()
+    pendingUpdates.clear()
+    lowPriorityUpdates.clear()
+    updateScheduled = false
+
+    // Sync with graph state
+    syncWithGraph()
+
+    const endTime = performance.now()
+    performanceMetrics.updateTime = endTime - startTime
+  }
+
+  const syncWithGraph = () => {
+    if (!graph?._nodes) return
+
+    const currentNodes = new Set(graph._nodes.map((n) => String(n.id)))
+
+    // Remove deleted nodes
+    for (const id of Array.from(vueNodeData.keys())) {
+      if (!currentNodes.has(id)) {
+        nodeRefs.delete(id)
+        vueNodeData.delete(id)
+        nodeState.delete(id)
+        nodePositions.delete(id)
+        nodeSizes.delete(id)
+        lastNodesSnapshot.delete(id)
+        spatialIndex.remove(id)
+      }
+    }
+
+    // Add/update existing nodes
+    graph._nodes.forEach((node) => {
+      const id = String(node.id)
+
+      // Store non-reactive reference
+      nodeRefs.set(id, node)
+
+      // Set up widget callbacks BEFORE extracting data (critical order)
+      setupNodeWidgetCallbacks(node)
+
+      // Extract and store safe data for Vue
+      vueNodeData.set(id, extractVueNodeData(node))
+
+      if (!nodeState.has(id)) {
+        nodeState.set(id, {
+          visible: true,
+          dirty: false,
+          lastUpdate: performance.now(),
+          culled: false
+        })
+        nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+        nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+        attachMetadata(node)
+
+        // Add to spatial index
+        const bounds: Bounds = {
+          x: node.pos[0],
+          y: node.pos[1],
+          width: node.size[0],
+          height: node.size[1]
+        }
+        spatialIndex.insert(id, bounds, id)
+      }
+    })
+
+    // Update performance metrics
+    performanceMetrics.nodeCount = vueNodeData.size
+    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
+      (s) => s.culled
+    ).length
+  }
+
+  // Most performant: Direct position sync without re-setting entire node
+  // Query visible nodes using QuadTree spatial index
+  const getVisibleNodeIds = (viewportBounds: Bounds): Set<string> => {
+    const startTime = performance.now()
+
+    // Use QuadTree for fast spatial query
+    const results: string[] = spatialIndex.query(viewportBounds)
+    const visibleIds = new Set(results)
+
+    lastSpatialQueryTime = performance.now() - startTime
+    spatialMetrics.queryTime = lastSpatialQueryTime
+
+    return visibleIds
+  }
+
+  /**
+   * Detects position changes for a single node and updates reactive state
+   */
+  const detectPositionChanges = (node: LGraphNode, id: string): boolean => {
+    const currentPos = nodePositions.get(id)
+
+    if (
+      !currentPos ||
+      currentPos.x !== node.pos[0] ||
+      currentPos.y !== node.pos[1]
+    ) {
+      nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+
+      // Push position change to layout store
+      // Source is already set to 'canvas' in detectChangesInRAF
+      void moveNode(id, { x: node.pos[0], y: node.pos[1] })
+
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Detects size changes for a single node and updates reactive state
+   */
+  const detectSizeChanges = (node: LGraphNode, id: string): boolean => {
+    const currentSize = nodeSizes.get(id)
+
+    if (
+      !currentSize ||
+      currentSize.width !== node.size[0] ||
+      currentSize.height !== node.size[1]
+    ) {
+      nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+
+      // Push size change to layout store
+      // Source is already set to 'canvas' in detectChangesInRAF
+      void resizeNode(id, {
+        width: node.size[0],
+        height: node.size[1]
+      })
+
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Updates spatial index for a node if bounds changed
+   */
+  const updateSpatialIndex = (node: LGraphNode, id: string): void => {
+    const bounds: Bounds = {
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1]
+    }
+    spatialIndex.update(id, bounds)
+  }
+
+  /**
+   * Updates performance metrics after change detection
+   */
+  const updatePerformanceMetrics = (
+    startTime: number,
+    positionUpdates: number,
+    sizeUpdates: number
+  ): void => {
+    const endTime = performance.now()
+    performanceMetrics.updateTime = endTime - startTime
+    performanceMetrics.nodeCount = vueNodeData.size
+    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
+      (state) => state.culled
+    ).length
+    spatialMetrics.nodesInIndex = spatialIndex.size
+
+    if (positionUpdates > 0 || sizeUpdates > 0) {
+      performanceMetrics.rafUpdateCount++
+    }
+  }
+
+  /**
+   * Main RAF change detection function
+   */
+  const detectChangesInRAF = () => {
+    const startTime = performance.now()
+
+    if (!graph?._nodes) return
+
+    let positionUpdates = 0
+    let sizeUpdates = 0
+
+    // Set source for all canvas-driven updates
+    setSource(LayoutSource.Canvas)
+
+    // Process each node for changes
+    for (const node of graph._nodes) {
+      const id = String(node.id)
+
+      const posChanged = detectPositionChanges(node, id)
+      const sizeChanged = detectSizeChanges(node, id)
+
+      if (posChanged) positionUpdates++
+      if (sizeChanged) sizeUpdates++
+
+      // Update spatial index if geometry changed
+      if (posChanged || sizeChanged) {
+        updateSpatialIndex(node, id)
+      }
+    }
+
+    updatePerformanceMetrics(startTime, positionUpdates, sizeUpdates)
+  }
+
+  /**
+   * Handles node addition to the graph - sets up Vue state and spatial indexing
+   * Defers position extraction until after potential configure() calls
+   */
+  const handleNodeAdded = (
+    node: LGraphNode,
+    originalCallback?: (node: LGraphNode) => void
+  ) => {
+    const id = String(node.id)
+
+    // Store non-reactive reference to original node
+    nodeRefs.set(id, node)
+
+    // Set up widget callbacks BEFORE extracting data (critical order)
+    setupNodeWidgetCallbacks(node)
+
+    // Extract safe data for Vue
+    vueNodeData.set(id, extractVueNodeData(node))
+
+    // Set up reactive tracking state
+    nodeState.set(id, {
+      visible: true,
+      dirty: false,
+      lastUpdate: performance.now(),
+      culled: false
+    })
+
+    const initializeVueNodeLayout = () => {
+      // Extract actual positions after configure() has potentially updated them
+      const nodePosition = { x: node.pos[0], y: node.pos[1] }
+      const nodeSize = { width: node.size[0], height: node.size[1] }
+
+      nodePositions.set(id, nodePosition)
+      nodeSizes.set(id, nodeSize)
+      attachMetadata(node)
+
+      // Add to spatial index for viewport culling with final positions
+      const nodeBounds: Bounds = {
+        x: nodePosition.x,
+        y: nodePosition.y,
+        width: nodeSize.width,
+        height: nodeSize.height
+      }
+      spatialIndex.insert(id, nodeBounds, id)
+
+      // Add node to layout store with final positions
+      setSource(LayoutSource.Canvas)
+      void createNode(id, {
+        position: nodePosition,
+        size: nodeSize,
+        zIndex: node.order || 0,
+        visible: true
+      })
+    }
+
+    // Check if we're in the middle of configuring the graph (workflow loading)
+    if (window.app?.configuringGraph) {
+      // During workflow loading - defer layout initialization until configure completes
+      // Chain our callback with any existing onAfterGraphConfigured callback
+      node.onAfterGraphConfigured = useChainCallback(
+        node.onAfterGraphConfigured,
+        initializeVueNodeLayout
+      )
+    } else {
+      // Not during workflow loading - initialize layout immediately
+      // This handles individual node additions during normal operation
+      initializeVueNodeLayout()
+    }
+
+    // Call original callback if provided
+    if (originalCallback) {
+      void originalCallback(node)
+    }
+  }
+
+  /**
+   * Handles node removal from the graph - cleans up all references
+   */
+  const handleNodeRemoved = (
+    node: LGraphNode,
+    originalCallback?: (node: LGraphNode) => void
+  ) => {
+    const id = String(node.id)
+
+    // Remove from spatial index
+    spatialIndex.remove(id)
+
+    // Remove node from layout store
+    setSource(LayoutSource.Canvas)
+    void deleteNode(id)
+
+    // Clean up all tracking references
+    nodeRefs.delete(id)
+    vueNodeData.delete(id)
+    nodeState.delete(id)
+    nodePositions.delete(id)
+    nodeSizes.delete(id)
+    lastNodesSnapshot.delete(id)
+
+    // Call original callback if provided
+    if (originalCallback) {
+      originalCallback(node)
+    }
+  }
+
+  /**
+   * Creates cleanup function for event listeners and state
+   */
+  const createCleanupFunction = (
+    originalOnNodeAdded: ((node: LGraphNode) => void) | undefined,
+    originalOnNodeRemoved: ((node: LGraphNode) => void) | undefined,
+    originalOnTrigger: ((action: string, param: unknown) => void) | undefined
+  ) => {
+    return () => {
+      // Restore original callbacks
+      graph.onNodeAdded = originalOnNodeAdded || undefined
+      graph.onNodeRemoved = originalOnNodeRemoved || undefined
+      graph.onTrigger = originalOnTrigger || undefined
+
+      // Clear pending updates
+      if (batchTimeoutId !== null) {
+        clearTimeout(batchTimeoutId)
+        batchTimeoutId = null
+      }
+
+      // Clear all state maps
+      nodeRefs.clear()
+      vueNodeData.clear()
+      nodeState.clear()
+      nodePositions.clear()
+      nodeSizes.clear()
+      lastNodesSnapshot.clear()
+      pendingUpdates.clear()
+      criticalUpdates.clear()
+      lowPriorityUpdates.clear()
+      spatialIndex.clear()
+    }
+  }
+
+  /**
+   * Sets up event listeners - now simplified with extracted handlers
+   */
+  const setupEventListeners = (): (() => void) => {
+    // Store original callbacks
+    const originalOnNodeAdded = graph.onNodeAdded
+    const originalOnNodeRemoved = graph.onNodeRemoved
+    const originalOnTrigger = graph.onTrigger
+
+    // Set up graph event handlers
+    graph.onNodeAdded = (node: LGraphNode) => {
+      handleNodeAdded(node, originalOnNodeAdded)
+    }
+
+    graph.onNodeRemoved = (node: LGraphNode) => {
+      handleNodeRemoved(node, originalOnNodeRemoved)
+    }
+
+    // Listen for property change events from instrumented nodes
+    graph.onTrigger = (action: string, param: unknown) => {
+      if (
+        action === 'node:property:changed' &&
+        param &&
+        typeof param === 'object'
+      ) {
+        const event = param as {
+          nodeId: string | number
+          property: string
+          oldValue: unknown
+          newValue: unknown
+        }
+
+        const nodeId = String(event.nodeId)
+        const currentData = vueNodeData.get(nodeId)
+
+        if (currentData) {
+          if (event.property === 'title') {
+            vueNodeData.set(nodeId, {
+              ...currentData,
+              title: String(event.newValue)
+            })
+          } else if (event.property === 'flags.collapsed') {
+            vueNodeData.set(nodeId, {
+              ...currentData,
+              flags: {
+                ...currentData.flags,
+                collapsed: Boolean(event.newValue)
+              }
+            })
+          }
+        }
+      }
+
+      // Call original trigger handler if it exists
+      if (originalOnTrigger) {
+        originalOnTrigger(action, param)
+      }
+    }
+
+    // Initialize state
+    syncWithGraph()
+
+    // Return cleanup function
+    return createCleanupFunction(
+      originalOnNodeAdded || undefined,
+      originalOnNodeRemoved || undefined,
+      originalOnTrigger || undefined
+    )
+  }
+
+  // Set up event listeners immediately
+  const cleanup = setupEventListeners()
+
+  // Process any existing nodes after event listeners are set up
+  if (graph._nodes && graph._nodes.length > 0) {
+    graph._nodes.forEach((node: LGraphNode) => {
+      if (graph.onNodeAdded) {
+        graph.onNodeAdded(node)
+      }
+    })
+  }
+
+  return {
+    vueNodeData,
+    nodeState,
+    nodePositions,
+    nodeSizes,
+    getNode,
+    setupEventListeners,
+    cleanup,
+    scheduleUpdate,
+    forceSync: syncWithGraph,
+    detectChangesInRAF,
+    getVisibleNodeIds,
+    performanceMetrics,
+    spatialMetrics,
+    getSpatialIndexDebugInfo: () => spatialIndex.getDebugInfo()
+  }
+}
diff --git a/src/composables/graph/useTransformSettling.ts b/src/composables/graph/useTransformSettling.ts
new file mode 100644
index 000000000..bc3d0fc06
--- /dev/null
+++ b/src/composables/graph/useTransformSettling.ts
@@ -0,0 +1,151 @@
+import { useDebounceFn, useEventListener, useThrottleFn } from '@vueuse/core'
+import { ref } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface TransformSettlingOptions {
+  /**
+   * Delay in ms before transform is considered "settled" after last interaction
+   * @default 200
+   */
+  settleDelay?: number
+  /**
+   * Whether to track both zoom (wheel) and pan (pointer drag) interactions
+   * @default false
+   */
+  trackPan?: boolean
+  /**
+   * Throttle delay for high-frequency pointermove events (only used when trackPan is true)
+   * @default 16 (~60fps)
+   */
+  pointerMoveThrottle?: number
+  /**
+   * Whether to use passive event listeners (better performance but can't preventDefault)
+   * @default true
+   */
+  passive?: boolean
+}
+
+/**
+ * Tracks when canvas transforms (zoom/pan) are actively changing vs settled.
+ *
+ * This composable helps optimize rendering quality during transformations.
+ * When the user is actively zooming or panning, we can reduce rendering quality
+ * for better performance. Once the transform "settles" (stops changing), we can
+ * trigger high-quality re-rasterization.
+ *
+ * The settling concept prevents constant quality switching during interactions
+ * by waiting for a period of inactivity before considering the transform complete.
+ *
+ * Uses VueUse's useEventListener for automatic cleanup and useDebounceFn for
+ * efficient settle detection.
+ *
+ * @example
+ * ```ts
+ * const { isTransforming } = useTransformSettling(canvasRef, {
+ *   settleDelay: 200,
+ *   trackPan: true
+ * })
+ *
+ * // Use in CSS classes or rendering logic
+ * const cssClass = computed(() => ({
+ *   'low-quality': isTransforming.value,
+ *   'high-quality': !isTransforming.value
+ * }))
+ * ```
+ */
+export function useTransformSettling(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+  options: TransformSettlingOptions = {}
+) {
+  const {
+    settleDelay = 200,
+    trackPan = false,
+    pointerMoveThrottle = 16,
+    passive = true
+  } = options
+
+  const isTransforming = ref(false)
+  let isPanning = false
+
+  /**
+   * Mark transform as active
+   */
+  const markTransformActive = () => {
+    isTransforming.value = true
+  }
+
+  /**
+   * Mark transform as settled (debounced)
+   */
+  const markTransformSettled = useDebounceFn(() => {
+    isTransforming.value = false
+  }, settleDelay)
+
+  /**
+   * Handle any transform event - mark active then queue settle
+   */
+  const handleTransformEvent = () => {
+    markTransformActive()
+    void markTransformSettled()
+  }
+
+  // Wheel handler
+  const handleWheel = () => {
+    handleTransformEvent()
+  }
+
+  // Pointer handlers for panning
+  const handlePointerDown = () => {
+    if (trackPan) {
+      isPanning = true
+      handleTransformEvent()
+    }
+  }
+
+  // Throttled pointer move handler for performance
+  const handlePointerMove = trackPan
+    ? useThrottleFn(() => {
+        if (isPanning) {
+          handleTransformEvent()
+        }
+      }, pointerMoveThrottle)
+    : undefined
+
+  const handlePointerEnd = () => {
+    if (trackPan) {
+      isPanning = false
+      // Don't immediately stop - let the debounced settle handle it
+    }
+  }
+
+  // Register event listeners with auto-cleanup
+  useEventListener(target, 'wheel', handleWheel, {
+    capture: true,
+    passive
+  })
+
+  if (trackPan) {
+    useEventListener(target, 'pointerdown', handlePointerDown, {
+      capture: true
+    })
+
+    if (handlePointerMove) {
+      useEventListener(target, 'pointermove', handlePointerMove, {
+        capture: true,
+        passive
+      })
+    }
+
+    useEventListener(target, 'pointerup', handlePointerEnd, {
+      capture: true
+    })
+
+    useEventListener(target, 'pointercancel', handlePointerEnd, {
+      capture: true
+    })
+  }
+
+  return {
+    isTransforming
+  }
+}
diff --git a/src/composables/graph/useViewportCulling.ts b/src/composables/graph/useViewportCulling.ts
new file mode 100644
index 000000000..b5c996f93
--- /dev/null
+++ b/src/composables/graph/useViewportCulling.ts
@@ -0,0 +1,212 @@
+/**
+ * Viewport Culling Composable
+ *
+ * Handles viewport culling optimization for Vue nodes including:
+ * - Transform state synchronization
+ * - Visible node calculation with screen space transforms
+ * - Adaptive margin computation based on zoom level
+ * - Performance optimizations for large graphs
+ */
+import { type Ref, computed, readonly, ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
+import { app as comfyApp } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface NodeManager {
+  getNode: (id: string) => any
+}
+
+export function useViewportCulling(
+  isVueNodesEnabled: Ref<boolean>,
+  vueNodeData: Ref<ReadonlyMap<string, VueNodeData>>,
+  nodeDataTrigger: Ref<number>,
+  nodeManager: Ref<NodeManager | null>
+) {
+  const canvasStore = useCanvasStore()
+  const { syncWithCanvas } = useTransformState()
+
+  // Transform tracking for performance optimization
+  const lastScale = ref(1)
+  const lastOffsetX = ref(0)
+  const lastOffsetY = ref(0)
+
+  // Current transform state
+  const currentTransformState = computed(() => ({
+    scale: lastScale.value,
+    offsetX: lastOffsetX.value,
+    offsetY: lastOffsetY.value
+  }))
+
+  /**
+   * Computed property that returns nodes visible in the current viewport
+   * Implements sophisticated culling algorithm with adaptive margins
+   */
+  const nodesToRender = computed(() => {
+    if (!isVueNodesEnabled.value) {
+      return []
+    }
+
+    // Access trigger to force re-evaluation after nodeManager initialization
+    void nodeDataTrigger.value
+
+    if (!comfyApp.graph) {
+      return []
+    }
+
+    const allNodes = Array.from(vueNodeData.value.values())
+
+    // Apply viewport culling - check if node bounds intersect with viewport
+    // TODO: use quadtree
+    if (nodeManager.value && canvasStore.canvas && comfyApp.canvas) {
+      const canvas = canvasStore.canvas
+      const manager = nodeManager.value
+
+      // Ensure transform is synced before checking visibility
+      syncWithCanvas(comfyApp.canvas)
+
+      const ds = canvas.ds
+
+      // Work in screen space - viewport is simply the canvas element size
+      const viewport_width = canvas.canvas.width
+      const viewport_height = canvas.canvas.height
+
+      // Add margin that represents a constant distance in canvas space
+      // Convert canvas units to screen pixels by multiplying by scale
+      const canvasMarginDistance = 200 // Fixed margin in canvas units
+      const margin_x = canvasMarginDistance * ds.scale
+      const margin_y = canvasMarginDistance * ds.scale
+
+      const filtered = allNodes.filter((nodeData) => {
+        const node = manager.getNode(nodeData.id)
+        if (!node) return false
+
+        // Transform node position to screen space (same as DOM widgets)
+        const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
+        const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
+        const screen_width = node.size[0] * ds.scale
+        const screen_height = node.size[1] * ds.scale
+
+        // Check if node bounds intersect with expanded viewport (in screen space)
+        const isVisible = !(
+          screen_x + screen_width < -margin_x ||
+          screen_x > viewport_width + margin_x ||
+          screen_y + screen_height < -margin_y ||
+          screen_y > viewport_height + margin_y
+        )
+
+        return isVisible
+      })
+
+      return filtered
+    }
+
+    return allNodes
+  })
+
+  /**
+   * Handle transform updates with performance optimization
+   * Only syncs when transform actually changes to avoid unnecessary reflows
+   */
+  const handleTransformUpdate = (detectChangesInRAF: () => void) => {
+    // Skip all work if Vue nodes are disabled
+    if (!isVueNodesEnabled.value) {
+      return
+    }
+
+    // Sync transform state only when it changes (avoids reflows)
+    if (comfyApp.canvas?.ds) {
+      const currentScale = comfyApp.canvas.ds.scale
+      const currentOffsetX = comfyApp.canvas.ds.offset[0]
+      const currentOffsetY = comfyApp.canvas.ds.offset[1]
+
+      if (
+        currentScale !== lastScale.value ||
+        currentOffsetX !== lastOffsetX.value ||
+        currentOffsetY !== lastOffsetY.value
+      ) {
+        syncWithCanvas(comfyApp.canvas)
+        lastScale.value = currentScale
+        lastOffsetX.value = currentOffsetX
+        lastOffsetY.value = currentOffsetY
+      }
+    }
+
+    // Detect node changes during transform updates
+    detectChangesInRAF()
+
+    // Trigger reactivity for nodesToRender
+    void nodesToRender.value.length
+  }
+
+  /**
+   * Calculate if a specific node is visible in viewport
+   * Useful for individual node visibility checks
+   */
+  const isNodeVisible = (nodeData: VueNodeData): boolean => {
+    if (!nodeManager.value || !canvasStore.canvas || !comfyApp.canvas) {
+      return true // Default to visible if culling not available
+    }
+
+    const canvas = canvasStore.canvas
+    const node = nodeManager.value.getNode(nodeData.id)
+    if (!node) return false
+
+    syncWithCanvas(comfyApp.canvas)
+    const ds = canvas.ds
+
+    const viewport_width = canvas.canvas.width
+    const viewport_height = canvas.canvas.height
+    const canvasMarginDistance = 200
+    const margin_x = canvasMarginDistance * ds.scale
+    const margin_y = canvasMarginDistance * ds.scale
+
+    const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
+    const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
+    const screen_width = node.size[0] * ds.scale
+    const screen_height = node.size[1] * ds.scale
+
+    return !(
+      screen_x + screen_width < -margin_x ||
+      screen_x > viewport_width + margin_x ||
+      screen_y + screen_height < -margin_y ||
+      screen_y > viewport_height + margin_y
+    )
+  }
+
+  /**
+   * Get viewport bounds information for debugging
+   */
+  const getViewportInfo = () => {
+    if (!canvasStore.canvas || !comfyApp.canvas) {
+      return null
+    }
+
+    const canvas = canvasStore.canvas
+    const ds = canvas.ds
+
+    return {
+      viewport_width: canvas.canvas.width,
+      viewport_height: canvas.canvas.height,
+      scale: ds.scale,
+      offset: [ds.offset[0], ds.offset[1]],
+      margin_distance: 200,
+      margin_x: 200 * ds.scale,
+      margin_y: 200 * ds.scale
+    }
+  }
+
+  return {
+    nodesToRender,
+    handleTransformUpdate,
+    isNodeVisible,
+    getViewportInfo,
+
+    // Transform state
+    currentTransformState: readonly(currentTransformState),
+    lastScale: readonly(lastScale),
+    lastOffsetX: readonly(lastOffsetX),
+    lastOffsetY: readonly(lastOffsetY)
+  }
+}
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
new file mode 100644
index 000000000..ea275e220
--- /dev/null
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -0,0 +1,246 @@
+/**
+ * Vue Node Lifecycle Management Composable
+ *
+ * Handles the complete lifecycle of Vue node rendering system including:
+ * - Node manager initialization and cleanup
+ * - Layout store synchronization
+ * - Slot and link sync management
+ * - Reactive state management for node data, positions, and sizes
+ * - Memory management and proper cleanup
+ */
+import { type Ref, computed, readonly, ref, shallowRef, watch } from 'vue'
+
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type {
+  NodeState,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
+import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
+import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
+import { app as comfyApp } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+
+export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
+  const canvasStore = useCanvasStore()
+  const layoutMutations = useLayoutMutations()
+
+  const nodeManager = shallowRef<ReturnType<typeof useGraphNodeManager> | null>(
+    null
+  )
+  const cleanupNodeManager = shallowRef<(() => void) | null>(null)
+
+  // Sync management
+  const slotSync = shallowRef<ReturnType<typeof useSlotLayoutSync> | null>(null)
+  const slotSyncStarted = ref(false)
+  const linkSync = shallowRef<ReturnType<typeof useLinkLayoutSync> | null>(null)
+
+  // Vue node data state
+  const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
+  const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
+  const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
+    new Map()
+  )
+  const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
+    new Map()
+  )
+
+  // Change detection function
+  const detectChangesInRAF = ref<() => void>(() => {})
+
+  // Trigger for forcing computed re-evaluation
+  const nodeDataTrigger = ref(0)
+
+  const isNodeManagerReady = computed(() => nodeManager.value !== null)
+
+  const initializeNodeManager = () => {
+    if (!comfyApp.graph || nodeManager.value) return
+
+    // Initialize the core node manager
+    const manager = useGraphNodeManager(comfyApp.graph)
+    nodeManager.value = manager
+    cleanupNodeManager.value = manager.cleanup
+
+    // Use the manager's data maps
+    vueNodeData.value = manager.vueNodeData
+    nodeState.value = manager.nodeState
+    nodePositions.value = manager.nodePositions
+    nodeSizes.value = manager.nodeSizes
+    detectChangesInRAF.value = manager.detectChangesInRAF
+
+    // Initialize layout system with existing nodes
+    const nodes = comfyApp.graph._nodes.map((node: LGraphNode) => ({
+      id: node.id.toString(),
+      pos: [node.pos[0], node.pos[1]] as [number, number],
+      size: [node.size[0], node.size[1]] as [number, number]
+    }))
+    layoutStore.initializeFromLiteGraph(nodes)
+
+    // Seed reroutes into the Layout Store so hit-testing uses the new path
+    for (const reroute of comfyApp.graph.reroutes.values()) {
+      const [x, y] = reroute.pos
+      const parent = reroute.parentId ?? undefined
+      const linkIds = Array.from(reroute.linkIds)
+      layoutMutations.createReroute(reroute.id, { x, y }, parent, linkIds)
+    }
+
+    // Seed existing links into the Layout Store (topology only)
+    for (const link of comfyApp.graph._links.values()) {
+      layoutMutations.createLink(
+        link.id,
+        link.origin_id,
+        link.origin_slot,
+        link.target_id,
+        link.target_slot
+      )
+    }
+
+    // Initialize layout sync (one-way: Layout Store → LiteGraph)
+    const { startSync } = useLayoutSync()
+    startSync(canvasStore.canvas)
+
+    // Initialize link layout sync for event-driven updates
+    const linkSyncManager = useLinkLayoutSync()
+    linkSync.value = linkSyncManager
+    if (comfyApp.canvas) {
+      linkSyncManager.start(comfyApp.canvas)
+    }
+
+    // Force computed properties to re-evaluate
+    nodeDataTrigger.value++
+  }
+
+  const disposeNodeManagerAndSyncs = () => {
+    if (!nodeManager.value) return
+
+    try {
+      cleanupNodeManager.value?.()
+    } catch {
+      /* empty */
+    }
+    nodeManager.value = null
+    cleanupNodeManager.value = null
+
+    // Clean up link layout sync
+    if (linkSync.value) {
+      linkSync.value.stop()
+      linkSync.value = null
+    }
+
+    // Reset reactive maps to clean state
+    vueNodeData.value = new Map()
+    nodeState.value = new Map()
+    nodePositions.value = new Map()
+    nodeSizes.value = new Map()
+
+    // Reset change detection function
+    detectChangesInRAF.value = () => {}
+  }
+
+  // Watch for Vue nodes enabled state changes
+  watch(
+    () => isVueNodesEnabled.value && Boolean(comfyApp.graph),
+    (enabled) => {
+      if (enabled) {
+        initializeNodeManager()
+      } else {
+        disposeNodeManagerAndSyncs()
+      }
+    },
+    { immediate: true }
+  )
+
+  // Consolidated watch for slot layout sync management
+  watch(
+    [() => canvasStore.canvas, () => isVueNodesEnabled.value],
+    ([canvas, vueMode], [, oldVueMode]) => {
+      const modeChanged = vueMode !== oldVueMode
+
+      // Clear stale slot layouts when switching modes
+      if (modeChanged) {
+        layoutStore.clearAllSlotLayouts()
+      }
+
+      // Switching to Vue
+      if (vueMode && slotSyncStarted.value) {
+        slotSync.value?.stop()
+        slotSyncStarted.value = false
+      }
+
+      // Switching to LG
+      const shouldRun = Boolean(canvas?.graph) && !vueMode
+      if (shouldRun && !slotSyncStarted.value && canvas) {
+        // Initialize slot sync if not already created
+        if (!slotSync.value) {
+          slotSync.value = useSlotLayoutSync()
+        }
+        const started = slotSync.value.attemptStart(canvas as LGraphCanvas)
+        slotSyncStarted.value = started
+      }
+    },
+    { immediate: true }
+  )
+
+  // Handle case where Vue nodes are enabled but graph starts empty
+  const setupEmptyGraphListener = () => {
+    if (
+      isVueNodesEnabled.value &&
+      comfyApp.graph &&
+      !nodeManager.value &&
+      comfyApp.graph._nodes.length === 0
+    ) {
+      const originalOnNodeAdded = comfyApp.graph.onNodeAdded
+      comfyApp.graph.onNodeAdded = function (node: LGraphNode) {
+        // Restore original handler
+        comfyApp.graph.onNodeAdded = originalOnNodeAdded
+
+        // Initialize node manager if needed
+        if (isVueNodesEnabled.value && !nodeManager.value) {
+          initializeNodeManager()
+        }
+
+        // Call original handler
+        if (originalOnNodeAdded) {
+          originalOnNodeAdded.call(this, node)
+        }
+      }
+    }
+  }
+
+  // Cleanup function for component unmounting
+  const cleanup = () => {
+    if (nodeManager.value) {
+      nodeManager.value.cleanup()
+      nodeManager.value = null
+    }
+    if (slotSyncStarted.value) {
+      slotSync.value?.stop()
+      slotSyncStarted.value = false
+    }
+    slotSync.value = null
+    if (linkSync.value) {
+      linkSync.value.stop()
+      linkSync.value = null
+    }
+  }
+
+  return {
+    vueNodeData,
+    nodeState,
+    nodePositions,
+    nodeSizes,
+    nodeDataTrigger: readonly(nodeDataTrigger),
+    nodeManager: readonly(nodeManager),
+    detectChangesInRAF: readonly(detectChangesInRAF),
+    isNodeManagerReady,
+
+    // Lifecycle methods
+    initializeNodeManager,
+    disposeNodeManagerAndSyncs,
+    setupEmptyGraphListener,
+    cleanup
+  }
+}
diff --git a/src/composables/graph/useWidgetValue.ts b/src/composables/graph/useWidgetValue.ts
new file mode 100644
index 000000000..96b5edcce
--- /dev/null
+++ b/src/composables/graph/useWidgetValue.ts
@@ -0,0 +1,149 @@
+/**
+ * Composable for managing widget value synchronization between Vue and LiteGraph
+ * Provides consistent pattern for immediate UI updates and LiteGraph callbacks
+ */
+import { type Ref, ref, watch } from 'vue'
+
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+interface UseWidgetValueOptions<T extends WidgetValue = WidgetValue, U = T> {
+  /** The widget configuration from LiteGraph */
+  widget: SimplifiedWidget<T>
+  /** The current value from parent component */
+  modelValue: T
+  /** Default value if modelValue is null/undefined */
+  defaultValue: T
+  /** Emit function from component setup */
+  emit: (event: 'update:modelValue', value: T) => void
+  /** Optional value transformer before sending to LiteGraph */
+  transform?: (value: U) => T
+}
+
+interface UseWidgetValueReturn<T extends WidgetValue = WidgetValue, U = T> {
+  /** Local value for immediate UI updates */
+  localValue: Ref<T>
+  /** Handler for user interactions */
+  onChange: (newValue: U) => void
+}
+
+/**
+ * Manages widget value synchronization with LiteGraph
+ *
+ * @example
+ * ```vue
+ * const { localValue, onChange } = useWidgetValue({
+ *   widget: props.widget,
+ *   modelValue: props.modelValue,
+ *   defaultValue: ''
+ * })
+ * ```
+ */
+export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
+  widget,
+  modelValue,
+  defaultValue,
+  emit,
+  transform
+}: UseWidgetValueOptions<T, U>): UseWidgetValueReturn<T, U> {
+  // Local value for immediate UI updates
+  const localValue = ref<T>(modelValue ?? defaultValue)
+
+  // Handle user changes
+  const onChange = (newValue: U) => {
+    // Handle different PrimeVue component signatures
+    let processedValue: T
+    if (transform) {
+      processedValue = transform(newValue)
+    } else {
+      // Ensure type safety - only cast when types are compatible
+      if (
+        typeof newValue === typeof defaultValue ||
+        newValue === null ||
+        newValue === undefined
+      ) {
+        processedValue = (newValue ?? defaultValue) as T
+      } else {
+        console.warn(
+          `useWidgetValue: Type mismatch for widget ${widget.name}. Expected ${typeof defaultValue}, got ${typeof newValue}`
+        )
+        processedValue = defaultValue
+      }
+    }
+
+    // 1. Update local state for immediate UI feedback
+    localValue.value = processedValue
+
+    // 2. Emit to parent component
+    emit('update:modelValue', processedValue)
+  }
+
+  // Watch for external updates from LiteGraph
+  watch(
+    () => modelValue,
+    (newValue) => {
+      localValue.value = newValue ?? defaultValue
+    }
+  )
+
+  return {
+    localValue: localValue as Ref<T>,
+    onChange
+  }
+}
+
+/**
+ * Type-specific helper for string widgets
+ */
+export function useStringWidgetValue(
+  widget: SimplifiedWidget<string>,
+  modelValue: string,
+  emit: (event: 'update:modelValue', value: string) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: '',
+    emit,
+    transform: (value: string | undefined) => String(value || '') // Handle undefined from PrimeVue
+  })
+}
+
+/**
+ * Type-specific helper for number widgets
+ */
+export function useNumberWidgetValue(
+  widget: SimplifiedWidget<number>,
+  modelValue: number,
+  emit: (event: 'update:modelValue', value: number) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: 0,
+    emit,
+    transform: (value: number | number[]) => {
+      // Handle PrimeVue Slider which can emit number | number[]
+      if (Array.isArray(value)) {
+        return value.length > 0 ? value[0] ?? 0 : 0
+      }
+      return Number(value) || 0
+    }
+  })
+}
+
+/**
+ * Type-specific helper for boolean widgets
+ */
+export function useBooleanWidgetValue(
+  widget: SimplifiedWidget<boolean>,
+  modelValue: boolean,
+  emit: (event: 'update:modelValue', value: boolean) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: false,
+    emit,
+    transform: (value: boolean) => Boolean(value)
+  })
+}
diff --git a/src/composables/node/useNodeCanvasImagePreview.ts b/src/composables/node/useNodeCanvasImagePreview.ts
index 98d49b485..008119407 100644
--- a/src/composables/node/useNodeCanvasImagePreview.ts
+++ b/src/composables/node/useNodeCanvasImagePreview.ts
@@ -1,5 +1,5 @@
-import { useImagePreviewWidget } from '@/composables/widgets/useImagePreviewWidget'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useImagePreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget'
 
 const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
 
diff --git a/src/composables/node/useNodeChatHistory.ts b/src/composables/node/useNodeChatHistory.ts
index 8fbe78895..a1fa3ad3a 100644
--- a/src/composables/node/useNodeChatHistory.ts
+++ b/src/composables/node/useNodeChatHistory.ts
@@ -1,6 +1,6 @@
 import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-import { useChatHistoryWidget } from '@/composables/widgets/useChatHistoryWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useChatHistoryWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget'
 
 const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
 
diff --git a/src/composables/node/useNodeImage.ts b/src/composables/node/useNodeImage.ts
index 19a461ade..83600aec2 100644
--- a/src/composables/node/useNodeImage.ts
+++ b/src/composables/node/useNodeImage.ts
@@ -35,7 +35,7 @@ const createContainer = () => {
 const createTimeout = (ms: number) =>
   new Promise<null>((resolve) => setTimeout(() => resolve(null), ms))
 
-export const useNodePreview = <T extends MediaElement>(
+const useNodePreview = <T extends MediaElement>(
   node: LGraphNode,
   options: NodePreviewOptions<T>
 ) => {
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index b2ad2ff99..e85e6adb6 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -1031,6 +1031,15 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     StabilityUpscaleFastNode: {
       displayPrice: '$0.01/Run'
     },
+    StabilityTextToAudio: {
+      displayPrice: '$0.20/Run'
+    },
+    StabilityAudioToAudio: {
+      displayPrice: '$0.20/Run'
+    },
+    StabilityAudioInpaint: {
+      displayPrice: '$0.20/Run'
+    },
     VeoVideoGenerationNode: {
       displayPrice: (node: LGraphNode): string => {
         const durationWidget = node.widgets?.find(
@@ -1053,7 +1062,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         ) as IComboWidget
 
         if (!modelWidget || !generateAudioWidget) {
-          return '$2.00-6.00/Run (varies with model & audio generation)'
+          return '$0.80-3.20/Run (varies with model & audio generation)'
         }
 
         const model = String(modelWidget.value)
@@ -1061,13 +1070,13 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
           String(generateAudioWidget.value).toLowerCase() === 'true'
 
         if (model.includes('veo-3.0-fast-generate-001')) {
-          return generateAudio ? '$3.20/Run' : '$2.00/Run'
+          return generateAudio ? '$1.20/Run' : '$0.80/Run'
         } else if (model.includes('veo-3.0-generate-001')) {
-          return generateAudio ? '$6.00/Run' : '$4.00/Run'
+          return generateAudio ? '$3.20/Run' : '$1.60/Run'
         }
 
         // Default fallback
-        return '$2.00-6.00/Run'
+        return '$0.80-3.20/Run'
       }
     },
     LumaImageNode: {
@@ -1502,6 +1511,32 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return 'Token-based'
       }
     },
+    ByteDanceSeedreamNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const sequentialGenerationWidget = node.widgets?.find(
+          (w) => w.name === 'sequential_image_generation'
+        ) as IComboWidget
+        const maxImagesWidget = node.widgets?.find(
+          (w) => w.name === 'max_images'
+        ) as IComboWidget
+
+        if (!sequentialGenerationWidget || !maxImagesWidget)
+          return '$0.03/Run ($0.03 for one output image)'
+
+        if (
+          String(sequentialGenerationWidget.value).toLowerCase() === 'disabled'
+        ) {
+          return '$0.03/Run'
+        }
+
+        const maxImages = Number(maxImagesWidget.value)
+        if (maxImages === 1) {
+          return '$0.03/Run'
+        }
+        const cost = (0.03 * maxImages).toFixed(2)
+        return `$${cost}/Run ($0.03 for one output image)`
+      }
+    },
     ByteDanceTextToVideoNode: {
       displayPrice: byteDanceVideoPricingCalculator
     },
@@ -1604,6 +1639,11 @@ export const useNodePricing = () => {
       // ByteDance
       ByteDanceImageNode: ['model'],
       ByteDanceImageEditNode: ['model'],
+      ByteDanceSeedreamNode: [
+        'model',
+        'sequential_image_generation',
+        'max_images'
+      ],
       ByteDanceTextToVideoNode: ['model', 'duration', 'resolution'],
       ByteDanceImageToVideoNode: ['model', 'duration', 'resolution'],
       ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],
diff --git a/src/composables/node/useNodeProgressText.ts b/src/composables/node/useNodeProgressText.ts
index 12e09bd5e..07e7488ea 100644
--- a/src/composables/node/useNodeProgressText.ts
+++ b/src/composables/node/useNodeProgressText.ts
@@ -1,5 +1,5 @@
-import { useTextPreviewWidget } from '@/composables/widgets/useProgressTextWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useTextPreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget'
 
 const TEXT_PREVIEW_WIDGET_NAME = '$$node-text-preview'
 
diff --git a/src/composables/node/useWatchWidget.ts b/src/composables/node/useWatchWidget.ts
index e32cb0101..2897de949 100644
--- a/src/composables/node/useWatchWidget.ts
+++ b/src/composables/node/useWatchWidget.ts
@@ -4,7 +4,7 @@ import { type ComputedRef, ref } from 'vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-export interface UseComputedWithWidgetWatchOptions {
+interface UseComputedWithWidgetWatchOptions {
   /**
    * Names of widgets to observe for changes.
    * If not provided, all widgets will be observed.
diff --git a/src/composables/nodePack/usePacksSelection.ts b/src/composables/nodePack/usePacksSelection.ts
index 9643fab0e..7bfbaa4c3 100644
--- a/src/composables/nodePack/usePacksSelection.ts
+++ b/src/composables/nodePack/usePacksSelection.ts
@@ -5,7 +5,7 @@ import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-export type SelectionState = 'all-installed' | 'none-installed' | 'mixed'
+type SelectionState = 'all-installed' | 'none-installed' | 'mixed'
 
 /**
  * Composable for managing multi-package selection states
diff --git a/src/composables/nodePack/useUpdateAvailableNodes.ts b/src/composables/nodePack/useUpdateAvailableNodes.ts
index 516ffffdb..593c867d5 100644
--- a/src/composables/nodePack/useUpdateAvailableNodes.ts
+++ b/src/composables/nodePack/useUpdateAvailableNodes.ts
@@ -44,9 +44,24 @@ export const useUpdateAvailableNodes = () => {
     return filterOutdatedPacks(installedPacks.value)
   })
 
-  // Check if there are any outdated packs
+  // Filter only enabled outdated packs
+  const enabledUpdateAvailableNodePacks = computed(() => {
+    return updateAvailableNodePacks.value.filter((pack) =>
+      comfyManagerStore.isPackEnabled(pack.id)
+    )
+  })
+
+  // Check if there are any enabled outdated packs
   const hasUpdateAvailable = computed(() => {
-    return updateAvailableNodePacks.value.length > 0
+    return enabledUpdateAvailableNodePacks.value.length > 0
+  })
+
+  // Check if there are disabled packs with updates
+  const hasDisabledUpdatePacks = computed(() => {
+    return (
+      updateAvailableNodePacks.value.length >
+      enabledUpdateAvailableNodePacks.value.length
+    )
   })
 
   // Automatically fetch installed pack data when composable is used
@@ -58,7 +73,9 @@ export const useUpdateAvailableNodes = () => {
 
   return {
     updateAvailableNodePacks,
+    enabledUpdateAvailableNodePacks,
     hasUpdateAvailable,
+    hasDisabledUpdatePacks,
     isLoading,
     error
   }
diff --git a/src/composables/nodePack/useWorkflowPacks.ts b/src/composables/nodePack/useWorkflowPacks.ts
index ea7429fda..73ee14dca 100644
--- a/src/composables/nodePack/useWorkflowPacks.ts
+++ b/src/composables/nodePack/useWorkflowPacks.ts
@@ -61,7 +61,7 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
     const nodeDef = nodeDefStore.nodeDefsByName[nodeName]
     if (nodeDef?.nodeSource.type === 'core') {
       if (!systemStatsStore.systemStats) {
-        await systemStatsStore.fetchSystemStats()
+        await systemStatsStore.refetchSystemStats()
       }
       return {
         id: CORE_NODES_PACK_NAME,
diff --git a/src/composables/useCachedRequest.ts b/src/composables/useCachedRequest.ts
index 3ecc69f7a..db7a2e86e 100644
--- a/src/composables/useCachedRequest.ts
+++ b/src/composables/useCachedRequest.ts
@@ -4,7 +4,7 @@ import { paramsToCacheKey } from '@/utils/formatUtil'
 
 const DEFAULT_MAX_SIZE = 50
 
-export interface CachedRequestOptions {
+interface CachedRequestOptions {
   /**
    * Maximum number of items to store in the cache
    * @default 50
diff --git a/src/composables/useConflictDetection.ts b/src/composables/useConflictDetection.ts
index 6ec8f2cdb..abf4d9498 100644
--- a/src/composables/useConflictDetection.ts
+++ b/src/composables/useConflictDetection.ts
@@ -1,3 +1,4 @@
+import { until } from '@vueuse/core'
 import { uniqBy } from 'es-toolkit/compat'
 import { computed, getCurrentInstance, onUnmounted, readonly, ref } from 'vue'
 
@@ -21,6 +22,7 @@ import type {
   NodePackRequirements,
   SystemEnvironment
 } from '@/types/conflictDetectionTypes'
+import { normalizePackId } from '@/utils/packUtils'
 import {
   cleanVersion,
   satisfiesVersion,
@@ -78,9 +80,8 @@ export function useConflictDetection() {
     try {
       // Get system stats from store (primary source of system information)
       const systemStatsStore = useSystemStatsStore()
-      if (!systemStatsStore.systemStats) {
-        await systemStatsStore.fetchSystemStats()
-      }
+      // Wait for systemStats to be initialized if not already
+      await until(systemStatsStore.isInitialized)
 
       // Fetch version information from backend (with error resilience)
       const [frontendVersion] = await Promise.allSettled([
@@ -127,7 +128,7 @@ export function useConflictDetection() {
       }
 
       systemEnvironment.value = environment
-      console.log(
+      console.debug(
         '[ConflictDetection] System environment detection completed:',
         environment
       )
@@ -427,7 +428,7 @@ export function useConflictDetection() {
         Object.entries(bulkResult).forEach(([packageId, failInfo]) => {
           if (failInfo !== null) {
             importFailures[packageId] = failInfo
-            console.log(
+            console.debug(
               `[ConflictDetection] Import failure found for ${packageId}:`,
               failInfo
             )
@@ -500,7 +501,7 @@ export function useConflictDetection() {
    */
   async function performConflictDetection(): Promise<ConflictDetectionResponse> {
     if (isDetecting.value) {
-      console.log('[ConflictDetection] Already detecting, skipping')
+      console.debug('[ConflictDetection] Already detecting, skipping')
       return {
         success: false,
         error_message: 'Already detecting conflicts',
@@ -556,7 +557,10 @@ export function useConflictDetection() {
       detectionSummary.value = summary
       lastDetectionTime.value = new Date().toISOString()
 
-      console.log('[ConflictDetection] Conflict detection completed:', summary)
+      console.debug(
+        '[ConflictDetection] Conflict detection completed:',
+        summary
+      )
 
       // Store conflict results for later UI display
       // Dialog will be shown based on specific events, not on app mount
@@ -568,7 +572,7 @@ export function useConflictDetection() {
         // Merge conflicts for packages with the same name
         const mergedConflicts = mergeConflictsByPackageName(conflictedResults)
 
-        console.log(
+        console.debug(
           '[ConflictDetection] Conflicts detected (stored for UI):',
           mergedConflicts
         )
@@ -632,11 +636,22 @@ export function useConflictDetection() {
   /**
    * Error-resilient initialization (called on app mount).
    * Async function that doesn't block UI setup.
-   * Ensures proper order: installed -> system_stats -> versions bulk -> import_fail_info_bulk
+   * Ensures proper order: system_stats -> manager state -> installed -> versions bulk -> import_fail_info_bulk
    */
   async function initializeConflictDetection(): Promise<void> {
     try {
-      // Simply perform conflict detection
+      // Check if manager is new Manager before proceeding
+      const { useManagerState } = await import('@/composables/useManagerState')
+      const managerState = useManagerState()
+
+      if (!managerState.isNewManagerUI.value) {
+        console.debug(
+          '[ConflictDetection] Manager is not new Manager, skipping conflict detection'
+        )
+        return
+      }
+
+      // Manager is new Manager, perform conflict detection
       // The useInstalledPacks will handle fetching installed list if needed
       await performConflictDetection()
     } catch (error) {
@@ -671,13 +686,13 @@ export function useConflictDetection() {
    * Check if conflicts should trigger modal display after "What's New" dismissal
    */
   async function shouldShowConflictModalAfterUpdate(): Promise<boolean> {
-    console.log(
+    console.debug(
       '[ConflictDetection] Checking if conflict modal should show after update...'
     )
 
     // Ensure conflict detection has run
     if (detectionResults.value.length === 0) {
-      console.log(
+      console.debug(
         '[ConflictDetection] No detection results, running conflict detection...'
       )
       await performConflictDetection()
@@ -689,7 +704,7 @@ export function useConflictDetection() {
     const hasActualConflicts = hasConflicts.value
     const canShowModal = acknowledgment.shouldShowConflictModal.value
 
-    console.log('[ConflictDetection] Modal check:', {
+    console.debug('[ConflictDetection] Modal check:', {
       hasConflicts: hasActualConflicts,
       canShowModal: canShowModal,
       conflictedPackagesCount: conflictedPackages.value.length
@@ -860,9 +875,7 @@ function mergeConflictsByPackageName(
 
   conflicts.forEach((conflict) => {
     // Normalize package name by removing version suffix (@1_0_3) for consistent merging
-    const normalizedPackageName = conflict.package_name.includes('@')
-      ? conflict.package_name.substring(0, conflict.package_name.indexOf('@'))
-      : conflict.package_name
+    const normalizedPackageName = normalizePackId(conflict.package_name)
 
     if (mergedMap.has(normalizedPackageName)) {
       // Package already exists, merge conflicts
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 8fe83eb36..ad3378209 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1,5 +1,6 @@
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { ManagerUIState, useManagerState } from '@/composables/useManagerState'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
@@ -20,18 +21,14 @@ import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useToastStore } from '@/stores/toastStore'
 import { type ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -115,6 +112,15 @@ export function useCoreCommands(): ComfyCommand[] {
         await workflowService.saveWorkflow(workflow)
       }
     },
+    {
+      id: 'Comfy.PublishSubgraph',
+      icon: 'pi pi-save',
+      label: 'Publish Subgraph',
+      menubarLabel: 'Publish',
+      function: async () => {
+        await useSubgraphStore().publishSubgraph()
+      }
+    },
     {
       id: 'Comfy.SaveWorkflowAs',
       icon: 'pi pi-save',
@@ -184,8 +190,6 @@ export function useCoreCommands(): ComfyCommand[] {
             const subgraph = app.canvas.subgraph
             const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
             nonIoNodes.forEach((node) => subgraph.remove(node))
-          } else {
-            app.graph.clear()
           }
           api.dispatchCustomEvent('graphCleared')
         }
@@ -282,6 +286,18 @@ export function useCoreCommands(): ComfyCommand[] {
         app.canvas.setDirty(true, true)
       }
     },
+    {
+      id: 'Experimental.ToggleVueNodes',
+      label: () =>
+        `Experimental: ${
+          useSettingStore().get('Comfy.VueNodes.Enabled') ? 'Disable' : 'Enable'
+        } Vue Nodes`,
+      function: async () => {
+        const settingStore = useSettingStore()
+        const current = settingStore.get('Comfy.VueNodes.Enabled') ?? false
+        await settingStore.set('Comfy.VueNodes.Enabled', !current)
+      }
+    },
     {
       id: 'Comfy.Canvas.FitView',
       icon: 'pi pi-expand',
@@ -720,34 +736,9 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Custom Nodes Manager',
       versionAdded: '1.12.10',
       function: async () => {
-        const managerState = useManagerStateStore().managerUIState
-
-        switch (managerState) {
-          case ManagerUIState.DISABLED:
-            dialogService.showSettingsDialog('extension')
-            break
-
-          case ManagerUIState.LEGACY_UI:
-            try {
-              await useCommandStore().execute(
-                'Comfy.Manager.Menu.ToggleVisibility' // This command is registered by legacy manager FE extension
-              )
-            } catch (error) {
-              console.error('error', error)
-              useToastStore().add({
-                severity: 'error',
-                summary: t('g.error'),
-                detail: t('manager.legacyMenuNotAvailable'),
-                life: 3000
-              })
-              dialogService.showManagerDialog()
-            }
-            break
-
-          case ManagerUIState.NEW_UI:
-            dialogService.showManagerDialog()
-            break
-        }
+        await useManagerState().openManager({
+          showToastOnLegacyError: true
+        })
       }
     },
     {
@@ -755,33 +746,25 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-sync',
       label: 'Check for Custom Node Updates',
       versionAdded: '1.17.0',
-      function: () => {
-        const managerStore = useManagerStateStore()
-        const state = managerStore.managerUIState
+      function: async () => {
+        const managerState = useManagerState()
+        const state = managerState.managerUIState.value
 
-        switch (state) {
-          case ManagerUIState.DISABLED:
-            toastStore.add({
-              severity: 'error',
-              summary: t('g.error'),
-              detail: t('manager.notAvailable'),
-              life: 3000
-            })
-            break
-
-          case ManagerUIState.LEGACY_UI:
-            useCommandStore()
-              .execute('Comfy.Manager.Menu.ToggleVisibility')
-              .catch(() => {
-                // If legacy command doesn't exist, fall back to extensions panel
-                dialogService.showSettingsDialog('extension')
-              })
-            break
-
-          case ManagerUIState.NEW_UI:
-            dialogService.showManagerDialog()
-            break
+        // For DISABLED state, show error toast instead of opening settings
+        if (state === ManagerUIState.DISABLED) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.notAvailable'),
+            life: 3000
+          })
+          return
         }
+
+        await managerState.openManager({
+          initialTab: ManagerTab.UpdateAvailable,
+          showToastOnLegacyError: false
+        })
       }
     },
     {
@@ -790,32 +773,10 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Install Missing Custom Nodes',
       versionAdded: '1.17.0',
       function: async () => {
-        const managerStore = useManagerStateStore()
-        const state = managerStore.managerUIState
-
-        switch (state) {
-          case ManagerUIState.DISABLED:
-            // When manager is disabled, open the extensions panel in settings
-            dialogService.showSettingsDialog('extension')
-            break
-
-          case ManagerUIState.LEGACY_UI:
-            try {
-              await useCommandStore().execute(
-                'Comfy.Manager.Menu.ToggleVisibility'
-              )
-            } catch {
-              // If legacy command doesn't exist, fall back to extensions panel
-              dialogService.showSettingsDialog('extension')
-            }
-            break
-
-          case ManagerUIState.NEW_UI:
-            dialogService.showManagerDialog({
-              initialTab: ManagerTab.Missing
-            })
-            break
-        }
+        await useManagerState().openManager({
+          initialTab: ManagerTab.Missing,
+          showToastOnLegacyError: false
+        })
       }
     },
     {
@@ -921,8 +882,11 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.OpenManagerDialog',
       icon: 'mdi mdi-puzzle-outline',
       label: 'Manager',
-      function: () => {
-        dialogService.showManagerDialog()
+      function: async () => {
+        await useManagerState().openManager({
+          initialTab: ManagerTab.All,
+          showToastOnLegacyError: false
+        })
       }
     },
     {
@@ -987,18 +951,11 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Custom Nodes (Legacy)',
       versionAdded: '1.16.4',
       function: async () => {
-        try {
-          await useCommandStore().execute(
-            'Comfy.Manager.CustomNodesManager.ToggleVisibility'
-          )
-        } catch (error) {
-          useToastStore().add({
-            severity: 'error',
-            summary: t('g.error'),
-            detail: t('manager.legacyMenuNotAvailable'),
-            life: 3000
-          })
-        }
+        await useManagerState().openManager({
+          legacyCommand: 'Comfy.Manager.CustomNodesManager.ToggleVisibility',
+          showToastOnLegacyError: true,
+          isLegacyOnly: true
+        })
       }
     },
     {
@@ -1007,16 +964,10 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Manager Menu (Legacy)',
       versionAdded: '1.16.4',
       function: async () => {
-        try {
-          await useCommandStore().execute('Comfy.Manager.Menu.ToggleVisibility')
-        } catch (error) {
-          useToastStore().add({
-            severity: 'error',
-            summary: t('g.error'),
-            detail: t('manager.legacyMenuNotAvailable'),
-            life: 3000
-          })
-        }
+        await useManagerState().openManager({
+          showToastOnLegacyError: true,
+          isLegacyOnly: true
+        })
       }
     },
     {
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index a578eb8bf..9a0bcd03d 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -12,10 +12,9 @@ export enum ServerFeatureFlag {
 }
 
 /**
- * Composable for reactive access to feature flags
+ * Composable for reactive access to server-side feature flags
  */
 export function useFeatureFlags() {
-  // Create reactive state that tracks server feature flags
   const flags = reactive({
     get supportsPreviewMetadata() {
       return api.getServerFeature(ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA)
@@ -28,10 +27,8 @@ export function useFeatureFlags() {
     }
   })
 
-  // Create a reactive computed for any feature flag
-  const featureFlag = <T = unknown>(featurePath: string, defaultValue?: T) => {
-    return computed(() => api.getServerFeature(featurePath, defaultValue))
-  }
+  const featureFlag = <T = unknown>(featurePath: string, defaultValue?: T) =>
+    computed(() => api.getServerFeature(featurePath, defaultValue))
 
   return {
     flags: readonly(flags),
diff --git a/src/composables/useFrontendVersionMismatchWarning.ts b/src/composables/useFrontendVersionMismatchWarning.ts
index 11897a016..e74f2ee5c 100644
--- a/src/composables/useFrontendVersionMismatchWarning.ts
+++ b/src/composables/useFrontendVersionMismatchWarning.ts
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useToastStore } from '@/stores/toastStore'
 import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
 
-export interface UseFrontendVersionMismatchWarningOptions {
+interface UseFrontendVersionMismatchWarningOptions {
   immediate?: boolean
 }
 
diff --git a/src/composables/useIntersectionObserver.ts b/src/composables/useIntersectionObserver.ts
index a369e9506..f1077b9c1 100644
--- a/src/composables/useIntersectionObserver.ts
+++ b/src/composables/useIntersectionObserver.ts
@@ -1,7 +1,6 @@
 import { type Ref, onBeforeUnmount, ref, watch } from 'vue'
 
-export interface UseIntersectionObserverOptions
-  extends IntersectionObserverInit {
+interface UseIntersectionObserverOptions extends IntersectionObserverInit {
   immediate?: boolean
 }
 
diff --git a/src/composables/useLazyPagination.ts b/src/composables/useLazyPagination.ts
index 474ccc8eb..95a26f4a5 100644
--- a/src/composables/useLazyPagination.ts
+++ b/src/composables/useLazyPagination.ts
@@ -1,6 +1,6 @@
 import { type Ref, computed, ref, shallowRef, watch } from 'vue'
 
-export interface LazyPaginationOptions {
+interface LazyPaginationOptions {
   itemsPerPage?: number
   initialPage?: number
 }
diff --git a/src/composables/useManagerQueue.ts b/src/composables/useManagerQueue.ts
index a02abae40..86fb8d947 100644
--- a/src/composables/useManagerQueue.ts
+++ b/src/composables/useManagerQueue.ts
@@ -5,6 +5,7 @@ import { Ref, computed, ref } from 'vue'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { components } from '@/types/generatedManagerTypes'
+import { normalizePackKeys } from '@/utils/packUtils'
 
 type ManagerTaskHistory = Record<
   string,
@@ -98,7 +99,8 @@ export const useManagerQueue = (
     taskHistory.value = filterHistoryByClientId(state.history)
 
     if (state.installed_packs) {
-      installedPacks.value = state.installed_packs
+      // Normalize pack keys to ensure consistent access
+      installedPacks.value = normalizePackKeys(state.installed_packs)
     }
     updateProcessingState()
   }
diff --git a/src/composables/useManagerState.ts b/src/composables/useManagerState.ts
new file mode 100644
index 000000000..ae9eb1cde
--- /dev/null
+++ b/src/composables/useManagerState.ts
@@ -0,0 +1,203 @@
+import { storeToRefs } from 'pinia'
+import { computed, readonly } from 'vue'
+
+import { t } from '@/i18n'
+import { api } from '@/scripts/api'
+import { useDialogService } from '@/services/dialogService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { useToastStore } from '@/stores/toastStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
+
+export enum ManagerUIState {
+  DISABLED = 'disabled',
+  LEGACY_UI = 'legacy',
+  NEW_UI = 'new'
+}
+
+export function useManagerState() {
+  const systemStatsStore = useSystemStatsStore()
+  const { systemStats, isInitialized: systemInitialized } =
+    storeToRefs(systemStatsStore)
+
+  /**
+   * The current manager UI state.
+   * Computed once and cached until dependencies change (which they don't during runtime).
+   * This follows Vue's conventions and provides better performance through caching.
+   */
+  const managerUIState = readonly(
+    computed((): ManagerUIState => {
+      // Wait for systemStats to be initialized
+      if (!systemInitialized.value) {
+        // Default to DISABLED while loading
+        return ManagerUIState.DISABLED
+      }
+
+      // Get current values
+      const clientSupportsV4 =
+        api.getClientFeatureFlags().supports_manager_v4_ui ?? false
+
+      const serverSupportsV4 = api.getServerFeature(
+        'extension.manager.supports_v4'
+      )
+
+      // Check command line args first (highest priority)
+      if (systemStats.value?.system?.argv?.includes('--disable-manager')) {
+        return ManagerUIState.DISABLED
+      }
+
+      if (
+        systemStats.value?.system?.argv?.includes('--enable-manager-legacy-ui')
+      ) {
+        return ManagerUIState.LEGACY_UI
+      }
+
+      // Both client and server support v4 = NEW_UI
+      if (clientSupportsV4 && serverSupportsV4 === true) {
+        return ManagerUIState.NEW_UI
+      }
+
+      // Server supports v4 but client doesn't = LEGACY_UI
+      if (serverSupportsV4 === true && !clientSupportsV4) {
+        return ManagerUIState.LEGACY_UI
+      }
+
+      // Server explicitly doesn't support v4 = LEGACY_UI
+      if (serverSupportsV4 === false) {
+        return ManagerUIState.LEGACY_UI
+      }
+
+      // If server feature flags haven't loaded yet, default to NEW_UI
+      // This is a temporary state - feature flags are exchanged immediately on WebSocket connection
+      // NEW_UI is the safest default since v2 API is the current standard
+      // If the server doesn't support v2, API calls will fail with 404 and be handled gracefully
+      if (serverSupportsV4 === undefined) {
+        return ManagerUIState.NEW_UI
+      }
+
+      // Should never reach here, but if we do, disable manager
+      return ManagerUIState.DISABLED
+    })
+  )
+
+  /**
+   * Check if manager is enabled (not DISABLED)
+   */
+  const isManagerEnabled = readonly(
+    computed((): boolean => {
+      return managerUIState.value !== ManagerUIState.DISABLED
+    })
+  )
+
+  /**
+   * Check if manager UI is in NEW_UI mode
+   */
+  const isNewManagerUI = readonly(
+    computed((): boolean => {
+      return managerUIState.value === ManagerUIState.NEW_UI
+    })
+  )
+
+  /**
+   * Check if manager UI is in LEGACY_UI mode
+   */
+  const isLegacyManagerUI = readonly(
+    computed((): boolean => {
+      return managerUIState.value === ManagerUIState.LEGACY_UI
+    })
+  )
+
+  /**
+   * Check if install button should be shown (only in NEW_UI mode)
+   */
+  const shouldShowInstallButton = readonly(
+    computed((): boolean => {
+      return isNewManagerUI.value
+    })
+  )
+
+  /**
+   * Check if manager buttons should be shown (when manager is not disabled)
+   */
+  const shouldShowManagerButtons = readonly(
+    computed((): boolean => {
+      return isManagerEnabled.value
+    })
+  )
+
+  /**
+   * Opens the manager UI based on current state
+   * Centralizes the logic for opening manager across the app
+   * @param options - Optional configuration for opening the manager
+   * @param options.initialTab - Initial tab to show (for NEW_UI mode)
+   * @param options.legacyCommand - Legacy command to execute (for LEGACY_UI mode)
+   * @param options.showToastOnLegacyError - Whether to show toast on legacy command failure
+   * @param options.isLegacyOnly - If true, shows error in NEW_UI mode instead of opening manager
+   */
+  const openManager = async (options?: {
+    initialTab?: ManagerTab
+    legacyCommand?: string
+    showToastOnLegacyError?: boolean
+    isLegacyOnly?: boolean
+  }): Promise<void> => {
+    const state = managerUIState.value
+    const dialogService = useDialogService()
+    const commandStore = useCommandStore()
+
+    switch (state) {
+      case ManagerUIState.DISABLED:
+        dialogService.showSettingsDialog('extension')
+        break
+
+      case ManagerUIState.LEGACY_UI: {
+        const command =
+          options?.legacyCommand || 'Comfy.Manager.Menu.ToggleVisibility'
+        try {
+          await commandStore.execute(command)
+        } catch {
+          // If legacy command doesn't exist
+          if (options?.showToastOnLegacyError !== false) {
+            useToastStore().add({
+              severity: 'error',
+              summary: t('g.error'),
+              detail: t('manager.legacyMenuNotAvailable'),
+              life: 3000
+            })
+          }
+          // Fallback to extensions panel if not showing toast
+          if (options?.showToastOnLegacyError === false) {
+            dialogService.showSettingsDialog('extension')
+          }
+        }
+        break
+      }
+
+      case ManagerUIState.NEW_UI:
+        if (options?.isLegacyOnly) {
+          // Legacy command is not available in NEW_UI mode
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+          dialogService.showManagerDialog({ initialTab: ManagerTab.All })
+        } else {
+          dialogService.showManagerDialog(
+            options?.initialTab ? { initialTab: options.initialTab } : undefined
+          )
+        }
+        break
+    }
+  }
+
+  return {
+    managerUIState,
+    isManagerEnabled,
+    isNewManagerUI,
+    isLegacyManagerUI,
+    shouldShowInstallButton,
+    shouldShowManagerButtons,
+    openManager
+  }
+}
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index 14e5c6768..6bf0b53a2 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -2,7 +2,8 @@ import { type Ref, computed, ref } from 'vue'
 
 import type { TemplateInfo } from '@/types/workflowTemplateTypes'
 
-export interface TemplateFilterOptions {
+// @ts-expect-error unused (To be used later?)
+interface TemplateFilterOptions {
   searchQuery?: string
 }
 
diff --git a/src/composables/useTransformCompatOverlayProps.ts b/src/composables/useTransformCompatOverlayProps.ts
new file mode 100644
index 000000000..f6a7e6672
--- /dev/null
+++ b/src/composables/useTransformCompatOverlayProps.ts
@@ -0,0 +1,48 @@
+import type { HintedString } from '@primevue/core'
+import { computed } from 'vue'
+
+/**
+ * Options for configuring transform-compatible overlay props
+ */
+interface TransformCompatOverlayOptions {
+  /**
+   * Where to append the overlay. 'self' keeps overlay within component
+   * for proper transform inheritance, 'body' teleports to document body
+   */
+  appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement
+  // Future: other props needed for transform compatibility
+  // scrollTarget?: string | HTMLElement
+  // autoZIndex?: boolean
+}
+
+/**
+ * Composable that provides props to make PrimeVue overlay components
+ * compatible with CSS-transformed parent elements.
+ *
+ * Vue nodes use CSS transforms for positioning/scaling. PrimeVue overlay
+ * components (Select, MultiSelect, TreeSelect, etc.) teleport to document
+ * body by default, breaking transform inheritance. This composable provides
+ * the necessary props to keep overlays within their component elements.
+ *
+ * @param overrides - Optional overrides for specific use cases
+ * @returns Computed props object to spread on PrimeVue overlay components
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <Select v-bind="overlayProps" />
+ * </template>
+ *
+ * <script setup>
+ * const overlayProps = useTransformCompatOverlayProps()
+ * </script>
+ * ```
+ */
+export function useTransformCompatOverlayProps(
+  overrides: TransformCompatOverlayOptions = {}
+) {
+  return computed(() => ({
+    appendTo: 'self' as const,
+    ...overrides
+  }))
+}
diff --git a/src/composables/useVueFeatureFlags.ts b/src/composables/useVueFeatureFlags.ts
new file mode 100644
index 000000000..8816555d1
--- /dev/null
+++ b/src/composables/useVueFeatureFlags.ts
@@ -0,0 +1,38 @@
+/**
+ * Vue-related feature flags composable
+ * Manages local settings-driven flags and LiteGraph integration
+ */
+import { computed, watch } from 'vue'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
+export const useVueFeatureFlags = () => {
+  const settingStore = useSettingStore()
+
+  const isVueNodesEnabled = computed(() => {
+    try {
+      return settingStore.get('Comfy.VueNodes.Enabled') ?? false
+    } catch {
+      return false
+    }
+  })
+
+  // Whether Vue nodes should render
+  const shouldRenderVueNodes = computed(() => isVueNodesEnabled.value)
+
+  // Sync the Vue nodes flag with LiteGraph global settings
+  const syncVueNodesFlag = () => {
+    LiteGraph.vueNodesMode = isVueNodesEnabled.value
+  }
+
+  // Watch for changes and update LiteGraph immediately
+  watch(isVueNodesEnabled, syncVueNodesFlag, { immediate: true })
+
+  return {
+    isVueNodesEnabled,
+    shouldRenderVueNodes,
+    syncVueNodesFlag
+  }
+}
diff --git a/src/composables/useWorkflowValidation.ts b/src/composables/useWorkflowValidation.ts
index 8577734a5..1c218dc2e 100644
--- a/src/composables/useWorkflowValidation.ts
+++ b/src/composables/useWorkflowValidation.ts
@@ -4,7 +4,7 @@ import { validateComfyWorkflow } from '@/schemas/comfyWorkflowSchema'
 import { useToastStore } from '@/stores/toastStore'
 import { fixBadLinks } from '@/utils/linkFixer'
 
-export interface ValidationResult {
+interface ValidationResult {
   graphData: ComfyWorkflowJSON | null
 }
 
diff --git a/src/constants/coreMenuCommands.ts b/src/constants/coreMenuCommands.ts
index 98b1f39a0..c186a39ba 100644
--- a/src/constants/coreMenuCommands.ts
+++ b/src/constants/coreMenuCommands.ts
@@ -23,6 +23,7 @@ export const CORE_MENU_COMMANDS = [
       'Comfy.Memory.UnloadModelsAndExecutionCache'
     ]
   ],
+  [['View'], []],
   [
     ['Help'],
     [
diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts
index 45093da5d..068d102ad 100644
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -186,6 +186,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: true,
     experimental: true
   },
+  {
+    id: 'Comfy.Workflow.WarnBlueprintOverwrite',
+    name: 'Require confirmation to overwrite an existing subgraph blueprint',
+    type: 'boolean',
+    defaultValue: true
+  },
   {
     id: 'Comfy.Graph.ZoomSpeed',
     category: ['LiteGraph', 'Canvas', 'ZoomSpeed'],
@@ -952,5 +958,27 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Release seen timestamp',
     type: 'hidden',
     defaultValue: 0
+  },
+
+  /**
+   * Vue Node System Settings
+   */
+  {
+    id: 'Comfy.VueNodes.Enabled',
+    name: 'Enable Vue node rendering (hidden)',
+    type: 'hidden',
+    tooltip:
+      'Render nodes as Vue components instead of canvas. Hidden; toggle via Experimental keybinding.',
+    defaultValue: false,
+    experimental: true,
+    versionAdded: '1.27.1'
+  },
+  {
+    id: 'Comfy.Assets.UseAssetAPI',
+    name: 'Use Asset API for model library',
+    type: 'boolean',
+    tooltip: 'Use new Asset API for model browsing',
+    defaultValue: false,
+    experimental: true
   }
 ]
diff --git a/src/constants/serverConfig.ts b/src/constants/serverConfig.ts
index 2f04e4cf3..45991f737 100644
--- a/src/constants/serverConfig.ts
+++ b/src/constants/serverConfig.ts
@@ -1,5 +1,4 @@
 import {
-  AutoLaunch,
   CrossAttentionMethod,
   CudaMalloc,
   FloatingPointPrecision,
@@ -20,32 +19,6 @@ export interface ServerConfig<T> extends FormItem {
   getValue?: (value: T) => Record<string, ServerConfigValue>
 }
 
-export const WEB_ONLY_CONFIG_ITEMS: ServerConfig<any>[] = [
-  // Launch behavior
-  {
-    id: 'auto-launch',
-    name: 'Automatically opens in the browser on startup',
-    category: ['Launch'],
-    type: 'combo',
-    options: Object.values(AutoLaunch),
-    defaultValue: AutoLaunch.Auto,
-    getValue: (value: AutoLaunch) => {
-      switch (value) {
-        case AutoLaunch.Auto:
-          return {}
-        case AutoLaunch.Enable:
-          return {
-            ['auto-launch']: true
-          }
-        case AutoLaunch.Disable:
-          return {
-            ['disable-auto-launch']: true
-          }
-      }
-    }
-  }
-]
-
 export const SERVER_CONFIG_ITEMS: ServerConfig<any>[] = [
   // Network settings
   {
diff --git a/src/constants/slotColors.ts b/src/constants/slotColors.ts
new file mode 100644
index 000000000..6f0d70053
--- /dev/null
+++ b/src/constants/slotColors.ts
@@ -0,0 +1,30 @@
+/**
+ * Default colors for node slot types
+ * Mirrors LiteGraph's slot_default_color_by_type
+ */
+const SLOT_TYPE_COLORS: Record<string, string> = {
+  number: '#AAD',
+  string: '#DCA',
+  boolean: '#DAA',
+  vec2: '#ADA',
+  vec3: '#ADA',
+  vec4: '#ADA',
+  color: '#DDA',
+  image: '#353',
+  latent: '#858',
+  conditioning: '#FFA',
+  control_net: '#F8F',
+  clip: '#FFD',
+  vae: '#F82',
+  model: '#B98',
+  '*': '#AAA' // Default color
+}
+
+/**
+ * Get the color for a slot type
+ */
+export function getSlotColor(type?: string | number | null): string {
+  if (!type) return SLOT_TYPE_COLORS['*']
+  const typeStr = String(type).toLowerCase()
+  return SLOT_TYPE_COLORS[typeStr] || SLOT_TYPE_COLORS['*']
+}
diff --git a/src/constants/supportedWorkflowFormats.ts b/src/constants/supportedWorkflowFormats.ts
index ac0bee186..2184dbda7 100644
--- a/src/constants/supportedWorkflowFormats.ts
+++ b/src/constants/supportedWorkflowFormats.ts
@@ -5,7 +5,7 @@
 /**
  * All supported image formats that can contain workflow data
  */
-export const IMAGE_WORKFLOW_FORMATS = {
+const IMAGE_WORKFLOW_FORMATS = {
   extensions: ['.png', '.webp', '.svg', '.avif'],
   mimeTypes: ['image/png', 'image/webp', 'image/svg+xml', 'image/avif']
 }
@@ -13,7 +13,7 @@ export const IMAGE_WORKFLOW_FORMATS = {
 /**
  * All supported audio formats that can contain workflow data
  */
-export const AUDIO_WORKFLOW_FORMATS = {
+const AUDIO_WORKFLOW_FORMATS = {
   extensions: ['.mp3', '.ogg', '.flac'],
   mimeTypes: ['audio/mpeg', 'audio/ogg', 'audio/flac', 'audio/x-flac']
 }
@@ -21,7 +21,7 @@ export const AUDIO_WORKFLOW_FORMATS = {
 /**
  * All supported video formats that can contain workflow data
  */
-export const VIDEO_WORKFLOW_FORMATS = {
+const VIDEO_WORKFLOW_FORMATS = {
   extensions: ['.mp4', '.mov', '.m4v', '.webm'],
   mimeTypes: ['video/mp4', 'video/quicktime', 'video/x-m4v', 'video/webm']
 }
@@ -29,7 +29,7 @@ export const VIDEO_WORKFLOW_FORMATS = {
 /**
  * All supported 3D model formats that can contain workflow data
  */
-export const MODEL_WORKFLOW_FORMATS = {
+const MODEL_WORKFLOW_FORMATS = {
   extensions: ['.glb'],
   mimeTypes: ['model/gltf-binary']
 }
@@ -37,7 +37,7 @@ export const MODEL_WORKFLOW_FORMATS = {
 /**
  * All supported data formats that directly contain workflow data
  */
-export const DATA_WORKFLOW_FORMATS = {
+const DATA_WORKFLOW_FORMATS = {
   extensions: ['.json', '.latent', '.safetensors'],
   mimeTypes: ['application/json']
 }
@@ -45,7 +45,7 @@ export const DATA_WORKFLOW_FORMATS = {
 /**
  * Combines all supported formats into a single object
  */
-export const ALL_WORKFLOW_FORMATS = {
+const ALL_WORKFLOW_FORMATS = {
   extensions: [
     ...IMAGE_WORKFLOW_FORMATS.extensions,
     ...AUDIO_WORKFLOW_FORMATS.extensions,
diff --git a/src/extensions/core/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts
index 15b9c95bc..7cc7fb220 100644
--- a/src/extensions/core/groupNodeManage.ts
+++ b/src/extensions/core/groupNodeManage.ts
@@ -121,7 +121,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
   getGroupData() {
     this.groupNodeType = LiteGraph.registered_node_types[
       `${PREFIX}${SEPARATOR}` + this.selectedGroup
-    ] as LGraphNodeConstructor<LGraphNode>
+    ] as unknown as LGraphNodeConstructor<LGraphNode>
     this.groupNodeDef = this.groupNodeType.nodeData
     this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType)
   }
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 51247a8a3..86d33edc9 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -48,7 +48,7 @@ export interface CaptureResult {
   lineart: string
 }
 
-export interface BaseManager {
+interface BaseManager {
   init(): void
   dispose(): void
   reset(): void
@@ -185,12 +185,3 @@ export interface LoaderManagerInterface {
   dispose(): void
   loadModel(url: string, originalFileName?: string): Promise<void>
 }
-
-export interface RecordingManagerInterface extends BaseManager {
-  startRecording(): Promise<void>
-  stopRecording(): void
-  hasRecording(): boolean
-  getRecordingDuration(): number
-  exportRecording(filename?: string): void
-  clearRecording(): void
-}
diff --git a/src/extensions/core/maskEditorLayerFilenames.ts b/src/extensions/core/maskEditorLayerFilenames.ts
index 2e2f1bf98..6b6b5ca27 100644
--- a/src/extensions/core/maskEditorLayerFilenames.ts
+++ b/src/extensions/core/maskEditorLayerFilenames.ts
@@ -1,4 +1,4 @@
-export interface ImageLayerFilenames {
+interface ImageLayerFilenames {
   maskedImage: string
   paint: string
   paintedImage: string
diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts
index bc0725627..7f772aefc 100644
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -422,6 +422,7 @@ function getConfig(this: LGraphNode, widgetName: string) {
  * @param node The node to convert the widget to an input slot for.
  * @param widget The widget to convert to an input slot.
  * @returns The input slot that was converted from the widget or undefined if the widget is not found.
+ * @knipIgnoreUnusedButUsedByCustomNodes
  */
 export function convertToInput(
   node: LGraphNode,
@@ -592,7 +593,7 @@ app.registerExtension({
       const node = LiteGraph.createNode('PrimitiveNode')
       if (!node) return r
 
-      app.graph.add(node)
+      this.graph?.add(node)
 
       // Calculate a position that wont directly overlap another node
       const pos: [number, number] = [
diff --git a/src/lib/litegraph/CLAUDE.md b/src/lib/litegraph/CLAUDE.md
index d0326b505..68f8bea95 100644
--- a/src/lib/litegraph/CLAUDE.md
+++ b/src/lib/litegraph/CLAUDE.md
@@ -22,7 +22,7 @@
 
 # Workflow
 
-- Be sure to typecheck when you’re done making a series of code changes
+- Be sure to typecheck when you're done making a series of code changes
 - Prefer running single tests, and not the whole test suite, for performance
 
 # Testing Guidelines
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index 94eee60de..139919c60 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -6,6 +6,8 @@ import {
 } from '@/lib/litegraph/src/constants'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4, zeroUuid } from '@/lib/litegraph/src/utils/uuid'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
 
 import type { DragAndScaleState } from './DragAndScale'
 import { LGraphCanvas } from './LGraphCanvas'
@@ -312,6 +314,7 @@ export class LGraph
     if (this._nodes) {
       for (const _node of this._nodes) {
         _node.onRemoved?.()
+        this.onNodeRemoved?.(_node)
       }
     }
 
@@ -1336,6 +1339,7 @@ export class LGraph
    * @returns The newly created reroute - typically ignored.
    */
   createReroute(pos: Point, before: LinkSegment): Reroute {
+    const layoutMutations = useLayoutMutations()
     const rerouteId = ++this.state.lastRerouteId
     const linkIds = before instanceof Reroute ? before.linkIds : [before.id]
     const floatingLinkIds =
@@ -1349,6 +1353,16 @@ export class LGraph
       floatingLinkIds
     )
     this.reroutes.set(rerouteId, reroute)
+
+    // Register reroute in Layout Store for spatial tracking
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.createReroute(
+      rerouteId,
+      { x: pos[0], y: pos[1] },
+      before.parentId,
+      Array.from(linkIds)
+    )
+
     for (const linkId of linkIds) {
       const link = this._links.get(linkId)
       if (!link) continue
@@ -1379,6 +1393,7 @@ export class LGraph
    * @param id ID of reroute to remove
    */
   removeReroute(id: RerouteId): void {
+    const layoutMutations = useLayoutMutations()
     const { reroutes } = this
     const reroute = reroutes.get(id)
     if (!reroute) return
@@ -1422,6 +1437,11 @@ export class LGraph
     }
 
     reroutes.delete(id)
+
+    // Delete reroute from Layout Store
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.deleteReroute(id)
+
     // This does not belong here; it should be handled by the caller, or run by a remove-many API.
     // https://github.com/Comfy-Org/litegraph.js/issues/898
     this.setDirtyCanvas(false, true)
@@ -1463,6 +1483,12 @@ export class LGraph
     if (items.size === 0)
       throw new Error('Cannot convert to subgraph: nothing to convert')
     const { state, revision, config } = this
+    const firstChild = [...items][0]
+    if (items.size === 1 && firstChild instanceof LGraphGroup) {
+      items = new Set([firstChild])
+      firstChild.recomputeInsideNodes()
+      firstChild.children.forEach((n) => items.add(n))
+    }
 
     const {
       boundaryLinks,
@@ -2105,6 +2131,7 @@ export class LGraph
     data: ISerialisedGraph | SerialisableGraph,
     keep_old?: boolean
   ): boolean | undefined {
+    const layoutMutations = useLayoutMutations()
     const options: LGraphEventMap['configuring'] = {
       data,
       clearGraph: !keep_old
@@ -2245,6 +2272,9 @@ export class LGraph
         // Drop broken links, and ignore reroutes with no valid links
         if (!reroute.validateLinks(this._links, this.floatingLinks)) {
           this.reroutes.delete(reroute.id)
+          // Clean up layout store
+          layoutMutations.setSource(LayoutSource.Canvas)
+          layoutMutations.deleteReroute(reroute.id)
         }
       }
 
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index a32b8c354..9e7ef226f 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -2,6 +2,12 @@ import { toString } from 'es-toolkit/compat'
 
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
 import { LinkConnector } from '@/lib/litegraph/src/canvas/LinkConnector'
+import {
+  type LinkRenderContext,
+  LitegraphLinkAdapter
+} from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
+import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 
 import { CanvasPointer } from './CanvasPointer'
 import type { ContextMenu } from './ContextMenu'
@@ -51,7 +57,6 @@ import {
   containsRect,
   createBounds,
   distance,
-  findPointOnCurve,
   isInRect,
   isInRectangle,
   isPointInRect,
@@ -161,7 +166,7 @@ interface IDialogOptions {
 }
 
 /** @inheritdoc {@link LGraphCanvas.state} */
-export interface LGraphCanvasState {
+interface LGraphCanvasState {
   /** {@link Positionable} items are being dragged on the canvas. */
   draggingItems: boolean
   /** The canvas itself is being dragged. */
@@ -235,9 +240,6 @@ export class LGraphCanvas
   static #tmp_area = new Float32Array(4)
   static #margin_area = new Float32Array(4)
   static #link_bounding = new Float32Array(4)
-  static #lTempA: Point = new Float32Array(2)
-  static #lTempB: Point = new Float32Array(2)
-  static #lTempC: Point = new Float32Array(2)
 
   static DEFAULT_BACKGROUND_IMAGE =
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII='
@@ -666,6 +668,7 @@ export class LGraphCanvas
   _bg_img?: HTMLImageElement
   _pattern?: CanvasPattern
   _pattern_img?: HTMLImageElement
+  bg_tint?: string | CanvasGradient | CanvasPattern
   // TODO: This looks like another panel thing
   prompt_box?: PromptDialog | null
   search_box?: HTMLDivElement
@@ -679,6 +682,9 @@ export class LGraphCanvas
   /** Set on keydown, keyup. @todo */
   #shiftDown: boolean = false
 
+  /** Link rendering adapter for litegraph-to-canvas integration */
+  linkRenderer: LitegraphLinkAdapter | null = null
+
   /** If true, enable drag zoom. Ctrl+Shift+Drag Up/Down: zoom canvas. */
   dragZoomEnabled: boolean = false
   /** The start position of the drag zoom. */
@@ -748,6 +754,13 @@ export class LGraphCanvas
       }
     }
 
+    // Initialize link renderer if graph is available
+    if (graph) {
+      this.linkRenderer = new LitegraphLinkAdapter(graph)
+      // Disable layout writes during render
+      this.linkRenderer.enableLayoutStoreWrites = false
+    }
+
     this.linkConnector.events.addEventListener('link-created', () =>
       this.#dirty()
     )
@@ -1843,6 +1856,11 @@ export class LGraphCanvas
     this.clear()
     newGraph.attachCanvas(this)
 
+    // Re-initialize link renderer with new graph
+    this.linkRenderer = new LitegraphLinkAdapter(newGraph)
+    // Disable layout writes during render
+    this.linkRenderer.enableLayoutStoreWrites = false
+
     this.dispatch('litegraph:set-graph', { newGraph, oldGraph: graph })
     this.#dirty()
   }
@@ -2236,11 +2254,22 @@ export class LGraphCanvas
           this.processSelect(node, e, true)
         } else if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
           // Reroutes
-          const reroute = graph.getRerouteOnPos(
-            e.canvasX,
-            e.canvasY,
-            this.#visibleReroutes
-          )
+          // Try layout store first, fallback to old method
+          const rerouteLayout = layoutStore.queryRerouteAtPoint({
+            x: e.canvasX,
+            y: e.canvasY
+          })
+
+          let reroute: Reroute | undefined
+          if (rerouteLayout) {
+            reroute = graph.getReroute(rerouteLayout.id)
+          } else {
+            reroute = graph.getRerouteOnPos(
+              e.canvasX,
+              e.canvasY,
+              this.#visibleReroutes
+            )
+          }
           if (reroute) {
             if (e.altKey) {
               pointer.onClick = (upEvent) => {
@@ -2406,8 +2435,18 @@ export class LGraphCanvas
 
       // Reroutes
       if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
+        // Try layout store first for hit detection
+        const rerouteLayout = layoutStore.queryRerouteAtPoint({ x, y })
+        let foundReroute: Reroute | undefined
+
+        if (rerouteLayout) {
+          foundReroute = graph.getReroute(rerouteLayout.id)
+        }
+
+        // Fallback to checking visible reroutes directly
         for (const reroute of this.#visibleReroutes) {
-          const overReroute = reroute.containsPoint([x, y])
+          const overReroute =
+            foundReroute === reroute || reroute.containsPoint([x, y])
           if (!reroute.isSlotHovered && !overReroute) continue
 
           if (overReroute) {
@@ -2441,16 +2480,32 @@ export class LGraphCanvas
       this.ctx.lineWidth = this.connections_width + 7
       const dpi = Math.max(window?.devicePixelRatio ?? 1, 1)
 
+      // Try layout store for segment hit testing first (more precise)
+      const hitSegment = layoutStore.queryLinkSegmentAtPoint({ x, y }, this.ctx)
+
       for (const linkSegment of this.renderedPaths) {
         const centre = linkSegment._pos
         if (!centre) continue
 
+        // Check if this link segment was hit
+        let isLinkHit =
+          hitSegment &&
+          linkSegment.id ===
+            (linkSegment instanceof Reroute
+              ? hitSegment.rerouteId
+              : hitSegment.linkId)
+
+        if (!isLinkHit && linkSegment.path) {
+          // Fallback to direct path hit testing if not found in layout store
+          isLinkHit = this.ctx.isPointInStroke(
+            linkSegment.path,
+            x * dpi,
+            y * dpi
+          )
+        }
+
         // If we shift click on a link then start a link from that input
-        if (
-          (e.shiftKey || e.altKey) &&
-          linkSegment.path &&
-          this.ctx.isPointInStroke(linkSegment.path, x * dpi, y * dpi)
-        ) {
+        if ((e.shiftKey || e.altKey) && isLinkHit) {
           this.ctx.lineWidth = lineWidth
 
           if (e.shiftKey && !e.altKey) {
@@ -2465,7 +2520,10 @@ export class LGraphCanvas
             pointer.onDragEnd = (e) => this.#processDraggedItems(e)
             return
           }
-        } else if (isInRectangle(x, y, centre[0] - 4, centre[1] - 4, 8, 8)) {
+        } else if (
+          this.linkMarkerShape !== LinkMarkerShape.None &&
+          isInRectangle(x, y, centre[0] - 4, centre[1] - 4, 8, 8)
+        ) {
           this.ctx.lineWidth = lineWidth
 
           pointer.onClick = () => this.showLinkMenu(linkSegment, e)
@@ -3178,8 +3236,27 @@ export class LGraphCanvas
         // For input/output hovering
         // to store the output of isOverNodeInput
         const pos: Point = [0, 0]
-        const inputId = isOverNodeInput(node, x, y, pos)
-        const outputId = isOverNodeOutput(node, x, y, pos)
+
+        // Try to use layout store for hit testing first, fallback to old method
+        let inputId: number = -1
+        let outputId: number = -1
+
+        const slotLayout = layoutStore.querySlotAtPoint({ x, y })
+        if (slotLayout && slotLayout.nodeId === String(node.id)) {
+          if (slotLayout.type === 'input') {
+            inputId = slotLayout.index
+            pos[0] = slotLayout.position.x
+            pos[1] = slotLayout.position.y
+          } else {
+            outputId = slotLayout.index
+            pos[0] = slotLayout.position.x
+            pos[1] = slotLayout.position.y
+          }
+        } else {
+          // Fallback to old method
+          inputId = isOverNodeInput(node, x, y, pos)
+          outputId = isOverNodeOutput(node, x, y, pos)
+        }
         const overWidget = node.getWidgetOnPos(x, y, true) ?? undefined
 
         if (!node.mouseOver) {
@@ -3679,13 +3756,7 @@ export class LGraphCanvas
       e.stopImmediatePropagation()
     }
   }
-
-  /**
-   * Copies canvas items to an internal, app-specific clipboard backed by local storage.
-   * When called without parameters, it copies {@link selectedItems}.
-   * @param items The items to copy.  If nullish, all selected items are copied.
-   */
-  copyToClipboard(items?: Iterable<Positionable>): void {
+  _serializeItems(items?: Iterable<Positionable>): ClipboardItems {
     const serialisable: Required<ClipboardItems> = {
       nodes: [],
       groups: [],
@@ -3743,10 +3814,18 @@ export class LGraphCanvas
       const cloned = subgraph.clone(true).asSerialisable()
       serialisable.subgraphs.push(cloned)
     }
+    return serialisable
+  }
 
+  /**
+   * Copies canvas items to an internal, app-specific clipboard backed by local storage.
+   * When called without parameters, it copies {@link selectedItems}.
+   * @param items The items to copy.  If nullish, all selected items are copied.
+   */
+  copyToClipboard(items?: Iterable<Positionable>): void {
     localStorage.setItem(
       'litegrapheditor_clipboard',
-      JSON.stringify(serialisable)
+      JSON.stringify(this._serializeItems(items))
     )
   }
 
@@ -3778,6 +3857,14 @@ export class LGraphCanvas
    */
   _pasteFromClipboard(
     options: IPasteFromClipboardOptions = {}
+  ): ClipboardPasteResult | undefined {
+    const data = localStorage.getItem('litegrapheditor_clipboard')
+    if (!data) return
+    return this._deserializeItems(JSON.parse(data), options)
+  }
+  _deserializeItems(
+    parsed: ClipboardItems,
+    options: IPasteFromClipboardOptions
   ): ClipboardPasteResult | undefined {
     const { connectInputs = false, position = this.graph_mouse } = options
 
@@ -3788,15 +3875,11 @@ export class LGraphCanvas
     )
       return
 
-    const data = localStorage.getItem('litegrapheditor_clipboard')
-    if (!data) return
-
     const { graph } = this
     if (!graph) throw new NullGraphError()
     graph.beforeChange()
 
     // Parse & initialise
-    const parsed: ClipboardItems = JSON.parse(data)
     parsed.nodes ??= []
     parsed.groups ??= []
     parsed.reroutes ??= []
@@ -4640,18 +4723,28 @@ export class LGraphCanvas
               : LiteGraph.CONNECTING_LINK_COLOR
 
           // the connection being dragged by the mouse
-          this.renderLink(
-            ctx,
-            pos,
-            highlightPos,
-            null,
-            false,
-            null,
-            colour,
-            fromDirection,
-            dragDirection
-          )
+          if (this.linkRenderer) {
+            this.linkRenderer.renderLinkDirect(
+              ctx,
+              pos,
+              highlightPos,
+              null,
+              false,
+              null,
+              colour,
+              fromDirection,
+              dragDirection,
+              {
+                ...this.buildLinkRenderContext(),
+                linkMarkerShape: LinkMarkerShape.None
+              },
+              {
+                disabled: false
+              }
+            )
+          }
 
+          ctx.fillStyle = colour
           ctx.beginPath()
           if (connType === LiteGraph.EVENT || connShape === RenderShape.BOX) {
             ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
@@ -4724,6 +4817,11 @@ export class LGraphCanvas
 
   /** @returns If the pointer is over a link centre marker, the link segment it belongs to.  Otherwise, `undefined`.  */
   #getLinkCentreOnPos(e: CanvasPointerEvent): LinkSegment | undefined {
+    // Skip hit detection if center markers are disabled
+    if (this.linkMarkerShape === LinkMarkerShape.None) {
+      return undefined
+    }
+
     for (const linkSegment of this.renderedPaths) {
       const centre = linkSegment._pos
       if (!centre) continue
@@ -5003,6 +5101,16 @@ export class LGraphCanvas
         ctx.globalAlpha = 1.0
         ctx.imageSmoothingEnabled = true
       }
+      if (this.bg_tint) {
+        ctx.fillStyle = this.bg_tint
+        ctx.fillRect(
+          this.visible_area[0],
+          this.visible_area[1],
+          this.visible_area[2],
+          this.visible_area[3]
+        )
+        ctx.fillStyle = 'transparent'
+      }
 
       // groups
       if (this.graph._groups.length) {
@@ -5049,6 +5157,19 @@ export class LGraphCanvas
   drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void {
     this.current_node = node
 
+    // When Vue nodes mode is enabled, LiteGraph should not draw node chrome or widgets.
+    // We still need to keep slot metrics and layout in sync for hit-testing and links.
+    // Interaction system changes coming later, chances are vue nodes mode will be mostly broken on land
+    if (LiteGraph.vueNodesMode) {
+      // Prepare concrete slots and compute layout measures without rendering visuals.
+      node._setConcreteSlots()
+      if (!node.collapsed) {
+        node.arrange()
+      }
+      // Skip all node body/widget/title rendering. Vue overlay handles visuals.
+      return
+    }
+
     const color = node.renderingColor
     const bgcolor = node.renderingBgColor
 
@@ -5439,7 +5560,9 @@ export class LGraphCanvas
         const link = graph._links.get(link_id)
         if (!link) continue
 
-        const endPos = node.getInputPos(i)
+        const endPos: Point = LiteGraph.vueNodesMode // TODO: still use LG get pos if vue nodes is off until stable
+          ? getSlotPosition(node, i, true)
+          : node.getInputPos(i)
 
         // find link info
         const start_node = graph.getNodeById(link.origin_id)
@@ -5449,7 +5572,9 @@ export class LGraphCanvas
         const startPos: Point =
           outputId === -1
             ? [start_node.pos[0] + 10, start_node.pos[1] + 10]
-            : start_node.getOutputPos(outputId)
+            : LiteGraph.vueNodesMode // TODO: still use LG get pos if vue nodes is off until stable
+              ? getSlotPosition(start_node, outputId, false)
+              : start_node.getOutputPos(outputId)
 
         const output = start_node.outputs[outputId]
         if (!output) continue
@@ -5762,6 +5887,34 @@ export class LGraphCanvas
     }
   }
 
+  /**
+   * Build LinkRenderContext from canvas properties
+   * Helper method for using LitegraphLinkAdapter
+   */
+  private buildLinkRenderContext(): LinkRenderContext {
+    return {
+      // Canvas settings
+      renderMode: this.links_render_mode,
+      connectionWidth: this.connections_width,
+      renderBorder: this.render_connections_border,
+      lowQuality: this.low_quality,
+      highQualityRender: this.highquality_render,
+      scale: this.ds.scale,
+      linkMarkerShape: this.linkMarkerShape,
+      renderConnectionArrows: this.render_connection_arrows,
+
+      // State
+      highlightedLinks: new Set(Object.keys(this.highlighted_links)),
+
+      // Colors
+      defaultLinkColor: this.default_link_color,
+      linkTypeColors: LGraphCanvas.link_type_colors,
+
+      // Pattern for disabled links
+      disabledPattern: this._pattern
+    }
+  }
+
   /**
    * draws a link between two points
    * @param ctx Canvas 2D rendering context
@@ -5803,333 +5956,27 @@ export class LGraphCanvas
       disabled?: boolean
     } = {}
   ): void {
-    const linkColour =
-      link != null && this.highlighted_links[link.id]
-        ? '#FFF'
-        : color ||
-          link?.color ||
-          (link?.type != null && LGraphCanvas.link_type_colors[link.type]) ||
-          this.default_link_color
-    const startDir = start_dir || LinkDirection.RIGHT
-    const endDir = end_dir || LinkDirection.LEFT
-
-    const dist =
-      this.links_render_mode == LinkRenderType.SPLINE_LINK &&
-      (!endControl || !startControl)
-        ? distance(a, b)
-        : 0
-
-    // TODO: Subline code below was inserted in the wrong place - should be before this statement
-    if (this.render_connections_border && !this.low_quality) {
-      ctx.lineWidth = this.connections_width + 4
-    }
-    ctx.lineJoin = 'round'
-    num_sublines ||= 1
-    if (num_sublines > 1) ctx.lineWidth = 0.5
-
-    // begin line shape
-    const path = new Path2D()
-
-    /** The link or reroute we're currently rendering */
-    const linkSegment = reroute ?? link
-    if (linkSegment) linkSegment.path = path
-
-    const innerA = LGraphCanvas.#lTempA
-    const innerB = LGraphCanvas.#lTempB
-
-    /** Reference to {@link reroute._pos} if present, or {@link link._pos} if present.  Caches the centre point of the link. */
-    const pos: Point = linkSegment?._pos ?? [0, 0]
-
-    for (let i = 0; i < num_sublines; i++) {
-      const offsety = (i - (num_sublines - 1) * 0.5) * 5
-      innerA[0] = a[0]
-      innerA[1] = a[1]
-      innerB[0] = b[0]
-      innerB[1] = b[1]
-
-      if (this.links_render_mode == LinkRenderType.SPLINE_LINK) {
-        if (endControl) {
-          innerB[0] = b[0] + endControl[0]
-          innerB[1] = b[1] + endControl[1]
-        } else {
-          this.#addSplineOffset(innerB, endDir, dist)
+    if (this.linkRenderer) {
+      const context = this.buildLinkRenderContext()
+      this.linkRenderer.renderLinkDirect(
+        ctx,
+        a,
+        b,
+        link,
+        skip_border,
+        flow,
+        color,
+        start_dir,
+        end_dir,
+        context,
+        {
+          reroute,
+          startControl,
+          endControl,
+          num_sublines,
+          disabled
         }
-        if (startControl) {
-          innerA[0] = a[0] + startControl[0]
-          innerA[1] = a[1] + startControl[1]
-        } else {
-          this.#addSplineOffset(innerA, startDir, dist)
-        }
-        path.moveTo(a[0], a[1] + offsety)
-        path.bezierCurveTo(
-          innerA[0],
-          innerA[1] + offsety,
-          innerB[0],
-          innerB[1] + offsety,
-          b[0],
-          b[1] + offsety
-        )
-
-        // Calculate centre point
-        findPointOnCurve(pos, a, b, innerA, innerB, 0.5)
-
-        if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) {
-          const justPastCentre = LGraphCanvas.#lTempC
-          findPointOnCurve(justPastCentre, a, b, innerA, innerB, 0.51)
-
-          linkSegment._centreAngle = Math.atan2(
-            justPastCentre[1] - pos[1],
-            justPastCentre[0] - pos[0]
-          )
-        }
-      } else {
-        const l = this.links_render_mode == LinkRenderType.LINEAR_LINK ? 15 : 10
-        switch (startDir) {
-          case LinkDirection.LEFT:
-            innerA[0] += -l
-            break
-          case LinkDirection.RIGHT:
-            innerA[0] += l
-            break
-          case LinkDirection.UP:
-            innerA[1] += -l
-            break
-          case LinkDirection.DOWN:
-            innerA[1] += l
-            break
-        }
-        switch (endDir) {
-          case LinkDirection.LEFT:
-            innerB[0] += -l
-            break
-          case LinkDirection.RIGHT:
-            innerB[0] += l
-            break
-          case LinkDirection.UP:
-            innerB[1] += -l
-            break
-          case LinkDirection.DOWN:
-            innerB[1] += l
-            break
-        }
-        if (this.links_render_mode == LinkRenderType.LINEAR_LINK) {
-          path.moveTo(a[0], a[1] + offsety)
-          path.lineTo(innerA[0], innerA[1] + offsety)
-          path.lineTo(innerB[0], innerB[1] + offsety)
-          path.lineTo(b[0], b[1] + offsety)
-
-          // Calculate centre point
-          pos[0] = (innerA[0] + innerB[0]) * 0.5
-          pos[1] = (innerA[1] + innerB[1]) * 0.5
-
-          if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) {
-            linkSegment._centreAngle = Math.atan2(
-              innerB[1] - innerA[1],
-              innerB[0] - innerA[0]
-            )
-          }
-        } else if (this.links_render_mode == LinkRenderType.STRAIGHT_LINK) {
-          const midX = (innerA[0] + innerB[0]) * 0.5
-
-          path.moveTo(a[0], a[1])
-          path.lineTo(innerA[0], innerA[1])
-          path.lineTo(midX, innerA[1])
-          path.lineTo(midX, innerB[1])
-          path.lineTo(innerB[0], innerB[1])
-          path.lineTo(b[0], b[1])
-
-          // Calculate centre point
-          pos[0] = midX
-          pos[1] = (innerA[1] + innerB[1]) * 0.5
-
-          if (linkSegment && this.linkMarkerShape === LinkMarkerShape.Arrow) {
-            const diff = innerB[1] - innerA[1]
-            if (Math.abs(diff) < 4) linkSegment._centreAngle = 0
-            else if (diff > 0) linkSegment._centreAngle = Math.PI * 0.5
-            else linkSegment._centreAngle = -(Math.PI * 0.5)
-          }
-        } else {
-          return
-        }
-      }
-    }
-
-    // rendering the outline of the connection can be a little bit slow
-    if (this.render_connections_border && !this.low_quality && !skip_border) {
-      ctx.strokeStyle = 'rgba(0,0,0,0.5)'
-      ctx.stroke(path)
-    }
-
-    ctx.lineWidth = this.connections_width
-    ctx.fillStyle = ctx.strokeStyle = linkColour
-    ctx.stroke(path)
-
-    // render arrow in the middle
-    if (this.ds.scale >= 0.6 && this.highquality_render && linkSegment) {
-      // render arrow
-      if (this.render_connection_arrows) {
-        // compute two points in the connection
-        const posA = this.computeConnectionPoint(a, b, 0.25, startDir, endDir)
-        const posB = this.computeConnectionPoint(a, b, 0.26, startDir, endDir)
-        const posC = this.computeConnectionPoint(a, b, 0.75, startDir, endDir)
-        const posD = this.computeConnectionPoint(a, b, 0.76, startDir, endDir)
-
-        // compute the angle between them so the arrow points in the right direction
-        let angleA = 0
-        let angleB = 0
-        if (this.render_curved_connections) {
-          angleA = -Math.atan2(posB[0] - posA[0], posB[1] - posA[1])
-          angleB = -Math.atan2(posD[0] - posC[0], posD[1] - posC[1])
-        } else {
-          angleB = angleA = b[1] > a[1] ? 0 : Math.PI
-        }
-
-        // render arrow
-        const transform = ctx.getTransform()
-        ctx.translate(posA[0], posA[1])
-        ctx.rotate(angleA)
-        ctx.beginPath()
-        ctx.moveTo(-5, -3)
-        ctx.lineTo(0, +7)
-        ctx.lineTo(+5, -3)
-        ctx.fill()
-        ctx.setTransform(transform)
-
-        ctx.translate(posC[0], posC[1])
-        ctx.rotate(angleB)
-        ctx.beginPath()
-        ctx.moveTo(-5, -3)
-        ctx.lineTo(0, +7)
-        ctx.lineTo(+5, -3)
-        ctx.fill()
-        ctx.setTransform(transform)
-      }
-
-      // Draw link centre marker
-      ctx.beginPath()
-      if (this.linkMarkerShape === LinkMarkerShape.Arrow) {
-        const transform = ctx.getTransform()
-        ctx.translate(pos[0], pos[1])
-        if (linkSegment._centreAngle) ctx.rotate(linkSegment._centreAngle)
-        // The math is off, but it currently looks better in chromium
-        ctx.moveTo(-3.2, -5)
-        ctx.lineTo(+7, 0)
-        ctx.lineTo(-3.2, +5)
-        ctx.setTransform(transform)
-      } else if (
-        this.linkMarkerShape == null ||
-        this.linkMarkerShape === LinkMarkerShape.Circle
-      ) {
-        ctx.arc(pos[0], pos[1], 5, 0, Math.PI * 2)
-      }
-      if (disabled) {
-        const { fillStyle, globalAlpha } = ctx
-        ctx.fillStyle = this._pattern ?? '#797979'
-        ctx.globalAlpha = 0.75
-        ctx.fill()
-        ctx.globalAlpha = globalAlpha
-        ctx.fillStyle = fillStyle
-      }
-      ctx.fill()
-
-      if (LLink._drawDebug) {
-        const { fillStyle, font, globalAlpha, lineWidth, strokeStyle } = ctx
-        ctx.globalAlpha = 1
-        ctx.lineWidth = 4
-        ctx.fillStyle = 'white'
-        ctx.strokeStyle = 'black'
-        ctx.font = '16px Arial'
-
-        const text = String(linkSegment.id)
-        const { width, actualBoundingBoxAscent } = ctx.measureText(text)
-        const x = pos[0] - width * 0.5
-        const y = pos[1] + actualBoundingBoxAscent * 0.5
-        ctx.strokeText(text, x, y)
-        ctx.fillText(text, x, y)
-
-        ctx.font = font
-        ctx.globalAlpha = globalAlpha
-        ctx.lineWidth = lineWidth
-        ctx.fillStyle = fillStyle
-        ctx.strokeStyle = strokeStyle
-      }
-    }
-
-    // render flowing points
-    if (flow) {
-      ctx.fillStyle = linkColour
-      for (let i = 0; i < 5; ++i) {
-        const f = (LiteGraph.getTime() * 0.001 + i * 0.2) % 1
-        const flowPos = this.computeConnectionPoint(a, b, f, startDir, endDir)
-        ctx.beginPath()
-        ctx.arc(flowPos[0], flowPos[1], 5, 0, 2 * Math.PI)
-        ctx.fill()
-      }
-    }
-  }
-
-  /**
-   * Finds a point along a spline represented by a to b, with spline endpoint directions dictacted by start_dir and end_dir.
-   * @param a Start point
-   * @param b End point
-   * @param t Time: distance between points (e.g 0.25 is 25% along the line)
-   * @param start_dir Spline start direction
-   * @param end_dir Spline end direction
-   * @returns The point at {@link t} distance along the spline a-b.
-   */
-  computeConnectionPoint(
-    a: ReadOnlyPoint,
-    b: ReadOnlyPoint,
-    t: number,
-    start_dir: LinkDirection,
-    end_dir: LinkDirection
-  ): Point {
-    start_dir ||= LinkDirection.RIGHT
-    end_dir ||= LinkDirection.LEFT
-
-    const dist = distance(a, b)
-    const pa: Point = [a[0], a[1]]
-    const pb: Point = [b[0], b[1]]
-
-    this.#addSplineOffset(pa, start_dir, dist)
-    this.#addSplineOffset(pb, end_dir, dist)
-
-    const c1 = (1 - t) * (1 - t) * (1 - t)
-    const c2 = 3 * ((1 - t) * (1 - t)) * t
-    const c3 = 3 * (1 - t) * (t * t)
-    const c4 = t * t * t
-
-    const x = c1 * a[0] + c2 * pa[0] + c3 * pb[0] + c4 * b[0]
-    const y = c1 * a[1] + c2 * pa[1] + c3 * pb[1] + c4 * b[1]
-    return [x, y]
-  }
-
-  /**
-   * Modifies an existing point, adding a single-axis offset.
-   * @param point The point to add the offset to
-   * @param direction The direction to add the offset in
-   * @param dist Distance to offset
-   * @param factor Distance is mulitplied by this value.  Default: 0.25
-   */
-  #addSplineOffset(
-    point: Point,
-    direction: LinkDirection,
-    dist: number,
-    factor = 0.25
-  ): void {
-    switch (direction) {
-      case LinkDirection.LEFT:
-        point[0] += dist * -factor
-        break
-      case LinkDirection.RIGHT:
-        point[0] += dist * factor
-        break
-      case LinkDirection.UP:
-        point[1] += dist * -factor
-        break
-      case LinkDirection.DOWN:
-        point[1] += dist * factor
-        break
+      )
     }
   }
 
@@ -6336,6 +6183,8 @@ export class LGraphCanvas
               : segment.id
           if (linkId !== undefined) {
             graph.removeLink(linkId)
+            // Clean up layout store
+            layoutStore.deleteLinkLayout(linkId)
           }
           break
         }
@@ -8413,11 +8262,22 @@ export class LGraphCanvas
 
       // Check for reroutes
       if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
-        const reroute = this.graph.getRerouteOnPos(
-          event.canvasX,
-          event.canvasY,
-          this.#visibleReroutes
-        )
+        // Try layout store first, fallback to old method
+        const rerouteLayout = layoutStore.queryRerouteAtPoint({
+          x: event.canvasX,
+          y: event.canvasY
+        })
+
+        let reroute: Reroute | undefined
+        if (rerouteLayout) {
+          reroute = this.graph.getReroute(rerouteLayout.id)
+        } else {
+          reroute = this.graph.getRerouteOnPos(
+            event.canvasX,
+            event.canvasY,
+            this.#visibleReroutes
+          )
+        }
         if (reroute) {
           menu_info.unshift(
             {
diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts
index 607c4e55a..20e26e211 100644
--- a/src/lib/litegraph/src/LGraphNode.ts
+++ b/src/lib/litegraph/src/LGraphNode.ts
@@ -1,3 +1,13 @@
+import { LGraphNodeProperties } from '@/lib/litegraph/src/LGraphNodeProperties'
+import {
+  type SlotPositionContext,
+  calculateInputSlotPos,
+  calculateInputSlotPosFromSlot,
+  calculateOutputSlotPos
+} from '@/renderer/core/canvas/litegraph/slotCalculations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+
 import type { DragAndScale } from './DragAndScale'
 import type { LGraph } from './LGraph'
 import { BadgePosition, LGraphBadge } from './LGraphBadge'
@@ -84,19 +94,19 @@ export type NodeId = number | string
 
 export type NodeProperty = string | number | boolean | object
 
-export interface INodePropertyInfo {
+interface INodePropertyInfo {
   name: string
   type?: string
   default_value: NodeProperty | undefined
 }
 
-export interface IMouseOverData {
+interface IMouseOverData {
   inputId?: number
   outputId?: number
   overWidget?: IBaseWidget
 }
 
-export interface ConnectByTypeOptions {
+interface ConnectByTypeOptions {
   /** @deprecated Events */
   createEventInCase?: boolean
   /** Allow our wildcard slot to connect to typed slots on remote node. Default: true */
@@ -108,12 +118,12 @@ export interface ConnectByTypeOptions {
 }
 
 /** Internal type used for type safety when implementing generic checks for inputs & outputs */
-export interface IGenericLinkOrLinks {
+interface IGenericLinkOrLinks {
   links?: INodeOutputSlot['links']
   link?: INodeInputSlot['link']
 }
 
-export interface FindFreeSlotOptions {
+interface FindFreeSlotOptions {
   /** Slots matching these types will be ignored.  Default: [] */
   typesNotAccepted?: ISlotType[]
   /** If true, the slot itself is returned instead of the index.  Default: false */
@@ -258,6 +268,10 @@ export class LGraphNode
   properties_info: INodePropertyInfo[] = []
   flags: INodeFlags = {}
   widgets?: IBaseWidget[]
+
+  /** Property manager for this node */
+  changeTracker: LGraphNodeProperties
+
   /**
    * The amount of space available for widgets to grow into.
    * @see {@link layoutWidgets}
@@ -729,6 +743,8 @@ export class LGraphNode
       error: this.#getErrorStrokeStyle,
       selected: this.#getSelectedStrokeStyle
     }
+    // Initialize property manager with tracked properties
+    this.changeTracker = new LGraphNodeProperties(this)
   }
 
   /** Internal callback for subgraph nodes. Do not implement externally. */
@@ -1941,6 +1957,14 @@ export class LGraphNode
   move(deltaX: number, deltaY: number): void {
     if (this.pinned) return
 
+    // If Vue nodes mode is enabled, skip LiteGraph's direct position update
+    // The layout store will handle the movement and sync back to LiteGraph
+    if (LiteGraph.vueNodesMode) {
+      // Vue nodes handle their own dragging through the layout store
+      // This prevents the snap-back issue from conflicting position updates
+      return
+    }
+
     this.pos[0] += deltaX
     this.pos[1] += deltaY
   }
@@ -2745,6 +2769,8 @@ export class LGraphNode
     const { graph } = this
     if (!graph) throw new NullGraphError()
 
+    const layoutMutations = useLayoutMutations()
+
     const outputIndex = this.outputs.indexOf(output)
     if (outputIndex === -1) {
       console.warn('connectSlots: output not found')
@@ -2803,6 +2829,16 @@ export class LGraphNode
     // add to graph links list
     graph._links.set(link.id, link)
 
+    // Register link in Layout Store for spatial tracking
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.createLink(
+      link.id,
+      this.id,
+      outputIndex,
+      inputNode.id,
+      inputIndex
+    )
+
     // connect in output
     output.links ??= []
     output.links.push(link.id)
@@ -3204,6 +3240,25 @@ export class LGraphNode
     return this.outputs.filter((slot: INodeOutputSlot) => !slot.pos)
   }
 
+  /**
+   * Get the context needed for slot position calculations
+   * @internal
+   */
+  #getSlotPositionContext(): SlotPositionContext {
+    return {
+      nodeX: this.pos[0],
+      nodeY: this.pos[1],
+      nodeWidth: this.size[0],
+      nodeHeight: this.size[1],
+      collapsed: this.flags.collapsed ?? false,
+      collapsedWidth: this._collapsed_width,
+      slotStartY: this.constructor.slot_start_y,
+      inputs: this.inputs,
+      outputs: this.outputs,
+      widgets: this.widgets
+    }
+  }
+
   /**
    * Gets the position of an input slot, in graph co-ordinates.
    *
@@ -3212,7 +3267,7 @@ export class LGraphNode
    * @returns Position of the input slot
    */
   getInputPos(slot: number): Point {
-    return this.getInputSlotPos(this.inputs[slot])
+    return calculateInputSlotPos(this.#getSlotPositionContext(), slot)
   }
 
   /**
@@ -3221,25 +3276,7 @@ export class LGraphNode
    * @returns Position of the centre of the input slot in graph co-ordinates.
    */
   getInputSlotPos(input: INodeInputSlot): Point {
-    const {
-      pos: [nodeX, nodeY]
-    } = this
-
-    if (this.flags.collapsed) {
-      const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5
-      return [nodeX, nodeY - halfTitle]
-    }
-
-    const { pos } = input
-    if (pos) return [nodeX + pos[0], nodeY + pos[1]]
-
-    // default vertical slots
-    const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
-    const nodeOffsetY = this.constructor.slot_start_y || 0
-    const slotIndex = this.#defaultVerticalInputs.indexOf(input)
-    const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
-
-    return [nodeX + offsetX, nodeY + slotY + nodeOffsetY]
+    return calculateInputSlotPosFromSlot(this.#getSlotPositionContext(), input)
   }
 
   /**
@@ -3250,29 +3287,7 @@ export class LGraphNode
    * @returns Position of the output slot
    */
   getOutputPos(slot: number): Point {
-    const {
-      pos: [nodeX, nodeY],
-      outputs,
-      size: [width]
-    } = this
-
-    if (this.flags.collapsed) {
-      const width = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
-      const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5
-      return [nodeX + width, nodeY - halfTitle]
-    }
-
-    const outputPos = outputs?.[slot]?.pos
-    if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]]
-
-    // default vertical slots
-    const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
-    const nodeOffsetY = this.constructor.slot_start_y || 0
-    const slotIndex = this.#defaultVerticalOutputs.indexOf(this.outputs[slot])
-    const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
-
-    // TODO: Why +1?
-    return [nodeX + width + 1 - offsetX, nodeY + slotY + nodeOffsetY]
+    return calculateOutputSlotPos(this.#getSlotPositionContext(), slot)
   }
 
   /** @inheritdoc */
@@ -4019,14 +4034,26 @@ export class LGraphNode
     }
     if (!slotByWidgetName.size) return
 
-    for (const widget of this.widgets) {
-      const slot = slotByWidgetName.get(widget.name)
-      if (!slot) continue
+    // Only set custom pos if not using Vue positioning
+    // Vue positioning calculates widget slot positions dynamically
+    if (!LiteGraph.vueNodesMode) {
+      for (const widget of this.widgets) {
+        const slot = slotByWidgetName.get(widget.name)
+        if (!slot) continue
 
-      const actualSlot = this.#concreteInputs[slot.index]
-      const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
-      actualSlot.pos = [offset, widget.y + offset]
-      this.#measureSlot(actualSlot, slot.index, true)
+        const actualSlot = this.#concreteInputs[slot.index]
+        const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+        actualSlot.pos = [offset, widget.y + offset]
+        this.#measureSlot(actualSlot, slot.index, true)
+      }
+    } else {
+      // For Vue positioning, just measure the slots without setting pos
+      for (const widget of this.widgets) {
+        const slot = slotByWidgetName.get(widget.name)
+        if (!slot) continue
+
+        this.#measureSlot(this.#concreteInputs[slot.index], slot.index, true)
+      }
     }
   }
 
diff --git a/src/lib/litegraph/src/LGraphNodeProperties.ts b/src/lib/litegraph/src/LGraphNodeProperties.ts
new file mode 100644
index 000000000..33eafa02f
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphNodeProperties.ts
@@ -0,0 +1,176 @@
+import type { LGraphNode } from './LGraphNode'
+
+/**
+ * Default properties to track
+ */
+const DEFAULT_TRACKED_PROPERTIES: string[] = ['title', 'flags.collapsed']
+
+/**
+ * Manages node properties with optional change tracking and instrumentation.
+ */
+export class LGraphNodeProperties {
+  /** The node this property manager belongs to */
+  node: LGraphNode
+
+  /** Set of property paths that have been instrumented */
+  #instrumentedPaths = new Set<string>()
+
+  constructor(node: LGraphNode) {
+    this.node = node
+
+    this.#setupInstrumentation()
+  }
+
+  /**
+   * Sets up property instrumentation for all tracked properties
+   */
+  #setupInstrumentation(): void {
+    for (const path of DEFAULT_TRACKED_PROPERTIES) {
+      this.#instrumentProperty(path)
+    }
+  }
+
+  /**
+   * Instruments a single property to track changes
+   */
+  #instrumentProperty(path: string): void {
+    const parts = path.split('.')
+
+    if (parts.length > 1) {
+      this.#ensureNestedPath(path)
+    }
+
+    let targetObject: any = this.node
+    let propertyName = parts[0]
+
+    if (parts.length > 1) {
+      for (let i = 0; i < parts.length - 1; i++) {
+        targetObject = targetObject[parts[i]]
+      }
+      propertyName = parts.at(-1)!
+    }
+
+    const hasProperty = Object.prototype.hasOwnProperty.call(
+      targetObject,
+      propertyName
+    )
+    const currentValue = targetObject[propertyName]
+
+    if (!hasProperty) {
+      let value: any = undefined
+
+      Object.defineProperty(targetObject, propertyName, {
+        get: () => value,
+        set: (newValue: any) => {
+          const oldValue = value
+          value = newValue
+          this.#emitPropertyChange(path, oldValue, newValue)
+
+          // Update enumerable: true for non-undefined values, false for undefined
+          const shouldBeEnumerable = newValue !== undefined
+          const currentDescriptor = Object.getOwnPropertyDescriptor(
+            targetObject,
+            propertyName
+          )
+          if (
+            currentDescriptor &&
+            currentDescriptor.enumerable !== shouldBeEnumerable
+          ) {
+            Object.defineProperty(targetObject, propertyName, {
+              ...currentDescriptor,
+              enumerable: shouldBeEnumerable
+            })
+          }
+        },
+        enumerable: false,
+        configurable: true
+      })
+    } else {
+      Object.defineProperty(
+        targetObject,
+        propertyName,
+        this.#createInstrumentedDescriptor(path, currentValue)
+      )
+    }
+
+    this.#instrumentedPaths.add(path)
+  }
+
+  /**
+   * Creates a property descriptor that emits change events
+   */
+  #createInstrumentedDescriptor(
+    propertyPath: string,
+    initialValue: any
+  ): PropertyDescriptor {
+    let value = initialValue
+
+    return {
+      get: () => value,
+      set: (newValue: any) => {
+        const oldValue = value
+        value = newValue
+        this.#emitPropertyChange(propertyPath, oldValue, newValue)
+      },
+      enumerable: true,
+      configurable: true
+    }
+  }
+
+  /**
+   * Emits a property change event if the node is connected to a graph
+   */
+  #emitPropertyChange(
+    propertyPath: string,
+    oldValue: any,
+    newValue: any
+  ): void {
+    if (oldValue !== newValue && this.node.graph) {
+      this.node.graph.trigger('node:property:changed', {
+        nodeId: this.node.id,
+        property: propertyPath,
+        oldValue,
+        newValue
+      })
+    }
+  }
+
+  /**
+   * Ensures parent objects exist for nested properties
+   */
+  #ensureNestedPath(path: string): void {
+    const parts = path.split('.')
+    let current: any = this.node
+
+    // Create all parent objects except the last property
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+      if (!current[part]) {
+        current[part] = {}
+      }
+      current = current[part]
+    }
+  }
+
+  /**
+   * Checks if a property is being tracked
+   */
+  isTracked(path: string): boolean {
+    return this.#instrumentedPaths.has(path)
+  }
+
+  /**
+   * Gets the list of tracked properties
+   */
+  getTrackedProperties(): string[] {
+    return [...DEFAULT_TRACKED_PROPERTIES]
+  }
+
+  /**
+   * Custom toJSON method for JSON.stringify
+   * Returns undefined to exclude from serialization since we only use defaults
+   */
+  toJSON(): any {
+    return undefined
+  }
+}
diff --git a/src/lib/litegraph/src/LLink.ts b/src/lib/litegraph/src/LLink.ts
index bd36719ed..58ae4e090 100644
--- a/src/lib/litegraph/src/LLink.ts
+++ b/src/lib/litegraph/src/LLink.ts
@@ -2,6 +2,8 @@ import {
   SUBGRAPH_INPUT_ID,
   SUBGRAPH_OUTPUT_ID
 } from '@/lib/litegraph/src/constants'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
 
 import type { LGraphNode, NodeId } from './LGraphNode'
 import type { Reroute, RerouteId } from './Reroute'
@@ -14,13 +16,14 @@ import type {
   LinkSegment,
   ReadonlyLinkNetwork
 } from './interfaces'
-import { Subgraph } from './litegraph'
 import type {
   Serialisable,
   SerialisableLLink,
   SubgraphIO
 } from './types/serialisation'
 
+const layoutMutations = useLayoutMutations()
+
 export type LinkId = number
 
 export type SerialisedLLinkArray = [
@@ -460,19 +463,15 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
       reroute.linkIds.delete(this.id)
       if (!keepReroutes && !reroute.totalLinks) {
         network.reroutes.delete(reroute.id)
+        // Delete reroute from Layout Store
+        layoutMutations.setSource(LayoutSource.Canvas)
+        layoutMutations.deleteReroute(reroute.id)
       }
     }
     network.links.delete(this.id)
-
-    if (this.originIsIoNode && network instanceof Subgraph) {
-      const subgraphInput = network.inputs.at(this.origin_slot)
-      if (!subgraphInput)
-        throw new Error('Invalid link - subgraph input not found')
-
-      subgraphInput.events.dispatch('input-disconnected', {
-        input: subgraphInput
-      })
-    }
+    // Delete link from Layout Store
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.deleteLink(this.id)
   }
 
   /**
diff --git a/src/lib/litegraph/src/LiteGraphGlobal.ts b/src/lib/litegraph/src/LiteGraphGlobal.ts
index 42ad95877..85911e5b9 100644
--- a/src/lib/litegraph/src/LiteGraphGlobal.ts
+++ b/src/lib/litegraph/src/LiteGraphGlobal.ts
@@ -330,6 +330,18 @@ export class LiteGraphGlobal {
    */
   saveViewportWithGraph: boolean = true
 
+  /**
+   * Enable Vue nodes mode for rendering and positioning.
+   * When true:
+   * - Nodes will calculate slot positions using Vue component dimensions
+   * - LiteGraph will skip rendering node bodies entirely
+   * - Vue components will handle all node rendering
+   * - LiteGraph continues to render connections, links, and graph background
+   * This should be set by the frontend when the Vue nodes feature is enabled.
+   * @default false
+   */
+  vueNodesMode: boolean = false
+
   // TODO: Remove legacy accessors
   LGraph = LGraph
   LLink = LLink
diff --git a/src/lib/litegraph/src/Reroute.ts b/src/lib/litegraph/src/Reroute.ts
index 886930227..4ac682599 100644
--- a/src/lib/litegraph/src/Reroute.ts
+++ b/src/lib/litegraph/src/Reroute.ts
@@ -1,3 +1,6 @@
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+
 import { LGraphBadge } from './LGraphBadge'
 import type { LGraphNode, NodeId } from './LGraphNode'
 import { LLink, type LinkId } from './LLink'
@@ -15,6 +18,8 @@ import type {
 import { distance, isPointInRect } from './measure'
 import type { Serialisable, SerialisableReroute } from './types/serialisation'
 
+const layoutMutations = useLayoutMutations()
+
 export type RerouteId = number
 
 /** The input or output slot that an incomplete reroute link is connected to. */
@@ -407,8 +412,17 @@ export class Reroute
 
   /** @inheritdoc */
   move(deltaX: number, deltaY: number) {
+    const previousPos = { x: this.#pos[0], y: this.#pos[1] }
     this.#pos[0] += deltaX
     this.#pos[1] += deltaY
+
+    // Update Layout Store with new position
+    layoutMutations.setSource(LayoutSource.Canvas)
+    layoutMutations.moveReroute(
+      this.id,
+      { x: this.#pos[0], y: this.#pos[1] },
+      previousPos
+    )
   }
 
   /** @inheritdoc */
diff --git a/src/lib/litegraph/src/canvas/LinkConnector.ts b/src/lib/litegraph/src/canvas/LinkConnector.ts
index 1456953ad..a70fd8752 100644
--- a/src/lib/litegraph/src/canvas/LinkConnector.ts
+++ b/src/lib/litegraph/src/canvas/LinkConnector.ts
@@ -44,7 +44,7 @@ import { ToOutputRenderLink } from './ToOutputRenderLink'
  * References are only held atomically within a function, never passed.
  * The concrete implementation may be replaced or proxied without side-effects.
  */
-export interface LinkConnectorState {
+interface LinkConnectorState {
   /**
    * The type of slot that links are being connected **to**.
    * - When `undefined`, no operation is being performed.
@@ -68,7 +68,7 @@ type RenderLinkUnion =
   | ToInputFromIoNodeLink
   | ToOutputFromIoNodeLink
 
-export interface LinkConnectorExport {
+interface LinkConnectorExport {
   renderLinks: RenderLink[]
   inputLinks: LLink[]
   outputLinks: LLink[]
diff --git a/src/lib/litegraph/src/draw.ts b/src/lib/litegraph/src/draw.ts
index 756c60db1..2b8987ef8 100644
--- a/src/lib/litegraph/src/draw.ts
+++ b/src/lib/litegraph/src/draw.ts
@@ -1,7 +1,7 @@
 import type { Rectangle } from './infrastructure/Rectangle'
 import type { CanvasColour, Rect } from './interfaces'
 import { LiteGraph } from './litegraph'
-import { LinkDirection, RenderShape, TitleMode } from './types/globalEnums'
+import { RenderShape, TitleMode } from './types/globalEnums'
 
 const ELLIPSIS = '\u2026'
 const TWO_DOT_LEADER = '\u2025'
@@ -22,12 +22,7 @@ export enum SlotShape {
 }
 
 /** @see LinkDirection */
-export enum SlotDirection {
-  Up = LinkDirection.UP,
-  Right = LinkDirection.RIGHT,
-  Down = LinkDirection.DOWN,
-  Left = LinkDirection.LEFT
-}
+export enum SlotDirection {}
 
 export enum LabelPosition {
   Left = 'left',
@@ -53,7 +48,7 @@ export interface IDrawBoundingOptions {
   lineWidth?: number
 }
 
-export interface IDrawTextInAreaOptions {
+interface IDrawTextInAreaOptions {
   /** The canvas to draw the text on. */
   ctx: CanvasRenderingContext2D
   /** The text to draw. */
diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts
index 67870b390..f48a7f141 100644
--- a/src/lib/litegraph/src/interfaces.ts
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -5,6 +5,7 @@ import type { ContextMenu } from './ContextMenu'
 import type { LGraphNode, NodeId } from './LGraphNode'
 import type { LLink, LinkId } from './LLink'
 import type { Reroute, RerouteId } from './Reroute'
+import { SubgraphInput } from './subgraph/SubgraphInput'
 import type { SubgraphInputNode } from './subgraph/SubgraphInputNode'
 import type { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'
 import type { LinkDirection, RenderShape } from './types/globalEnums'
@@ -63,7 +64,7 @@ export interface HasBoundingRect {
 }
 
 /** An object containing a set of child objects */
-export interface Parent<TChild> {
+interface Parent<TChild> {
   /** All objects owned by the parent object. */
   readonly children?: ReadonlySet<TChild>
 }
@@ -209,7 +210,7 @@ export interface LinkSegment {
   readonly origin_slot: number | undefined
 }
 
-export interface IInputOrOutput {
+interface IInputOrOutput {
   // If an input, this will be defined
   input?: INodeInputSlot | null
   // If an output, this will be defined
@@ -272,14 +273,11 @@ export type ReadOnlyTypedArray<T extends TypedArrays | TypedBigIntArrays> =
   >
 
 /** Union of property names that are of type Match */
-export type KeysOfType<T, Match> = Exclude<
+type KeysOfType<T, Match> = Exclude<
   { [P in keyof T]: T[P] extends Match ? P : never }[keyof T],
   undefined
 >
 
-/** A new type that contains only the properties of T that are of type Match */
-export type PickByType<T, Match> = { [P in keyof T]: Extract<T[P], Match> }
-
 /** The names of all (optional) methods and functions in T */
 export type MethodNames<T> = KeysOfType<T, ((...args: any) => any) | undefined>
 
@@ -447,7 +445,7 @@ export interface IContextMenuValue<
   ): void | boolean
 }
 
-export interface IContextMenuSubmenu<TValue = unknown>
+interface IContextMenuSubmenu<TValue = unknown>
   extends IContextMenuOptions<TValue> {
   options: ConstructorParameters<typeof ContextMenu<TValue>>[0]
 }
@@ -471,6 +469,7 @@ export interface DefaultConnectionColors {
 
 export interface ISubgraphInput extends INodeInputSlot {
   _listenerController?: AbortController
+  _subgraphSlot: SubgraphInput
 }
 
 /**
diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts
index a4987b645..46202a219 100644
--- a/src/lib/litegraph/src/litegraph.ts
+++ b/src/lib/litegraph/src/litegraph.ts
@@ -2,7 +2,7 @@ import type { ContextMenu } from './ContextMenu'
 import type { LGraphNode } from './LGraphNode'
 import { LiteGraphGlobal } from './LiteGraphGlobal'
 import type { ConnectingLink, Point } from './interfaces'
-import type { IContextMenuOptions, INodeSlot, Size } from './interfaces'
+import type { IContextMenuOptions, Size } from './interfaces'
 import { loadPolyfills } from './polyfills'
 import type { CanvasEventDetail } from './types/events'
 import type { RenderShape, TitleMode } from './types/globalEnums'
@@ -22,10 +22,8 @@ loadPolyfills()
 // Definitions by: NateScarlet <https://github.com/NateScarlet>
 /** @deprecated Use {@link Point} instead. */
 export type Vector2 = Point
-/** @deprecated Use {@link Rect} instead. */
-export type Vector4 = [number, number, number, number]
 
-export interface IContextMenuItem {
+interface IContextMenuItem {
   content: string
   callback?: ContextMenuEventListener
   /** Used as innerHTML for extra child element */
@@ -38,7 +36,7 @@ export interface IContextMenuItem {
   className?: string
 }
 
-export type ContextMenuEventListener = (
+type ContextMenuEventListener = (
   value: IContextMenuItem,
   options: IContextMenuOptions,
   event: MouseEvent,
@@ -46,14 +44,6 @@ export type ContextMenuEventListener = (
   node: LGraphNode
 ) => boolean | void
 
-export interface LinkReleaseContext {
-  node_to?: LGraphNode
-  node_from?: LGraphNode
-  slot_from: INodeSlot
-  type_filter_in?: string
-  type_filter_out?: string
-}
-
 export interface LinkReleaseContextExtended {
   links: ConnectingLink[]
 }
@@ -84,58 +74,37 @@ export interface LGraphNodeConstructor<T extends LGraphNode = LGraphNode> {
 
 // End backwards compat
 
-export { InputIndicators } from './canvas/InputIndicators'
 export { LinkConnector } from './canvas/LinkConnector'
 export { isOverNodeInput, isOverNodeOutput } from './canvas/measureSlots'
 export { CanvasPointer } from './CanvasPointer'
 export * as Constants from './constants'
-export { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID } from './constants'
+export { SUBGRAPH_INPUT_ID } from './constants'
 export { ContextMenu } from './ContextMenu'
-export { CurveEditor } from './CurveEditor'
+
 export { DragAndScale } from './DragAndScale'
-export { LabelPosition, SlotDirection, SlotShape, SlotType } from './draw'
-export { strokeShape } from './draw'
+
 export { Rectangle } from './infrastructure/Rectangle'
 export { RecursionError } from './infrastructure/RecursionError'
 export type {
   CanvasColour,
   ColorOption,
-  ConnectingLink,
-  Direction,
-  IBoundaryNodes,
-  IColorable,
   IContextMenuOptions,
   IContextMenuValue,
-  IFoundSlot,
-  IInputOrOutput,
-  INodeFlags,
   INodeInputSlot,
   INodeOutputSlot,
   INodeSlot,
   ISlotType,
-  KeysOfType,
   LinkNetwork,
-  LinkSegment,
-  MethodNames,
-  PickByType,
   Point,
   Positionable,
-  ReadonlyLinkNetwork,
-  ReadOnlyPoint,
-  ReadOnlyRect,
-  Rect,
   Size
 } from './interfaces'
 export { LGraph } from './LGraph'
-export {
-  BadgePosition,
-  LGraphBadge,
-  type LGraphBadgeOptions
-} from './LGraphBadge'
-export { LGraphCanvas, type LGraphCanvasState } from './LGraphCanvas'
+export { BadgePosition, LGraphBadge } from './LGraphBadge'
+export { LGraphCanvas } from './LGraphCanvas'
 export { LGraphGroup } from './LGraphGroup'
 export { LGraphNode, type NodeId } from './LGraphNode'
-export { type LinkId, LLink } from './LLink'
+export { LLink } from './LLink'
 export { createBounds } from './measure'
 export { Reroute, type RerouteId } from './Reroute'
 export {
@@ -146,23 +115,18 @@ export {
 export { SubgraphNode } from './subgraph/SubgraphNode'
 export type { CanvasPointerEvent } from './types/events'
 export {
-  CanvasItem,
   EaseFunction,
   LGraphEventMode,
   LinkDirection,
   LinkMarkerShape,
-  RenderShape,
-  TitleMode
+  RenderShape
 } from './types/globalEnums'
 export type {
   ExportedSubgraph,
   ExportedSubgraphInstance,
-  ExportedSubgraphIONode,
   ISerialisedGraph,
   ISerialisedNode,
-  SerialisableGraph,
-  SerialisableLLink,
-  SubgraphIO
+  SerialisableGraph
 } from './types/serialisation'
 export type { IWidget } from './types/widgets'
 export { isColorable } from './utils/type'
@@ -171,19 +135,14 @@ export type { UUID } from './utils/uuid'
 export { truncateText } from './utils/textUtils'
 export { getWidgetStep } from './utils/widget'
 export { distributeSpace, type SpaceRequest } from './utils/spaceDistribution'
-export { BaseSteppedWidget } from './widgets/BaseSteppedWidget'
+
 export { BaseWidget } from './widgets/BaseWidget'
-export { BooleanWidget } from './widgets/BooleanWidget'
-export { ButtonWidget } from './widgets/ButtonWidget'
-export { ComboWidget } from './widgets/ComboWidget'
-export { KnobWidget } from './widgets/KnobWidget'
+
 export { LegacyWidget } from './widgets/LegacyWidget'
-export { NumberWidget } from './widgets/NumberWidget'
-export { SliderWidget } from './widgets/SliderWidget'
-export { TextWidget } from './widgets/TextWidget'
+
 export { isComboWidget } from './widgets/widgetMap'
 // Additional test-specific exports
-export { LGraphButton, type LGraphButtonOptions } from './LGraphButton'
+export { LGraphButton } from './LGraphButton'
 export { MovingOutputLink } from './canvas/MovingOutputLink'
 export { ToOutputRenderLink } from './canvas/ToOutputRenderLink'
 export { ToInputFromIoNodeLink } from './canvas/ToInputFromIoNodeLink'
diff --git a/src/lib/litegraph/src/node/NodeSlot.ts b/src/lib/litegraph/src/node/NodeSlot.ts
index 527c1dfac..48f0a443c 100644
--- a/src/lib/litegraph/src/node/NodeSlot.ts
+++ b/src/lib/litegraph/src/node/NodeSlot.ts
@@ -73,7 +73,7 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
     slot: OptionalProps<INodeSlot, 'boundingRect'>,
     node: LGraphNode
   ) {
-    // Workaround: Ensure internal properties are not copied to the slot (_listenerController
+    // @ts-expect-error Workaround: Ensure internal properties are not copied to the slot (_listenerController
     // https://github.com/Comfy-Org/litegraph.js/issues/1138
     const maybeSubgraphSlot: OptionalProps<
       ISubgraphInput,
diff --git a/src/lib/litegraph/src/node/slotUtils.ts b/src/lib/litegraph/src/node/slotUtils.ts
index 3d97ca142..712637040 100644
--- a/src/lib/litegraph/src/node/slotUtils.ts
+++ b/src/lib/litegraph/src/node/slotUtils.ts
@@ -18,9 +18,7 @@ type CommonIoSlotProps = SharedIntersection<
   ISerialisableNodeOutput
 >
 
-export function shallowCloneCommonProps(
-  slot: CommonIoSlotProps
-): CommonIoSlotProps {
+function shallowCloneCommonProps(slot: CommonIoSlotProps): CommonIoSlotProps {
   const {
     color_off,
     color_on,
@@ -84,10 +82,6 @@ export function isINodeInputSlot(slot: INodeSlot): slot is INodeInputSlot {
   return 'link' in slot
 }
 
-export function isINodeOutputSlot(slot: INodeSlot): slot is INodeOutputSlot {
-  return 'links' in slot
-}
-
 /**
  * Type guard: Whether this input slot is attached to a widget.
  * @param slot The slot to check.
diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
index fd7a99a2b..ed41f3a83 100644
--- a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
+++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
@@ -272,7 +272,7 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
       const matchingIndex = this.#getBypassSlotIndex(slot, type)
 
       // No input types match
-      if (matchingIndex === undefined) {
+      if (matchingIndex === -1) {
         console.debug(
           `[ExecutableNodeDTO.resolveOutput] No input types match type [${type}] for id [${this.id}] slot [${slot}]`,
           this
@@ -331,7 +331,7 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
    * Used when bypassing nodes.
    * @param slot The output slot index on this node
    * @param type The type of the final target input (so type list matches are accurate)
-   * @returns The index of the input slot on this node, otherwise `undefined`.
+   * @returns The index of the input slot on this node, otherwise `-1`.
    */
   #getBypassSlotIndex(slot: number, type: ISlotType) {
     const { inputs } = this
@@ -352,15 +352,15 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
       return slot
     }
 
+    // Preserve legacy behaviour; use exact match first.
+    const exactMatch = inputs.findIndex((input) => input.type === type)
+    if (exactMatch !== -1) return exactMatch
+
     // Find first matching slot - prefer exact type
-    return (
-      // Preserve legacy behaviour; use exact match first.
-      inputs.findIndex((input) => input.type === type) ??
-      inputs.findIndex(
-        (input) =>
-          LiteGraph.isValidConnection(input.type, outputType) &&
-          LiteGraph.isValidConnection(input.type, type)
-      )
+    return inputs.findIndex(
+      (input) =>
+        LiteGraph.isValidConnection(input.type, outputType) &&
+        LiteGraph.isValidConnection(input.type, type)
     )
   }
 
diff --git a/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts b/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts
index ed973733a..1634a769f 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphSlotBase.ts
@@ -28,7 +28,7 @@ import type { SubgraphInputNode } from './SubgraphInputNode'
 import type { SubgraphOutput } from './SubgraphOutput'
 import type { SubgraphOutputNode } from './SubgraphOutputNode'
 
-export interface SubgraphSlotDrawOptions {
+interface SubgraphSlotDrawOptions {
   ctx: CanvasRenderingContext2D
   colorContext: DefaultConnectionColors
   lowQuality?: boolean
diff --git a/src/lib/litegraph/src/subgraph/subgraphUtils.ts b/src/lib/litegraph/src/subgraph/subgraphUtils.ts
index 2053d4999..c225dd7b8 100644
--- a/src/lib/litegraph/src/subgraph/subgraphUtils.ts
+++ b/src/lib/litegraph/src/subgraph/subgraphUtils.ts
@@ -27,7 +27,7 @@ import { SubgraphInputNode } from './SubgraphInputNode'
 import type { SubgraphOutput } from './SubgraphOutput'
 import { SubgraphOutputNode } from './SubgraphOutputNode'
 
-export interface FilteredItems {
+interface FilteredItems {
   nodes: Set<LGraphNode>
   reroutes: Set<Reroute>
   groups: Set<LGraphGroup>
diff --git a/src/lib/litegraph/src/types/events.ts b/src/lib/litegraph/src/types/events.ts
index 912cc89ff..e5f8912ab 100644
--- a/src/lib/litegraph/src/types/events.ts
+++ b/src/lib/litegraph/src/types/events.ts
@@ -6,7 +6,7 @@ import type { LGraphNode } from '../LGraphNode'
 import type { LinkReleaseContextExtended } from '../litegraph'
 
 /** For Canvas*Event - adds graph space co-ordinates (property names are shipped) */
-export interface ICanvasPosition {
+interface ICanvasPosition {
   /** X co-ordinate of the event, in graph space (NOT canvas space) */
   canvasX: number
   /** Y co-ordinate of the event, in graph space (NOT canvas space) */
@@ -14,7 +14,7 @@ export interface ICanvasPosition {
 }
 
 /** For Canvas*Event */
-export interface IDeltaPosition {
+interface IDeltaPosition {
   deltaX: number
   deltaY: number
 }
@@ -23,7 +23,7 @@ export interface IDeltaPosition {
  * Workaround for Firefox returning 0 on offsetX/Y props
  * See https://github.com/Comfy-Org/litegraph.js/issues/403 for details
  */
-export interface IOffsetWorkaround {
+interface IOffsetWorkaround {
   /** See {@link MouseEvent.offsetX}.  This workaround is required (2024-12-31) to support Firefox, which always returns 0 */
   safeOffsetX: number
   /** See {@link MouseEvent.offsetY}.  This workaround is required (2024-12-31) to support Firefox, which always returns 0 */
@@ -45,14 +45,11 @@ interface LegacyMouseEvent {
 export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent {}
 
 /** MouseEvent with canvasX/Y and deltaX/Y properties */
-export interface CanvasMouseEvent
+interface CanvasMouseEvent
   extends MouseEvent,
     Readonly<CanvasPointerExtensions>,
     LegacyMouseEvent {}
 
-/** DragEvent with canvasX/Y and deltaX/Y properties */
-export interface CanvasDragEvent extends DragEvent, CanvasPointerExtensions {}
-
 export type CanvasEventDetail =
   | GenericEventDetail
   | GroupDoubleClickEventDetail
@@ -60,29 +57,29 @@ export type CanvasEventDetail =
   | EmptyDoubleClickEventDetail
   | EmptyReleaseEventDetail
 
-export interface GenericEventDetail {
+interface GenericEventDetail {
   subType: 'before-change' | 'after-change'
 }
 
-export interface OriginalEvent {
+interface OriginalEvent {
   originalEvent: CanvasPointerEvent
 }
 
-export interface EmptyReleaseEventDetail extends OriginalEvent {
+interface EmptyReleaseEventDetail extends OriginalEvent {
   subType: 'empty-release'
   linkReleaseContext: LinkReleaseContextExtended
 }
 
-export interface EmptyDoubleClickEventDetail extends OriginalEvent {
+interface EmptyDoubleClickEventDetail extends OriginalEvent {
   subType: 'empty-double-click'
 }
 
-export interface GroupDoubleClickEventDetail extends OriginalEvent {
+interface GroupDoubleClickEventDetail extends OriginalEvent {
   subType: 'group-double-click'
   group: LGraphGroup
 }
 
-export interface NodeDoubleClickEventDetail extends OriginalEvent {
+interface NodeDoubleClickEventDetail extends OriginalEvent {
   subType: 'node-double-click'
   node: LGraphNode
 }
diff --git a/src/lib/litegraph/src/types/globalEnums.ts b/src/lib/litegraph/src/types/globalEnums.ts
index 5e2afcadc..c955b8e1e 100644
--- a/src/lib/litegraph/src/types/globalEnums.ts
+++ b/src/lib/litegraph/src/types/globalEnums.ts
@@ -89,9 +89,6 @@ export enum LGraphEventMode {
 }
 
 export enum EaseFunction {
-  LINEAR = 'linear',
-  EASE_IN_QUAD = 'easeInQuad',
-  EASE_OUT_QUAD = 'easeOutQuad',
   EASE_IN_OUT_QUAD = 'easeInOutQuad'
 }
 
diff --git a/src/lib/litegraph/src/types/serialisation.ts b/src/lib/litegraph/src/types/serialisation.ts
index 46b4ad7cc..8ab446594 100644
--- a/src/lib/litegraph/src/types/serialisation.ts
+++ b/src/lib/litegraph/src/types/serialisation.ts
@@ -31,7 +31,7 @@ export interface Serialisable<SerialisableObject> {
   asSerialisable(): SerialisableObject
 }
 
-export interface BaseExportedGraph {
+interface BaseExportedGraph {
   /** Unique graph ID.  Automatically generated if not provided. */
   id: UUID
   /** The revision number of this graph. Not automatically incremented; intended for use by a downstream save function. */
@@ -179,14 +179,6 @@ export interface ISerialisedGroup {
   flags?: IGraphGroupFlags
 }
 
-export type TClipboardLink = [
-  targetRelativeIndex: number,
-  originSlot: number,
-  nodeRelativeIndex: number,
-  targetSlot: number,
-  targetNodeId: NodeId
-]
-
 /** Items copied from the canvas */
 export interface ClipboardItems {
   nodes?: ISerialisedNode[]
@@ -196,12 +188,6 @@ export interface ClipboardItems {
   subgraphs?: ExportedSubgraph[]
 }
 
-/** @deprecated */
-export interface IClipboardContents {
-  nodes?: ISerialisedNode[]
-  links?: TClipboardLink[]
-}
-
 export interface SerialisableReroute {
   id: RerouteId
   parentId?: RerouteId
diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
index e61a8360a..fa47c6a93 100644
--- a/src/lib/litegraph/src/types/widgets.ts
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -30,7 +30,7 @@ export interface IWidgetOptions<TValues = unknown[]> {
   callback?: IWidget['callback']
 }
 
-export interface IWidgetSliderOptions extends IWidgetOptions<number[]> {
+interface IWidgetSliderOptions extends IWidgetOptions<number[]> {
   min: number
   max: number
   step2: number
@@ -38,7 +38,7 @@ export interface IWidgetSliderOptions extends IWidgetOptions<number[]> {
   marker_color?: CanvasColour
 }
 
-export interface IWidgetKnobOptions extends IWidgetOptions<number[]> {
+interface IWidgetKnobOptions extends IWidgetOptions<number[]> {
   min: number
   max: number
   step2: number
@@ -65,6 +65,17 @@ export type IWidget =
   | ISliderWidget
   | IButtonWidget
   | IKnobWidget
+  | IFileUploadWidget
+  | IColorWidget
+  | IMarkdownWidget
+  | IImageWidget
+  | ITreeSelectWidget
+  | IMultiSelectWidget
+  | IChartWidget
+  | IGalleriaWidget
+  | IImageCompareWidget
+  | ISelectButtonWidget
+  | ITextareaWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -133,11 +144,86 @@ export interface IButtonWidget
 }
 
 /** A custom widget - accepts any value and has no built-in special handling */
-export interface ICustomWidget extends IBaseWidget<string | object, 'custom'> {
+interface ICustomWidget extends IBaseWidget<string | object, 'custom'> {
   type: 'custom'
   value: string | object
 }
 
+/** File upload widget for selecting and uploading files */
+export interface IFileUploadWidget extends IBaseWidget<string, 'fileupload'> {
+  type: 'fileupload'
+  value: string
+  label?: string
+}
+
+/** Color picker widget for selecting colors */
+export interface IColorWidget extends IBaseWidget<string, 'color'> {
+  type: 'color'
+  value: string
+}
+
+/** Markdown widget for displaying formatted text */
+export interface IMarkdownWidget extends IBaseWidget<string, 'markdown'> {
+  type: 'markdown'
+  value: string
+}
+
+/** Image display widget */
+interface IImageWidget extends IBaseWidget<string, 'image'> {
+  type: 'image'
+  value: string
+}
+
+/** Tree select widget for hierarchical selection */
+export interface ITreeSelectWidget
+  extends IBaseWidget<string | string[], 'treeselect'> {
+  type: 'treeselect'
+  value: string | string[]
+}
+
+/** Multi-select widget for selecting multiple options */
+export interface IMultiSelectWidget
+  extends IBaseWidget<string[], 'multiselect'> {
+  type: 'multiselect'
+  value: string[]
+}
+
+/** Chart widget for displaying data visualizations */
+export interface IChartWidget extends IBaseWidget<object, 'chart'> {
+  type: 'chart'
+  value: object
+}
+
+/** Gallery widget for displaying multiple images */
+export interface IGalleriaWidget extends IBaseWidget<string[], 'galleria'> {
+  type: 'galleria'
+  value: string[]
+}
+
+/** Image comparison widget for comparing two images side by side */
+export interface IImageCompareWidget
+  extends IBaseWidget<string[], 'imagecompare'> {
+  type: 'imagecompare'
+  value: string[]
+}
+
+/** Select button widget for selecting from a group of buttons */
+export interface ISelectButtonWidget
+  extends IBaseWidget<
+    string,
+    'selectbutton',
+    RequiredProps<IWidgetOptions<string[]>, 'values'>
+  > {
+  type: 'selectbutton'
+  value: string
+}
+
+/** Textarea widget for multi-line text input */
+export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
+  type: 'textarea'
+  value: string
+}
+
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]
diff --git a/src/lib/litegraph/src/utils/collections.ts b/src/lib/litegraph/src/utils/collections.ts
index 85da38382..46eba75e0 100644
--- a/src/lib/litegraph/src/utils/collections.ts
+++ b/src/lib/litegraph/src/utils/collections.ts
@@ -1,8 +1,7 @@
 import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { LinkId } from '@/lib/litegraph/src/LLink'
 import { parseSlotTypes } from '@/lib/litegraph/src/strings'
 
-import type { ConnectingLink, ISlotType, Positionable } from '../interfaces'
+import type { ISlotType, Positionable } from '../interfaces'
 
 /**
  * Creates a flat set of all positionable items by recursively iterating through all child items.
@@ -45,19 +44,6 @@ export function findFirstNode(
   }
 }
 
-/** @returns `true` if the provided link ID is currently being dragged. */
-export function isDraggingLink(
-  linkId: LinkId,
-  connectingLinks: ConnectingLink[] | null | undefined
-): ConnectingLink | undefined {
-  if (connectingLinks == null) return
-
-  for (const connectingLink of connectingLinks) {
-    if (connectingLink.link == null) continue
-    if (linkId === connectingLink.link.id) return connectingLink
-  }
-}
-
 type FreeSlotResult<T extends { type: ISlotType }> =
   | { index: number; slot: T }
   | undefined
diff --git a/src/lib/litegraph/src/widgets/BaseWidget.ts b/src/lib/litegraph/src/widgets/BaseWidget.ts
index 496f22923..c09668d9e 100644
--- a/src/lib/litegraph/src/widgets/BaseWidget.ts
+++ b/src/lib/litegraph/src/widgets/BaseWidget.ts
@@ -18,7 +18,7 @@ export interface DrawWidgetOptions {
   showText?: boolean
 }
 
-export interface DrawTruncatingTextOptions extends DrawWidgetOptions {
+interface DrawTruncatingTextOptions extends DrawWidgetOptions {
   /** The canvas context to draw the text on. */
   ctx: CanvasRenderingContext2D
   /** The amount of padding to add to the left of the text. */
diff --git a/src/lib/litegraph/src/widgets/ChartWidget.ts b/src/lib/litegraph/src/widgets/ChartWidget.ts
new file mode 100644
index 000000000..3dfbb069b
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ChartWidget.ts
@@ -0,0 +1,50 @@
+import type { IChartWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying charts and data visualizations
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ChartWidget
+  extends BaseWidget<IChartWidget>
+  implements IChartWidget
+{
+  override type = 'chart' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Chart: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ColorWidget.ts b/src/lib/litegraph/src/widgets/ColorWidget.ts
new file mode 100644
index 000000000..dfd1e5afb
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ColorWidget.ts
@@ -0,0 +1,50 @@
+import type { IColorWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying a color picker
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ColorWidget
+  extends BaseWidget<IColorWidget>
+  implements IColorWidget
+{
+  override type = 'color' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Color: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/FileUploadWidget.ts b/src/lib/litegraph/src/widgets/FileUploadWidget.ts
new file mode 100644
index 000000000..5025017ed
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/FileUploadWidget.ts
@@ -0,0 +1,50 @@
+import type { IFileUploadWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for handling file uploads
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class FileUploadWidget
+  extends BaseWidget<IFileUploadWidget>
+  implements IFileUploadWidget
+{
+  override type = 'fileupload' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Fileupload: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/GalleriaWidget.ts b/src/lib/litegraph/src/widgets/GalleriaWidget.ts
new file mode 100644
index 000000000..963e517d2
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/GalleriaWidget.ts
@@ -0,0 +1,50 @@
+import type { IGalleriaWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying image galleries
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class GalleriaWidget
+  extends BaseWidget<IGalleriaWidget>
+  implements IGalleriaWidget
+{
+  override type = 'galleria' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Galleria: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ImageCompareWidget.ts b/src/lib/litegraph/src/widgets/ImageCompareWidget.ts
new file mode 100644
index 000000000..d24fc5d85
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/ImageCompareWidget.ts
@@ -0,0 +1,50 @@
+import type { IImageCompareWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for comparing two images side by side
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ImageCompareWidget
+  extends BaseWidget<IImageCompareWidget>
+  implements IImageCompareWidget
+{
+  override type = 'imagecompare' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'ImageCompare: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/MarkdownWidget.ts b/src/lib/litegraph/src/widgets/MarkdownWidget.ts
new file mode 100644
index 000000000..aac8f2cc1
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/MarkdownWidget.ts
@@ -0,0 +1,50 @@
+import type { IMarkdownWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying markdown formatted text
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class MarkdownWidget
+  extends BaseWidget<IMarkdownWidget>
+  implements IMarkdownWidget
+{
+  override type = 'markdown' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Markdown: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/MultiSelectWidget.ts b/src/lib/litegraph/src/widgets/MultiSelectWidget.ts
new file mode 100644
index 000000000..8201bd77d
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/MultiSelectWidget.ts
@@ -0,0 +1,50 @@
+import type { IMultiSelectWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for selecting multiple options
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class MultiSelectWidget
+  extends BaseWidget<IMultiSelectWidget>
+  implements IMultiSelectWidget
+{
+  override type = 'multiselect' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'MultiSelect: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/SelectButtonWidget.ts b/src/lib/litegraph/src/widgets/SelectButtonWidget.ts
new file mode 100644
index 000000000..65218e12e
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/SelectButtonWidget.ts
@@ -0,0 +1,50 @@
+import type { ISelectButtonWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for selecting from a group of buttons
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class SelectButtonWidget
+  extends BaseWidget<ISelectButtonWidget>
+  implements ISelectButtonWidget
+{
+  override type = 'selectbutton' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'SelectButton: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/TextareaWidget.ts b/src/lib/litegraph/src/widgets/TextareaWidget.ts
new file mode 100644
index 000000000..efd14dfe8
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/TextareaWidget.ts
@@ -0,0 +1,50 @@
+import type { ITextareaWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for multi-line text input
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class TextareaWidget
+  extends BaseWidget<ITextareaWidget>
+  implements ITextareaWidget
+{
+  override type = 'textarea' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Textarea: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/TreeSelectWidget.ts b/src/lib/litegraph/src/widgets/TreeSelectWidget.ts
new file mode 100644
index 000000000..afe3dfee7
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/TreeSelectWidget.ts
@@ -0,0 +1,50 @@
+import type { ITreeSelectWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for hierarchical tree selection
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class TreeSelectWidget
+  extends BaseWidget<ITreeSelectWidget>
+  implements ITreeSelectWidget
+{
+  override type = 'treeselect' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'TreeSelect: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts
index ffbb7ae69..42a8f5663 100644
--- a/src/lib/litegraph/src/widgets/widgetMap.ts
+++ b/src/lib/litegraph/src/widgets/widgetMap.ts
@@ -1,14 +1,7 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type {
   IBaseWidget,
-  IBooleanWidget,
-  IButtonWidget,
   IComboWidget,
-  ICustomWidget,
-  IKnobWidget,
-  INumericWidget,
-  ISliderWidget,
-  IStringWidget,
   IWidget,
   TWidgetType
 } from '@/lib/litegraph/src/types/widgets'
@@ -17,12 +10,22 @@ import { toClass } from '@/lib/litegraph/src/utils/type'
 import { BaseWidget } from './BaseWidget'
 import { BooleanWidget } from './BooleanWidget'
 import { ButtonWidget } from './ButtonWidget'
+import { ChartWidget } from './ChartWidget'
+import { ColorWidget } from './ColorWidget'
 import { ComboWidget } from './ComboWidget'
+import { FileUploadWidget } from './FileUploadWidget'
+import { GalleriaWidget } from './GalleriaWidget'
+import { ImageCompareWidget } from './ImageCompareWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
+import { MarkdownWidget } from './MarkdownWidget'
+import { MultiSelectWidget } from './MultiSelectWidget'
 import { NumberWidget } from './NumberWidget'
+import { SelectButtonWidget } from './SelectButtonWidget'
 import { SliderWidget } from './SliderWidget'
 import { TextWidget } from './TextWidget'
+import { TextareaWidget } from './TextareaWidget'
+import { TreeSelectWidget } from './TreeSelectWidget'
 
 export type WidgetTypeMap = {
   button: ButtonWidget
@@ -34,6 +37,16 @@ export type WidgetTypeMap = {
   string: TextWidget
   text: TextWidget
   custom: LegacyWidget
+  fileupload: FileUploadWidget
+  color: ColorWidget
+  markdown: MarkdownWidget
+  treeselect: TreeSelectWidget
+  multiselect: MultiSelectWidget
+  chart: ChartWidget
+  galleria: GalleriaWidget
+  imagecompare: ImageCompareWidget
+  selectbutton: SelectButtonWidget
+  textarea: TextareaWidget
   [key: string]: BaseWidget
 }
 
@@ -82,6 +95,26 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(TextWidget, narrowedWidget, node)
     case 'text':
       return toClass(TextWidget, narrowedWidget, node)
+    case 'fileupload':
+      return toClass(FileUploadWidget, narrowedWidget, node)
+    case 'color':
+      return toClass(ColorWidget, narrowedWidget, node)
+    case 'markdown':
+      return toClass(MarkdownWidget, narrowedWidget, node)
+    case 'treeselect':
+      return toClass(TreeSelectWidget, narrowedWidget, node)
+    case 'multiselect':
+      return toClass(MultiSelectWidget, narrowedWidget, node)
+    case 'chart':
+      return toClass(ChartWidget, narrowedWidget, node)
+    case 'galleria':
+      return toClass(GalleriaWidget, narrowedWidget, node)
+    case 'imagecompare':
+      return toClass(ImageCompareWidget, narrowedWidget, node)
+    case 'selectbutton':
+      return toClass(SelectButtonWidget, narrowedWidget, node)
+    case 'textarea':
+      return toClass(TextareaWidget, narrowedWidget, node)
     default: {
       if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
     }
@@ -90,49 +123,9 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
 
 // #region Type Guards
 
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IButtonWidget}. */
-export function isButtonWidget(widget: IBaseWidget): widget is IButtonWidget {
-  return widget.type === 'button'
-}
-
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IBooleanWidget}. */
-export function isBooleanWidget(widget: IBaseWidget): widget is IBooleanWidget {
-  return widget.type === 'toggle'
-}
-
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ISliderWidget}. */
-export function isSliderWidget(widget: IBaseWidget): widget is ISliderWidget {
-  return widget.type === 'slider'
-}
-
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IKnobWidget}. */
-export function isKnobWidget(widget: IBaseWidget): widget is IKnobWidget {
-  return widget.type === 'knob'
-}
-
 /** Type guard: Narrow **from {@link IBaseWidget}** to {@link IComboWidget}. */
 export function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
   return widget.type === 'combo'
 }
 
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link INumericWidget}. */
-export function isNumberWidget(widget: IBaseWidget): widget is INumericWidget {
-  return widget.type === 'number'
-}
-
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IStringWidget}. */
-export function isStringWidget(widget: IBaseWidget): widget is IStringWidget {
-  return widget.type === 'string'
-}
-
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITextWidget}. */
-export function isTextWidget(widget: IBaseWidget): widget is IStringWidget {
-  return widget.type === 'text'
-}
-
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ICustomWidget}. */
-export function isCustomWidget(widget: IBaseWidget): widget is ICustomWidget {
-  return widget.type === 'custom'
-}
-
 // #endregion Type Guards
diff --git a/src/lib/litegraph/test/LGraphNodeProperties.test.ts b/src/lib/litegraph/test/LGraphNodeProperties.test.ts
new file mode 100644
index 000000000..512b43158
--- /dev/null
+++ b/src/lib/litegraph/test/LGraphNodeProperties.test.ts
@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphNodeProperties } from '../src/LGraphNodeProperties'
+
+describe('LGraphNodeProperties', () => {
+  let mockNode: any
+  let mockGraph: any
+
+  beforeEach(() => {
+    mockGraph = {
+      trigger: vi.fn()
+    }
+
+    mockNode = {
+      id: 123,
+      title: 'Test Node',
+      flags: {},
+      graph: mockGraph
+    }
+  })
+
+  describe('constructor', () => {
+    it('should initialize with default tracked properties', () => {
+      const propManager = new LGraphNodeProperties(mockNode)
+      const tracked = propManager.getTrackedProperties()
+
+      expect(tracked).toHaveLength(2)
+      expect(tracked).toContain('title')
+      expect(tracked).toContain('flags.collapsed')
+    })
+  })
+
+  describe('property tracking', () => {
+    it('should track changes to existing properties', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.title = 'New Title'
+
+      expect(mockGraph.trigger).toHaveBeenCalledWith('node:property:changed', {
+        nodeId: mockNode.id,
+        property: 'title',
+        oldValue: 'Test Node',
+        newValue: 'New Title'
+      })
+    })
+
+    it('should track changes to nested properties', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+
+      expect(mockGraph.trigger).toHaveBeenCalledWith('node:property:changed', {
+        nodeId: mockNode.id,
+        property: 'flags.collapsed',
+        oldValue: undefined,
+        newValue: true
+      })
+    })
+
+    it("should not emit events when value doesn't change", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.title = 'Test Node' // Same value as original
+
+      expect(mockGraph.trigger).toHaveBeenCalledTimes(0)
+    })
+
+    it('should not emit events when node has no graph', () => {
+      mockNode.graph = null
+      new LGraphNodeProperties(mockNode)
+
+      // Should not throw
+      expect(() => {
+        mockNode.title = 'New Title'
+      }).not.toThrow()
+    })
+  })
+
+  describe('isTracked', () => {
+    it('should correctly identify tracked properties', () => {
+      const propManager = new LGraphNodeProperties(mockNode)
+
+      expect(propManager.isTracked('title')).toBe(true)
+      expect(propManager.isTracked('flags.collapsed')).toBe(true)
+      expect(propManager.isTracked('untracked')).toBe(false)
+    })
+  })
+
+  describe('serialization behavior', () => {
+    it('should not make non-existent properties enumerable', () => {
+      new LGraphNodeProperties(mockNode)
+
+      // flags.collapsed doesn't exist initially
+      const descriptor = Object.getOwnPropertyDescriptor(
+        mockNode.flags,
+        'collapsed'
+      )
+      expect(descriptor?.enumerable).toBe(false)
+    })
+
+    it('should make properties enumerable when set to non-default values', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+
+      const descriptor = Object.getOwnPropertyDescriptor(
+        mockNode.flags,
+        'collapsed'
+      )
+      expect(descriptor?.enumerable).toBe(true)
+    })
+
+    it('should make properties non-enumerable when set back to undefined', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+      mockNode.flags.collapsed = undefined
+
+      const descriptor = Object.getOwnPropertyDescriptor(
+        mockNode.flags,
+        'collapsed'
+      )
+      expect(descriptor?.enumerable).toBe(false)
+    })
+
+    it('should keep existing properties enumerable', () => {
+      // title exists initially
+      const initialDescriptor = Object.getOwnPropertyDescriptor(
+        mockNode,
+        'title'
+      )
+      expect(initialDescriptor?.enumerable).toBe(true)
+
+      new LGraphNodeProperties(mockNode)
+
+      const afterDescriptor = Object.getOwnPropertyDescriptor(mockNode, 'title')
+      expect(afterDescriptor?.enumerable).toBe(true)
+    })
+
+    it('should only include non-undefined values in JSON.stringify', () => {
+      new LGraphNodeProperties(mockNode)
+
+      // Initially, flags.collapsed shouldn't appear
+      let json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBeUndefined()
+
+      // After setting to true, it should appear
+      mockNode.flags.collapsed = true
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBe(true)
+
+      // After setting to false, it should still appear (false is not undefined)
+      mockNode.flags.collapsed = false
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBe(false)
+
+      // After setting back to undefined, it should disappear
+      mockNode.flags.collapsed = undefined
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBeUndefined()
+    })
+  })
+})
diff --git a/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
index e5adac480..80e344d5b 100644
--- a/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
+++ b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
@@ -326,3 +326,331 @@ LGraph {
   "version": 1,
 }
 `;
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredBasicGraph 1`] = `
+LGraph {
+  "_groups": [
+    LGraphGroup {
+      "_bounding": Float32Array [
+        20,
+        20,
+        1,
+        3,
+      ],
+      "_children": Set {},
+      "_nodes": [],
+      "_pos": Float32Array [
+        20,
+        20,
+      ],
+      "_size": Float32Array [
+        1,
+        3,
+      ],
+      "color": "#6029aa",
+      "flags": {},
+      "font": undefined,
+      "font_size": 14,
+      "graph": [Circular],
+      "id": 123,
+      "isPointInside": [Function],
+      "selected": undefined,
+      "setDirtyCanvas": [Function],
+      "title": "A group to test with",
+    },
+  ],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_nodes_by_id": {
+    "1": LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  },
+  "_nodes_executable": [],
+  "_nodes_in_order": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_subgraphs": Map {},
+  "_version": 3,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "ca9da7d8-fddd-4707-ad32-67be9be13140",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 123,
+    "lastLinkId": 0,
+    "lastNodeId": 1,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
+
+exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredMinGraph 1`] = `
+LGraph {
+  "_groups": [],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [],
+  "_nodes_by_id": {},
+  "_nodes_executable": [],
+  "_nodes_in_order": [],
+  "_subgraphs": Map {},
+  "_version": 0,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "d175890f-716a-4ece-ba33-1d17a513b7be",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 0,
+    "lastLinkId": 0,
+    "lastNodeId": 0,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
diff --git a/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap
index 17253de25..628c8e3a4 100644
--- a/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap
+++ b/src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap
@@ -62,6 +62,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -133,6 +134,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -205,6 +207,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
diff --git a/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap b/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap
index 92afb55e0..106f0d221 100644
--- a/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap
+++ b/src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap
@@ -62,6 +62,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -131,6 +132,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -201,6 +203,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
diff --git a/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
index dcd6624a4..a83ef5e5f 100644
--- a/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
+++ b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
@@ -16,7 +16,7 @@ import {
   createTestSubgraphNode
 } from './subgraphHelpers'
 
-export interface SubgraphFixtures {
+interface SubgraphFixtures {
   /** A minimal subgraph with no inputs, outputs, or nodes */
   emptySubgraph: Subgraph
 
@@ -169,140 +169,3 @@ export const subgraphTest = test.extend<SubgraphFixtures>({
     capture.cleanup()
   }
 })
-
-/**
- * Fixtures that test edge cases and error conditions.
- * These may leave the system in an invalid state and should be used carefully.
- */
-export interface EdgeCaseFixtures {
-  /** Subgraph with circular references (for testing recursion detection) */
-  circularSubgraph: {
-    rootGraph: LGraph
-    subgraphA: Subgraph
-    subgraphB: Subgraph
-    nodeA: SubgraphNode
-    nodeB: SubgraphNode
-  }
-
-  /** Deeply nested subgraphs approaching the theoretical limit */
-  deeplyNestedSubgraph: ReturnType<typeof createNestedSubgraphs>
-
-  /** Subgraph with maximum inputs and outputs */
-  maxIOSubgraph: Subgraph
-}
-
-/**
- * Test with edge case fixtures. Use sparingly and with caution.
- * These tests may intentionally create invalid states.
- */
-export const edgeCaseTest = subgraphTest.extend<EdgeCaseFixtures>({
-  // @ts-expect-error TODO: Fix after merge - fixture use parameter type
-  // eslint-disable-next-line no-empty-pattern
-  circularSubgraph: async ({}, use: (value: unknown) => Promise<void>) => {
-    const rootGraph = new LGraph()
-
-    // Create two subgraphs that will reference each other
-    const subgraphA = createTestSubgraph({
-      name: 'Subgraph A',
-      inputs: [{ name: 'input', type: '*' }],
-      outputs: [{ name: 'output', type: '*' }]
-    })
-
-    const subgraphB = createTestSubgraph({
-      name: 'Subgraph B',
-      inputs: [{ name: 'input', type: '*' }],
-      outputs: [{ name: 'output', type: '*' }]
-    })
-
-    // Create instances (this doesn't create circular refs by itself)
-    const nodeA = createTestSubgraphNode(subgraphA, { pos: [100, 100] })
-    const nodeB = createTestSubgraphNode(subgraphB, { pos: [300, 100] })
-
-    // Add nodes to root graph
-    rootGraph.add(nodeA)
-    rootGraph.add(nodeB)
-
-    await use({
-      rootGraph,
-      subgraphA,
-      subgraphB,
-      nodeA,
-      nodeB
-    })
-  },
-
-  // @ts-expect-error TODO: Fix after merge - fixture use parameter type
-  // eslint-disable-next-line no-empty-pattern
-  deeplyNestedSubgraph: async ({}, use: (value: unknown) => Promise<void>) => {
-    // Create a very deep nesting structure (but not exceeding MAX_NESTED_SUBGRAPHS)
-    const nested = createNestedSubgraphs({
-      depth: 50, // Deep but reasonable
-      nodesPerLevel: 1,
-      inputsPerSubgraph: 1,
-      outputsPerSubgraph: 1
-    })
-
-    await use(nested)
-  },
-
-  // @ts-expect-error TODO: Fix after merge - fixture use parameter type
-  // eslint-disable-next-line no-empty-pattern
-  maxIOSubgraph: async ({}, use: (value: unknown) => Promise<void>) => {
-    // Create a subgraph with many inputs and outputs
-    const inputs = Array.from({ length: 20 }, (_, i) => ({
-      name: `input_${i}`,
-      type: i % 2 === 0 ? 'number' : ('string' as const)
-    }))
-
-    const outputs = Array.from({ length: 20 }, (_, i) => ({
-      name: `output_${i}`,
-      type: i % 2 === 0 ? 'number' : ('string' as const)
-    }))
-
-    const subgraph = createTestSubgraph({
-      name: 'Max IO Subgraph',
-      inputs,
-      outputs,
-      nodeCount: 10
-    })
-
-    await use(subgraph)
-  }
-})
-
-/**
- * Helper to verify fixture integrity.
- * Use this in tests to ensure fixtures are properly set up.
- */
-export function verifyFixtureIntegrity<T extends Record<string, unknown>>(
-  fixture: T,
-  expectedProperties: (keyof T)[]
-): void {
-  for (const prop of expectedProperties) {
-    if (!(prop in fixture)) {
-      throw new Error(`Fixture missing required property: ${String(prop)}`)
-    }
-    if (fixture[prop] === undefined || fixture[prop] === null) {
-      throw new Error(`Fixture property ${String(prop)} is null or undefined`)
-    }
-  }
-}
-
-/**
- * Creates a snapshot-friendly representation of a subgraph for testing.
- * Useful for serialization tests and regression detection.
- */
-export function createSubgraphSnapshot(subgraph: Subgraph) {
-  return {
-    id: subgraph.id,
-    name: subgraph.name,
-    inputCount: subgraph.inputs.length,
-    outputCount: subgraph.outputs.length,
-    nodeCount: subgraph.nodes.length,
-    linkCount: subgraph.links.size,
-    inputs: subgraph.inputs.map((i) => ({ name: i.name, type: i.type })),
-    outputs: subgraph.outputs.map((o) => ({ name: o.name, type: o.type })),
-    hasInputNode: !!subgraph.inputNode,
-    hasOutputNode: !!subgraph.outputNode
-  }
-}
diff --git a/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts
index fcf25ce7c..736f979d3 100644
--- a/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts
+++ b/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts
@@ -17,7 +17,7 @@ import type {
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4 } from '@/lib/litegraph/src/utils/uuid'
 
-export interface TestSubgraphOptions {
+interface TestSubgraphOptions {
   id?: UUID
   name?: string
   nodeCount?: number
@@ -27,20 +27,20 @@ export interface TestSubgraphOptions {
   outputs?: Array<{ name: string; type: ISlotType }>
 }
 
-export interface TestSubgraphNodeOptions {
+interface TestSubgraphNodeOptions {
   id?: NodeId
   pos?: [number, number]
   size?: [number, number]
 }
 
-export interface NestedSubgraphOptions {
+interface NestedSubgraphOptions {
   depth?: number
   nodesPerLevel?: number
   inputsPerSubgraph?: number
   outputsPerSubgraph?: number
 }
 
-export interface SubgraphStructureExpectation {
+interface SubgraphStructureExpectation {
   inputCount?: number
   outputCount?: number
   nodeCount?: number
@@ -49,7 +49,7 @@ export interface SubgraphStructureExpectation {
   hasOutputNode?: boolean
 }
 
-export interface CapturedEvent<T = unknown> {
+interface CapturedEvent<T = unknown> {
   type: string
   detail: T
   timestamp: number
@@ -382,76 +382,6 @@ export function createTestSubgraphData(
   }
 }
 
-/**
- * Creates a complex subgraph with multiple nodes and connections.
- * Useful for testing realistic scenarios.
- * @param nodeCount Number of internal nodes to create
- * @returns Complex subgraph data structure
- */
-export function createComplexSubgraphData(
-  nodeCount: number = 5
-): ExportedSubgraph {
-  const nodes = []
-  const links: Record<
-    string,
-    {
-      id: number
-      origin_id: number
-      origin_slot: number
-      target_id: number
-      target_slot: number
-      type: string
-    }
-  > = {}
-
-  // Create internal nodes
-  for (let i = 0; i < nodeCount; i++) {
-    nodes.push({
-      id: i + 1, // Start from 1 to avoid conflicts with IO nodes
-      type: 'basic/test',
-      pos: [100 + i * 150, 200],
-      size: [120, 60],
-      inputs: [{ name: 'in', type: '*', link: null }],
-      outputs: [{ name: 'out', type: '*', links: [] }],
-      properties: { value: i },
-      flags: {},
-      mode: 0
-    })
-  }
-
-  // Create some internal links
-  for (let i = 0; i < nodeCount - 1; i++) {
-    const linkId = i + 1
-    links[linkId] = {
-      id: linkId,
-      origin_id: i + 1,
-      origin_slot: 0,
-      target_id: i + 2,
-      target_slot: 0,
-      type: '*'
-    }
-  }
-
-  return createTestSubgraphData({
-    // @ts-expect-error TODO: Fix after merge - nodes parameter type
-    nodes,
-    // @ts-expect-error TODO: Fix after merge - links parameter type
-    links,
-    inputs: [
-      // @ts-expect-error TODO: Fix after merge - input object type
-      { name: 'input1', type: 'number', pos: [0, 0] },
-      // @ts-expect-error TODO: Fix after merge - input object type
-      { name: 'input2', type: 'string', pos: [0, 1] }
-    ],
-    outputs: [
-      // @ts-expect-error TODO: Fix after merge - output object type
-      { name: 'output1', type: 'number', pos: [0, 0] },
-      // @ts-expect-error TODO: Fix after merge - output object type
-      { name: 'output2', type: 'string', pos: [0, 1] }
-    ]
-  })
-}
-
 /**
  * Creates an event capture system for testing event sequences.
  * @param eventTarget The event target to monitor
@@ -492,40 +422,3 @@ export function createEventCapture<T = unknown>(
       capturedEvents.filter((e) => e.type === type)
   }
 }
-
-/**
- * Utility to log subgraph structure for debugging tests.
- * @param subgraph The subgraph to inspect
- * @param label Optional label for the log output
- */
-export function logSubgraphStructure(
-  subgraph: Subgraph,
-  label: string = 'Subgraph'
-): void {
-  console.log(`\n=== ${label} Structure ===`)
-  console.log(`Name: ${subgraph.name}`)
-  console.log(`ID: ${subgraph.id}`)
-  console.log(`Inputs: ${subgraph.inputs.length}`)
-  console.log(`Outputs: ${subgraph.outputs.length}`)
-  console.log(`Nodes: ${subgraph.nodes.length}`)
-  console.log(`Links: ${subgraph.links.size}`)
-
-  if (subgraph.inputs.length > 0) {
-    console.log(
-      'Input details:',
-      subgraph.inputs.map((i) => ({ name: i.name, type: i.type }))
-    )
-  }
-
-  if (subgraph.outputs.length > 0) {
-    console.log(
-      'Output details:',
-      subgraph.outputs.map((o) => ({ name: o.name, type: o.type }))
-    )
-  }
-
-  console.log('========================\n')
-}
-
-// Re-export expect from vitest for convenience
-export { expect } from 'vitest'
diff --git a/src/locales/ar/commands.json b/src/locales/ar/commands.json
index c184fe7c0..fb6650d99 100644
--- a/src/locales/ar/commands.json
+++ b/src/locales/ar/commands.json
@@ -197,6 +197,9 @@
   "Comfy_OpenWorkflow": {
     "label": "فتح سير عمل"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "نشر الرسم البياني الفرعي"
+  },
   "Comfy_QueuePrompt": {
     "label": "إضافة الأمر إلى قائمة الانتظار"
   },
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 132f0c1ca..ea35b50f9 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -813,6 +813,7 @@
     "Pin/Unpin Selected Items": "تثبيت/إلغاء تثبيت العناصر المحددة",
     "Pin/Unpin Selected Nodes": "تثبيت/إلغاء تثبيت العقد المحددة",
     "Previous Opened Workflow": "سير العمل السابق المفتوح",
+    "Publish": "نشر",
     "Queue Panel": "لوحة الانتظار",
     "Queue Prompt": "قائمة انتظار التعليمات",
     "Queue Prompt (Front)": "قائمة انتظار التعليمات (أمامي)",
@@ -842,6 +843,7 @@
     "Ungroup selected group nodes": "فك تجميع عقد المجموعة المحددة",
     "Unlock Canvas": "فتح قفل اللوحة",
     "Unpack the selected Subgraph": "فك تجميع الرسم البياني الفرعي المحدد",
+    "View": "عرض",
     "Workflows": "سير العمل",
     "Zoom In": "تكبير",
     "Zoom Out": "تصغير",
@@ -1254,6 +1256,10 @@
     },
     "workflows": "سير العمل"
   },
+  "subgraphStore": {
+    "blueprintName": "اسم المخطط الفرعي",
+    "saveBlueprint": "احفظ المخطط الفرعي في المكتبة"
+  },
   "tabMenu": {
     "addToBookmarks": "إضافة إلى العلامات",
     "closeOtherTabs": "إغلاق التبويبات الأخرى",
diff --git a/src/locales/en/commands.json b/src/locales/en/commands.json
index 860b58000..ee1455042 100644
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "Open Workflow"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "Publish Subgraph"
+  },
   "Comfy_QueuePrompt": {
     "label": "Queue Prompt"
   },
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 8000d087c..46b689458 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -56,6 +56,7 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
+    "dropYourFileOr": "Drop your file or",
     "back": "Back",
     "next": "Next",
     "install": "Install",
@@ -151,7 +152,12 @@
     "noAudioRecorded": "No audio recorded",
     "nodesRunning": "nodes running",
     "duplicate": "Duplicate",
-    "moreWorkflows": "More workflows"
+    "moreWorkflows": "More workflows",
+    "nodeRenderError": "Node Render Error",
+    "nodeContentError": "Node Content Error",
+    "nodeHeaderError": "Node Header Error",
+    "nodeSlotsError": "Node Slots Error",
+    "nodeWidgetsError": "Node Widgets Error"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -187,6 +193,8 @@
     "updateSelected": "Update Selected",
     "updateAll": "Update All",
     "updatingAllPacks": "Updating all packages",
+    "disabledNodesWontUpdate": "Disabled nodes will not be updated",
+    "enablePackToChangeVersion": "Enable this pack to change versions",
     "license": "License",
     "nightlyVersion": "Nightly",
     "latestVersion": "Latest",
@@ -943,6 +951,18 @@
     "enterFilename": "Enter the filename",
     "saveWorkflow": "Save workflow"
   },
+  "subgraphStore": {
+    "confirmDeleteTitle": "Delete blueprint?",
+    "confirmDelete": "This action will permanently remove the blueprint from your library",
+    "saveBlueprint": "Save Subgraph to Library",
+    "overwriteBlueprintTitle": "Overwrite existing blueprint?",
+    "overwriteBlueprint": "Saving will overwrite the current blueprint with your changes",
+    "blueprintName": "Subgraph name",
+    "publish": "Publish Subgraph",
+    "publishSuccess": "Saved to Nodes Library",
+    "publishSuccessMessage": "You can find your subgraph blueprint in the nodes library under \"Subgraph Blueprints\"",
+    "loadFailure": "Failed to load subgraph blueprints"
+  },
   "electronFileDownload": {
     "inProgress": "In Progress",
     "pause": "Pause Download",
@@ -998,6 +1018,7 @@
   "menuLabels": {
     "Workflow": "Workflow",
     "Edit": "Edit",
+    "View": "View",
     "Manager": "Manager",
     "Help": "Help",
     "Check for Updates": "Check for Updates",
@@ -1071,6 +1092,7 @@
     "Clipspace": "Clipspace",
     "Manager": "Manager",
     "Open": "Open",
+    "Publish": "Publish",
     "Queue Prompt": "Queue Prompt",
     "Queue Prompt (Front)": "Queue Prompt (Front)",
     "Queue Selected Output Nodes": "Queue Selected Output Nodes",
@@ -1089,14 +1111,27 @@
     "Next Opened Workflow": "Next Opened Workflow",
     "Previous Opened Workflow": "Previous Opened Workflow",
     "Toggle Search Box": "Toggle Search Box",
+    "Bottom Panel": "Bottom Panel",
     "Toggle Bottom Panel": "Toggle Bottom Panel",
+    "Show Keybindings Dialog": "Show Keybindings Dialog",
     "Toggle Terminal Bottom Panel": "Toggle Terminal Bottom Panel",
     "Toggle Logs Bottom Panel": "Toggle Logs Bottom Panel",
+    "Toggle Essential Bottom Panel": "Toggle Essential Bottom Panel",
+    "Toggle View Controls Bottom Panel": "Toggle View Controls Bottom Panel",
     "Toggle Focus Mode": "Toggle Focus Mode",
+    "Focus Mode": "Focus Mode",
+    "Model Library": "Model Library",
+    "Node Library": "Node Library",
+    "Queue Panel": "Queue Panel",
+    "Workflows": "Workflows",
     "Toggle Model Library Sidebar": "Toggle Model Library Sidebar",
     "Toggle Node Library Sidebar": "Toggle Node Library Sidebar",
     "Toggle Queue Sidebar": "Toggle Queue Sidebar",
-    "Toggle Workflows Sidebar": "Toggle Workflows Sidebar"
+    "Toggle Workflows Sidebar": "Toggle Workflows Sidebar",
+    "sideToolbar_modelLibrary": "sideToolbar.modelLibrary",
+    "sideToolbar_nodeLibrary": "sideToolbar.nodeLibrary",
+    "sideToolbar_queue": "sideToolbar.queue",
+    "sideToolbar_workflows": "sideToolbar.workflows"
   },
   "desktopMenu": {
     "reinstall": "Reinstall",
@@ -1156,7 +1191,8 @@
     "Credits": "Credits",
     "API Nodes": "API Nodes",
     "Notification Preferences": "Notification Preferences",
-    "3DViewer": "3DViewer"
+    "3DViewer": "3DViewer",
+    "Vue Nodes": "Vue Nodes"
   },
   "serverConfigItems": {
     "listen": {
@@ -1436,6 +1472,8 @@
     "missingModelsMessage": "When loading the graph, the following models were not found"
   },
   "loadWorkflowWarning": {
+    "missingNodesTitle": "Some Nodes Are Missing",
+    "missingNodesDescription": "When loading the graph, the following node types were not found.\nThis may also happen if your installed version is lower and that node type can’t be found.",
     "outdatedVersion": "Some nodes require a newer version of ComfyUI (current: {version}). Please update to use all nodes.",
     "outdatedVersionGeneric": "Some nodes require a newer version of ComfyUI. Please update to use all nodes.",
     "coreNodesFromVersion": "Requires ComfyUI {version}:"
@@ -1723,6 +1761,9 @@
     "copiedTooltip": "Copied",
     "copyTooltip": "Copy message to clipboard"
   },
+  "widgets": {
+    "selectModel": "Select model"
+  },
   "nodeHelpPage": {
     "inputs": "Inputs",
     "outputs": "Outputs",
@@ -1739,6 +1780,7 @@
     "duplicate": "Duplicate",
     "clearWorkflow": "Clear Workflow",
     "deleteWorkflow": "Delete Workflow",
+    "deleteBlueprint": "Delete Blueprint",
     "enterNewName": "Enter new name"
   },
   "shortcuts": {
@@ -1762,4 +1804,4 @@
     "renderBypassState": "Render Bypass State",
     "renderErrorState": "Render Error State"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 3f8d206db..7c7cec305 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validate workflows"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Enable Vue node rendering",
+    "tooltip": "Render nodes as Vue components instead of canvas elements. Experimental feature."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Enable Vue widgets",
+    "tooltip": "Render widgets as Vue components within Vue nodes."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Widget control mode",
     "tooltip": "Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.",
diff --git a/src/locales/es/commands.json b/src/locales/es/commands.json
index 9f2ff9e05..1ede884d5 100644
--- a/src/locales/es/commands.json
+++ b/src/locales/es/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "Abrir Flujo de Trabajo"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "Publicar subgrafo"
+  },
   "Comfy_QueuePrompt": {
     "label": "Prompt de Cola"
   },
@@ -285,7 +288,7 @@
     "label": "Alternar panel inferior de controles de vista"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
-    "label": "Mostrar diálogo de atajos de teclado"
+    "label": "Mostrar diálogo de combinaciones de teclas"
   },
   "Workspace_ToggleFocusMode": {
     "label": "Alternar Modo de Enfoque"
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 773cf5bca..0e7bf34ad 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -310,6 +310,8 @@
     "disabling": "Deshabilitando",
     "dismiss": "Descartar",
     "download": "Descargar",
+    "dropYourFileOr": "Suelta tu archivo o",
+    "duplicate": "Duplicar",
     "edit": "Editar",
     "empty": "Vacío",
     "enableAll": "Habilitar todo",
@@ -805,6 +807,7 @@
     "Show Model Selector (Dev)": "Mostrar selector de modelo (Desarrollo)",
     "Show Settings Dialog": "Mostrar diálogo de configuración",
     "Sign Out": "Cerrar sesión",
+    "Toggle Essential Bottom Panel": "Alternar panel inferior esencial",
     "Toggle Bottom Panel": "Alternar panel inferior",
     "Toggle Focus Mode": "Alternar modo de enfoque",
     "Toggle Logs Bottom Panel": "Alternar panel inferior de registros",
@@ -814,15 +817,33 @@
     "Toggle Search Box": "Alternar caja de búsqueda",
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
+    "Toggle View Controls Bottom Panel": "Alternar panel inferior de controles de vista",
     "Toggle Workflows Sidebar": "Alternar barra lateral de los flujos de trabajo",
+    "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
     "Unload Models": "Descargar modelos",
     "Unload Models and Execution Cache": "Descargar modelos y caché de ejecución",
+    "Unlock Canvas": "Desbloquear lienzo",
+    "Unpack the selected Subgraph": "Desempaquetar el Subgrafo seleccionado",
+    "View": "Ver",
     "Workflow": "Flujo de trabajo",
+    "Workflows": "Flujos de trabajo",
     "Zoom In": "Acercar",
-    "Zoom Out": "Alejar"
+    "Zoom Out": "Alejar",
+    "Zoom to fit": "Ajustar al tamaño"
+  },
+  "minimap": {
+    "nodeColors": "Colores de nodos",
+    "renderBypassState": "Mostrar estado de omisión",
+    "renderErrorState": "Mostrar estado de error",
+    "showGroups": "Mostrar marcos/grupos",
+    "showLinks": "Mostrar enlaces",
+    "sideToolbar_modelLibrary": "sideToolbar.bibliotecaDeModelos",
+    "sideToolbar_nodeLibrary": "sideToolbar.bibliotecaDeNodos",
+    "sideToolbar_queue": "sideToolbar.cola",
+    "sideToolbar_workflows": "sideToolbar.flujosDeTrabajo"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "No mostrar esto de nuevo",
@@ -1138,6 +1159,7 @@
     "UV": "UV",
     "User": "Usuario",
     "Validation": "Validación",
+    "Vue Nodes": "Nodos Vue",
     "Window": "Ventana",
     "Workflow": "Flujo de Trabajo"
   },
@@ -1201,6 +1223,10 @@
     },
     "workflows": "Flujos de trabajo"
   },
+  "subgraphStore": {
+    "blueprintName": "Nombre del subgrafo",
+    "saveBlueprint": "Guardar subgrafo en la biblioteca"
+  },
   "tabMenu": {
     "addToBookmarks": "Agregar a marcadores",
     "closeOtherTabs": "Cerrar otras pestañas",
@@ -1625,4 +1651,4 @@
     "exportWorkflow": "Exportar flujo de trabajo",
     "saveWorkflow": "Guardar flujo de trabajo"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 3444877ed..b70416af7 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validar flujos de trabajo"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Habilitar renderizado de nodos Vue",
+    "tooltip": "Renderiza los nodos como componentes Vue en lugar de elementos canvas. Función experimental."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Habilitar widgets de Vue",
+    "tooltip": "Renderiza los widgets como componentes de Vue dentro de los nodos de Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Modo de control del widget",
     "options": {
diff --git a/src/locales/fr/commands.json b/src/locales/fr/commands.json
index 49c678d38..4123fa63b 100644
--- a/src/locales/fr/commands.json
+++ b/src/locales/fr/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "Ouvrir le flux de travail"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "Publier le sous-graphe"
+  },
   "Comfy_QueuePrompt": {
     "label": "Invite de file d'attente"
   },
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 3e45f7e0f..8c65c07ae 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -310,6 +310,8 @@
     "disabling": "Désactivation",
     "dismiss": "Fermer",
     "download": "Télécharger",
+    "dropYourFileOr": "Déposez votre fichier ou",
+    "duplicate": "Dupliquer",
     "edit": "Modifier",
     "empty": "Vide",
     "enableAll": "Activer tout",
@@ -806,6 +808,8 @@
     "Show Settings Dialog": "Afficher la boîte de dialogue des paramètres",
     "Sign Out": "Se déconnecter",
     "Toggle Essential Bottom Panel": "Basculer le panneau inférieur essentiel",
+    "Toggle Bottom Panel": "Basculer le panneau inférieur",
+    "Toggle Focus Mode": "Basculer le mode focus",
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
     "Toggle Model Library Sidebar": "Afficher/Masquer la barre latérale de la bibliothèque de modèles",
     "Toggle Node Library Sidebar": "Afficher/Masquer la barre latérale de la bibliothèque de nœuds",
@@ -814,15 +818,33 @@
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
     "Toggle View Controls Bottom Panel": "Basculer le panneau inférieur des contrôles d’affichage",
+    "Toggle Workflows Sidebar": "Afficher/Masquer la barre latérale des workflows",
     "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
     "Unload Models": "Décharger les modèles",
     "Unload Models and Execution Cache": "Décharger les modèles et le cache d'exécution",
+    "Unlock Canvas": "Déverrouiller le canevas",
+    "Unpack the selected Subgraph": "Décompresser le Subgraph sélectionné",
+    "View": "Afficher",
     "Workflow": "Flux de travail",
+    "Workflows": "Flux de travail",
     "Zoom In": "Zoom avant",
-    "Zoom Out": "Zoom arrière"
+    "Zoom Out": "Zoom arrière",
+    "Zoom to fit": "Ajuster à l'écran"
+  },
+  "minimap": {
+    "nodeColors": "Couleurs des nœuds",
+    "renderBypassState": "Afficher l'état de contournement",
+    "renderErrorState": "Afficher l'état d'erreur",
+    "showGroups": "Afficher les cadres/groupes",
+    "showLinks": "Afficher les liens",
+    "Zoom Out": "Zoom arrière",
+    "sideToolbar_modelLibrary": "Bibliothèque de modèles",
+    "sideToolbar_nodeLibrary": "Bibliothèque de nœuds",
+    "sideToolbar_queue": "File d'attente",
+    "sideToolbar_workflows": "Flux de travail"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Ne plus afficher ce message",
@@ -1138,6 +1160,7 @@
     "UV": "UV",
     "User": "Utilisateur",
     "Validation": "Validation",
+    "Vue Nodes": "Nœuds Vue",
     "Window": "Fenêtre",
     "Workflow": "Flux de Travail"
   },
@@ -1201,6 +1224,10 @@
     },
     "workflows": "Flux de travail"
   },
+  "subgraphStore": {
+    "blueprintName": "Nom du sous-graphe",
+    "saveBlueprint": "Enregistrer le sous-graphe dans la bibliothèque"
+  },
   "tabMenu": {
     "addToBookmarks": "Ajouter aux Favoris",
     "closeOtherTabs": "Fermer les autres onglets",
@@ -1625,4 +1652,4 @@
     "exportWorkflow": "Exporter le flux de travail",
     "saveWorkflow": "Enregistrer le flux de travail"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index b551b5267..5031782ca 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Valider les flux de travail"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Activer le rendu des nœuds Vue",
+    "tooltip": "Rendre les nœuds comme composants Vue au lieu d’éléments canvas. Fonctionnalité expérimentale."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Activer les widgets Vue",
+    "tooltip": "Rendre les widgets comme composants Vue à l'intérieur des nœuds Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Mode de contrôle du widget",
     "options": {
diff --git a/src/locales/ja/commands.json b/src/locales/ja/commands.json
index b0ec730a4..1cf07b1ca 100644
--- a/src/locales/ja/commands.json
+++ b/src/locales/ja/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "ワークフローを開く"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "サブグラフを公開"
+  },
   "Comfy_QueuePrompt": {
     "label": "キュープロンプト"
   },
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index a3ee74360..d97237e7e 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -310,6 +310,8 @@
     "disabling": "無効化",
     "dismiss": "閉じる",
     "download": "ダウンロード",
+    "dropYourFileOr": "ファイルをドロップするか",
+    "duplicate": "複製",
     "edit": "編集",
     "empty": "空",
     "enableAll": "すべて有効にする",
@@ -807,18 +809,40 @@
     "Sign Out": "サインアウト",
     "Toggle Essential Bottom Panel": "エッセンシャル下部パネルの切り替え",
     "Toggle Logs Bottom Panel": "ログ下部パネルの切り替え",
+    "Toggle Bottom Panel": "下部パネルの切り替え",
+    "Toggle Focus Mode": "フォーカスモードの切り替え",
+    "Toggle Model Library Sidebar": "モデルライブラリサイドバーを切り替え",
+    "Toggle Node Library Sidebar": "ノードライブラリサイドバーを切り替え",
+    "Toggle Queue Sidebar": "キューサイドバーを切り替え",
     "Toggle Search Box": "検索ボックスの切り替え",
     "Toggle Terminal Bottom Panel": "ターミナル下部パネルの切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
     "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
+    "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
     "Unload Models": "モデルのアンロード",
     "Unload Models and Execution Cache": "モデルと実行キャッシュのアンロード",
+    "Unlock Canvas": "キャンバスのロックを解除",
+    "Unpack the selected Subgraph": "選択したサブグラフを展開",
+    "View": "表示",
     "Workflow": "ワークフロー",
+    "Workflows": "ワークフロー",
     "Zoom In": "ズームイン",
-    "Zoom Out": "ズームアウト"
+    "Zoom Out": "ズームアウト",
+    "Zoom to fit": "全体表示にズーム"
+  },
+  "minimap": {
+    "nodeColors": "ノードの色",
+    "renderBypassState": "バイパス状態を表示",
+    "renderErrorState": "エラー状態を表示",
+    "showGroups": "フレーム／グループを表示",
+    "showLinks": "リンクを表示",
+    "sideToolbar_modelLibrary": "モデルライブラリ",
+    "sideToolbar_nodeLibrary": "ノードライブラリ",
+    "sideToolbar_queue": "キュー",
+    "sideToolbar_workflows": "ワークフロー"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "再度表示しない",
@@ -1134,6 +1158,7 @@
     "UV": "UV",
     "User": "ユーザー",
     "Validation": "検証",
+    "Vue Nodes": "Vueノード",
     "Window": "ウィンドウ",
     "Workflow": "ワークフロー"
   },
@@ -1197,6 +1222,10 @@
     },
     "workflows": "ワークフロー"
   },
+  "subgraphStore": {
+    "blueprintName": "サブグラフ名",
+    "saveBlueprint": "サブグラフをライブラリに保存"
+  },
   "tabMenu": {
     "addToBookmarks": "ブックマークに追加",
     "closeOtherTabs": "他のタブを閉じる",
@@ -1621,4 +1650,4 @@
     "exportWorkflow": "ワークフローをエクスポート",
     "saveWorkflow": "ワークフローを保存"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index c31c323c8..beb3ff20f 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "ワークフローを検証"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vueノードレンダリングを有効化",
+    "tooltip": "ノードをキャンバス要素の代わりにVueコンポーネントとしてレンダリングします。実験的な機能です。"
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vueウィジェットを有効化",
+    "tooltip": "ウィジェットをVueノード内のVueコンポーネントとしてレンダリングします。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "ウィジェット制御モード",
     "options": {
diff --git a/src/locales/ko/commands.json b/src/locales/ko/commands.json
index c1b9e1a30..0e34a5395 100644
--- a/src/locales/ko/commands.json
+++ b/src/locales/ko/commands.json
@@ -3,7 +3,7 @@
     "label": "업데이트 확인"
   },
   "Comfy-Desktop_Folders_OpenCustomNodesFolder": {
-    "label": "사용자 정의 노드 폴더 열기"
+    "label": "커스텀 노드 폴더 열기"
   },
   "Comfy-Desktop_Folders_OpenInputsFolder": {
     "label": "입력 폴더 열기"
@@ -129,7 +129,7 @@
     "label": "선택 영역을 서브그래프로 변환"
   },
   "Comfy_Graph_ExitSubgraph": {
-    "label": "서브그래프 종료"
+    "label": "서브그래프 나가기"
   },
   "Comfy_Graph_FitGroupToContents": {
     "label": "그룹을 내용에 맞게 맞추기"
@@ -138,7 +138,7 @@
     "label": "선택한 노드 그룹화"
   },
   "Comfy_Graph_UnpackSubgraph": {
-    "label": "선택한 서브그래프 풀기"
+    "label": "선택한 서브그래프 묶음 풀기"
   },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "선택한 노드를 그룹 노드로 변환"
@@ -171,13 +171,13 @@
     "label": "기본 워크플로 로드"
   },
   "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
-    "label": "사용자 정의 노드 (베타)"
+    "label": "커스텀 노드 (베타)"
   },
   "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
-    "label": "커스텀 노드 (레거시)"
+    "label": "커스텀 노드 (구버전)"
   },
   "Comfy_Manager_ShowLegacyManagerMenu": {
-    "label": "매니저 메뉴 (레거시)"
+    "label": "매니저 메뉴 (구버전)"
   },
   "Comfy_Manager_ShowMissingPacks": {
     "label": "누락된 팩 설치"
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "워크플로 열기"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "서브그래프 게시"
+  },
   "Comfy_QueuePrompt": {
     "label": "실행 큐에 프롬프트 추가"
   },
@@ -282,7 +285,7 @@
     "label": "필수 하단 패널 전환"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
-    "label": "보기 컨트롤 하단 패널 전환"
+    "label": "뷰 컨트롤 하단 패널 전환"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
     "label": "키 바인딩 대화상자 표시"
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 48e48ad96..4c8c0973c 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -287,7 +287,7 @@
     "color": "색상",
     "comingSoon": "곧 출시 예정",
     "command": "명령",
-    "commandProhibited": "명령 {command}은 금지되었습니다. 자세한 정보는 관리자에게 문의하십시오.",
+    "commandProhibited": "{command}는 금지된 명령입니다. 자세한 정보는 관리자에게 문의하십시오.",
     "community": "커뮤니티",
     "completed": "완료됨",
     "confirm": "확인",
@@ -310,6 +310,8 @@
     "disabling": "비활성화 중",
     "dismiss": "닫기",
     "download": "다운로드",
+    "dropYourFileOr": "파일을 드롭하거나",
+    "duplicate": "복제",
     "edit": "편집",
     "empty": "비어 있음",
     "enableAll": "모두 활성화",
@@ -324,7 +326,7 @@
     "findIssues": "문제 찾기",
     "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
     "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
-    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상이 필요합니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래된 버전입니다. 백엔드는 {requiredVersion} 이상 버전이 필요합니다.",
     "goToNode": "노드로 이동",
     "help": "도움말",
     "icon": "아이콘",
@@ -351,7 +353,7 @@
     "micPermissionDenied": "마이크 권한이 거부되었습니다",
     "migrate": "이전(migrate)",
     "missing": "누락됨",
-    "moreWorkflows": "더 많은 워크플로우",
+    "moreWorkflows": "더 많은 워크플로",
     "name": "이름",
     "newFolder": "새 폴더",
     "next": "다음",
@@ -462,8 +464,8 @@
     "appPathLocationTooltip": "ComfyUI의 앱 에셋 디렉토리. ComfyUI 코드 및 에셋을 저장합니다.",
     "cannotWrite": "선택한 경로에 쓸 수 없습니다",
     "chooseInstallationLocation": "설치 위치 선택",
-    "customNodes": "사용자 정의 노드",
-    "customNodesDescription": "기존 ComfyUI 설치에서 사용자 정의 노드를 다시 설치합니다.",
+    "customNodes": "커스텀 노드",
+    "customNodesDescription": "기존 ComfyUI 설치에서 커스텀 노드를 다시 설치합니다.",
     "desktopAppSettings": "데스크탑 앱 설정",
     "desktopAppSettingsDescription": "ComfyUI가 데스크탑에서 어떻게 작동하는지 구성하세요. 이 설정은 나중에 변경할 수 있습니다.",
     "desktopSettings": "데스크탑 설정",
@@ -487,7 +489,7 @@
     "helpImprove": "ComfyUI 개선에 도움을 주세요",
     "installLocation": "설치 위치",
     "installLocationDescription": "ComfyUI의 사용자 데이터 디렉토리를 선택하십시오. 선택한 위치에 Python 환경이 설치됩니다. 선택한 디스크에 충분한 공간(~15GB)이 남아 있는지 확인하십시오.",
-    "installLocationTooltip": "ComfyUI의 사용자 데이터 디렉토리. 저장소:\n- Python 환경\n- 모델\n- 사용자 정의 노드\n",
+    "installLocationTooltip": "ComfyUI의 사용자 데이터 디렉토리. 저장소:\n- Python 환경\n- 모델\n- 커스텀 노드\n",
     "insufficientFreeSpace": "공간이 부족합니다 - 최소한의 여유 공간",
     "isOneDrive": "OneDrive에 설치하면 문제가 발생할 수 있습니다. OneDrive가 아닌 위치에 설치하는 것을 강력히 권장합니다.",
     "manualConfiguration": {
@@ -631,9 +633,9 @@
     "installationQueue": "설치 대기열",
     "lastUpdated": "마지막 업데이트",
     "latestVersion": "최신",
-    "legacyManagerUI": "레거시 UI 사용",
-    "legacyManagerUIDescription": "레거시 매니저 UI를 사용하려면, ComfyUI를 --enable-manager-legacy-ui로 시작하세요",
-    "legacyMenuNotAvailable": "이 버전의 ComfyUI에서는 레거시 매니저 메뉴를 사용할 수 없습니다. 대신 새로운 매니저 메뉴를 사용하십시오.",
+    "legacyManagerUI": "구버전 매니저 UI 사용",
+    "legacyManagerUIDescription": "구버전 매니저 UI를 사용하려면, ComfyUI를 --enable-manager-legacy-ui로 시작하세요",
+    "legacyMenuNotAvailable": "이 버전의 ComfyUI에서는 구버전 매니저 메뉴를 사용할 수 없습니다. 대신 새로운 매니저 메뉴를 사용하십시오.",
     "license": "라이선스",
     "loadingVersions": "버전 로딩 중...",
     "nightlyVersion": "최신 테스트 버전(nightly)",
@@ -661,7 +663,7 @@
       "pending": "대기 중",
       "unknown": "알 수 없음"
     },
-    "title": "사용자 정의 노드 관리자",
+    "title": "커스텀 노드 관리자",
     "totalNodes": "총 노드",
     "tryAgainLater": "나중에 다시 시도해 주세요.",
     "tryDifferentSearch": "다른 검색어를 시도해 주세요.",
@@ -748,8 +750,8 @@
     "Contact Support": "고객 지원 문의",
     "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
-    "Custom Nodes (Legacy)": "커스텀 노드(레거시)",
-    "Custom Nodes Manager": "사용자 정의 노드 관리자",
+    "Custom Nodes (Legacy)": "커스텀 노드(구버전)",
+    "Custom Nodes Manager": "커스텀 노드 관리자",
     "Decrease Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 줄이기",
     "Delete Selected Items": "선택한 항목 삭제",
     "Desktop User Guide": "데스크톱 사용자 가이드",
@@ -768,7 +770,7 @@
     "Load Default Workflow": "기본 워크플로 불러오기",
     "Manage group nodes": "그룹 노드 관리",
     "Manager": "매니저",
-    "Manager Menu (Legacy)": "매니저 메뉴(레거시)",
+    "Manager Menu (Legacy)": "매니저 메뉴(구버전)",
     "Move Selected Nodes Down": "선택한 노드 아래로 이동",
     "Move Selected Nodes Left": "선택한 노드 왼쪽으로 이동",
     "Move Selected Nodes Right": "선택한 노드 오른쪽으로 이동",
@@ -777,7 +779,7 @@
     "New": "새로 만들기",
     "Next Opened Workflow": "다음 열린 워크플로",
     "Open": "열기",
-    "Open Custom Nodes Folder": "사용자 정의 노드 폴더 열기",
+    "Open Custom Nodes Folder": "커스텀 노드 폴더 열기",
     "Open DevTools": "개발자 도구 열기",
     "Open Inputs Folder": "입력 폴더 열기",
     "Open Logs Folder": "로그 폴더 열기",
@@ -805,24 +807,45 @@
     "Show Model Selector (Dev)": "모델 선택기 표시 (개발자용)",
     "Show Settings Dialog": "설정 대화상자 표시",
     "Sign Out": "로그아웃",
+    "Toggle Essential Bottom Panel": "필수 하단 패널 전환",
     "Toggle Bottom Panel": "하단 패널 전환",
     "Toggle Focus Mode": "포커스 모드 전환",
     "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
     "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
     "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
-    "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
+    "Toggle Queue Sidebar": "대기열 사이드바 전환",
+    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
+    "Toggle View Controls Bottom Panel": "뷰 컨트롤 하단 패널 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
-    "Toggle Workflows Sidebar": "워크플로우 사이드바 전환",
+    "Toggle View Controls Bottom Panel": "뷰 컨트롤 하단 패널 전환",
+    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
+    "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
     "Unload Models": "모델 언로드",
     "Unload Models and Execution Cache": "모델 및 실행 캐시 언로드",
+    "Unlock Canvas": "캔버스 잠금 해제",
+    "Unpack the selected Subgraph": "선택한 서브그래프 묶음 풀기",
+    "View": "보기",
     "Workflow": "워크플로",
+    "Workflows": "워크플로",
     "Zoom In": "확대",
-    "Zoom Out": "축소"
+    "Zoom Out": "축소",
+    "Zoom to fit": "화면에 맞추기"
+  },
+  "minimap": {
+    "nodeColors": "노드 색상",
+    "renderBypassState": "바이패스 상태 렌더링",
+    "renderErrorState": "에러 상태 렌더링",
+    "showGroups": "프레임/그룹 표시",
+    "showLinks": "링크 표시",
+    "sideToolbar_modelLibrary": "사이드툴바.모델 라이브러리",
+    "sideToolbar_nodeLibrary": "사이드툴바.노드 라이브러리",
+    "sideToolbar_queue": "사이드툴바.대기열",
+    "sideToolbar_workflows": "사이드툴바.워크플로"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "다시 보지 않기",
@@ -988,7 +1011,7 @@
       "name": "DirectML 장치 번호"
     },
     "disable-all-custom-nodes": {
-      "name": "모든 사용자 정의 노드 로드 비활성화."
+      "name": "모든 커스텀 노드 로드 비활성화."
     },
     "disable-ipex-optimize": {
       "name": "IPEX 최적화 비활성화"
@@ -1138,6 +1161,7 @@
     "UV": "UV",
     "User": "사용자",
     "Validation": "검증",
+    "Vue Nodes": "Vue 노드",
     "Window": "창",
     "Workflow": "워크플로"
   },
@@ -1201,6 +1225,10 @@
     },
     "workflows": "워크플로"
   },
+  "subgraphStore": {
+    "blueprintName": "서브그래프 이름",
+    "saveBlueprint": "서브그래프를 라이브러리에 저장"
+  },
   "tabMenu": {
     "addToBookmarks": "북마크에 추가",
     "closeOtherTabs": "다른 탭 닫기",
@@ -1219,7 +1247,7 @@
       "Basics": "기본",
       "ComfyUI Examples": "ComfyUI 예시",
       "ControlNet": "컨트롤넷",
-      "Custom Nodes": "사용자 정의 노드",
+      "Custom Nodes": "커스텀 노드",
       "Flux": "FLUX",
       "Image": "이미지",
       "Image API": "이미지 API",
@@ -1608,7 +1636,7 @@
   "versionMismatchWarning": {
     "dismiss": "닫기",
     "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
-    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상 버전을 필요로 합니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래된 버전입니다. 백엔드는 {requiredVersion} 이상 버전이 필요합니다.",
     "title": "버전 호환성 경고",
     "updateFrontend": "프론트엔드 업데이트"
   },
@@ -1625,4 +1653,4 @@
     "exportWorkflow": "워크플로 내보내기",
     "saveWorkflow": "워크플로 저장"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index 45117dcb6..1a57c7841 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "워크플로 유효성 검사"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vue 노드 렌더링 활성화",
+    "tooltip": "노드를 캔버스 요소 대신 Vue 컴포넌트로 렌더링합니다. 실험적인 기능입니다."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vue 위젯 활성화",
+    "tooltip": "Vue 노드 내에서 위젯을 Vue 컴포넌트로 렌더링합니다."
+  },
   "Comfy_WidgetControlMode": {
     "name": "위젯 제어 모드",
     "options": {
diff --git a/src/locales/ru/commands.json b/src/locales/ru/commands.json
index ef5c89310..5a95a78b6 100644
--- a/src/locales/ru/commands.json
+++ b/src/locales/ru/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "Открыть рабочий процесс"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "Опубликовать подграф"
+  },
   "Comfy_QueuePrompt": {
     "label": "Очередь запросов"
   },
@@ -282,7 +285,7 @@
     "label": "Показать/скрыть основную нижнюю панель"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
-    "label": "Показать или скрыть нижнюю панель управления просмотром"
+    "label": "Показать/скрыть нижнюю панель управления просмотром"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
     "label": "Показать диалог клавиш"
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 6f67c4ba5..f9a5612de 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -310,6 +310,8 @@
     "disabling": "Отключение",
     "dismiss": "Закрыть",
     "download": "Скачать",
+    "dropYourFileOr": "Перетащите ваш файл или",
+    "duplicate": "Дублировать",
     "edit": "Редактировать",
     "empty": "Пусто",
     "enableAll": "Включить все",
@@ -807,19 +809,41 @@
     "Sign Out": "Выйти",
     "Toggle Essential Bottom Panel": "Показать/скрыть нижнюю панель основных элементов",
     "Toggle Logs Bottom Panel": "Показать/скрыть нижнюю панель логов",
+    "Toggle Bottom Panel": "Переключить нижнюю панель",
+    "Toggle Focus Mode": "Переключить режим фокуса",
+    "Toggle Model Library Sidebar": "Показать/скрыть боковую панель библиотеки моделей",
+    "Toggle Node Library Sidebar": "Показать/скрыть боковую панель библиотеки узлов",
+    "Toggle Queue Sidebar": "Показать/скрыть боковую панель очереди",
     "Toggle Search Box": "Переключить поисковую панель",
     "Toggle Terminal Bottom Panel": "Показать/скрыть нижнюю панель терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
     "Toggle View Controls Bottom Panel": "Показать/скрыть нижнюю панель элементов управления",
+    "Toggle Workflows Sidebar": "Показать/скрыть боковую панель рабочих процессов",
     "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
     "Unload Models": "Выгрузить модели",
     "Unload Models and Execution Cache": "Выгрузить модели и кэш выполнения",
+    "Unlock Canvas": "Разблокировать холст",
+    "Unpack the selected Subgraph": "Распаковать выбранный подграф",
+    "View": "Вид",
     "Workflow": "Рабочий процесс",
+    "Workflows": "Рабочие процессы",
     "Zoom In": "Увеличить",
-    "Zoom Out": "Уменьшить"
+    "Zoom Out": "Уменьшить",
+    "Zoom to fit": "Масштабировать по размеру"
+  },
+  "minimap": {
+    "nodeColors": "Цвета узлов",
+    "renderBypassState": "Отображать состояние обхода",
+    "renderErrorState": "Отображать состояние ошибки",
+    "showGroups": "Показать фреймы/группы",
+    "showLinks": "Показать связи",
+    "sideToolbar_modelLibrary": "sideToolbar.каталогМоделей",
+    "sideToolbar_nodeLibrary": "sideToolbar.каталогУзлов",
+    "sideToolbar_queue": "sideToolbar.очередь",
+    "sideToolbar_workflows": "sideToolbar.рабочиеПроцессы"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Больше не показывать это",
@@ -1135,6 +1159,7 @@
     "UV": "UV",
     "User": "Пользователь",
     "Validation": "Валидация",
+    "Vue Nodes": "Vue Nodes",
     "Window": "Окно",
     "Workflow": "Рабочий процесс"
   },
@@ -1198,6 +1223,10 @@
     },
     "workflows": "Рабочие процессы"
   },
+  "subgraphStore": {
+    "blueprintName": "Имя подграфа",
+    "saveBlueprint": "Сохранить подграф в библиотеку"
+  },
   "tabMenu": {
     "addToBookmarks": "Добавить в закладки",
     "closeOtherTabs": "Закрыть другие вкладки",
@@ -1622,4 +1651,4 @@
     "exportWorkflow": "Экспорт рабочего процесса",
     "saveWorkflow": "Сохранить рабочий процесс"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 76e38da04..48459266b 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Проверка рабочих процессов"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Включить рендеринг узлов через Vue",
+    "tooltip": "Отображать узлы как компоненты Vue вместо элементов canvas. Экспериментальная функция."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Включить виджеты Vue",
+    "tooltip": "Отображать виджеты как компоненты Vue внутри узлов Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Режим управления виджетом",
     "options": {
diff --git a/src/locales/zh-TW/commands.json b/src/locales/zh-TW/commands.json
index 06915279c..156addfb1 100644
--- a/src/locales/zh-TW/commands.json
+++ b/src/locales/zh-TW/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "開啟工作流程"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "發布子圖"
+  },
   "Comfy_QueuePrompt": {
     "label": "將提示詞加入佇列"
   },
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index c03e4bd4b..c98f2d0fb 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -310,6 +310,8 @@
     "disabling": "停用中",
     "dismiss": "關閉",
     "download": "下載",
+    "dropYourFileOr": "拖放您的檔案或",
+    "duplicate": "複製",
     "edit": "編輯",
     "empty": "空",
     "enableAll": "全部啟用",
@@ -811,13 +813,23 @@
     "Toggle Terminal Bottom Panel": "切換終端機底部面板",
     "Toggle Theme (Dark/Light)": "切換主題（深色/淺色）",
     "Toggle View Controls Bottom Panel": "切換檢視控制底部面板",
+    "Toggle Bottom Panel": "切換下方面板",
+    "Toggle Focus Mode": "切換專注模式",
+    "Toggle Model Library Sidebar": "切換模型庫側邊欄",
+    "Toggle Node Library Sidebar": "切換節點庫側邊欄",
+    "Toggle Queue Sidebar": "切換佇列側邊欄",
+    "Toggle Workflows Sidebar": "切換工作流程側邊欄",
     "Toggle the Custom Nodes Manager": "切換自訂節點管理器",
     "Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
     "Undo": "復原",
     "Ungroup selected group nodes": "取消群組選取的群組節點",
     "Unload Models": "卸載模型",
     "Unload Models and Execution Cache": "卸載模型與執行快取",
+    "Unlock Canvas": "解除鎖定畫布",
+    "Unpack the selected Subgraph": "解包所選子圖",
+    "View": "檢視",
     "Workflow": "工作流程",
+    "Workflows": "工作流程",
     "Zoom In": "放大",
     "Zoom Out": "縮小"
   },
@@ -1135,6 +1147,7 @@
     "UV": "UV",
     "User": "使用者",
     "Validation": "驗證",
+    "Vue Nodes": "Vue 節點",
     "Window": "視窗",
     "Workflow": "工作流程"
   },
@@ -1198,6 +1211,10 @@
     },
     "workflows": "工作流程"
   },
+  "subgraphStore": {
+    "blueprintName": "子圖名稱",
+    "saveBlueprint": "將子圖儲存到資料庫"
+  },
   "tabMenu": {
     "addToBookmarks": "加入書籤",
     "closeOtherTabs": "關閉其他分頁",
@@ -1622,4 +1639,4 @@
     "exportWorkflow": "匯出工作流程",
     "saveWorkflow": "儲存工作流程"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/zh-TW/settings.json b/src/locales/zh-TW/settings.json
index 375f751e6..06b0aefd3 100644
--- a/src/locales/zh-TW/settings.json
+++ b/src/locales/zh-TW/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "驗證工作流程"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "啟用 Vue 節點渲染",
+    "tooltip": "將節點以 Vue 元件而非畫布元素方式渲染。實驗性功能。"
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "啟用 Vue 小工具",
+    "tooltip": "在 Vue 節點中以 Vue 元件渲染小工具。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "元件控制模式",
     "options": {
diff --git a/src/locales/zh/commands.json b/src/locales/zh/commands.json
index e7b51b6eb..1eee6fa3c 100644
--- a/src/locales/zh/commands.json
+++ b/src/locales/zh/commands.json
@@ -215,6 +215,9 @@
   "Comfy_OpenWorkflow": {
     "label": "打开工作流"
   },
+  "Comfy_PublishSubgraph": {
+    "label": "发布子图"
+  },
   "Comfy_QueuePrompt": {
     "label": "执行提示词"
   },
@@ -279,13 +282,13 @@
     "label": "切换日志底部面板"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-essentials": {
-    "label": "切换基础底部面板"
+    "label": "切換基本下方面板"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
-    "label": "切换视图控制底部面板"
+    "label": "切換檢視控制底部面板"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
-    "label": "显示快捷键对话框"
+    "label": "顯示快捷鍵對話框"
   },
   "Workspace_ToggleFocusMode": {
     "label": "切换焦点模式"
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index d98dbc008..ea926fdab 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -309,6 +309,7 @@
     "disabling": "禁用中",
     "dismiss": "关闭",
     "download": "下载",
+    "dropYourFileOr": "拖放您的文件或",
     "duplicate": "复制",
     "edit": "编辑",
     "empty": "空",
@@ -733,7 +734,7 @@
     "instantTooltip": "工作流将会在生成完成后立即执行",
     "interrupt": "取消当前任务",
     "light": "淺色",
-    "manageExtensions": "管理擴充功能",
+    "manageExtensions": "管理扩展功能",
     "onChange": "更改时",
     "onChangeTooltip": "一旦进行更改，工作流将添加到执行队列",
     "queue": "队列面板",
@@ -813,6 +814,7 @@
     "Pin/Unpin Selected Items": "固定/取消固定选定项目",
     "Pin/Unpin Selected Nodes": "固定/取消固定选定节点",
     "Previous Opened Workflow": "上一个打开的工作流",
+    "Publish": "发布",
     "Queue Panel": "队列面板",
     "Queue Prompt": "执行提示词",
     "Queue Prompt (Front)": "执行提示词 (优先执行)",
@@ -831,17 +833,21 @@
     "Show Settings Dialog": "显示设置对话框",
     "Sign Out": "退出登录",
     "Toggle Essential Bottom Panel": "切换基础底部面板",
+    "Toggle Bottom Panel": "切换底部面板",
+    "Toggle Focus Mode": "切换专注模式",
     "Toggle Logs Bottom Panel": "切换日志底部面板",
     "Toggle Search Box": "切换搜索框",
     "Toggle Terminal Bottom Panel": "切换终端底部面板",
     "Toggle Theme (Dark/Light)": "切换主题（暗/亮）",
     "Toggle View Controls Bottom Panel": "切换视图控制底部面板",
+    "Toggle Workflows Sidebar": "切换工作流侧边栏",
     "Toggle the Custom Nodes Manager": "切换自定义节点管理器",
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
     "Unlock Canvas": "解除锁定画布",
     "Unpack the selected Subgraph": "解包选中子图",
+    "View": "视图",
     "Workflows": "工作流",
     "Zoom In": "放大画面",
     "Zoom Out": "缩小画面",
@@ -852,7 +858,11 @@
     "renderBypassState": "渲染绕过状态",
     "renderErrorState": "渲染错误状态",
     "showGroups": "显示框架/分组",
-    "showLinks": "显示连接"
+    "showLinks": "显示连接",
+    "sideToolbar_modelLibrary": "侧边工具栏.模型库",
+    "sideToolbar_nodeLibrary": "侧边工具栏.节点库",
+    "sideToolbar_queue": "侧边工具栏.队列",
+    "sideToolbar_workflows": "侧边工具栏.工作流"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "不再显示此消息",
@@ -1169,6 +1179,7 @@
     "UV": "UV",
     "User": "用户",
     "Validation": "验证",
+    "Vue Nodes": "Vue 节点",
     "Window": "窗口",
     "Workflow": "工作流"
   },
@@ -1254,6 +1265,10 @@
     },
     "workflows": "工作流"
   },
+  "subgraphStore": {
+    "blueprintName": "子图名称",
+    "saveBlueprint": "保存子图到库"
+  },
   "tabMenu": {
     "addToBookmarks": "添加到书签",
     "closeOtherTabs": "关闭其他标签",
@@ -1687,4 +1702,4 @@
     "showMinimap": "显示小地图",
     "zoomToFit": "适合画面"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index 343454ce9..965a3cb42 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -343,6 +343,14 @@
   "Comfy_Validation_Workflows": {
     "name": "校验工作流"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "启用 Vue 节点渲染",
+    "tooltip": "将节点渲染为 Vue 组件，而不是画布元素。实验性功能。"
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "启用Vue小部件",
+    "tooltip": "在Vue节点中将小部件渲染为Vue组件。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "组件控制模式",
     "options": {
diff --git a/src/renderer/core/canvas/injectionKeys.ts b/src/renderer/core/canvas/injectionKeys.ts
new file mode 100644
index 000000000..4134846c3
--- /dev/null
+++ b/src/renderer/core/canvas/injectionKeys.ts
@@ -0,0 +1,8 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/**
+ * Injection key for providing selected node IDs to Vue node components.
+ * Contains a reactive Set of selected node IDs (as strings).
+ */
+export const SelectedNodeIdsKey: InjectionKey<Ref<Set<string>>> =
+  Symbol('selectedNodeIds')
diff --git a/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
new file mode 100644
index 000000000..88d32485f
--- /dev/null
+++ b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
@@ -0,0 +1,589 @@
+/**
+ * Litegraph Link Adapter
+ *
+ * Bridges the gap between litegraph's data model and the pure canvas renderer.
+ * Converts litegraph-specific types (LLink, LGraphNode, slots) into generic
+ * rendering data that can be consumed by the PathRenderer.
+ * Maintains backward compatibility with existing litegraph integration.
+ */
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LLink } from '@/lib/litegraph/src/LLink'
+import type { Reroute } from '@/lib/litegraph/src/Reroute'
+import type {
+  CanvasColour,
+  INodeInputSlot,
+  INodeOutputSlot,
+  ReadOnlyPoint
+} from '@/lib/litegraph/src/interfaces'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  LinkDirection,
+  LinkMarkerShape,
+  LinkRenderType
+} from '@/lib/litegraph/src/types/globalEnums'
+import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
+import {
+  type ArrowShape,
+  CanvasPathRenderer,
+  type Direction,
+  type DragLinkData,
+  type LinkRenderData,
+  type RenderContext as PathRenderContext,
+  type Point,
+  type RenderMode
+} from '@/renderer/core/canvas/pathRenderer'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { Bounds } from '@/renderer/core/layout/types'
+
+export interface LinkRenderContext {
+  // Canvas settings
+  renderMode: LinkRenderType
+  connectionWidth: number
+  renderBorder: boolean
+  lowQuality: boolean
+  highQualityRender: boolean
+  scale: number
+  linkMarkerShape: LinkMarkerShape
+  renderConnectionArrows: boolean
+
+  // State
+  highlightedLinks: Set<string | number>
+
+  // Colors
+  defaultLinkColor: CanvasColour
+  linkTypeColors: Record<string, CanvasColour>
+
+  // Pattern for disabled links (optional)
+  disabledPattern?: CanvasPattern | null
+}
+
+interface LinkRenderOptions {
+  color?: CanvasColour
+  flow?: boolean
+  skipBorder?: boolean
+  disabled?: boolean
+}
+
+export class LitegraphLinkAdapter {
+  private graph: LGraph
+  private pathRenderer: CanvasPathRenderer
+  public enableLayoutStoreWrites = true
+
+  constructor(graph: LGraph) {
+    this.graph = graph
+    this.pathRenderer = new CanvasPathRenderer()
+  }
+
+  /**
+   * Render a single link with all necessary data properly fetched
+   * Populates link.path for hit detection
+   */
+  renderLink(
+    ctx: CanvasRenderingContext2D,
+    link: LLink,
+    context: LinkRenderContext,
+    options: LinkRenderOptions = {}
+  ): void {
+    // Get nodes from graph
+    const sourceNode = this.graph.getNodeById(link.origin_id)
+    const targetNode = this.graph.getNodeById(link.target_id)
+
+    if (!sourceNode || !targetNode) {
+      console.warn(`Cannot render link ${link.id}: missing nodes`)
+      return
+    }
+
+    // Get slots from nodes
+    const sourceSlot = sourceNode.outputs?.[link.origin_slot]
+    const targetSlot = targetNode.inputs?.[link.target_slot]
+
+    if (!sourceSlot || !targetSlot) {
+      console.warn(`Cannot render link ${link.id}: missing slots`)
+      return
+    }
+
+    // Get positions using layout tree data if available
+    const startPos = getSlotPosition(
+      sourceNode,
+      link.origin_slot,
+      false // output
+    )
+    const endPos = getSlotPosition(
+      targetNode,
+      link.target_slot,
+      true // input
+    )
+
+    // Get directions from slots
+    const startDir = sourceSlot.dir || LinkDirection.RIGHT
+    const endDir = targetSlot.dir || LinkDirection.LEFT
+
+    // Convert to pure render data
+    const linkData = this.convertToLinkRenderData(
+      link,
+      { x: startPos[0], y: startPos[1] },
+      { x: endPos[0], y: endPos[1] },
+      startDir,
+      endDir,
+      options
+    )
+
+    // Convert context
+    const pathContext = this.convertToPathRenderContext(context)
+
+    // Render using pure renderer
+    const path = this.pathRenderer.drawLink(ctx, linkData, pathContext)
+
+    // Store path for hit detection
+    link.path = path
+
+    // Update layout store when writes are enabled (event-driven path)
+    if (this.enableLayoutStoreWrites && link.id !== -1) {
+      // Calculate bounds and center only when writing
+      const bounds = this.calculateLinkBounds(startPos, endPos, linkData)
+      const centerPos = linkData.centerPos || {
+        x: (startPos[0] + endPos[0]) / 2,
+        y: (startPos[1] + endPos[1]) / 2
+      }
+
+      layoutStore.updateLinkLayout(link.id, {
+        id: link.id,
+        path: path,
+        bounds: bounds,
+        centerPos: centerPos,
+        sourceNodeId: String(link.origin_id),
+        targetNodeId: String(link.target_id),
+        sourceSlot: link.origin_slot,
+        targetSlot: link.target_slot
+      })
+
+      // Also update segment layout for the whole link (null rerouteId means final segment)
+      layoutStore.updateLinkSegmentLayout(link.id, null, {
+        path: path,
+        bounds: bounds,
+        centerPos: centerPos
+      })
+    }
+  }
+
+  /**
+   * Convert litegraph link data to pure render format
+   */
+  private convertToLinkRenderData(
+    link: LLink,
+    startPoint: Point,
+    endPoint: Point,
+    startDir: LinkDirection,
+    endDir: LinkDirection,
+    options: LinkRenderOptions
+  ): LinkRenderData {
+    return {
+      id: String(link.id),
+      startPoint,
+      endPoint,
+      startDirection: this.convertDirection(startDir),
+      endDirection: this.convertDirection(endDir),
+      color: options.color
+        ? String(options.color)
+        : link.color
+          ? String(link.color)
+          : undefined,
+      type: link.type !== undefined ? String(link.type) : undefined,
+      flow: options.flow || false,
+      disabled: options.disabled || false
+    }
+  }
+
+  /**
+   * Convert LinkDirection enum to Direction string
+   */
+  private convertDirection(dir: LinkDirection): Direction {
+    switch (dir) {
+      case LinkDirection.LEFT:
+        return 'left'
+      case LinkDirection.RIGHT:
+        return 'right'
+      case LinkDirection.UP:
+        return 'up'
+      case LinkDirection.DOWN:
+        return 'down'
+      default:
+        return 'right'
+    }
+  }
+
+  /**
+   * Convert LinkRenderContext to PathRenderContext
+   */
+  private convertToPathRenderContext(
+    context: LinkRenderContext
+  ): PathRenderContext {
+    // Match original arrow rendering conditions:
+    // Arrows only render when scale >= 0.6 AND highquality_render AND render_connection_arrows
+    const shouldShowArrows =
+      context.scale >= 0.6 &&
+      context.highQualityRender &&
+      context.renderConnectionArrows
+
+    // Only show center marker when not set to None
+    const shouldShowCenterMarker =
+      context.linkMarkerShape !== LinkMarkerShape.None
+
+    return {
+      style: {
+        mode: this.convertRenderMode(context.renderMode),
+        connectionWidth: context.connectionWidth,
+        borderWidth: context.renderBorder ? 4 : undefined,
+        arrowShape: this.convertArrowShape(context.linkMarkerShape),
+        showArrows: shouldShowArrows,
+        lowQuality: context.lowQuality,
+        // Center marker settings (matches original litegraph behavior)
+        showCenterMarker: shouldShowCenterMarker,
+        centerMarkerShape:
+          context.linkMarkerShape === LinkMarkerShape.Arrow
+            ? 'arrow'
+            : 'circle',
+        highQuality: context.highQualityRender
+      },
+      colors: {
+        default: String(context.defaultLinkColor),
+        byType: this.convertColorMap(context.linkTypeColors),
+        highlighted: '#FFF'
+      },
+      patterns: {
+        disabled: context.disabledPattern
+      },
+      animation: {
+        time: LiteGraph.getTime() * 0.001
+      },
+      scale: context.scale,
+      highlightedIds: new Set(Array.from(context.highlightedLinks).map(String))
+    }
+  }
+
+  /**
+   * Convert LinkRenderType to RenderMode
+   */
+  private convertRenderMode(mode: LinkRenderType): RenderMode {
+    switch (mode) {
+      case LinkRenderType.LINEAR_LINK:
+        return 'linear'
+      case LinkRenderType.STRAIGHT_LINK:
+        return 'straight'
+      case LinkRenderType.SPLINE_LINK:
+      default:
+        return 'spline'
+    }
+  }
+
+  /**
+   * Convert LinkMarkerShape to ArrowShape
+   */
+  private convertArrowShape(shape: LinkMarkerShape): ArrowShape {
+    switch (shape) {
+      case LinkMarkerShape.Circle:
+        return 'circle'
+      case LinkMarkerShape.Arrow:
+      default:
+        return 'triangle'
+    }
+  }
+
+  /**
+   * Convert color map to ensure all values are strings
+   */
+  private convertColorMap(
+    colors: Record<string, CanvasColour>
+  ): Record<string, string> {
+    const result: Record<string, string> = {}
+    for (const [key, value] of Object.entries(colors)) {
+      result[key] = String(value)
+    }
+    return result
+  }
+
+  /**
+   * Apply spline offset to a point, mimicking original #addSplineOffset behavior
+   * Critically: does nothing for CENTER/NONE directions (no case for them)
+   */
+  private applySplineOffset(
+    point: Point,
+    direction: LinkDirection,
+    distance: number
+  ): void {
+    switch (direction) {
+      case LinkDirection.LEFT:
+        point.x -= distance
+        break
+      case LinkDirection.RIGHT:
+        point.x += distance
+        break
+      case LinkDirection.UP:
+        point.y -= distance
+        break
+      case LinkDirection.DOWN:
+        point.y += distance
+        break
+      // CENTER and NONE: no offset applied (original behavior)
+    }
+  }
+
+  /**
+   * Direct rendering method compatible with LGraphCanvas
+   * Converts data and delegates to pure renderer
+   */
+  renderLinkDirect(
+    ctx: CanvasRenderingContext2D,
+    a: ReadOnlyPoint,
+    b: ReadOnlyPoint,
+    link: LLink | null,
+    skip_border: boolean,
+    flow: number | boolean | null,
+    color: CanvasColour | null,
+    start_dir: LinkDirection,
+    end_dir: LinkDirection,
+    context: LinkRenderContext,
+    extras: {
+      reroute?: Reroute
+      startControl?: ReadOnlyPoint
+      endControl?: ReadOnlyPoint
+      num_sublines?: number
+      disabled?: boolean
+    } = {}
+  ): void {
+    // Apply same defaults as original renderLink
+    const startDir = start_dir || LinkDirection.RIGHT
+    const endDir = end_dir || LinkDirection.LEFT
+
+    // Convert flow to boolean
+    const flowBool = flow === true || (typeof flow === 'number' && flow > 0)
+
+    // Create LinkRenderData from direct parameters
+    const linkData: LinkRenderData = {
+      id: link ? String(link.id) : 'temp',
+      startPoint: { x: a[0], y: a[1] },
+      endPoint: { x: b[0], y: b[1] },
+      startDirection: this.convertDirection(startDir),
+      endDirection: this.convertDirection(endDir),
+      color: color !== null && color !== undefined ? String(color) : undefined,
+      type: link?.type !== undefined ? String(link.type) : undefined,
+      flow: flowBool,
+      disabled: extras.disabled || false
+    }
+
+    // Control points handling (spline mode):
+    // - Pre-refactor, the old renderLink honored a single provided control and
+    //   derived the missing side via #addSplineOffset (CENTER => no offset).
+    // - Restore that behavior here so reroute segments render identically.
+    if (context.renderMode === LinkRenderType.SPLINE_LINK) {
+      const hasStartCtrl = !!extras.startControl
+      const hasEndCtrl = !!extras.endControl
+
+      // Compute distance once for offsets
+      const dist = Math.sqrt(
+        (b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1])
+      )
+      const factor = 0.25
+
+      const cps: Point[] = []
+
+      if (hasStartCtrl && hasEndCtrl) {
+        // Both provided explicitly
+        cps.push(
+          {
+            x: a[0] + (extras.startControl![0] || 0),
+            y: a[1] + (extras.startControl![1] || 0)
+          },
+          {
+            x: b[0] + (extras.endControl![0] || 0),
+            y: b[1] + (extras.endControl![1] || 0)
+          }
+        )
+        linkData.controlPoints = cps
+      } else if (hasStartCtrl && !hasEndCtrl) {
+        // Start provided, derive end via direction offset (CENTER => no offset)
+        const start = {
+          x: a[0] + (extras.startControl![0] || 0),
+          y: a[1] + (extras.startControl![1] || 0)
+        }
+        const end = { x: b[0], y: b[1] }
+        this.applySplineOffset(end, endDir, dist * factor)
+        cps.push(start, end)
+        linkData.controlPoints = cps
+      } else if (!hasStartCtrl && hasEndCtrl) {
+        // End provided, derive start via direction offset (CENTER => no offset)
+        const start = { x: a[0], y: a[1] }
+        this.applySplineOffset(start, startDir, dist * factor)
+        const end = {
+          x: b[0] + (extras.endControl![0] || 0),
+          y: b[1] + (extras.endControl![1] || 0)
+        }
+        cps.push(start, end)
+        linkData.controlPoints = cps
+      } else {
+        // Neither provided: derive both from directions (CENTER => no offset)
+        const start = { x: a[0], y: a[1] }
+        const end = { x: b[0], y: b[1] }
+        this.applySplineOffset(start, startDir, dist * factor)
+        this.applySplineOffset(end, endDir, dist * factor)
+        cps.push(start, end)
+        linkData.controlPoints = cps
+      }
+    }
+
+    // Convert context
+    const pathContext = this.convertToPathRenderContext(context)
+
+    // Override skip_border if needed
+    if (skip_border) {
+      pathContext.style.borderWidth = undefined
+    }
+
+    // Render using pure renderer
+    const path = this.pathRenderer.drawLink(ctx, linkData, pathContext)
+
+    // Store path for hit detection
+    const linkSegment = extras.reroute ?? link
+    if (linkSegment) {
+      linkSegment.path = path
+
+      // Copy calculated center position back to litegraph object
+      // This is needed for hit detection and menu interaction
+      if (linkData.centerPos) {
+        linkSegment._pos = linkSegment._pos || new Float32Array(2)
+        linkSegment._pos[0] = linkData.centerPos.x
+        linkSegment._pos[1] = linkData.centerPos.y
+
+        // Store center angle if calculated (for arrow markers)
+        if (linkData.centerAngle !== undefined) {
+          linkSegment._centreAngle = linkData.centerAngle
+        }
+      }
+
+      // Update layout store when writes are enabled (event-driven path)
+      if (this.enableLayoutStoreWrites && link && link.id !== -1) {
+        // Calculate bounds and center only when writing
+        const bounds = this.calculateLinkBounds(
+          [linkData.startPoint.x, linkData.startPoint.y] as ReadOnlyPoint,
+          [linkData.endPoint.x, linkData.endPoint.y] as ReadOnlyPoint,
+          linkData
+        )
+        const centerPos = linkData.centerPos || {
+          x: (linkData.startPoint.x + linkData.endPoint.x) / 2,
+          y: (linkData.startPoint.y + linkData.endPoint.y) / 2
+        }
+
+        // Update whole link layout (only if not a reroute segment)
+        if (!extras.reroute) {
+          layoutStore.updateLinkLayout(link.id, {
+            id: link.id,
+            path: path,
+            bounds: bounds,
+            centerPos: centerPos,
+            sourceNodeId: String(link.origin_id),
+            targetNodeId: String(link.target_id),
+            sourceSlot: link.origin_slot,
+            targetSlot: link.target_slot
+          })
+        }
+
+        // Always update segment layout (for both regular links and reroute segments)
+        const rerouteId = extras.reroute ? extras.reroute.id : null
+        layoutStore.updateLinkSegmentLayout(link.id, rerouteId, {
+          path: path,
+          bounds: bounds,
+          centerPos: centerPos
+        })
+      }
+    }
+  }
+
+  /**
+   * Render a link being dragged from a slot to mouse position
+   * Used during link creation/reconnection
+   */
+  renderDraggingLink(
+    ctx: CanvasRenderingContext2D,
+    fromNode: LGraphNode | null,
+    fromSlot: INodeOutputSlot | INodeInputSlot,
+    fromSlotIndex: number,
+    toPosition: ReadOnlyPoint,
+    context: LinkRenderContext,
+    options: {
+      fromInput?: boolean
+      color?: CanvasColour
+      disabled?: boolean
+    } = {}
+  ): void {
+    if (!fromNode) return
+
+    // Get slot position using layout tree if available
+    const slotPos = getSlotPosition(
+      fromNode,
+      fromSlotIndex,
+      options.fromInput || false
+    )
+    if (!slotPos) return
+
+    // Get slot direction
+    const slotDir =
+      fromSlot.dir ||
+      (options.fromInput ? LinkDirection.LEFT : LinkDirection.RIGHT)
+
+    // Create drag data
+    const dragData: DragLinkData = {
+      fixedPoint: { x: slotPos[0], y: slotPos[1] },
+      fixedDirection: this.convertDirection(slotDir),
+      dragPoint: { x: toPosition[0], y: toPosition[1] },
+      color: options.color ? String(options.color) : undefined,
+      type: fromSlot.type !== undefined ? String(fromSlot.type) : undefined,
+      disabled: options.disabled || false,
+      fromInput: options.fromInput || false
+    }
+
+    // Convert context
+    const pathContext = this.convertToPathRenderContext(context)
+
+    // Hide center marker when dragging links
+    pathContext.style.showCenterMarker = false
+
+    // Render using pure renderer
+    this.pathRenderer.drawDraggingLink(ctx, dragData, pathContext)
+  }
+
+  /**
+   * Calculate bounding box for a link
+   * Includes padding for line width and control points
+   */
+  private calculateLinkBounds(
+    startPos: ReadOnlyPoint,
+    endPos: ReadOnlyPoint,
+    linkData: LinkRenderData
+  ): Bounds {
+    let minX = Math.min(startPos[0], endPos[0])
+    let maxX = Math.max(startPos[0], endPos[0])
+    let minY = Math.min(startPos[1], endPos[1])
+    let maxY = Math.max(startPos[1], endPos[1])
+
+    // Include control points if they exist (for spline links)
+    if (linkData.controlPoints) {
+      for (const cp of linkData.controlPoints) {
+        minX = Math.min(minX, cp.x)
+        maxX = Math.max(maxX, cp.x)
+        minY = Math.min(minY, cp.y)
+        maxY = Math.max(maxY, cp.y)
+      }
+    }
+
+    // Add padding for line width and hit tolerance
+    const padding = 20
+
+    return {
+      x: minX - padding,
+      y: minY - padding,
+      width: maxX - minX + 2 * padding,
+      height: maxY - minY + 2 * padding
+    }
+  }
+}
diff --git a/src/renderer/core/canvas/litegraph/slotCalculations.ts b/src/renderer/core/canvas/litegraph/slotCalculations.ts
new file mode 100644
index 000000000..8b66b68a8
--- /dev/null
+++ b/src/renderer/core/canvas/litegraph/slotCalculations.ts
@@ -0,0 +1,209 @@
+/**
+ * Slot Position Calculations
+ *
+ * Centralized utility for calculating input/output slot positions on nodes.
+ * This allows both litegraph nodes and the layout system to use the same
+ * calculation logic while providing their own position data.
+ */
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot,
+  Point
+} from '@/lib/litegraph/src/interfaces'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { isWidgetInputSlot } from '@/lib/litegraph/src/node/slotUtils'
+import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+export interface SlotPositionContext {
+  /** Node's X position in graph coordinates */
+  nodeX: number
+  /** Node's Y position in graph coordinates */
+  nodeY: number
+  /** Node's width */
+  nodeWidth: number
+  /** Node's height */
+  nodeHeight: number
+  /** Whether the node is collapsed */
+  collapsed: boolean
+  /** Collapsed width (if applicable) */
+  collapsedWidth?: number
+  /** Node constructor's slot_start_y offset */
+  slotStartY?: number
+  /** Node's input slots */
+  inputs: INodeInputSlot[]
+  /** Node's output slots */
+  outputs: INodeOutputSlot[]
+  /** Node's widgets (for widget slot detection) */
+  widgets?: Array<{ name?: string }>
+}
+
+/**
+ * Calculate the position of an input slot in graph coordinates
+ * @param context Node context containing position and slot data
+ * @param slot The input slot index
+ * @returns Position of the input slot center in graph coordinates
+ */
+export function calculateInputSlotPos(
+  context: SlotPositionContext,
+  slot: number
+): Point {
+  const input = context.inputs[slot]
+  if (!input) return [context.nodeX, context.nodeY]
+
+  return calculateInputSlotPosFromSlot(context, input)
+}
+
+/**
+ * Calculate the position of an input slot in graph coordinates
+ * @param context Node context containing position and slot data
+ * @param input The input slot object
+ * @returns Position of the input slot center in graph coordinates
+ */
+export function calculateInputSlotPosFromSlot(
+  context: SlotPositionContext,
+  input: INodeInputSlot
+): Point {
+  const { nodeX, nodeY, collapsed } = context
+
+  // Handle collapsed nodes
+  if (collapsed) {
+    const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5
+    return [nodeX, nodeY - halfTitle]
+  }
+
+  // Handle hard-coded positions
+  const { pos } = input
+  if (pos) return [nodeX + pos[0], nodeY + pos[1]]
+
+  // Default vertical slots
+  const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+  const nodeOffsetY = context.slotStartY || 0
+  const defaultVerticalInputs = getDefaultVerticalInputs(context)
+  const slotIndex = defaultVerticalInputs.indexOf(input)
+  const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
+
+  return [nodeX + offsetX, nodeY + slotY + nodeOffsetY]
+}
+
+/**
+ * Calculate the position of an output slot in graph coordinates
+ * @param context Node context containing position and slot data
+ * @param slot The output slot index
+ * @returns Position of the output slot center in graph coordinates
+ */
+export function calculateOutputSlotPos(
+  context: SlotPositionContext,
+  slot: number
+): Point {
+  const { nodeX, nodeY, nodeWidth, collapsed, collapsedWidth, outputs } =
+    context
+
+  // Handle collapsed nodes
+  if (collapsed) {
+    const width = collapsedWidth || LiteGraph.NODE_COLLAPSED_WIDTH
+    const halfTitle = LiteGraph.NODE_TITLE_HEIGHT * 0.5
+    return [nodeX + width, nodeY - halfTitle]
+  }
+
+  const outputSlot = outputs[slot]
+  if (!outputSlot) return [nodeX + nodeWidth, nodeY]
+
+  // Handle hard-coded positions
+  const outputPos = outputSlot.pos
+  if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]]
+
+  // Default vertical slots
+  const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+  const nodeOffsetY = context.slotStartY || 0
+  const defaultVerticalOutputs = getDefaultVerticalOutputs(context)
+  const slotIndex = defaultVerticalOutputs.indexOf(outputSlot)
+  const slotY = (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT
+
+  // TODO: Why +1?
+  return [nodeX + nodeWidth + 1 - offsetX, nodeY + slotY + nodeOffsetY]
+}
+
+/**
+ * Get slot position using layout tree if available, fallback to node's position
+ * Unified implementation used by both LitegraphLinkAdapter and useLinkLayoutSync
+ * @param node The LGraphNode
+ * @param slotIndex The slot index
+ * @param isInput Whether this is an input slot
+ * @returns Position of the slot center in graph coordinates
+ */
+export function getSlotPosition(
+  node: LGraphNode,
+  slotIndex: number,
+  isInput: boolean
+): Point {
+  // Try to get precise position from slot layout (DOM-registered)
+  const slotKey = getSlotKey(String(node.id), slotIndex, isInput)
+  const slotLayout = layoutStore.getSlotLayout(slotKey)
+  if (slotLayout) {
+    return [slotLayout.position.x, slotLayout.position.y]
+  }
+
+  // Fallback: derive position from node layout tree and slot model
+  const nodeLayout = layoutStore.getNodeLayoutRef(String(node.id)).value
+
+  if (nodeLayout) {
+    // Create context from layout tree data
+    const context: SlotPositionContext = {
+      nodeX: nodeLayout.position.x,
+      nodeY: nodeLayout.position.y,
+      nodeWidth: nodeLayout.size.width,
+      nodeHeight: nodeLayout.size.height,
+      collapsed: node.flags.collapsed || false,
+      collapsedWidth: node._collapsed_width,
+      slotStartY: node.constructor.slot_start_y,
+      inputs: node.inputs,
+      outputs: node.outputs,
+      widgets: node.widgets
+    }
+
+    // Use helper to calculate position
+    return isInput
+      ? calculateInputSlotPos(context, slotIndex)
+      : calculateOutputSlotPos(context, slotIndex)
+  }
+
+  // Fallback: calculate directly from node properties if layout not available
+  const context: SlotPositionContext = {
+    nodeX: node.pos[0],
+    nodeY: node.pos[1],
+    nodeWidth: node.size[0],
+    nodeHeight: node.size[1],
+    collapsed: node.flags.collapsed || false,
+    collapsedWidth: node._collapsed_width,
+    slotStartY: node.constructor.slot_start_y,
+    inputs: node.inputs,
+    outputs: node.outputs,
+    widgets: node.widgets
+  }
+
+  return isInput
+    ? calculateInputSlotPos(context, slotIndex)
+    : calculateOutputSlotPos(context, slotIndex)
+}
+
+/**
+ * Get the inputs that are not positioned with absolute coordinates
+ */
+function getDefaultVerticalInputs(
+  context: SlotPositionContext
+): INodeInputSlot[] {
+  return context.inputs.filter(
+    (slot) => !slot.pos && !(context.widgets?.length && isWidgetInputSlot(slot))
+  )
+}
+
+/**
+ * Get the outputs that are not positioned with absolute coordinates
+ */
+function getDefaultVerticalOutputs(
+  context: SlotPositionContext
+): INodeOutputSlot[] {
+  return context.outputs.filter((slot) => !slot.pos)
+}
diff --git a/src/renderer/core/canvas/pathRenderer.ts b/src/renderer/core/canvas/pathRenderer.ts
new file mode 100644
index 000000000..eb458b180
--- /dev/null
+++ b/src/renderer/core/canvas/pathRenderer.ts
@@ -0,0 +1,820 @@
+/**
+ * Path Renderer
+ *
+ * Pure canvas2D rendering utility with no framework dependencies.
+ * Renders bezier curves, straight lines, and linear connections between points.
+ * Supports arrows, flow animations, and returns Path2D objects for hit detection.
+ * Can be reused in any canvas-based project without modification.
+ */
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export type Direction = 'left' | 'right' | 'up' | 'down'
+export type RenderMode = 'spline' | 'straight' | 'linear'
+export type ArrowShape = 'triangle' | 'circle' | 'square'
+
+export interface LinkRenderData {
+  id: string
+  startPoint: Point
+  endPoint: Point
+  startDirection: Direction
+  endDirection: Direction
+  color?: string
+  type?: string
+  controlPoints?: Point[]
+  flow?: boolean
+  disabled?: boolean
+  // Optional multi-segment support
+  segments?: Array<{
+    start: Point
+    end: Point
+    controlPoints?: Point[]
+  }>
+  // Center point storage (for hit detection and menu)
+  centerPos?: Point
+  centerAngle?: number
+}
+
+interface RenderStyle {
+  mode: RenderMode
+  connectionWidth: number
+  borderWidth?: number
+  arrowShape?: ArrowShape
+  showArrows?: boolean
+  lowQuality?: boolean
+  // Center marker properties
+  showCenterMarker?: boolean
+  centerMarkerShape?: 'circle' | 'arrow'
+  highQuality?: boolean
+}
+
+interface RenderColors {
+  default: string
+  byType: Record<string, string>
+  highlighted: string
+}
+
+export interface RenderContext {
+  style: RenderStyle
+  colors: RenderColors
+  patterns?: {
+    disabled?: CanvasPattern | null
+  }
+  animation?: {
+    time: number // Seconds for flow animation
+  }
+  scale?: number // Canvas scale for quality adjustments
+  highlightedIds?: Set<string>
+}
+
+export interface DragLinkData {
+  /** Fixed end - the slot being dragged from */
+  fixedPoint: Point
+  fixedDirection: Direction
+  /** Moving end - follows mouse */
+  dragPoint: Point
+  dragDirection?: Direction
+  /** Visual properties */
+  color?: string
+  type?: string
+  disabled?: boolean
+  /** Whether dragging from input (reverse direction) */
+  fromInput?: boolean
+}
+
+export class CanvasPathRenderer {
+  /**
+   * Draw a link between two points
+   * Returns a Path2D object for hit detection
+   */
+  drawLink(
+    ctx: CanvasRenderingContext2D,
+    link: LinkRenderData,
+    context: RenderContext
+  ): Path2D {
+    const path = new Path2D()
+
+    // Determine final color
+    const isHighlighted = context.highlightedIds?.has(link.id) ?? false
+    const color = this.determineLinkColor(link, context, isHighlighted)
+
+    // Save context state
+    ctx.save()
+
+    // Apply disabled pattern if needed
+    if (link.disabled && context.patterns?.disabled) {
+      ctx.strokeStyle = context.patterns.disabled
+    } else {
+      ctx.strokeStyle = color
+    }
+
+    // Set line properties
+    ctx.lineWidth = context.style.connectionWidth
+    ctx.lineJoin = 'round'
+
+    // Draw border if needed
+    if (context.style.borderWidth && !context.style.lowQuality) {
+      this.drawLinkPath(
+        ctx,
+        path,
+        link,
+        context,
+        context.style.connectionWidth + context.style.borderWidth,
+        'rgba(0,0,0,0.5)'
+      )
+    }
+
+    // Draw main link
+    this.drawLinkPath(
+      ctx,
+      path,
+      link,
+      context,
+      context.style.connectionWidth,
+      color
+    )
+
+    // Calculate and store center position
+    this.calculateCenterPoint(link, context)
+
+    // Draw arrows if needed
+    if (context.style.showArrows) {
+      this.drawArrows(ctx, link, context, color)
+    }
+
+    // Draw center marker if needed (for link menu interaction)
+    if (
+      context.style.showCenterMarker &&
+      context.scale &&
+      context.scale >= 0.6 &&
+      context.style.highQuality
+    ) {
+      this.drawCenterMarker(ctx, link, context, color)
+    }
+
+    // Draw flow animation if needed
+    if (link.flow && context.animation) {
+      this.drawFlowAnimation(ctx, path, link, context)
+    }
+
+    ctx.restore()
+
+    return path
+  }
+
+  private determineLinkColor(
+    link: LinkRenderData,
+    context: RenderContext,
+    isHighlighted: boolean
+  ): string {
+    if (isHighlighted) {
+      return context.colors.highlighted
+    }
+    if (link.color) {
+      return link.color
+    }
+    if (link.type && context.colors.byType[link.type]) {
+      return context.colors.byType[link.type]
+    }
+    return context.colors.default
+  }
+
+  private drawLinkPath(
+    ctx: CanvasRenderingContext2D,
+    path: Path2D,
+    link: LinkRenderData,
+    context: RenderContext,
+    lineWidth: number,
+    color: string
+  ): void {
+    ctx.strokeStyle = color
+    ctx.lineWidth = lineWidth
+
+    const start = link.startPoint
+    const end = link.endPoint
+
+    // Build the path based on render mode
+    if (context.style.mode === 'linear') {
+      this.buildLinearPath(
+        path,
+        start,
+        end,
+        link.startDirection,
+        link.endDirection
+      )
+    } else if (context.style.mode === 'straight') {
+      this.buildStraightPath(
+        path,
+        start,
+        end,
+        link.startDirection,
+        link.endDirection
+      )
+    } else {
+      // Spline mode (default)
+      this.buildSplinePath(
+        path,
+        start,
+        end,
+        link.startDirection,
+        link.endDirection,
+        link.controlPoints
+      )
+    }
+
+    ctx.stroke(path)
+  }
+
+  private buildLinearPath(
+    path: Path2D,
+    start: Point,
+    end: Point,
+    startDir: Direction,
+    endDir: Direction
+  ): void {
+    // Match original litegraph LINEAR_LINK mode with 4-point path
+    const l = 15 // offset distance for control points
+
+    const innerA = { x: start.x, y: start.y }
+    const innerB = { x: end.x, y: end.y }
+
+    // Apply directional offsets to create control points
+    switch (startDir) {
+      case 'left':
+        innerA.x -= l
+        break
+      case 'right':
+        innerA.x += l
+        break
+      case 'up':
+        innerA.y -= l
+        break
+      case 'down':
+        innerA.y += l
+        break
+    }
+
+    switch (endDir) {
+      case 'left':
+        innerB.x -= l
+        break
+      case 'right':
+        innerB.x += l
+        break
+      case 'up':
+        innerB.y -= l
+        break
+      case 'down':
+        innerB.y += l
+        break
+    }
+
+    // Draw 4-point path: start -> innerA -> innerB -> end
+    path.moveTo(start.x, start.y)
+    path.lineTo(innerA.x, innerA.y)
+    path.lineTo(innerB.x, innerB.y)
+    path.lineTo(end.x, end.y)
+  }
+
+  private buildStraightPath(
+    path: Path2D,
+    start: Point,
+    end: Point,
+    startDir: Direction,
+    endDir: Direction
+  ): void {
+    // Match original STRAIGHT_LINK implementation with l=10 offset
+    const l = 10 // offset distance matching original
+
+    const innerA = { x: start.x, y: start.y }
+    const innerB = { x: end.x, y: end.y }
+
+    // Apply directional offsets to match original behavior
+    switch (startDir) {
+      case 'left':
+        innerA.x -= l
+        break
+      case 'right':
+        innerA.x += l
+        break
+      case 'up':
+        innerA.y -= l
+        break
+      case 'down':
+        innerA.y += l
+        break
+    }
+
+    switch (endDir) {
+      case 'left':
+        innerB.x -= l
+        break
+      case 'right':
+        innerB.x += l
+        break
+      case 'up':
+        innerB.y -= l
+        break
+      case 'down':
+        innerB.y += l
+        break
+    }
+
+    // Calculate midpoint using innerA/innerB positions (matching original)
+    const midX = (innerA.x + innerB.x) * 0.5
+
+    // Build path: start -> innerA -> (midX, innerA.y) -> (midX, innerB.y) -> innerB -> end
+    path.moveTo(start.x, start.y)
+    path.lineTo(innerA.x, innerA.y)
+    path.lineTo(midX, innerA.y)
+    path.lineTo(midX, innerB.y)
+    path.lineTo(innerB.x, innerB.y)
+    path.lineTo(end.x, end.y)
+  }
+
+  private buildSplinePath(
+    path: Path2D,
+    start: Point,
+    end: Point,
+    startDir: Direction,
+    endDir: Direction,
+    controlPoints?: Point[]
+  ): void {
+    path.moveTo(start.x, start.y)
+
+    // Calculate control points if not provided
+    const controls =
+      controlPoints || this.calculateControlPoints(start, end, startDir, endDir)
+
+    if (controls.length >= 2) {
+      // Cubic bezier
+      path.bezierCurveTo(
+        controls[0].x,
+        controls[0].y,
+        controls[1].x,
+        controls[1].y,
+        end.x,
+        end.y
+      )
+    } else if (controls.length === 1) {
+      // Quadratic bezier
+      path.quadraticCurveTo(controls[0].x, controls[0].y, end.x, end.y)
+    } else {
+      // Fallback to linear
+      path.lineTo(end.x, end.y)
+    }
+  }
+
+  private calculateControlPoints(
+    start: Point,
+    end: Point,
+    startDir: Direction,
+    endDir: Direction
+  ): Point[] {
+    const dist = Math.sqrt(
+      Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2)
+    )
+    const controlDist = Math.max(30, dist * 0.25)
+
+    // Calculate control point offsets based on direction
+    const startControl = this.getDirectionOffset(startDir, controlDist)
+    const endControl = this.getDirectionOffset(endDir, controlDist)
+
+    return [
+      { x: start.x + startControl.x, y: start.y + startControl.y },
+      { x: end.x + endControl.x, y: end.y + endControl.y }
+    ]
+  }
+
+  private getDirectionOffset(direction: Direction, distance: number): Point {
+    switch (direction) {
+      case 'left':
+        return { x: -distance, y: 0 }
+      case 'right':
+        return { x: distance, y: 0 }
+      case 'up':
+        return { x: 0, y: -distance }
+      case 'down':
+        return { x: 0, y: distance }
+    }
+  }
+
+  private drawArrows(
+    ctx: CanvasRenderingContext2D,
+    link: LinkRenderData,
+    context: RenderContext,
+    color: string
+  ): void {
+    if (!context.style.showArrows) return
+
+    // Render arrows at 0.25 and 0.75 positions along the path (matching original)
+    const positions = [0.25, 0.75]
+
+    for (const t of positions) {
+      // Compute arrow position and angle
+      const posA = this.computeConnectionPoint(link, t, context)
+      const posB = this.computeConnectionPoint(link, t + 0.01, context) // slightly ahead for angle
+
+      const angle = Math.atan2(posB.y - posA.y, posB.x - posA.x)
+
+      // Draw arrow triangle (matching original shape)
+      const transform = ctx.getTransform()
+      ctx.translate(posA.x, posA.y)
+      ctx.rotate(angle)
+      ctx.fillStyle = color
+      ctx.beginPath()
+      ctx.moveTo(-5, -3)
+      ctx.lineTo(0, +7)
+      ctx.lineTo(+5, -3)
+      ctx.fill()
+      ctx.setTransform(transform)
+    }
+  }
+
+  /**
+   * Compute a point along the link path at position t (0 to 1)
+   * For backward compatibility with original litegraph, this always uses
+   * bezier calculation with spline offsets, regardless of render mode.
+   * This ensures arrow positions match the original implementation.
+   */
+  private computeConnectionPoint(
+    link: LinkRenderData,
+    t: number,
+    _context: RenderContext
+  ): Point {
+    const { startPoint, endPoint, startDirection, endDirection } = link
+
+    // Match original behavior: always use bezier math with spline offsets
+    // regardless of render mode (for arrow position compatibility)
+    const dist = Math.sqrt(
+      Math.pow(endPoint.x - startPoint.x, 2) +
+        Math.pow(endPoint.y - startPoint.y, 2)
+    )
+    const factor = 0.25
+
+    // Create control points with spline offsets (matching original #addSplineOffset)
+    const pa = { x: startPoint.x, y: startPoint.y }
+    const pb = { x: endPoint.x, y: endPoint.y }
+
+    // Apply spline offsets based on direction
+    switch (startDirection) {
+      case 'left':
+        pa.x -= dist * factor
+        break
+      case 'right':
+        pa.x += dist * factor
+        break
+      case 'up':
+        pa.y -= dist * factor
+        break
+      case 'down':
+        pa.y += dist * factor
+        break
+    }
+
+    switch (endDirection) {
+      case 'left':
+        pb.x -= dist * factor
+        break
+      case 'right':
+        pb.x += dist * factor
+        break
+      case 'up':
+        pb.y -= dist * factor
+        break
+      case 'down':
+        pb.y += dist * factor
+        break
+    }
+
+    // Calculate bezier point (matching original computeConnectionPoint)
+    const c1 = (1 - t) * (1 - t) * (1 - t)
+    const c2 = 3 * ((1 - t) * (1 - t)) * t
+    const c3 = 3 * (1 - t) * (t * t)
+    const c4 = t * t * t
+
+    return {
+      x: c1 * startPoint.x + c2 * pa.x + c3 * pb.x + c4 * endPoint.x,
+      y: c1 * startPoint.y + c2 * pa.y + c3 * pb.y + c4 * endPoint.y
+    }
+  }
+
+  private drawFlowAnimation(
+    ctx: CanvasRenderingContext2D,
+    _path: Path2D,
+    link: LinkRenderData,
+    context: RenderContext
+  ): void {
+    if (!context.animation) return
+
+    // Match original implementation: render 5 moving circles along the path
+    const time = context.animation.time
+    const linkColor = this.determineLinkColor(link, context, false)
+
+    ctx.save()
+    ctx.fillStyle = linkColor
+
+    // Draw 5 circles at different positions along the path
+    for (let i = 0; i < 5; ++i) {
+      // Calculate position along path (0 to 1), with time-based animation
+      const f = (time + i * 0.2) % 1
+      const flowPos = this.computeConnectionPoint(link, f, context)
+
+      // Draw circle at this position
+      ctx.beginPath()
+      ctx.arc(flowPos.x, flowPos.y, 5, 0, 2 * Math.PI)
+      ctx.fill()
+    }
+
+    ctx.restore()
+  }
+
+  /**
+   * Utility to find a point on a bezier curve (for hit detection)
+   */
+  findPointOnBezier(
+    t: number,
+    p0: Point,
+    p1: Point,
+    p2: Point,
+    p3: Point
+  ): Point {
+    const mt = 1 - t
+    const mt2 = mt * mt
+    const mt3 = mt2 * mt
+    const t2 = t * t
+    const t3 = t2 * t
+
+    return {
+      x: mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x,
+      y: mt3 * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t3 * p3.y
+    }
+  }
+
+  /**
+   * Draw a link being dragged from a slot to the mouse position
+   * Returns a Path2D object for potential hit detection
+   */
+  drawDraggingLink(
+    ctx: CanvasRenderingContext2D,
+    dragData: DragLinkData,
+    context: RenderContext
+  ): Path2D {
+    // Create LinkRenderData from drag data
+    // When dragging from input, swap the points/directions
+    const linkData: LinkRenderData = dragData.fromInput
+      ? {
+          id: 'dragging',
+          startPoint: dragData.dragPoint,
+          endPoint: dragData.fixedPoint,
+          startDirection:
+            dragData.dragDirection ||
+            this.getOppositeDirection(dragData.fixedDirection),
+          endDirection: dragData.fixedDirection,
+          color: dragData.color,
+          type: dragData.type,
+          disabled: dragData.disabled
+        }
+      : {
+          id: 'dragging',
+          startPoint: dragData.fixedPoint,
+          endPoint: dragData.dragPoint,
+          startDirection: dragData.fixedDirection,
+          endDirection:
+            dragData.dragDirection ||
+            this.getOppositeDirection(dragData.fixedDirection),
+          color: dragData.color,
+          type: dragData.type,
+          disabled: dragData.disabled
+        }
+
+    // Use standard link drawing
+    return this.drawLink(ctx, linkData, context)
+  }
+
+  /**
+   * Get the opposite direction (for drag preview)
+   */
+  private getOppositeDirection(direction: Direction): Direction {
+    switch (direction) {
+      case 'left':
+        return 'right'
+      case 'right':
+        return 'left'
+      case 'up':
+        return 'down'
+      case 'down':
+        return 'up'
+    }
+  }
+
+  /**
+   * Get the center point of a link (useful for labels, debugging)
+   */
+  getLinkCenter(link: LinkRenderData): Point {
+    // For now, simple midpoint
+    // Could be enhanced to find actual curve midpoint
+    return {
+      x: (link.startPoint.x + link.endPoint.x) / 2,
+      y: (link.startPoint.y + link.endPoint.y) / 2
+    }
+  }
+
+  /**
+   * Calculate and store the center point and angle of a link
+   * Mimics the original litegraph center point calculation
+   */
+  private calculateCenterPoint(
+    link: LinkRenderData,
+    context: RenderContext
+  ): void {
+    const { startPoint, endPoint, controlPoints } = link
+
+    if (
+      context.style.mode === 'spline' &&
+      controlPoints &&
+      controlPoints.length >= 2
+    ) {
+      // For spline mode, find point at t=0.5 on the bezier curve
+      const centerPos = this.findPointOnBezier(
+        0.5,
+        startPoint,
+        controlPoints[0],
+        controlPoints[1],
+        endPoint
+      )
+      link.centerPos = centerPos
+
+      // Calculate angle for arrow marker (point slightly past center)
+      if (context.style.centerMarkerShape === 'arrow') {
+        const justPastCenter = this.findPointOnBezier(
+          0.51,
+          startPoint,
+          controlPoints[0],
+          controlPoints[1],
+          endPoint
+        )
+        link.centerAngle = Math.atan2(
+          justPastCenter.y - centerPos.y,
+          justPastCenter.x - centerPos.x
+        )
+      }
+    } else if (context.style.mode === 'linear') {
+      // For linear mode, calculate midpoint between control points (matching original)
+      const l = 15 // Same offset as buildLinearPath
+      const innerA = { x: startPoint.x, y: startPoint.y }
+      const innerB = { x: endPoint.x, y: endPoint.y }
+
+      // Apply same directional offsets as buildLinearPath
+      switch (link.startDirection) {
+        case 'left':
+          innerA.x -= l
+          break
+        case 'right':
+          innerA.x += l
+          break
+        case 'up':
+          innerA.y -= l
+          break
+        case 'down':
+          innerA.y += l
+          break
+      }
+
+      switch (link.endDirection) {
+        case 'left':
+          innerB.x -= l
+          break
+        case 'right':
+          innerB.x += l
+          break
+        case 'up':
+          innerB.y -= l
+          break
+        case 'down':
+          innerB.y += l
+          break
+      }
+
+      link.centerPos = {
+        x: (innerA.x + innerB.x) * 0.5,
+        y: (innerA.y + innerB.y) * 0.5
+      }
+
+      if (context.style.centerMarkerShape === 'arrow') {
+        link.centerAngle = Math.atan2(innerB.y - innerA.y, innerB.x - innerA.x)
+      }
+    } else if (context.style.mode === 'straight') {
+      // For straight mode, match original STRAIGHT_LINK center calculation
+      const l = 10 // Same offset as buildStraightPath
+      const innerA = { x: startPoint.x, y: startPoint.y }
+      const innerB = { x: endPoint.x, y: endPoint.y }
+
+      // Apply same directional offsets as buildStraightPath
+      switch (link.startDirection) {
+        case 'left':
+          innerA.x -= l
+          break
+        case 'right':
+          innerA.x += l
+          break
+        case 'up':
+          innerA.y -= l
+          break
+        case 'down':
+          innerA.y += l
+          break
+      }
+
+      switch (link.endDirection) {
+        case 'left':
+          innerB.x -= l
+          break
+        case 'right':
+          innerB.x += l
+          break
+        case 'up':
+          innerB.y -= l
+          break
+        case 'down':
+          innerB.y += l
+          break
+      }
+
+      // Calculate center using midX and average of innerA/innerB y positions
+      const midX = (innerA.x + innerB.x) * 0.5
+      link.centerPos = {
+        x: midX,
+        y: (innerA.y + innerB.y) * 0.5
+      }
+
+      if (context.style.centerMarkerShape === 'arrow') {
+        const diff = innerB.y - innerA.y
+        if (Math.abs(diff) < 4) {
+          link.centerAngle = 0
+        } else if (diff > 0) {
+          link.centerAngle = Math.PI * 0.5
+        } else {
+          link.centerAngle = -(Math.PI * 0.5)
+        }
+      }
+    } else {
+      // Fallback to simple midpoint
+      link.centerPos = this.getLinkCenter(link)
+      if (context.style.centerMarkerShape === 'arrow') {
+        link.centerAngle = Math.atan2(
+          endPoint.y - startPoint.y,
+          endPoint.x - startPoint.x
+        )
+      }
+    }
+  }
+
+  /**
+   * Draw the center marker on a link (for menu interaction)
+   * Matches the original litegraph center marker rendering
+   */
+  private drawCenterMarker(
+    ctx: CanvasRenderingContext2D,
+    link: LinkRenderData,
+    context: RenderContext,
+    color: string
+  ): void {
+    if (!link.centerPos) return
+
+    ctx.beginPath()
+
+    if (
+      context.style.centerMarkerShape === 'arrow' &&
+      link.centerAngle !== undefined
+    ) {
+      const transform = ctx.getTransform()
+      ctx.translate(link.centerPos.x, link.centerPos.y)
+      ctx.rotate(link.centerAngle)
+      // The math is off, but it currently looks better in chromium (from original)
+      ctx.moveTo(-3.2, -5)
+      ctx.lineTo(7, 0)
+      ctx.lineTo(-3.2, 5)
+      ctx.setTransform(transform)
+    } else {
+      // Default to circle
+      ctx.arc(link.centerPos.x, link.centerPos.y, 5, 0, Math.PI * 2)
+    }
+
+    // Apply disabled pattern or color
+    if (link.disabled && context.patterns?.disabled) {
+      const { fillStyle, globalAlpha } = ctx
+      ctx.fillStyle = context.patterns.disabled
+      ctx.globalAlpha = 0.75
+      ctx.fill()
+      ctx.globalAlpha = globalAlpha
+      ctx.fillStyle = fillStyle
+    } else {
+      ctx.fillStyle = color
+      ctx.fill()
+    }
+  }
+}
diff --git a/src/renderer/core/layout/TransformPane.vue b/src/renderer/core/layout/TransformPane.vue
new file mode 100644
index 000000000..2f623257c
--- /dev/null
+++ b/src/renderer/core/layout/TransformPane.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="transform-pane"
+    :class="{ 'transform-pane--interacting': isInteracting }"
+    :style="transformStyle"
+    @pointerdown="handlePointerDown"
+  >
+    <!-- Vue nodes will be rendered here -->
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
+import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
+
+interface TransformPaneProps {
+  canvas?: LGraphCanvas
+}
+
+const props = defineProps<TransformPaneProps>()
+
+const {
+  camera,
+  transformStyle,
+  syncWithCanvas,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+} = useTransformState()
+
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
+  settleDelay: 200,
+  trackPan: true
+})
+
+provide('transformState', {
+  camera,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+})
+
+const handlePointerDown = (event: PointerEvent) => {
+  const target = event.target as HTMLElement
+  const nodeElement = target.closest('[data-node-id]')
+
+  if (nodeElement) {
+    // TODO: Emit event for node interaction
+    // Node interaction with nodeId will be handled in future implementation
+  }
+}
+
+const emit = defineEmits<{
+  rafStatusChange: [active: boolean]
+  transformUpdate: [time: number]
+}>()
+
+useCanvasTransformSync(props.canvas, syncWithCanvas, {
+  onStart: () => emit('rafStatusChange', true),
+  onUpdate: (duration) => emit('transformUpdate', duration),
+  onStop: () => emit('rafStatusChange', false)
+})
+</script>
+
+<style scoped>
+.transform-pane {
+  position: absolute;
+  inset: 0;
+  transform-origin: 0 0;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.transform-pane--interacting {
+  will-change: transform;
+}
+
+/* Allow pointer events on nodes */
+.transform-pane :deep([data-node-id]) {
+  pointer-events: auto;
+}
+</style>
diff --git a/src/renderer/core/layout/__tests__/TransformPane.spec.ts b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
new file mode 100644
index 000000000..f6fe7126c
--- /dev/null
+++ b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
@@ -0,0 +1,350 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import TransformPane from '../TransformPane.vue'
+
+// Mock the transform state composable
+const mockTransformState = {
+  camera: ref({ x: 0, y: 0, z: 1 }),
+  transformStyle: ref({
+    transform: 'scale(1) translate(0px, 0px)',
+    transformOrigin: '0 0'
+  }),
+  syncWithCanvas: vi.fn(),
+  canvasToScreen: vi.fn(),
+  screenToCanvas: vi.fn(),
+  isNodeInViewport: vi.fn()
+}
+
+vi.mock('@/renderer/core/spatial/useTransformState', () => ({
+  useTransformState: () => mockTransformState
+}))
+
+// Mock requestAnimationFrame/cancelAnimationFrame
+global.requestAnimationFrame = vi.fn((cb) => {
+  setTimeout(cb, 16)
+  return 1
+})
+global.cancelAnimationFrame = vi.fn()
+
+describe('TransformPane', () => {
+  let wrapper: ReturnType<typeof mount>
+  let mockCanvas: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Create mock canvas with LiteGraph interface
+    mockCanvas = {
+      canvas: {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+      },
+      ds: {
+        offset: [0, 0],
+        scale: 1
+      }
+    }
+
+    // Reset mock transform state
+    mockTransformState.camera.value = { x: 0, y: 0, z: 1 }
+    mockTransformState.transformStyle.value = {
+      transform: 'scale(1) translate(0px, 0px)',
+      transformOrigin: '0 0'
+    }
+  })
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('component mounting', () => {
+    it('should mount successfully with minimal props', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should apply transform style from composable', () => {
+      mockTransformState.transformStyle.value = {
+        transform: 'scale(2) translate(100px, 50px)',
+        transformOrigin: '0 0'
+      }
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+      const style = transformPane.attributes('style')
+      expect(style).toContain('transform: scale(2) translate(100px, 50px)')
+    })
+
+    it('should render slot content', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div class="test-content">Test Node</div>'
+        }
+      })
+
+      expect(wrapper.find('.test-content').exists()).toBe(true)
+      expect(wrapper.find('.test-content').text()).toBe('Test Node')
+    })
+  })
+
+  describe('RAF synchronization', () => {
+    it('should start RAF sync on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Should emit RAF status change to true
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      expect(wrapper.emitted('rafStatusChange')?.[0]).toEqual([true])
+    })
+
+    it('should call syncWithCanvas during RAF updates', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(mockTransformState.syncWithCanvas).toHaveBeenCalledWith(mockCanvas)
+    })
+
+    it('should emit transform update timing', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(wrapper.emitted('transformUpdate')).toBeTruthy()
+      const updateEvent = wrapper.emitted('transformUpdate')?.[0]
+      expect(typeof updateEvent?.[0]).toBe('number')
+      expect(updateEvent?.[0]).toBeGreaterThanOrEqual(0)
+    })
+
+    it('should stop RAF sync on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      const events = wrapper.emitted('rafStatusChange') as any[]
+      expect(events[events.length - 1]).toEqual([false])
+      expect(global.cancelAnimationFrame).toHaveBeenCalled()
+    })
+  })
+
+  describe('canvas event listeners', () => {
+    it('should add event listeners to canvas on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+
+    it('should remove event listeners on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+  })
+
+  describe('interaction state management', () => {
+    it('should apply interacting class during interactions', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // Simulate interaction start by checking internal state
+      // Note: This tests the CSS class application logic
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Initially should not have interacting class
+      expect(transformPane.classes()).not.toContain(
+        'transform-pane--interacting'
+      )
+    })
+
+    it('should handle pointer events for node delegation', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Simulate pointer down - we can't test the exact delegation logic
+      // in unit tests due to vue-test-utils limitations, but we can verify
+      // the event handler is set up correctly
+      await transformPane.trigger('pointerdown')
+
+      // The test passes if no errors are thrown during event handling
+      expect(transformPane.exists()).toBe(true)
+    })
+  })
+
+  describe('transform state integration', () => {
+    it('should provide transform utilities to child components', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // The component should provide transform state via Vue's provide/inject
+      // This is tested indirectly through the composable integration
+      expect(mockTransformState.syncWithCanvas).toBeDefined()
+      expect(mockTransformState.canvasToScreen).toBeDefined()
+      expect(mockTransformState.screenToCanvas).toBeDefined()
+    })
+  })
+
+  describe('error handling', () => {
+    it('should handle null canvas gracefully', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: undefined
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should handle missing canvas properties', () => {
+      const incompleteCanvas = {} as any
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: incompleteCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      // Should not throw errors during mount
+    })
+  })
+
+  describe('performance optimizations', () => {
+    it('should use contain CSS property for layout optimization', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // This test verifies the CSS contains the performance optimization
+      // Note: In JSDOM, computed styles might not reflect all CSS properties
+      expect(transformPane.element.className).toContain('transform-pane')
+    })
+
+    it('should disable pointer events on container but allow on children', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div data-node-id="test">Test Node</div>'
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // The CSS should handle pointer events optimization
+      // This is primarily a CSS concern, but we verify the structure
+      expect(transformPane.exists()).toBe(true)
+      expect(wrapper.find('[data-node-id="test"]').exists()).toBe(true)
+    })
+  })
+})
diff --git a/src/renderer/core/layout/constants.ts b/src/renderer/core/layout/constants.ts
new file mode 100644
index 000000000..cc1de914e
--- /dev/null
+++ b/src/renderer/core/layout/constants.ts
@@ -0,0 +1,50 @@
+/**
+ * Layout System Constants
+ *
+ * Centralized configuration values for the layout system.
+ * These values control spatial indexing, performance, and behavior.
+ */
+import { LayoutSource } from '@/renderer/core/layout/types'
+
+/**
+ * QuadTree configuration for spatial indexing
+ */
+export const QUADTREE_CONFIG = {
+  /** Default bounds for the QuadTree - covers a large canvas area */
+  DEFAULT_BOUNDS: {
+    x: -10000,
+    y: -10000,
+    width: 20000,
+    height: 20000
+  },
+  /** Maximum tree depth to prevent excessive subdivision */
+  MAX_DEPTH: 6,
+  /** Maximum items per node before subdivision */
+  MAX_ITEMS_PER_NODE: 4
+} as const
+
+/**
+ * Performance and optimization settings
+ */
+export const PERFORMANCE_CONFIG = {
+  /** RAF-based change detection interval (roughly 60fps) */
+  CHANGE_DETECTION_INTERVAL: 16,
+  /** Spatial query cache TTL in milliseconds */
+  SPATIAL_CACHE_TTL: 1000,
+  /** Maximum cache size for spatial queries */
+  SPATIAL_CACHE_MAX_SIZE: 100,
+  /** Batch update delay in milliseconds */
+  BATCH_UPDATE_DELAY: 4
+} as const
+
+/**
+ * Actor and source identifiers
+ */
+export const ACTOR_CONFIG = {
+  /** Prefix for auto-generated actor IDs */
+  USER_PREFIX: 'user-',
+  /** Length of random suffix for actor IDs */
+  ID_LENGTH: 9,
+  /** Default source when not specified */
+  DEFAULT_SOURCE: LayoutSource.External
+} as const
diff --git a/src/renderer/core/layout/operations/layoutMutations.ts b/src/renderer/core/layout/operations/layoutMutations.ts
new file mode 100644
index 000000000..0c656899d
--- /dev/null
+++ b/src/renderer/core/layout/operations/layoutMutations.ts
@@ -0,0 +1,340 @@
+/**
+ * Layout Mutations - Simplified Direct Operations
+ *
+ * Provides a clean API for layout operations that are CRDT-ready.
+ * Operations are synchronous and applied directly to the store.
+ */
+import log from 'loglevel'
+
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import {
+  LayoutSource,
+  type LinkId,
+  type NodeLayout,
+  type Point,
+  type RerouteId,
+  type Size
+} from '@/renderer/core/layout/types'
+
+const logger = log.getLogger('LayoutMutations')
+
+interface LayoutMutations {
+  // Single node operations (synchronous, CRDT-ready)
+  moveNode(nodeId: NodeId, position: Point): void
+  resizeNode(nodeId: NodeId, size: Size): void
+  setNodeZIndex(nodeId: NodeId, zIndex: number): void
+
+  // Node lifecycle operations
+  createNode(nodeId: NodeId, layout: Partial<NodeLayout>): void
+  deleteNode(nodeId: NodeId): void
+
+  // Link operations
+  createLink(
+    linkId: LinkId,
+    sourceNodeId: NodeId,
+    sourceSlot: number,
+    targetNodeId: NodeId,
+    targetSlot: number
+  ): void
+  deleteLink(linkId: LinkId): void
+
+  // Reroute operations
+  createReroute(
+    rerouteId: RerouteId,
+    position: Point,
+    parentId?: LinkId,
+    linkIds?: LinkId[]
+  ): void
+  deleteReroute(rerouteId: RerouteId): void
+  moveReroute(
+    rerouteId: RerouteId,
+    position: Point,
+    previousPosition: Point
+  ): void
+
+  // Stacking operations
+  bringNodeToFront(nodeId: NodeId): void
+
+  // Source tracking
+  setSource(source: LayoutSource): void
+  setActor(actor: string): void
+}
+
+/**
+ * Composable for accessing layout mutations with clean destructuring API
+ */
+export function useLayoutMutations(): LayoutMutations {
+  /**
+   * Set the current mutation source
+   */
+  const setSource = (source: LayoutSource): void => {
+    layoutStore.setSource(source)
+  }
+
+  /**
+   * Set the current actor (for CRDT)
+   */
+  const setActor = (actor: string): void => {
+    layoutStore.setActor(actor)
+  }
+
+  /**
+   * Move a node to a new position
+   */
+  const moveNode = (nodeId: NodeId, position: Point): void => {
+    const normalizedNodeId = String(nodeId)
+    const existing = layoutStore.getNodeLayoutRef(normalizedNodeId).value
+    if (!existing) return
+
+    layoutStore.applyOperation({
+      type: 'moveNode',
+      entity: 'node',
+      nodeId: normalizedNodeId,
+      position,
+      previousPosition: existing.position,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Resize a node
+   */
+  const resizeNode = (nodeId: NodeId, size: Size): void => {
+    const normalizedNodeId = String(nodeId)
+    const existing = layoutStore.getNodeLayoutRef(normalizedNodeId).value
+    if (!existing) return
+
+    layoutStore.applyOperation({
+      type: 'resizeNode',
+      entity: 'node',
+      nodeId: normalizedNodeId,
+      size,
+      previousSize: existing.size,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Set node z-index
+   */
+  const setNodeZIndex = (nodeId: NodeId, zIndex: number): void => {
+    const normalizedNodeId = String(nodeId)
+    const existing = layoutStore.getNodeLayoutRef(normalizedNodeId).value
+    if (!existing) return
+
+    layoutStore.applyOperation({
+      type: 'setNodeZIndex',
+      entity: 'node',
+      nodeId: normalizedNodeId,
+      zIndex,
+      previousZIndex: existing.zIndex,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Create a new node
+   */
+  const createNode = (nodeId: NodeId, layout: Partial<NodeLayout>): void => {
+    const normalizedNodeId = String(nodeId)
+    const fullLayout: NodeLayout = {
+      id: normalizedNodeId,
+      position: layout.position ?? { x: 0, y: 0 },
+      size: layout.size ?? { width: 200, height: 100 },
+      zIndex: layout.zIndex ?? 0,
+      visible: layout.visible ?? true,
+      bounds: {
+        x: layout.position?.x ?? 0,
+        y: layout.position?.y ?? 0,
+        width: layout.size?.width ?? 200,
+        height: layout.size?.height ?? 100
+      }
+    }
+
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId: normalizedNodeId,
+      layout: fullLayout,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Delete a node
+   */
+  const deleteNode = (nodeId: NodeId): void => {
+    const normalizedNodeId = String(nodeId)
+    const existing = layoutStore.getNodeLayoutRef(normalizedNodeId).value
+    if (!existing) return
+
+    layoutStore.applyOperation({
+      type: 'deleteNode',
+      entity: 'node',
+      nodeId: normalizedNodeId,
+      previousLayout: existing,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Bring a node to the front (highest z-index)
+   */
+  const bringNodeToFront = (nodeId: NodeId): void => {
+    // Get all nodes to find the highest z-index
+    const allNodes = layoutStore.getAllNodes().value
+    let maxZIndex = 0
+
+    for (const [, layout] of allNodes) {
+      if (layout.zIndex > maxZIndex) {
+        maxZIndex = layout.zIndex
+      }
+    }
+
+    // Set this node's z-index to be one higher than the current max
+    setNodeZIndex(nodeId, maxZIndex + 1)
+  }
+
+  /**
+   * Create a new link
+   */
+  const createLink = (
+    linkId: LinkId,
+    sourceNodeId: NodeId,
+    sourceSlot: number,
+    targetNodeId: NodeId,
+    targetSlot: number
+  ): void => {
+    // Normalize node IDs to strings for layout store consistency
+    const normalizedSourceNodeId = String(sourceNodeId)
+    const normalizedTargetNodeId = String(targetNodeId)
+
+    logger.debug('Creating link:', {
+      linkId,
+      from: `${normalizedSourceNodeId}[${sourceSlot}]`,
+      to: `${normalizedTargetNodeId}[${targetSlot}]`
+    })
+    layoutStore.applyOperation({
+      type: 'createLink',
+      entity: 'link',
+      linkId,
+      sourceNodeId: normalizedSourceNodeId,
+      sourceSlot,
+      targetNodeId: normalizedTargetNodeId,
+      targetSlot,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Delete a link
+   */
+  const deleteLink = (linkId: LinkId): void => {
+    logger.debug('Deleting link:', linkId)
+    layoutStore.applyOperation({
+      type: 'deleteLink',
+      entity: 'link',
+      linkId,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Create a new reroute
+   */
+  const createReroute = (
+    rerouteId: RerouteId,
+    position: Point,
+    parentId?: LinkId,
+    linkIds: LinkId[] = []
+  ): void => {
+    logger.debug('Creating reroute:', {
+      rerouteId,
+      position,
+      parentId,
+      linkCount: linkIds.length
+    })
+    layoutStore.applyOperation({
+      type: 'createReroute',
+      entity: 'reroute',
+      rerouteId,
+      position,
+      parentId,
+      linkIds,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Delete a reroute
+   */
+  const deleteReroute = (rerouteId: RerouteId): void => {
+    logger.debug('Deleting reroute:', rerouteId)
+    layoutStore.applyOperation({
+      type: 'deleteReroute',
+      entity: 'reroute',
+      rerouteId,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  /**
+   * Move a reroute
+   */
+  const moveReroute = (
+    rerouteId: RerouteId,
+    position: Point,
+    previousPosition: Point
+  ): void => {
+    logger.debug('Moving reroute:', {
+      rerouteId,
+      from: previousPosition,
+      to: position
+    })
+    layoutStore.applyOperation({
+      type: 'moveReroute',
+      entity: 'reroute',
+      rerouteId,
+      position,
+      previousPosition,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+  }
+
+  return {
+    setSource,
+    setActor,
+    moveNode,
+    resizeNode,
+    setNodeZIndex,
+    createNode,
+    deleteNode,
+    bringNodeToFront,
+    createLink,
+    deleteLink,
+    createReroute,
+    deleteReroute,
+    moveReroute
+  }
+}
diff --git a/src/renderer/core/layout/slots/register.ts b/src/renderer/core/layout/slots/register.ts
new file mode 100644
index 000000000..afe7242ee
--- /dev/null
+++ b/src/renderer/core/layout/slots/register.ts
@@ -0,0 +1,75 @@
+/**
+ * Slot Registration
+ *
+ * Handles registration of slot layouts with the layout store for hit testing.
+ * This module manages the state mutation side of slot layout management,
+ * while pure calculations are handled separately in SlotCalculations.ts.
+ */
+import type { Point } from '@/lib/litegraph/src/interfaces'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  type SlotPositionContext,
+  calculateInputSlotPos,
+  calculateOutputSlotPos
+} from '@/renderer/core/canvas/litegraph/slotCalculations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { SlotLayout } from '@/renderer/core/layout/types'
+
+import { getSlotKey } from './slotIdentifier'
+
+/**
+ * Register slot layout with the layout store for hit testing
+ * @param nodeId The node ID
+ * @param slotIndex The slot index
+ * @param isInput Whether this is an input slot
+ * @param position The slot position in graph coordinates
+ */
+function registerSlotLayout(
+  nodeId: string,
+  slotIndex: number,
+  isInput: boolean,
+  position: Point
+): void {
+  const slotKey = getSlotKey(nodeId, slotIndex, isInput)
+
+  // Calculate bounds for the slot using LiteGraph's standard slot height
+  const slotSize = LiteGraph.NODE_SLOT_HEIGHT
+  const halfSize = slotSize / 2
+
+  const slotLayout: SlotLayout = {
+    nodeId,
+    index: slotIndex,
+    type: isInput ? 'input' : 'output',
+    position: { x: position[0], y: position[1] },
+    bounds: {
+      x: position[0] - halfSize,
+      y: position[1] - halfSize,
+      width: slotSize,
+      height: slotSize
+    }
+  }
+
+  layoutStore.updateSlotLayout(slotKey, slotLayout)
+}
+
+/**
+ * Register all slots for a node
+ * @param nodeId The node ID
+ * @param context The slot position context
+ */
+export function registerNodeSlots(
+  nodeId: string,
+  context: SlotPositionContext
+): void {
+  // Register input slots
+  context.inputs.forEach((_, index) => {
+    const position = calculateInputSlotPos(context, index)
+    registerSlotLayout(nodeId, index, true, position)
+  })
+
+  // Register output slots
+  context.outputs.forEach((_, index) => {
+    const position = calculateOutputSlotPos(context, index)
+    registerSlotLayout(nodeId, index, false, position)
+  })
+}
diff --git a/src/renderer/core/layout/slots/slotIdentifier.ts b/src/renderer/core/layout/slots/slotIdentifier.ts
new file mode 100644
index 000000000..2600405e9
--- /dev/null
+++ b/src/renderer/core/layout/slots/slotIdentifier.ts
@@ -0,0 +1,40 @@
+/**
+ * Slot identifier utilities for consistent slot key generation and parsing
+ *
+ * Provides a centralized interface for slot identification across the layout system
+ *
+ * @TODO Replace this concatenated string with root cause fix
+ */
+
+interface SlotIdentifier {
+  nodeId: string
+  index: number
+  isInput: boolean
+}
+
+/**
+ * Generate a unique key for a slot
+ * Format: "{nodeId}-{in|out}-{index}"
+ */
+export function getSlotKey(identifier: SlotIdentifier): string
+export function getSlotKey(
+  nodeId: string,
+  index: number,
+  isInput: boolean
+): string
+export function getSlotKey(
+  nodeIdOrIdentifier: string | SlotIdentifier,
+  index?: number,
+  isInput?: boolean
+): string {
+  if (typeof nodeIdOrIdentifier === 'object') {
+    const { nodeId, index, isInput } = nodeIdOrIdentifier
+    return `${nodeId}-${isInput ? 'in' : 'out'}-${index}`
+  }
+
+  if (index === undefined || isInput === undefined) {
+    throw new Error('Missing required parameters for slot key generation')
+  }
+
+  return `${nodeIdOrIdentifier}-${isInput ? 'in' : 'out'}-${index}`
+}
diff --git a/src/renderer/core/layout/slots/useDomSlotRegistration.ts b/src/renderer/core/layout/slots/useDomSlotRegistration.ts
new file mode 100644
index 000000000..94a1f09e5
--- /dev/null
+++ b/src/renderer/core/layout/slots/useDomSlotRegistration.ts
@@ -0,0 +1,229 @@
+/**
+ * DOM-based slot registration with performance optimization
+ *
+ * Measures the actual DOM position of a Vue slot connector and registers it
+ * into the LayoutStore so hit-testing and link rendering use the true position.
+ *
+ * Performance strategy:
+ * - Cache slot offset relative to node (avoids DOM reads during drag)
+ * - No measurements during pan/zoom (camera transforms don't change canvas coords)
+ * - Batch DOM reads via requestAnimationFrame
+ * - Only remeasure on structural changes (resize, collapse, LOD)
+ */
+import {
+  type Ref,
+  type WatchStopHandle,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch
+} from 'vue'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { Point as LayoutPoint } from '@/renderer/core/layout/types'
+
+import { getSlotKey } from './slotIdentifier'
+
+export type TransformState = {
+  screenToCanvas: (p: LayoutPoint) => LayoutPoint
+}
+
+// Shared RAF queue for batching measurements
+const measureQueue = new Set<() => void>()
+let rafId: number | null = null
+// Track mounted components to prevent execution on unmounted ones
+const mountedComponents = new WeakSet<object>()
+
+function scheduleMeasurement(fn: () => void) {
+  measureQueue.add(fn)
+  if (rafId === null) {
+    rafId = requestAnimationFrame(() => {
+      rafId = null
+      const batch = Array.from(measureQueue)
+      measureQueue.clear()
+      batch.forEach((measure) => measure())
+    })
+  }
+}
+
+const cleanupFunctions = new WeakMap<
+  Ref<HTMLElement | null>,
+  {
+    stopWatcher?: WatchStopHandle
+    handleResize?: () => void
+  }
+>()
+
+interface SlotRegistrationOptions {
+  nodeId: string
+  slotIndex: number
+  isInput: boolean
+  element: Ref<HTMLElement | null>
+  transform?: TransformState
+}
+
+export function useDomSlotRegistration(options: SlotRegistrationOptions) {
+  const { nodeId, slotIndex, isInput, element: elRef, transform } = options
+
+  // Early return if no nodeId
+  if (!nodeId || nodeId === '') {
+    return {
+      remeasure: () => {}
+    }
+  }
+  const slotKey = getSlotKey(nodeId, slotIndex, isInput)
+  // Track if this component is mounted
+  const componentToken = {}
+
+  // Cached offset from node position (avoids DOM reads during drag)
+  const cachedOffset = ref<LayoutPoint | null>(null)
+  const lastMeasuredBounds = ref<DOMRect | null>(null)
+
+  // Measure DOM and cache offset (expensive, minimize calls)
+  const measureAndCacheOffset = () => {
+    // Skip if component was unmounted
+    if (!mountedComponents.has(componentToken)) return
+
+    const el = elRef.value
+    if (!el || !transform?.screenToCanvas) return
+
+    const rect = el.getBoundingClientRect()
+
+    // Skip if bounds haven't changed significantly (within 0.5px)
+    if (lastMeasuredBounds.value) {
+      const prev = lastMeasuredBounds.value
+      if (
+        Math.abs(rect.left - prev.left) < 0.5 &&
+        Math.abs(rect.top - prev.top) < 0.5 &&
+        Math.abs(rect.width - prev.width) < 0.5 &&
+        Math.abs(rect.height - prev.height) < 0.5
+      ) {
+        return // No significant change - skip update
+      }
+    }
+
+    lastMeasuredBounds.value = rect
+
+    // Center of the visual connector (dot) in screen coords
+    const centerScreen = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2
+    }
+    const centerCanvas = transform.screenToCanvas(centerScreen)
+
+    // Cache offset from node position for fast updates during drag
+    const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
+    if (nodeLayout) {
+      cachedOffset.value = {
+        x: centerCanvas.x - nodeLayout.position.x,
+        y: centerCanvas.y - nodeLayout.position.y
+      }
+    }
+
+    updateSlotPosition(centerCanvas)
+  }
+
+  // Fast update using cached offset (no DOM read)
+  const updateFromCachedOffset = () => {
+    if (!cachedOffset.value) {
+      // No cached offset yet, need to measure
+      scheduleMeasurement(measureAndCacheOffset)
+      return
+    }
+
+    const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
+    if (!nodeLayout) {
+      return
+    }
+
+    // Calculate absolute position from node position + cached offset
+    const centerCanvas = {
+      x: nodeLayout.position.x + cachedOffset.value.x,
+      y: nodeLayout.position.y + cachedOffset.value.y
+    }
+
+    updateSlotPosition(centerCanvas)
+  }
+
+  // Update slot position in layout store
+  const updateSlotPosition = (centerCanvas: LayoutPoint) => {
+    const size = LiteGraph.NODE_SLOT_HEIGHT
+    const half = size / 2
+
+    layoutStore.updateSlotLayout(slotKey, {
+      nodeId,
+      index: slotIndex,
+      type: isInput ? 'input' : 'output',
+      position: { x: centerCanvas.x, y: centerCanvas.y },
+      bounds: {
+        x: centerCanvas.x - half,
+        y: centerCanvas.y - half,
+        width: size,
+        height: size
+      }
+    })
+  }
+
+  onMounted(async () => {
+    // Mark component as mounted
+    mountedComponents.add(componentToken)
+
+    // Initial measure after mount
+    await nextTick()
+    measureAndCacheOffset()
+
+    // Subscribe to node position changes for fast cached updates
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+
+    const stopWatcher = watch(
+      nodeRef,
+      (newLayout) => {
+        if (newLayout) {
+          // Node moved/resized - update using cached offset
+          updateFromCachedOffset()
+        }
+      },
+      { immediate: false }
+    )
+
+    // Store cleanup functions without type assertions
+    const cleanup = cleanupFunctions.get(elRef) || {}
+    cleanup.stopWatcher = stopWatcher
+
+    // Window resize - remeasure as viewport changed
+    const handleResize = () => {
+      scheduleMeasurement(measureAndCacheOffset)
+    }
+    window.addEventListener('resize', handleResize, { passive: true })
+    cleanup.handleResize = handleResize
+    cleanupFunctions.set(elRef, cleanup)
+  })
+
+  onUnmounted(() => {
+    // Mark component as unmounted
+    mountedComponents.delete(componentToken)
+
+    // Clean up watchers and listeners
+    const cleanup = cleanupFunctions.get(elRef)
+    if (cleanup) {
+      if (cleanup.stopWatcher) cleanup.stopWatcher()
+      if (cleanup.handleResize) {
+        window.removeEventListener('resize', cleanup.handleResize)
+      }
+      cleanupFunctions.delete(elRef)
+    }
+
+    // Remove from layout store
+    layoutStore.deleteSlotLayout(slotKey)
+
+    // Remove from measurement queue if pending
+    measureQueue.delete(measureAndCacheOffset)
+  })
+
+  return {
+    // Expose for forced remeasure on structural changes
+    remeasure: () => scheduleMeasurement(measureAndCacheOffset)
+  }
+}
diff --git a/src/renderer/core/layout/store/layoutStore.ts b/src/renderer/core/layout/store/layoutStore.ts
new file mode 100644
index 000000000..ca5d67120
--- /dev/null
+++ b/src/renderer/core/layout/store/layoutStore.ts
@@ -0,0 +1,1457 @@
+/**
+ * Layout Store - Single Source of Truth
+ *
+ * Uses Yjs for efficient local state management and future collaboration.
+ * CRDT ensures conflict-free operations for both single and multi-user scenarios.
+ */
+import log from 'loglevel'
+import { type ComputedRef, type Ref, computed, customRef } from 'vue'
+import * as Y from 'yjs'
+
+import { ACTOR_CONFIG } from '@/renderer/core/layout/constants'
+import type {
+  CreateLinkOperation,
+  CreateNodeOperation,
+  CreateRerouteOperation,
+  DeleteLinkOperation,
+  DeleteNodeOperation,
+  DeleteRerouteOperation,
+  LayoutOperation,
+  MoveNodeOperation,
+  MoveRerouteOperation,
+  NodeBoundsUpdate,
+  ResizeNodeOperation,
+  SetNodeZIndexOperation
+} from '@/renderer/core/layout/types'
+import {
+  type Bounds,
+  type LayoutChange,
+  LayoutSource,
+  type LayoutStore,
+  type LinkId,
+  type LinkLayout,
+  type LinkSegmentLayout,
+  type NodeId,
+  type NodeLayout,
+  type Point,
+  type RerouteId,
+  type RerouteLayout,
+  type Size,
+  type SlotLayout
+} from '@/renderer/core/layout/types'
+import { SpatialIndexManager } from '@/renderer/core/spatial/SpatialIndex'
+
+type YEventChange = {
+  action: 'add' | 'update' | 'delete'
+  oldValue: unknown
+}
+
+const logger = log.getLogger('LayoutStore')
+
+// Constants
+const REROUTE_RADIUS = 8
+
+// Utility functions
+function asRerouteId(id: string | number): RerouteId {
+  return Number(id)
+}
+
+function asLinkId(id: string | number): LinkId {
+  return Number(id)
+}
+
+interface NodeLayoutData {
+  id: NodeId
+  position: Point
+  size: Size
+  zIndex: number
+  visible: boolean
+  bounds: Bounds
+}
+
+interface LinkData {
+  id: LinkId
+  sourceNodeId: NodeId
+  targetNodeId: NodeId
+  sourceSlot: number
+  targetSlot: number
+}
+
+interface RerouteData {
+  id: RerouteId
+  position: Point
+  parentId: LinkId
+  linkIds: LinkId[]
+}
+
+// Generic typed Y.Map interface
+interface TypedYMap<T> {
+  get<K extends keyof T>(key: K): T[K] | undefined
+  get<K extends keyof T>(key: K, defaultValue: T[K]): T[K]
+}
+
+class LayoutStoreImpl implements LayoutStore {
+  private static readonly NODE_DEFAULTS: NodeLayoutData = {
+    id: 'unknown-node',
+    position: { x: 0, y: 0 },
+    size: { width: 100, height: 50 },
+    zIndex: 0,
+    visible: true,
+    bounds: { x: 0, y: 0, width: 100, height: 50 }
+  }
+
+  private static readonly REROUTE_DEFAULTS: RerouteData = {
+    id: 0,
+    position: { x: 0, y: 0 },
+    parentId: 0,
+    linkIds: []
+  }
+
+  // Yjs document and shared data structures
+  private ydoc = new Y.Doc()
+  private ynodes: Y.Map<Y.Map<unknown>> // Maps nodeId -> Y.Map containing NodeLayout data
+  private ylinks: Y.Map<Y.Map<unknown>> // Maps linkId -> Y.Map containing link data
+  private yreroutes: Y.Map<Y.Map<unknown>> // Maps rerouteId -> Y.Map containing reroute data
+  private yoperations: Y.Array<LayoutOperation> // Operation log
+
+  // Vue reactivity layer
+  private version = 0
+  private currentSource: LayoutSource =
+    ACTOR_CONFIG.DEFAULT_SOURCE as LayoutSource
+  private currentActor = `${ACTOR_CONFIG.USER_PREFIX}${Math.random()
+    .toString(36)
+    .substring(2, 2 + ACTOR_CONFIG.ID_LENGTH)}`
+
+  // Change listeners
+  private changeListeners = new Set<(change: LayoutChange) => void>()
+
+  // CustomRef cache and trigger functions
+  private nodeRefs = new Map<NodeId, Ref<NodeLayout | null>>()
+  private nodeTriggers = new Map<NodeId, () => void>()
+
+  // New data structures for hit testing
+  private linkLayouts = new Map<LinkId, LinkLayout>()
+  private linkSegmentLayouts = new Map<string, LinkSegmentLayout>() // Internal string key: ${linkId}:${rerouteId ?? 'final'}
+  private slotLayouts = new Map<string, SlotLayout>()
+  private rerouteLayouts = new Map<RerouteId, RerouteLayout>()
+
+  // Spatial index managers
+  private spatialIndex: SpatialIndexManager // For nodes
+  private linkSegmentSpatialIndex: SpatialIndexManager // For link segments (single index for all link geometry)
+  private slotSpatialIndex: SpatialIndexManager // For slots
+  private rerouteSpatialIndex: SpatialIndexManager // For reroutes
+
+  constructor() {
+    // Initialize Yjs data structures
+    this.ynodes = this.ydoc.getMap('nodes')
+    this.ylinks = this.ydoc.getMap('links')
+    this.yreroutes = this.ydoc.getMap('reroutes')
+    this.yoperations = this.ydoc.getArray('operations')
+
+    // Initialize spatial index managers
+    this.spatialIndex = new SpatialIndexManager()
+    this.linkSegmentSpatialIndex = new SpatialIndexManager() // Single index for all link geometry
+    this.slotSpatialIndex = new SpatialIndexManager()
+    this.rerouteSpatialIndex = new SpatialIndexManager()
+
+    // Listen for Yjs changes and trigger Vue reactivity
+    this.ynodes.observe((event: Y.YMapEvent<Y.Map<unknown>>) => {
+      this.version++
+
+      // Trigger all affected node refs
+      event.changes.keys.forEach((_change: YEventChange, key: string) => {
+        const trigger = this.nodeTriggers.get(key)
+        if (trigger) {
+          trigger()
+        }
+      })
+    })
+
+    // Listen for link changes and update spatial indexes
+    this.ylinks.observe((event: Y.YMapEvent<Y.Map<unknown>>) => {
+      this.version++
+      event.changes.keys.forEach((change, linkIdStr) => {
+        this.handleLinkChange(change, linkIdStr)
+      })
+    })
+
+    // Listen for reroute changes and update spatial indexes
+    this.yreroutes.observe((event: Y.YMapEvent<Y.Map<unknown>>) => {
+      this.version++
+      event.changes.keys.forEach((change, rerouteIdStr) => {
+        this.handleRerouteChange(change, rerouteIdStr)
+      })
+    })
+  }
+
+  private getNodeField<K extends keyof NodeLayoutData>(
+    ynode: Y.Map<unknown>,
+    field: K,
+    defaultValue: NodeLayoutData[K] = LayoutStoreImpl.NODE_DEFAULTS[field]
+  ): NodeLayoutData[K] {
+    const typedNode = ynode as TypedYMap<NodeLayoutData>
+    const value = typedNode.get(field)
+    return value ?? defaultValue
+  }
+
+  private getLinkField<K extends keyof LinkData>(
+    ylink: Y.Map<unknown>,
+    field: K
+  ): LinkData[K] | undefined {
+    const typedLink = ylink as TypedYMap<LinkData>
+    return typedLink.get(field)
+  }
+
+  private getRerouteField<K extends keyof RerouteData>(
+    yreroute: Y.Map<unknown>,
+    field: K,
+    defaultValue: RerouteData[K] = LayoutStoreImpl.REROUTE_DEFAULTS[field]
+  ): RerouteData[K] {
+    const typedReroute = yreroute as TypedYMap<RerouteData>
+    const value = typedReroute.get(field)
+    return value ?? defaultValue
+  }
+
+  /**
+   * Get or create a customRef for a node layout
+   */
+  getNodeLayoutRef(nodeId: NodeId): Ref<NodeLayout | null> {
+    let nodeRef = this.nodeRefs.get(nodeId)
+
+    if (!nodeRef) {
+      nodeRef = customRef<NodeLayout | null>((track, trigger) => {
+        // Store the trigger so we can call it when Yjs changes
+        this.nodeTriggers.set(nodeId, trigger)
+
+        return {
+          get: () => {
+            track()
+            const ynode = this.ynodes.get(nodeId)
+            const layout = ynode ? this.yNodeToLayout(ynode) : null
+            return layout
+          },
+          set: (newLayout: NodeLayout | null) => {
+            if (newLayout === null) {
+              // Delete operation
+              const existing = this.ynodes.get(nodeId)
+              if (existing) {
+                this.applyOperation({
+                  type: 'deleteNode',
+                  entity: 'node',
+                  nodeId,
+                  timestamp: Date.now(),
+                  source: this.currentSource,
+                  actor: this.currentActor,
+                  previousLayout: this.yNodeToLayout(existing)
+                })
+              }
+            } else {
+              // Update operation - detect what changed
+              const existing = this.ynodes.get(nodeId)
+              if (!existing) {
+                // Create operation
+                this.applyOperation({
+                  type: 'createNode',
+                  entity: 'node',
+                  nodeId,
+                  layout: newLayout,
+                  timestamp: Date.now(),
+                  source: this.currentSource,
+                  actor: this.currentActor
+                })
+              } else {
+                const existingLayout = this.yNodeToLayout(existing)
+
+                // Check what properties changed
+                if (
+                  existingLayout.position.x !== newLayout.position.x ||
+                  existingLayout.position.y !== newLayout.position.y
+                ) {
+                  this.applyOperation({
+                    type: 'moveNode',
+                    entity: 'node',
+                    nodeId,
+                    position: newLayout.position,
+                    previousPosition: existingLayout.position,
+                    timestamp: Date.now(),
+                    source: this.currentSource,
+                    actor: this.currentActor
+                  })
+                }
+                if (
+                  existingLayout.size.width !== newLayout.size.width ||
+                  existingLayout.size.height !== newLayout.size.height
+                ) {
+                  this.applyOperation({
+                    type: 'resizeNode',
+                    entity: 'node',
+                    nodeId,
+                    size: newLayout.size,
+                    previousSize: existingLayout.size,
+                    timestamp: Date.now(),
+                    source: this.currentSource,
+                    actor: this.currentActor
+                  })
+                }
+                if (existingLayout.zIndex !== newLayout.zIndex) {
+                  this.applyOperation({
+                    type: 'setNodeZIndex',
+                    entity: 'node',
+                    nodeId,
+                    zIndex: newLayout.zIndex,
+                    previousZIndex: existingLayout.zIndex,
+                    timestamp: Date.now(),
+                    source: this.currentSource,
+                    actor: this.currentActor
+                  })
+                }
+              }
+            }
+            trigger()
+          }
+        }
+      })
+
+      this.nodeRefs.set(nodeId, nodeRef)
+    }
+
+    return nodeRef
+  }
+
+  /**
+   * Get nodes within bounds (reactive)
+   */
+  getNodesInBounds(bounds: Bounds): ComputedRef<NodeId[]> {
+    return computed(() => {
+      // Touch version for reactivity
+      void this.version
+
+      const result: NodeId[] = []
+      for (const [nodeId] of this.ynodes) {
+        const ynode = this.ynodes.get(nodeId)
+        if (ynode) {
+          const layout = this.yNodeToLayout(ynode)
+          if (layout && this.boundsIntersect(layout.bounds, bounds)) {
+            result.push(nodeId)
+          }
+        }
+      }
+      return result
+    })
+  }
+
+  /**
+   * Get all nodes as a reactive map
+   */
+  getAllNodes(): ComputedRef<ReadonlyMap<NodeId, NodeLayout>> {
+    return computed(() => {
+      // Touch version for reactivity
+      void this.version
+
+      const result = new Map<NodeId, NodeLayout>()
+      for (const [nodeId] of this.ynodes) {
+        const ynode = this.ynodes.get(nodeId)
+        if (ynode) {
+          const layout = this.yNodeToLayout(ynode)
+          if (layout) {
+            result.set(nodeId, layout)
+          }
+        }
+      }
+      return result
+    })
+  }
+
+  /**
+   * Get current version for change detection
+   */
+  getVersion(): ComputedRef<number> {
+    return computed(() => this.version)
+  }
+
+  /**
+   * Query node at point (non-reactive for performance)
+   */
+  queryNodeAtPoint(point: Point): NodeId | null {
+    const nodes: Array<[NodeId, NodeLayout]> = []
+
+    for (const [nodeId] of this.ynodes) {
+      const ynode = this.ynodes.get(nodeId)
+      if (ynode) {
+        const layout = this.yNodeToLayout(ynode)
+        if (layout) {
+          nodes.push([nodeId, layout])
+        }
+      }
+    }
+
+    // Sort by zIndex (top to bottom)
+    nodes.sort(([, a], [, b]) => b.zIndex - a.zIndex)
+
+    for (const [nodeId, layout] of nodes) {
+      if (this.pointInBounds(point, layout.bounds)) {
+        return nodeId
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Query nodes in bounds (non-reactive for performance)
+   */
+  queryNodesInBounds(bounds: Bounds): NodeId[] {
+    return this.spatialIndex.query(bounds)
+  }
+
+  /**
+   * Update link layout data (for geometry/debug, no separate spatial index)
+   */
+  updateLinkLayout(linkId: LinkId, layout: LinkLayout): void {
+    const existing = this.linkLayouts.get(linkId)
+
+    // Short-circuit if bounds and centerPos unchanged
+    if (
+      existing &&
+      existing.bounds.x === layout.bounds.x &&
+      existing.bounds.y === layout.bounds.y &&
+      existing.bounds.width === layout.bounds.width &&
+      existing.bounds.height === layout.bounds.height &&
+      existing.centerPos.x === layout.centerPos.x &&
+      existing.centerPos.y === layout.centerPos.y
+    ) {
+      // Only update path if provided (for hit detection)
+      if (layout.path) {
+        existing.path = layout.path
+      }
+      return
+    }
+
+    this.linkLayouts.set(linkId, layout)
+  }
+
+  /**
+   * Delete link layout data
+   */
+  deleteLinkLayout(linkId: LinkId): void {
+    const deleted = this.linkLayouts.delete(linkId)
+    if (deleted) {
+      // Clean up any segment layouts for this link
+      const keysToDelete: string[] = []
+      for (const [key] of this.linkSegmentLayouts) {
+        if (key.startsWith(`${linkId}:`)) {
+          keysToDelete.push(key)
+        }
+      }
+      for (const key of keysToDelete) {
+        this.linkSegmentLayouts.delete(key)
+        this.linkSegmentSpatialIndex.remove(key)
+      }
+    }
+  }
+
+  /**
+   * Update slot layout data
+   */
+  updateSlotLayout(key: string, layout: SlotLayout): void {
+    const existing = this.slotLayouts.get(key)
+
+    if (existing) {
+      // Update spatial index
+      this.slotSpatialIndex.update(key, layout.bounds)
+    } else {
+      // Insert into spatial index
+      this.slotSpatialIndex.insert(key, layout.bounds)
+    }
+
+    this.slotLayouts.set(key, layout)
+  }
+
+  /**
+   * Delete slot layout data
+   */
+  deleteSlotLayout(key: string): void {
+    const deleted = this.slotLayouts.delete(key)
+    if (deleted) {
+      // Remove from spatial index
+      this.slotSpatialIndex.remove(key)
+    }
+  }
+
+  /**
+   * Delete all slot layouts for a node
+   */
+  deleteNodeSlotLayouts(nodeId: NodeId): void {
+    const keysToDelete: string[] = []
+    for (const [key, layout] of this.slotLayouts) {
+      if (layout.nodeId === nodeId) {
+        keysToDelete.push(key)
+      }
+    }
+    for (const key of keysToDelete) {
+      this.slotLayouts.delete(key)
+      // Remove from spatial index
+      this.slotSpatialIndex.remove(key)
+    }
+  }
+
+  /**
+   * Clear all slot layouts and their spatial index (O(1) operations)
+   * Used when switching rendering modes (Vue ↔ LiteGraph)
+   */
+  clearAllSlotLayouts(): void {
+    this.slotLayouts.clear()
+    this.slotSpatialIndex.clear()
+  }
+
+  /**
+   * Update reroute layout data
+   */
+  updateRerouteLayout(rerouteId: RerouteId, layout: RerouteLayout): void {
+    const existing = this.rerouteLayouts.get(rerouteId)
+
+    if (!existing) {
+      logger.debug('Adding reroute layout:', {
+        rerouteId,
+        position: layout.position,
+        bounds: layout.bounds
+      })
+    }
+
+    if (existing) {
+      // Update spatial index
+      this.rerouteSpatialIndex.update(String(rerouteId), layout.bounds) // Spatial index uses strings
+    } else {
+      // Insert into spatial index
+      this.rerouteSpatialIndex.insert(String(rerouteId), layout.bounds) // Spatial index uses strings
+    }
+
+    this.rerouteLayouts.set(rerouteId, layout)
+  }
+
+  /**
+   * Delete reroute layout data
+   */
+  deleteRerouteLayout(rerouteId: RerouteId): void {
+    const deleted = this.rerouteLayouts.delete(rerouteId)
+    if (deleted) {
+      // Remove from spatial index
+      this.rerouteSpatialIndex.remove(String(rerouteId)) // Spatial index uses strings
+    }
+  }
+
+  /**
+   * Get link layout data
+   */
+  getLinkLayout(linkId: LinkId): LinkLayout | null {
+    return this.linkLayouts.get(linkId) || null
+  }
+
+  /**
+   * Get slot layout data
+   */
+  getSlotLayout(key: string): SlotLayout | null {
+    return this.slotLayouts.get(key) || null
+  }
+
+  /**
+   * Get reroute layout data
+   */
+  getRerouteLayout(rerouteId: RerouteId): RerouteLayout | null {
+    return this.rerouteLayouts.get(rerouteId) || null
+  }
+
+  /**
+   * Helper to create internal key for link segment
+   */
+  private makeLinkSegmentKey(
+    linkId: LinkId,
+    rerouteId: RerouteId | null
+  ): string {
+    return `${linkId}:${rerouteId ?? 'final'}`
+  }
+
+  /**
+   * Update link segment layout data
+   */
+  updateLinkSegmentLayout(
+    linkId: LinkId,
+    rerouteId: RerouteId | null,
+    layout: Omit<LinkSegmentLayout, 'linkId' | 'rerouteId'>
+  ): void {
+    const key = this.makeLinkSegmentKey(linkId, rerouteId)
+    const existing = this.linkSegmentLayouts.get(key)
+
+    // Short-circuit if bounds and centerPos unchanged (prevents spatial index churn)
+    if (
+      existing &&
+      existing.bounds.x === layout.bounds.x &&
+      existing.bounds.y === layout.bounds.y &&
+      existing.bounds.width === layout.bounds.width &&
+      existing.bounds.height === layout.bounds.height &&
+      existing.centerPos.x === layout.centerPos.x &&
+      existing.centerPos.y === layout.centerPos.y
+    ) {
+      // Only update path if provided (for hit detection)
+      if (layout.path) {
+        existing.path = layout.path
+      }
+      return
+    }
+
+    const fullLayout: LinkSegmentLayout = {
+      ...layout,
+      linkId,
+      rerouteId
+    }
+
+    if (!existing) {
+      logger.debug('Adding link segment:', {
+        linkId,
+        rerouteId,
+        bounds: layout.bounds,
+        hasPath: !!layout.path
+      })
+    }
+
+    if (existing) {
+      // Update spatial index
+      this.linkSegmentSpatialIndex.update(key, layout.bounds)
+    } else {
+      // Insert into spatial index
+      this.linkSegmentSpatialIndex.insert(key, layout.bounds)
+    }
+
+    this.linkSegmentLayouts.set(key, fullLayout)
+  }
+
+  /**
+   * Delete link segment layout data
+   */
+  deleteLinkSegmentLayout(linkId: LinkId, rerouteId: RerouteId | null): void {
+    const key = this.makeLinkSegmentKey(linkId, rerouteId)
+    const deleted = this.linkSegmentLayouts.delete(key)
+    if (deleted) {
+      // Remove from spatial index
+      this.linkSegmentSpatialIndex.remove(key)
+    }
+  }
+
+  /**
+   * Query link segment at point (returns structured data)
+   */
+  queryLinkSegmentAtPoint(
+    point: Point,
+    ctx?: CanvasRenderingContext2D
+  ): { linkId: LinkId; rerouteId: RerouteId | null } | null {
+    // Determine tolerance from current canvas state (if available)
+    // - Use the caller-provided ctx.lineWidth (LGraphCanvas sets this to connections_width + padding)
+    // - Fall back to a sensible default when ctx is not provided
+    const hitWidth = ctx?.lineWidth ?? 10
+    const halfSize = Math.max(10, hitWidth) // keep a minimum window for spatial index
+
+    // Use spatial index to get candidate segments
+    const searchArea = {
+      x: point.x - halfSize,
+      y: point.y - halfSize,
+      width: halfSize * 2,
+      height: halfSize * 2
+    }
+    const candidateKeys = this.linkSegmentSpatialIndex.query(searchArea)
+
+    if (candidateKeys.length > 0) {
+      logger.debug('Checking link segments at point:', {
+        point,
+        candidateCount: candidateKeys.length,
+        tolerance: hitWidth
+      })
+    }
+
+    // Precise hit test only on candidates
+    for (const key of candidateKeys) {
+      const segmentLayout = this.linkSegmentLayouts.get(key)
+      if (!segmentLayout) continue
+
+      if (ctx && segmentLayout.path) {
+        // Match LiteGraph behavior: hit test uses device pixel ratio for coordinates
+        const dpi =
+          (typeof window !== 'undefined' && window?.devicePixelRatio) || 1
+        const hit = ctx.isPointInStroke(
+          segmentLayout.path,
+          point.x * dpi,
+          point.y * dpi
+        )
+
+        if (hit) {
+          logger.debug('Link segment hit:', {
+            linkId: segmentLayout.linkId,
+            rerouteId: segmentLayout.rerouteId,
+            point
+          })
+          return {
+            linkId: segmentLayout.linkId,
+            rerouteId: segmentLayout.rerouteId
+          }
+        }
+      } else if (this.pointInBounds(point, segmentLayout.bounds)) {
+        // Fallback to bounding box test
+        return {
+          linkId: segmentLayout.linkId,
+          rerouteId: segmentLayout.rerouteId
+        }
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Query link at point (derived from segment query)
+   */
+  queryLinkAtPoint(
+    point: Point,
+    ctx?: CanvasRenderingContext2D
+  ): LinkId | null {
+    // Invoke segment query and return just the linkId
+    const segment = this.queryLinkSegmentAtPoint(point, ctx)
+    return segment ? segment.linkId : null
+  }
+
+  /**
+   * Query slot at point
+   */
+  querySlotAtPoint(point: Point): SlotLayout | null {
+    // Use spatial index to get candidate slots
+    const searchArea = {
+      x: point.x - 10, // Tolerance for slot size
+      y: point.y - 10,
+      width: 20,
+      height: 20
+    }
+    const candidateSlotKeys = this.slotSpatialIndex.query(searchArea)
+
+    // Check precise bounds for candidates
+    for (const key of candidateSlotKeys) {
+      const slotLayout = this.slotLayouts.get(key)
+      if (slotLayout && this.pointInBounds(point, slotLayout.bounds)) {
+        return slotLayout
+      }
+    }
+    return null
+  }
+
+  /**
+   * Query reroute at point
+   */
+  queryRerouteAtPoint(point: Point): RerouteLayout | null {
+    // Use spatial index to get candidate reroutes
+    const maxRadius = 20 // Maximum expected reroute radius
+    const searchArea = {
+      x: point.x - maxRadius,
+      y: point.y - maxRadius,
+      width: maxRadius * 2,
+      height: maxRadius * 2
+    }
+    const candidateRerouteKeys = this.rerouteSpatialIndex.query(searchArea)
+
+    if (candidateRerouteKeys.length > 0) {
+      logger.debug('Checking reroutes at point:', {
+        point,
+        candidateCount: candidateRerouteKeys.length
+      })
+    }
+
+    // Check precise distance for candidates
+    for (const rerouteKey of candidateRerouteKeys) {
+      const rerouteId = asRerouteId(rerouteKey)
+      const rerouteLayout = this.rerouteLayouts.get(rerouteId)
+      if (rerouteLayout) {
+        const dx = point.x - rerouteLayout.position.x
+        const dy = point.y - rerouteLayout.position.y
+        const distance = Math.sqrt(dx * dx + dy * dy)
+
+        if (distance <= rerouteLayout.radius) {
+          logger.debug('Reroute hit:', {
+            rerouteId: rerouteLayout.id,
+            position: rerouteLayout.position,
+            distance
+          })
+          return rerouteLayout
+        }
+      }
+    }
+    return null
+  }
+
+  /**
+   * Query all items in bounds
+   */
+  queryItemsInBounds(bounds: Bounds): {
+    nodes: NodeId[]
+    links: LinkId[]
+    slots: string[]
+    reroutes: RerouteId[]
+  } {
+    // Query segments and union their linkIds
+    const segmentKeys = this.linkSegmentSpatialIndex.query(bounds)
+    const linkIds = new Set<LinkId>()
+    for (const key of segmentKeys) {
+      const segment = this.linkSegmentLayouts.get(key)
+      if (segment) {
+        linkIds.add(segment.linkId)
+      }
+    }
+
+    return {
+      nodes: this.queryNodesInBounds(bounds),
+      links: Array.from(linkIds),
+      slots: this.slotSpatialIndex.query(bounds),
+      reroutes: this.rerouteSpatialIndex
+        .query(bounds)
+        .map((key) => asRerouteId(key))
+    }
+  }
+
+  /**
+   * Apply a layout operation using Yjs transactions
+   */
+  applyOperation(operation: LayoutOperation): void {
+    // Create change object outside transaction so we can use it after
+    const change: LayoutChange = {
+      type: 'update',
+      nodeIds: [],
+      timestamp: operation.timestamp,
+      source: operation.source,
+      operation
+    }
+
+    // Use Yjs transaction for atomic updates
+    this.ydoc.transact(() => {
+      // Add operation to log
+      this.yoperations.push([operation])
+
+      // Apply the operation
+      this.applyOperationInTransaction(operation, change)
+    }, this.currentActor)
+
+    // Post-transaction updates
+    this.finalizeOperation(change)
+  }
+
+  /**
+   * Apply operation within a transaction
+   */
+  private applyOperationInTransaction(
+    operation: LayoutOperation,
+    change: LayoutChange
+  ): void {
+    switch (operation.type) {
+      case 'moveNode':
+        this.handleMoveNode(operation as MoveNodeOperation, change)
+        break
+      case 'resizeNode':
+        this.handleResizeNode(operation as ResizeNodeOperation, change)
+        break
+      case 'setNodeZIndex':
+        this.handleSetNodeZIndex(operation as SetNodeZIndexOperation, change)
+        break
+      case 'createNode':
+        this.handleCreateNode(operation as CreateNodeOperation, change)
+        break
+      case 'deleteNode':
+        this.handleDeleteNode(operation as DeleteNodeOperation, change)
+        break
+      case 'createLink':
+        this.handleCreateLink(operation as CreateLinkOperation, change)
+        break
+      case 'deleteLink':
+        this.handleDeleteLink(operation as DeleteLinkOperation, change)
+        break
+      case 'createReroute':
+        this.handleCreateReroute(operation as CreateRerouteOperation, change)
+        break
+      case 'deleteReroute':
+        this.handleDeleteReroute(operation as DeleteRerouteOperation, change)
+        break
+      case 'moveReroute':
+        this.handleMoveReroute(operation as MoveRerouteOperation, change)
+        break
+    }
+  }
+
+  /**
+   * Finalize operation after transaction
+   */
+  private finalizeOperation(change: LayoutChange): void {
+    // Update version
+    this.version++
+
+    // Manually trigger affected node refs after transaction
+    // This is needed because Yjs observers don't fire for property changes
+    change.nodeIds.forEach((nodeId) => {
+      const trigger = this.nodeTriggers.get(nodeId)
+      if (trigger) {
+        trigger()
+      }
+    })
+
+    // Notify listeners (after transaction completes)
+    setTimeout(() => this.notifyChange(change), 0)
+  }
+
+  /**
+   * Subscribe to layout changes
+   */
+  onChange(callback: (change: LayoutChange) => void): () => void {
+    this.changeListeners.add(callback)
+    return () => this.changeListeners.delete(callback)
+  }
+
+  /**
+   * Set the current operation source
+   */
+  setSource(source: LayoutSource): void {
+    this.currentSource = source
+  }
+
+  /**
+   * Set the current actor (for CRDT)
+   */
+  setActor(actor: string): void {
+    this.currentActor = actor
+  }
+
+  /**
+   * Get the current operation source
+   */
+  getCurrentSource(): LayoutSource {
+    return this.currentSource
+  }
+
+  /**
+   * Get the current actor
+   */
+  getCurrentActor(): string {
+    return this.currentActor
+  }
+
+  /**
+   * Initialize store with existing nodes
+   */
+  initializeFromLiteGraph(
+    nodes: Array<{ id: string; pos: [number, number]; size: [number, number] }>
+  ): void {
+    this.ydoc.transact(() => {
+      this.ynodes.clear()
+      this.nodeRefs.clear()
+      this.nodeTriggers.clear()
+      this.spatialIndex.clear()
+      this.linkSegmentSpatialIndex.clear()
+      this.slotSpatialIndex.clear()
+      this.rerouteSpatialIndex.clear()
+      this.linkLayouts.clear()
+      this.linkSegmentLayouts.clear()
+      this.slotLayouts.clear()
+      this.rerouteLayouts.clear()
+
+      nodes.forEach((node, index) => {
+        const layout: NodeLayout = {
+          id: node.id.toString(),
+          position: { x: node.pos[0], y: node.pos[1] },
+          size: { width: node.size[0], height: node.size[1] },
+          zIndex: index,
+          visible: true,
+          bounds: {
+            x: node.pos[0],
+            y: node.pos[1],
+            width: node.size[0],
+            height: node.size[1]
+          }
+        }
+
+        this.ynodes.set(layout.id, this.layoutToYNode(layout))
+
+        // Add to spatial index
+        this.spatialIndex.insert(layout.id, layout.bounds)
+      })
+    }, 'initialization')
+  }
+
+  // Operation handlers
+  private handleMoveNode(
+    operation: MoveNodeOperation,
+    change: LayoutChange
+  ): void {
+    const ynode = this.ynodes.get(operation.nodeId)
+    if (!ynode) {
+      return
+    }
+
+    const size = this.getNodeField(ynode, 'size')
+    const newBounds = {
+      x: operation.position.x,
+      y: operation.position.y,
+      width: size.width,
+      height: size.height
+    }
+
+    // Update spatial index FIRST, synchronously to prevent race conditions
+    // Hit detection queries can run before CRDT updates complete
+    this.spatialIndex.update(operation.nodeId, newBounds)
+
+    // Update associated slot positions synchronously
+    this.updateNodeSlotPositions(operation.nodeId, operation.position)
+
+    // Then update CRDT
+    ynode.set('position', operation.position)
+    this.updateNodeBounds(ynode, operation.position, size)
+
+    change.nodeIds.push(operation.nodeId)
+  }
+
+  private handleResizeNode(
+    operation: ResizeNodeOperation,
+    change: LayoutChange
+  ): void {
+    const ynode = this.ynodes.get(operation.nodeId)
+    if (!ynode) return
+
+    const position = this.getNodeField(ynode, 'position')
+    const newBounds = {
+      x: position.x,
+      y: position.y,
+      width: operation.size.width,
+      height: operation.size.height
+    }
+
+    // Update spatial index FIRST, synchronously to prevent race conditions
+    // Hit detection queries can run before CRDT updates complete
+    this.spatialIndex.update(operation.nodeId, newBounds)
+
+    // Update associated slot positions synchronously (size changes may affect slot positions)
+    this.updateNodeSlotPositions(operation.nodeId, position)
+
+    // Then update CRDT
+    ynode.set('size', operation.size)
+    this.updateNodeBounds(ynode, position, operation.size)
+
+    change.nodeIds.push(operation.nodeId)
+  }
+
+  private handleSetNodeZIndex(
+    operation: SetNodeZIndexOperation,
+    change: LayoutChange
+  ): void {
+    const ynode = this.ynodes.get(operation.nodeId)
+    if (!ynode) return
+
+    ynode.set('zIndex', operation.zIndex)
+    change.nodeIds.push(operation.nodeId)
+  }
+
+  private handleCreateNode(
+    operation: CreateNodeOperation,
+    change: LayoutChange
+  ): void {
+    const ynode = this.layoutToYNode(operation.layout)
+    this.ynodes.set(operation.nodeId, ynode)
+
+    // Add to spatial index
+    this.spatialIndex.insert(operation.nodeId, operation.layout.bounds)
+
+    change.type = 'create'
+    change.nodeIds.push(operation.nodeId)
+  }
+
+  private handleDeleteNode(
+    operation: DeleteNodeOperation,
+    change: LayoutChange
+  ): void {
+    if (!this.ynodes.has(operation.nodeId)) return
+
+    this.ynodes.delete(operation.nodeId)
+    this.nodeRefs.delete(operation.nodeId)
+    this.nodeTriggers.delete(operation.nodeId)
+
+    // Remove from spatial index
+    this.spatialIndex.remove(operation.nodeId)
+
+    // Clean up associated slot layouts
+    this.deleteNodeSlotLayouts(operation.nodeId)
+
+    // Clean up associated links
+    const linksToDelete = this.findLinksConnectedToNode(operation.nodeId)
+
+    // Delete the associated links
+    for (const linkId of linksToDelete) {
+      this.ylinks.delete(String(linkId))
+      this.linkLayouts.delete(linkId)
+
+      // Clean up link segment layouts
+      this.cleanupLinkSegments(linkId)
+    }
+
+    change.type = 'delete'
+    change.nodeIds.push(operation.nodeId)
+  }
+
+  private handleCreateLink(
+    operation: CreateLinkOperation,
+    change: LayoutChange
+  ): void {
+    const linkData = new Y.Map<unknown>()
+    linkData.set('id', operation.linkId)
+    linkData.set('sourceNodeId', operation.sourceNodeId)
+    linkData.set('sourceSlot', operation.sourceSlot)
+    linkData.set('targetNodeId', operation.targetNodeId)
+    linkData.set('targetSlot', operation.targetSlot)
+
+    this.ylinks.set(String(operation.linkId), linkData)
+
+    // Link geometry will be computed separately when nodes move
+    // This just tracks that the link exists
+    change.type = 'create'
+  }
+
+  private handleDeleteLink(
+    operation: DeleteLinkOperation,
+    change: LayoutChange
+  ): void {
+    if (!this.ylinks.has(String(operation.linkId))) return
+
+    this.ylinks.delete(String(operation.linkId))
+    this.linkLayouts.delete(operation.linkId)
+    // Clean up any segment layouts for this link
+    this.cleanupLinkSegments(operation.linkId)
+
+    change.type = 'delete'
+  }
+
+  private handleCreateReroute(
+    operation: CreateRerouteOperation,
+    change: LayoutChange
+  ): void {
+    const rerouteData = new Y.Map<unknown>()
+    rerouteData.set('id', operation.rerouteId)
+    rerouteData.set('position', operation.position)
+    rerouteData.set('parentId', operation.parentId)
+    rerouteData.set('linkIds', operation.linkIds)
+
+    this.yreroutes.set(String(operation.rerouteId), rerouteData) // Yjs Map keys must be strings
+
+    // The observer will automatically update the spatial index
+    change.type = 'create'
+  }
+
+  private handleDeleteReroute(
+    operation: DeleteRerouteOperation,
+    change: LayoutChange
+  ): void {
+    if (!this.yreroutes.has(String(operation.rerouteId))) return // Yjs Map keys are strings
+
+    this.yreroutes.delete(String(operation.rerouteId)) // Yjs Map keys are strings
+    this.rerouteLayouts.delete(operation.rerouteId) // Layout map uses numeric ID
+    this.rerouteSpatialIndex.remove(String(operation.rerouteId)) // Spatial index uses strings
+
+    change.type = 'delete'
+  }
+
+  private handleMoveReroute(
+    operation: MoveRerouteOperation,
+    change: LayoutChange
+  ): void {
+    const yreroute = this.yreroutes.get(String(operation.rerouteId)) // Yjs Map keys are strings
+    if (!yreroute) return
+
+    yreroute.set('position', operation.position)
+
+    const pos = operation.position
+    const layout: RerouteLayout = {
+      id: operation.rerouteId,
+      position: pos,
+      radius: 8,
+      bounds: {
+        x: pos.x - 8,
+        y: pos.y - 8,
+        width: 16,
+        height: 16
+      }
+    }
+    this.updateRerouteLayout(operation.rerouteId, layout)
+
+    // Mark as update for listeners
+    change.type = 'update'
+  }
+
+  /**
+   * Update node bounds helper
+   */
+  private updateNodeBounds(
+    ynode: Y.Map<unknown>,
+    position: Point,
+    size: { width: number; height: number }
+  ): void {
+    ynode.set('bounds', {
+      x: position.x,
+      y: position.y,
+      width: size.width,
+      height: size.height
+    })
+  }
+
+  /**
+   * Find all links connected to a specific node
+   */
+  private findLinksConnectedToNode(nodeId: NodeId): LinkId[] {
+    const connectedLinks: LinkId[] = []
+    this.ylinks.forEach((linkData: Y.Map<unknown>, linkIdStr: string) => {
+      const linkId = asLinkId(linkIdStr)
+      const sourceNodeId = this.getLinkField(linkData, 'sourceNodeId')
+      const targetNodeId = this.getLinkField(linkData, 'targetNodeId')
+
+      if (sourceNodeId === nodeId || targetNodeId === nodeId) {
+        connectedLinks.push(linkId)
+      }
+    })
+    return connectedLinks
+  }
+
+  /**
+   * Handle link change events
+   */
+  private handleLinkChange(change: YEventChange, linkIdStr: string): void {
+    if (change.action === 'delete') {
+      const linkId = asLinkId(linkIdStr)
+      this.cleanupLinkData(linkId)
+    }
+    // Link was added or updated - geometry will be computed separately
+    // This just tracks that the link exists in CRDT
+  }
+
+  /**
+   * Clean up all data associated with a link
+   */
+  private cleanupLinkData(linkId: LinkId): void {
+    this.linkLayouts.delete(linkId)
+    this.cleanupLinkSegments(linkId)
+  }
+
+  /**
+   * Clean up all segment layouts for a link
+   */
+  private cleanupLinkSegments(linkId: LinkId): void {
+    const keysToDelete: string[] = []
+    for (const [key] of this.linkSegmentLayouts) {
+      if (key.startsWith(`${linkId}:`)) {
+        keysToDelete.push(key)
+      }
+    }
+
+    for (const key of keysToDelete) {
+      this.linkSegmentLayouts.delete(key)
+      this.linkSegmentSpatialIndex.remove(key)
+    }
+  }
+
+  /**
+   * Handle reroute change events
+   */
+  private handleRerouteChange(
+    change: YEventChange,
+    rerouteIdStr: string
+  ): void {
+    const rerouteId = asRerouteId(rerouteIdStr)
+
+    if (change.action === 'delete') {
+      this.handleRerouteDelete(rerouteId)
+    } else {
+      this.handleRerouteUpsert(rerouteId)
+    }
+  }
+
+  /**
+   * Handle reroute deletion
+   */
+  private handleRerouteDelete(rerouteId: RerouteId): void {
+    this.rerouteLayouts.delete(rerouteId)
+    this.rerouteSpatialIndex.remove(String(rerouteId))
+  }
+
+  /**
+   * Handle reroute upsert (update if exists, create if not)
+   */
+  private handleRerouteUpsert(rerouteId: RerouteId): void {
+    const rerouteData = this.yreroutes.get(String(rerouteId))
+    if (!rerouteData) return
+
+    const position = this.getRerouteField(rerouteData, 'position')
+    if (!position) return
+
+    const layout = this.createRerouteLayout(rerouteId, position)
+    this.updateRerouteLayout(rerouteId, layout)
+  }
+
+  /**
+   * Create reroute layout from position
+   */
+  private createRerouteLayout(
+    rerouteId: RerouteId,
+    position: Point
+  ): RerouteLayout {
+    return {
+      id: rerouteId,
+      position,
+      radius: REROUTE_RADIUS,
+      bounds: {
+        x: position.x - REROUTE_RADIUS,
+        y: position.y - REROUTE_RADIUS,
+        width: REROUTE_RADIUS * 2,
+        height: REROUTE_RADIUS * 2
+      }
+    }
+  }
+
+  /**
+   * Update slot positions when a node moves
+   * TODO: This should be handled by the layout sync system (useSlotLayoutSync)
+   * rather than manually here. For now, we'll mark affected slots as needing recalculation.
+   */
+  private updateNodeSlotPositions(nodeId: NodeId, _nodePosition: Point): void {
+    // Mark all slots for this node as potentially stale
+    // The layout sync system will recalculate positions on the next frame
+    const slotsToRemove: string[] = []
+
+    for (const [key, slotLayout] of this.slotLayouts) {
+      if (slotLayout.nodeId === nodeId) {
+        slotsToRemove.push(key)
+      }
+    }
+
+    // Remove from spatial index so they'll be recalculated
+    for (const key of slotsToRemove) {
+      this.slotSpatialIndex.remove(key)
+      this.slotLayouts.delete(key)
+    }
+  }
+
+  // Helper methods
+  private layoutToYNode(layout: NodeLayout): Y.Map<unknown> {
+    const ynode = new Y.Map<unknown>()
+    ynode.set('id', layout.id)
+    ynode.set('position', layout.position)
+    ynode.set('size', layout.size)
+    ynode.set('zIndex', layout.zIndex)
+    ynode.set('visible', layout.visible)
+    ynode.set('bounds', layout.bounds)
+    return ynode
+  }
+
+  private yNodeToLayout(ynode: Y.Map<unknown>): NodeLayout {
+    return {
+      id: this.getNodeField(ynode, 'id'),
+      position: this.getNodeField(ynode, 'position'),
+      size: this.getNodeField(ynode, 'size'),
+      zIndex: this.getNodeField(ynode, 'zIndex'),
+      visible: this.getNodeField(ynode, 'visible'),
+      bounds: this.getNodeField(ynode, 'bounds')
+    }
+  }
+
+  private notifyChange(change: LayoutChange): void {
+    this.changeListeners.forEach((listener) => {
+      try {
+        listener(change)
+      } catch (error) {
+        console.error('Error in layout change listener:', error)
+      }
+    })
+  }
+
+  private pointInBounds(point: Point, bounds: Bounds): boolean {
+    return (
+      point.x >= bounds.x &&
+      point.x <= bounds.x + bounds.width &&
+      point.y >= bounds.y &&
+      point.y <= bounds.y + bounds.height
+    )
+  }
+
+  private boundsIntersect(a: Bounds, b: Bounds): boolean {
+    return !(
+      a.x + a.width < b.x ||
+      b.x + b.width < a.x ||
+      a.y + a.height < b.y ||
+      b.y + b.height < a.y
+    )
+  }
+
+  // CRDT-specific methods
+  getOperationsSince(timestamp: number): LayoutOperation[] {
+    const operations: LayoutOperation[] = []
+    this.yoperations.forEach((op: LayoutOperation) => {
+      if (op && op.timestamp > timestamp) {
+        operations.push(op)
+      }
+    })
+    return operations
+  }
+
+  getOperationsByActor(actor: string): LayoutOperation[] {
+    const operations: LayoutOperation[] = []
+    this.yoperations.forEach((op: LayoutOperation) => {
+      if (op && op.actor === actor) {
+        operations.push(op)
+      }
+    })
+    return operations
+  }
+
+  /**
+   * Get the Yjs document for network sync (future feature)
+   */
+  getYDoc(): Y.Doc {
+    return this.ydoc
+  }
+
+  /**
+   * Apply updates from remote peers (future feature)
+   */
+  applyUpdate(update: Uint8Array): void {
+    Y.applyUpdate(this.ydoc, update)
+  }
+
+  /**
+   * Get state as update for sending to peers (future feature)
+   */
+  getStateAsUpdate(): Uint8Array {
+    return Y.encodeStateAsUpdate(this.ydoc)
+  }
+
+  /**
+   * Batch update node bounds using Yjs transaction for atomicity.
+   */
+  batchUpdateNodeBounds(updates: NodeBoundsUpdate[]): void {
+    if (updates.length === 0) return
+
+    // Set source to Vue for these DOM-driven updates
+    const originalSource = this.currentSource
+    this.currentSource = LayoutSource.Vue
+
+    this.ydoc.transact(() => {
+      for (const { nodeId, bounds } of updates) {
+        const ynode = this.ynodes.get(nodeId)
+        if (!ynode) continue
+
+        this.spatialIndex.update(nodeId, bounds)
+        ynode.set('bounds', bounds)
+        ynode.set('size', { width: bounds.width, height: bounds.height })
+      }
+    }, this.currentActor)
+
+    // Restore original source
+    this.currentSource = originalSource
+  }
+}
+
+// Create singleton instance
+export const layoutStore = new LayoutStoreImpl()
diff --git a/src/renderer/core/layout/sync/useLayoutSync.ts b/src/renderer/core/layout/sync/useLayoutSync.ts
new file mode 100644
index 000000000..2aee7974c
--- /dev/null
+++ b/src/renderer/core/layout/sync/useLayoutSync.ts
@@ -0,0 +1,79 @@
+/**
+ * Composable for syncing LiteGraph with the Layout system
+ *
+ * Implements one-way sync from Layout Store to LiteGraph.
+ * The layout store is the single source of truth.
+ */
+import { onUnmounted } from 'vue'
+
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+/**
+ * Composable for syncing LiteGraph with the Layout system
+ * This replaces the bidirectional sync with a one-way sync
+ */
+export function useLayoutSync() {
+  let unsubscribe: (() => void) | null = null
+
+  /**
+   * Start syncing from Layout system to LiteGraph
+   * This is one-way: Layout → LiteGraph only
+   */
+  function startSync(canvas: any) {
+    if (!canvas?.graph) return
+
+    // Subscribe to layout changes
+    unsubscribe = layoutStore.onChange((change) => {
+      // Apply changes to LiteGraph regardless of source
+      // The layout store is the single source of truth
+      for (const nodeId of change.nodeIds) {
+        const layout = layoutStore.getNodeLayoutRef(nodeId).value
+        if (!layout) continue
+
+        const liteNode = canvas.graph.getNodeById(parseInt(nodeId))
+        if (!liteNode) continue
+
+        // Update position if changed
+        if (
+          liteNode.pos[0] !== layout.position.x ||
+          liteNode.pos[1] !== layout.position.y
+        ) {
+          liteNode.pos[0] = layout.position.x
+          liteNode.pos[1] = layout.position.y
+        }
+
+        // Update size if changed
+        if (
+          liteNode.size[0] !== layout.size.width ||
+          liteNode.size[1] !== layout.size.height
+        ) {
+          liteNode.size[0] = layout.size.width
+          liteNode.size[1] = layout.size.height
+        }
+      }
+
+      // Trigger single redraw for all changes
+      canvas.setDirty(true, true)
+    })
+  }
+
+  /**
+   * Stop syncing
+   */
+  function stopSync() {
+    if (unsubscribe) {
+      unsubscribe()
+      unsubscribe = null
+    }
+  }
+
+  // Auto-cleanup on unmount
+  onUnmounted(() => {
+    stopSync()
+  })
+
+  return {
+    startSync,
+    stopSync
+  }
+}
diff --git a/src/renderer/core/layout/sync/useLinkLayoutSync.ts b/src/renderer/core/layout/sync/useLinkLayoutSync.ts
new file mode 100644
index 000000000..fd6b3b19c
--- /dev/null
+++ b/src/renderer/core/layout/sync/useLinkLayoutSync.ts
@@ -0,0 +1,365 @@
+/**
+ * Composable for event-driven link layout synchronization
+ *
+ * Implements event-driven link layout updates decoupled from the render cycle.
+ * Updates link geometry only when it actually changes (node move/resize, link create/delete,
+ * reroute create/delete/move, collapse toggles).
+ */
+import log from 'loglevel'
+import { onUnmounted } from 'vue'
+
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import { LLink } from '@/lib/litegraph/src/LLink'
+import { Reroute } from '@/lib/litegraph/src/Reroute'
+import type { ReadOnlyPoint } from '@/lib/litegraph/src/interfaces'
+import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
+import { LitegraphLinkAdapter } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
+import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
+import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { LayoutChange } from '@/renderer/core/layout/types'
+
+const logger = log.getLogger('useLinkLayoutSync')
+
+/**
+ * Composable for managing link layout synchronization
+ */
+export function useLinkLayoutSync() {
+  let canvas: LGraphCanvas | null = null
+  let graph: LGraph | null = null
+  let offscreenCtx: CanvasRenderingContext2D | null = null
+  let adapter: LitegraphLinkAdapter | null = null
+  let unsubscribeLayoutChange: (() => void) | null = null
+  let restoreHandlers: (() => void) | null = null
+
+  /**
+   * Build link render context from canvas properties
+   */
+  function buildLinkRenderContext(): LinkRenderContext {
+    if (!canvas) {
+      throw new Error('Canvas not initialized')
+    }
+
+    return {
+      // Canvas settings
+      renderMode: canvas.links_render_mode,
+      connectionWidth: canvas.connections_width,
+      renderBorder: canvas.render_connections_border,
+      lowQuality: canvas.low_quality,
+      highQualityRender: canvas.highquality_render,
+      scale: canvas.ds.scale,
+      linkMarkerShape: canvas.linkMarkerShape,
+      renderConnectionArrows: canvas.render_connection_arrows,
+
+      // State
+      highlightedLinks: new Set(Object.keys(canvas.highlighted_links)),
+
+      // Colors
+      defaultLinkColor: canvas.default_link_color,
+      linkTypeColors: (canvas.constructor as any).link_type_colors || {},
+
+      // Pattern for disabled links
+      disabledPattern: canvas._pattern
+    }
+  }
+
+  /**
+   * Recompute a single link and all its segments
+   *
+   * Note: This logic mirrors LGraphCanvas#renderAllLinkSegments but:
+   * - Works with offscreen context for event-driven updates
+   * - No visibility checks (always computes full geometry)
+   * - No dragging state handling (pure geometry computation)
+   */
+  function recomputeLinkById(linkId: number): void {
+    if (!graph || !adapter || !offscreenCtx || !canvas) return
+
+    const link = graph.links.get(linkId)
+    if (!link || link.id === -1) return // Skip floating/temp links
+
+    // Get source and target nodes
+    const sourceNode = graph.getNodeById(link.origin_id)
+    const targetNode = graph.getNodeById(link.target_id)
+    if (!sourceNode || !targetNode) return
+
+    // Get slots
+    const sourceSlot = sourceNode.outputs?.[link.origin_slot]
+    const targetSlot = targetNode.inputs?.[link.target_slot]
+    if (!sourceSlot || !targetSlot) return
+
+    // Get positions
+    const startPos = getSlotPosition(sourceNode, link.origin_slot, false)
+    const endPos = getSlotPosition(targetNode, link.target_slot, true)
+
+    // Get directions
+    const startDir = sourceSlot.dir || LinkDirection.RIGHT
+    const endDir = targetSlot.dir || LinkDirection.LEFT
+
+    // Get reroutes for this link
+    const reroutes = LLink.getReroutes(graph, link)
+
+    // Build render context
+    const context = buildLinkRenderContext()
+
+    if (reroutes.length > 0) {
+      // Render segmented link with reroutes
+      let segmentStartPos = startPos
+      let segmentStartDir = startDir
+
+      for (let i = 0; i < reroutes.length; i++) {
+        const reroute = reroutes[i]
+
+        // Calculate reroute angle
+        reroute.calculateAngle(Date.now(), graph, [
+          segmentStartPos[0],
+          segmentStartPos[1]
+        ])
+
+        // Calculate control points
+        const distance = Math.sqrt(
+          (reroute.pos[0] - segmentStartPos[0]) ** 2 +
+            (reroute.pos[1] - segmentStartPos[1]) ** 2
+        )
+        const dist = Math.min(Reroute.maxSplineOffset, distance * 0.25)
+
+        // Special handling for floating input chain
+        const isFloatingInputChain = !sourceNode && targetNode
+        const startControl: ReadOnlyPoint = isFloatingInputChain
+          ? [0, 0]
+          : [dist * reroute.cos, dist * reroute.sin]
+
+        // Render segment to this reroute
+        adapter.renderLinkDirect(
+          offscreenCtx,
+          segmentStartPos,
+          reroute.pos,
+          link,
+          true, // skip_border
+          0, // flow
+          null, // color
+          segmentStartDir,
+          LinkDirection.CENTER,
+          context,
+          {
+            startControl,
+            endControl: reroute.controlPoint,
+            reroute,
+            disabled: false
+          }
+        )
+
+        // Prepare for next segment
+        segmentStartPos = reroute.pos
+        segmentStartDir = LinkDirection.CENTER
+      }
+
+      // Render final segment from last reroute to target
+      const lastReroute = reroutes[reroutes.length - 1]
+      const finalDistance = Math.sqrt(
+        (endPos[0] - lastReroute.pos[0]) ** 2 +
+          (endPos[1] - lastReroute.pos[1]) ** 2
+      )
+      const finalDist = Math.min(Reroute.maxSplineOffset, finalDistance * 0.25)
+      const finalStartControl: ReadOnlyPoint = [
+        finalDist * lastReroute.cos,
+        finalDist * lastReroute.sin
+      ]
+
+      adapter.renderLinkDirect(
+        offscreenCtx,
+        lastReroute.pos,
+        endPos,
+        link,
+        true, // skip_border
+        0, // flow
+        null, // color
+        LinkDirection.CENTER,
+        endDir,
+        context,
+        {
+          startControl: finalStartControl,
+          disabled: false
+        }
+      )
+    } else {
+      // No reroutes - render direct link
+      adapter.renderLinkDirect(
+        offscreenCtx,
+        startPos,
+        endPos,
+        link,
+        true, // skip_border
+        0, // flow
+        null, // color
+        startDir,
+        endDir,
+        context,
+        {
+          disabled: false
+        }
+      )
+    }
+  }
+
+  /**
+   * Recompute all links connected to a node
+   */
+  function recomputeLinksForNode(nodeId: number): void {
+    if (!graph) return
+
+    const node = graph.getNodeById(nodeId)
+    if (!node) return
+
+    const linkIds = new Set<number>()
+
+    // Collect output links
+    if (node.outputs) {
+      for (const output of node.outputs) {
+        if (output.links) {
+          for (const linkId of output.links) {
+            linkIds.add(linkId)
+          }
+        }
+      }
+    }
+
+    // Collect input links
+    if (node.inputs) {
+      for (const input of node.inputs) {
+        if (input.link !== null && input.link !== undefined) {
+          linkIds.add(input.link)
+        }
+      }
+    }
+
+    // Recompute each link
+    for (const linkId of linkIds) {
+      recomputeLinkById(linkId)
+    }
+  }
+
+  /**
+   * Recompute all links associated with a reroute
+   */
+  function recomputeLinksForReroute(rerouteId: number): void {
+    if (!graph) return
+
+    const reroute = graph.reroutes.get(rerouteId)
+    if (!reroute) return
+
+    // Recompute all links that pass through this reroute
+    for (const linkId of reroute.linkIds) {
+      recomputeLinkById(linkId)
+    }
+  }
+
+  /**
+   * Start link layout sync with event-driven functionality
+   */
+  function start(canvasInstance: LGraphCanvas): void {
+    canvas = canvasInstance
+    graph = canvas.graph
+    if (!graph) return
+
+    // Create offscreen canvas context
+    const offscreenCanvas = document.createElement('canvas')
+    offscreenCtx = offscreenCanvas.getContext('2d')
+    if (!offscreenCtx) {
+      logger.error('Failed to create offscreen canvas context')
+      return
+    }
+
+    // Create dedicated adapter with layout writes enabled
+    adapter = new LitegraphLinkAdapter(graph)
+    adapter.enableLayoutStoreWrites = true
+
+    // Initial computation for all existing links
+    for (const link of graph._links.values()) {
+      if (link.id !== -1) {
+        recomputeLinkById(link.id)
+      }
+    }
+
+    // Subscribe to layout store changes
+    unsubscribeLayoutChange = layoutStore.onChange((change: LayoutChange) => {
+      switch (change.operation.type) {
+        case 'moveNode':
+        case 'resizeNode':
+          recomputeLinksForNode(parseInt(change.operation.nodeId))
+          break
+        case 'createLink':
+          recomputeLinkById(change.operation.linkId)
+          break
+        case 'deleteLink':
+          // No-op - store already cleaned by existing code
+          break
+        case 'createReroute':
+        case 'deleteReroute':
+          // Recompute all affected links
+          if ('linkIds' in change.operation) {
+            for (const linkId of change.operation.linkIds) {
+              recomputeLinkById(linkId)
+            }
+          }
+          break
+        case 'moveReroute':
+          recomputeLinksForReroute(change.operation.rerouteId)
+          break
+      }
+    })
+
+    // Hook collapse events
+    const origTrigger = graph.onTrigger
+
+    graph.onTrigger = (action: string, param: any) => {
+      if (
+        action === 'node:property:changed' &&
+        param?.property === 'flags.collapsed'
+      ) {
+        const nodeId = parseInt(String(param.nodeId))
+        if (!isNaN(nodeId)) {
+          recomputeLinksForNode(nodeId)
+        }
+      }
+      if (origTrigger) {
+        origTrigger.call(graph, action, param)
+      }
+    }
+
+    // Store cleanup function
+    restoreHandlers = () => {
+      if (graph) {
+        graph.onTrigger = origTrigger || undefined
+      }
+    }
+  }
+
+  /**
+   * Stop link layout sync and cleanup all resources
+   */
+  function stop(): void {
+    if (unsubscribeLayoutChange) {
+      unsubscribeLayoutChange()
+      unsubscribeLayoutChange = null
+    }
+    if (restoreHandlers) {
+      restoreHandlers()
+      restoreHandlers = null
+    }
+    canvas = null
+    graph = null
+    offscreenCtx = null
+    adapter = null
+  }
+
+  // Auto-cleanup on unmount
+  onUnmounted(() => {
+    stop()
+  })
+
+  return {
+    start,
+    stop
+  }
+}
diff --git a/src/renderer/core/layout/sync/useSlotLayoutSync.ts b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
new file mode 100644
index 000000000..55a464140
--- /dev/null
+++ b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
@@ -0,0 +1,166 @@
+/**
+ * Composable for managing slot layout registration
+ *
+ * Implements event-driven slot registration decoupled from the draw cycle.
+ * Registers slots once on initial load and keeps them updated when necessary.
+ */
+import { onUnmounted } from 'vue'
+
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { type SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
+import { registerNodeSlots } from '@/renderer/core/layout/slots/register'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+/**
+ * Compute and register slot layouts for a node
+ * @param node LiteGraph node to process
+ */
+function computeAndRegisterSlots(node: LGraphNode): void {
+  const nodeId = String(node.id)
+  const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
+
+  // Fallback to live node values if layout not ready
+  const nodeX = nodeLayout?.position.x ?? node.pos[0]
+  const nodeY = nodeLayout?.position.y ?? node.pos[1]
+  const nodeWidth = nodeLayout?.size.width ?? node.size[0]
+  const nodeHeight = nodeLayout?.size.height ?? node.size[1]
+
+  // Ensure concrete slots & arrange when needed for accurate positions
+  node._setConcreteSlots()
+  const collapsed = node.flags.collapsed ?? false
+  if (!collapsed) {
+    node.arrange()
+  }
+
+  const context: SlotPositionContext = {
+    nodeX,
+    nodeY,
+    nodeWidth,
+    nodeHeight,
+    collapsed,
+    collapsedWidth: node._collapsed_width,
+    slotStartY: node.constructor.slot_start_y,
+    inputs: node.inputs,
+    outputs: node.outputs,
+    widgets: node.widgets
+  }
+
+  registerNodeSlots(nodeId, context)
+}
+
+/**
+ * Composable for managing slot layout registration
+ */
+export function useSlotLayoutSync() {
+  let unsubscribeLayoutChange: (() => void) | null = null
+  let restoreHandlers: (() => void) | null = null
+
+  /**
+   * Attempt to start slot layout sync with full event-driven functionality
+   * @param canvas LiteGraph canvas instance
+   * @returns true if sync was actually started, false if early-returned
+   */
+  function attemptStart(canvas: LGraphCanvas): boolean {
+    // When Vue nodes are enabled, slot DOM registers exact positions.
+    // Skip calculated registration to avoid conflicts.
+    if (LiteGraph.vueNodesMode) {
+      return false
+    }
+    const graph = canvas?.graph
+    if (!graph) return false
+
+    // Initial registration for all nodes in the current graph
+    for (const node of graph.nodes) {
+      computeAndRegisterSlots(node)
+    }
+
+    // Layout changes → recompute slots for changed nodes
+    unsubscribeLayoutChange = layoutStore.onChange((change) => {
+      for (const nodeId of change.nodeIds) {
+        const node = graph.getNodeById(parseInt(nodeId))
+        if (node) {
+          computeAndRegisterSlots(node)
+        }
+      }
+    })
+
+    // LiteGraph event hooks
+    const origNodeAdded = graph.onNodeAdded
+    const origNodeRemoved = graph.onNodeRemoved
+    const origTrigger = graph.onTrigger
+    const origAfterChange = graph.onAfterChange
+
+    graph.onNodeAdded = (node: LGraphNode) => {
+      computeAndRegisterSlots(node)
+      if (origNodeAdded) {
+        origNodeAdded.call(graph, node)
+      }
+    }
+
+    graph.onNodeRemoved = (node: LGraphNode) => {
+      layoutStore.deleteNodeSlotLayouts(String(node.id))
+      if (origNodeRemoved) {
+        origNodeRemoved.call(graph, node)
+      }
+    }
+
+    graph.onTrigger = (action: string, param: any) => {
+      if (
+        action === 'node:property:changed' &&
+        param?.property === 'flags.collapsed'
+      ) {
+        const node = graph.getNodeById(parseInt(String(param.nodeId)))
+        if (node) {
+          computeAndRegisterSlots(node)
+        }
+      }
+      if (origTrigger) {
+        origTrigger.call(graph, action, param)
+      }
+    }
+
+    graph.onAfterChange = (graph: any, node?: any) => {
+      if (node && node.id) {
+        computeAndRegisterSlots(node)
+      }
+      if (origAfterChange) {
+        origAfterChange.call(graph, graph, node)
+      }
+    }
+
+    // Store cleanup function
+    restoreHandlers = () => {
+      graph.onNodeAdded = origNodeAdded || undefined
+      graph.onNodeRemoved = origNodeRemoved || undefined
+      graph.onTrigger = origTrigger || undefined
+      graph.onAfterChange = origAfterChange || undefined
+    }
+
+    return true
+  }
+
+  /**
+   * Stop slot layout sync and cleanup all subscriptions
+   */
+  function stop(): void {
+    if (unsubscribeLayoutChange) {
+      unsubscribeLayoutChange()
+      unsubscribeLayoutChange = null
+    }
+    if (restoreHandlers) {
+      restoreHandlers()
+      restoreHandlers = null
+    }
+  }
+
+  // Auto-cleanup on unmount
+  onUnmounted(() => {
+    stop()
+  })
+
+  return {
+    attemptStart,
+    stop
+  }
+}
diff --git a/src/renderer/core/layout/types.ts b/src/renderer/core/layout/types.ts
new file mode 100644
index 000000000..1dbd936d9
--- /dev/null
+++ b/src/renderer/core/layout/types.ts
@@ -0,0 +1,333 @@
+/**
+ * Layout System - Type Definitions
+ *
+ * This file contains all type definitions for the layout system
+ * that manages node positions, bounds, spatial data, and operations.
+ */
+import type { ComputedRef, Ref } from 'vue'
+
+// Enum for layout source types
+export enum LayoutSource {
+  Canvas = 'canvas',
+  Vue = 'vue',
+  External = 'external'
+}
+
+// Basic geometric types
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface Bounds {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface NodeBoundsUpdate {
+  nodeId: NodeId
+  bounds: Bounds
+}
+
+export type NodeId = string
+export type LinkId = number
+export type RerouteId = number
+
+// Layout data structures
+export interface NodeLayout {
+  id: NodeId
+  position: Point
+  size: Size
+  zIndex: number
+  visible: boolean
+  // Computed bounds for hit testing
+  bounds: Bounds
+}
+
+export interface SlotLayout {
+  nodeId: NodeId
+  index: number
+  type: 'input' | 'output'
+  position: Point
+  bounds: Bounds
+}
+
+export interface LinkLayout {
+  id: LinkId
+  path: Path2D
+  bounds: Bounds
+  centerPos: Point
+  sourceNodeId: NodeId
+  targetNodeId: NodeId
+  sourceSlot: number
+  targetSlot: number
+}
+
+// Layout for individual link segments (for precise hit-testing)
+export interface LinkSegmentLayout {
+  linkId: LinkId
+  rerouteId: RerouteId | null // null for final segment to target
+  path: Path2D
+  bounds: Bounds
+  centerPos: Point
+}
+
+export interface RerouteLayout {
+  id: RerouteId
+  position: Point
+  radius: number
+  bounds: Bounds
+}
+
+/**
+ * Meta-only base for all operations - contains common fields
+ */
+interface OperationMeta {
+  /** Unique operation ID for deduplication */
+  id?: string
+  /** Timestamp for ordering operations */
+  timestamp: number
+  /** Actor who performed the operation (for CRDT) */
+  actor: string
+  /** Source system that initiated the operation */
+  source: LayoutSource
+  /** Operation type discriminator */
+  type: OperationType
+}
+
+/**
+ * Entity-specific base types for proper type discrimination
+ */
+type NodeOpBase = OperationMeta & { entity: 'node'; nodeId: NodeId }
+type LinkOpBase = OperationMeta & { entity: 'link'; linkId: LinkId }
+type RerouteOpBase = OperationMeta & {
+  entity: 'reroute'
+  rerouteId: RerouteId
+}
+
+/**
+ * Operation type discriminator for type narrowing
+ */
+type OperationType =
+  | 'moveNode'
+  | 'resizeNode'
+  | 'setNodeZIndex'
+  | 'createNode'
+  | 'deleteNode'
+  | 'setNodeVisibility'
+  | 'batchUpdate'
+  | 'createLink'
+  | 'deleteLink'
+  | 'createReroute'
+  | 'deleteReroute'
+  | 'moveReroute'
+
+/**
+ * Move node operation
+ */
+export interface MoveNodeOperation extends NodeOpBase {
+  type: 'moveNode'
+  position: Point
+  previousPosition: Point
+}
+
+/**
+ * Resize node operation
+ */
+export interface ResizeNodeOperation extends NodeOpBase {
+  type: 'resizeNode'
+  size: { width: number; height: number }
+  previousSize: { width: number; height: number }
+}
+
+/**
+ * Set node z-index operation
+ */
+export interface SetNodeZIndexOperation extends NodeOpBase {
+  type: 'setNodeZIndex'
+  zIndex: number
+  previousZIndex: number
+}
+
+/**
+ * Create node operation
+ */
+export interface CreateNodeOperation extends NodeOpBase {
+  type: 'createNode'
+  layout: NodeLayout
+}
+
+/**
+ * Delete node operation
+ */
+export interface DeleteNodeOperation extends NodeOpBase {
+  type: 'deleteNode'
+  previousLayout: NodeLayout
+}
+
+/**
+ * Set node visibility operation
+ */
+interface SetNodeVisibilityOperation extends NodeOpBase {
+  type: 'setNodeVisibility'
+  visible: boolean
+  previousVisible: boolean
+}
+
+/**
+ * Batch update operation for atomic multi-property changes
+ */
+interface BatchUpdateOperation extends NodeOpBase {
+  type: 'batchUpdate'
+  updates: Partial<NodeLayout>
+  previousValues: Partial<NodeLayout>
+}
+
+/**
+ * Create link operation
+ */
+export interface CreateLinkOperation extends LinkOpBase {
+  type: 'createLink'
+  sourceNodeId: NodeId
+  sourceSlot: number
+  targetNodeId: NodeId
+  targetSlot: number
+}
+
+/**
+ * Delete link operation
+ */
+export interface DeleteLinkOperation extends LinkOpBase {
+  type: 'deleteLink'
+}
+
+/**
+ * Create reroute operation
+ */
+export interface CreateRerouteOperation extends RerouteOpBase {
+  type: 'createReroute'
+  position: Point
+  parentId?: RerouteId
+  linkIds: LinkId[]
+}
+
+/**
+ * Delete reroute operation
+ */
+export interface DeleteRerouteOperation extends RerouteOpBase {
+  type: 'deleteReroute'
+}
+
+/**
+ * Move reroute operation
+ */
+export interface MoveRerouteOperation extends RerouteOpBase {
+  type: 'moveReroute'
+  position: Point
+  previousPosition: Point
+}
+
+/**
+ * Union of all operation types
+ */
+export type LayoutOperation =
+  | MoveNodeOperation
+  | ResizeNodeOperation
+  | SetNodeZIndexOperation
+  | CreateNodeOperation
+  | DeleteNodeOperation
+  | SetNodeVisibilityOperation
+  | BatchUpdateOperation
+  | CreateLinkOperation
+  | DeleteLinkOperation
+  | CreateRerouteOperation
+  | DeleteRerouteOperation
+  | MoveRerouteOperation
+
+export interface LayoutChange {
+  type: 'create' | 'update' | 'delete'
+  nodeIds: NodeId[]
+  timestamp: number
+  source: LayoutSource
+  operation: LayoutOperation
+}
+
+// Store interfaces
+export interface LayoutStore {
+  // CustomRef accessors for shared write access
+  getNodeLayoutRef(nodeId: NodeId): Ref<NodeLayout | null>
+  getNodesInBounds(bounds: Bounds): ComputedRef<NodeId[]>
+  getAllNodes(): ComputedRef<ReadonlyMap<NodeId, NodeLayout>>
+  getVersion(): ComputedRef<number>
+
+  // Spatial queries (non-reactive)
+  queryNodeAtPoint(point: Point): NodeId | null
+  queryNodesInBounds(bounds: Bounds): NodeId[]
+
+  // Hit testing queries for links, slots, and reroutes
+  queryLinkAtPoint(point: Point, ctx?: CanvasRenderingContext2D): LinkId | null
+  queryLinkSegmentAtPoint(
+    point: Point,
+    ctx?: CanvasRenderingContext2D
+  ): { linkId: LinkId; rerouteId: RerouteId | null } | null
+  querySlotAtPoint(point: Point): SlotLayout | null
+  queryRerouteAtPoint(point: Point): RerouteLayout | null
+  queryItemsInBounds(bounds: Bounds): {
+    nodes: NodeId[]
+    links: LinkId[]
+    slots: string[]
+    reroutes: RerouteId[]
+  }
+
+  // Update methods for link, slot, and reroute layouts
+  updateLinkLayout(linkId: LinkId, layout: LinkLayout): void
+  updateLinkSegmentLayout(
+    linkId: LinkId,
+    rerouteId: RerouteId | null,
+    layout: Omit<LinkSegmentLayout, 'linkId' | 'rerouteId'>
+  ): void
+  updateSlotLayout(key: string, layout: SlotLayout): void
+  updateRerouteLayout(rerouteId: RerouteId, layout: RerouteLayout): void
+
+  // Delete methods for cleanup
+  deleteLinkLayout(linkId: LinkId): void
+  deleteLinkSegmentLayout(linkId: LinkId, rerouteId: RerouteId | null): void
+  deleteSlotLayout(key: string): void
+  deleteNodeSlotLayouts(nodeId: NodeId): void
+  deleteRerouteLayout(rerouteId: RerouteId): void
+  clearAllSlotLayouts(): void
+
+  // Get layout data
+  getLinkLayout(linkId: LinkId): LinkLayout | null
+  getSlotLayout(key: string): SlotLayout | null
+  getRerouteLayout(rerouteId: RerouteId): RerouteLayout | null
+
+  // Direct mutation API (CRDT-ready)
+  applyOperation(operation: LayoutOperation): void
+
+  // Change subscription
+  onChange(callback: (change: LayoutChange) => void): () => void
+
+  // Initialization
+  initializeFromLiteGraph(
+    nodes: Array<{ id: string; pos: [number, number]; size: [number, number] }>
+  ): void
+
+  // Source and actor management
+  setSource(source: LayoutSource): void
+  setActor(actor: string): void
+  getCurrentSource(): LayoutSource
+  getCurrentActor(): string
+
+  // Batch updates
+  batchUpdateNodeBounds(
+    updates: Array<{ nodeId: NodeId; bounds: Bounds }>
+  ): void
+}
diff --git a/src/renderer/core/layout/useTransformState.ts b/src/renderer/core/layout/useTransformState.ts
new file mode 100644
index 000000000..d0ff76d4e
--- /dev/null
+++ b/src/renderer/core/layout/useTransformState.ts
@@ -0,0 +1,246 @@
+/**
+ * Composable for managing transform state synchronized with LiteGraph canvas
+ *
+ * This composable is a critical part of the hybrid rendering architecture that
+ * allows Vue components to render in perfect alignment with LiteGraph's canvas.
+ *
+ * ## Core Concept
+ *
+ * LiteGraph uses a canvas for rendering connections, grid, and handling interactions.
+ * Vue components need to render nodes on top of this canvas. The challenge is
+ * synchronizing the coordinate systems:
+ *
+ * - LiteGraph: Uses canvas coordinates with its own transform matrix
+ * - Vue/DOM: Uses screen coordinates with CSS transforms
+ *
+ * ## Solution: Transform Container Pattern
+ *
+ * Instead of transforming individual nodes (O(n) complexity), we:
+ * 1. Mirror LiteGraph's transform matrix to a single CSS container
+ * 2. Place all Vue nodes as children with simple absolute positioning
+ * 3. Achieve O(1) transform updates regardless of node count
+ *
+ * ## Coordinate Systems
+ *
+ * - **Canvas coordinates**: LiteGraph's internal coordinate system
+ * - **Screen coordinates**: Browser's viewport coordinate system
+ * - **Transform sync**: camera.x/y/z mirrors canvas.ds.offset/scale
+ *
+ * ## Performance Benefits
+ *
+ * - GPU acceleration via CSS transforms
+ * - No layout thrashing (only transform changes)
+ * - Efficient viewport culling calculations
+ * - Scales to 1000+ nodes while maintaining 60 FPS
+ *
+ * @example
+ * ```typescript
+ * const { camera, transformStyle, canvasToScreen } = useTransformState()
+ *
+ * // In template
+ * <div :style="transformStyle">
+ *   <NodeComponent
+ *     v-for="node in nodes"
+ *     :style="{ left: node.x + 'px', top: node.y + 'px' }"
+ *   />
+ * </div>
+ *
+ * // Convert coordinates
+ * const screenPos = canvasToScreen({ x: nodeX, y: nodeY })
+ * ```
+ */
+import { computed, reactive, readonly } from 'vue'
+
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface Camera {
+  x: number
+  y: number
+  z: number // scale/zoom
+}
+
+export const useTransformState = () => {
+  // Reactive state mirroring LiteGraph's canvas transform
+  const camera = reactive<Camera>({
+    x: 0,
+    y: 0,
+    z: 1
+  })
+
+  // Computed transform string for CSS
+  const transformStyle = computed(() => ({
+    // Match LiteGraph DragAndScale.toCanvasContext():
+    // ctx.scale(scale); ctx.translate(offset)
+    // CSS applies right-to-left, so "scale() translate()" -> translate first, then scale
+    // Effective mapping: screen = (canvas + offset) * scale
+    transform: `scale(${camera.z}) translate(${camera.x}px, ${camera.y}px)`,
+    transformOrigin: '0 0'
+  }))
+
+  /**
+   * Synchronizes Vue's reactive camera state with LiteGraph's canvas transform
+   *
+   * Called every frame via RAF to ensure Vue components stay aligned with canvas.
+   * This is the heart of the hybrid rendering system - it bridges the gap between
+   * LiteGraph's canvas transforms and Vue's reactive system.
+   *
+   * @param canvas - LiteGraph canvas instance with DragAndScale (ds) transform state
+   */
+  const syncWithCanvas = (canvas: LGraphCanvas) => {
+    if (!canvas || !canvas.ds) return
+
+    // Mirror LiteGraph's transform state to Vue's reactive state
+    // ds.offset = pan offset, ds.scale = zoom level
+    camera.x = canvas.ds.offset[0]
+    camera.y = canvas.ds.offset[1]
+    camera.z = canvas.ds.scale || 1
+  }
+
+  /**
+   * Converts canvas coordinates to screen coordinates
+   *
+   * Applies the same transform that LiteGraph uses for rendering.
+   * Essential for positioning Vue components to align with canvas elements.
+   *
+   * Formula: screen = (canvas + offset) * scale
+   *
+   * @param point - Point in canvas coordinate system
+   * @returns Point in screen coordinate system
+   */
+  const canvasToScreen = (point: Point): Point => {
+    return {
+      x: (point.x + camera.x) * camera.z,
+      y: (point.y + camera.y) * camera.z
+    }
+  }
+
+  /**
+   * Converts screen coordinates to canvas coordinates
+   *
+   * Inverse of canvasToScreen. Useful for hit testing and converting
+   * mouse events back to canvas space.
+   *
+   * Formula: canvas = screen / scale - offset
+   *
+   * @param point - Point in screen coordinate system
+   * @returns Point in canvas coordinate system
+   */
+  const screenToCanvas = (point: Point): Point => {
+    return {
+      x: point.x / camera.z - camera.x,
+      y: point.y / camera.z - camera.y
+    }
+  }
+
+  // Get node's screen bounds for culling
+  const getNodeScreenBounds = (
+    pos: ArrayLike<number>,
+    size: ArrayLike<number>
+  ): DOMRect => {
+    const topLeft = canvasToScreen({ x: pos[0], y: pos[1] })
+    const width = size[0] * camera.z
+    const height = size[1] * camera.z
+
+    return new DOMRect(topLeft.x, topLeft.y, width, height)
+  }
+
+  // Helper: Calculate zoom-adjusted margin for viewport culling
+  const calculateAdjustedMargin = (baseMargin: number): number => {
+    if (camera.z < 0.1) return Math.min(baseMargin * 5, 2.0)
+    if (camera.z > 3.0) return Math.max(baseMargin * 0.5, 0.05)
+    return baseMargin
+  }
+
+  // Helper: Check if node is too small to be visible at current zoom
+  const isNodeTooSmall = (nodeSize: ArrayLike<number>): boolean => {
+    const nodeScreenSize = Math.max(nodeSize[0], nodeSize[1]) * camera.z
+    return nodeScreenSize < 4
+  }
+
+  // Helper: Calculate expanded viewport bounds with margin
+  const getExpandedViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+    return {
+      left: -marginX,
+      right: viewport.width + marginX,
+      top: -marginY,
+      bottom: viewport.height + marginY
+    }
+  }
+
+  // Helper: Test if node intersects with viewport bounds
+  const testViewportIntersection = (
+    screenPos: { x: number; y: number },
+    nodeSize: ArrayLike<number>,
+    bounds: { left: number; right: number; top: number; bottom: number }
+  ): boolean => {
+    const nodeRight = screenPos.x + nodeSize[0] * camera.z
+    const nodeBottom = screenPos.y + nodeSize[1] * camera.z
+
+    return !(
+      nodeRight < bounds.left ||
+      screenPos.x > bounds.right ||
+      nodeBottom < bounds.top ||
+      screenPos.y > bounds.bottom
+    )
+  }
+
+  // Check if node is within viewport with frustum and size-based culling
+  const isNodeInViewport = (
+    nodePos: ArrayLike<number>,
+    nodeSize: ArrayLike<number>,
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ): boolean => {
+    // Early exit for tiny nodes
+    if (isNodeTooSmall(nodeSize)) return false
+
+    const screenPos = canvasToScreen({ x: nodePos[0], y: nodePos[1] })
+    const adjustedMargin = calculateAdjustedMargin(margin)
+    const bounds = getExpandedViewportBounds(viewport, adjustedMargin)
+
+    return testViewportIntersection(screenPos, nodeSize, bounds)
+  }
+
+  // Get viewport bounds in canvas coordinates (for spatial index queries)
+  const getViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+
+    const topLeft = screenToCanvas({ x: -marginX, y: -marginY })
+    const bottomRight = screenToCanvas({
+      x: viewport.width + marginX,
+      y: viewport.height + marginY
+    })
+
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      width: bottomRight.x - topLeft.x,
+      height: bottomRight.y - topLeft.y
+    }
+  }
+
+  return {
+    camera: readonly(camera),
+    transformStyle,
+    syncWithCanvas,
+    canvasToScreen,
+    screenToCanvas,
+    getNodeScreenBounds,
+    isNodeInViewport,
+    getViewportBounds
+  }
+}
diff --git a/src/renderer/core/spatial/QuadTree.ts b/src/renderer/core/spatial/QuadTree.ts
new file mode 100644
index 000000000..e24692cf5
--- /dev/null
+++ b/src/renderer/core/spatial/QuadTree.ts
@@ -0,0 +1,302 @@
+/**
+ * QuadTree implementation for spatial indexing of nodes
+ * Optimized for viewport culling in large node graphs
+ */
+import type {
+  QuadNodeDebugInfo,
+  SpatialIndexDebugInfo
+} from '@/types/spatialIndex'
+
+export interface Bounds {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+interface QuadTreeItem<T> {
+  id: string
+  bounds: Bounds
+  data: T
+}
+
+interface QuadTreeOptions {
+  maxDepth?: number
+  maxItemsPerNode?: number
+  minNodeSize?: number
+}
+
+class QuadNode<T> {
+  private bounds: Bounds
+  private depth: number
+  private maxDepth: number
+  private maxItems: number
+  private items: QuadTreeItem<T>[] = []
+  private children: QuadNode<T>[] | null = null
+  private divided = false
+
+  constructor(
+    bounds: Bounds,
+    depth: number = 0,
+    maxDepth: number = 5,
+    maxItems: number = 4
+  ) {
+    this.bounds = bounds
+    this.depth = depth
+    this.maxDepth = maxDepth
+    this.maxItems = maxItems
+  }
+
+  insert(item: QuadTreeItem<T>): boolean {
+    // Check if item is within bounds
+    if (!this.contains(item.bounds)) {
+      return false
+    }
+
+    // If we have space and haven't divided, add to this node
+    if (this.items.length < this.maxItems && !this.divided) {
+      this.items.push(item)
+      return true
+    }
+
+    // If we haven't reached max depth, subdivide
+    if (!this.divided && this.depth < this.maxDepth) {
+      this.subdivide()
+    }
+
+    // If divided, insert into children
+    if (this.divided && this.children) {
+      for (const child of this.children) {
+        if (child.insert(item)) {
+          return true
+        }
+      }
+    }
+
+    // If we can't subdivide further, add to this node anyway
+    this.items.push(item)
+    return true
+  }
+
+  remove(item: QuadTreeItem<T>): boolean {
+    const index = this.items.findIndex((i) => i.id === item.id)
+    if (index !== -1) {
+      this.items.splice(index, 1)
+      return true
+    }
+
+    if (this.divided && this.children) {
+      for (const child of this.children) {
+        if (child.remove(item)) {
+          return true
+        }
+      }
+    }
+
+    return false
+  }
+
+  query(
+    searchBounds: Bounds,
+    found: QuadTreeItem<T>[] = []
+  ): QuadTreeItem<T>[] {
+    // Check if search area intersects with this node
+    if (!this.intersects(searchBounds)) {
+      return found
+    }
+
+    // Add items in this node that intersect with search bounds
+    for (const item of this.items) {
+      if (this.boundsIntersect(item.bounds, searchBounds)) {
+        found.push(item)
+      }
+    }
+
+    // Recursively search children
+    if (this.divided && this.children) {
+      for (const child of this.children) {
+        child.query(searchBounds, found)
+      }
+    }
+
+    return found
+  }
+
+  private subdivide() {
+    const { x, y, width, height } = this.bounds
+    const halfWidth = width / 2
+    const halfHeight = height / 2
+
+    this.children = [
+      // Top-left
+      new QuadNode<T>(
+        { x, y, width: halfWidth, height: halfHeight },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      ),
+      // Top-right
+      new QuadNode<T>(
+        { x: x + halfWidth, y, width: halfWidth, height: halfHeight },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      ),
+      // Bottom-left
+      new QuadNode<T>(
+        { x, y: y + halfHeight, width: halfWidth, height: halfHeight },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      ),
+      // Bottom-right
+      new QuadNode<T>(
+        {
+          x: x + halfWidth,
+          y: y + halfHeight,
+          width: halfWidth,
+          height: halfHeight
+        },
+        this.depth + 1,
+        this.maxDepth,
+        this.maxItems
+      )
+    ]
+
+    this.divided = true
+
+    // Redistribute existing items to children
+    const itemsToRedistribute = [...this.items]
+    this.items = []
+
+    for (const item of itemsToRedistribute) {
+      let inserted = false
+      for (const child of this.children) {
+        if (child.insert(item)) {
+          inserted = true
+          break
+        }
+      }
+      // Keep in parent if it doesn't fit in any child
+      if (!inserted) {
+        this.items.push(item)
+      }
+    }
+  }
+
+  private contains(itemBounds: Bounds): boolean {
+    return (
+      itemBounds.x >= this.bounds.x &&
+      itemBounds.y >= this.bounds.y &&
+      itemBounds.x + itemBounds.width <= this.bounds.x + this.bounds.width &&
+      itemBounds.y + itemBounds.height <= this.bounds.y + this.bounds.height
+    )
+  }
+
+  private intersects(searchBounds: Bounds): boolean {
+    return this.boundsIntersect(this.bounds, searchBounds)
+  }
+
+  private boundsIntersect(a: Bounds, b: Bounds): boolean {
+    return !(
+      a.x + a.width < b.x ||
+      b.x + b.width < a.x ||
+      a.y + a.height < b.y ||
+      b.y + b.height < a.y
+    )
+  }
+
+  // Debug helper to get tree structure
+  getDebugInfo(): QuadNodeDebugInfo {
+    return {
+      bounds: this.bounds,
+      depth: this.depth,
+      itemCount: this.items.length,
+      divided: this.divided,
+      children: this.children?.map((child) => child.getDebugInfo())
+    }
+  }
+}
+
+export class QuadTree<T> {
+  private root: QuadNode<T>
+  private itemMap: Map<string, QuadTreeItem<T>> = new Map()
+  private options: Required<QuadTreeOptions>
+
+  constructor(bounds: Bounds, options: QuadTreeOptions = {}) {
+    this.options = {
+      maxDepth: options.maxDepth ?? 5,
+      maxItemsPerNode: options.maxItemsPerNode ?? 4,
+      minNodeSize: options.minNodeSize ?? 50
+    }
+
+    this.root = new QuadNode<T>(
+      bounds,
+      0,
+      this.options.maxDepth,
+      this.options.maxItemsPerNode
+    )
+  }
+
+  insert(id: string, bounds: Bounds, data: T): boolean {
+    const item: QuadTreeItem<T> = { id, bounds, data }
+
+    // Remove old item if it exists
+    if (this.itemMap.has(id)) {
+      this.remove(id)
+    }
+
+    const success = this.root.insert(item)
+    if (success) {
+      this.itemMap.set(id, item)
+    }
+    return success
+  }
+
+  remove(id: string): boolean {
+    const item = this.itemMap.get(id)
+    if (!item) return false
+
+    const success = this.root.remove(item)
+    if (success) {
+      this.itemMap.delete(id)
+    }
+    return success
+  }
+
+  update(id: string, newBounds: Bounds): boolean {
+    const item = this.itemMap.get(id)
+    if (!item) return false
+
+    // Remove and re-insert with new bounds
+    const data = item.data
+    this.remove(id)
+    return this.insert(id, newBounds, data)
+  }
+
+  query(searchBounds: Bounds): T[] {
+    const items = this.root.query(searchBounds)
+    return items.map((item) => item.data)
+  }
+
+  clear() {
+    this.root = new QuadNode<T>(
+      this.root['bounds'],
+      0,
+      this.options.maxDepth,
+      this.options.maxItemsPerNode
+    )
+    this.itemMap.clear()
+  }
+
+  get size(): number {
+    return this.itemMap.size
+  }
+
+  getDebugInfo(): SpatialIndexDebugInfo {
+    return {
+      size: this.size,
+      tree: this.root.getDebugInfo()
+    }
+  }
+}
diff --git a/src/renderer/core/spatial/SpatialIndex.ts b/src/renderer/core/spatial/SpatialIndex.ts
new file mode 100644
index 000000000..92a4a627f
--- /dev/null
+++ b/src/renderer/core/spatial/SpatialIndex.ts
@@ -0,0 +1,170 @@
+/**
+ * Spatial Index Manager
+ *
+ * Manages spatial indexing for efficient node queries based on bounds.
+ * Uses QuadTree for fast spatial lookups with caching for performance.
+ */
+import {
+  PERFORMANCE_CONFIG,
+  QUADTREE_CONFIG
+} from '@/renderer/core/layout/constants'
+import type { Bounds, NodeId } from '@/renderer/core/layout/types'
+
+import { QuadTree } from './QuadTree'
+
+/**
+ * Cache entry for spatial queries
+ */
+interface CacheEntry {
+  result: NodeId[]
+  timestamp: number
+}
+
+/**
+ * Spatial index manager using QuadTree
+ */
+export class SpatialIndexManager {
+  private quadTree: QuadTree<NodeId>
+  private queryCache: Map<string, CacheEntry>
+  private cacheSize = 0
+
+  constructor(bounds?: Bounds) {
+    this.quadTree = new QuadTree<NodeId>(
+      bounds ?? QUADTREE_CONFIG.DEFAULT_BOUNDS,
+      {
+        maxDepth: QUADTREE_CONFIG.MAX_DEPTH,
+        maxItemsPerNode: QUADTREE_CONFIG.MAX_ITEMS_PER_NODE
+      }
+    )
+    this.queryCache = new Map()
+  }
+
+  /**
+   * Insert a node into the spatial index
+   */
+  insert(nodeId: NodeId, bounds: Bounds): void {
+    this.quadTree.insert(nodeId, bounds, nodeId)
+    this.invalidateCache()
+  }
+
+  /**
+   * Update a node's bounds in the spatial index
+   */
+  update(nodeId: NodeId, bounds: Bounds): void {
+    this.quadTree.update(nodeId, bounds)
+    this.invalidateCache()
+  }
+
+  /**
+   * Remove a node from the spatial index
+   */
+  remove(nodeId: NodeId): void {
+    this.quadTree.remove(nodeId)
+    this.invalidateCache()
+  }
+
+  /**
+   * Query nodes within the given bounds
+   */
+  query(bounds: Bounds): NodeId[] {
+    const cacheKey = this.getCacheKey(bounds)
+    const cached = this.queryCache.get(cacheKey)
+
+    // Check cache validity
+    if (cached) {
+      const age = Date.now() - cached.timestamp
+      if (age < PERFORMANCE_CONFIG.SPATIAL_CACHE_TTL) {
+        return cached.result
+      }
+      // Remove stale entry
+      this.queryCache.delete(cacheKey)
+      this.cacheSize--
+    }
+
+    // Perform query
+    const result = this.quadTree.query(bounds)
+
+    // Cache result
+    this.addToCache(cacheKey, result)
+
+    return result
+  }
+
+  /**
+   * Clear all nodes from the spatial index
+   */
+  clear(): void {
+    this.quadTree.clear()
+    this.invalidateCache()
+  }
+
+  /**
+   * Get the current size of the index
+   */
+  get size(): number {
+    return this.quadTree.size
+  }
+
+  /**
+   * Get debug information about the spatial index
+   */
+  getDebugInfo() {
+    return {
+      quadTreeInfo: this.quadTree.getDebugInfo(),
+      cacheSize: this.cacheSize,
+      cacheEntries: this.queryCache.size
+    }
+  }
+
+  /**
+   * Generate cache key for bounds
+   */
+  private getCacheKey(bounds: Bounds): string {
+    return `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`
+  }
+
+  /**
+   * Add result to cache with LRU eviction
+   */
+  private addToCache(key: string, result: NodeId[]): void {
+    // Evict oldest entries if cache is full
+    if (this.cacheSize >= PERFORMANCE_CONFIG.SPATIAL_CACHE_MAX_SIZE) {
+      const oldestKey = this.findOldestCacheEntry()
+      if (oldestKey) {
+        this.queryCache.delete(oldestKey)
+        this.cacheSize--
+      }
+    }
+
+    this.queryCache.set(key, {
+      result,
+      timestamp: Date.now()
+    })
+    this.cacheSize++
+  }
+
+  /**
+   * Find oldest cache entry for LRU eviction
+   */
+  private findOldestCacheEntry(): string | null {
+    let oldestKey: string | null = null
+    let oldestTime = Infinity
+
+    for (const [key, entry] of this.queryCache) {
+      if (entry.timestamp < oldestTime) {
+        oldestTime = entry.timestamp
+        oldestKey = key
+      }
+    }
+
+    return oldestKey
+  }
+
+  /**
+   * Invalidate all cached queries
+   */
+  private invalidateCache(): void {
+    this.queryCache.clear()
+    this.cacheSize = 0
+  }
+}
diff --git a/src/renderer/core/spatial/boundsCalculator.ts b/src/renderer/core/spatial/boundsCalculator.ts
index 50a4f708b..384663447 100644
--- a/src/renderer/core/spatial/boundsCalculator.ts
+++ b/src/renderer/core/spatial/boundsCalculator.ts
@@ -2,7 +2,7 @@
  * Spatial bounds calculations for node layouts
  */
 
-export interface SpatialBounds {
+interface SpatialBounds {
   minX: number
   minY: number
   maxX: number
@@ -11,7 +11,7 @@ export interface SpatialBounds {
   height: number
 }
 
-export interface PositionedNode {
+interface PositionedNode {
   pos: ArrayLike<number>
   size: ArrayLike<number>
 }
diff --git a/src/components/graph/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
similarity index 100%
rename from src/components/graph/MiniMap.vue
rename to src/renderer/extensions/minimap/MiniMap.vue
diff --git a/src/components/graph/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
similarity index 100%
rename from src/components/graph/MiniMapPanel.vue
rename to src/renderer/extensions/minimap/MiniMapPanel.vue
diff --git a/src/renderer/extensions/minimap/types.ts b/src/renderer/extensions/minimap/types.ts
index 38f464f97..fbea21c83 100644
--- a/src/renderer/extensions/minimap/types.ts
+++ b/src/renderer/extensions/minimap/types.ts
@@ -29,7 +29,7 @@ export interface MinimapRenderContext {
   height: number
 }
 
-export interface MinimapRenderSettings {
+interface MinimapRenderSettings {
   nodeColors: boolean
   showLinks: boolean
   showGroups: boolean
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
new file mode 100644
index 000000000..124597d6b
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -0,0 +1,102 @@
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div
+    v-else
+    class="lg-slot lg-slot--input flex items-center cursor-crosshair group rounded-r-lg h-6"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pr-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly
+    }"
+  >
+    <!-- Connection Dot -->
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="-translate-x-1/2"
+    />
+
+    <!-- Slot Name -->
+    <span
+      v-if="!dotOnly"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
+    >
+      {{ slotData.localized_name || slotData.name || `Input ${index}` }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  onErrorCaptured,
+  ref,
+  watchEffect
+} from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getSlotColor } from '@/constants/slotColors'
+import { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+// DOM-based slot registration for arbitrary positioning
+import {
+  type TransformState,
+  useDomSlotRegistration
+} from '@/renderer/core/layout/slots/useDomSlotRegistration'
+
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
+interface InputSlotProps {
+  node?: LGraphNode
+  nodeId?: string
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<InputSlotProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Get slot color based on type
+const slotColor = computed(() => getSlotColor(props.slotData.type))
+
+const transformState = inject<TransformState | undefined>(
+  'transformState',
+  undefined
+)
+
+const connectionDotRef = ref<ComponentPublicInstance<{
+  slotElRef: HTMLElement | undefined
+}> | null>(null)
+const slotElRef = ref<HTMLElement | null>(null)
+
+// Watch for when the child component's ref becomes available
+// Vue automatically unwraps the Ref when exposing it
+watchEffect(() => {
+  const el = connectionDotRef.value?.slotElRef
+  slotElRef.value = el || null
+})
+
+useDomSlotRegistration({
+  nodeId: props.nodeId ?? '',
+  slotIndex: props.index,
+  isInput: true,
+  element: slotElRef,
+  transform: transformState
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
new file mode 100644
index 000000000..b01300fd3
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -0,0 +1,292 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Render Error') }}
+  </div>
+  <div
+    v-else
+    :data-node-id="nodeData.id"
+    :class="
+      cn(
+        'bg-white dark-theme:bg-charcoal-100',
+        'min-w-[445px]',
+        'lg-node absolute border border-solid rounded-2xl',
+        'outline-transparent outline-2',
+        {
+          'outline-black dark-theme:outline-white': isSelected
+        },
+        {
+          'border-blue-500 ring-2 ring-blue-300': isSelected,
+          'border-sand-100 dark-theme:border-charcoal-300': !isSelected,
+          'animate-pulse': executing,
+          'opacity-50': nodeData.mode === 4,
+          'border-red-500 bg-red-50': error,
+          'will-change-transform': isDragging
+        },
+        lodCssClass,
+        'pointer-events-auto'
+      )
+    "
+    :style="[
+      {
+        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+        zIndex: zIndex
+      },
+      dragStyle
+    ]"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+  >
+    <div class="flex items-center">
+      <template v-if="isCollapsed">
+        <SlotConnectionDot multi class="absolute left-0 -translate-x-1/2" />
+        <SlotConnectionDot multi class="absolute right-0 translate-x-1/2" />
+      </template>
+      <!-- Header only updates on title/color changes -->
+      <NodeHeader
+        v-memo="[nodeData.title, lodLevel, isCollapsed]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+        :collapsed="isCollapsed"
+        @collapse="handleCollapse"
+        @update:title="handleTitleUpdate"
+      />
+    </div>
+
+    <template v-if="!isMinimalLOD && !isCollapsed">
+      <div :class="cn(separatorClasses, 'mb-4')" />
+
+      <!-- Node Body - rendered based on LOD level and collapsed state -->
+      <div
+        class="flex flex-col gap-4 pb-4"
+        :data-testid="`node-body-${nodeData.id}`"
+      >
+        <!-- Slots only rendered at full detail -->
+        <NodeSlots
+          v-if="shouldRenderSlots"
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+          @slot-click="handleSlotClick"
+        />
+
+        <div
+          v-if="shouldRenderSlots && shouldShowWidgets"
+          :class="separatorClasses"
+        />
+
+        <!-- Widgets rendered at reduced+ detail -->
+        <NodeWidgets
+          v-if="shouldShowWidgets"
+          v-memo="[nodeData.widgets?.length, lodLevel]"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+        />
+
+        <div
+          v-if="(shouldRenderSlots || shouldShowWidgets) && shouldShowContent"
+          :class="separatorClasses"
+        />
+
+        <!-- Custom content at reduced+ detail -->
+        <NodeContent
+          v-if="shouldShowContent"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+        />
+      </div>
+    </template>
+
+    <!-- Progress bar for executing state -->
+    <div
+      v-if="executing && progress !== undefined"
+      class="absolute bottom-0 left-0 h-1 bg-primary-500 transition-all duration-300"
+      :style="{ width: `${progress * 100}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onErrorCaptured, ref, toRef, watch } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
+import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { cn } from '@/utils/tailwindUtil'
+
+import { useVueElementTracking } from '../composables/useVueNodeResizeTracking'
+import NodeContent from './NodeContent.vue'
+import NodeHeader from './NodeHeader.vue'
+import NodeSlots from './NodeSlots.vue'
+import NodeWidgets from './NodeWidgets.vue'
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
+// Extended props for main node component
+interface LGraphNodeProps {
+  nodeData: VueNodeData
+  position?: { x: number; y: number }
+  size?: { width: number; height: number }
+  readonly?: boolean
+  executing?: boolean
+  progress?: number
+  error?: string | null
+  zoomLevel?: number
+}
+
+const props = defineProps<LGraphNodeProps>()
+
+const emit = defineEmits<{
+  'node-click': [event: PointerEvent, nodeData: VueNodeData]
+  'slot-click': [
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    slotIndex: number,
+    isInput: boolean
+  ]
+  'update:collapsed': [nodeId: string, collapsed: boolean]
+  'update:title': [nodeId: string, newTitle: string]
+}>()
+
+useVueElementTracking(props.nodeData.id, 'node')
+
+// Inject selection state from parent
+const selectedNodeIds = inject(SelectedNodeIdsKey)
+if (!selectedNodeIds) {
+  throw new Error(
+    'SelectedNodeIds not provided - LGraphNode must be used within a component that provides selection state'
+  )
+}
+
+// Computed selection state - only this node re-evaluates when its selection changes
+const isSelected = computed(() => {
+  return selectedNodeIds.value.has(props.nodeData.id)
+})
+
+// LOD (Level of Detail) system based on zoom level
+const zoomRef = toRef(() => props.zoomLevel ?? 1)
+const {
+  lodLevel,
+  shouldRenderWidgets,
+  shouldRenderSlots,
+  shouldRenderContent,
+  lodCssClass
+} = useLOD(zoomRef)
+
+// Computed properties for template usage
+const isMinimalLOD = computed(() => lodLevel.value === LODLevel.MINIMAL)
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false // Prevent error propagation
+})
+
+// Use layout system for node position and dragging
+const {
+  position: layoutPosition,
+  zIndex,
+  startDrag,
+  handleDrag: handleLayoutDrag,
+  endDrag
+} = useNodeLayout(props.nodeData.id)
+
+// Drag state for styling
+const isDragging = ref(false)
+const dragStyle = computed(() => ({
+  cursor: isDragging.value ? 'grabbing' : 'grab'
+}))
+
+// Track collapsed state
+const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
+
+// Watch for external changes to the collapsed state
+watch(
+  () => props.nodeData.flags?.collapsed,
+  (newCollapsed: boolean | undefined) => {
+    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
+      isCollapsed.value = newCollapsed
+    }
+  }
+)
+
+// Check if node has custom content
+const hasCustomContent = computed(() => {
+  // Currently all content is handled through widgets
+  // This remains false but provides extensibility point
+  return false
+})
+
+// Computed classes and conditions for better reusability
+const separatorClasses =
+  'bg-sand-primary dark-theme:bg-charcoal-tertiary h-[1px] mx-0'
+
+// Common condition computations to avoid repetition
+const shouldShowWidgets = computed(
+  () => shouldRenderWidgets.value && props.nodeData.widgets?.length
+)
+
+const shouldShowContent = computed(
+  () => shouldRenderContent.value && hasCustomContent.value
+)
+
+// Event handlers
+const handlePointerDown = (event: PointerEvent) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handlePointerDown')
+    return
+  }
+
+  // Start drag using layout system
+  isDragging.value = true
+  startDrag(event)
+
+  // Emit node-click for selection handling in GraphCanvas
+  emit('node-click', event, props.nodeData)
+}
+
+const handlePointerMove = (event: PointerEvent) => {
+  if (isDragging.value) {
+    void handleLayoutDrag(event)
+  }
+}
+
+const handlePointerUp = (event: PointerEvent) => {
+  if (isDragging.value) {
+    isDragging.value = false
+    void endDrag(event)
+  }
+}
+
+const handleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  // Emit event so parent can sync with LiteGraph if needed
+  emit('update:collapsed', props.nodeData.id, isCollapsed.value)
+}
+
+const handleSlotClick = (
+  event: PointerEvent,
+  slotIndex: number,
+  isInput: boolean
+) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
+    return
+  }
+  emit('slot-click', event, props.nodeData, slotIndex, isInput)
+}
+
+const handleTitleUpdate = (newTitle: string) => {
+  emit('update:title', props.nodeData.id, newTitle)
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
new file mode 100644
index 000000000..f99e10917
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -0,0 +1,40 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Content Error') }}
+  </div>
+  <div v-else class="lg-node-content">
+    <!-- Default slot for custom content -->
+    <slot>
+      <!-- This component serves as a placeholder for future extensibility -->
+      <!-- Currently all node content is rendered through the widget system -->
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+
+interface NodeContentProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+defineProps<NodeContentProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
new file mode 100644
index 000000000..3b3da3101
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -0,0 +1,115 @@
+<template>
+  <div v-if="renderError" class="node-error p-4 text-red-500 text-sm">
+    {{ $t('Node Header Error') }}
+  </div>
+  <div
+    v-else
+    class="lg-node-header flex items-center justify-between p-4 rounded-t-2xl cursor-move"
+    :data-testid="`node-header-${nodeInfo?.id || ''}`"
+    @dblclick="handleDoubleClick"
+  >
+    <!-- Collapse/Expand Button -->
+    <button
+      v-show="!readonly"
+      class="bg-transparent border-transparent flex items-center"
+      data-testid="node-collapse-button"
+      @click.stop="handleCollapse"
+      @dblclick.stop
+    >
+      <i
+        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
+        class="text-xs leading-none relative top-[1px] text-[#888682] dark-theme:text-[#5B5E7D]"
+      ></i>
+    </button>
+
+    <!-- Node Title -->
+    <div class="text-sm font-bold truncate flex-1" data-testid="node-title">
+      <EditableText
+        :model-value="displayTitle"
+        :is-editing="isEditing"
+        :input-attrs="{ 'data-testid': 'node-title-input' }"
+        @edit="handleTitleEdit"
+        @cancel="handleTitleCancel"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref, watch } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+
+interface NodeHeaderProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+  collapsed?: boolean
+}
+
+const props = defineProps<NodeHeaderProps>()
+
+const emit = defineEmits<{
+  collapse: []
+  'update:title': [newTitle: string]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Editing state
+const isEditing = ref(false)
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Local state for title to provide immediate feedback
+const displayTitle = ref(nodeInfo.value?.title || 'Untitled')
+
+// Watch for external changes to the node title
+watch(
+  () => nodeInfo.value?.title,
+  (newTitle) => {
+    if (newTitle && newTitle !== displayTitle.value) {
+      displayTitle.value = newTitle
+    }
+  }
+)
+
+// Event handlers
+const handleCollapse = () => {
+  emit('collapse')
+}
+
+const handleDoubleClick = () => {
+  if (!props.readonly) {
+    isEditing.value = true
+  }
+}
+
+const handleTitleEdit = (newTitle: string) => {
+  isEditing.value = false
+  const trimmedTitle = newTitle.trim()
+  if (trimmedTitle && trimmedTitle !== displayTitle.value) {
+    // Emit for litegraph sync
+    emit('update:title', trimmedTitle)
+  }
+}
+
+const handleTitleCancel = () => {
+  isEditing.value = false
+  // Reset displayTitle to the current node title
+  displayTitle.value = nodeInfo.value?.title || 'Untitled'
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts b/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
new file mode 100644
index 000000000..522a9e8a6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
@@ -0,0 +1,195 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { describe, expect, it } from 'vitest'
+import { type PropType, defineComponent } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import enMessages from '@/locales/en/main.json'
+
+import NodeSlots from './NodeSlots.vue'
+
+const makeNodeData = (overrides: Partial<VueNodeData> = {}): VueNodeData => ({
+  id: '123',
+  title: 'Test Node',
+  type: 'TestType',
+  mode: 0,
+  selected: false,
+  executing: false,
+  inputs: [],
+  outputs: [],
+  widgets: [],
+  flags: { collapsed: false },
+  ...overrides
+})
+
+// Explicit stubs to capture props for assertions
+interface StubSlotData {
+  name?: string
+  type?: string
+  boundingRect?: [number, number, number, number]
+}
+
+const InputSlotStub = defineComponent({
+  name: 'InputSlot',
+  props: {
+    slotData: { type: Object as PropType<StubSlotData>, required: true },
+    nodeId: { type: String, required: false, default: '' },
+    index: { type: Number, required: true },
+    readonly: { type: Boolean, required: false, default: false }
+  },
+  template: `
+    <div
+      class="stub-input-slot"
+      :data-index="index"
+      :data-name="slotData && slotData.name ? slotData.name : ''"
+      :data-type="slotData && slotData.type ? slotData.type : ''"
+      :data-node-id="nodeId"
+      :data-readonly="readonly ? 'true' : 'false'"
+    />
+  `
+})
+
+const OutputSlotStub = defineComponent({
+  name: 'OutputSlot',
+  props: {
+    slotData: { type: Object as PropType<StubSlotData>, required: true },
+    nodeId: { type: String, required: false, default: '' },
+    index: { type: Number, required: true },
+    readonly: { type: Boolean, required: false, default: false }
+  },
+  template: `
+    <div
+      class="stub-output-slot"
+      :data-index="index"
+      :data-name="slotData && slotData.name ? slotData.name : ''"
+      :data-type="slotData && slotData.type ? slotData.type : ''"
+      :data-node-id="nodeId"
+      :data-readonly="readonly ? 'true' : 'false'"
+    />
+  `
+})
+
+const mountSlots = (nodeData: VueNodeData, readonly = false) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: { en: enMessages }
+  })
+  return mount(NodeSlots, {
+    global: {
+      plugins: [i18n, createPinia()],
+      stubs: {
+        InputSlot: InputSlotStub,
+        OutputSlot: OutputSlotStub
+      }
+    },
+    props: { nodeData, readonly }
+  })
+}
+
+describe('NodeSlots.vue', () => {
+  it('filters out inputs with widget property and maps indexes correctly', () => {
+    // Two inputs without widgets (object and string) and one with widget (filtered)
+    const inputObjNoWidget = {
+      name: 'objNoWidget',
+      type: 'number',
+      boundingRect: [0, 0, 0, 0]
+    }
+    const inputObjWithWidget = {
+      name: 'objWithWidget',
+      type: 'number',
+      boundingRect: [0, 0, 0, 0],
+      widget: { name: 'objWithWidget' }
+    }
+    const inputs = [inputObjNoWidget, inputObjWithWidget, 'stringInput']
+
+    const wrapper = mountSlots(makeNodeData({ inputs }))
+
+    const inputEls = wrapper
+      .findAll('.stub-input-slot')
+      .map((w) => w.element as HTMLElement)
+    // Should filter out the widget-backed input; expect 2 inputs rendered
+    expect(inputEls.length).toBe(2)
+
+    // Verify expected tuple of {index, name, nodeId}
+    const info = inputEls.map((el) => ({
+      index: Number(el.dataset.index),
+      name: el.dataset.name ?? '',
+      nodeId: el.dataset.nodeId ?? '',
+      type: el.dataset.type ?? '',
+      readonly: el.dataset.readonly === 'true'
+    }))
+    expect(info).toEqual([
+      {
+        index: 0,
+        name: 'objNoWidget',
+        nodeId: '123',
+        type: 'number',
+        readonly: false
+      },
+      // string input is converted to object with default type 'any'
+      {
+        index: 1,
+        name: 'stringInput',
+        nodeId: '123',
+        type: 'any',
+        readonly: false
+      }
+    ])
+
+    // Ensure widget-backed input was indeed filtered out
+    expect(wrapper.find('[data-name="objWithWidget"]').exists()).toBe(false)
+  })
+
+  it('maps outputs and passes correct indexes', () => {
+    const outputObj = { name: 'outA', type: 'any', boundingRect: [0, 0, 0, 0] }
+    const outputs = [outputObj, 'outB']
+
+    const wrapper = mountSlots(makeNodeData({ outputs }))
+    const outputEls = wrapper
+      .findAll('.stub-output-slot')
+      .map((w) => w.element as HTMLElement)
+
+    expect(outputEls.length).toBe(2)
+    const outInfo = outputEls.map((el) => ({
+      index: Number(el.dataset.index),
+      name: el.dataset.name ?? '',
+      nodeId: el.dataset.nodeId ?? '',
+      type: el.dataset.type ?? '',
+      readonly: el.dataset.readonly === 'true'
+    }))
+    expect(outInfo).toEqual([
+      { index: 0, name: 'outA', nodeId: '123', type: 'any', readonly: false },
+      // string output mapped to object with type 'any'
+      { index: 1, name: 'outB', nodeId: '123', type: 'any', readonly: false }
+    ])
+  })
+
+  it('renders nothing when there are no inputs/outputs', () => {
+    const wrapper = mountSlots(makeNodeData({ inputs: [], outputs: [] }))
+    expect(wrapper.findAll('.stub-input-slot').length).toBe(0)
+    expect(wrapper.findAll('.stub-output-slot').length).toBe(0)
+  })
+
+  it('passes readonly to child slots', () => {
+    const wrapper = mountSlots(
+      makeNodeData({ inputs: ['a'], outputs: ['b'] }),
+      /* readonly */ true
+    )
+    const all = [
+      ...wrapper
+        .findAll('.stub-input-slot')
+        .filter((w) => w.element instanceof HTMLElement)
+        .map((w) => w.element as HTMLElement),
+      ...wrapper
+        .findAll('.stub-output-slot')
+        .filter((w) => w.element instanceof HTMLElement)
+        .map((w) => w.element as HTMLElement)
+    ]
+    expect(all.length).toBe(2)
+    for (const el of all) {
+      expect.soft(el.dataset.readonly).toBe('true')
+    }
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
new file mode 100644
index 000000000..68f247932
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -0,0 +1,113 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Slots Error') }}
+  </div>
+  <div v-else class="lg-node-slots flex justify-between">
+    <div v-if="filteredInputs.length" class="flex flex-col gap-1">
+      <InputSlot
+        v-for="(input, index) in filteredInputs"
+        :key="`input-${index}`"
+        :slot-data="input"
+        :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''"
+        :index="getActualInputIndex(input, index)"
+        :readonly="readonly"
+      />
+    </div>
+
+    <div v-if="filteredOutputs.length" class="flex flex-col gap-1 ml-auto">
+      <OutputSlot
+        v-for="(output, index) in filteredOutputs"
+        :key="`output-${index}`"
+        :slot-data="output"
+        :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''"
+        :index="index"
+        :readonly="readonly"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { isSlotObject } from '@/utils/typeGuardUtil'
+
+import InputSlot from './InputSlot.vue'
+import OutputSlot from './OutputSlot.vue'
+
+interface NodeSlotsProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeSlotsProps>()
+
+const nodeInfo = computed(() => props.nodeData || props.node || null)
+
+// Filter out input slots that have corresponding widgets
+const filteredInputs = computed(() => {
+  if (!nodeInfo.value?.inputs) return []
+
+  return nodeInfo.value.inputs
+    .filter((input) => {
+      // Check if this slot has a widget property (indicating it has a corresponding widget)
+      if (isSlotObject(input) && 'widget' in input && input.widget) {
+        // This slot has a widget, so we should not display it separately
+        return false
+      }
+      return true
+    })
+    .map((input) =>
+      isSlotObject(input)
+        ? input
+        : ({
+            name: typeof input === 'string' ? input : '',
+            type: 'any',
+            boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+          } as INodeSlot)
+    )
+})
+
+// Outputs don't have widgets, so we don't need to filter them
+const filteredOutputs = computed(() => {
+  const outputs = nodeInfo.value?.outputs || []
+  return outputs.map((output) =>
+    isSlotObject(output)
+      ? output
+      : ({
+          name: typeof output === 'string' ? output : '',
+          type: 'any',
+          boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+        } as INodeSlot)
+  )
+})
+
+// Get the actual index of an input slot in the node's inputs array
+// (accounting for filtered widget slots)
+const getActualInputIndex = (
+  input: INodeSlot,
+  filteredIndex: number
+): number => {
+  if (!nodeInfo.value?.inputs) return filteredIndex
+
+  // Find the actual index in the unfiltered inputs array
+  const actualIndex = nodeInfo.value.inputs.findIndex((i) => i === input)
+  return actualIndex !== -1 ? actualIndex : filteredIndex
+}
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
new file mode 100644
index 000000000..0cd7a59cc
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -0,0 +1,155 @@
+<template>
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    {{ $t('Node Widgets Error') }}
+  </div>
+  <div v-else class="lg-node-widgets flex flex-col gap-2 pr-4">
+    <div
+      v-for="(widget, index) in processedWidgets"
+      :key="`widget-${index}-${widget.name}`"
+      class="lg-widget-container relative flex items-center group"
+    >
+      <!-- Widget Input Slot Dot -->
+      <div
+        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+      >
+        <InputSlot
+          :slot-data="{
+            name: widget.name,
+            type: widget.type,
+            boundingRect: [0, 0, 0, 0]
+          }"
+          :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''"
+          :index="getWidgetInputIndex(widget)"
+          :readonly="readonly"
+          :dot-only="true"
+        />
+      </div>
+      <!-- Widget Component -->
+      <component
+        :is="widget.vueComponent"
+        :widget="widget.simplified"
+        :model-value="widget.value"
+        :readonly="readonly"
+        class="flex-1"
+        @update:model-value="widget.updateHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref } from 'vue'
+
+import type {
+  SafeWidgetData,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+// Import widget components directly
+import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
+import {
+  getComponent,
+  isEssential,
+  shouldRenderAsVue
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+import InputSlot from './InputSlot.vue'
+
+interface NodeWidgetsProps {
+  node?: LGraphNode
+  nodeData?: VueNodeData
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeWidgetsProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+interface ProcessedWidget {
+  name: string
+  type: string
+  vueComponent: any
+  simplified: SimplifiedWidget
+  value: WidgetValue
+  updateHandler: (value: unknown) => void
+}
+
+const processedWidgets = computed((): ProcessedWidget[] => {
+  const info = nodeInfo.value
+  if (!info?.widgets) return []
+
+  const widgets = info.widgets as SafeWidgetData[]
+  const lodLevel = props.lodLevel
+  const result: ProcessedWidget[] = []
+
+  if (lodLevel === LODLevel.MINIMAL) {
+    return []
+  }
+
+  for (const widget of widgets) {
+    if (widget.options?.hidden) continue
+    if (widget.options?.canvasOnly) continue
+    if (!widget.type) continue
+    if (!shouldRenderAsVue(widget)) continue
+
+    if (lodLevel === LODLevel.REDUCED && !isEssential(widget.type)) continue
+
+    const vueComponent = getComponent(widget.type) || WidgetInputText
+
+    const simplified: SimplifiedWidget = {
+      name: widget.name,
+      type: widget.type,
+      value: widget.value,
+      options: widget.options,
+      callback: widget.callback
+    }
+
+    const updateHandler = (value: unknown) => {
+      if (widget.callback) {
+        widget.callback(value)
+      }
+    }
+
+    result.push({
+      name: widget.name,
+      type: widget.type,
+      vueComponent,
+      simplified,
+      value: widget.value,
+      updateHandler
+    })
+  }
+
+  return result
+})
+
+// TODO: Refactor to avoid O(n) lookup - consider storing input index on widget creation
+// or restructuring data model to unify widgets and inputs
+// Map a widget to its corresponding input slot index
+const getWidgetInputIndex = (widget: ProcessedWidget): number => {
+  const inputs = nodeInfo.value?.inputs
+  if (!inputs) return 0
+
+  const idx = inputs.findIndex((input: any) => {
+    if (!input || typeof input !== 'object') return false
+    if (!('name' in input && 'type' in input)) return false
+    return 'widget' in input && input.widget?.name === widget.name
+  })
+  return idx >= 0 ? idx : 0
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
new file mode 100644
index 000000000..e83019aa9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -0,0 +1,104 @@
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div
+    v-else
+    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group rounded-l-lg h-6"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pl-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly,
+      'justify-center': dotOnly
+    }"
+  >
+    <!-- Slot Name -->
+    <span
+      v-if="!dotOnly"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
+    >
+      {{ slotData.name || `Output ${index}` }}
+    </span>
+
+    <!-- Connection Dot -->
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="translate-x-1/2"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  onErrorCaptured,
+  ref,
+  watchEffect
+} from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getSlotColor } from '@/constants/slotColors'
+import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+// DOM-based slot registration for arbitrary positioning
+import {
+  type TransformState,
+  useDomSlotRegistration
+} from '@/renderer/core/layout/slots/useDomSlotRegistration'
+
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
+interface OutputSlotProps {
+  node?: LGraphNode
+  nodeId?: string
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<OutputSlotProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Get slot color based on type
+const slotColor = computed(() => getSlotColor(props.slotData.type))
+
+const transformState = inject<TransformState | undefined>(
+  'transformState',
+  undefined
+)
+
+const connectionDotRef = ref<ComponentPublicInstance<{
+  slotElRef: HTMLElement | undefined
+}> | null>(null)
+const slotElRef = ref<HTMLElement | null>(null)
+
+// Watch for when the child component's ref becomes available
+// Vue automatically unwraps the Ref when exposing it
+watchEffect(() => {
+  const el = connectionDotRef.value?.slotElRef
+  slotElRef.value = el || null
+})
+
+useDomSlotRegistration({
+  nodeId: props.nodeId ?? '',
+  slotIndex: props.index,
+  isInput: false,
+  element: slotElRef,
+  transform: transformState
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
new file mode 100644
index 000000000..d5b8b1ad8
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+import { type ClassValue, cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  color?: string
+  multi?: boolean
+  class?: ClassValue
+}>()
+
+const slotElRef = useTemplateRef('slot-el')
+
+defineExpose({
+  slotElRef
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn('size-6 flex items-center justify-center group/slot', props.class)
+    "
+  >
+    <div
+      ref="slot-el"
+      :style="{ backgroundColor: color }"
+      :class="
+        cn(
+          'bg-[#5B5E7D] rounded-full',
+          'transition-all duration-150',
+          'cursor-crosshair',
+          'border border-solid border-black/5 dark-theme:border-white/10',
+          'group-hover/slot:border-black/20 dark-theme:group-hover/slot:border-white/50 group-hover/slot:scale-125',
+          multi ? 'w-3 h-6' : 'size-3'
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
new file mode 100644
index 000000000..95c8b40a3
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
@@ -0,0 +1,295 @@
+# Level of Detail (LOD) Implementation Guide for Widgets
+
+## What is Level of Detail (LOD)?
+
+Level of Detail is a technique used to optimize performance by showing different amounts of detail based on how zoomed in the user is. Think of it like Google Maps - when you're zoomed out looking at the whole country, you only see major cities and highways. When you zoom in close, you see street names, building details, and restaurants.
+
+For ComfyUI nodes, this means:
+- **Zoomed out** (viewing many nodes): Show only essential controls, hide labels and descriptions
+- **Zoomed in** (focusing on specific nodes): Show all details, labels, help text, and visual polish
+
+## Why LOD Matters
+
+Without LOD optimization:
+- 1000+ nodes with full detail = browser lag and poor performance
+- Text that's too small to read still gets rendered (wasted work)
+- Visual effects that are invisible at distance still consume GPU
+
+With LOD optimization:
+- Smooth performance even with large node graphs
+- Battery life improvement on laptops
+- Better user experience across different zoom levels
+
+## How to Implement LOD in Your Widget
+
+### Step 1: Get the LOD Context
+
+Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+
+```vue
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+  // ... other props
+}>()
+
+// Get LOD information
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+</script>
+```
+
+**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
+**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+
+### Step 2: Choose What to Show at Different Zoom Levels
+
+#### Understanding the LOD Score
+- `lodScore` is a number from 0 to 1
+- 0 = completely zoomed out (show minimal detail)
+- 1 = fully zoomed in (show everything)
+- 0.5 = medium zoom (show some details)
+
+#### Understanding LOD Levels
+- `'minimal'` = zoom level 0.4 or below (very zoomed out)
+- `'reduced'` = zoom level 0.4 to 0.8 (medium zoom)
+- `'full'` = zoom level 0.8 or above (zoomed in close)
+
+### Step 3: Implement Your Widget's LOD Strategy
+
+Here's a complete example of a slider widget with LOD:
+
+```vue
+<template>
+  <div class="number-widget">
+    <!-- The main control always shows -->
+    <input 
+      v-model="value"
+      type="range"
+      :min="widget.min"
+      :max="widget.max"
+      class="widget-slider"
+    />
+    
+    <!-- Show label only when zoomed in enough to read it -->
+    <label 
+      v-if="showLabel"
+      class="widget-label"
+    >
+      {{ widget.name }}
+    </label>
+    
+    <!-- Show precise value only when fully zoomed in -->
+    <span 
+      v-if="showValue"
+      class="widget-value"
+    >
+      {{ formattedValue }}
+    </span>
+    
+    <!-- Show description only at full detail -->
+    <div 
+      v-if="showDescription && widget.description"
+      class="widget-description"
+    >
+      {{ widget.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+}>()
+
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+
+// Define when to show each element
+const showLabel = computed(() => {
+  // Show label when user can actually read it
+  return lodScore.value > 0.4  // Roughly 12px+ text size
+})
+
+const showValue = computed(() => {
+  // Show precise value only when zoomed in close
+  return lodScore.value > 0.7  // User is focused on this specific widget
+})
+
+const showDescription = computed(() => {
+  // Description only at full detail
+  return lodLevel.value === 'full'  // Maximum zoom level
+})
+
+// You can also use LOD for styling
+const widgetClasses = computed(() => {
+  const classes = ['number-widget']
+  
+  if (lodLevel.value === 'minimal') {
+    classes.push('widget--minimal')
+  }
+  
+  return classes
+})
+</script>
+
+<style scoped>
+/* Apply different styles based on LOD */
+.widget--minimal {
+  /* Simplified appearance when zoomed out */
+  .widget-slider {
+    height: 4px;  /* Thinner slider */
+    opacity: 0.9;
+  }
+}
+
+/* Normal styling */
+.widget-slider {
+  height: 8px;
+  transition: height 0.2s ease;
+}
+
+.widget-label {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.widget-value {
+  font-family: monospace;
+  font-size: 0.7rem;
+  color: var(--text-accent);
+}
+
+.widget-description {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+</style>
+```
+
+## Common LOD Patterns
+
+### Pattern 1: Essential vs. Nice-to-Have
+```typescript
+// Always show the main functionality
+const showMainControl = computed(() => true)
+
+// Granular control with lodScore
+const showLabels = computed(() => lodScore.value > 0.4)
+const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+
+// Simple control with lodLevel  
+const showExtras = computed(() => lodLevel.value === 'full')
+```
+
+### Pattern 2: Smooth Opacity Transitions
+```typescript
+// Gradually fade elements based on zoom
+const labelOpacity = computed(() => {
+  // Fade in from zoom 0.3 to 0.6
+  return Math.max(0, Math.min(1, (lodScore.value - 0.3) / 0.3))
+})
+```
+
+### Pattern 3: Progressive Detail
+```typescript
+const detailLevel = computed(() => {
+  if (lodScore.value < 0.3) return 'none'
+  if (lodScore.value < 0.6) return 'basic'
+  if (lodScore.value < 0.8) return 'standard'
+  return 'full'
+})
+```
+
+## LOD Guidelines by Widget Type
+
+### Text Input Widgets
+- **Always show**: The input field itself
+- **Medium zoom**: Show label
+- **High zoom**: Show placeholder text, validation messages
+- **Full zoom**: Show character count, format hints
+
+### Button Widgets  
+- **Always show**: The button
+- **Medium zoom**: Show button text
+- **High zoom**: Show button description
+- **Full zoom**: Show keyboard shortcuts, tooltips
+
+### Selection Widgets (Dropdown, Radio)
+- **Always show**: The current selection
+- **Medium zoom**: Show option labels
+- **High zoom**: Show all options when expanded
+- **Full zoom**: Show option descriptions, icons
+
+### Complex Widgets (Color Picker, File Browser)
+- **Always show**: Simplified representation (color swatch, filename)
+- **Medium zoom**: Show basic controls
+- **High zoom**: Show full interface
+- **Full zoom**: Show advanced options, previews
+
+## Design Collaboration Guidelines
+
+### For Designers
+When designing widgets, consider creating variants for different zoom levels:
+
+1. **Minimal Design** (far away view)
+   - Essential elements only
+   - Higher contrast for visibility
+   - Simplified shapes and fewer details
+
+2. **Standard Design** (normal view)
+   - Balanced detail and simplicity
+   - Clear labels and readable text
+   - Good for most use cases
+
+3. **Full Detail Design** (close-up view)
+   - All labels, descriptions, and help text
+   - Rich visual effects and polish
+   - Maximum information density
+
+### Design Handoff Checklist
+- [ ] Specify which elements are essential vs. nice-to-have
+- [ ] Define minimum readable sizes for text elements
+- [ ] Provide simplified versions for distant viewing
+- [ ] Consider color contrast at different opacity levels
+- [ ] Test designs at multiple zoom levels
+
+## Testing Your LOD Implementation
+
+### Manual Testing
+1. Create a workflow with your widget
+2. Zoom out until nodes are very small
+3. Verify essential functionality still works
+4. Zoom in gradually and check that details appear smoothly
+5. Test performance with 50+ nodes containing your widget
+
+### Performance Considerations
+- Avoid complex calculations in LOD computed properties
+- Use `v-if` instead of `v-show` for elements that won't render
+- Consider using `v-memo` for expensive widget content
+- Test on lower-end devices
+
+### Common Mistakes
+❌ **Don't**: Hide the main widget functionality at any zoom level
+❌ **Don't**: Use complex animations that trigger at every zoom change  
+❌ **Don't**: Make LOD thresholds too sensitive (causes flickering)
+❌ **Don't**: Forget to test with real content and edge cases
+
+✅ **Do**: Keep essential functionality always visible
+✅ **Do**: Use smooth transitions between LOD levels
+✅ **Do**: Test with varying content lengths and types
+✅ **Do**: Consider accessibility at all zoom levels
+
+## Getting Help
+
+- Check existing widgets in `src/components/graph/vueNodes/widgets/` for examples
+- Ask in the ComfyUI frontend Discord for LOD implementation questions
+- Test your changes with the LOD debug panel (top-right in GraphCanvas)
+- Profile performance impact using browser dev tools
\ No newline at end of file
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
new file mode 100644
index 000000000..5b354bf25
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
@@ -0,0 +1,214 @@
+/**
+ * Node Event Handlers Composable
+ *
+ * Handles all Vue node interaction events including:
+ * - Node selection with multi-select support
+ * - Node collapse/expand state management
+ * - Node title editing and updates
+ * - Layout mutations for visual feedback
+ * - Integration with LiteGraph canvas selection system
+ */
+import type { Ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface NodeManager {
+  getNode: (id: string) => any
+}
+
+export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
+  const canvasStore = useCanvasStore()
+  const { bringNodeToFront } = useNodeZIndex()
+
+  /**
+   * Handle node selection events
+   * Supports single selection and multi-select with Ctrl/Cmd
+   */
+  const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
+    if (!canvasStore.canvas || !nodeManager.value) return
+
+    const node = nodeManager.value.getNode(nodeData.id)
+    if (!node) return
+
+    const isMultiSelect = event.ctrlKey || event.metaKey
+
+    if (isMultiSelect) {
+      // Ctrl/Cmd+click -> toggle selection
+      if (node.selected) {
+        canvasStore.canvas.deselect(node)
+      } else {
+        canvasStore.canvas.select(node)
+      }
+    } else {
+      // Regular click -> single select
+      canvasStore.canvas.deselectAll()
+      canvasStore.canvas.select(node)
+    }
+
+    // Bring node to front when clicked (similar to LiteGraph behavior)
+    // Skip if node is pinned to avoid unwanted movement
+    if (!node.flags?.pinned) {
+      bringNodeToFront(nodeData.id)
+    }
+
+    // Update canvas selection tracking
+    canvasStore.updateSelectedItems()
+  }
+
+  /**
+   * Handle node collapse/expand state changes
+   * Uses LiteGraph's native collapse method for proper state management
+   */
+  const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
+    if (!nodeManager.value) return
+
+    const node = nodeManager.value.getNode(nodeId)
+    if (!node) return
+
+    // Use LiteGraph's collapse method if the state needs to change
+    const currentCollapsed = node.flags?.collapsed ?? false
+    if (currentCollapsed !== collapsed) {
+      node.collapse()
+    }
+  }
+
+  /**
+   * Handle node title updates
+   * Updates the title in LiteGraph for persistence across sessions
+   */
+  const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
+    if (!nodeManager.value) return
+
+    const node = nodeManager.value.getNode(nodeId)
+    if (!node) return
+
+    // Update the node title in LiteGraph for persistence
+    node.title = newTitle
+  }
+
+  /**
+   * Handle node double-click events
+   * Can be used for custom actions like opening node editor
+   */
+  const handleNodeDoubleClick = (
+    event: PointerEvent,
+    nodeData: VueNodeData
+  ) => {
+    if (!canvasStore.canvas || !nodeManager.value) return
+
+    const node = nodeManager.value.getNode(nodeData.id)
+    if (!node) return
+
+    // Prevent default browser behavior
+    event.preventDefault()
+
+    // TODO: add custom double-click behavior here
+    // For now, ensure node is selected
+    if (!node.selected) {
+      handleNodeSelect(event, nodeData)
+    }
+  }
+
+  /**
+   * Handle node right-click context menu events
+   * Integrates with LiteGraph's context menu system
+   */
+  const handleNodeRightClick = (event: PointerEvent, nodeData: VueNodeData) => {
+    if (!canvasStore.canvas || !nodeManager.value) return
+
+    const node = nodeManager.value.getNode(nodeData.id)
+    if (!node) return
+
+    // Prevent default context menu
+    event.preventDefault()
+
+    // Select the node if not already selected
+    if (!node.selected) {
+      handleNodeSelect(event, nodeData)
+    }
+
+    // Let LiteGraph handle the context menu
+    // The canvas will handle showing the appropriate context menu
+  }
+
+  /**
+   * Handle node drag start events
+   * Prepares node for dragging and sets appropriate visual state
+   */
+  const handleNodeDragStart = (event: DragEvent, nodeData: VueNodeData) => {
+    if (!canvasStore.canvas || !nodeManager.value) return
+
+    const node = nodeManager.value.getNode(nodeData.id)
+    if (!node) return
+
+    // Ensure node is selected before dragging
+    if (!node.selected) {
+      // Create a synthetic pointer event for selection
+      const syntheticEvent = new PointerEvent('pointerdown', {
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        bubbles: true
+      })
+      handleNodeSelect(syntheticEvent, nodeData)
+    }
+
+    // Set drag data for potential drop operations
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('application/comfy-node-id', nodeData.id)
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  /**
+   * Batch select multiple nodes
+   * Useful for selection toolbox or area selection
+   */
+  const selectNodes = (nodeIds: string[], addToSelection = false) => {
+    if (!canvasStore.canvas || !nodeManager.value) return
+
+    if (!addToSelection) {
+      canvasStore.canvas.deselectAll()
+    }
+
+    nodeIds.forEach((nodeId) => {
+      const node = nodeManager.value?.getNode(nodeId)
+      if (node && canvasStore.canvas) {
+        canvasStore.canvas.select(node)
+      }
+    })
+
+    canvasStore.updateSelectedItems()
+  }
+
+  /**
+   * Deselect specific nodes
+   */
+  const deselectNodes = (nodeIds: string[]) => {
+    if (!canvasStore.canvas || !nodeManager.value) return
+
+    nodeIds.forEach((nodeId) => {
+      const node = nodeManager.value?.getNode(nodeId)
+      if (node) {
+        node.selected = false
+      }
+    })
+
+    canvasStore.updateSelectedItems()
+  }
+
+  return {
+    // Core event handlers
+    handleNodeSelect,
+    handleNodeCollapse,
+    handleNodeTitleUpdate,
+    handleNodeDoubleClick,
+    handleNodeRightClick,
+    handleNodeDragStart,
+
+    // Batch operations
+    selectNodes,
+    deselectNodes
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeZIndex.ts b/src/renderer/extensions/vueNodes/composables/useNodeZIndex.ts
new file mode 100644
index 000000000..3a6e71077
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useNodeZIndex.ts
@@ -0,0 +1,36 @@
+/**
+ * Node Z-Index Management Composable
+ *
+ * Provides focused functionality for managing node layering through z-index.
+ * Integrates with the layout system to ensure proper visual ordering.
+ */
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+
+interface NodeZIndexOptions {
+  /**
+   * Layout source for z-index mutations
+   * @default LayoutSource.Vue
+   */
+  layoutSource?: LayoutSource
+}
+
+export function useNodeZIndex(options: NodeZIndexOptions = {}) {
+  const { layoutSource = LayoutSource.Vue } = options
+  const layoutMutations = useLayoutMutations()
+
+  /**
+   * Bring node to front (highest z-index)
+   * @param nodeId - The node to bring to front
+   * @param source - Optional source override
+   */
+  function bringNodeToFront(nodeId: NodeId, source?: LayoutSource) {
+    layoutMutations.setSource(source ?? layoutSource)
+    layoutMutations.bringNodeToFront(nodeId)
+  }
+
+  return {
+    bringNodeToFront
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
new file mode 100644
index 000000000..c6be50285
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
@@ -0,0 +1,155 @@
+/**
+ * Generic Vue Element Tracking System
+ *
+ * Automatically tracks DOM size and position changes for Vue-rendered elements
+ * and syncs them to the layout store. Uses a single shared ResizeObserver for
+ * performance, with elements identified by configurable data attributes.
+ *
+ * Supports different element types (nodes, slots, widgets, etc.) with
+ * customizable data attributes and update handlers.
+ */
+import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
+
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { Bounds, NodeId } from '@/renderer/core/layout/types'
+
+/**
+ * Generic update item for element bounds tracking
+ */
+interface ElementBoundsUpdate {
+  /** Element identifier (could be nodeId, widgetId, slotId, etc.) */
+  id: string
+  /** Updated bounds */
+  bounds: Bounds
+}
+
+/**
+ * Configuration for different types of tracked elements
+ */
+interface ElementTrackingConfig {
+  /** Data attribute name (e.g., 'nodeId') */
+  dataAttribute: string
+  /** Handler for processing bounds updates */
+  updateHandler: (updates: ElementBoundsUpdate[]) => void
+}
+
+/**
+ * Registry of tracking configurations by element type
+ */
+const trackingConfigs: Map<string, ElementTrackingConfig> = new Map([
+  [
+    'node',
+    {
+      dataAttribute: 'nodeId',
+      updateHandler: (updates) => {
+        const nodeUpdates = updates.map(({ id, bounds }) => ({
+          nodeId: id as NodeId,
+          bounds
+        }))
+        layoutStore.batchUpdateNodeBounds(nodeUpdates)
+      }
+    }
+  ]
+])
+
+// Single ResizeObserver instance for all Vue elements
+const resizeObserver = new ResizeObserver((entries) => {
+  // Group updates by element type
+  const updatesByType = new Map<string, ElementBoundsUpdate[]>()
+
+  for (const entry of entries) {
+    if (!(entry.target instanceof HTMLElement)) continue
+    const element = entry.target
+
+    // Find which type this element belongs to
+    let elementType: string | undefined
+    let elementId: string | undefined
+
+    for (const [type, config] of trackingConfigs) {
+      const id = element.dataset[config.dataAttribute]
+      if (id) {
+        elementType = type
+        elementId = id
+        break
+      }
+    }
+
+    if (!elementType || !elementId) continue
+
+    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0]
+    const rect = element.getBoundingClientRect()
+
+    const bounds: Bounds = {
+      x: rect.left,
+      y: rect.top,
+      width,
+      height: height
+    }
+
+    if (!updatesByType.has(elementType)) {
+      updatesByType.set(elementType, [])
+    }
+    const updates = updatesByType.get(elementType)
+    if (updates) {
+      updates.push({ id: elementId, bounds })
+    }
+  }
+
+  // Process updates by type
+  for (const [type, updates] of updatesByType) {
+    const config = trackingConfigs.get(type)
+    if (config && updates.length > 0) {
+      config.updateHandler(updates)
+    }
+  }
+})
+
+/**
+ * Tracks DOM element size/position changes for a Vue component and syncs to layout store
+ *
+ * Sets up automatic ResizeObserver tracking when the component mounts and cleans up
+ * when unmounted. The tracked element is identified by a data attribute set on the
+ * component's root DOM element.
+ *
+ * @param appIdentifier - Application-level identifier for this tracked element (not a DOM ID)
+ *                       Example: node ID like 'node-123', widget ID like 'widget-456'
+ * @param trackingType - Type of element being tracked, determines which tracking config to use
+ *                      Example: 'node' for Vue nodes, 'widget' for UI widgets
+ *
+ * @example
+ * ```ts
+ * // Track a Vue node component with ID 'my-node-123'
+ * useVueElementTracking('my-node-123', 'node')
+ *
+ * // Would set data-node-id="my-node-123" on the component's root element
+ * // and sync size changes to layoutStore.batchUpdateNodeBounds()
+ * ```
+ */
+export function useVueElementTracking(
+  appIdentifier: string,
+  trackingType: string
+) {
+  onMounted(() => {
+    const element = getCurrentInstance()?.proxy?.$el
+    if (!(element instanceof HTMLElement) || !appIdentifier) return
+
+    const config = trackingConfigs.get(trackingType)
+    if (config) {
+      // Set the appropriate data attribute
+      element.dataset[config.dataAttribute] = appIdentifier
+      resizeObserver.observe(element)
+    }
+  })
+
+  onUnmounted(() => {
+    const element = getCurrentInstance()?.proxy?.$el
+    if (!(element instanceof HTMLElement)) return
+
+    const config = trackingConfigs.get(trackingType)
+    if (config) {
+      // Remove the data attribute
+      delete element.dataset[config.dataAttribute]
+      resizeObserver.unobserve(element)
+    }
+  })
+}
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
new file mode 100644
index 000000000..407a14243
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
@@ -0,0 +1,168 @@
+/**
+ * Composable for individual Vue node components
+ *
+ * Uses customRef for shared write access with Canvas renderer.
+ * Provides dragging functionality and reactive layout state.
+ */
+import { computed, inject } from 'vue'
+
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { LayoutSource, type Point } from '@/renderer/core/layout/types'
+
+/**
+ * Composable for individual Vue node components
+ * Uses customRef for shared write access with Canvas renderer
+ */
+export function useNodeLayout(nodeId: string) {
+  const store = layoutStore
+  const mutations = useLayoutMutations()
+
+  // Get transform utilities from TransformPane if available
+  const transformState = inject('transformState') as
+    | {
+        canvasToScreen: (point: Point) => Point
+        screenToCanvas: (point: Point) => Point
+      }
+    | undefined
+
+  // Get the customRef for this node (shared write access)
+  const layoutRef = store.getNodeLayoutRef(nodeId)
+
+  // Computed properties for easy access
+  const position = computed(() => {
+    const layout = layoutRef.value
+    const pos = layout?.position ?? { x: 0, y: 0 }
+    return pos
+  })
+  const size = computed(
+    () => layoutRef.value?.size ?? { width: 200, height: 100 }
+  )
+  const bounds = computed(
+    () =>
+      layoutRef.value?.bounds ?? {
+        x: position.value.x,
+        y: position.value.y,
+        width: size.value.width,
+        height: size.value.height
+      }
+  )
+  const isVisible = computed(() => layoutRef.value?.visible ?? true)
+  const zIndex = computed(() => layoutRef.value?.zIndex ?? 0)
+
+  // Drag state
+  let isDragging = false
+  let dragStartPos: Point | null = null
+  let dragStartMouse: Point | null = null
+
+  /**
+   * Start dragging the node
+   */
+  function startDrag(event: PointerEvent) {
+    if (!layoutRef.value) return
+
+    isDragging = true
+    dragStartPos = { ...position.value }
+    dragStartMouse = { x: event.clientX, y: event.clientY }
+
+    // Set mutation source
+    mutations.setSource(LayoutSource.Vue)
+
+    // Capture pointer
+    const target = event.target as HTMLElement
+    target.setPointerCapture(event.pointerId)
+  }
+
+  /**
+   * Handle drag movement
+   */
+  const handleDrag = (event: PointerEvent) => {
+    if (!isDragging || !dragStartPos || !dragStartMouse || !transformState) {
+      return
+    }
+
+    // Calculate mouse delta in screen coordinates
+    const mouseDelta = {
+      x: event.clientX - dragStartMouse.x,
+      y: event.clientY - dragStartMouse.y
+    }
+
+    // Convert to canvas coordinates
+    const canvasOrigin = transformState.screenToCanvas({ x: 0, y: 0 })
+    const canvasWithDelta = transformState.screenToCanvas(mouseDelta)
+    const canvasDelta = {
+      x: canvasWithDelta.x - canvasOrigin.x,
+      y: canvasWithDelta.y - canvasOrigin.y
+    }
+
+    // Calculate new position
+    const newPosition = {
+      x: dragStartPos.x + canvasDelta.x,
+      y: dragStartPos.y + canvasDelta.y
+    }
+
+    // Apply mutation through the layout system
+    mutations.moveNode(nodeId, newPosition)
+  }
+
+  /**
+   * End dragging
+   */
+  function endDrag(event: PointerEvent) {
+    if (!isDragging) return
+
+    isDragging = false
+    dragStartPos = null
+    dragStartMouse = null
+
+    // Release pointer
+    const target = event.target as HTMLElement
+    target.releasePointerCapture(event.pointerId)
+  }
+
+  /**
+   * Update node position directly (without drag)
+   */
+  function moveTo(position: Point) {
+    mutations.setSource(LayoutSource.Vue)
+    mutations.moveNode(nodeId, position)
+  }
+
+  /**
+   * Update node size
+   */
+  function resize(newSize: { width: number; height: number }) {
+    mutations.setSource(LayoutSource.Vue)
+    mutations.resizeNode(nodeId, newSize)
+  }
+
+  return {
+    // Reactive state (via customRef)
+    layoutRef,
+    position,
+    size,
+    bounds,
+    isVisible,
+    zIndex,
+
+    // Mutations
+    moveTo,
+    resize,
+
+    // Drag handlers
+    startDrag,
+    handleDrag,
+    endDrag,
+
+    // Computed styles for Vue templates
+    nodeStyle: computed(() => ({
+      position: 'absolute' as const,
+      left: `${position.value.x}px`,
+      top: `${position.value.y}px`,
+      width: `${size.value.width}px`,
+      height: `${size.value.height}px`,
+      zIndex: zIndex.value,
+      cursor: isDragging ? 'grabbing' : 'grab'
+    }))
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/lod/useLOD.ts b/src/renderer/extensions/vueNodes/lod/useLOD.ts
new file mode 100644
index 000000000..584e21f9a
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/lod/useLOD.ts
@@ -0,0 +1,186 @@
+/**
+ * Level of Detail (LOD) composable for Vue-based node rendering
+ *
+ * Provides dynamic quality adjustment based on zoom level to maintain
+ * performance with large node graphs. Uses zoom thresholds to determine
+ * how much detail to render for each node component.
+ *
+ * ## LOD Levels
+ *
+ * - **FULL** (zoom > 0.8): Complete rendering with all widgets, slots, and content
+ * - **REDUCED** (0.4 < zoom <= 0.8): Essential widgets only, simplified slots
+ * - **MINIMAL** (zoom <= 0.4): Title only, no widgets or slots
+ *
+ * ## Performance Benefits
+ *
+ * - Reduces DOM element count by up to 80% at low zoom levels
+ * - Minimizes layout calculations and paint operations
+ * - Enables smooth performance with 1000+ nodes
+ * - Maintains visual fidelity when detail is actually visible
+ *
+ * @example
+ * ```typescript
+ * const { lodLevel, shouldRenderWidgets, shouldRenderSlots } = useLOD(zoomRef)
+ *
+ * // In template
+ * <NodeWidgets v-if="shouldRenderWidgets" />
+ * <NodeSlots v-if="shouldRenderSlots" />
+ * ```
+ */
+import { type Ref, computed, readonly } from 'vue'
+
+export enum LODLevel {
+  MINIMAL = 'minimal', // zoom <= 0.4
+  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
+  FULL = 'full' // zoom > 0.8
+}
+
+interface LODConfig {
+  renderWidgets: boolean
+  renderSlots: boolean
+  renderContent: boolean
+  renderSlotLabels: boolean
+  renderWidgetLabels: boolean
+  cssClass: string
+}
+
+// LOD configuration for each level
+const LOD_CONFIGS: Record<LODLevel, LODConfig> = {
+  [LODLevel.FULL]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: true,
+    renderSlotLabels: true,
+    renderWidgetLabels: true,
+    cssClass: 'lg-node--lod-full'
+  },
+  [LODLevel.REDUCED]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-reduced'
+  },
+  [LODLevel.MINIMAL]: {
+    renderWidgets: false,
+    renderSlots: false,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-minimal'
+  }
+}
+
+/**
+ * Create LOD (Level of Detail) state based on zoom level
+ *
+ * @param zoomRef - Reactive reference to current zoom level (camera.z)
+ * @returns LOD state and configuration
+ */
+export function useLOD(zoomRef: Ref<number>) {
+  // Continuous LOD score (0-1) for smooth transitions
+  const lodScore = computed(() => {
+    const zoom = zoomRef.value
+    return Math.max(0, Math.min(1, zoom))
+  })
+
+  // Determine current LOD level based on zoom
+  const lodLevel = computed<LODLevel>(() => {
+    const zoom = zoomRef.value
+
+    if (zoom > 0.8) return LODLevel.FULL
+    if (zoom > 0.4) return LODLevel.REDUCED
+    return LODLevel.MINIMAL
+  })
+
+  // Get configuration for current LOD level
+  const lodConfig = computed<LODConfig>(() => LOD_CONFIGS[lodLevel.value])
+
+  // Convenience computed properties for common rendering decisions
+  const shouldRenderWidgets = computed(() => lodConfig.value.renderWidgets)
+  const shouldRenderSlots = computed(() => lodConfig.value.renderSlots)
+  const shouldRenderContent = computed(() => lodConfig.value.renderContent)
+  const shouldRenderSlotLabels = computed(
+    () => lodConfig.value.renderSlotLabels
+  )
+  const shouldRenderWidgetLabels = computed(
+    () => lodConfig.value.renderWidgetLabels
+  )
+
+  // CSS class for styling based on LOD level
+  const lodCssClass = computed(() => lodConfig.value.cssClass)
+
+  // Get essential widgets for reduced LOD (only interactive controls)
+  const getEssentialWidgets = (widgets: unknown[]): unknown[] => {
+    if (lodLevel.value === LODLevel.FULL) return widgets
+    if (lodLevel.value === LODLevel.MINIMAL) return []
+
+    // For reduced LOD, filter to essential widget types only
+    return widgets.filter((widget: any) => {
+      const type = widget?.type?.toLowerCase()
+      return [
+        'combo',
+        'select',
+        'toggle',
+        'boolean',
+        'slider',
+        'number'
+      ].includes(type)
+    })
+  }
+
+  // Performance metrics for debugging
+  const lodMetrics = computed(() => ({
+    level: lodLevel.value,
+    zoom: zoomRef.value,
+    widgetCount: shouldRenderWidgets.value ? 'full' : 'none',
+    slotCount: shouldRenderSlots.value ? 'full' : 'none'
+  }))
+
+  return {
+    // Core LOD state
+    lodLevel: readonly(lodLevel),
+    lodConfig: readonly(lodConfig),
+    lodScore: readonly(lodScore),
+
+    // Rendering decisions
+    shouldRenderWidgets,
+    shouldRenderSlots,
+    shouldRenderContent,
+    shouldRenderSlotLabels,
+    shouldRenderWidgetLabels,
+
+    // Styling
+    lodCssClass,
+
+    // Utilities
+    getEssentialWidgets,
+    lodMetrics
+  }
+}
+
+/**
+ * Get LOD level thresholds for configuration or debugging
+ */
+export const LOD_THRESHOLDS = {
+  FULL_THRESHOLD: 0.8,
+  REDUCED_THRESHOLD: 0.4,
+  MINIMAL_THRESHOLD: 0.0
+} as const
+
+/**
+ * Check if zoom level supports a specific feature
+ */
+export function supportsFeatureAtZoom(
+  zoom: number,
+  feature: keyof LODConfig
+): boolean {
+  const level =
+    zoom > 0.8
+      ? LODLevel.FULL
+      : zoom > 0.4
+        ? LODLevel.REDUCED
+        : LODLevel.MINIMAL
+  return LOD_CONFIGS[level][feature] as boolean
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
new file mode 100644
index 000000000..ae8fb7567
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Button
+      v-bind="filteredProps"
+      :disabled="readonly"
+      size="small"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  BADGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Button widgets don't have a v-model value, they trigger actions
+const props = defineProps<{
+  widget: SimplifiedWidget<void>
+  readonly?: boolean
+}>()
+
+// Button specific excluded props
+const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
+)
+
+const handleClick = () => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback()
+  }
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
new file mode 100644
index 000000000..1c40d35a7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+    >
+      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartData } from 'chart.js'
+import Chart from 'primevue/chart'
+import { computed } from 'vue'
+
+import type { ChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
+
+const value = defineModel<ChartData>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<ChartData, ChartWidgetOptions>
+  readonly?: boolean
+}>()
+
+const chartType = computed(() => props.widget.options?.type ?? 'line')
+
+const chartData = computed(() => value.value || { labels: [], datasets: [] })
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      labels: {
+        color: '#FFF',
+        usePointStyle: true,
+        pointStyle: 'circle'
+      }
+    }
+  },
+  scales: {
+    x: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: true,
+        color: '#9FA2BD',
+        drawTicks: false,
+        drawOnChartArea: true,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    },
+    y: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: false,
+        drawTicks: false,
+        drawOnChartArea: false,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    }
+  }
+}))
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
new file mode 100644
index 000000000..ed5f2b0ec
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -0,0 +1,63 @@
+<!-- Needs custom color picker for alpha support -->
+<template>
+  <WidgetLayoutField :widget="widget">
+    <label
+      :class="
+        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
+      "
+    >
+      <ColorPicker
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="w-8 h-4 !rounded-full overflow-hidden border-none"
+        :pt="{
+          preview: '!w-full !h-full !border-none'
+        }"
+        @update:model-value="onChange"
+      />
+      <span class="text-xs">#{{ localValue }}</span>
+    </label>
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '#000000',
+  emit
+})
+
+// ColorPicker specific excluded props include panel/overlay classes
+const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, COLOR_PICKER_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
new file mode 100644
index 000000000..9f69eca82
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -0,0 +1,324 @@
+<template>
+  <!-- Replace entire widget with image preview when image is loaded -->
+  <!-- Edge-to-edge: -mx-2 removes the parent's p-2 (8px) padding on each side -->
+  <div
+    v-if="hasImageFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above image -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <!-- TODO: finish once we finish value bindings with Litegraph -->
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          v-bind="transformCompatProps"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Image preview -->
+    <!-- TODO: change hardcoded colors when design system incorporated -->
+    <div class="relative group">
+      <img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
+      <!-- Darkening overlay on hover -->
+      <div
+        class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
+      />
+      <!-- Control buttons in top right on hover -->
+      <div
+        v-if="!readonly"
+        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      >
+        <!-- Edit button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="handleEdit"
+        >
+          <i class="pi pi-pencil text-white text-xs"></i>
+        </button>
+        <!-- Delete button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="clearFile"
+        >
+          <i class="pi pi-times text-white text-xs"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Audio preview when audio file is loaded -->
+  <div
+    v-else-if="hasAudioFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above audio player -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          v-bind="transformCompatProps"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Audio player -->
+    <div class="relative group px-2">
+      <div
+        class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
+        style="border: 1px solid #262729"
+      >
+        <!-- Audio icon -->
+        <div class="flex-shrink-0">
+          <i class="pi pi-volume-up text-2xl opacity-60"></i>
+        </div>
+
+        <!-- File info and controls -->
+        <div class="flex-1">
+          <div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
+          <div class="text-xs opacity-60">
+            {{
+              selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
+            }}
+          </div>
+        </div>
+
+        <!-- Control buttons -->
+        <div v-if="!readonly" class="flex gap-1">
+          <!-- Delete button -->
+          <button
+            class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
+            @click="clearFile"
+          >
+            <i class="pi pi-times text-white text-sm"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Show normal file upload UI when no image or audio is loaded -->
+  <div
+    v-else
+    class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
+    :style="{ borderColor: '#262729' }"
+  >
+    <div
+      class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-[#5B5E7D]"
+      :style="{ borderColor: '#262729' }"
+    >
+      <div class="flex flex-col items-center gap-2 w-full py-4">
+        <span class="text-xs opacity-60"> {{ $t('Drop your file or') }} </span>
+        <div>
+          <Button
+            label="Browse Files"
+            size="small"
+            severity="secondary"
+            class="text-xs"
+            :disabled="readonly"
+            @click="triggerFileInput"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Hidden file input always available for both states -->
+  <input
+    ref="fileInputRef"
+    type="file"
+    class="hidden"
+    :accept="widget.options?.accept"
+    :multiple="false"
+    :disabled="readonly"
+    @change="handleFileChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<File[] | null>
+  modelValue: File[] | null
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File[] | null]
+}>()
+
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+// Transform compatibility props for overlay positioning
+const transformCompatProps = useTransformCompatOverlayProps()
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Since we only support single file, get the first file
+const selectedFile = computed(() => {
+  const files = localValue.value || []
+  return files.length > 0 ? files[0] : null
+})
+
+// Quick file type detection for testing
+const detectFileType = (file: File) => {
+  const type = file.type?.toLowerCase() || ''
+  const name = file.name?.toLowerCase() || ''
+
+  if (
+    type.startsWith('image/') ||
+    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+  ) {
+    return 'image'
+  }
+  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
+    return 'video'
+  }
+  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
+    return 'audio'
+  }
+  if (type === 'application/pdf' || name.endsWith('.pdf')) {
+    return 'pdf'
+  }
+  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
+    return 'archive'
+  }
+  return 'file'
+}
+
+// Check if we have an image file
+const hasImageFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
+})
+
+// Check if we have an audio file
+const hasAudioFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
+})
+
+// Get image URL for preview
+const imageUrl = computed(() => {
+  if (hasImageFile.value && selectedFile.value) {
+    return URL.createObjectURL(selectedFile.value)
+  }
+  return ''
+})
+
+// // Get audio URL for playback
+// const audioUrl = computed(() => {
+//   if (hasAudioFile.value && selectedFile.value) {
+//     return URL.createObjectURL(selectedFile.value)
+//   }
+//   return ''
+// })
+
+// Clean up image URL when file changes
+watch(imageUrl, (newUrl, oldUrl) => {
+  if (oldUrl && oldUrl !== newUrl) {
+    URL.revokeObjectURL(oldUrl)
+  }
+})
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!props.readonly && target.files && target.files.length > 0) {
+    // Since we only support single file, take the first one
+    const file = target.files[0]
+
+    // Use the composable's onChange handler with an array
+    onChange([file])
+
+    // Reset input to allow selecting same file again
+    target.value = ''
+  }
+}
+
+const clearFile = () => {
+  // Clear the file
+  onChange(null)
+
+  // Reset file input
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const handleEdit = () => {
+  // TODO: hook up with maskeditor
+}
+
+// Clear file input when value is cleared externally
+watch(localValue, (newValue) => {
+  if (!newValue || newValue.length === 0) {
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+})
+
+// Clean up image URL on unmount
+onUnmounted(() => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value)
+  }
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
new file mode 100644
index 000000000..3603b7ab6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <Galleria
+      v-model:activeIndex="activeIndex"
+      :value="galleryImages"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :show-thumbnails="showThumbnails"
+      :show-nav-buttons="showNavButtons"
+      class="max-w-full"
+      :pt="{
+        thumbnails: {
+          class: 'overflow-hidden'
+        },
+        thumbnailContent: {
+          class: 'py-4 px-2'
+        },
+        thumbnailPrevButton: {
+          class: 'm-0'
+        },
+        thumbnailNextButton: {
+          class: 'm-0'
+        }
+      }"
+    >
+      <template #item="{ item }">
+        <img
+          :src="item.itemImageSrc || item.src || item"
+          :alt="item.alt || 'Gallery image'"
+          class="w-full h-auto max-h-64 object-contain"
+        />
+      </template>
+      <template #thumbnail="{ item }">
+        <div class="p-1 w-full h-full">
+          <img
+            :src="item.thumbnailImageSrc || item.src || item"
+            :alt="item.alt || 'Gallery thumbnail'"
+            class="w-full h-full object-cover rounded-lg"
+          />
+        </div>
+      </template>
+    </Galleria>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Galleria from 'primevue/galleria'
+import { computed, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  GALLERIA_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+interface GalleryImage {
+  itemImageSrc?: string
+  thumbnailImageSrc?: string
+  src?: string
+  alt?: string
+}
+
+type GalleryValue = string[] | GalleryImage[]
+
+const value = defineModel<GalleryValue>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<GalleryValue>
+  readonly?: boolean
+}>()
+
+const activeIndex = ref(0)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, GALLERIA_EXCLUDED_PROPS)
+)
+
+const galleryImages = computed(() => {
+  if (!value.value || !Array.isArray(value.value)) return []
+
+  return value.value.map((item, index) => {
+    if (typeof item === 'string') {
+      return {
+        itemImageSrc: item,
+        thumbnailImageSrc: item,
+        alt: `Image ${index + 1}`
+      }
+    }
+    return item
+  })
+})
+
+const showThumbnails = computed(() => {
+  return (
+    props.widget.options?.showThumbnails !== false &&
+    galleryImages.value.length > 1
+  )
+})
+
+const showNavButtons = computed(() => {
+  return (
+    props.widget.options?.showNavButtons !== false &&
+    galleryImages.value.length > 1
+  )
+})
+</script>
+
+<style scoped>
+/* Ensure thumbnail container doesn't overflow */
+:deep(.p-galleria-thumbnails) {
+  overflow: hidden;
+}
+
+/* Constrain thumbnail items to prevent overlap */
+:deep(.p-galleria-thumbnail-item) {
+  flex-shrink: 0;
+}
+
+/* Ensure thumbnail wrapper maintains aspect ratio */
+:deep(.p-galleria-thumbnail) {
+  overflow: hidden;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
new file mode 100644
index 000000000..e51413a30
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -0,0 +1,70 @@
+<template>
+  <ImageCompare
+    :tabindex="widget.options?.tabindex ?? 0"
+    :aria-label="widget.options?.ariaLabel"
+    :aria-labelledby="widget.options?.ariaLabelledby"
+    :pt="widget.options?.pt"
+    :pt-options="widget.options?.ptOptions"
+    :unstyled="widget.options?.unstyled"
+  >
+    <template #left>
+      <img
+        :src="beforeImage"
+        :alt="beforeAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+    <template #right>
+      <img
+        :src="afterImage"
+        :alt="afterAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+  </ImageCompare>
+</template>
+
+<script setup lang="ts">
+import ImageCompare from 'primevue/imagecompare'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+interface ImageCompareValue {
+  before: string
+  after: string
+  beforeAlt?: string
+  afterAlt?: string
+  initialPosition?: number
+}
+
+// Image compare widgets typically don't have v-model, they display comparison
+const props = defineProps<{
+  widget: SimplifiedWidget<ImageCompareValue | string>
+  readonly?: boolean
+}>()
+
+const beforeImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? value : value?.before || ''
+})
+
+const afterImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? '' : value?.after || ''
+})
+
+const beforeAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.beforeAlt
+    ? value.beforeAlt
+    : 'Before image'
+})
+
+const afterAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.afterAlt
+    ? value.afterAlt
+    : 'After image'
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
new file mode 100644
index 000000000..45ce81aa1
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
+import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
+
+defineProps<{
+  widget: SimplifiedWidget<number>
+  readonly?: boolean
+}>()
+
+const modelValue = defineModel<number>({ default: 0 })
+</script>
+
+<template>
+  <component
+    :is="
+      widget.type === 'slider'
+        ? WidgetInputNumberSlider
+        : WidgetInputNumberInput
+    "
+    v-model="modelValue"
+    :widget="widget"
+    :readonly="readonly"
+    v-bind="$attrs"
+  />
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
new file mode 100644
index 000000000..6e91171b3
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import InputNumber from 'primevue/inputnumber'
+import { computed } from 'vue'
+
+import { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+  readonly?: boolean
+}>()
+
+const modelValue = defineModel<number>({ default: 0 })
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+
+// Get the precision value for proper number formatting
+const precision = computed(() => {
+  const p = props.widget.options?.precision
+  // Treat negative or non-numeric precision as undefined
+  return typeof p === 'number' && p >= 0 ? p : undefined
+})
+
+// Calculate the step value based on precision or widget options
+const stepValue = computed(() => {
+  // Use step2 (correct input spec value) instead of step (legacy 10x value)
+  if (props.widget.options?.step2 !== undefined) {
+    return Number(props.widget.options.step2)
+  }
+  // Otherwise, derive from precision
+  if (precision.value !== undefined) {
+    if (precision.value === 0) {
+      return 1
+    }
+    // For precision > 0, step = 1 / (10^precision)
+    // precision 1 → 0.1, precision 2 → 0.01, etc.
+    return Number((1 / Math.pow(10, precision.value)).toFixed(precision.value))
+  }
+  // Default to 'any' for unrestricted stepping
+  return 0
+})
+</script>
+
+<template>
+  <WidgetLayoutField :widget>
+    <InputNumber
+      v-model="modelValue"
+      v-bind="filteredProps"
+      show-buttons
+      button-layout="horizontal"
+      size="small"
+      :disabled="readonly"
+      :step="stepValue"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+      :pt="{
+        incrementButton:
+          '!rounded-r-lg bg-transparent border-none hover:bg-zinc-500/30 active:bg-zinc-500/40',
+        decrementButton:
+          '!rounded-l-lg bg-transparent border-none hover:bg-zinc-500/30 active:bg-zinc-500/40'
+      }"
+    >
+      <template #incrementicon>
+        <span class="pi pi-plus text-sm" />
+      </template>
+      <template #decrementicon>
+        <span class="pi pi-minus text-sm" />
+      </template>
+    </InputNumber>
+  </WidgetLayoutField>
+</template>
+
+<style scoped>
+:deep(.p-inputnumber-input) {
+  background-color: transparent;
+  border: 1px solid color-mix(in oklab, #d4d4d8 10%, transparent);
+  border-top: transparent;
+  border-bottom: transparent;
+  height: 1.625rem;
+  margin: 1px 0;
+  box-shadow: none;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
new file mode 100644
index 000000000..179c342d2
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
@@ -0,0 +1,131 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import InputText from 'primevue/inputtext'
+import Slider from 'primevue/slider'
+import type { SliderProps } from 'primevue/slider'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
+
+describe('WidgetInputNumberSlider Value Binding', () => {
+  const createMockWidget = (
+    value: number = 5,
+    options: Partial<SliderProps & { precision?: number }> = {},
+    callback?: (value: number) => void
+  ): SimplifiedWidget<number> => ({
+    name: 'test_slider',
+    type: 'float',
+    value,
+    options: { min: 0, max: 100, step: 1, precision: 0, ...options },
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<number>,
+    modelValue: number,
+    readonly = false
+  ) => {
+    return mount(WidgetInputNumberSlider, {
+      global: {
+        plugins: [PrimeVue],
+        components: { InputText, Slider }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const getNumberInput = (wrapper: ReturnType<typeof mount>) => {
+    const input = wrapper.find('input[type="number"]')
+    if (!(input.element instanceof HTMLInputElement)) {
+      throw new Error(
+        'Number input element not found or is not an HTMLInputElement'
+      )
+    }
+    return { element: input.element }
+  }
+
+  describe('Props and Values', () => {
+    it('passes modelValue to slider component', () => {
+      const widget = createMockWidget(5)
+      const wrapper = mountComponent(widget, 5)
+
+      const slider = wrapper.findComponent({ name: 'Slider' })
+      expect(slider.props('modelValue')).toBe(5)
+    })
+
+    it('handles different initial values', () => {
+      const widget1 = createMockWidget(5)
+      const wrapper1 = mountComponent(widget1, 5)
+
+      const widget2 = createMockWidget(10)
+      const wrapper2 = mountComponent(widget2, 10)
+
+      const slider1 = wrapper1.findComponent({ name: 'Slider' })
+      expect(slider1.props('modelValue')).toBe(5)
+
+      const slider2 = wrapper2.findComponent({ name: 'Slider' })
+      expect(slider2.props('modelValue')).toBe(10)
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('renders slider component', () => {
+      const widget = createMockWidget(5)
+      const wrapper = mountComponent(widget, 5)
+
+      expect(wrapper.findComponent({ name: 'Slider' }).exists()).toBe(true)
+    })
+
+    it('renders input field', () => {
+      const widget = createMockWidget(5)
+      const wrapper = mountComponent(widget, 5)
+
+      expect(wrapper.find('input[type="number"]').exists()).toBe(true)
+    })
+
+    it('displays initial value in input field', () => {
+      const widget = createMockWidget(42)
+      const wrapper = mountComponent(widget, 42)
+
+      const input = getNumberInput(wrapper)
+      expect(input.element.value).toBe('42')
+    })
+
+    it('disables components in readonly mode', () => {
+      const widget = createMockWidget(5)
+      const wrapper = mountComponent(widget, 5, true)
+
+      const slider = wrapper.findComponent({ name: 'Slider' })
+      expect(slider.props('disabled')).toBe(true)
+
+      const input = getNumberInput(wrapper)
+      expect(input.element.disabled).toBe(true)
+    })
+  })
+
+  describe('Widget Options', () => {
+    it('passes widget options to PrimeVue components', () => {
+      const widget = createMockWidget(5, { min: -10, max: 50 })
+      const wrapper = mountComponent(widget, 5)
+
+      const slider = wrapper.findComponent({ name: 'Slider' })
+      expect(slider.props('min')).toBe(-10)
+      expect(slider.props('max')).toBe(50)
+    })
+
+    it('handles negative value ranges', () => {
+      const widget = createMockWidget(0, { min: -100, max: 100 })
+      const wrapper = mountComponent(widget, 0)
+
+      const slider = wrapper.findComponent({ name: 'Slider' })
+      expect(slider.props('min')).toBe(-100)
+      expect(slider.props('max')).toBe(100)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
new file mode 100644
index 000000000..c9894f4b8
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -0,0 +1,168 @@
+<template>
+  <WidgetLayoutField :widget="widget">
+    <div
+      :class="
+        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full pl-4 pr-2')
+      "
+    >
+      <Slider
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="flex-grow text-xs"
+        @update:model-value="onChange"
+      />
+      <InputText
+        v-model="inputDisplayValue"
+        :disabled="readonly"
+        type="number"
+        :step="stepValue"
+        class="w-[4em] text-center text-xs px-0 !border-none !shadow-none !bg-transparent"
+        size="small"
+        @blur="handleInputBlur"
+        @keydown="handleInputKeydown"
+      />
+    </div>
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import Slider from 'primevue/slider'
+import { computed, ref, watch } from 'vue'
+
+import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+  modelValue: number
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useNumberWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+// Get the precision value for proper number formatting
+const precision = computed(() => {
+  const p = props.widget.options?.precision
+  // Treat negative or non-numeric precision as undefined
+  return typeof p === 'number' && p >= 0 ? p : undefined
+})
+
+// Calculate the step value based on precision or widget options
+const stepValue = computed(() => {
+  // Use step2 (correct input spec value) instead of step (legacy 10x value)
+  if (props.widget.options?.step2 !== undefined) {
+    return String(props.widget.options.step2)
+  }
+  // Otherwise, derive from precision
+  if (precision.value !== undefined) {
+    if (precision.value === 0) {
+      return '1'
+    }
+    // For precision > 0, step = 1 / (10^precision)
+    // precision 1 → 0.1, precision 2 → 0.01, etc.
+    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
+  }
+  // Default to 'any' for unrestricted stepping
+  return 'any'
+})
+
+// Format a number according to the widget's precision
+const formatNumber = (value: number): string => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return String(value)
+  }
+  // Use toFixed to ensure correct decimal places
+  return value.toFixed(precision.value)
+}
+
+// Apply precision-based rounding to a number
+const applyPrecision = (value: number): number => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return value
+  }
+  if (precision.value === 0) {
+    // Integer precision
+    return Math.round(value)
+  }
+  // Round to the specified decimal places
+  const multiplier = Math.pow(10, precision.value)
+  return Math.round(value * multiplier) / multiplier
+}
+
+// Keep a separate display value for the input field
+const inputDisplayValue = ref(formatNumber(localValue.value))
+
+// Update display value when localValue changes from external sources
+watch(localValue, (newValue) => {
+  inputDisplayValue.value = formatNumber(newValue)
+})
+
+const handleInputBlur = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value || '0'
+  const parsed = parseFloat(value)
+
+  if (!isNaN(parsed)) {
+    // Apply precision-based rounding
+    const roundedValue = applyPrecision(parsed)
+    onChange(roundedValue)
+    // Update display value with proper formatting
+    inputDisplayValue.value = formatNumber(roundedValue)
+  }
+}
+
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    const target = event.target as HTMLInputElement
+    const value = target.value || '0'
+    const parsed = parseFloat(value)
+
+    if (!isNaN(parsed)) {
+      // Apply precision-based rounding
+      const roundedValue = applyPrecision(parsed)
+      onChange(roundedValue)
+      // Update display value with proper formatting
+      inputDisplayValue.value = formatNumber(roundedValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Remove number input spinners */
+:deep(input[type='number']::-webkit-inner-spin-button),
+:deep(input[type='number']::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts
new file mode 100644
index 000000000..8942bea34
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts
@@ -0,0 +1,193 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import InputText from 'primevue/inputtext'
+import type { InputTextProps } from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetInputText from './WidgetInputText.vue'
+
+describe('WidgetInputText Value Binding', () => {
+  const createMockWidget = (
+    value: string = 'default',
+    options: Partial<InputTextProps> = {},
+    callback?: (value: string) => void
+  ): SimplifiedWidget<string> => ({
+    name: 'test_input',
+    type: 'string',
+    value,
+    options,
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<string>,
+    modelValue: string,
+    readonly = false
+  ) => {
+    return mount(WidgetInputText, {
+      global: {
+        plugins: [PrimeVue],
+        components: { InputText, Textarea }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const setInputValueAndTrigger = async (
+    wrapper: ReturnType<typeof mount>,
+    value: string,
+    trigger: 'blur' | 'keydown.enter' = 'blur'
+  ) => {
+    const input = wrapper.find('input[type="text"]')
+    if (!(input.element instanceof HTMLInputElement)) {
+      throw new Error('Input element not found or is not an HTMLInputElement')
+    }
+    await input.setValue(value)
+    await input.trigger(trigger)
+    return input
+  }
+
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when input value changes on blur', async () => {
+      const widget = createMockWidget('hello')
+      const wrapper = mountComponent(widget, 'hello')
+
+      await setInputValueAndTrigger(wrapper, 'world', 'blur')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('world')
+    })
+
+    it('emits Vue event when enter key is pressed', async () => {
+      const widget = createMockWidget('initial')
+      const wrapper = mountComponent(widget, 'initial')
+
+      await setInputValueAndTrigger(wrapper, 'new value', 'keydown.enter')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('new value')
+    })
+
+    it('handles empty string values', async () => {
+      const widget = createMockWidget('something')
+      const wrapper = mountComponent(widget, 'something')
+
+      await setInputValueAndTrigger(wrapper, '')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('')
+    })
+
+    it('handles special characters correctly', async () => {
+      const widget = createMockWidget('normal')
+      const wrapper = mountComponent(widget, 'normal')
+
+      const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
+      await setInputValueAndTrigger(wrapper, specialText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(specialText)
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('test', {}, undefined)
+      const wrapper = mountComponent(widget, 'test')
+
+      await setInputValueAndTrigger(wrapper, 'new value')
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('new value')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('emits update:modelValue on blur', async () => {
+      const widget = createMockWidget('original')
+      const wrapper = mountComponent(widget, 'original')
+
+      await setInputValueAndTrigger(wrapper, 'updated')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('updated')
+    })
+
+    it('emits update:modelValue on enter key', async () => {
+      const widget = createMockWidget('start')
+      const wrapper = mountComponent(widget, 'start')
+
+      await setInputValueAndTrigger(wrapper, 'finish', 'keydown.enter')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('finish')
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables input when readonly', () => {
+      const widget = createMockWidget('readonly test')
+      const wrapper = mountComponent(widget, 'readonly test', true)
+
+      const input = wrapper.find('input[type="text"]')
+      if (!(input.element instanceof HTMLInputElement)) {
+        throw new Error('Input element not found or is not an HTMLInputElement')
+      }
+      expect(input.element.disabled).toBe(true)
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('always renders InputText component', () => {
+      const widget = createMockWidget('test value')
+      const wrapper = mountComponent(widget, 'test value')
+
+      // WidgetInputText always uses InputText, not Textarea
+      const input = wrapper.find('input[type="text"]')
+      expect(input.exists()).toBe(true)
+
+      // Should not render textarea (that's handled by WidgetTextarea component)
+      const textarea = wrapper.find('textarea')
+      expect(textarea.exists()).toBe(false)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles very long strings', async () => {
+      const widget = createMockWidget('short')
+      const wrapper = mountComponent(widget, 'short')
+
+      const longString = 'a'.repeat(10000)
+      await setInputValueAndTrigger(wrapper, longString)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(longString)
+    })
+
+    it('handles unicode characters', async () => {
+      const widget = createMockWidget('ascii')
+      const wrapper = mountComponent(widget, 'ascii')
+
+      const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
+      await setInputValueAndTrigger(wrapper, unicodeText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(unicodeText)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
new file mode 100644
index 000000000..a515ec7cd
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -0,0 +1,49 @@
+<template>
+  <WidgetLayoutField :widget="widget">
+    <InputText
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
new file mode 100644
index 000000000..35950aa5c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="widget-markdown relative w-full cursor-text"
+    @click="startEditing"
+  >
+    <!-- Display mode: Rendered markdown -->
+    <div
+      v-if="!isEditing"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      v-html="renderedHtml"
+    />
+
+    <!-- Edit mode: Textarea -->
+    <Textarea
+      v-else
+      ref="textareaRef"
+      v-model="localValue"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      :rows="6"
+      :pt="{
+        root: {
+          onBlur: handleBlur
+        }
+      }"
+      @update:model-value="onChange"
+      @click.stop
+      @keydown.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed, nextTick, ref } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// State
+const isEditing = ref(false)
+const textareaRef = ref<InstanceType<typeof Textarea> | undefined>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Computed
+const renderedHtml = computed(() => {
+  return renderMarkdownToHtml(localValue.value || '')
+})
+
+// Methods
+const startEditing = async () => {
+  if (props.readonly || isEditing.value) return
+
+  isEditing.value = true
+  await nextTick()
+
+  // Focus the textarea
+  // @ts-expect-error - $el is an internal property of the Textarea component
+  textareaRef.value?.$el?.focus()
+}
+
+const handleBlur = () => {
+  isEditing.value = false
+}
+</script>
+
+<style scoped>
+.widget-markdown {
+  background-color: var(--p-muted-color);
+  border: 1px solid var(--p-border-color);
+  border-radius: var(--p-border-radius);
+}
+
+.widget-markdown:hover:not(:has(textarea)) {
+  background-color: var(--p-content-hover-background);
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
new file mode 100644
index 000000000..7ec1a4c7f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -0,0 +1,63 @@
+<template>
+  <WidgetLayoutField :widget="widget">
+    <MultiSelect
+      v-model="localValue"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      display="chip"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import MultiSelect from 'primevue/multiselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any[]>
+  modelValue: any[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: [],
+  emit
+})
+
+// Transform compatibility props for overlay positioning
+const transformCompatProps = useTransformCompatOverlayProps()
+
+// MultiSelect specific excluded props include overlay styles
+const MULTISELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'overlayStyle'
+] as const
+
+const combinedProps = computed(() => ({
+  ...filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS),
+  ...transformCompatProps.value
+}))
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
new file mode 100644
index 000000000..28f950360
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
@@ -0,0 +1,187 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Select from 'primevue/select'
+import type { SelectProps } from 'primevue/select'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetSelect from './WidgetSelect.vue'
+
+describe('WidgetSelect Value Binding', () => {
+  const createMockWidget = (
+    value: string = 'option1',
+    options: Partial<
+      SelectProps & { values?: string[]; return_index?: boolean }
+    > = {},
+    callback?: (value: string | number | undefined) => void
+  ): SimplifiedWidget<string | number | undefined> => ({
+    name: 'test_select',
+    type: 'combo',
+    value,
+    options: {
+      values: ['option1', 'option2', 'option3'],
+      ...options
+    },
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<string | number | undefined>,
+    modelValue: string | number | undefined,
+    readonly = false
+  ) => {
+    return mount(WidgetSelect, {
+      props: {
+        widget,
+        modelValue,
+        readonly
+      },
+      global: {
+        plugins: [PrimeVue],
+        components: { Select }
+      }
+    })
+  }
+
+  const setSelectValueAndEmit = async (
+    wrapper: ReturnType<typeof mount>,
+    value: string
+  ) => {
+    const select = wrapper.findComponent({ name: 'Select' })
+    await select.setValue(value)
+    return wrapper.emitted('update:modelValue')
+  }
+
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when selection changes', async () => {
+      const widget = createMockWidget('option1')
+      const wrapper = mountComponent(widget, 'option1')
+
+      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('option2')
+    })
+
+    it('emits string value for different options', async () => {
+      const widget = createMockWidget('option1')
+      const wrapper = mountComponent(widget, 'option1')
+
+      const emitted = await setSelectValueAndEmit(wrapper, 'option3')
+
+      expect(emitted).toBeDefined()
+      // Should emit the string value
+      expect(emitted![0]).toContain('option3')
+    })
+
+    it('handles custom option values', async () => {
+      const customOptions = ['custom_a', 'custom_b', 'custom_c']
+      const widget = createMockWidget('custom_a', { values: customOptions })
+      const wrapper = mountComponent(widget, 'custom_a')
+
+      const emitted = await setSelectValueAndEmit(wrapper, 'custom_b')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('custom_b')
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('option1', {}, undefined)
+      const wrapper = mountComponent(widget, 'option1')
+
+      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+
+      // Should emit Vue event
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('option2')
+    })
+
+    it('handles value changes gracefully', async () => {
+      const widget = createMockWidget('option1')
+      const wrapper = mountComponent(widget, 'option1')
+
+      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('option2')
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables the select component when readonly', async () => {
+      const widget = createMockWidget('option1')
+      const wrapper = mountComponent(widget, 'option1', true)
+
+      const select = wrapper.findComponent({ name: 'Select' })
+      expect(select.props('disabled')).toBe(true)
+    })
+  })
+
+  describe('Option Handling', () => {
+    it('handles empty options array', async () => {
+      const widget = createMockWidget('', { values: [] })
+      const wrapper = mountComponent(widget, '')
+
+      const select = wrapper.findComponent({ name: 'Select' })
+      expect(select.props('options')).toEqual([])
+    })
+
+    it('handles single option', async () => {
+      const widget = createMockWidget('only_option', {
+        values: ['only_option']
+      })
+      const wrapper = mountComponent(widget, 'only_option')
+
+      const select = wrapper.findComponent({ name: 'Select' })
+      const options = select.props('options')
+      expect(options).toHaveLength(1)
+      expect(options[0]).toEqual('only_option')
+    })
+
+    it('handles options with special characters', async () => {
+      const specialOptions = [
+        'option with spaces',
+        'option@#$%',
+        'option/with\\slashes'
+      ]
+      const widget = createMockWidget(specialOptions[0], {
+        values: specialOptions
+      })
+      const wrapper = mountComponent(widget, specialOptions[0])
+
+      const emitted = await setSelectValueAndEmit(wrapper, specialOptions[1])
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(specialOptions[1])
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles selection of non-existent option gracefully', async () => {
+      const widget = createMockWidget('option1')
+      const wrapper = mountComponent(widget, 'option1')
+
+      const emitted = await setSelectValueAndEmit(
+        wrapper,
+        'non_existent_option'
+      )
+
+      // Should still emit Vue event with the value
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('non_existent_option')
+    })
+
+    it('handles numeric string options correctly', async () => {
+      const numericOptions = ['1', '2', '10', '100']
+      const widget = createMockWidget('1', { values: numericOptions })
+      const wrapper = mountComponent(widget, '1')
+
+      const emitted = await setSelectValueAndEmit(wrapper, '100')
+
+      // Should maintain string type in emitted event
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('100')
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
new file mode 100644
index 000000000..01cb75c18
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -0,0 +1,68 @@
+<template>
+  <WidgetLayoutField :widget>
+    <Select
+      v-model="localValue"
+      :options="selectOptions"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  modelValue: string | number | undefined
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | undefined]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: props.widget.options?.values?.[0] || '',
+  emit
+})
+
+// Transform compatibility props for overlay positioning
+const transformCompatProps = useTransformCompatOverlayProps()
+
+const combinedProps = computed(() => ({
+  ...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
+  ...transformCompatProps.value
+}))
+
+// Extract select options from widget options
+const selectOptions = computed(() => {
+  const options = props.widget.options
+
+  if (options?.values && Array.isArray(options.values)) {
+    return options.values
+  }
+
+  return []
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
new file mode 100644
index 000000000..c63edcf60
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
@@ -0,0 +1,36 @@
+<template>
+  <WidgetLayoutField :widget="widget">
+    <FormSelectButton
+      v-model="localValue"
+      :options="widget.options?.values || []"
+      :disabled="readonly"
+      class="w-full"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import FormSelectButton from './form/FormSelectButton.vue'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
new file mode 100644
index 000000000..157da563e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -0,0 +1,49 @@
+<template>
+  <Textarea
+    v-model="localValue"
+    v-bind="filteredProps"
+    :disabled="readonly"
+    :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+    :placeholder="placeholder || widget.name || ''"
+    size="small"
+    rows="3"
+    @update:model-value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
new file mode 100644
index 000000000..b7efcbcd5
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
@@ -0,0 +1,160 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import ToggleSwitch from 'primevue/toggleswitch'
+import type { ToggleSwitchProps } from 'primevue/toggleswitch'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
+
+describe('WidgetToggleSwitch Value Binding', () => {
+  const createMockWidget = (
+    value: boolean = false,
+    options: Partial<ToggleSwitchProps> = {},
+    callback?: (value: boolean) => void
+  ): SimplifiedWidget<boolean> => ({
+    name: 'test_toggle',
+    type: 'boolean',
+    value,
+    options,
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<boolean>,
+    modelValue: boolean,
+    readonly = false
+  ) => {
+    return mount(WidgetToggleSwitch, {
+      props: {
+        widget,
+        modelValue,
+        readonly
+      },
+      global: {
+        plugins: [PrimeVue],
+        components: { ToggleSwitch }
+      }
+    })
+  }
+
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when toggled from false to true', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      await toggle.setValue(true)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(true)
+    })
+
+    it('emits Vue event when toggled from true to false', async () => {
+      const widget = createMockWidget(true)
+      const wrapper = mountComponent(widget, true)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      await toggle.setValue(false)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(false)
+    })
+
+    it('handles value changes gracefully', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      // Should not throw when changing values
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      await toggle.setValue(true)
+      await toggle.setValue(false)
+
+      // Should emit events for all changes
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(2)
+      expect(emitted![0]).toContain(true)
+      expect(emitted![1]).toContain(false)
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('renders toggle switch component', () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      expect(wrapper.findComponent({ name: 'ToggleSwitch' }).exists()).toBe(
+        true
+      )
+    })
+
+    it('displays correct initial state for false', () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      expect(toggle.props('modelValue')).toBe(false)
+    })
+
+    it('displays correct initial state for true', () => {
+      const widget = createMockWidget(true)
+      const wrapper = mountComponent(widget, true)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      expect(toggle.props('modelValue')).toBe(true)
+    })
+
+    it('disables component in readonly mode', () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false, true)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      expect(toggle.props('disabled')).toBe(true)
+    })
+  })
+
+  describe('Multiple Value Changes', () => {
+    it('handles rapid toggling correctly', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+
+      // Rapid toggle sequence
+      await toggle.setValue(true)
+      await toggle.setValue(false)
+      await toggle.setValue(true)
+
+      // Should have emitted 3 Vue events with correct values
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(3)
+      expect(emitted![0]).toContain(true)
+      expect(emitted![1]).toContain(false)
+      expect(emitted![2]).toContain(true)
+    })
+
+    it('maintains state consistency during multiple changes', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+
+      // Multiple state changes
+      await toggle.setValue(true)
+      await toggle.setValue(false)
+      await toggle.setValue(true)
+      await toggle.setValue(false)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(4)
+      // Verify alternating pattern
+      expect(emitted![0]).toContain(true)
+      expect(emitted![1]).toContain(false)
+      expect(emitted![2]).toContain(true)
+      expect(emitted![3]).toContain(false)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
new file mode 100644
index 000000000..61b29cba7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -0,0 +1,55 @@
+<template>
+  <WidgetLayoutField :widget="widget">
+    <ToggleSwitch
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
+
+import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<boolean>
+  modelValue: boolean
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useBooleanWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-toggleswitch .p-toggleswitch-slider) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-toggleswitch:hover .p-toggleswitch-slider) {
+  border-color: currentColor;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
new file mode 100644
index 000000000..443ba5f9c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -0,0 +1,60 @@
+<template>
+  <WidgetLayoutField :widget="widget">
+    <TreeSelect
+      v-model="localValue"
+      v-bind="combinedProps"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </WidgetLayoutField>
+</template>
+
+<script setup lang="ts">
+import TreeSelect from 'primevue/treeselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+// Transform compatibility props for overlay positioning
+const transformCompatProps = useTransformCompatOverlayProps()
+
+// TreeSelect specific excluded props
+const TREE_SELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'inputClass',
+  'inputStyle'
+] as const
+
+const combinedProps = computed(() => ({
+  ...filterWidgetProps(props.widget.options, TREE_SELECT_EXCLUDED_PROPS),
+  ...transformCompatProps.value
+}))
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
new file mode 100644
index 000000000..9b41b204a
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    :class="
+      cn(
+        WidgetInputBaseClass,
+        'p-1 inline-flex justify-center items-center gap-1'
+      )
+    "
+  >
+    <button
+      v-for="(option, index) in options"
+      :key="getOptionValue(option, index)"
+      :class="
+        cn(
+          'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out',
+          'bg-transparent border-none',
+          'text-center text-xs font-normal',
+          {
+            'bg-white': isSelected(option) && !disabled,
+            'hover:bg-zinc-200/50': !isSelected(option) && !disabled,
+            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled
+          },
+          {
+            'text-neutral-900': isSelected(option) && !disabled,
+            'text-zinc-500': !isSelected(option) || disabled
+          }
+        )
+      "
+      :disabled="disabled"
+      @click="handleSelect(option)"
+    >
+      {{ getOptionLabel(option) }}
+    </button>
+  </div>
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="T extends string | number | { label: string; value: any }"
+>
+import { cn } from '@/utils/tailwindUtil'
+
+import { WidgetInputBaseClass } from '../layout'
+
+interface Props {
+  modelValue: string | null | undefined
+  options: T[] // Now using generic type instead of any[]
+  optionLabel?: string // PrimeVue compatible prop
+  optionValue?: string // PrimeVue compatible prop
+  disabled?: boolean
+}
+
+interface Emits {
+  'update:modelValue': [value: string]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  optionLabel: 'label',
+  optionValue: 'value'
+})
+
+const emit = defineEmits<Emits>()
+
+// handle both string/number arrays and object arrays with PrimeVue compatibility
+const getOptionValue = (option: T, index: number): string => {
+  if (typeof option === 'object' && option !== null) {
+    const valueField = props.optionValue
+    const value =
+      (option as any)[valueField] ??
+      (option as any).value ??
+      (option as any).name ??
+      (option as any).label ??
+      index
+    return String(value)
+  }
+  return String(option)
+}
+
+// for display with PrimeVue compatibility
+const getOptionLabel = (option: T): string => {
+  if (typeof option === 'object' && option !== null) {
+    const labelField = props.optionLabel
+    return (
+      (option as any)[labelField] ??
+      (option as any).label ??
+      (option as any).name ??
+      (option as any).value ??
+      String(option)
+    )
+  }
+  return String(option)
+}
+
+const isSelected = (option: T): boolean => {
+  const optionValue = getOptionValue(option, props.options.indexOf(option))
+  return optionValue === String(props.modelValue ?? '')
+}
+
+const handleSelect = (option: T) => {
+  if (props.disabled) return
+
+  const optionValue = getOptionValue(option, props.options.indexOf(option))
+  emit('update:modelValue', optionValue)
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
new file mode 100644
index 000000000..5d7e46f5d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { noop } from 'es-toolkit'
+
+import { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+defineProps<{
+  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name'>
+}>()
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-2 h-[30px] overscroll-contain"
+  >
+    <p
+      v-if="widget.name"
+      class="text-sm text-[#888682] dark-theme:text-[#9FA2BD] font-normal flex-1 truncate w-20"
+    >
+      {{ widget.name }}
+    </p>
+    <div
+      class="w-75"
+      @pointerdown.stop="noop"
+      @pointermove.stop="noop"
+      @pointerup.stop="noop"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
new file mode 100644
index 000000000..5de9f97aa
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
@@ -0,0 +1,14 @@
+export const WidgetInputBaseClass = [
+  // Background
+  'bg-zinc-500/10',
+  // Outline
+  'border-none',
+  'outline',
+  'outline-1',
+  'outline-offset-[-1px]',
+  'outline-zinc-300/10',
+  // Rounded
+  '!rounded-lg',
+  // Hover
+  'hover:outline-blue-500/80'
+].join(' ')
diff --git a/src/composables/widgets/useBooleanWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
similarity index 100%
rename from src/composables/widgets/useBooleanWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts
new file mode 100644
index 000000000..4c94155a6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts
@@ -0,0 +1,28 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IChartWidget } from '@/lib/litegraph/src/types/widgets'
+import {
+  type ChartInputSpec,
+  type InputSpec as InputSpecV2,
+  isChartInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useChartWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IChartWidget => {
+    if (!isChartInputSpec(inputSpec)) {
+      throw new Error('Invalid input spec for chart widget')
+    }
+
+    const { name, options = {} } = inputSpec as ChartInputSpec
+
+    const chartType = options.type || 'line'
+
+    const widget = node.addWidget('chart', name, options.data || {}, () => {}, {
+      serialize: true,
+      type: chartType,
+      ...options
+    }) as IChartWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useChatHistoryWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts
similarity index 100%
rename from src/composables/widgets/useChatHistoryWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useColorWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useColorWidget.ts
new file mode 100644
index 000000000..420e31ce0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useColorWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IColorWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  ColorInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useColorWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IColorWidget => {
+    const { name, options } = inputSpec as ColorInputSpec
+    const defaultValue = options?.default || '#000000'
+
+    const widget = node.addWidget('color', name, defaultValue, () => {}, {
+      serialize: true
+    }) as IColorWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
similarity index 69%
rename from src/composables/widgets/useComboWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index ad973325d..586cfb27e 100644
--- a/src/composables/widgets/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -1,8 +1,12 @@
 import { ref } from 'vue'
 
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
+import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  IBaseWidget,
+  IComboWidget
+} from '@/lib/litegraph/src/types/widgets'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import {
   ComboInputSpec,
@@ -18,6 +22,8 @@ import {
   type ComfyWidgetConstructorV2,
   addValueControlWidgets
 } from '@/scripts/widgets'
+import { assetService } from '@/services/assetService'
+import { useSettingStore } from '@/stores/settingStore'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
@@ -28,7 +34,10 @@ const getDefaultValue = (inputSpec: ComboInputSpec) => {
   return undefined
 }
 
-const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
+const addMultiSelectWidget = (
+  node: LGraphNode,
+  inputSpec: ComboInputSpec
+): IBaseWidget => {
   const widgetValue = ref<string[]>([])
   const widget = new ComponentWidgetImpl({
     node,
@@ -48,7 +57,36 @@ const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   return widget
 }
 
-const addComboWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
+const addComboWidget = (
+  node: LGraphNode,
+  inputSpec: ComboInputSpec
+): IBaseWidget => {
+  const settingStore = useSettingStore()
+  const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
+  const isEligible = assetService.isAssetBrowserEligible(
+    inputSpec.name,
+    node.comfyClass || ''
+  )
+
+  if (isUsingAssetAPI && isEligible) {
+    // Create button widget for Asset Browser
+    const currentValue = getDefaultValue(inputSpec)
+
+    const widget = node.addWidget(
+      'button',
+      inputSpec.name,
+      t('widgets.selectModel'),
+      () => {
+        console.log(
+          `Asset Browser would open here for:\nNode: ${node.type}\nWidget: ${inputSpec.name}\nCurrent Value:${currentValue}`
+        )
+      }
+    )
+
+    return widget
+  }
+
+  // Create normal combo widget
   const defaultValue = getDefaultValue(inputSpec)
   const comboOptions = inputSpec.options ?? []
   const widget = node.addWidget(
@@ -59,14 +97,14 @@ const addComboWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
     {
       values: comboOptions
     }
-  ) as IComboWidget
+  )
 
   if (inputSpec.remote) {
     const remoteWidget = useRemoteWidget({
       remoteConfig: inputSpec.remote,
       defaultValue,
       node,
-      widget
+      widget: widget as IComboWidget
     })
     if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()
 
@@ -84,7 +122,7 @@ const addComboWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   if (inputSpec.control_after_generate) {
     widget.linkedWidgets = addValueControlWidgets(
       node,
-      widget,
+      widget as IComboWidget,
       undefined,
       undefined,
       transformInputSpecV2ToV1(inputSpec)
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget.ts
new file mode 100644
index 000000000..b6c61753f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IFileUploadWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  FileUploadInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useFileUploadWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IFileUploadWidget => {
+    const { name, options = {} } = inputSpec as FileUploadInputSpec
+
+    const widget = node.addWidget('fileupload', name, '', () => {}, {
+      serialize: true,
+      ...(options as Record<string, unknown>)
+    }) as IFileUploadWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useFloatWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
similarity index 97%
rename from src/composables/widgets/useFloatWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
index f21a1a7c4..c9017ea6c 100644
--- a/src/composables/widgets/useFloatWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
@@ -1,4 +1,4 @@
-import _ from 'es-toolkit/compat'
+import { clamp } from 'es-toolkit/compat'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
@@ -15,7 +15,7 @@ function onFloatValueChange(this: INumericWidget, v: number) {
     const precision =
       this.options.precision ?? Math.max(0, -Math.floor(Math.log10(round)))
     const rounded = Math.round(v / round) * round
-    this.value = _.clamp(
+    this.value = clamp(
       Number(rounded.toFixed(precision)),
       this.options.min ?? -Infinity,
       this.options.max ?? Infinity
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget.ts
new file mode 100644
index 000000000..e06259d29
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget.ts
@@ -0,0 +1,26 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IGalleriaWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  GalleriaInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useGalleriaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IGalleriaWidget => {
+    const { name, options = {} } = inputSpec as GalleriaInputSpec
+
+    const widget = node.addWidget(
+      'galleria',
+      name,
+      options.images || [],
+      () => {},
+      {
+        serialize: true,
+        ...options
+      }
+    ) as IGalleriaWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts
new file mode 100644
index 000000000..a985585e5
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IImageCompareWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  ImageCompareInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useImageCompareWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageCompareWidget => {
+    const { name, options = {} } = inputSpec as ImageCompareInputSpec
+
+    const widget = node.addWidget('imagecompare', name, ['', ''], () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageCompareWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useImagePreviewWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
similarity index 100%
rename from src/composables/widgets/useImagePreviewWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
diff --git a/src/composables/widgets/useImageUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
similarity index 100%
rename from src/composables/widgets/useImageUploadWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
diff --git a/src/composables/widgets/useIntWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
similarity index 100%
rename from src/composables/widgets/useIntWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
diff --git a/src/composables/widgets/useMarkdownWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
similarity index 100%
rename from src/composables/widgets/useMarkdownWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget.ts
new file mode 100644
index 000000000..2730115b7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget.ts
@@ -0,0 +1,21 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IMultiSelectWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  MultiSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useMultiSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IMultiSelectWidget => {
+    const { name, options = {} } = inputSpec as MultiSelectInputSpec
+
+    const widget = node.addWidget('multiselect', name, [], () => {}, {
+      serialize: true,
+      values: options.values || [],
+      ...options
+    }) as IMultiSelectWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useProgressTextWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts
similarity index 100%
rename from src/composables/widgets/useProgressTextWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts
diff --git a/src/composables/widgets/useRemoteWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
similarity index 99%
rename from src/composables/widgets/useRemoteWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
index 0fde7592a..9022ab8c1 100644
--- a/src/composables/widgets/useRemoteWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
@@ -9,7 +9,7 @@ import { api } from '@/scripts/api'
 const MAX_RETRIES = 5
 const TIMEOUT = 4096
 
-export interface CacheEntry<T> {
+interface CacheEntry<T> {
   data: T
   timestamp?: number
   error?: Error | null
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget.ts
new file mode 100644
index 000000000..f9c3af9aa
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget.ts
@@ -0,0 +1,28 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ISelectButtonWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  SelectButtonInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useSelectButtonWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ISelectButtonWidget => {
+    const { name, options = {} } = inputSpec as SelectButtonInputSpec
+    const values = options.values || []
+
+    const widget = node.addWidget(
+      'selectbutton',
+      name,
+      values[0] || '',
+      (_value: string) => {},
+      {
+        serialize: true,
+        values,
+        ...options
+      }
+    ) as ISelectButtonWidget
+
+    return widget
+  }
+}
diff --git a/src/composables/widgets/useStringWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
similarity index 100%
rename from src/composables/widgets/useStringWidget.ts
rename to src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget.ts
new file mode 100644
index 000000000..052c8935c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget.ts
@@ -0,0 +1,28 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ITextareaWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  TextareaInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useTextareaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITextareaWidget => {
+    const { name, options = {} } = inputSpec as TextareaInputSpec
+
+    const widget = node.addWidget(
+      'textarea',
+      name,
+      options.default || '',
+      () => {},
+      {
+        serialize: true,
+        rows: options.rows || 5,
+        cols: options.cols || 50,
+        ...options
+      }
+    ) as ITextareaWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget.ts
new file mode 100644
index 000000000..b497e9ae0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget.ts
@@ -0,0 +1,24 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ITreeSelectWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  TreeSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useTreeSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITreeSelectWidget => {
+    const { name, options = {} } = inputSpec as TreeSelectInputSpec
+    const isMultiple = options.multiple || false
+    const defaultValue = isMultiple ? [] : ''
+
+    const widget = node.addWidget('treeselect', name, defaultValue, () => {}, {
+      serialize: true,
+      values: options.values || [],
+      multiple: isMultiple,
+      ...options
+    }) as ITreeSelectWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
new file mode 100644
index 000000000..b07c89e5b
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -0,0 +1,150 @@
+/**
+ * Widget type registry and component mapping for Vue-based widgets
+ */
+import type { Component } from 'vue'
+
+import WidgetButton from '../components/WidgetButton.vue'
+import WidgetChart from '../components/WidgetChart.vue'
+import WidgetColorPicker from '../components/WidgetColorPicker.vue'
+import WidgetFileUpload from '../components/WidgetFileUpload.vue'
+import WidgetGalleria from '../components/WidgetGalleria.vue'
+import WidgetImageCompare from '../components/WidgetImageCompare.vue'
+import WidgetInputNumber from '../components/WidgetInputNumber.vue'
+import WidgetInputText from '../components/WidgetInputText.vue'
+import WidgetMarkdown from '../components/WidgetMarkdown.vue'
+import WidgetMultiSelect from '../components/WidgetMultiSelect.vue'
+import WidgetSelect from '../components/WidgetSelect.vue'
+import WidgetSelectButton from '../components/WidgetSelectButton.vue'
+import WidgetTextarea from '../components/WidgetTextarea.vue'
+import WidgetToggleSwitch from '../components/WidgetToggleSwitch.vue'
+import WidgetTreeSelect from '../components/WidgetTreeSelect.vue'
+
+interface WidgetDefinition {
+  component: Component
+  aliases: string[]
+  essential: boolean
+}
+
+const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
+  [
+    'button',
+    { component: WidgetButton, aliases: ['BUTTON'], essential: false }
+  ],
+  [
+    'string',
+    {
+      component: WidgetInputText,
+      aliases: ['STRING', 'text'],
+      essential: false
+    }
+  ],
+  ['int', { component: WidgetInputNumber, aliases: ['INT'], essential: true }],
+  [
+    'float',
+    {
+      component: WidgetInputNumber,
+      aliases: ['FLOAT', 'number', 'slider'],
+      essential: true
+    }
+  ],
+  [
+    'boolean',
+    {
+      component: WidgetToggleSwitch,
+      aliases: ['BOOLEAN', 'toggle'],
+      essential: true
+    }
+  ],
+  ['combo', { component: WidgetSelect, aliases: ['COMBO'], essential: true }],
+  [
+    'color',
+    { component: WidgetColorPicker, aliases: ['COLOR'], essential: false }
+  ],
+  [
+    'multiselect',
+    { component: WidgetMultiSelect, aliases: ['MULTISELECT'], essential: false }
+  ],
+  [
+    'selectbutton',
+    {
+      component: WidgetSelectButton,
+      aliases: ['SELECTBUTTON'],
+      essential: false
+    }
+  ],
+  [
+    'textarea',
+    {
+      component: WidgetTextarea,
+      aliases: ['TEXTAREA', 'multiline', 'customtext'],
+      essential: false
+    }
+  ],
+  ['chart', { component: WidgetChart, aliases: ['CHART'], essential: false }],
+  [
+    'imagecompare',
+    {
+      component: WidgetImageCompare,
+      aliases: ['IMAGECOMPARE'],
+      essential: false
+    }
+  ],
+  [
+    'galleria',
+    { component: WidgetGalleria, aliases: ['GALLERIA'], essential: false }
+  ],
+  [
+    'fileupload',
+    {
+      component: WidgetFileUpload,
+      aliases: ['FILEUPLOAD', 'file'],
+      essential: false
+    }
+  ],
+  [
+    'treeselect',
+    { component: WidgetTreeSelect, aliases: ['TREESELECT'], essential: false }
+  ],
+  [
+    'markdown',
+    { component: WidgetMarkdown, aliases: ['MARKDOWN'], essential: false }
+  ]
+]
+
+// Build lookup maps
+const widgets = new Map<string, WidgetDefinition>()
+const aliasMap = new Map<string, string>()
+
+for (const [type, def] of coreWidgetDefinitions) {
+  widgets.set(type, def)
+  for (const alias of def.aliases) {
+    aliasMap.set(alias, type)
+  }
+}
+
+// Utility functions
+const getCanonicalType = (type: string): string => aliasMap.get(type) || type
+
+export const getComponent = (type: string): Component | null => {
+  const canonicalType = getCanonicalType(type)
+  return widgets.get(canonicalType)?.component || null
+}
+
+const isSupported = (type: string): boolean => {
+  const canonicalType = getCanonicalType(type)
+  return widgets.has(canonicalType)
+}
+
+export const isEssential = (type: string): boolean => {
+  const canonicalType = getCanonicalType(type)
+  return widgets.get(canonicalType)?.essential || false
+}
+
+export const shouldRenderAsVue = (widget: {
+  type?: string
+  options?: Record<string, unknown>
+}): boolean => {
+  if (widget.options?.canvasOnly) return false
+  if (!widget.type) return false
+  return isSupported(widget.type)
+}
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 145ee57a0..3def57252 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -1,5 +1,4 @@
 import { z } from 'zod'
-import { fromZodError } from 'zod-validation-error'
 
 import { LinkMarkerShape } from '@/lib/litegraph/src/litegraph'
 import { colorPalettesSchema } from '@/schemas/colorPaletteSchema'
@@ -280,18 +279,6 @@ export type PendingTaskItem = z.infer<typeof zPendingTaskItem>
 export type HistoryTaskItem = z.infer<typeof zHistoryTaskItem>
 export type TaskItem = z.infer<typeof zTaskItem>
 
-export function validateTaskItem(taskItem: unknown) {
-  const result = zTaskItem.safeParse(taskItem)
-  if (!result.success) {
-    const zodError = fromZodError(result.error)
-    // TODO accept a callback to report error.
-    console.warn(
-      `Invalid TaskItem: ${JSON.stringify(taskItem)}\n${zodError.message}`
-    )
-  }
-  return result
-}
-
 const zEmbeddingsResponse = z.array(z.string())
 const zExtensionsResponse = z.array(z.string())
 const zError = z.object({
@@ -331,7 +318,7 @@ const zDeviceStats = z.object({
   torch_vram_free: z.number()
 })
 
-export const zSystemStats = z.object({
+const zSystemStats = z.object({
   system: z.object({
     os: z.string(),
     python_version: z.string(),
@@ -380,6 +367,7 @@ const zSettings = z.object({
   'Comfy.DevMode': z.boolean(),
   'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(),
   'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
+  'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
   'Comfy.DisableFloatRounding': z.boolean(),
   'Comfy.DisableSliders': z.boolean(),
   'Comfy.DOMClippingEnabled': z.boolean(),
@@ -478,6 +466,8 @@ const zSettings = z.object({
   'Comfy.Minimap.RenderBypassState': z.boolean(),
   'Comfy.Minimap.RenderErrorState': z.boolean(),
   'Comfy.Canvas.NavigationMode': z.string(),
+  'Comfy.VueNodes.Enabled': z.boolean(),
+  'Comfy.Assets.UseAssetAPI': z.boolean(),
   'Comfy-Desktop.AutoUpdate': z.boolean(),
   'Comfy-Desktop.SendStatistics': z.boolean(),
   'Comfy-Desktop.WindowStyle': z.string(),
diff --git a/src/schemas/assetSchema.ts b/src/schemas/assetSchema.ts
new file mode 100644
index 000000000..277efcbb0
--- /dev/null
+++ b/src/schemas/assetSchema.ts
@@ -0,0 +1,39 @@
+import { z } from 'zod'
+
+// Zod schemas for asset API validation
+const zAsset = z.object({
+  id: z.string(),
+  name: z.string(),
+  tags: z.array(z.string()),
+  size: z.number(),
+  created_at: z.string().optional()
+})
+
+const zAssetResponse = z.object({
+  assets: z.array(zAsset).optional(),
+  total: z.number().optional(),
+  has_more: z.boolean().optional()
+})
+
+const zModelFolder = z.object({
+  name: z.string(),
+  folders: z.array(z.string())
+})
+
+// Export schemas following repository patterns
+export const assetResponseSchema = zAssetResponse
+
+// Export types derived from Zod schemas
+export type AssetResponse = z.infer<typeof zAssetResponse>
+export type ModelFolder = z.infer<typeof zModelFolder>
+
+// Common interfaces for API responses
+export interface ModelFile {
+  name: string
+  pathIndex: number
+}
+
+export interface ModelFolderInfo {
+  name: string
+  folders: string[]
+}
diff --git a/src/schemas/colorPaletteSchema.ts b/src/schemas/colorPaletteSchema.ts
index 1a29c3940..88b797486 100644
--- a/src/schemas/colorPaletteSchema.ts
+++ b/src/schemas/colorPaletteSchema.ts
@@ -100,7 +100,7 @@ export const paletteSchema = z
   })
   .passthrough()
 
-export const completedPaletteSchema = z
+const completedPaletteSchema = z
   .object({
     id: z.string(),
     name: z.string(),
diff --git a/src/schemas/comfyWorkflowSchema.ts b/src/schemas/comfyWorkflowSchema.ts
index 70ebcd279..a07ebc018 100644
--- a/src/schemas/comfyWorkflowSchema.ts
+++ b/src/schemas/comfyWorkflowSchema.ts
@@ -5,9 +5,9 @@ import { fromZodError } from 'zod-validation-error'
 // innerNode.id = `${this.node.id}:${i}`
 // Remove it after GroupNode is redesigned.
 export const zNodeId = z.union([z.number().int(), z.string()])
-export const zNodeInputName = z.string()
+const zNodeInputName = z.string()
 export type NodeId = z.infer<typeof zNodeId>
-export const zSlotIndex = z.union([
+const zSlotIndex = z.union([
   z.number().int(),
   z
     .string()
@@ -20,7 +20,7 @@ export const zSlotIndex = z.union([
 // TODO: Investigate usage of array and number as data type usage in custom nodes.
 // Known usage:
 // - https://github.com/rgthree/rgthree-comfy Context Big node is using array as type.
-export const zDataType = z.union([z.string(), z.array(z.string()), z.number()])
+const zDataType = z.union([z.string(), z.array(z.string()), z.number()])
 
 const zVector2 = z.union([
   z
@@ -214,7 +214,7 @@ const zComfyNode = z
   })
   .passthrough()
 
-export const zSubgraphIO = zNodeInput.extend({
+const zSubgraphIO = zNodeInput.extend({
   /** Slot ID (internal; never changes once instantiated). */
   id: z.string().uuid(),
   /** The data type this slot uses. Unlike nodes, this does not support legacy numeric types. */
@@ -274,11 +274,11 @@ const zExtra = z
   })
   .passthrough()
 
-export const zGraphDefinitions = z.object({
+const zGraphDefinitions = z.object({
   subgraphs: z.lazy(() => z.array(zSubgraphDefinition))
 })
 
-export const zBaseExportableGraph = z.object({
+const zBaseExportableGraph = z.object({
   /** Unique graph ID.  Automatically generated if not provided. */
   id: z.string().uuid().optional(),
   revision: z.number().optional(),
@@ -371,13 +371,13 @@ export const zComfyWorkflow1 = zBaseExportableGraph
   })
   .passthrough()
 
-export const zExportedSubgraphIONode = z.object({
+const zExportedSubgraphIONode = z.object({
   id: zNodeId,
   bounding: z.tuple([z.number(), z.number(), z.number(), z.number()]),
   pinned: z.boolean().optional()
 })
 
-export const zExposedWidget = z.object({
+const zExposedWidget = z.object({
   id: z.string(),
   name: z.string()
 })
@@ -414,7 +414,7 @@ interface SubgraphDefinitionBase<
 }
 
 /** A subgraph definition `worfklow.definitions.subgraphs` */
-export const zSubgraphDefinition = zComfyWorkflow1
+const zSubgraphDefinition = zComfyWorkflow1
   .extend({
     /** Unique graph ID.  Automatically generated if not provided. */
     id: z.string().uuid(),
@@ -447,18 +447,15 @@ export const zSubgraphDefinition = zComfyWorkflow1
   .passthrough()
 
 export type ModelFile = z.infer<typeof zModelFile>
-export type NodeInput = z.infer<typeof zNodeInput>
-export type NodeOutput = z.infer<typeof zNodeOutput>
 export type ComfyLink = z.infer<typeof zComfyLink>
 export type ComfyLinkObject = z.infer<typeof zComfyLinkObject>
 export type ComfyNode = z.infer<typeof zComfyNode>
 export type Reroute = z.infer<typeof zReroute>
 export type WorkflowJSON04 = z.infer<typeof zComfyWorkflow>
-export type WorkflowJSON10 = z.infer<typeof zComfyWorkflow1>
 export type ComfyWorkflowJSON = z.infer<
   typeof zComfyWorkflow | typeof zComfyWorkflow1
 >
-export type SubgraphDefinition = z.infer<typeof zSubgraphDefinition>
+type SubgraphDefinition = z.infer<typeof zSubgraphDefinition>
 
 /**
  * Type guard to check if an object is a SubgraphDefinition.
@@ -525,5 +522,5 @@ const zNodeData = z.object({
   })
 })
 
-export const zComfyApiWorkflow = z.record(zNodeId, zNodeData)
+const zComfyApiWorkflow = z.record(zNodeId, zNodeData)
 export type ComfyApiWorkflow = z.infer<typeof zComfyApiWorkflow>
diff --git a/src/schemas/keyBindingSchema.ts b/src/schemas/keyBindingSchema.ts
index 31896842f..04cbe319a 100644
--- a/src/schemas/keyBindingSchema.ts
+++ b/src/schemas/keyBindingSchema.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 // KeyCombo schema
-export const zKeyCombo = z.object({
+const zKeyCombo = z.object({
   key: z.string(),
   ctrl: z.boolean().optional(),
   alt: z.boolean().optional(),
diff --git a/src/schemas/nodeDef/nodeDefSchemaV2.ts b/src/schemas/nodeDef/nodeDefSchemaV2.ts
index a5594953d..09983d115 100644
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -39,6 +39,119 @@ const zComboInputSpec = zComboInputOptions.extend({
   isOptional: z.boolean().optional()
 })
 
+const zColorInputSpec = zBaseInputOptions.extend({
+  type: z.literal('COLOR'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      default: z.string().optional()
+    })
+    .optional()
+})
+
+const zFileUploadInputSpec = zBaseInputOptions.extend({
+  type: z.literal('FILEUPLOAD'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zImageInputSpec = zBaseInputOptions.extend({
+  type: z.literal('IMAGE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zImageCompareInputSpec = zBaseInputOptions.extend({
+  type: z.literal('IMAGECOMPARE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z.record(z.unknown()).optional()
+})
+
+const zMarkdownInputSpec = zBaseInputOptions.extend({
+  type: z.literal('MARKDOWN'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      content: z.string().optional()
+    })
+    .optional()
+})
+
+const zTreeSelectInputSpec = zBaseInputOptions.extend({
+  type: z.literal('TREESELECT'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      multiple: z.boolean().optional(),
+      values: z.array(z.unknown()).optional()
+    })
+    .optional()
+})
+
+const zMultiSelectInputSpec = zBaseInputOptions.extend({
+  type: z.literal('MULTISELECT'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      values: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zChartInputSpec = zBaseInputOptions.extend({
+  type: z.literal('CHART'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      type: z.enum(['bar', 'line']).optional(),
+      data: z.object({}).optional()
+    })
+    .optional()
+})
+
+const zGalleriaInputSpec = zBaseInputOptions.extend({
+  type: z.literal('GALLERIA'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      images: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zSelectButtonInputSpec = zBaseInputOptions.extend({
+  type: z.literal('SELECTBUTTON'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      values: z.array(z.string()).optional()
+    })
+    .optional()
+})
+
+const zTextareaInputSpec = zBaseInputOptions.extend({
+  type: z.literal('TEXTAREA'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  options: z
+    .object({
+      rows: z.number().optional(),
+      cols: z.number().optional(),
+      default: z.string().optional()
+    })
+    .optional()
+})
+
 const zCustomInputSpec = zBaseInputOptions.extend({
   type: z.string(),
   name: z.string(),
@@ -51,6 +164,17 @@ const zInputSpec = z.union([
   zBooleanInputSpec,
   zStringInputSpec,
   zComboInputSpec,
+  zColorInputSpec,
+  zFileUploadInputSpec,
+  zImageInputSpec,
+  zImageCompareInputSpec,
+  zMarkdownInputSpec,
+  zTreeSelectInputSpec,
+  zMultiSelectInputSpec,
+  zChartInputSpec,
+  zGalleriaInputSpec,
+  zSelectButtonInputSpec,
+  zTextareaInputSpec,
   zCustomInputSpec
 ])
 
@@ -83,11 +207,20 @@ export const zComfyNodeDef = z.object({
 })
 
 // Export types
-export type IntInputSpec = z.infer<typeof zIntInputSpec>
-export type FloatInputSpec = z.infer<typeof zFloatInputSpec>
-export type BooleanInputSpec = z.infer<typeof zBooleanInputSpec>
-export type StringInputSpec = z.infer<typeof zStringInputSpec>
+type IntInputSpec = z.infer<typeof zIntInputSpec>
+type FloatInputSpec = z.infer<typeof zFloatInputSpec>
+type BooleanInputSpec = z.infer<typeof zBooleanInputSpec>
+type StringInputSpec = z.infer<typeof zStringInputSpec>
 export type ComboInputSpec = z.infer<typeof zComboInputSpec>
+export type ColorInputSpec = z.infer<typeof zColorInputSpec>
+export type FileUploadInputSpec = z.infer<typeof zFileUploadInputSpec>
+export type ImageCompareInputSpec = z.infer<typeof zImageCompareInputSpec>
+export type TreeSelectInputSpec = z.infer<typeof zTreeSelectInputSpec>
+export type MultiSelectInputSpec = z.infer<typeof zMultiSelectInputSpec>
+export type ChartInputSpec = z.infer<typeof zChartInputSpec>
+export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
+export type SelectButtonInputSpec = z.infer<typeof zSelectButtonInputSpec>
+export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
 export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
 
 export type InputSpec = z.infer<typeof zInputSpec>
@@ -124,18 +257,8 @@ export const isComboInputSpec = (
   return inputSpec.type === 'COMBO'
 }
 
-/**
- * Check if a node definition is a valid ComfyUI node definition.
- *
- * Note: This is just a simple check against the V1 schema.
- *
- * @param nodeDef - The node definition to check.
- * @returns True if the node definition is valid, false otherwise.
- */
-export const isComfyNodeDef = (nodeDef: unknown): nodeDef is ComfyNodeDef => {
-  return (
-    !!nodeDef &&
-    typeof nodeDef === 'object' &&
-    ['inputs', 'outputs'].every((key) => key in nodeDef)
-  )
+export const isChartInputSpec = (
+  inputSpec: InputSpec
+): inputSpec is ChartInputSpec => {
+  return inputSpec.type === 'CHART'
 }
diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts
index 9370c9073..24adf85d4 100644
--- a/src/schemas/nodeDefSchema.ts
+++ b/src/schemas/nodeDefSchema.ts
@@ -34,7 +34,7 @@ export const zBaseInputOptions = z
   })
   .passthrough()
 
-export const zNumericInputOptions = zBaseInputOptions.extend({
+const zNumericInputOptions = zBaseInputOptions.extend({
   min: z.number().optional(),
   max: z.number().optional(),
   step: z.number().optional(),
@@ -128,30 +128,12 @@ export function isFloatInputSpec(
   return inputSpec[0] === 'FLOAT'
 }
 
-export function isBooleanInputSpec(
-  inputSpec: InputSpec
-): inputSpec is BooleanInputSpec {
-  return inputSpec[0] === 'BOOLEAN'
-}
-
-export function isStringInputSpec(
-  inputSpec: InputSpec
-): inputSpec is StringInputSpec {
-  return inputSpec[0] === 'STRING'
-}
-
 export function isComboInputSpecV2(
   inputSpec: InputSpec
 ): inputSpec is ComboInputSpecV2 {
   return inputSpec[0] === 'COMBO'
 }
 
-export function isCustomInputSpec(
-  inputSpec: InputSpec
-): inputSpec is CustomInputSpec {
-  return typeof inputSpec[0] === 'string' && !excludedLiterals.has(inputSpec[0])
-}
-
 export function isComboInputSpec(
   inputSpec: InputSpec
 ): inputSpec is ComboInputSpec | ComboInputSpecV2 {
@@ -247,22 +229,13 @@ export type ComfyOutputTypesSpec = z.infer<typeof zComfyOutputTypesSpec>
 export type ComfyNodeDef = z.infer<typeof zComfyNodeDef>
 export type RemoteWidgetConfig = z.infer<typeof zRemoteWidgetConfig>
 
-// Input specs
-export type IntInputOptions = z.infer<typeof zIntInputOptions>
-export type FloatInputOptions = z.infer<typeof zFloatInputOptions>
-export type BooleanInputOptions = z.infer<typeof zBooleanInputOptions>
-export type StringInputOptions = z.infer<typeof zStringInputOptions>
 export type ComboInputOptions = z.infer<typeof zComboInputOptions>
-export type BaseInputOptions = z.infer<typeof zBaseInputOptions>
 export type NumericInputOptions = z.infer<typeof zNumericInputOptions>
 
 export type IntInputSpec = z.infer<typeof zIntInputSpec>
 export type FloatInputSpec = z.infer<typeof zFloatInputSpec>
-export type BooleanInputSpec = z.infer<typeof zBooleanInputSpec>
-export type StringInputSpec = z.infer<typeof zStringInputSpec>
 export type ComboInputSpec = z.infer<typeof zComboInputSpec>
 export type ComboInputSpecV2 = z.infer<typeof zComboInputSpecV2>
-export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
 export type InputSpec = z.infer<typeof zInputSpec>
 
 export function validateComfyNodeDef(
diff --git a/src/schemas/signInSchema.ts b/src/schemas/signInSchema.ts
index 0e1e4905d..1e5a44198 100644
--- a/src/schemas/signInSchema.ts
+++ b/src/schemas/signInSchema.ts
@@ -10,8 +10,6 @@ export const apiKeySchema = z.object({
     .length(72, t('validation.length', { length: 72 }))
 })
 
-export type ApiKeyData = z.infer<typeof apiKeySchema>
-
 export const signInSchema = z.object({
   email: z
     .string()
@@ -42,8 +40,6 @@ export const updatePasswordSchema = passwordSchema.refine(
   }
 )
 
-export type UpdatePasswordData = z.infer<typeof updatePasswordSchema>
-
 export const signUpSchema = passwordSchema
   .extend({
     email: z
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index 857626674..9480face6 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -30,6 +30,7 @@ import type {
   User,
   UserDataFullInfo
 } from '@/schemas/apiSchema'
+import type { ModelFile, ModelFolderInfo } from '@/schemas/assetSchema'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON,
@@ -675,14 +676,14 @@ export class ComfyApi extends EventTarget {
    * Gets a list of model folder keys (eg ['checkpoints', 'loras', ...])
    * @returns The list of model folder keys
    */
-  async getModelFolders(): Promise<{ name: string; folders: string[] }[]> {
+  async getModelFolders(): Promise<ModelFolderInfo[]> {
     const res = await this.fetchApi(`/experiment/models`)
     if (res.status === 404) {
       return []
     }
     const folderBlacklist = ['configs', 'custom_nodes']
     return (await res.json()).filter(
-      (folder: string) => !folderBlacklist.includes(folder)
+      (folder: ModelFolderInfo) => !folderBlacklist.includes(folder.name)
     )
   }
 
@@ -691,9 +692,7 @@ export class ComfyApi extends EventTarget {
    * @param {string} folder The folder to list models from, such as 'checkpoints'
    * @returns The list of model filenames within the specified folder
    */
-  async getModels(
-    folder: string
-  ): Promise<{ name: string; pathIndex: number }[]> {
+  async getModels(folder: string): Promise<ModelFile[]> {
     const res = await this.fetchApi(`/experiment/models/${folder}`)
     if (res.status === 404) {
       return []
@@ -1019,7 +1018,13 @@ export class ComfyApi extends EventTarget {
   }
 
   async getFolderPaths(): Promise<Record<string, string[]>> {
-    return (await axios.get(this.internalURL('/folder_paths'))).data
+    const response = await axios
+      .get(this.internalURL('/folder_paths'))
+      .catch(() => null)
+    if (!response) {
+      return {} // Fallback: no filesystem paths known when API unavailable
+    }
+    return response.data
   }
 
   /* Frees memory by unloading models and optionally freeing execution cache
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 1e9df767e..6c1114a26 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -53,6 +53,7 @@ import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useModelStore } from '@/stores/modelStore'
 import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { ComfyWorkflow } from '@/stores/workflowStore'
@@ -797,6 +798,7 @@ export class ComfyApp {
     this.resizeCanvas()
 
     await useWorkspaceStore().workflow.syncWorkflows()
+    await useSubgraphStore().fetchSubgraphs()
     await useExtensionService().loadExtensions()
 
     this.#addProcessKeyHandler()
@@ -905,7 +907,7 @@ export class ComfyApp {
       LiteGraph.registered_node_types
     )) {
       // Skip if we already have a backend definition or system definition
-      if (name in defs || name in SYSTEM_NODE_DEFS) {
+      if (name in defs || name in SYSTEM_NODE_DEFS || node.skip_list) {
         continue
       }
 
@@ -1058,6 +1060,8 @@ export class ComfyApp {
       checkForRerouteMigration = false
     } = {}
   ) {
+    useWorkflowService().beforeLoadNewGraph()
+
     if (clean !== false) {
       this.clean()
     }
@@ -1093,7 +1097,6 @@ export class ComfyApp {
         severity: 'warn'
       })
     }
-    useWorkflowService().beforeLoadNewGraph()
     useSubgraphService().loadSubgraphs(graphData)
 
     const missingNodeTypes: MissingNodeType[] = []
@@ -1765,6 +1768,12 @@ export class ComfyApp {
     executionStore.lastExecutionError = null
 
     useDomWidgetStore().clear()
+
+    // Subgraph does not properly implement `clear` and the parent class's
+    // (`LGraph`) `clear` breaks the subgraph structure.
+    if (this.graph && !this.canvas.subgraph) {
+      this.graph.clear()
+    }
   }
 
   clientPosToCanvasPos(pos: Vector2): Vector2 {
diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index ea2158326..a94ddb2ac 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -55,7 +55,7 @@ export interface DOMWidget<T extends HTMLElement, V extends object | string>
  * - widget: Reference to the widget instance
  * - onUpdate:modelValue: The update handler for v-model
  */
-export type ComponentWidgetCustomProps = Record<string, unknown>
+type ComponentWidgetCustomProps = Record<string, unknown>
 
 /**
  * Standard props that are handled separately by DomWidget.vue and should be
@@ -375,17 +375,3 @@ LGraphNode.prototype.addDOMWidget = function <
 
   return widget
 }
-
-/**
- * Prunes widgets that are no longer in the graph.
- * @param nodes The nodes to prune widgets for.
- */
-export const pruneWidgets = (nodes: LGraphNode[]) => {
-  const nodeSet = new Set(nodes)
-  const domWidgetStore = useDomWidgetStore()
-  for (const { widget } of domWidgetStore.widgetStates.values()) {
-    if (!nodeSet.has(widget.node)) {
-      domWidgetStore.unregisterWidget(widget.id)
-    }
-  }
-}
diff --git a/src/scripts/errorNodeWidgets.ts b/src/scripts/errorNodeWidgets.ts
index 71a7ddf1b..f6d114463 100644
--- a/src/scripts/errorNodeWidgets.ts
+++ b/src/scripts/errorNodeWidgets.ts
@@ -1,9 +1,9 @@
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
-import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
-import { useStringWidget } from '@/composables/widgets/useStringWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget'
+import { useFloatWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
+import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
 
 const StringWidget = useStringWidget()
 const FloatWidget = useFloatWidget()
diff --git a/src/scripts/metadata/avif.ts b/src/scripts/metadata/avif.ts
index d23adf4bb..70e5dcf62 100644
--- a/src/scripts/metadata/avif.ts
+++ b/src/scripts/metadata/avif.ts
@@ -319,7 +319,7 @@ function parseAvifMetadata(buffer: ArrayBuffer): ComfyMetadata {
 }
 
 // @ts-expect-error fixme ts strict error
-export function parseExifData(exifData) {
+function parseExifData(exifData) {
   // Check for the correct TIFF header (0x4949 for little-endian or 0x4D4D for big-endian)
   const isLittleEndian = String.fromCharCode(...exifData.slice(0, 2)) === 'II'
 
diff --git a/src/scripts/metadata/flac.ts b/src/scripts/metadata/flac.ts
index b3be03dd5..5a3efa6ac 100644
--- a/src/scripts/metadata/flac.ts
+++ b/src/scripts/metadata/flac.ts
@@ -1,3 +1,4 @@
+/** @knipIgnoreUnusedButUsedByCustomNodes */
 export function getFromFlacBuffer(buffer: ArrayBuffer): Record<string, string> {
   const dataView = new DataView(buffer)
 
diff --git a/src/scripts/metadata/png.ts b/src/scripts/metadata/png.ts
index 0d8b7d2dc..af3be9a64 100644
--- a/src/scripts/metadata/png.ts
+++ b/src/scripts/metadata/png.ts
@@ -1,3 +1,4 @@
+/** @knipIgnoreUnusedButUsedByCustomNodes */
 export function getFromPngBuffer(buffer: ArrayBuffer) {
   // Get the PNG data as a Uint8Array
   const pngData = new Uint8Array(buffer)
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index b2d075665..8ab6814c8 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -634,7 +634,6 @@ export class ComfyUI {
               confirm('Clear workflow?')
             ) {
               app.clean()
-              app.graph.clear()
               useLitegraphService().resetView()
               api.dispatchCustomEvent('graphCleared')
             }
diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts
index 778b712d9..59556523b 100644
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -17,6 +17,7 @@ export function clone<T>(obj: T): T {
 }
 
 /**
+ * @knipIgnoreUnusedButUsedByCustomNodes
  * @deprecated Use `applyTextReplacements` from `@/utils/searchAndReplace` instead
  * There are external callers to this function, so we need to keep it for now
  */
@@ -24,6 +25,7 @@ export function applyTextReplacements(app: ComfyApp, value: string): string {
   return _applyTextReplacements(app.graph, value)
 }
 
+/** @knipIgnoreUnusedButUsedByCustomNodes */
 export async function addStylesheet(
   urlOrFile: string,
   relativeTo?: string
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index b0b607917..357dc2bf1 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -1,10 +1,3 @@
-import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
-import { useComboWidget } from '@/composables/widgets/useComboWidget'
-import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
-import { useImageUploadWidget } from '@/composables/widgets/useImageUploadWidget'
-import { useIntWidget } from '@/composables/widgets/useIntWidget'
-import { useMarkdownWidget } from '@/composables/widgets/useMarkdownWidget'
-import { useStringWidget } from '@/composables/widgets/useStringWidget'
 import { t } from '@/i18n'
 import { type LGraphNode, isComboWidget } from '@/lib/litegraph/src/litegraph'
 import type {
@@ -12,6 +5,22 @@ import type {
   IComboWidget,
   IStringWidget
 } from '@/lib/litegraph/src/types/widgets'
+import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget'
+import { useChartWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChartWidget'
+import { useColorWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useColorWidget'
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
+import { useFileUploadWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget'
+import { useFloatWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
+import { useGalleriaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget'
+import { useImageCompareWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget'
+import { useImageUploadWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget'
+import { useIntWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
+import { useMarkdownWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget'
+import { useMultiSelectWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget'
+import { useSelectButtonWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget'
+import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
+import { useTextareaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget'
+import { useTreeSelectWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
 import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
@@ -288,5 +297,14 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
   STRING: transformWidgetConstructorV2ToV1(useStringWidget()),
   MARKDOWN: transformWidgetConstructorV2ToV1(useMarkdownWidget()),
   COMBO: transformWidgetConstructorV2ToV1(useComboWidget()),
-  IMAGEUPLOAD: useImageUploadWidget()
+  IMAGEUPLOAD: useImageUploadWidget(),
+  FILEUPLOAD: transformWidgetConstructorV2ToV1(useFileUploadWidget()),
+  COLOR: transformWidgetConstructorV2ToV1(useColorWidget()),
+  IMAGECOMPARE: transformWidgetConstructorV2ToV1(useImageCompareWidget()),
+  TREESELECT: transformWidgetConstructorV2ToV1(useTreeSelectWidget()),
+  MULTISELECT: transformWidgetConstructorV2ToV1(useMultiSelectWidget()),
+  CHART: transformWidgetConstructorV2ToV1(useChartWidget()),
+  GALLERIA: transformWidgetConstructorV2ToV1(useGalleriaWidget()),
+  SELECTBUTTON: transformWidgetConstructorV2ToV1(useSelectButtonWidget()),
+  TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget())
 }
diff --git a/src/services/assetService.ts b/src/services/assetService.ts
new file mode 100644
index 000000000..ffc825260
--- /dev/null
+++ b/src/services/assetService.ts
@@ -0,0 +1,137 @@
+import { fromZodError } from 'zod-validation-error'
+
+import {
+  type AssetResponse,
+  type ModelFile,
+  type ModelFolder,
+  assetResponseSchema
+} from '@/schemas/assetSchema'
+import { api } from '@/scripts/api'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+
+const ASSETS_ENDPOINT = '/assets'
+const MODELS_TAG = 'models'
+const MISSING_TAG = 'missing'
+
+/**
+ * Input names that are eligible for asset browser
+ */
+const WHITELISTED_INPUTS = new Set(['ckpt_name', 'lora_name', 'vae_name'])
+
+/**
+ * Validates asset response data using Zod schema
+ */
+function validateAssetResponse(data: unknown): AssetResponse {
+  const result = assetResponseSchema.safeParse(data)
+  if (result.success) return result.data
+
+  const error = fromZodError(result.error)
+  throw new Error(`Invalid asset response against zod schema:\n${error}`)
+}
+
+/**
+ * Private service for asset-related network requests
+ * Not exposed globally - used internally by ComfyApi
+ */
+function createAssetService() {
+  /**
+   * Handles API response with consistent error handling and Zod validation
+   */
+  async function handleAssetRequest(
+    url: string,
+    context: string
+  ): Promise<AssetResponse> {
+    const res = await api.fetchApi(url)
+    if (!res.ok) {
+      throw new Error(
+        `Unable to load ${context}: Server returned ${res.status}. Please try again.`
+      )
+    }
+    const data = await res.json()
+    return validateAssetResponse(data)
+  }
+  /**
+   * Gets a list of model folder keys from the asset API
+   *
+   * Logic:
+   * 1. Extract directory names directly from asset tags
+   * 2. Filter out blacklisted directories
+   * 3. Return alphabetically sorted directories with assets
+   *
+   * @returns The list of model folder keys
+   */
+  async function getAssetModelFolders(): Promise<ModelFolder[]> {
+    const data = await handleAssetRequest(
+      `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG}`,
+      'model folders'
+    )
+
+    // Blacklist directories we don't want to show
+    const blacklistedDirectories = ['configs']
+
+    // Extract directory names from assets that actually exist, exclude missing assets
+    const discoveredFolders = new Set<string>(
+      data?.assets
+        ?.filter((asset) => !asset.tags.includes(MISSING_TAG))
+        ?.flatMap((asset) => asset.tags)
+        ?.filter(
+          (tag) => tag !== MODELS_TAG && !blacklistedDirectories.includes(tag)
+        ) ?? []
+    )
+
+    // Return only discovered folders in alphabetical order
+    const sortedFolders = Array.from(discoveredFolders).toSorted()
+    return sortedFolders.map((name) => ({ name, folders: [] }))
+  }
+
+  /**
+   * Gets a list of models in the specified folder from the asset API
+   * @param folder The folder to list models from, such as 'checkpoints'
+   * @returns The list of model filenames within the specified folder
+   */
+  async function getAssetModels(folder: string): Promise<ModelFile[]> {
+    const data = await handleAssetRequest(
+      `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG},${folder}`,
+      `models for ${folder}`
+    )
+
+    return (
+      data?.assets
+        ?.filter(
+          (asset) =>
+            !asset.tags.includes(MISSING_TAG) && asset.tags.includes(folder)
+        )
+        ?.map((asset) => ({
+          name: asset.name,
+          pathIndex: 0
+        })) ?? []
+    )
+  }
+
+  /**
+   * Checks if a widget input should use the asset browser based on both input name and node comfyClass
+   *
+   * @param inputName - The input name (e.g., 'ckpt_name', 'lora_name')
+   * @param nodeType - The ComfyUI node comfyClass (e.g., 'CheckpointLoaderSimple', 'LoraLoader')
+   * @returns true if this input should use asset browser
+   */
+  function isAssetBrowserEligible(
+    inputName: string,
+    nodeType: string
+  ): boolean {
+    return (
+      // Must be an approved input name
+      WHITELISTED_INPUTS.has(inputName) &&
+      // Must be a registered node type
+      useModelToNodeStore().getRegisteredNodeTypes().has(nodeType)
+    )
+  }
+
+  return {
+    getAssetModelFolders,
+    getAssetModels,
+    isAssetBrowserEligible
+  }
+}
+
+export const assetService = createAssetService()
diff --git a/src/services/comfyManagerService.ts b/src/services/comfyManagerService.ts
index 6bc09b4ae..615ddda86 100644
--- a/src/services/comfyManagerService.ts
+++ b/src/services/comfyManagerService.ts
@@ -2,6 +2,7 @@ import axios, { AxiosError, AxiosResponse } from 'axios'
 import { v4 as uuidv4 } from 'uuid'
 import { ref } from 'vue'
 
+import { useManagerState } from '@/composables/useManagerState'
 import { api } from '@/scripts/api'
 import { components } from '@/types/generatedManagerTypes'
 import { isAbortError } from '@/utils/typeGuardUtil'
@@ -44,11 +45,18 @@ const managerApiClient = axios.create({
 /**
  * Service for interacting with the ComfyUI Manager API
  * Provides methods for managing packs, ComfyUI-Manager queue operations, and system functions
+ * Note: This service should only be used when Manager state is NEW_UI
  */
 export const useComfyManagerService = () => {
   const isLoading = ref(false)
   const error = ref<string | null>(null)
 
+  // Check if manager service should be available
+  const isManagerServiceAvailable = () => {
+    const managerState = useManagerState()
+    return managerState.isNewManagerUI.value
+  }
+
   const handleRequestError = (
     err: unknown,
     context: string,
@@ -87,6 +95,12 @@ export const useComfyManagerService = () => {
   ): Promise<T | null> => {
     const { errorContext, routeSpecificErrors, isQueueOperation } = options
 
+    // Block service calls if not in NEW_UI state
+    if (!isManagerServiceAvailable()) {
+      error.value = 'Manager service is not available in current mode'
+      return null
+    }
+
     isLoading.value = true
     error.value = null
 
@@ -151,6 +165,10 @@ export const useComfyManagerService = () => {
   ) => {
     const errorContext = 'Fetching bulk import failure information'
 
+    if (!params.cnr_ids?.length && !params.urls?.length) {
+      return {}
+    }
+
     return executeRequest<components['schemas']['ImportFailInfoBulkResponse']>(
       () =>
         managerApiClient.post(ManagerRoute.IMPORT_FAIL_INFO_BULK, params, {
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 98293bc89..f5e720ce3 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -35,6 +35,7 @@ import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 export type ConfirmationDialogType =
   | 'default'
   | 'overwrite'
+  | 'overwriteBlueprint'
   | 'delete'
   | 'dirtyClose'
   | 'reinstall'
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index a6b72298c..89e33965d 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -41,6 +41,7 @@ import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
@@ -483,7 +484,18 @@ export const useLitegraphService = () => {
         ) ?? {}
 
         if (widget) {
-          widget.label = st(nameKey, widget.label ?? inputName)
+          // Check if this is an Asset Browser button widget
+          const isAssetBrowserButton =
+            widget.type === 'button' && widget.value === 'Select model'
+
+          if (isAssetBrowserButton) {
+            // Preserve Asset Browser button label (don't translate)
+            widget.label = String(widget.value)
+          } else {
+            // Apply normal translation for other widgets
+            widget.label = st(nameKey, widget.label ?? inputName)
+          }
+
           widget.options ??= {}
           Object.assign(widget.options, {
             advanced: inputSpec.advanced,
@@ -949,6 +961,25 @@ export const useLitegraphService = () => {
   ): LGraphNode {
     options.pos ??= getCanvasCenter()
 
+    if (nodeDef.name.startsWith(useSubgraphStore().typePrefix)) {
+      const canvas = canvasStore.getCanvas()
+      const bp = useSubgraphStore().getBlueprint(nodeDef.name)
+      const items: object = {
+        nodes: bp.nodes,
+        subgraphs: bp.definitions?.subgraphs
+      }
+      const results = canvas._deserializeItems(items, {
+        position: options.pos
+      })
+      if (!results) throw new Error('Failed to add subgraph blueprint')
+      const node = results.nodes.values().next().value
+      if (!node)
+        throw new Error(
+          'Subgraph blueprint was added, but failed to resolve a subgraph Node'
+        )
+      return node
+    }
+
     const node = LiteGraph.createNode(
       nodeDef.name,
       nodeDef.display_name,
diff --git a/src/services/mediaCacheService.ts b/src/services/mediaCacheService.ts
index 412f0a226..65f87a43c 100644
--- a/src/services/mediaCacheService.ts
+++ b/src/services/mediaCacheService.ts
@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 
-export interface CachedMedia {
+interface CachedMedia {
   src: string
   blob?: Blob
   objectUrl?: string
@@ -9,7 +9,7 @@ export interface CachedMedia {
   lastAccessed: number
 }
 
-export interface MediaCacheOptions {
+interface MediaCacheOptions {
   maxSize?: number
   maxAge?: number // in milliseconds
   preloadDistance?: number // pixels from viewport
@@ -194,7 +194,7 @@ class MediaCacheService {
 }
 
 // Global instance
-export let mediaCacheInstance: MediaCacheService | null = null
+let mediaCacheInstance: MediaCacheService | null = null
 
 export function useMediaCache(options?: MediaCacheOptions) {
   if (!mediaCacheInstance) {
diff --git a/src/services/nodeHelpService.ts b/src/services/nodeHelpService.ts
index 8d26f9457..53a0e81ab 100644
--- a/src/services/nodeHelpService.ts
+++ b/src/services/nodeHelpService.ts
@@ -3,7 +3,7 @@ import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
 import { extractCustomNodeName } from '@/utils/nodeHelpUtil'
 
-export class NodeHelpService {
+class NodeHelpService {
   async fetchNodeHelp(node: ComfyNodeDefImpl, locale: string): Promise<string> {
     const nodeSource = getNodeSource(node.python_module)
 
diff --git a/src/services/nodeOrganizationService.ts b/src/services/nodeOrganizationService.ts
index fb2e4dff4..e96c61e5f 100644
--- a/src/services/nodeOrganizationService.ts
+++ b/src/services/nodeOrganizationService.ts
@@ -13,7 +13,7 @@ const DEFAULT_ICON = 'pi pi-sort'
 export const DEFAULT_GROUPING_ID = 'category' as const
 export const DEFAULT_SORTING_ID = 'original' as const
 
-export class NodeOrganizationService {
+class NodeOrganizationService {
   private readonly groupingStrategies: NodeGroupingStrategy[] = [
     {
       id: 'category',
diff --git a/src/services/nodeSearchService.ts b/src/services/nodeSearchService.ts
index aa242666b..39bb23e57 100644
--- a/src/services/nodeSearchService.ts
+++ b/src/services/nodeSearchService.ts
@@ -34,7 +34,7 @@ export class NodeSearchService {
       name: 'Input Type',
       invokeSequence: 'i',
       getItemOptions: (node) =>
-        Object.values(node.inputs).map((input) => input.type),
+        Object.values(node.inputs ?? []).map((input) => input.type),
       fuseOptions
     })
 
diff --git a/src/services/releaseService.ts b/src/services/releaseService.ts
index 2f2871bd1..7c55ae8f0 100644
--- a/src/services/releaseService.ts
+++ b/src/services/releaseService.ts
@@ -14,11 +14,10 @@ const releaseApiClient = axios.create({
 
 // Use generated types from OpenAPI spec
 export type ReleaseNote = components['schemas']['ReleaseNote']
-export type GetReleasesParams =
-  operations['getReleaseNotes']['parameters']['query']
+type GetReleasesParams = operations['getReleaseNotes']['parameters']['query']
 
 // Use generated error response type
-export type ErrorResponse = components['schemas']['ErrorResponse']
+type ErrorResponse = components['schemas']['ErrorResponse']
 
 // Release service for fetching release notes
 export const useReleaseService = () => {
diff --git a/src/services/workflowService.ts b/src/services/workflowService.ts
index e8ae09a30..db76ad139 100644
--- a/src/services/workflowService.ts
+++ b/src/services/workflowService.ts
@@ -82,15 +82,10 @@ export const useWorkflowService = () => {
    * @param workflow The workflow to save
    */
   const saveWorkflowAs = async (workflow: ComfyWorkflow) => {
-    const newFilename = await dialogService.prompt({
-      title: t('workflowService.saveWorkflow'),
-      message: t('workflowService.enterFilename') + ':',
-      defaultValue: workflow.filename
-    })
+    const newFilename = await workflow.promptSave()
     if (!newFilename) return
 
     const newPath = workflow.directory + '/' + appendJsonExt(newFilename)
-    const newKey = newPath.substring(ComfyWorkflow.basePath.length)
     const existingWorkflow = workflowStore.getWorkflowByPath(newPath)
 
     if (existingWorkflow && !existingWorkflow.isTemporary) {
@@ -122,7 +117,7 @@ export const useWorkflowService = () => {
       ) as ComfyWorkflowJSON
       state.id = id
 
-      const tempWorkflow = workflowStore.createTemporary(newKey, state)
+      const tempWorkflow = workflowStore.saveAs(workflow, newPath)
       await openWorkflow(tempWorkflow)
       await workflowStore.saveWorkflow(tempWorkflow)
     }
diff --git a/src/stores/comfyManagerStore.ts b/src/stores/comfyManagerStore.ts
index a23f7bd81..9f2663a11 100644
--- a/src/stores/comfyManagerStore.ts
+++ b/src/stores/comfyManagerStore.ts
@@ -1,5 +1,4 @@
 import { useEventListener, whenever } from '@vueuse/core'
-import { mapKeys } from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
 import { ref, watch } from 'vue'
@@ -14,6 +13,7 @@ import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { TaskLog } from '@/types/comfyManagerTypes'
 import { components } from '@/types/generatedManagerTypes'
+import { normalizePackKeys } from '@/utils/packUtils'
 
 type InstallPackParams = components['schemas']['InstallPackParams']
 type InstalledPacksResponse = components['schemas']['InstalledPacksResponse']
@@ -185,12 +185,8 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
   const refreshInstalledList = async () => {
     const packs = await managerService.listInstalledPacks()
     if (packs) {
-      // The keys are 'cleaned' by stripping the version suffix.
-      // The pack object itself (the value) still contains the version info.
-      const packsWithCleanedKeys = mapKeys(packs, (_value, key) => {
-        return key.split('@')[0]
-      })
-      installedPacks.value = packsWithCleanedKeys
+      // Normalize pack keys to ensure consistent access
+      installedPacks.value = normalizePackKeys(packs)
     }
     isStale.value = false
   }
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 6bc5db077..44bb13d2d 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -31,7 +31,7 @@ import { createNodeLocatorId } from '@/types/nodeIdentification'
 import { useCanvasStore } from './graphStore'
 import { ComfyWorkflow, useWorkflowStore } from './workflowStore'
 
-export interface QueuedPrompt {
+interface QueuedPrompt {
   /**
    * The nodes that are queued to be executed. The key is the node id and the
    * value is a boolean indicating if the node has been executed.
diff --git a/src/stores/extensionStore.ts b/src/stores/extensionStore.ts
index 2756b7593..3c1abde8e 100644
--- a/src/stores/extensionStore.ts
+++ b/src/stores/extensionStore.ts
@@ -6,9 +6,9 @@ import type { ComfyExtension } from '@/types/comfy'
 /**
  * These extensions are always active, even if they are disabled in the setting.
  */
-export const ALWAYS_ENABLED_EXTENSIONS: readonly string[] = []
+const ALWAYS_ENABLED_EXTENSIONS: readonly string[] = []
 
-export const ALWAYS_DISABLED_EXTENSIONS: readonly string[] = [
+const ALWAYS_DISABLED_EXTENSIONS: readonly string[] = [
   // pysssss.Locking is replaced by pin/unpin in ComfyUI core.
   // https://github.com/Comfy-Org/litegraph.js/pull/117
   'pysssss.Locking',
diff --git a/src/stores/firebaseAuthStore.ts b/src/stores/firebaseAuthStore.ts
index 161ec9d56..8f2af6439 100644
--- a/src/stores/firebaseAuthStore.ts
+++ b/src/stores/firebaseAuthStore.ts
@@ -41,7 +41,7 @@ type AccessBillingPortalResponse =
 type AccessBillingPortalReqBody =
   operations['AccessBillingPortal']['requestBody']
 
-export class FirebaseAuthStoreError extends Error {
+class FirebaseAuthStoreError extends Error {
   constructor(message: string) {
     super(message)
     this.name = 'FirebaseAuthStoreError'
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index 345432a97..6fc8f3076 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -1,6 +1,10 @@
 import { defineStore } from 'pinia'
 
-import { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphNode,
+  Subgraph,
+  SubgraphNode
+} from '@/lib/litegraph/src/litegraph'
 import {
   ExecutedWsMessage,
   ResultItem,
@@ -136,17 +140,22 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   ) {
     if (!filenames || !node) return
 
+    const locatorId =
+      node.graph instanceof Subgraph
+        ? nodeIdToNodeLocatorId(node.id, node.graph ?? undefined)
+        : `${node.id}`
+    if (!locatorId) return
     if (typeof filenames === 'string') {
-      setNodeOutputsByNodeId(
-        node.id,
+      setOutputsByLocatorId(
+        locatorId,
         createOutputs([filenames], folder, isAnimated)
       )
     } else if (!Array.isArray(filenames)) {
-      setNodeOutputsByNodeId(node.id, filenames)
+      setOutputsByLocatorId(locatorId, filenames)
     } else {
       const resultItems = createOutputs(filenames, folder, isAnimated)
       if (!resultItems?.images?.length) return
-      setNodeOutputsByNodeId(node.id, resultItems)
+      setOutputsByLocatorId(locatorId, resultItems)
     }
   }
 
@@ -170,26 +179,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     setOutputsByLocatorId(nodeLocatorId, outputs, options)
   }
 
-  /**
-   * Set node outputs by node ID.
-   * Uses the current graph context to create the appropriate NodeLocatorId.
-   *
-   * @param nodeId - The node ID
-   * @param outputs - The outputs to store
-   * @param options - Options for setting outputs
-   * @param options.merge - If true, merge with existing outputs (arrays are concatenated)
-   */
-  function setNodeOutputsByNodeId(
-    nodeId: string | number,
-    outputs: ExecutedWsMessage['output'] | ResultItem,
-    options: SetOutputOptions = {}
-  ) {
-    const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
-    if (!nodeLocatorId) return
-
-    setOutputsByLocatorId(nodeLocatorId, outputs, options)
-  }
-
   /**
    * Set node preview images by execution ID (hierarchical ID from backend).
    * Converts the execution ID to a NodeLocatorId before storing.
@@ -288,7 +277,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     getNodePreviews,
     setNodeOutputs,
     setNodeOutputsByExecutionId,
-    setNodeOutputsByNodeId,
     setNodePreviewsByExecutionId,
     setNodePreviewsByNodeId,
     revokePreviewsByExecutionId,
diff --git a/src/stores/managerStateStore.ts b/src/stores/managerStateStore.ts
deleted file mode 100644
index 2dece29a7..000000000
--- a/src/stores/managerStateStore.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, readonly } from 'vue'
-
-import { api } from '@/scripts/api'
-import { useExtensionStore } from '@/stores/extensionStore'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-
-export enum ManagerUIState {
-  DISABLED = 'disabled',
-  LEGACY_UI = 'legacy',
-  NEW_UI = 'new'
-}
-
-export const useManagerStateStore = defineStore('managerState', () => {
-  const systemStatsStore = useSystemStatsStore()
-  const extensionStore = useExtensionStore()
-
-  // Reactive computed manager state that updates when dependencies change
-  const managerUIState = computed(() => {
-    const systemStats = systemStatsStore.systemStats
-    const clientSupportsV4 =
-      api.getClientFeatureFlags().supports_manager_v4_ui ?? false
-    const hasLegacyManager = extensionStore.extensions.some(
-      (ext) => ext.name === 'Comfy.CustomNodesManager'
-    )
-
-    const serverSupportsV4 = api.getServerFeature(
-      'extension.manager.supports_v4'
-    )
-
-    console.log('[Manager State Debug]', {
-      systemStats: systemStats?.system?.argv,
-      clientSupportsV4,
-      serverSupportsV4,
-      hasLegacyManager,
-      extensions: extensionStore.extensions.map((e) => e.name)
-    })
-
-    // Check command line args first
-    if (systemStats?.system?.argv?.includes('--disable-manager')) {
-      return ManagerUIState.DISABLED // comfyui_manager package not installed
-    }
-
-    if (systemStats?.system?.argv?.includes('--enable-manager-legacy-ui')) {
-      return ManagerUIState.LEGACY_UI // forced legacy
-    }
-
-    // Both client and server support v4 = NEW_UI
-    if (clientSupportsV4 && serverSupportsV4 === true) {
-      return ManagerUIState.NEW_UI
-    }
-
-    // Server supports v4 but client doesn't = LEGACY_UI
-    if (serverSupportsV4 === true) {
-      return ManagerUIState.LEGACY_UI
-    }
-
-    // No server v4 support but legacy manager extension exists = LEGACY_UI
-    if (hasLegacyManager) {
-      return ManagerUIState.LEGACY_UI
-    }
-
-    // If server feature flags haven't loaded yet, return DISABLED for now
-    // This will update reactively once feature flags load
-    if (serverSupportsV4 === undefined) {
-      return ManagerUIState.DISABLED
-    }
-
-    // No manager at all = DISABLED
-    return ManagerUIState.DISABLED
-  })
-
-  return {
-    managerUIState: readonly(managerUIState)
-  }
-})
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index dc03c6145..34856c155 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -1,7 +1,10 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
+import type { ModelFile } from '@/schemas/assetSchema'
 import { api } from '@/scripts/api'
+import { assetService } from '@/services/assetService'
+import { useSettingStore } from '@/stores/settingStore'
 
 /** (Internal helper) finds a value in a metadata object from any of a list of keys. */
 function _findInMetadata(metadata: any, ...keys: string[]): string | null {
@@ -153,7 +156,10 @@ export class ModelFolder {
   models: Record<string, ComfyModelDef> = {}
   state: ResourceState = ResourceState.Uninitialized
 
-  constructor(public directory: string) {}
+  constructor(
+    public directory: string,
+    private getModelsFunc: (folder: string) => Promise<ModelFile[]>
+  ) {}
 
   get key(): string {
     return this.directory + '/'
@@ -167,7 +173,7 @@ export class ModelFolder {
       return this
     }
     this.state = ResourceState.Loading
-    const models = await api.getModels(this.directory)
+    const models = await this.getModelsFunc(this.directory)
     for (const model of models) {
       this.models[`${model.pathIndex}/${model.name}`] = new ComfyModelDef(
         model.name,
@@ -182,6 +188,7 @@ export class ModelFolder {
 
 /** Model store handler, wraps individual per-folder model stores */
 export const useModelStore = defineStore('models', () => {
+  const settingStore = useSettingStore()
   const modelFolderNames = ref<string[]>([])
   const modelFolderByName = ref<Record<string, ModelFolder>>({})
   const modelFolders = computed<ModelFolder[]>(() =>
@@ -197,11 +204,22 @@ export const useModelStore = defineStore('models', () => {
    * Loads the model folders from the server
    */
   async function loadModelFolders() {
-    const resData = await api.getModelFolders()
+    const useAssetAPI: boolean = settingStore.get('Comfy.Assets.UseAssetAPI')
+
+    const resData = useAssetAPI
+      ? await assetService.getAssetModelFolders()
+      : await api.getModelFolders()
     modelFolderNames.value = resData.map((folder) => folder.name)
     modelFolderByName.value = {}
     for (const folderName of modelFolderNames.value) {
-      modelFolderByName.value[folderName] = new ModelFolder(folderName)
+      const getModelsFunc = useAssetAPI
+        ? (folder: string) => assetService.getAssetModels(folder)
+        : (folder: string) => api.getModels(folder)
+
+      modelFolderByName.value[folderName] = new ModelFolder(
+        folderName,
+        getModelsFunc
+      )
     }
   }
 
diff --git a/src/stores/modelToNodeStore.ts b/src/stores/modelToNodeStore.ts
index 7be3a5ca3..fc78dc1e5 100644
--- a/src/stores/modelToNodeStore.ts
+++ b/src/stores/modelToNodeStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 
@@ -22,6 +22,22 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
   const modelToNodeMap = ref<Record<string, ModelNodeProvider[]>>({})
   const nodeDefStore = useNodeDefStore()
   const haveDefaultsLoaded = ref(false)
+
+  /** Internal computed for reactive caching of registered node types */
+  const registeredNodeTypes = computed(() => {
+    return new Set(
+      Object.values(modelToNodeMap.value)
+        .flat()
+        .map((provider) => provider.nodeDef.name)
+    )
+  })
+
+  /** Get set of all registered node types for efficient lookup */
+  function getRegisteredNodeTypes(): Set<string> {
+    registerDefaults()
+    return registeredNodeTypes.value
+  }
+
   /**
    * Get the node provider for the given model type name.
    * @param modelType The name of the model type to get the node provider for.
@@ -91,6 +107,7 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
 
   return {
     modelToNodeMap,
+    getRegisteredNodeTypes,
     getNodeProvider,
     getAllNodeProviders,
     registerNodeProvider,
diff --git a/src/stores/nodeBookmarkStore.ts b/src/stores/nodeBookmarkStore.ts
index 8720e6f7d..e3eb22d86 100644
--- a/src/stores/nodeBookmarkStore.ts
+++ b/src/stores/nodeBookmarkStore.ts
@@ -10,7 +10,7 @@ import { ComfyNodeDefImpl, createDummyFolderNodeDef } from './nodeDefStore'
 import { buildNodeDefTree } from './nodeDefStore'
 import { useSettingStore } from './settingStore'
 
-export const BOOKMARK_SETTING_ID = 'Comfy.NodeLibrary.Bookmarks.V2'
+const BOOKMARK_SETTING_ID = 'Comfy.NodeLibrary.Bookmarks.V2'
 
 export const useNodeBookmarkStore = defineStore('nodeBookmark', () => {
   const settingStore = useSettingStore()
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index 7e0dcf8ba..f13d921e2 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -16,6 +16,7 @@ import type {
   ComfyOutputTypesSpec as ComfyOutputSpecV1
 } from '@/schemas/nodeDefSchema'
 import { NodeSearchService } from '@/services/nodeSearchService'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import {
   type NodeSource,
   NodeSourceType,
@@ -223,7 +224,7 @@ export const SYSTEM_NODE_DEFS: Record<string, ComfyNodeDefV1> = {
   }
 }
 
-export interface BuildNodeDefTreeOptions {
+interface BuildNodeDefTreeOptions {
   /**
    * Custom function to extract the tree path from a node definition.
    * If not provided, uses the default path based on nodeDef.nodePath.
@@ -291,8 +292,14 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
   const showDeprecated = ref(false)
   const showExperimental = ref(false)
   const nodeDefFilters = ref<NodeDefFilter[]>([])
+  const subgraphStore = useSubgraphStore()
 
-  const nodeDefs = computed(() => Object.values(nodeDefsByName.value))
+  const nodeDefs = computed(() => {
+    return [
+      ...Object.values(nodeDefsByName.value),
+      ...subgraphStore.subgraphBlueprints
+    ]
+  })
   const nodeDataTypes = computed(() => {
     const types = new Set<string>()
     for (const nodeDef of nodeDefs.value) {
@@ -383,7 +390,7 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
     })
 
     // Subgraph nodes filter
-    // @todo Remove this filter when subgraph v2 is released
+    // Filter out litegraph typed subgraphs, saved blueprints are added in separately
     registerNodeDefFilter({
       id: 'core.subgraph',
       name: 'Hide Subgraph Nodes',
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 83133aa5e..4369f2782 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -18,7 +18,7 @@ import { useExtensionService } from '@/services/extensionService'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
 // Task type used in the API.
-export type APITaskType = 'queue' | 'history'
+type APITaskType = 'queue' | 'history'
 
 export enum TaskItemDisplayStatus {
   Running = 'Running',
diff --git a/src/stores/releaseStore.ts b/src/stores/releaseStore.ts
index 37faee5a2..a4f87281e 100644
--- a/src/stores/releaseStore.ts
+++ b/src/stores/releaseStore.ts
@@ -1,3 +1,4 @@
+import { until } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
@@ -240,7 +241,7 @@ export const useReleaseStore = defineStore('release', () => {
     try {
       // Ensure system stats are loaded
       if (!systemStatsStore.systemStats) {
-        await systemStatsStore.fetchSystemStats()
+        await until(systemStatsStore.isInitialized)
       }
 
       const fetchedReleases = await releaseService.getReleases({
diff --git a/src/stores/serverConfigStore.ts b/src/stores/serverConfigStore.ts
index afb822cf7..3781d0ab5 100644
--- a/src/stores/serverConfigStore.ts
+++ b/src/stores/serverConfigStore.ts
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 
 import { ServerConfig, ServerConfigValue } from '@/constants/serverConfig'
 
-export type ServerConfigWithValue<T> = ServerConfig<T> & {
+type ServerConfigWithValue<T> = ServerConfig<T> & {
   /**
    * Current value.
    */
diff --git a/src/stores/subgraphStore.ts b/src/stores/subgraphStore.ts
new file mode 100644
index 000000000..d9679c9cb
--- /dev/null
+++ b/src/stores/subgraphStore.ts
@@ -0,0 +1,321 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import { t } from '@/i18n'
+import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import type { NodeError } from '@/schemas/apiSchema'
+import type {
+  ComfyNode,
+  ComfyWorkflowJSON,
+  NodeId
+} from '@/schemas/comfyWorkflowSchema'
+import type {
+  ComfyNodeDef as ComfyNodeDefV1,
+  InputSpec
+} from '@/schemas/nodeDefSchema'
+import { api } from '@/scripts/api'
+import { useDialogService } from '@/services/dialogService'
+import { useWorkflowService } from '@/services/workflowService'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useToastStore } from '@/stores/toastStore'
+import { UserFile } from '@/stores/userFileStore'
+import {
+  ComfyWorkflow,
+  LoadedComfyWorkflow,
+  useWorkflowStore
+} from '@/stores/workflowStore'
+
+async function confirmOverwrite(name: string): Promise<boolean | null> {
+  return await useDialogService().confirm({
+    title: t('subgraphStore.overwriteBlueprintTitle'),
+    type: 'overwriteBlueprint',
+    message: t('subgraphStore.overwriteBlueprint'),
+    itemList: [name]
+  })
+}
+
+export const useSubgraphStore = defineStore('subgraph', () => {
+  class SubgraphBlueprint extends ComfyWorkflow {
+    static override readonly basePath = 'subgraphs/'
+    override readonly tintCanvasBg = '#22227740'
+
+    hasPromptedSave: boolean = false
+
+    constructor(
+      options: { path: string; modified: number; size: number },
+      confirmFirstSave: boolean = false
+    ) {
+      super(options)
+      this.hasPromptedSave = !confirmFirstSave
+    }
+
+    validateSubgraph() {
+      if (!this.activeState?.definitions)
+        throw new Error(
+          'The root graph of a subgraph blueprint must consist of only a single subgraph node'
+        )
+      const { subgraphs } = this.activeState.definitions
+      const { nodes } = this.activeState
+      //Instanceof doesn't function as nodes are serialized
+      function isSubgraphNode(node: ComfyNode) {
+        return node && subgraphs.some((s) => s.id === node.type)
+      }
+      if (nodes.length == 1 && isSubgraphNode(nodes[0])) return
+      const errors: Record<NodeId, NodeError> = {}
+      //mark errors for all but first subgraph node
+      let firstSubgraphFound = false
+      for (let i = 0; i < nodes.length; i++) {
+        if (!firstSubgraphFound && isSubgraphNode(nodes[i])) {
+          firstSubgraphFound = true
+          continue
+        }
+        errors[nodes[i].id] = {
+          errors: [],
+          class_type: nodes[i].type,
+          dependent_outputs: []
+        }
+      }
+      useExecutionStore().lastNodeErrors = errors
+      useCanvasStore().getCanvas().draw(true, true)
+      throw new Error(
+        'The root graph of a subgraph blueprint must consist of only a single subgraph node'
+      )
+    }
+
+    override async save(): Promise<UserFile> {
+      this.validateSubgraph()
+      if (
+        !this.hasPromptedSave &&
+        useSettingStore().get('Comfy.Workflow.WarnBlueprintOverwrite')
+      ) {
+        if (!(await confirmOverwrite(this.filename))) return this
+        this.hasPromptedSave = true
+      }
+      const ret = await super.save()
+      useSubgraphStore().updateDef(await this.load())
+      return ret
+    }
+
+    override async saveAs(path: string) {
+      this.validateSubgraph()
+      this.hasPromptedSave = true
+      const ret = await super.saveAs(path)
+      useSubgraphStore().updateDef(await this.load())
+      return ret
+    }
+    override async load({
+      force = false
+    }: { force?: boolean } = {}): Promise<LoadedComfyWorkflow> {
+      if (!force && this.isLoaded) return await super.load({ force })
+      const loaded = await super.load({ force })
+      const st = loaded.activeState
+      const sg = (st.definitions?.subgraphs ?? []).find(
+        (sg) => sg.id == st.nodes[0].type
+      )
+      if (!sg)
+        throw new Error(
+          'Loaded subgraph blueprint does not contain valid subgraph'
+        )
+      sg.name = st.nodes[0].title = this.filename
+      return loaded
+    }
+    override async promptSave(): Promise<string | null> {
+      return await useDialogService().prompt({
+        title: t('subgraphStore.saveBlueprint'),
+        message: t('subgraphStore.blueprintName') + ':',
+        defaultValue: this.filename
+      })
+    }
+    override unload(): void {
+      //Skip unloading. Even if a workflow is closed after editing,
+      //it must remain loaded in order to be added to the graph
+    }
+  }
+  const subgraphCache: Record<string, LoadedComfyWorkflow> = {}
+  const typePrefix = 'SubgraphBlueprint.'
+  const subgraphDefCache = ref<Map<string, ComfyNodeDefImpl>>(new Map())
+  const canvasStore = useCanvasStore()
+  const subgraphBlueprints = computed(() => [
+    ...subgraphDefCache.value.values()
+  ])
+  async function fetchSubgraphs() {
+    async function loadBlueprint(options: {
+      path: string
+      modified: number
+      size: number
+    }): Promise<void> {
+      const name = options.path.slice(0, -'.json'.length)
+      options.path = SubgraphBlueprint.basePath + options.path
+      const bp = await new SubgraphBlueprint(options, true).load()
+      useWorkflowStore().attachWorkflow(bp)
+      const nodeDef = convertToNodeDef(bp)
+
+      subgraphDefCache.value.set(name, nodeDef)
+      subgraphCache[name] = bp
+    }
+
+    const res = (
+      await api.listUserDataFullInfo(SubgraphBlueprint.basePath)
+    ).filter((f) => f.path.endsWith('.json'))
+    const settled = await Promise.allSettled(res.map(loadBlueprint))
+    const errors = settled.filter((i) => 'reason' in i).map((i) => i.reason)
+    errors.forEach((e) => console.error('Failed to load subgraph blueprint', e))
+    if (errors.length > 0) {
+      useToastStore().add({
+        severity: 'error',
+        summary: t('subgraphStore.loadFailure'),
+        detail: errors.length > 3 ? `x${errors.length}` : `${errors}`,
+        life: 6000
+      })
+    }
+  }
+  function convertToNodeDef(workflow: LoadedComfyWorkflow): ComfyNodeDefImpl {
+    const name = workflow.filename
+    const subgraphNode = workflow.changeTracker.initialState.nodes[0]
+    if (!subgraphNode) throw new Error('Invalid Subgraph Blueprint')
+    subgraphNode.inputs ??= []
+    subgraphNode.outputs ??= []
+    //NOTE: Types are cast to string. This is only used for input coloring on previews
+    const inputs = Object.fromEntries(
+      subgraphNode.inputs.map((i) => [
+        i.name,
+        [`${i.type}`, undefined] satisfies InputSpec
+      ])
+    )
+    let description = 'User generated subgraph blueprint'
+    if (workflow.initialState.extra?.BlueprintDescription)
+      description = `${workflow.initialState.extra.BlueprintDescription}`
+    const nodedefv1: ComfyNodeDefV1 = {
+      input: { required: inputs },
+      output: subgraphNode.outputs.map((o) => `${o.type}`),
+      output_name: subgraphNode.outputs.map((o) => o.name),
+      name: typePrefix + name,
+      display_name: name,
+      description,
+      category: 'Subgraph Blueprints',
+      output_node: false,
+      python_module: 'blueprint'
+    }
+    const nodeDefImpl = new ComfyNodeDefImpl(nodedefv1)
+    return nodeDefImpl
+  }
+  async function publishSubgraph() {
+    const canvas = canvasStore.getCanvas()
+    const subgraphNode = [...canvas.selectedItems][0]
+    if (
+      canvas.selectedItems.size !== 1 ||
+      !(subgraphNode instanceof SubgraphNode)
+    )
+      throw new TypeError('Must have single SubgraphNode selected to publish')
+
+    const { nodes = [], subgraphs = [] } = canvas._serializeItems([
+      subgraphNode
+    ])
+    if (nodes.length != 1) {
+      throw new TypeError('Must have single SubgraphNode selected to publish')
+    }
+    //create minimal workflow
+    const workflowData = {
+      revision: 0,
+      last_node_id: subgraphNode.id,
+      last_link_id: 0,
+      nodes,
+      links: [],
+      version: 0.4,
+      definitions: { subgraphs }
+    }
+    //prompt name
+    const name = await useDialogService().prompt({
+      title: t('subgraphStore.saveBlueprint'),
+      message: t('subgraphStore.blueprintName') + ':',
+      defaultValue: subgraphNode.title
+    })
+    if (!name) return
+    if (subgraphDefCache.value.has(name) && !(await confirmOverwrite(name)))
+      //User has chosen not to overwrite.
+      return
+
+    //upload file
+    const path = SubgraphBlueprint.basePath + name + '.json'
+    const workflow = new SubgraphBlueprint({
+      path,
+      size: -1,
+      modified: Date.now()
+    })
+    workflow.originalContent = JSON.stringify(workflowData)
+    const loadedWorkflow = await workflow.load()
+    //Mark non-temporary
+    workflow.size = 1
+    await workflow.save()
+    //add to files list?
+    useWorkflowStore().attachWorkflow(loadedWorkflow)
+    subgraphDefCache.value.set(name, convertToNodeDef(loadedWorkflow))
+    subgraphCache[name] = loadedWorkflow
+    useToastStore().add({
+      severity: 'success',
+      summary: t('subgraphStore.publishSuccess'),
+      detail: t('subgraphStore.publishSuccessMessage'),
+      life: 4000
+    })
+  }
+  function updateDef(blueprint: LoadedComfyWorkflow) {
+    subgraphDefCache.value.set(blueprint.filename, convertToNodeDef(blueprint))
+  }
+  async function editBlueprint(nodeType: string) {
+    const name = nodeType.slice(typePrefix.length)
+    if (!(name in subgraphCache))
+      //As loading is blocked on in startup, this can likely be changed to invalid type
+      throw new Error('not yet loaded')
+    useWorkflowStore().attachWorkflow(subgraphCache[name])
+    await useWorkflowService().openWorkflow(subgraphCache[name])
+    const canvas = useCanvasStore().getCanvas()
+    if (canvas.graph && 'subgraph' in canvas.graph.nodes[0])
+      canvas.setGraph(canvas.graph.nodes[0].subgraph)
+  }
+  function getBlueprint(nodeType: string): ComfyWorkflowJSON {
+    const name = nodeType.slice(typePrefix.length)
+    if (!(name in subgraphCache))
+      //As loading is blocked on in startup, this can likely be changed to invalid type
+      throw new Error('not yet loaded')
+    return subgraphCache[name].changeTracker.initialState
+  }
+  async function deleteBlueprint(nodeType: string) {
+    const name = nodeType.slice(typePrefix.length)
+    if (!(name in subgraphCache))
+      //As loading is blocked on in startup, this can likely be changed to invalid type
+      throw new Error('not yet loaded')
+    if (
+      !(await useDialogService().confirm({
+        title: t('subgraphStore.confirmDeleteTitle'),
+        type: 'delete',
+        message: t('subgraphStore.confirmDelete'),
+        itemList: [name]
+      }))
+    )
+      return
+
+    await subgraphCache[name].delete()
+    delete subgraphCache[name]
+    subgraphDefCache.value.delete(name)
+  }
+  function isSubgraphBlueprint(
+    workflow: unknown
+  ): workflow is SubgraphBlueprint {
+    return workflow instanceof SubgraphBlueprint
+  }
+
+  return {
+    deleteBlueprint,
+    editBlueprint,
+    fetchSubgraphs,
+    getBlueprint,
+    isSubgraphBlueprint,
+    publishSubgraph,
+    subgraphBlueprints,
+    typePrefix,
+    updateDef
+  }
+})
diff --git a/src/stores/systemStatsStore.ts b/src/stores/systemStatsStore.ts
index 07f28c229..06362930b 100644
--- a/src/stores/systemStatsStore.ts
+++ b/src/stores/systemStatsStore.ts
@@ -1,32 +1,34 @@
+import { useAsyncState } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
 
 import type { SystemStats } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { isElectron } from '@/utils/envUtil'
 
 export const useSystemStatsStore = defineStore('systemStats', () => {
-  const systemStats = ref<SystemStats | null>(null)
-  const isLoading = ref(false)
-  const error = ref<string | null>(null)
-
-  async function fetchSystemStats() {
-    isLoading.value = true
-    error.value = null
-
+  const fetchSystemStatsData = async () => {
     try {
-      systemStats.value = await api.getSystemStats()
+      return await api.getSystemStats()
     } catch (err) {
-      error.value =
-        err instanceof Error
-          ? err.message
-          : 'An error occurred while fetching system stats'
       console.error('Error fetching system stats:', err)
-    } finally {
-      isLoading.value = false
+      throw err
     }
   }
 
+  const {
+    state: systemStats,
+    isLoading,
+    error,
+    isReady: isInitialized,
+    execute: refetchSystemStats
+  } = useAsyncState<SystemStats | null>(
+    fetchSystemStatsData,
+    null, // initial value
+    {
+      immediate: true
+    }
+  )
+
   function getFormFactor(): string {
     if (!systemStats.value?.system?.os) {
       return 'other'
@@ -62,7 +64,8 @@ export const useSystemStatsStore = defineStore('systemStats', () => {
     systemStats,
     isLoading,
     error,
-    fetchSystemStats,
+    isInitialized,
+    refetchSystemStats,
     getFormFactor
   }
 })
diff --git a/src/stores/userFileStore.ts b/src/stores/userFileStore.ts
index e7c8728f0..383bab6b0 100644
--- a/src/stores/userFileStore.ts
+++ b/src/stores/userFileStore.ts
@@ -182,7 +182,7 @@ export class UserFile {
   }
 }
 
-export interface LoadedUserFile extends UserFile {
+interface LoadedUserFile extends UserFile {
   isLoaded: true
   originalContent: string
   content: string
diff --git a/src/stores/versionCompatibilityStore.ts b/src/stores/versionCompatibilityStore.ts
index da483846e..46b25cf33 100644
--- a/src/stores/versionCompatibilityStore.ts
+++ b/src/stores/versionCompatibilityStore.ts
@@ -1,4 +1,4 @@
-import { useStorage } from '@vueuse/core'
+import { until, useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import * as semver from 'semver'
 import { computed } from 'vue'
@@ -103,7 +103,7 @@ export const useVersionCompatibilityStore = defineStore(
 
     async function checkVersionCompatibility() {
       if (!systemStatsStore.systemStats) {
-        await systemStatsStore.fetchSystemStats()
+        await until(systemStatsStore.isInitialized)
       }
     }
 
diff --git a/src/stores/workflowStore.ts b/src/stores/workflowStore.ts
index 6219f7225..b0c8e8b37 100644
--- a/src/stores/workflowStore.ts
+++ b/src/stores/workflowStore.ts
@@ -2,6 +2,7 @@ import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import { type Raw, computed, markRaw, ref, shallowRef, watch } from 'vue'
 
+import { t } from '@/i18n'
 import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowThumbnail } from '@/renderer/thumbnail/composables/useWorkflowThumbnail'
 import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
@@ -10,6 +11,7 @@ import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { defaultGraphJSON } from '@/scripts/defaultGraph'
+import { useDialogService } from '@/services/dialogService'
 import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
 import {
   createNodeExecutionId,
@@ -24,7 +26,8 @@ import { isSubgraph } from '@/utils/typeGuardUtil'
 import { UserFile } from './userFileStore'
 
 export class ComfyWorkflow extends UserFile {
-  static readonly basePath = 'workflows/'
+  static readonly basePath: string = 'workflows/'
+  readonly tintCanvasBg?: string
 
   /**
    * The change tracker for the workflow. Non-reactive raw object.
@@ -120,6 +123,14 @@ export class ComfyWorkflow extends UserFile {
     this.content = JSON.stringify(this.activeState)
     return await super.saveAs(path)
   }
+
+  async promptSave(): Promise<string | null> {
+    return await useDialogService().prompt({
+      title: t('workflowService.saveWorkflow'),
+      message: t('workflowService.enterFilename') + ':',
+      defaultValue: this.filename
+    })
+  }
 }
 
 export interface LoadedComfyWorkflow extends ComfyWorkflow {
@@ -137,8 +148,9 @@ export interface LoadedComfyWorkflow extends ComfyWorkflow {
  * error TS7056: The inferred type of this node exceeds the maximum length the
  * compiler will serialize. An explicit type annotation is needed.
  */
-export interface WorkflowStore {
+interface WorkflowStore {
   activeWorkflow: LoadedComfyWorkflow | null
+  attachWorkflow: (workflow: ComfyWorkflow, openIndex?: number) => void
   isActive: (workflow: ComfyWorkflow) => boolean
   openWorkflows: ComfyWorkflow[]
   openedWorkflowIndexShift: (shift: number) => ComfyWorkflow | null
@@ -290,6 +302,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     }
     const loadedWorkflow = await workflow.load()
     activeWorkflow.value = loadedWorkflow
+    comfyApp.canvas.bg_tint = loadedWorkflow.tintCanvasBg
     console.debug('[workflowStore] open workflow', workflow.path)
     return loadedWorkflow
   }
@@ -304,11 +317,37 @@ export const useWorkflowStore = defineStore('workflow', () => {
     }
     return newPath
   }
+  const saveAs = (
+    existingWorkflow: ComfyWorkflow,
+    path: string
+  ): ComfyWorkflow => {
+    const workflow: ComfyWorkflow = new (existingWorkflow.constructor as any)({
+      path,
+      modified: Date.now(),
+      size: -1
+    })
+    workflow.originalContent = workflow.content = existingWorkflow.content
+    workflowLookup.value[workflow.path] = workflow
+    return workflow
+  }
 
   const createTemporary = (path?: string, workflowData?: ComfyWorkflowJSON) => {
     const fullPath = getUnconflictedPath(
       ComfyWorkflow.basePath + (path ?? 'Unsaved Workflow.json')
     )
+    const existingWorkflow = workflows.value.find((w) => w.fullFilename == path)
+    if (
+      path &&
+      workflowData &&
+      existingWorkflow?.changeTracker &&
+      !existingWorkflow.directory.startsWith(
+        ComfyWorkflow.basePath.slice(0, -1)
+      )
+    ) {
+      existingWorkflow.changeTracker.reset(workflowData)
+      return existingWorkflow
+    }
+
     const workflow = new ComfyWorkflow({
       path: fullPath,
       modified: Date.now(),
@@ -357,7 +396,10 @@ export const useWorkflowStore = defineStore('workflow', () => {
   }
 
   const persistedWorkflows = computed(() =>
-    Array.from(workflows.value).filter((workflow) => workflow.isPersisted)
+    Array.from(workflows.value).filter(
+      (workflow) =>
+        workflow.isPersisted && !workflow.path.startsWith('subgraphs/')
+    )
   )
   const syncWorkflows = async (dir: string = '') => {
     await syncEntities(
@@ -647,6 +689,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
 
   return {
     activeWorkflow,
+    attachWorkflow,
     isActive,
     openWorkflows,
     openedWorkflowIndexShift,
@@ -658,6 +701,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     createTemporary,
     renameWorkflow,
     deleteWorkflow,
+    saveAs,
     saveWorkflow,
     reorderWorkflows,
 
diff --git a/src/types/algoliaTypes.ts b/src/types/algoliaTypes.ts
index 07fd33596..de42fb78a 100644
--- a/src/types/algoliaTypes.ts
+++ b/src/types/algoliaTypes.ts
@@ -1,7 +1,4 @@
-import type {
-  BaseSearchParamsWithoutQuery,
-  Hit
-} from 'algoliasearch/dist/lite/browser'
+import type { BaseSearchParamsWithoutQuery } from 'algoliasearch/dist/lite/browser'
 
 import type { components } from '@/types/comfyRegistryTypes'
 
@@ -13,15 +10,6 @@ type SafeNestedProperty<
 
 type RegistryNodePack = components['schemas']['Node']
 
-/**
- * Result of searching the Algolia index.
- * Represents the entire result of a search query.
- */
-export type SearchPacksResult = {
-  nodePacks: Hit<AlgoliaNodePack>[]
-  querySuggestions: Hit<NodesIndexSuggestion>[]
-}
-
 /**
  * Node pack record after it has been mapped to Algolia index format.
  * @see https://github.com/Comfy-Org/comfy-api/blob/main/mapper/algolia.go
diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index 97e936946..2d39d64d9 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'vue'
 
 export type ButtonSize = 'fit-content' | 'sm' | 'md'
-export type ButtonType = 'primary' | 'secondary' | 'transparent'
-export type ButtonBorder = boolean
+type ButtonType = 'primary' | 'secondary' | 'transparent'
+type ButtonBorder = boolean
 
 export interface BaseButtonProps {
   size?: ButtonSize
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index 622753357..491380f85 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -9,7 +9,7 @@ import type { ComfyCommand } from '@/stores/commandStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 import type { SettingParams } from '@/types/settingTypes'
 
-export type Widgets = Record<string, ComfyWidgetConstructor>
+type Widgets = Record<string, ComfyWidgetConstructor>
 
 export interface AboutPageBadge {
   label: string
@@ -17,7 +17,7 @@ export interface AboutPageBadge {
   icon: string
 }
 
-export type MenuCommandGroup = {
+type MenuCommandGroup = {
   /**
    * The path to the menu group.
    */
diff --git a/src/types/comfyManagerTypes.ts b/src/types/comfyManagerTypes.ts
index e59a81480..c53619719 100644
--- a/src/types/comfyManagerTypes.ts
+++ b/src/types/comfyManagerTypes.ts
@@ -2,7 +2,6 @@ import type { InjectionKey, Ref } from 'vue'
 
 import type { AlgoliaNodePack } from '@/types/algoliaTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { components as managerComponents } from '@/types/generatedManagerTypes'
 
 export type RegistryPack = components['schemas']['Node']
 export type MergedNodePack = RegistryPack & AlgoliaNodePack
@@ -10,16 +9,9 @@ export const isMergedNodePack = (
   nodePack: RegistryPack | AlgoliaNodePack
 ): nodePack is MergedNodePack => 'comfy_nodes' in nodePack
 
-export type PackField = keyof RegistryPack | null
-
 export const IsInstallingKey: InjectionKey<Ref<boolean>> =
   Symbol('isInstalling')
 
-export enum ManagerWsQueueStatus {
-  DONE = 'all-done',
-  IN_PROGRESS = 'in_progress'
-}
-
 export enum ManagerTab {
   All = 'all',
   Installed = 'installed',
@@ -34,31 +26,12 @@ export interface TabItem {
   icon: string
 }
 
-export enum ManagerSortField {
-  Author = 'author',
-  CreateDate = 'creation_date',
-  LastUpdateDate = 'last_update',
-  Name = 'name',
-  Stars = 'stars',
-  Size = 'size'
-}
-
-export enum PackEnableState {
-  Enabled,
-  Disabled,
-  NotInstalled
-}
-
 export type TaskLog = {
   taskName: string
   taskId: string
   logs: string[]
 }
 
-export interface ManagerQueueOptions {
-  maxConcurrent?: number
-}
-
 export interface UseNodePacksOptions {
   immediate?: boolean
   maxConcurrent?: number
@@ -83,13 +56,3 @@ export interface ManagerState {
   searchMode: 'nodes' | 'packs'
   sortField: string
 }
-
-/**
- * Types for import failure information API
- */
-export type ImportFailInfoBulkRequest =
-  managerComponents['schemas']['ImportFailInfoBulkRequest']
-export type ImportFailInfoBulkResponse =
-  managerComponents['schemas']['ImportFailInfoBulkResponse']
-export type ImportFailInfoItem =
-  managerComponents['schemas']['ImportFailInfoItem']
diff --git a/src/types/conflictDetectionTypes.ts b/src/types/conflictDetectionTypes.ts
index c513782ab..a176e0ea0 100644
--- a/src/types/conflictDetectionTypes.ts
+++ b/src/types/conflictDetectionTypes.ts
@@ -9,9 +9,6 @@ import type { components } from './comfyRegistryTypes'
 
 // Re-export core types from Registry API
 export type Node = components['schemas']['Node']
-export type NodeVersion = components['schemas']['NodeVersion']
-export type NodeStatus = components['schemas']['NodeStatus']
-export type NodeVersionStatus = components['schemas']['NodeVersionStatus']
 
 /**
  * Conflict types that can be detected in the system
@@ -27,22 +24,6 @@ export type ConflictType =
   | 'banned' // Banned package
   | 'pending' // Security verification pending
 
-/**
- * Version comparison operators
- * @enum {string}
- */
-export type VersionOperator = '>=' | '>' | '<=' | '<' | '==' | '!='
-
-/**
- * Version requirement specification
- */
-export interface VersionRequirement {
-  /** @description Comparison operator for version checking */
-  operator: VersionOperator
-  /** @description Target version string */
-  version: string
-}
-
 /**
  * Node Pack requirements from Registry API
  * Extends Node type with additional installation and compatibility metadata
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index c1a9e9c2a..0ba93043b 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -3,7 +3,7 @@ import { Component } from 'vue'
 import type { useDialogService } from '@/services/dialogService'
 import type { ComfyCommand } from '@/stores/commandStore'
 
-export interface BaseSidebarTabExtension {
+interface BaseSidebarTabExtension {
   id: string
   title: string
   icon?: string | Component
@@ -12,7 +12,7 @@ export interface BaseSidebarTabExtension {
   label?: string
 }
 
-export interface BaseBottomPanelExtension {
+interface BaseBottomPanelExtension {
   id: string
   title?: string // For extensions that provide static titles
   titleKey?: string // For core tabs with i18n keys
@@ -32,16 +32,14 @@ export interface CustomExtension {
   destroy?: () => void
 }
 
-export type VueSidebarTabExtension = BaseSidebarTabExtension & VueExtension
-export type CustomSidebarTabExtension = BaseSidebarTabExtension &
-  CustomExtension
+type VueSidebarTabExtension = BaseSidebarTabExtension & VueExtension
+type CustomSidebarTabExtension = BaseSidebarTabExtension & CustomExtension
 export type SidebarTabExtension =
   | VueSidebarTabExtension
   | CustomSidebarTabExtension
 
-export type VueBottomPanelExtension = BaseBottomPanelExtension & VueExtension
-export type CustomBottomPanelExtension = BaseBottomPanelExtension &
-  CustomExtension
+type VueBottomPanelExtension = BaseBottomPanelExtension & VueExtension
+type CustomBottomPanelExtension = BaseBottomPanelExtension & CustomExtension
 export type BottomPanelExtension =
   | VueBottomPanelExtension
   | CustomBottomPanelExtension
diff --git a/src/types/importFailedTypes.ts b/src/types/importFailedTypes.ts
index d12bb1427..a45d95e92 100644
--- a/src/types/importFailedTypes.ts
+++ b/src/types/importFailedTypes.ts
@@ -1,6 +1,6 @@
 import type { ComputedRef, InjectionKey } from 'vue'
 
-export interface ImportFailedContext {
+interface ImportFailedContext {
   importFailed: ComputedRef<boolean>
   showImportFailedDialog: () => void
 }
diff --git a/src/types/metadataTypes.ts b/src/types/metadataTypes.ts
index c63324196..f4989c3c1 100644
--- a/src/types/metadataTypes.ts
+++ b/src/types/metadataTypes.ts
@@ -66,7 +66,7 @@ export type GltfChunkHeader = {
   chunkTypeIdentifier: number
 }
 
-export type GltfExtras = {
+type GltfExtras = {
   workflow?: string | object
   prompt?: string | object
   [key: string]: any
@@ -112,12 +112,12 @@ export type AvifIinfBox = {
   entries: AvifInfeBox[]
 }
 
-export type AvifIlocItemExtent = {
+type AvifIlocItemExtent = {
   extent_offset: number
   extent_length: number
 }
 
-export type AvifIlocItem = {
+type AvifIlocItem = {
   item_ID: number
   data_reference_index: number
   base_offset: number
diff --git a/src/types/navTypes.ts b/src/types/navTypes.ts
index 785faedb4..6a688bdee 100644
--- a/src/types/navTypes.ts
+++ b/src/types/navTypes.ts
@@ -1,6 +1,7 @@
 export interface NavItemData {
   id: string
   label: string
+  icon: string
 }
 
 export interface NavGroupData {
diff --git a/src/types/nodeDefAugmentation.ts b/src/types/nodeDefAugmentation.ts
index 74a976afc..5dad8ee73 100644
--- a/src/types/nodeDefAugmentation.ts
+++ b/src/types/nodeDefAugmentation.ts
@@ -11,7 +11,7 @@ import type { ComboInputOptions, InputSpec } from '@/schemas/nodeDefSchema'
  * Frontend augmentation for image upload combo inputs.
  * This extends ComboInputOptions with properties injected by the uploadImage extension.
  */
-export interface ImageUploadComboOptions extends ComboInputOptions {
+interface ImageUploadComboOptions extends ComboInputOptions {
   /**
    * Reference to the associated filename combo widget.
    * Injected by uploadImage.ts to link upload buttons with their combo widgets.
diff --git a/src/types/nodeSource.ts b/src/types/nodeSource.ts
index e9843dee1..9dce4ae31 100644
--- a/src/types/nodeSource.ts
+++ b/src/types/nodeSource.ts
@@ -1,6 +1,7 @@
 export enum NodeSourceType {
   Core = 'core',
   CustomNodes = 'custom_nodes',
+  Blueprint = 'blueprint',
   Unknown = 'unknown'
 }
 
@@ -36,6 +37,13 @@ export const getNodeSource = (python_module?: string): NodeSource => {
       displayText: 'Comfy Core',
       badgeText: '🦊'
     }
+  } else if (modules[0] === 'blueprint') {
+    return {
+      type: NodeSourceType.Blueprint,
+      className: 'blueprint',
+      displayText: 'Blueprint',
+      badgeText: 'bp'
+    }
   } else if (modules[0] === 'custom_nodes') {
     const moduleName = modules[1]
     // Custom nodes installed via ComfyNodeRegistry will be in the format of
diff --git a/src/types/searchBoxTypes.ts b/src/types/searchBoxTypes.ts
index d80140590..b25d268be 100644
--- a/src/types/searchBoxTypes.ts
+++ b/src/types/searchBoxTypes.ts
@@ -1,9 +1,3 @@
-export enum LinkReleaseTriggerMode {
-  ALWAYS = 'always',
-  HOLD_SHIFT = 'hold shift',
-  NOT_HOLD_SHIFT = 'NOT hold shift'
-}
-
 export enum LinkReleaseTriggerAction {
   CONTEXT_MENU = 'context menu',
   SEARCH_BOX = 'search box',
diff --git a/src/types/serverArgs.ts b/src/types/serverArgs.ts
index 011f030d3..83f0216c0 100644
--- a/src/types/serverArgs.ts
+++ b/src/types/serverArgs.ts
@@ -20,15 +20,6 @@ export enum HashFunction {
   SHA512 = 'sha512'
 }
 
-export enum AutoLaunch {
-  // Let server decide whether to auto launch based on the current environment
-  Auto = 'auto',
-  // Disable auto launch
-  Disable = 'disable',
-  // Enable auto launch
-  Enable = 'enable'
-}
-
 export enum CudaMalloc {
   // Let server decide whether to use CUDA malloc based on the current environment
   Auto = 'auto',
diff --git a/src/types/settingTypes.ts b/src/types/settingTypes.ts
index af706fb14..08453bde9 100644
--- a/src/types/settingTypes.ts
+++ b/src/types/settingTypes.ts
@@ -1,6 +1,6 @@
 import type { Settings } from '@/schemas/apiSchema'
 
-export type SettingInputType =
+type SettingInputType =
   | 'boolean'
   | 'number'
   | 'slider'
@@ -13,7 +13,7 @@ export type SettingInputType =
   | 'hidden'
   | 'backgroundImage'
 
-export type SettingCustomRenderer = (
+type SettingCustomRenderer = (
   name: string,
   setter: (v: any) => void,
   value: any,
@@ -25,13 +25,6 @@ export interface SettingOption {
   value?: any
 }
 
-export interface Setting {
-  id: keyof Settings
-  onChange?: (value: any, oldValue?: any) => void
-  name: string
-  render: () => HTMLElement
-}
-
 export interface SettingParams<TValue = unknown> extends FormItem {
   id: keyof Settings
   defaultValue: any | (() => any)
diff --git a/src/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts
new file mode 100644
index 000000000..27be67f11
--- /dev/null
+++ b/src/types/simplifiedWidget.ts
@@ -0,0 +1,41 @@
+/**
+ * Simplified widget interface for Vue-based node rendering
+ * Removes all DOM manipulation and positioning concerns
+ */
+
+/** Valid types for widget values */
+export type WidgetValue =
+  | string
+  | number
+  | boolean
+  | object
+  | undefined
+  | null
+  | void
+  | File[]
+
+export interface SimplifiedWidget<
+  T extends WidgetValue = WidgetValue,
+  O = Record<string, any>
+> {
+  /** Display name of the widget */
+  name: string
+
+  /** Widget type identifier (e.g., 'STRING', 'INT', 'COMBO') */
+  type: string
+
+  /** Current value of the widget */
+  value: T
+
+  /** Widget options including filtered PrimeVue props */
+  options?: O
+
+  /** Callback fired when value changes */
+  callback?: (value: T) => void
+
+  /** Optional serialization method for custom value handling */
+  serializeValue?: () => any
+
+  /** Optional method to compute widget size requirements */
+  computeSize?: () => { minHeight: number; maxHeight?: number }
+}
diff --git a/src/types/spatialIndex.ts b/src/types/spatialIndex.ts
new file mode 100644
index 000000000..0bdd9c9e1
--- /dev/null
+++ b/src/types/spatialIndex.ts
@@ -0,0 +1,23 @@
+/**
+ * Type definitions for spatial indexing system
+ */
+import type { Bounds } from '@/renderer/core/spatial/QuadTree'
+
+/**
+ * Debug information for a single QuadTree node
+ */
+export interface QuadNodeDebugInfo {
+  bounds: Bounds
+  depth: number
+  itemCount: number
+  divided: boolean
+  children?: QuadNodeDebugInfo[]
+}
+
+/**
+ * Debug information for the entire spatial index
+ */
+export interface SpatialIndexDebugInfo {
+  size: number
+  tree: QuadNodeDebugInfo
+}
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index da933d3ec..b89b28456 100644
--- a/src/utils/formatUtil.ts
+++ b/src/utils/formatUtil.ts
@@ -33,10 +33,6 @@ export function appendJsonExt(path: string) {
   return path
 }
 
-export function trimJsonExt(path?: string) {
-  return path?.replace(/\.json$/, '')
-}
-
 export function highlightQuery(text: string, query: string) {
   if (!query) return text
 
@@ -80,28 +76,6 @@ export function formatSize(value?: number) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
 }
 
-/**
- * Finds the common directory prefix between two paths
- * @example
- * findCommonPrefix('a/b/c', 'a/b/d') // returns 'a/b'
- * findCommonPrefix('x/y/z', 'a/b/c') // returns ''
- * findCommonPrefix('a/b/c', 'a/b/c/d') // returns 'a/b/c'
- */
-export function findCommonPrefix(path1: string, path2: string): string {
-  const parts1 = path1.split('/')
-  const parts2 = path2.split('/')
-
-  const commonParts: string[] = []
-  for (let i = 0; i < Math.min(parts1.length, parts2.length); i++) {
-    if (parts1[i] === parts2[i]) {
-      commonParts.push(parts1[i])
-    } else {
-      break
-    }
-  }
-  return commonParts.join('/')
-}
-
 /**
  * Returns various filename components.
  * Example:
@@ -109,7 +83,7 @@ export function findCommonPrefix(path1: string, path2: string): string {
  * - filename: 'file'
  * - suffix: 'txt'
  */
-export function getFilenameDetails(fullFilename: string) {
+function getFilenameDetails(fullFilename: string) {
   if (fullFilename.includes('.')) {
     return {
       filename: fullFilename.split('.').slice(0, -1).join('.'),
@@ -423,26 +397,6 @@ export function compareVersions(
   return 0
 }
 
-/**
- * Converts a currency amount to Metronome's integer representation.
- * For USD, converts to cents (multiplied by 100).
- * For all other currencies (including custom pricing units), returns the amount as is.
- * This is specific to Metronome's API requirements.
- *
- * @param amount - The amount in currency to convert
- * @param currency - The currency to convert
- * @returns The amount in Metronome's integer format (cents for USD, base units for others)
- * @example
- * toMetronomeCurrency(1.23, 'usd') // returns 123 (cents)
- * toMetronomeCurrency(1000, 'jpy') // returns 1000 (yen)
- */
-export function toMetronomeCurrency(amount: number, currency: string): number {
-  if (currency === 'usd') {
-    return Math.round(amount * 100)
-  }
-  return amount
-}
-
 /**
  * Converts Metronome's integer amount back to a formatted currency string.
  * For USD, converts from cents to dollars.
@@ -525,7 +479,7 @@ export function formatVersionAnchor(version: string): string {
 /**
  * Supported locale types for the application (from OpenAPI schema)
  */
-export type SupportedLocale = NonNullable<
+type SupportedLocale = NonNullable<
   operations['getReleaseNotes']['parameters']['query']['locale']
 >
 
diff --git a/src/utils/graphTraversalUtil.ts b/src/utils/graphTraversalUtil.ts
index fa9e436ec..72f6f3733 100644
--- a/src/utils/graphTraversalUtil.ts
+++ b/src/utils/graphTraversalUtil.ts
@@ -394,7 +394,7 @@ export function getAllNonIoNodesInSubgraph(subgraph: Subgraph): LGraphNode[] {
 /**
  * Options for traverseNodesDepthFirst function
  */
-export interface TraverseNodesOptions<T> {
+interface TraverseNodesOptions<T> {
   /** Function called for each node during traversal */
   visitor?: (node: LGraphNode, context: T) => T
   /** Initial context value */
@@ -449,7 +449,7 @@ export function traverseNodesDepthFirst<T = void>(
 /**
  * Options for collectFromNodes function
  */
-export interface CollectFromNodesOptions<T, C> {
+interface CollectFromNodesOptions<T, C> {
   /** Function that returns data to collect for each node */
   collector?: (node: LGraphNode, context: C) => T | null
   /** Function that builds context for child nodes */
diff --git a/src/utils/linkFixer.ts b/src/utils/linkFixer.ts
index 125e450ee..1c26afb29 100644
--- a/src/utils/linkFixer.ts
+++ b/src/utils/linkFixer.ts
@@ -32,7 +32,7 @@ import type {
   ISerialisedNode
 } from '@/lib/litegraph/src/types/serialisation'
 
-export interface BadLinksData<T = ISerialisedGraph | LGraph> {
+interface BadLinksData<T = ISerialisedGraph | LGraph> {
   hasBadLinks: boolean
   fixed: boolean
   graph: T
diff --git a/src/utils/mathUtil.ts b/src/utils/mathUtil.ts
index c8645363f..8655451c5 100644
--- a/src/utils/mathUtil.ts
+++ b/src/utils/mathUtil.ts
@@ -1,3 +1,6 @@
+import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
+import type { Bounds } from '@/renderer/core/layout/types'
+
 /**
  * Finds the greatest common divisor (GCD) for two numbers.
  *
@@ -19,3 +22,48 @@ export const gcd = (a: number, b: number): number => {
 export const lcm = (a: number, b: number): number => {
   return Math.abs(a * b) / gcd(a, b)
 }
+
+/**
+ * Computes the union (bounding box) of multiple rectangles using a single-pass algorithm.
+ *
+ * Finds the minimum and maximum x/y coordinates across all rectangles to create
+ * a single bounding rectangle that contains all input rectangles. Optimized for
+ * performance with V8-friendly tuple access patterns.
+ *
+ * @param rectangles - Array of rectangle tuples in [x, y, width, height] format
+ * @returns Bounds object with union rectangle, or null if no rectangles provided
+ */
+export function computeUnionBounds(
+  rectangles: readonly ReadOnlyRect[]
+): Bounds | null {
+  const n = rectangles.length
+  if (n === 0) {
+    return null
+  }
+
+  const r0 = rectangles[0]
+  let minX = r0[0]
+  let minY = r0[1]
+  let maxX = minX + r0[2]
+  let maxY = minY + r0[3]
+
+  for (let i = 1; i < n; i++) {
+    const r = rectangles[i]
+    const x1 = r[0]
+    const y1 = r[1]
+    const x2 = x1 + r[2]
+    const y2 = y1 + r[3]
+
+    if (x1 < minX) minX = x1
+    if (y1 < minY) minY = y1
+    if (x2 > maxX) maxX = x2
+    if (y2 > maxY) maxY = y2
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  }
+}
diff --git a/src/utils/nodeDefUtil.ts b/src/utils/nodeDefUtil.ts
index 65c1475c4..efd677253 100644
--- a/src/utils/nodeDefUtil.ts
+++ b/src/utils/nodeDefUtil.ts
@@ -15,7 +15,6 @@ import {
   isFloatInputSpec,
   isIntInputSpec
 } from '@/schemas/nodeDefSchema'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 
 import { lcm } from './mathUtil'
 
@@ -139,11 +138,3 @@ export const mergeInputSpec = (
 
   return mergeCommonInputSpec(spec1, spec2)
 }
-
-/**
- * Checks if a node definition represents a subgraph node.
- * Subgraph nodes are created with category='subgraph' and python_module='nodes'.
- */
-export const isSubgraphNode = (nodeDef: ComfyNodeDefImpl): boolean => {
-  return nodeDef.category === 'subgraph' && nodeDef.python_module === 'nodes'
-}
diff --git a/src/utils/nodeHelpUtil.ts b/src/utils/nodeHelpUtil.ts
index 814787a7e..2bcd89961 100644
--- a/src/utils/nodeHelpUtil.ts
+++ b/src/utils/nodeHelpUtil.ts
@@ -1,12 +1,14 @@
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+import { normalizePackId } from '@/utils/packUtils'
 
 export function extractCustomNodeName(
   pythonModule: string | undefined
 ): string | null {
   const modules = pythonModule?.split('.') || []
   if (modules.length >= 2 && modules[0] === 'custom_nodes') {
-    return modules[1].split('@')[0]
+    // Use normalizePackId to remove version suffix
+    return normalizePackId(modules[1])
   }
   return null
 }
diff --git a/src/utils/packUtils.ts b/src/utils/packUtils.ts
new file mode 100644
index 000000000..cbb6fe100
--- /dev/null
+++ b/src/utils/packUtils.ts
@@ -0,0 +1,35 @@
+import { mapKeys } from 'es-toolkit/compat'
+
+/**
+ * Normalizes a pack ID by removing the version suffix.
+ *
+ * ComfyUI-Manager returns pack IDs in different formats:
+ * - Enabled packs: "packname" (without version)
+ * - Disabled packs: "packname@1_0_3" (with version suffix)
+ * - Latest versions from registry: "packname" (without version)
+ *
+ * Since the pack object itself contains the version info (ver field),
+ * we normalize all pack IDs to just the base name for consistent access.
+ * This ensures we can always find a pack by its base name (nodePack.id)
+ * regardless of its enabled/disabled state.
+ *
+ * @param packId - The pack ID that may contain a version suffix
+ * @returns The normalized pack ID without version suffix
+ */
+export function normalizePackId(packId: string): string {
+  return packId.split('@')[0]
+}
+
+/**
+ * Normalizes all keys in a pack record by removing version suffixes.
+ * This is used when receiving pack data from the server to ensure
+ * consistent key format across the application.
+ *
+ * @param packs - Record of packs with potentially versioned keys
+ * @returns Record with normalized keys
+ */
+export function normalizePackKeys<T>(
+  packs: Record<string, T>
+): Record<string, T> {
+  return mapKeys(packs, (_value, key) => normalizePackId(key))
+}
diff --git a/src/utils/tailwindUtil.ts b/src/utils/tailwindUtil.ts
new file mode 100644
index 000000000..78e3a3d1a
--- /dev/null
+++ b/src/utils/tailwindUtil.ts
@@ -0,0 +1,8 @@
+import clsx, { type ClassArray } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export type { ClassValue } from 'clsx'
+
+export function cn(...inputs: ClassArray) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/utils/treeUtil.ts b/src/utils/treeUtil.ts
index 788f47e89..21f1e45d6 100644
--- a/src/utils/treeUtil.ts
+++ b/src/utils/treeUtil.ts
@@ -129,7 +129,7 @@ export const findNodeByKey = <T extends TreeNode>(
  * @param node - The node to clone.
  * @returns A deep clone of the node.
  */
-export function cloneTree<T extends TreeNode>(node: T): T {
+function cloneTree<T extends TreeNode>(node: T): T {
   const clone = { ...node }
 
   // Clone children recursively
diff --git a/src/utils/typeGuardUtil.ts b/src/utils/typeGuardUtil.ts
index af88ec55e..decf35554 100644
--- a/src/utils/typeGuardUtil.ts
+++ b/src/utils/typeGuardUtil.ts
@@ -1,5 +1,9 @@
 import type { PrimitiveNode } from '@/extensions/core/widgetInputs'
-import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  type INodeSlot,
+  LGraph,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
 import { Subgraph } from '@/lib/litegraph/src/litegraph'
 
 export function isPrimitiveNode(
@@ -39,3 +43,16 @@ export const isSubgraphIoNode = (
   const nodeClass = node.constructor?.comfyClass
   return nodeClass === 'SubgraphInputNode' || nodeClass === 'SubgraphOutputNode'
 }
+
+/**
+ * Type guard for slot objects (inputs/outputs)
+ */
+export const isSlotObject = (obj: unknown): obj is INodeSlot => {
+  return (
+    obj !== null &&
+    typeof obj === 'object' &&
+    'name' in obj &&
+    'type' in obj &&
+    'boundingRect' in obj
+  )
+}
diff --git a/src/utils/versionUtil.ts b/src/utils/versionUtil.ts
index 2688b234f..61337b2aa 100644
--- a/src/utils/versionUtil.ts
+++ b/src/utils/versionUtil.ts
@@ -29,34 +29,6 @@ export function satisfiesVersion(version: string, range: string): boolean {
   }
 }
 
-/**
- * Compares two versions and returns the difference type
- * @param version1 First version
- * @param version2 Second version
- * @returns Difference type or null if comparison fails
- */
-export function getVersionDifference(
-  version1: string,
-  version2: string
-): semver.ReleaseType | null {
-  try {
-    const clean1 = cleanVersion(version1)
-    const clean2 = cleanVersion(version2)
-    return semver.diff(clean1, clean2)
-  } catch {
-    return null
-  }
-}
-
-/**
- * Checks if a version is valid according to semver
- * @param version Version string to validate
- * @returns true if version is valid
- */
-export function isValidVersion(version: string): boolean {
-  return semver.valid(version) !== null
-}
-
 /**
  * Checks version compatibility and returns conflict details.
  * Supports all semver ranges including >=, <=, >, <, ~, ^ operators.
diff --git a/src/utils/widgetPropFilter.ts b/src/utils/widgetPropFilter.ts
new file mode 100644
index 000000000..af2bac794
--- /dev/null
+++ b/src/utils/widgetPropFilter.ts
@@ -0,0 +1,71 @@
+/**
+ * Widget prop filtering utilities
+ * Filters out style-related and customization props from PrimeVue components
+ * to maintain consistent widget appearance across the application
+ */
+
+// Props to exclude based on the widget interface specifications
+export const STANDARD_EXCLUDED_PROPS = [
+  'style',
+  'class',
+  'dt',
+  'pt',
+  'ptOptions',
+  'unstyled'
+] as const
+
+export const INPUT_EXCLUDED_PROPS = [
+  ...STANDARD_EXCLUDED_PROPS,
+  'inputClass',
+  'inputStyle'
+] as const
+
+export const PANEL_EXCLUDED_PROPS = [
+  ...STANDARD_EXCLUDED_PROPS,
+  'panelClass',
+  'panelStyle',
+  'overlayClass'
+] as const
+
+// export const IMAGE_EXCLUDED_PROPS = [
+//   ...STANDARD_EXCLUDED_PROPS,
+//   'imageClass',
+//   'imageStyle'
+// ] as const
+
+export const GALLERIA_EXCLUDED_PROPS = [
+  ...STANDARD_EXCLUDED_PROPS,
+  'thumbnailsPosition',
+  'verticalThumbnailViewPortHeight',
+  'indicatorsPosition',
+  'maskClass',
+  'containerStyle',
+  'containerClass',
+  'galleriaClass'
+] as const
+
+export const BADGE_EXCLUDED_PROPS = [
+  ...STANDARD_EXCLUDED_PROPS,
+  'badgeClass'
+] as const
+
+/**
+ * Filters widget props by excluding specified properties
+ * @param props - The props object to filter
+ * @param excludeList - List of property names to exclude
+ * @returns Filtered props object
+ */
+export function filterWidgetProps<T extends Record<string, any>>(
+  props: T | undefined,
+  excludeList: readonly string[]
+): Partial<T> {
+  if (!props) return {}
+
+  const filtered: Record<string, any> = {}
+  for (const [key, value] of Object.entries(props)) {
+    if (!excludeList.includes(key)) {
+      filtered[key] = value
+    }
+  }
+  return filtered as Partial<T>
+}
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index ef38ec569..98302639a 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -343,7 +343,7 @@ const onGraphReady = () => {
   grid-column: 2;
   grid-row: 2;
   position: relative;
-  overflow: hidden;
+  overflow: clip;
 }
 
 .comfyui-body-right {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cbf3ce996..4602b69a9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+import lucide from '@iconify-json/lucide/icons.json'
 import { addDynamicIconSelectors } from '@iconify/tailwind'
 
 import { iconCollection } from './build/customIconCollection'
@@ -5,256 +6,13 @@ import { iconCollection } from './build/customIconCollection'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
-  theme: {
-    fontSize: {
-      xxs: '0.625rem',
-      xs: '0.75rem',
-      sm: '0.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem'
-    },
-
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-      '3xl': '1800px',
-      '4xl': '2500px',
-      '5xl': '3200px'
-    },
-
-    spacing: {
-      px: '1px',
-      0: '0px',
-      0.5: '0.125rem',
-      1: '0.25rem',
-      1.5: '0.375rem',
-      2: '0.5rem',
-      2.5: '0.625rem',
-      3: '0.75rem',
-      3.5: '0.875rem',
-      4: '1rem',
-      4.5: '1.125rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-      11: '2.75rem',
-      12: '3rem',
-      14: '3.5rem',
-      16: '4rem',
-      18: '4.5rem',
-      20: '5rem',
-      24: '6rem',
-      28: '7rem',
-      32: '8rem',
-      36: '9rem',
-      40: '10rem',
-      44: '11rem',
-      48: '12rem',
-      52: '13rem',
-      56: '14rem',
-      60: '15rem',
-      64: '16rem',
-      72: '18rem',
-      80: '20rem',
-      84: '22rem',
-      90: '24rem',
-      96: '26rem',
-      100: '28rem',
-      110: '32rem'
-    },
-
-    extend: {
-      colors: {
-        zinc: {
-          50: '#fafafa',
-          100: '#8282821a',
-          200: '#e4e4e7',
-          300: '#d4d4d8',
-          400: '#A1A3AE',
-          500: '#71717a',
-          600: '#52525b',
-          700: '#38393b',
-          800: '#262729',
-          900: '#18181b',
-          950: '#09090b'
-        },
-
-        gray: {
-          50: '#f8fbfc',
-          100: '#f3f6fa',
-          200: '#edf2f7',
-          300: '#e2e8f0',
-          400: '#cbd5e0',
-          500: '#a0aec0',
-          600: '#718096',
-          700: '#4a5568',
-          800: '#2d3748',
-          900: '#1a202c',
-          950: '#0a1016'
-        },
-
-        teal: {
-          50: '#f0fdfa',
-          100: '#e0fcff',
-          200: '#bef8fd',
-          300: '#87eaf2',
-          400: '#54d1db',
-          500: '#38bec9',
-          600: '#2cb1bc',
-          700: '#14919b',
-          800: '#0e7c86',
-          900: '#005860',
-          950: '#022c28'
-        },
-
-        blue: {
-          50: '#eff6ff',
-          100: '#ebf8ff',
-          200: '#bee3f8',
-          300: '#90cdf4',
-          400: '#63b3ed',
-          500: '#4299e1',
-          600: '#3182ce',
-          700: '#2b6cb0',
-          800: '#2c5282',
-          900: '#2a4365',
-          950: '#172554'
-        },
-
-        green: {
-          50: '#fcfff5',
-          100: '#fafff3',
-          200: '#eaf9c9',
-          300: '#d1efa0',
-          400: '#b2e16e',
-          500: '#96ce4c',
-          600: '#7bb53d',
-          700: '#649934',
-          800: '#507b2e',
-          900: '#456829',
-          950: '#355819'
-        },
-
-        fuchsia: {
-          50: '#fdf4ff',
-          100: '#fae8ff',
-          200: '#f5d0fe',
-          300: '#f0abfc',
-          400: '#e879f9',
-          500: '#d946ef',
-          600: '#c026d3',
-          700: '#a21caf',
-          800: '#86198f',
-          900: '#701a75',
-          950: '#4a044e'
-        },
-
-        orange: {
-          50: '#fff7ed',
-          100: '#ffedd5',
-          200: '#fedbb8',
-          300: '#fbd38d',
-          400: '#f6ad55',
-          500: '#ed8936',
-          600: '#dd6b20',
-          700: '#c05621',
-          800: '#9c4221',
-          900: '#7b341e',
-          950: '#431407'
-        },
-
-        yellow: {
-          50: '#fffef5',
-          100: '#fffce8',
-          200: '#fff8c5',
-          300: '#fff197',
-          400: '#ffcc00',
-          500: '#ffc000',
-          600: '#e6a800',
-          700: '#cc9600',
-          800: '#b38400',
-          900: '#997200',
-          950: '#664d00'
-        }
-      },
-
-      textColor: {
-        muted: 'var(--p-text-muted-color)',
-        highlight: 'var(--p-primary-color)'
-      },
-
-      /**
-       * Box shadows for different elevation levels
-       * https://m3.material.io/styles/elevation/overview
-       */
-      boxShadow: {
-        'elevation-0': 'none',
-        'elevation-1':
-          '0 0 2px 0px rgb(0 0 0 / 0.01), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
-        'elevation-1.5':
-          '0 0 2px 0px rgb(0 0 0 / 0.025), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
-        'elevation-2':
-          '0 0 10px 0px rgb(0 0 0 / 0.06), 0 6px 8px -2px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
-        'elevation-3':
-          '0 0 15px 0px rgb(0 0 0 / 0.10), 0 8px 12px -3px rgb(0 0 0 / 0.09), 0 3px 5px -4px rgb(0 0 0 / 0.06)',
-        'elevation-4':
-          '0 0 18px 0px rgb(0 0 0 / 0.12), 0 10px 15px -3px rgb(0 0 0 / 0.11), 0 4px 6px -4px rgb(0 0 0 / 0.08)',
-        'elevation-5':
-          '0 0 20px 0px rgb(0 0 0 / 0.14), 0 12px 16px -4px rgb(0 0 0 / 0.13), 0 5px 7px -5px rgb(0 0 0 / 0.10)'
-      },
-
-      /**
-       * Background colors for different elevation levels
-       * https://m3.material.io/styles/elevation/overview
-       */
-      backgroundColor: {
-        'dark-elevation-0': 'rgba(255, 255, 255, 0)',
-        'dark-elevation-1': 'rgba(255, 255, 255, 0.01)',
-        'dark-elevation-1.5': 'rgba(255, 255, 255, 0.015)',
-        'dark-elevation-2': 'rgba(255, 255, 255, 0.03)',
-        'dark-elevation-3': 'rgba(255, 255, 255, 0.04)',
-        'dark-elevation-4': 'rgba(255, 255, 255, 0.08)',
-        'dark-elevation-5': 'rgba(2 55, 255, 255, 0.12)'
-      }
-    }
-  },
-
   plugins: [
     addDynamicIconSelectors({
       iconSets: {
-        comfy: iconCollection
-      }
-    }),
-    function ({ addVariant }) {
-      addVariant('dark-theme', '.dark-theme &')
-    },
-    function ({ addUtilities }) {
-      const newUtilities = {
-        '.scrollbar-hide': {
-          /* Firefox */
-          'scrollbar-width': 'none',
-          /* Webkit-based browsers */
-          '&::-webkit-scrollbar': {
-            width: '1px'
-          },
-          '&::-webkit-scrollbar-thumb': {
-            'background-color': 'transparent'
-          }
-        }
-      }
-      addUtilities(newUtilities)
-    }
+        comfy: iconCollection,
+        lucide
+      },
+      prefix: 'icon'
+    })
   ]
 }
diff --git a/tests-ui/tests/api.folderPaths.test.ts b/tests-ui/tests/api.folderPaths.test.ts
new file mode 100644
index 000000000..2b0bf7fd1
--- /dev/null
+++ b/tests-ui/tests/api.folderPaths.test.ts
@@ -0,0 +1,30 @@
+import axios from 'axios'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { api } from '@/scripts/api'
+
+vi.mock('axios')
+
+describe('getFolderPaths', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('returns legacy API response when available', async () => {
+    const mockResponse = { checkpoints: ['/test/checkpoints'] }
+    vi.mocked(axios.get).mockResolvedValueOnce({ data: mockResponse })
+
+    const result = await api.getFolderPaths()
+
+    expect(result).toEqual(mockResponse)
+  })
+
+  it('returns empty object when legacy API unavailable (dynamic discovery)', async () => {
+    vi.mocked(axios.get).mockRejectedValueOnce(new Error())
+
+    const result = await api.getFolderPaths()
+
+    // With dynamic discovery, we don't pre-generate directories when API is unavailable
+    expect(result).toEqual({})
+  })
+})
diff --git a/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts b/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts
index eeecae0a7..afcb90996 100644
--- a/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts
+++ b/tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts
@@ -33,14 +33,14 @@ const createMockNode = (type: string, version?: string): LGraphNode =>
 describe('MissingCoreNodesMessage', () => {
   const mockSystemStatsStore = {
     systemStats: null as { system?: { comfyui_version?: string } } | null,
-    fetchSystemStats: vi.fn()
+    refetchSystemStats: vi.fn()
   }
 
   beforeEach(() => {
     vi.clearAllMocks()
     // Reset the mock store state
     mockSystemStatsStore.systemStats = null
-    mockSystemStatsStore.fetchSystemStats = vi.fn()
+    mockSystemStatsStore.refetchSystemStats = vi.fn()
     // @ts-expect-error - Mocking the return value of useSystemStatsStore for testing.
     // The actual store has more properties, but we only need these for our tests.
     useSystemStatsStore.mockReturnValue(mockSystemStatsStore)
@@ -86,15 +86,11 @@ describe('MissingCoreNodesMessage', () => {
     expect(wrapper.findComponent(Message).exists()).toBe(true)
   })
 
-  it('fetches and displays current ComfyUI version', async () => {
-    // Start with no systemStats to trigger fetch
-    mockSystemStatsStore.fetchSystemStats.mockImplementation(() => {
-      // Simulate the fetch setting the systemStats
-      mockSystemStatsStore.systemStats = {
-        system: { comfyui_version: '1.0.0' }
-      }
-      return Promise.resolve()
-    })
+  it('displays current ComfyUI version when available', async () => {
+    // Set systemStats directly (store auto-fetches with useAsyncState)
+    mockSystemStatsStore.systemStats = {
+      system: { comfyui_version: '1.0.0' }
+    }
 
     const missingCoreNodes = {
       '1.2.0': [createMockNode('TestNode', '1.2.0')]
@@ -102,20 +98,18 @@ describe('MissingCoreNodesMessage', () => {
 
     const wrapper = mountComponent({ missingCoreNodes })
 
-    // Wait for all async operations
-    await nextTick()
-    await new Promise((resolve) => setTimeout(resolve, 0))
+    // Wait for component to render
     await nextTick()
 
-    expect(mockSystemStatsStore.fetchSystemStats).toHaveBeenCalled()
+    // No need to check if fetchSystemStats was called since useAsyncState auto-fetches
     expect(wrapper.text()).toContain(
       'Some nodes require a newer version of ComfyUI (current: 1.0.0)'
     )
   })
 
   it('displays generic message when version is unavailable', async () => {
-    // Mock fetchSystemStats to resolve without setting systemStats
-    mockSystemStatsStore.fetchSystemStats.mockResolvedValue(undefined)
+    // No systemStats set - version unavailable
+    mockSystemStatsStore.systemStats = null
 
     const missingCoreNodes = {
       '1.2.0': [createMockNode('TestNode', '1.2.0')]
diff --git a/tests-ui/tests/composables/element/useTransformState.test.ts b/tests-ui/tests/composables/element/useTransformState.test.ts
new file mode 100644
index 000000000..e22f34242
--- /dev/null
+++ b/tests-ui/tests/composables/element/useTransformState.test.ts
@@ -0,0 +1,351 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
+
+// Create a mock canvas context for transform testing
+function createMockCanvasContext() {
+  return {
+    canvas: {
+      width: 1280,
+      height: 720,
+      getBoundingClientRect: () => ({
+        left: 0,
+        top: 0,
+        width: 1280,
+        height: 720,
+        right: 1280,
+        bottom: 720,
+        x: 0,
+        y: 0
+      })
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    }
+  }
+}
+
+describe('useTransformState', () => {
+  let transformState: ReturnType<typeof useTransformState>
+
+  beforeEach(() => {
+    transformState = useTransformState()
+  })
+
+  describe('initial state', () => {
+    it('should initialize with default camera values', () => {
+      const { camera } = transformState
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should generate correct initial transform style', () => {
+      const { transformStyle } = transformState
+      expect(transformStyle.value).toEqual({
+        transform: 'scale(1) translate(0px, 0px)',
+        transformOrigin: '0 0'
+      })
+    })
+  })
+
+  describe('syncWithCanvas', () => {
+    it('should sync camera state with canvas transform', () => {
+      const { syncWithCanvas, camera } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Set mock canvas transform
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+
+      syncWithCanvas(mockCanvas as any)
+
+      expect(camera.x).toBe(100)
+      expect(camera.y).toBe(50)
+      expect(camera.z).toBe(2)
+    })
+
+    it('should handle null canvas gracefully', () => {
+      const { syncWithCanvas, camera } = transformState
+
+      syncWithCanvas(null as any)
+
+      // Should remain at initial values
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should handle canvas without ds property', () => {
+      const { syncWithCanvas, camera } = transformState
+      const canvasWithoutDs = { canvas: {} }
+
+      syncWithCanvas(canvasWithoutDs as any)
+
+      // Should remain at initial values
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should update transform style after sync', () => {
+      const { syncWithCanvas, transformStyle } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      mockCanvas.ds.offset = [150, 75]
+      mockCanvas.ds.scale = 0.5
+
+      syncWithCanvas(mockCanvas as any)
+
+      expect(transformStyle.value).toEqual({
+        transform: 'scale(0.5) translate(150px, 75px)',
+        transformOrigin: '0 0'
+      })
+    })
+  })
+
+  describe('coordinate conversions', () => {
+    beforeEach(() => {
+      // Set up a known transform state
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    describe('canvasToScreen', () => {
+      it('should convert canvas coordinates to screen coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const canvasPoint = { x: 10, y: 20 }
+        const screenPoint = canvasToScreen(canvasPoint)
+
+        // screen = (canvas + offset) * scale
+        // x: (10 + 100) * 2 = 220
+        // y: (20 + 50) * 2 = 140
+        expect(screenPoint).toEqual({ x: 220, y: 140 })
+      })
+
+      it('should handle zero coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const screenPoint = canvasToScreen({ x: 0, y: 0 })
+        expect(screenPoint).toEqual({ x: 200, y: 100 })
+      })
+
+      it('should handle negative coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const screenPoint = canvasToScreen({ x: -10, y: -20 })
+        expect(screenPoint).toEqual({ x: 180, y: 60 })
+      })
+    })
+
+    describe('screenToCanvas', () => {
+      it('should convert screen coordinates to canvas coordinates', () => {
+        const { screenToCanvas } = transformState
+
+        const screenPoint = { x: 220, y: 140 }
+        const canvasPoint = screenToCanvas(screenPoint)
+
+        // canvas = screen / scale - offset
+        // x: 220 / 2 - 100 = 10
+        // y: 140 / 2 - 50 = 20
+        expect(canvasPoint).toEqual({ x: 10, y: 20 })
+      })
+
+      it('should be inverse of canvasToScreen', () => {
+        const { canvasToScreen, screenToCanvas } = transformState
+
+        const originalPoint = { x: 25, y: 35 }
+        const screenPoint = canvasToScreen(originalPoint)
+        const backToCanvas = screenToCanvas(screenPoint)
+
+        expect(backToCanvas.x).toBeCloseTo(originalPoint.x)
+        expect(backToCanvas.y).toBeCloseTo(originalPoint.y)
+      })
+    })
+  })
+
+  describe('getNodeScreenBounds', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    it('should calculate correct screen bounds for a node', () => {
+      const { getNodeScreenBounds } = transformState
+
+      const nodePos = [10, 20]
+      const nodeSize = [200, 100]
+      const bounds = getNodeScreenBounds(nodePos, nodeSize)
+
+      // Top-left: canvasToScreen(10, 20) = (220, 140)
+      // Width: 200 * 2 = 400
+      // Height: 100 * 2 = 200
+      expect(bounds.x).toBe(220)
+      expect(bounds.y).toBe(140)
+      expect(bounds.width).toBe(400)
+      expect(bounds.height).toBe(200)
+    })
+  })
+
+  describe('isNodeInViewport', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [0, 0]
+      mockCanvas.ds.scale = 1
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    const viewport = { width: 1000, height: 600 }
+
+    it('should return true for nodes inside viewport', () => {
+      const { isNodeInViewport } = transformState
+
+      const nodePos = [100, 100]
+      const nodeSize = [200, 100]
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport)).toBe(true)
+    })
+
+    it('should return false for nodes completely outside viewport', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node far to the right
+      expect(isNodeInViewport([2000, 100], [200, 100], viewport)).toBe(false)
+
+      // Node far to the left
+      expect(isNodeInViewport([-500, 100], [200, 100], viewport)).toBe(false)
+
+      // Node far below
+      expect(isNodeInViewport([100, 1000], [200, 100], viewport)).toBe(false)
+
+      // Node far above
+      expect(isNodeInViewport([100, -500], [200, 100], viewport)).toBe(false)
+    })
+
+    it('should return true for nodes partially in viewport with margin', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node slightly outside but within margin
+      const nodePos = [-50, -50]
+      const nodeSize = [100, 100]
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport, 0.2)).toBe(true)
+    })
+
+    it('should return false for tiny nodes (size culling)', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node is in viewport but too small
+      const nodePos = [100, 100]
+      const nodeSize = [3, 3] // Less than 4 pixels
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport)).toBe(false)
+    })
+
+    it('should adjust margin based on zoom level', () => {
+      const { isNodeInViewport, syncWithCanvas } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Test with very low zoom
+      mockCanvas.ds.scale = 0.05
+      syncWithCanvas(mockCanvas as any)
+
+      // Node at edge should still be visible due to increased margin
+      expect(isNodeInViewport([1100, 100], [200, 100], viewport)).toBe(true)
+
+      // Test with high zoom
+      mockCanvas.ds.scale = 4
+      syncWithCanvas(mockCanvas as any)
+
+      // Margin should be tighter
+      expect(isNodeInViewport([1100, 100], [200, 100], viewport)).toBe(false)
+    })
+  })
+
+  describe('getViewportBounds', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    it('should calculate viewport bounds in canvas coordinates', () => {
+      const { getViewportBounds } = transformState
+      const viewport = { width: 1000, height: 600 }
+
+      const bounds = getViewportBounds(viewport, 0.2)
+
+      // With 20% margin:
+      // marginX = 1000 * 0.2 = 200
+      // marginY = 600 * 0.2 = 120
+      // topLeft in screen: (-200, -120)
+      // bottomRight in screen: (1200, 720)
+
+      // Convert to canvas coordinates (canvas = screen / scale - offset):
+      // topLeft: (-200 / 2 - 100, -120 / 2 - 50) = (-200, -110)
+      // bottomRight: (1200 / 2 - 100, 720 / 2 - 50) = (500, 310)
+
+      expect(bounds.x).toBe(-200)
+      expect(bounds.y).toBe(-110)
+      expect(bounds.width).toBe(700) // 500 - (-200)
+      expect(bounds.height).toBe(420) // 310 - (-110)
+    })
+
+    it('should handle zero margin', () => {
+      const { getViewportBounds } = transformState
+      const viewport = { width: 1000, height: 600 }
+
+      const bounds = getViewportBounds(viewport, 0)
+
+      // No margin, so viewport bounds are exact
+      expect(bounds.x).toBe(-100) // 0 / 2 - 100
+      expect(bounds.y).toBe(-50) // 0 / 2 - 50
+      expect(bounds.width).toBe(500) // 1000 / 2
+      expect(bounds.height).toBe(300) // 600 / 2
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle extreme zoom levels', () => {
+      const { syncWithCanvas, canvasToScreen } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Very small zoom
+      mockCanvas.ds.scale = 0.001
+      syncWithCanvas(mockCanvas as any)
+
+      const point1 = canvasToScreen({ x: 1000, y: 1000 })
+      expect(point1.x).toBeCloseTo(1)
+      expect(point1.y).toBeCloseTo(1)
+
+      // Very large zoom
+      mockCanvas.ds.scale = 100
+      syncWithCanvas(mockCanvas as any)
+
+      const point2 = canvasToScreen({ x: 1, y: 1 })
+      expect(point2.x).toBe(100)
+      expect(point2.y).toBe(100)
+    })
+
+    it('should handle zero scale in screenToCanvas', () => {
+      const { syncWithCanvas, screenToCanvas } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Scale of 0 gets converted to 1 by || operator
+      mockCanvas.ds.scale = 0
+      syncWithCanvas(mockCanvas as any)
+
+      // Should use scale of 1 due to camera.z || 1 in implementation
+      const result = screenToCanvas({ x: 100, y: 100 })
+      expect(result.x).toBe(100) // (100 - 0) / 1
+      expect(result.y).toBe(100) // (100 - 0) / 1
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
new file mode 100644
index 000000000..79503bb5f
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
@@ -0,0 +1,240 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
+
+import type { LGraphCanvas } from '../../../../src/lib/litegraph/src/litegraph'
+
+// Mock LiteGraph canvas
+const createMockCanvas = (): Partial<LGraphCanvas> => ({
+  canvas: document.createElement('canvas'),
+  ds: {
+    offset: [0, 0],
+    scale: 1
+  } as any // Mock the DragAndScale type
+})
+
+describe('useCanvasTransformSync', () => {
+  let mockCanvas: LGraphCanvas
+  let syncFn: ReturnType<typeof vi.fn>
+  let callbacks: {
+    onStart: ReturnType<typeof vi.fn>
+    onUpdate: ReturnType<typeof vi.fn>
+    onStop: ReturnType<typeof vi.fn>
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    mockCanvas = createMockCanvas() as LGraphCanvas
+    syncFn = vi.fn()
+    callbacks = {
+      onStart: vi.fn(),
+      onUpdate: vi.fn(),
+      onStop: vi.fn()
+    }
+
+    // Mock requestAnimationFrame
+    global.requestAnimationFrame = vi.fn((cb) => {
+      setTimeout(cb, 16) // Simulate 60fps
+      return 1
+    })
+    global.cancelAnimationFrame = vi.fn()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should auto-start sync when canvas is provided', async () => {
+    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+    expect(callbacks.onStart).toHaveBeenCalledOnce()
+    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+  })
+
+  it('should not auto-start when autoStart is false', async () => {
+    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn, callbacks, {
+      autoStart: false
+    })
+
+    await nextTick()
+
+    expect(isActive.value).toBe(false)
+    expect(callbacks.onStart).not.toHaveBeenCalled()
+    expect(syncFn).not.toHaveBeenCalled()
+  })
+
+  it('should not start when canvas is null', async () => {
+    const { isActive } = useCanvasTransformSync(null, syncFn, callbacks)
+
+    await nextTick()
+
+    expect(isActive.value).toBe(false)
+    expect(callbacks.onStart).not.toHaveBeenCalled()
+  })
+
+  it('should manually start and stop sync', async () => {
+    const { isActive, startSync, stopSync } = useCanvasTransformSync(
+      mockCanvas,
+      syncFn,
+      callbacks,
+      { autoStart: false }
+    )
+
+    // Start manually
+    startSync()
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+    expect(callbacks.onStart).toHaveBeenCalledOnce()
+
+    // Stop manually
+    stopSync()
+    await nextTick()
+
+    expect(isActive.value).toBe(false)
+    expect(callbacks.onStop).toHaveBeenCalledOnce()
+  })
+
+  it('should call sync function on each frame', async () => {
+    useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    // Advance timers to trigger additional frames (initial call + 3 more = 4 total)
+    vi.advanceTimersByTime(48) // 3 additional frames at 16ms each
+    await nextTick()
+
+    expect(syncFn).toHaveBeenCalledTimes(4) // Initial call + 3 timed calls
+    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+  })
+
+  it('should provide timing information in onUpdate callback', async () => {
+    // Mock performance.now to return predictable values
+    const mockNow = vi.spyOn(performance, 'now')
+    mockNow.mockReturnValueOnce(0).mockReturnValueOnce(5) // 5ms duration
+
+    useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    expect(callbacks.onUpdate).toHaveBeenCalledWith(5)
+  })
+
+  it('should handle sync function that throws errors', async () => {
+    const errorSyncFn = vi.fn().mockImplementation(() => {
+      throw new Error('Sync failed')
+    })
+
+    // Creating the composable should not throw
+    expect(() => {
+      useCanvasTransformSync(mockCanvas, errorSyncFn, callbacks)
+    }).not.toThrow()
+
+    await nextTick()
+
+    // Even though sync function throws, the composable should handle it gracefully
+    expect(errorSyncFn).toHaveBeenCalled()
+    expect(callbacks.onStart).toHaveBeenCalled()
+  })
+
+  it('should not start if already active', async () => {
+    const { startSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    // Try to start again
+    startSync()
+    await nextTick()
+
+    // Should only be called once from auto-start
+    expect(callbacks.onStart).toHaveBeenCalledOnce()
+  })
+
+  it('should not stop if already inactive', async () => {
+    const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks, {
+      autoStart: false
+    })
+
+    // Try to stop when not started
+    stopSync()
+    await nextTick()
+
+    expect(callbacks.onStop).not.toHaveBeenCalled()
+  })
+
+  it('should clean up on component unmount', async () => {
+    const TestComponent = {
+      setup() {
+        const { isActive } = useCanvasTransformSync(
+          mockCanvas,
+          syncFn,
+          callbacks
+        )
+        return { isActive }
+      },
+      template: '<div>{{ isActive }}</div>'
+    }
+
+    const wrapper = mount(TestComponent)
+    await nextTick()
+
+    expect(callbacks.onStart).toHaveBeenCalled()
+
+    // Unmount component
+    wrapper.unmount()
+    await nextTick()
+
+    expect(callbacks.onStop).toHaveBeenCalled()
+    expect(global.cancelAnimationFrame).toHaveBeenCalled()
+  })
+
+  it('should work without callbacks', async () => {
+    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn)
+
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+  })
+
+  it('should stop sync when canvas becomes null during sync', async () => {
+    let currentCanvas: any = mockCanvas
+    const dynamicSyncFn = vi.fn(() => {
+      // Simulate canvas becoming null during sync
+      currentCanvas = null
+    })
+
+    const { isActive } = useCanvasTransformSync(
+      currentCanvas,
+      dynamicSyncFn,
+      callbacks
+    )
+
+    await nextTick()
+
+    expect(isActive.value).toBe(true)
+
+    // Advance time to trigger sync
+    vi.advanceTimersByTime(16)
+    await nextTick()
+
+    // Should handle null canvas gracefully
+    expect(dynamicSyncFn).toHaveBeenCalled()
+  })
+
+  it('should use cancelAnimationFrame when stopping', async () => {
+    const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+    await nextTick()
+
+    stopSync()
+
+    expect(global.cancelAnimationFrame).toHaveBeenCalledWith(1)
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useTransformSettling.test.ts b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
new file mode 100644
index 000000000..2bc6342c8
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
@@ -0,0 +1,277 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+
+describe('useTransformSettling', () => {
+  let element: HTMLDivElement
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    element = document.createElement('div')
+    document.body.appendChild(element)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    document.body.removeChild(element)
+  })
+
+  it('should track wheel events and settle after delay', async () => {
+    const { isTransforming } = useTransformSettling(element)
+
+    // Initially not transforming
+    expect(isTransforming.value).toBe(false)
+
+    // Dispatch wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Should be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time but not past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay (default 200ms)
+    vi.advanceTimersByTime(150)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should reset settle timer on subsequent wheel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      settleDelay: 300
+    })
+
+    // First wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time partially
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Another wheel event should reset the timer
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Advance 200ms more - should still be transforming
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Need another 100ms to settle (300ms total from last event)
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should track pan events when trackPan is enabled', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      settleDelay: 200
+    })
+
+    // Pointer down should start transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Pointer move should keep it active
+    vi.advanceTimersByTime(100)
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    // Should still be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Pointer up
+    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+    await nextTick()
+
+    // Should still be transforming until settle delay
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should not track pan events when trackPan is disabled', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: false
+    })
+
+    // Pointer events should not trigger transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should handle pointer cancel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      settleDelay: 200
+    })
+
+    // Start panning
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Cancel instead of up
+    element.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
+    await nextTick()
+
+    // Should still settle normally
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should work with ref target', async () => {
+    const targetRef = ref<HTMLElement | null>(null)
+    const { isTransforming } = useTransformSettling(targetRef)
+
+    // No target yet
+    expect(isTransforming.value).toBe(false)
+
+    // Set target
+    targetRef.value = element
+    await nextTick()
+
+    // Now events should work
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should use capture phase for events', async () => {
+    const captureHandler = vi.fn()
+    const bubbleHandler = vi.fn()
+
+    // Add handlers to verify capture phase
+    element.addEventListener('wheel', captureHandler, true)
+    element.addEventListener('wheel', bubbleHandler, false)
+
+    const { isTransforming } = useTransformSettling(element)
+
+    // Create child element
+    const child = document.createElement('div')
+    element.appendChild(child)
+
+    // Dispatch event on child
+    child.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Capture handler should be called before bubble handler
+    expect(captureHandler).toHaveBeenCalled()
+    expect(isTransforming.value).toBe(true)
+
+    element.removeEventListener('wheel', captureHandler, true)
+    element.removeEventListener('wheel', bubbleHandler, false)
+  })
+
+  it('should throttle pointer move events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      pointerMoveThrottle: 50,
+      settleDelay: 100
+    })
+
+    // Start panning
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    // Fire many pointer move events rapidly
+    for (let i = 0; i < 10; i++) {
+      element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+      vi.advanceTimersByTime(5) // 5ms between events
+    }
+    await nextTick()
+
+    // Should still be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // End panning
+    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should clean up event listeners when component unmounts', async () => {
+    const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener')
+
+    // Create a test component
+    const TestComponent = {
+      setup() {
+        const { isTransforming } = useTransformSettling(element, {
+          trackPan: true
+        })
+        return { isTransforming }
+      },
+      template: '<div>{{ isTransforming }}</div>'
+    }
+
+    const wrapper = mount(TestComponent)
+    await nextTick()
+
+    // Unmount component
+    wrapper.unmount()
+
+    // Should have removed all event listeners
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointerdown',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointermove',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointerup',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointercancel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+  })
+
+  it('should use passive listeners when specified', async () => {
+    const addEventListenerSpy = vi.spyOn(element, 'addEventListener')
+
+    useTransformSettling(element, {
+      passive: true,
+      trackPan: true
+    })
+
+    // Check that passive option was used for appropriate events
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'pointermove',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useWidgetValue.test.ts b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
new file mode 100644
index 000000000..155723074
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
@@ -0,0 +1,503 @@
+import {
+  type MockedFunction,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest'
+import { ref } from 'vue'
+
+import {
+  useBooleanWidgetValue,
+  useNumberWidgetValue,
+  useStringWidgetValue,
+  useWidgetValue
+} from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+describe('useWidgetValue', () => {
+  let mockWidget: SimplifiedWidget<string>
+  let mockEmit: MockedFunction<(event: 'update:modelValue', value: any) => void>
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    mockWidget = {
+      name: 'testWidget',
+      type: 'string',
+      value: 'initial',
+      callback: vi.fn()
+    }
+    mockEmit = vi.fn()
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+  })
+
+  describe('basic functionality', () => {
+    it('should initialize with modelValue', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'test value',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('test value')
+    })
+
+    it('should use defaultValue when modelValue is null', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: null as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('default')
+    })
+
+    it('should use defaultValue when modelValue is undefined', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: undefined as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('default')
+    })
+  })
+
+  describe('onChange handler', () => {
+    it('should update localValue immediately', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('new value')
+      expect(localValue.value).toBe('new value')
+    })
+
+    it('should emit update:modelValue event', () => {
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('new value')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    })
+
+    // useGraphNodeMaanger's createWrappedWidgetCallback makes the callback right now instead of useWidgetValue
+    // it('should call widget callback if it exists', () => {
+    //   const { onChange } = useWidgetValue({
+    //     widget: mockWidget,
+    //     modelValue: 'initial',
+    //     defaultValue: '',
+    //     emit: mockEmit
+    //   })
+
+    //   onChange('new value')
+    //   expect(mockWidget.callback).toHaveBeenCalledWith('new value')
+    // })
+
+    it('should not error if widget callback is undefined', () => {
+      const widgetWithoutCallback = { ...mockWidget, callback: undefined }
+      const { onChange } = useWidgetValue({
+        widget: widgetWithoutCallback,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(() => onChange('new value')).not.toThrow()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    })
+
+    it('should handle null values', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      onChange(null as any)
+      expect(localValue.value).toBe('default')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+    })
+
+    it('should handle undefined values', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      onChange(undefined as any)
+      expect(localValue.value).toBe('default')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+    })
+  })
+
+  describe('type safety', () => {
+    it('should handle type mismatches with warning', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit
+      })
+
+      // Pass string to number widget
+      onChange('not a number' as any)
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'useWidgetValue: Type mismatch for widget numberWidget. Expected number, got string'
+      )
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0) // Uses defaultValue
+    })
+
+    it('should accept values of matching type', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit
+      })
+
+      onChange(25)
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 25)
+    })
+  })
+
+  describe('transform function', () => {
+    it('should apply transform function to new values', () => {
+      const transform = vi.fn((value: string) => value.toUpperCase())
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit,
+        transform
+      })
+
+      onChange('hello')
+      expect(transform).toHaveBeenCalledWith('hello')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'HELLO')
+    })
+
+    it('should skip type checking when transform is provided', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const transform = (value: string) => parseInt(value, 10) || 0
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit,
+        transform
+      })
+
+      onChange('123')
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 123)
+    })
+  })
+
+  describe('external updates', () => {
+    it('should update localValue when modelValue changes', async () => {
+      const modelValue = ref('initial')
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value,
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('initial')
+
+      // Simulate parent updating modelValue
+      modelValue.value = 'updated externally'
+
+      // Re-create the composable with new value (simulating prop change)
+      const { localValue: newLocalValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value,
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(newLocalValue.value).toBe('updated externally')
+    })
+
+    it('should handle external null values', async () => {
+      const modelValue = ref<string | null>('initial')
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value!,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('initial')
+
+      // Simulate external update to null
+      modelValue.value = null
+      const { localValue: newLocalValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(newLocalValue.value).toBe('default')
+    })
+  })
+
+  describe('useStringWidgetValue helper', () => {
+    it('should handle string values correctly', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: 'hello',
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useStringWidgetValue(
+        stringWidget,
+        'initial',
+        mockEmit
+      )
+
+      expect(localValue.value).toBe('initial')
+
+      onChange('new string')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new string')
+    })
+
+    it('should transform undefined to empty string', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: '',
+        callback: vi.fn()
+      }
+
+      const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+      onChange(undefined as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '')
+    })
+
+    it('should convert non-string values to string', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: '',
+        callback: vi.fn()
+      }
+
+      const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+      onChange(123 as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '123')
+    })
+  })
+
+  describe('useNumberWidgetValue helper', () => {
+    it('should handle number values correctly', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useNumberWidgetValue(
+        numberWidget,
+        25,
+        mockEmit
+      )
+
+      expect(localValue.value).toBe(25)
+
+      onChange(75)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 75)
+    })
+
+    it('should handle array values from PrimeVue Slider', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+      // PrimeVue Slider can emit number[]
+      onChange([42, 100] as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+    })
+
+    it('should handle empty array', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+      onChange([] as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+    })
+
+    it('should convert string numbers', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 0,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+      onChange('42' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+    })
+
+    it('should handle invalid number conversions', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 0,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+      onChange('not-a-number' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+    })
+  })
+
+  describe('useBooleanWidgetValue helper', () => {
+    it('should handle boolean values correctly', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useBooleanWidgetValue(
+        boolWidget,
+        true,
+        mockEmit
+      )
+
+      expect(localValue.value).toBe(true)
+
+      onChange(false)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+    })
+
+    it('should convert truthy values to true', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useBooleanWidgetValue(boolWidget, false, mockEmit)
+
+      onChange('truthy' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', true)
+    })
+
+    it('should convert falsy values to false', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useBooleanWidgetValue(boolWidget, true, mockEmit)
+
+      onChange(0 as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle rapid onChange calls', () => {
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('value1')
+      onChange('value2')
+      onChange('value3')
+
+      expect(mockEmit).toHaveBeenCalledTimes(3)
+      expect(mockEmit).toHaveBeenNthCalledWith(1, 'update:modelValue', 'value1')
+      expect(mockEmit).toHaveBeenNthCalledWith(2, 'update:modelValue', 'value2')
+      expect(mockEmit).toHaveBeenNthCalledWith(3, 'update:modelValue', 'value3')
+    })
+
+    it('should handle widget with all properties undefined', () => {
+      const minimalWidget = {
+        name: 'minimal',
+        type: 'unknown'
+      } as SimplifiedWidget<any>
+
+      const { localValue, onChange } = useWidgetValue({
+        widget: minimalWidget,
+        modelValue: 'test',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('test')
+      expect(() => onChange('new')).not.toThrow()
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index dbd40a731..6cd76cb75 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -505,7 +505,7 @@ describe('useNodePricing', () => {
   })
 
   describe('dynamic pricing - Veo3VideoGenerationNode', () => {
-    it('should return $2.00 for veo-3.0-fast-generate-001 without audio', () => {
+    it('should return $0.80 for veo-3.0-fast-generate-001 without audio', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('Veo3VideoGenerationNode', [
         { name: 'model', value: 'veo-3.0-fast-generate-001' },
@@ -513,49 +513,49 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$2.00/Run')
+      expect(price).toBe('$0.80/Run')
     })
 
-    it('should return $3.20 for veo-3.0-fast-generate-001 with audio', () => {
+    it('should return $1.20 for veo-3.0-fast-generate-001 with audio', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('Veo3VideoGenerationNode', [
         { name: 'model', value: 'veo-3.0-fast-generate-001' },
         { name: 'generate_audio', value: true }
       ])
 
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.20/Run')
+    })
+
+    it('should return $1.60 for veo-3.0-generate-001 without audio', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('Veo3VideoGenerationNode', [
+        { name: 'model', value: 'veo-3.0-generate-001' },
+        { name: 'generate_audio', value: false }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.60/Run')
+    })
+
+    it('should return $3.20 for veo-3.0-generate-001 with audio', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('Veo3VideoGenerationNode', [
+        { name: 'model', value: 'veo-3.0-generate-001' },
+        { name: 'generate_audio', value: true }
+      ])
+
       const price = getNodeDisplayPrice(node)
       expect(price).toBe('$3.20/Run')
     })
 
-    it('should return $4.00 for veo-3.0-generate-001 without audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' },
-        { name: 'generate_audio', value: false }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$4.00/Run')
-    })
-
-    it('should return $6.00 for veo-3.0-generate-001 with audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' },
-        { name: 'generate_audio', value: true }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$6.00/Run')
-    })
-
     it('should return range when widgets are missing', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('Veo3VideoGenerationNode', [])
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$2.00-6.00/Run (varies with model & audio generation)'
+        '$0.80-3.20/Run (varies with model & audio generation)'
       )
     })
 
@@ -567,7 +567,7 @@ describe('useNodePricing', () => {
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$2.00-6.00/Run (varies with model & audio generation)'
+        '$0.80-3.20/Run (varies with model & audio generation)'
       )
     })
 
@@ -579,7 +579,7 @@ describe('useNodePricing', () => {
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$2.00-6.00/Run (varies with model & audio generation)'
+        '$0.80-3.20/Run (varies with model & audio generation)'
       )
     })
   })
@@ -1781,6 +1781,38 @@ describe('useNodePricing', () => {
     })
   })
 
+  describe('dynamic pricing - ByteDanceSeedreamNode', () => {
+    it('should return fallback when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceSeedreamNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.03/Run ($0.03 for one output image)')
+    })
+
+    it('should return $0.03/Run when sequential generation is disabled', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceSeedreamNode', [
+        { name: 'sequential_image_generation', value: 'disabled' },
+        { name: 'max_images', value: 5 }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.03/Run')
+    })
+
+    it('should multiply by max_images when sequential generation is enabled', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceSeedreamNode', [
+        { name: 'sequential_image_generation', value: 'enabled' },
+        { name: 'max_images', value: 4 }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.12/Run ($0.03 for one output image)')
+    })
+  })
+
   describe('dynamic pricing - ByteDance Seedance video nodes', () => {
     it('should return base 10s range for PRO 1080p on ByteDanceTextToVideoNode', () => {
       const { getNodeDisplayPrice } = useNodePricing()
diff --git a/tests-ui/tests/composables/useConflictDetection.test.ts b/tests-ui/tests/composables/useConflictDetection.test.ts
index 9dfcb844a..52935f65b 100644
--- a/tests-ui/tests/composables/useConflictDetection.test.ts
+++ b/tests-ui/tests/composables/useConflictDetection.test.ts
@@ -96,7 +96,7 @@ describe.skip('useConflictDetection with Registry Store', () => {
   }
 
   const mockSystemStatsStore = {
-    fetchSystemStats: vi.fn(),
+    refetchSystemStats: vi.fn(),
     systemStats: {
       system: {
         comfyui_version: '0.3.41',
@@ -133,7 +133,7 @@ describe.skip('useConflictDetection with Registry Store', () => {
     } as any
 
     // Reset mock functions
-    mockSystemStatsStore.fetchSystemStats.mockResolvedValue(undefined)
+    mockSystemStatsStore.refetchSystemStats.mockResolvedValue(undefined)
     mockComfyManagerService.listInstalledPacks.mockReset()
     mockComfyManagerService.getImportFailInfo.mockReset()
     mockRegistryService.getPackByVersion.mockReset()
@@ -185,7 +185,7 @@ describe.skip('useConflictDetection with Registry Store', () => {
 
     it('should return fallback environment information when systemStatsStore fails', async () => {
       // Mock systemStatsStore failure
-      mockSystemStatsStore.fetchSystemStats.mockRejectedValue(
+      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
         new Error('Store failure')
       )
       mockSystemStatsStore.systemStats = null
@@ -754,7 +754,7 @@ describe.skip('useConflictDetection with Registry Store', () => {
   describe('error resilience with Registry Store', () => {
     it('should continue execution even when system environment detection fails', async () => {
       // Mock system stats store failure
-      mockSystemStatsStore.fetchSystemStats.mockRejectedValue(
+      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
         new Error('Store error')
       )
       mockSystemStatsStore.systemStats = null
@@ -851,7 +851,7 @@ describe.skip('useConflictDetection with Registry Store', () => {
 
     it('should handle complete system failure gracefully', async () => {
       // Mock all stores/services failing
-      mockSystemStatsStore.fetchSystemStats.mockRejectedValue(
+      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
         new Error('Critical error')
       )
       mockSystemStatsStore.systemStats = null
diff --git a/tests-ui/tests/composables/useCoreCommands.test.ts b/tests-ui/tests/composables/useCoreCommands.test.ts
index a9e801858..f1e796c26 100644
--- a/tests-ui/tests/composables/useCoreCommands.test.ts
+++ b/tests-ui/tests/composables/useCoreCommands.test.ts
@@ -6,17 +6,25 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 
-vi.mock('@/scripts/app', () => ({
-  app: {
-    clean: vi.fn(),
-    canvas: {
-      subgraph: null
-    },
-    graph: {
-      clear: vi.fn()
+vi.mock('@/scripts/app', () => {
+  const mockGraphClear = vi.fn()
+  const mockCanvas = { subgraph: undefined }
+
+  return {
+    app: {
+      clean: vi.fn(() => {
+        // Simulate app.clean() calling graph.clear() only when not in subgraph
+        if (!mockCanvas.subgraph) {
+          mockGraphClear()
+        }
+      }),
+      canvas: mockCanvas,
+      graph: {
+        clear: mockGraphClear
+      }
     }
   }
-}))
+})
 
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -65,6 +73,10 @@ vi.mock('@/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({}))
 }))
 
+vi.mock('@/stores/subgraphStore', () => ({
+  useSubgraphStore: vi.fn(() => ({}))
+}))
+
 vi.mock('@/stores/workspace/colorPaletteStore', () => ({
   useColorPaletteStore: vi.fn(() => ({}))
 }))
diff --git a/tests-ui/tests/composables/widgets/useManagerQueue.test.ts b/tests-ui/tests/composables/useManagerQueue.test.ts
similarity index 72%
rename from tests-ui/tests/composables/widgets/useManagerQueue.test.ts
rename to tests-ui/tests/composables/useManagerQueue.test.ts
index 964c0686b..0d9313446 100644
--- a/tests-ui/tests/composables/widgets/useManagerQueue.test.ts
+++ b/tests-ui/tests/composables/useManagerQueue.test.ts
@@ -161,5 +161,62 @@ describe('useManagerQueue', () => {
       expect(taskHistory.value).toHaveProperty('task1')
       expect(taskHistory.value).not.toHaveProperty('task2')
     })
+
+    it('normalizes pack IDs when updating installed packs', () => {
+      const queue = createManagerQueue()
+
+      const mockState = {
+        history: {},
+        running_queue: [],
+        pending_queue: [],
+        installed_packs: {
+          'ComfyUI-GGUF@1_1_4': {
+            enabled: false,
+            cnr_id: 'ComfyUI-GGUF',
+            ver: '1.1.4'
+          },
+          'test-pack': {
+            enabled: true,
+            cnr_id: 'test-pack',
+            ver: '2.0.0'
+          }
+        }
+      }
+
+      queue.updateTaskState(mockState)
+
+      // Packs should be accessible by normalized keys
+      expect(installedPacks.value['ComfyUI-GGUF']).toEqual({
+        enabled: false,
+        cnr_id: 'ComfyUI-GGUF',
+        ver: '1.1.4'
+      })
+      expect(installedPacks.value['test-pack']).toEqual({
+        enabled: true,
+        cnr_id: 'test-pack',
+        ver: '2.0.0'
+      })
+
+      // Version suffixed keys should not exist after normalization
+      // The pack should be accessible by its base name only (without @version)
+      expect(installedPacks.value['ComfyUI-GGUF@1_1_4']).toBeUndefined()
+    })
+
+    it('handles empty installed_packs gracefully', () => {
+      const queue = createManagerQueue()
+
+      const mockState: any = {
+        history: {},
+        running_queue: [],
+        pending_queue: [],
+        installed_packs: undefined
+      }
+
+      // Just call the function - if it throws, the test will fail automatically
+      queue.updateTaskState(mockState)
+
+      // installedPacks should remain unchanged
+      expect(installedPacks.value).toEqual({})
+    })
   })
 })
diff --git a/tests-ui/tests/composables/useManagerState.test.ts b/tests-ui/tests/composables/useManagerState.test.ts
new file mode 100644
index 000000000..dafb48a6f
--- /dev/null
+++ b/tests-ui/tests/composables/useManagerState.test.ts
@@ -0,0 +1,320 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { ManagerUIState, useManagerState } from '@/composables/useManagerState'
+import { api } from '@/scripts/api'
+import { useExtensionStore } from '@/stores/extensionStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+// Mock dependencies
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getClientFeatureFlags: vi.fn(),
+    getServerFeature: vi.fn()
+  }
+}))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: { supportsManagerV4: false },
+    featureFlag: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/extensionStore', () => ({
+  useExtensionStore: vi.fn()
+}))
+
+vi.mock('@/stores/systemStatsStore', () => ({
+  useSystemStatsStore: vi.fn()
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => ({
+    showManagerPopup: vi.fn(),
+    showLegacyManagerPopup: vi.fn(),
+    showSettingsDialog: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: vi.fn(() => ({
+    execute: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+  useToastStore: vi.fn(() => ({
+    add: vi.fn()
+  }))
+}))
+
+describe('useManagerState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('managerUIState property', () => {
+    it('should return DISABLED state when --disable-manager is present', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--disable-manager'] }
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.DISABLED)
+    })
+
+    it('should return LEGACY_UI state when --enable-manager-legacy-ui is present', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should return NEW_UI state when client and server both support v4', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: true },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
+    })
+
+    it('should return LEGACY_UI state when server supports v4 but client does not', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: false
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: true },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should return LEGACY_UI state when legacy manager extension exists', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: false },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: [{ name: 'Comfy.CustomNodesManager' }]
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should return NEW_UI state when server feature flags are undefined', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(undefined)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: undefined },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
+    })
+
+    it('should return LEGACY_UI state when server does not support v4', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(false)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: false },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should handle null systemStats gracefully', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref(null),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: true },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
+    })
+  })
+
+  describe('helper properties', () => {
+    it('isManagerEnabled should return true when state is not DISABLED', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isManagerEnabled.value).toBe(true)
+    })
+
+    it('isManagerEnabled should return false when state is DISABLED', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--disable-manager'] }
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isManagerEnabled.value).toBe(false)
+    })
+
+    it('isNewManagerUI should return true when state is NEW_UI', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isNewManagerUI.value).toBe(true)
+    })
+
+    it('isLegacyManagerUI should return true when state is LEGACY_UI', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isLegacyManagerUI.value).toBe(true)
+    })
+
+    it('shouldShowInstallButton should return true only for NEW_UI', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.shouldShowInstallButton.value).toBe(true)
+    })
+
+    it('shouldShowManagerButtons should return true when not DISABLED', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.shouldShowManagerButtons.value).toBe(true)
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/useNodeChatHistory.test.ts b/tests-ui/tests/composables/useNodeChatHistory.test.ts
index 6a6ecc6c5..0b47fabb6 100644
--- a/tests-ui/tests/composables/useNodeChatHistory.test.ts
+++ b/tests-ui/tests/composables/useNodeChatHistory.test.ts
@@ -3,23 +3,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-vi.mock('@/composables/widgets/useChatHistoryWidget', () => ({
-  useChatHistoryWidget: () => {
-    return (node: any, inputSpec: any) => {
-      const widget = {
-        name: inputSpec.name,
-        type: inputSpec.type
-      }
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',
+  () => ({
+    useChatHistoryWidget: () => {
+      return (node: any, inputSpec: any) => {
+        const widget = {
+          name: inputSpec.name,
+          type: inputSpec.type
+        }
 
-      if (!node.widgets) {
-        node.widgets = []
-      }
-      node.widgets.push(widget)
+        if (!node.widgets) {
+          node.widgets = []
+        }
+        node.widgets.push(widget)
 
-      return widget
+        return widget
+      }
     }
-  }
-}))
+  })
+)
 
 // Mock LGraphNode type
 type MockNode = {
diff --git a/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts b/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
index f574b5fe7..3e88963d6 100644
--- a/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
+++ b/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
@@ -63,12 +63,14 @@ describe('useUpdateAvailableNodes', () => {
   const mockStartFetchInstalled = vi.fn()
   const mockIsPackInstalled = vi.fn()
   const mockGetInstalledPackVersion = vi.fn()
+  const mockIsPackEnabled = vi.fn()
 
   beforeEach(() => {
     vi.clearAllMocks()
 
     // Default setup
     mockIsPackInstalled.mockReturnValue(true)
+    mockIsPackEnabled.mockReturnValue(true) // Default: all packs are enabled
     mockGetInstalledPackVersion.mockImplementation((id: string) => {
       switch (id) {
         case 'pack-1':
@@ -100,7 +102,8 @@ describe('useUpdateAvailableNodes', () => {
 
     mockUseComfyManagerStore.mockReturnValue({
       isPackInstalled: mockIsPackInstalled,
-      getInstalledPackVersion: mockGetInstalledPackVersion
+      getInstalledPackVersion: mockGetInstalledPackVersion,
+      isPackEnabled: mockIsPackEnabled
     } as any)
 
     mockUseInstalledPacks.mockReturnValue({
@@ -357,4 +360,127 @@ describe('useUpdateAvailableNodes', () => {
       expect(mockIsPackInstalled).toHaveBeenCalledWith('pack-4')
     })
   })
+
+  describe('enabledUpdateAvailableNodePacks', () => {
+    it('returns only enabled packs with updates', () => {
+      mockIsPackEnabled.mockImplementation((id: string) => {
+        // pack-1 is disabled
+        return id !== 'pack-1'
+      })
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0], mockInstalledPacks[1]]),
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
+        useUpdateAvailableNodes()
+
+      // pack-1 has updates but is disabled
+      expect(updateAvailableNodePacks.value).toHaveLength(1)
+      expect(updateAvailableNodePacks.value[0].id).toBe('pack-1')
+
+      // enabledUpdateAvailableNodePacks should be empty
+      expect(enabledUpdateAvailableNodePacks.value).toHaveLength(0)
+    })
+
+    it('returns all packs when all are enabled', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
+        useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toHaveLength(1)
+      expect(enabledUpdateAvailableNodePacks.value).toHaveLength(1)
+      expect(enabledUpdateAvailableNodePacks.value[0].id).toBe('pack-1')
+    })
+  })
+
+  describe('hasDisabledUpdatePacks', () => {
+    it('returns true when there are disabled packs with updates', () => {
+      mockIsPackEnabled.mockImplementation((id: string) => {
+        // pack-1 is disabled
+        return id !== 'pack-1'
+      })
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
+
+      expect(hasDisabledUpdatePacks.value).toBe(true)
+    })
+
+    it('returns false when all packs with updates are enabled', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
+
+      expect(hasDisabledUpdatePacks.value).toBe(false)
+    })
+
+    it('returns false when no packs have updates', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
+
+      expect(hasDisabledUpdatePacks.value).toBe(false)
+    })
+  })
+
+  describe('hasUpdateAvailable with disabled packs', () => {
+    it('returns false when only disabled packs have updates', () => {
+      mockIsPackEnabled.mockReturnValue(false) // All packs disabled
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { hasUpdateAvailable } = useUpdateAvailableNodes()
+
+      expect(hasUpdateAvailable.value).toBe(false)
+    })
+
+    it('returns true when at least one enabled pack has updates', () => {
+      mockIsPackEnabled.mockImplementation((id: string) => {
+        // Only pack-1 is enabled
+        return id === 'pack-1'
+      })
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled
+      } as any)
+
+      const { hasUpdateAvailable } = useUpdateAvailableNodes()
+
+      expect(hasUpdateAvailable.value).toBe(true)
+    })
+  })
 })
diff --git a/tests-ui/tests/composables/widgets/useComboWidget.test.ts b/tests-ui/tests/composables/widgets/useComboWidget.test.ts
deleted file mode 100644
index cbdd74bab..000000000
--- a/tests-ui/tests/composables/widgets/useComboWidget.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useComboWidget } from '@/composables/widgets/useComboWidget'
-import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-
-vi.mock('@/scripts/widgets', () => ({
-  addValueControlWidgets: vi.fn()
-}))
-
-describe('useComboWidget', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should handle undefined spec', () => {
-    const constructor = useComboWidget()
-    const mockNode = {
-      addWidget: vi.fn().mockReturnValue({ options: {} } as any)
-    }
-
-    const inputSpec: InputSpec = {
-      type: 'COMBO',
-      name: 'inputName'
-    }
-
-    const widget = constructor(mockNode as any, inputSpec)
-
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'combo',
-      'inputName',
-      undefined, // default value
-      expect.any(Function), // callback
-      expect.objectContaining({
-        values: []
-      })
-    )
-    expect(widget).toEqual({ options: {} })
-  })
-})
diff --git a/tests-ui/tests/litegraph/core/LGraph.test.ts b/tests-ui/tests/litegraph/core/LGraph.test.ts
index 15d9d4efe..61d3da734 100644
--- a/tests-ui/tests/litegraph/core/LGraph.test.ts
+++ b/tests-ui/tests/litegraph/core/LGraph.test.ts
@@ -1,6 +1,6 @@
 import { describe } from 'vitest'
 
-import { LGraph, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 
 import { test } from './fixtures/testExtensions'
 
@@ -128,6 +128,54 @@ describe('Floating Links / Reroutes', () => {
   })
 })
 
+describe('Graph Clearing and Callbacks', () => {
+  test('clear() calls both node.onRemoved() and graph.onNodeRemoved()', ({
+    expect
+  }) => {
+    const graph = new LGraph()
+
+    // Create test nodes with onRemoved callbacks
+    const node1 = new LGraphNode('TestNode1')
+    const node2 = new LGraphNode('TestNode2')
+
+    // Add nodes to graph
+    graph.add(node1)
+    graph.add(node2)
+
+    // Track callback invocations
+    const nodeRemovedCallbacks = new Set<string>()
+    const graphRemovedCallbacks = new Set<string>()
+
+    // Set up node.onRemoved() callbacks
+    node1.onRemoved = () => {
+      nodeRemovedCallbacks.add(String(node1.id))
+    }
+    node2.onRemoved = () => {
+      nodeRemovedCallbacks.add(String(node2.id))
+    }
+
+    // Set up graph.onNodeRemoved() callback
+    graph.onNodeRemoved = (node) => {
+      graphRemovedCallbacks.add(String(node.id))
+    }
+
+    // Verify nodes are in graph before clearing
+    expect(graph.nodes.length).toBe(2)
+
+    // Clear the graph
+    graph.clear()
+
+    // Verify both types of callbacks were called
+    expect(nodeRemovedCallbacks).toContain(String(node1.id))
+    expect(nodeRemovedCallbacks).toContain(String(node2.id))
+    expect(graphRemovedCallbacks).toContain(String(node1.id))
+    expect(graphRemovedCallbacks).toContain(String(node2.id))
+
+    // Verify nodes were actually removed
+    expect(graph.nodes.length).toBe(0)
+  })
+})
+
 describe('Legacy LGraph Compatibility Layer', () => {
   test('can be extended via prototype', ({ expect, minimalGraph }) => {
     // @ts-expect-error Should always be an error.
diff --git a/tests-ui/tests/litegraph/core/LGraphNode.test.ts b/tests-ui/tests/litegraph/core/LGraphNode.test.ts
index aaf3fe59e..3eb38215f 100644
--- a/tests-ui/tests/litegraph/core/LGraphNode.test.ts
+++ b/tests-ui/tests/litegraph/core/LGraphNode.test.ts
@@ -621,39 +621,10 @@ describe('LGraphNode', () => {
       expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY])
       delete (node.constructor as any).slot_start_y
     })
-  })
-
-  describe('getInputPos', () => {
-    test('should call getInputSlotPos with the correct input slot from inputs array', () => {
-      const input0: INodeInputSlot = {
-        name: 'in0',
-        type: 'string',
-        link: null,
-        boundingRect: new Float32Array([0, 0, 0, 0])
-      }
-      const input1: INodeInputSlot = {
-        name: 'in1',
-        type: 'number',
-        link: null,
-        boundingRect: new Float32Array([0, 0, 0, 0]),
-        pos: [5, 45]
-      }
-      node.inputs = [input0, input1]
-      const spy = vi.spyOn(node, 'getInputSlotPos')
-      node.getInputPos(1)
-      expect(spy).toHaveBeenCalledWith(input1)
-      const expectedPos: Point = [100 + 5, 200 + 45]
-      expect(node.getInputPos(1)).toEqual(expectedPos)
-      spy.mockClear()
-      node.getInputPos(0)
-      expect(spy).toHaveBeenCalledWith(input0)
-      const slotIndex = 0
-      const nodeOffsetY = (node.constructor as any).slot_start_y || 0
-      const expectedDefaultY =
-        200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
-      const expectedDefaultX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
-      expect(node.getInputPos(0)).toEqual([expectedDefaultX, expectedDefaultY])
-      spy.mockRestore()
+    test('should not overwrite onMouseDown prototype', () => {
+      expect(Object.prototype.hasOwnProperty.call(node, 'onMouseDown')).toEqual(
+        false
+      )
     })
   })
 })
diff --git a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
index 2f63410fb..1ce83fb46 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
@@ -62,6 +62,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -133,6 +134,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -205,6 +207,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
diff --git a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
index b69165d8d..d45626827 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
@@ -102,16 +102,7 @@ LiteGraphGlobal {
   "Reroute": [Function],
   "SPLINE_LINK": 2,
   "STRAIGHT_LINK": 0,
-  "SlotDirection": {
-    "1": "Up",
-    "2": "Down",
-    "3": "Left",
-    "4": "Right",
-    "Down": 2,
-    "Left": 3,
-    "Right": 4,
-    "Up": 1,
-  },
+  "SlotDirection": {},
   "SlotShape": {
     "1": "Box",
     "3": "Circle",
@@ -199,5 +190,6 @@ LiteGraphGlobal {
   "truncateWidgetValuesFirst": false,
   "use_uuids": false,
   "uuidv4": [Function],
+  "vueNodesMode": false,
 }
 `;
diff --git a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
index e4a255b2f..b90a781e2 100644
--- a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
+++ b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
@@ -16,7 +16,7 @@ import {
   createTestSubgraphNode
 } from './subgraphHelpers'
 
-export interface SubgraphFixtures {
+interface SubgraphFixtures {
   /** A minimal subgraph with no inputs, outputs, or nodes */
   emptySubgraph: Subgraph
 
@@ -169,140 +169,3 @@ export const subgraphTest = test.extend<SubgraphFixtures>({
     capture.cleanup()
   }
 })
-
-/**
- * Fixtures that test edge cases and error conditions.
- * These may leave the system in an invalid state and should be used carefully.
- */
-export interface EdgeCaseFixtures {
-  /** Subgraph with circular references (for testing recursion detection) */
-  circularSubgraph: {
-    rootGraph: LGraph
-    subgraphA: Subgraph
-    subgraphB: Subgraph
-    nodeA: SubgraphNode
-    nodeB: SubgraphNode
-  }
-
-  /** Deeply nested subgraphs approaching the theoretical limit */
-  deeplyNestedSubgraph: ReturnType<typeof createNestedSubgraphs>
-
-  /** Subgraph with maximum inputs and outputs */
-  maxIOSubgraph: Subgraph
-}
-
-/**
- * Test with edge case fixtures. Use sparingly and with caution.
- * These tests may intentionally create invalid states.
- */
-export const edgeCaseTest = subgraphTest.extend<EdgeCaseFixtures>({
-  // @ts-expect-error TODO: Fix after merge - fixture use parameter type
-  // eslint-disable-next-line no-empty-pattern
-  circularSubgraph: async ({}, use: (value: unknown) => Promise<void>) => {
-    const rootGraph = new LGraph()
-
-    // Create two subgraphs that will reference each other
-    const subgraphA = createTestSubgraph({
-      name: 'Subgraph A',
-      inputs: [{ name: 'input', type: '*' }],
-      outputs: [{ name: 'output', type: '*' }]
-    })
-
-    const subgraphB = createTestSubgraph({
-      name: 'Subgraph B',
-      inputs: [{ name: 'input', type: '*' }],
-      outputs: [{ name: 'output', type: '*' }]
-    })
-
-    // Create instances (this doesn't create circular refs by itself)
-    const nodeA = createTestSubgraphNode(subgraphA, { pos: [100, 100] })
-    const nodeB = createTestSubgraphNode(subgraphB, { pos: [300, 100] })
-
-    // Add nodes to root graph
-    rootGraph.add(nodeA)
-    rootGraph.add(nodeB)
-
-    await use({
-      rootGraph,
-      subgraphA,
-      subgraphB,
-      nodeA,
-      nodeB
-    })
-  },
-
-  // @ts-expect-error TODO: Fix after merge - fixture use parameter type
-  // eslint-disable-next-line no-empty-pattern
-  deeplyNestedSubgraph: async ({}, use: (value: unknown) => Promise<void>) => {
-    // Create a very deep nesting structure (but not exceeding MAX_NESTED_SUBGRAPHS)
-    const nested = createNestedSubgraphs({
-      depth: 50, // Deep but reasonable
-      nodesPerLevel: 1,
-      inputsPerSubgraph: 1,
-      outputsPerSubgraph: 1
-    })
-
-    await use(nested)
-  },
-
-  // @ts-expect-error TODO: Fix after merge - fixture use parameter type
-  // eslint-disable-next-line no-empty-pattern
-  maxIOSubgraph: async ({}, use: (value: unknown) => Promise<void>) => {
-    // Create a subgraph with many inputs and outputs
-    const inputs = Array.from({ length: 20 }, (_, i) => ({
-      name: `input_${i}`,
-      type: i % 2 === 0 ? 'number' : ('string' as const)
-    }))
-
-    const outputs = Array.from({ length: 20 }, (_, i) => ({
-      name: `output_${i}`,
-      type: i % 2 === 0 ? 'number' : ('string' as const)
-    }))
-
-    const subgraph = createTestSubgraph({
-      name: 'Max IO Subgraph',
-      inputs,
-      outputs,
-      nodeCount: 10
-    })
-
-    await use(subgraph)
-  }
-})
-
-/**
- * Helper to verify fixture integrity.
- * Use this in tests to ensure fixtures are properly set up.
- */
-export function verifyFixtureIntegrity<T extends Record<string, unknown>>(
-  fixture: T,
-  expectedProperties: (keyof T)[]
-): void {
-  for (const prop of expectedProperties) {
-    if (!(prop in fixture)) {
-      throw new Error(`Fixture missing required property: ${String(prop)}`)
-    }
-    if (fixture[prop] === undefined || fixture[prop] === null) {
-      throw new Error(`Fixture property ${String(prop)} is null or undefined`)
-    }
-  }
-}
-
-/**
- * Creates a snapshot-friendly representation of a subgraph for testing.
- * Useful for serialization tests and regression detection.
- */
-export function createSubgraphSnapshot(subgraph: Subgraph) {
-  return {
-    id: subgraph.id,
-    name: subgraph.name,
-    inputCount: subgraph.inputs.length,
-    outputCount: subgraph.outputs.length,
-    nodeCount: subgraph.nodes.length,
-    linkCount: subgraph.links.size,
-    inputs: subgraph.inputs.map((i) => ({ name: i.name, type: i.type })),
-    outputs: subgraph.outputs.map((o) => ({ name: o.name, type: o.type })),
-    hasInputNode: !!subgraph.inputNode,
-    hasOutputNode: !!subgraph.outputNode
-  }
-}
diff --git a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphHelpers.ts b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphHelpers.ts
index fcf25ce7c..736f979d3 100644
--- a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphHelpers.ts
+++ b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphHelpers.ts
@@ -17,7 +17,7 @@ import type {
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4 } from '@/lib/litegraph/src/utils/uuid'
 
-export interface TestSubgraphOptions {
+interface TestSubgraphOptions {
   id?: UUID
   name?: string
   nodeCount?: number
@@ -27,20 +27,20 @@ export interface TestSubgraphOptions {
   outputs?: Array<{ name: string; type: ISlotType }>
 }
 
-export interface TestSubgraphNodeOptions {
+interface TestSubgraphNodeOptions {
   id?: NodeId
   pos?: [number, number]
   size?: [number, number]
 }
 
-export interface NestedSubgraphOptions {
+interface NestedSubgraphOptions {
   depth?: number
   nodesPerLevel?: number
   inputsPerSubgraph?: number
   outputsPerSubgraph?: number
 }
 
-export interface SubgraphStructureExpectation {
+interface SubgraphStructureExpectation {
   inputCount?: number
   outputCount?: number
   nodeCount?: number
@@ -49,7 +49,7 @@ export interface SubgraphStructureExpectation {
   hasOutputNode?: boolean
 }
 
-export interface CapturedEvent<T = unknown> {
+interface CapturedEvent<T = unknown> {
   type: string
   detail: T
   timestamp: number
@@ -382,76 +382,6 @@ export function createTestSubgraphData(
   }
 }
 
-/**
- * Creates a complex subgraph with multiple nodes and connections.
- * Useful for testing realistic scenarios.
- * @param nodeCount Number of internal nodes to create
- * @returns Complex subgraph data structure
- */
-export function createComplexSubgraphData(
-  nodeCount: number = 5
-): ExportedSubgraph {
-  const nodes = []
-  const links: Record<
-    string,
-    {
-      id: number
-      origin_id: number
-      origin_slot: number
-      target_id: number
-      target_slot: number
-      type: string
-    }
-  > = {}
-
-  // Create internal nodes
-  for (let i = 0; i < nodeCount; i++) {
-    nodes.push({
-      id: i + 1, // Start from 1 to avoid conflicts with IO nodes
-      type: 'basic/test',
-      pos: [100 + i * 150, 200],
-      size: [120, 60],
-      inputs: [{ name: 'in', type: '*', link: null }],
-      outputs: [{ name: 'out', type: '*', links: [] }],
-      properties: { value: i },
-      flags: {},
-      mode: 0
-    })
-  }
-
-  // Create some internal links
-  for (let i = 0; i < nodeCount - 1; i++) {
-    const linkId = i + 1
-    links[linkId] = {
-      id: linkId,
-      origin_id: i + 1,
-      origin_slot: 0,
-      target_id: i + 2,
-      target_slot: 0,
-      type: '*'
-    }
-  }
-
-  return createTestSubgraphData({
-    // @ts-expect-error TODO: Fix after merge - nodes parameter type
-    nodes,
-    // @ts-expect-error TODO: Fix after merge - links parameter type
-    links,
-    inputs: [
-      // @ts-expect-error TODO: Fix after merge - input object type
-      { name: 'input1', type: 'number', pos: [0, 0] },
-      // @ts-expect-error TODO: Fix after merge - input object type
-      { name: 'input2', type: 'string', pos: [0, 1] }
-    ],
-    outputs: [
-      // @ts-expect-error TODO: Fix after merge - output object type
-      { name: 'output1', type: 'number', pos: [0, 0] },
-      // @ts-expect-error TODO: Fix after merge - output object type
-      { name: 'output2', type: 'string', pos: [0, 1] }
-    ]
-  })
-}
-
 /**
  * Creates an event capture system for testing event sequences.
  * @param eventTarget The event target to monitor
@@ -492,40 +422,3 @@ export function createEventCapture<T = unknown>(
       capturedEvents.filter((e) => e.type === type)
   }
 }
-
-/**
- * Utility to log subgraph structure for debugging tests.
- * @param subgraph The subgraph to inspect
- * @param label Optional label for the log output
- */
-export function logSubgraphStructure(
-  subgraph: Subgraph,
-  label: string = 'Subgraph'
-): void {
-  console.log(`\n=== ${label} Structure ===`)
-  console.log(`Name: ${subgraph.name}`)
-  console.log(`ID: ${subgraph.id}`)
-  console.log(`Inputs: ${subgraph.inputs.length}`)
-  console.log(`Outputs: ${subgraph.outputs.length}`)
-  console.log(`Nodes: ${subgraph.nodes.length}`)
-  console.log(`Links: ${subgraph.links.size}`)
-
-  if (subgraph.inputs.length > 0) {
-    console.log(
-      'Input details:',
-      subgraph.inputs.map((i) => ({ name: i.name, type: i.type }))
-    )
-  }
-
-  if (subgraph.outputs.length > 0) {
-    console.log(
-      'Output details:',
-      subgraph.outputs.map((o) => ({ name: o.name, type: o.type }))
-    )
-  }
-
-  console.log('========================\n')
-}
-
-// Re-export expect from vitest for convenience
-export { expect } from 'vitest'
diff --git a/tests-ui/tests/performance/transformPerformance.test.ts b/tests-ui/tests/performance/transformPerformance.test.ts
new file mode 100644
index 000000000..41d8c12c6
--- /dev/null
+++ b/tests-ui/tests/performance/transformPerformance.test.ts
@@ -0,0 +1,483 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
+
+// Mock canvas context for testing
+const createMockCanvasContext = () => ({
+  ds: {
+    offset: [0, 0] as [number, number],
+    scale: 1
+  }
+})
+
+// Skip this entire suite on CI to avoid flaky performance timing
+const isCI = Boolean(process.env.CI)
+const describeIfNotCI = isCI ? describe.skip : describe
+
+describeIfNotCI('Transform Performance', () => {
+  let transformState: ReturnType<typeof useTransformState>
+  let mockCanvas: any
+
+  beforeEach(() => {
+    transformState = useTransformState()
+    mockCanvas = createMockCanvasContext()
+  })
+
+  describe('coordinate conversion performance', () => {
+    it('should handle large batches of coordinate conversions efficiently', () => {
+      // Set up a realistic transform state
+      mockCanvas.ds.offset = [500, 300]
+      mockCanvas.ds.scale = 1.5
+      transformState.syncWithCanvas(mockCanvas)
+
+      const conversionCount = 10000
+      const points = Array.from({ length: conversionCount }, () => ({
+        x: Math.random() * 5000,
+        y: Math.random() * 3000
+      }))
+
+      // Benchmark canvas to screen conversions
+      const canvasToScreenStart = performance.now()
+      const screenPoints = points.map((point) =>
+        transformState.canvasToScreen(point)
+      )
+      const canvasToScreenTime = performance.now() - canvasToScreenStart
+
+      // Benchmark screen to canvas conversions
+      const screenToCanvasStart = performance.now()
+      const backToCanvas = screenPoints.map((point) =>
+        transformState.screenToCanvas(point)
+      )
+      const screenToCanvasTime = performance.now() - screenToCanvasStart
+
+      // Performance expectations
+      expect(canvasToScreenTime).toBeLessThan(20) // 10k conversions in under 20ms
+      expect(screenToCanvasTime).toBeLessThan(20) // 10k conversions in under 20ms
+
+      // Verify accuracy of round-trip conversion
+      const maxError = points.reduce((max, original, i) => {
+        const converted = backToCanvas[i]
+        const errorX = Math.abs(original.x - converted.x)
+        const errorY = Math.abs(original.y - converted.y)
+        return Math.max(max, errorX, errorY)
+      }, 0)
+
+      expect(maxError).toBeLessThan(0.001) // Sub-pixel accuracy
+    })
+
+    it('should maintain performance across different zoom levels', () => {
+      const zoomLevels = [0.1, 0.5, 1.0, 2.0, 5.0, 10.0]
+      const conversionCount = 1000
+      const testPoints = Array.from({ length: conversionCount }, () => ({
+        x: Math.random() * 2000,
+        y: Math.random() * 1500
+      }))
+
+      const performanceResults: number[] = []
+
+      zoomLevels.forEach((scale) => {
+        mockCanvas.ds.scale = scale
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+        testPoints.forEach((point) => {
+          const screen = transformState.canvasToScreen(point)
+          transformState.screenToCanvas(screen)
+        })
+        const duration = performance.now() - startTime
+
+        performanceResults.push(duration)
+      })
+
+      // Performance should be consistent across zoom levels
+      const maxTime = Math.max(...performanceResults)
+      const minTime = Math.min(...performanceResults)
+      const variance = (maxTime - minTime) / minTime
+
+      expect(maxTime).toBeLessThan(20) // All zoom levels under 20ms
+      expect(variance).toBeLessThan(3.0) // Less than 300% variance between zoom levels
+    })
+
+    it('should handle extreme coordinate values efficiently', () => {
+      // Test with very large coordinate values
+      const extremePoints = [
+        { x: -100000, y: -100000 },
+        { x: 100000, y: 100000 },
+        { x: 0, y: 0 },
+        { x: -50000, y: 50000 },
+        { x: 1e6, y: -1e6 }
+      ]
+
+      // Test at extreme zoom levels
+      const extremeScales = [0.001, 1000]
+
+      extremeScales.forEach((scale) => {
+        mockCanvas.ds.scale = scale
+        mockCanvas.ds.offset = [1000, 500]
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+
+        // Convert each point 100 times
+        extremePoints.forEach((point) => {
+          for (let i = 0; i < 100; i++) {
+            const screen = transformState.canvasToScreen(point)
+            transformState.screenToCanvas(screen)
+          }
+        })
+
+        const duration = performance.now() - startTime
+
+        expect(duration).toBeLessThan(5) // Should handle extremes efficiently
+        expect(
+          Number.isFinite(transformState.canvasToScreen(extremePoints[0]).x)
+        ).toBe(true)
+        expect(
+          Number.isFinite(transformState.canvasToScreen(extremePoints[0]).y)
+        ).toBe(true)
+      })
+    })
+  })
+
+  describe('viewport culling performance', () => {
+    it('should efficiently determine node visibility for large numbers of nodes', () => {
+      // Set up realistic viewport
+      const viewport = { width: 1920, height: 1080 }
+
+      // Generate many node positions
+      const nodeCount = 1000
+      const nodes = Array.from({ length: nodeCount }, () => ({
+        pos: [Math.random() * 10000, Math.random() * 6000] as ArrayLike<number>,
+        size: [
+          150 + Math.random() * 100,
+          100 + Math.random() * 50
+        ] as ArrayLike<number>
+      }))
+
+      // Test at different zoom levels and positions
+      const testConfigs = [
+        { scale: 0.5, offset: [0, 0] },
+        { scale: 1.0, offset: [2000, 1000] },
+        { scale: 2.0, offset: [-1000, -500] }
+      ]
+
+      testConfigs.forEach((config) => {
+        mockCanvas.ds.scale = config.scale
+        mockCanvas.ds.offset = config.offset
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+
+        // Test viewport culling for all nodes
+        const visibleNodes = nodes.filter((node) =>
+          transformState.isNodeInViewport(node.pos, node.size, viewport)
+        )
+
+        const cullTime = performance.now() - startTime
+
+        expect(cullTime).toBeLessThan(10) // 1000 nodes culled in under 10ms
+        expect(visibleNodes.length).toBeLessThan(nodeCount) // Some culling should occur
+        expect(visibleNodes.length).toBeGreaterThanOrEqual(0) // Sanity check
+      })
+    })
+
+    it('should optimize culling with adaptive margins', () => {
+      const viewport = { width: 1280, height: 720 }
+      const testNode = {
+        pos: [1300, 100] as ArrayLike<number>, // Just outside viewport
+        size: [200, 100] as ArrayLike<number>
+      }
+
+      // Test margin adaptation at different zoom levels
+      const zoomTests = [
+        { scale: 0.05, expectedVisible: true }, // Low zoom, larger margin
+        { scale: 1.0, expectedVisible: true }, // Normal zoom, standard margin
+        { scale: 4.0, expectedVisible: false } // High zoom, tighter margin
+      ]
+
+      const marginTests: boolean[] = []
+      const timings: number[] = []
+
+      zoomTests.forEach((test) => {
+        mockCanvas.ds.scale = test.scale
+        mockCanvas.ds.offset = [0, 0]
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+        const isVisible = transformState.isNodeInViewport(
+          testNode.pos,
+          testNode.size,
+          viewport,
+          0.2 // 20% margin
+        )
+        const duration = performance.now() - startTime
+
+        marginTests.push(isVisible)
+        timings.push(duration)
+      })
+
+      // All culling operations should be very fast
+      timings.forEach((time) => {
+        expect(time).toBeLessThan(0.1) // Individual culling under 0.1ms
+      })
+
+      // Verify adaptive behavior (margins should work as expected)
+      expect(marginTests[0]).toBe(zoomTests[0].expectedVisible)
+      expect(marginTests[2]).toBe(zoomTests[2].expectedVisible)
+    })
+
+    it('should handle size-based culling efficiently', () => {
+      // Test nodes of various sizes
+      const nodeSizes = [
+        [1, 1], // Tiny node
+        [5, 5], // Small node
+        [50, 50], // Medium node
+        [200, 100], // Large node
+        [500, 300] // Very large node
+      ]
+
+      const viewport = { width: 1920, height: 1080 }
+
+      // Position all nodes in viewport center
+      const centerPos = [960, 540] as ArrayLike<number>
+
+      nodeSizes.forEach((size) => {
+        // Test at very low zoom where size culling should activate
+        mockCanvas.ds.scale = 0.01 // Very low zoom
+        transformState.syncWithCanvas(mockCanvas)
+
+        const startTime = performance.now()
+        const isVisible = transformState.isNodeInViewport(
+          centerPos,
+          size as ArrayLike<number>,
+          viewport
+        )
+        const cullTime = performance.now() - startTime
+
+        expect(cullTime).toBeLessThan(0.1) // Size culling under 0.1ms
+
+        // At 0.01 zoom, nodes need to be 400+ pixels to show as 4+ screen pixels
+        const screenSize = Math.max(size[0], size[1]) * 0.01
+        if (screenSize < 4) {
+          expect(isVisible).toBe(false)
+        } else {
+          expect(isVisible).toBe(true)
+        }
+      })
+    })
+  })
+
+  describe('transform state synchronization', () => {
+    it('should efficiently sync with canvas state changes', () => {
+      const syncCount = 1000
+      const transformUpdates = Array.from({ length: syncCount }, (_, i) => ({
+        offset: [Math.sin(i * 0.1) * 1000, Math.cos(i * 0.1) * 500],
+        scale: 0.5 + Math.sin(i * 0.05) * 0.4 // Scale between 0.1 and 0.9
+      }))
+
+      const startTime = performance.now()
+
+      transformUpdates.forEach((update) => {
+        mockCanvas.ds.offset = update.offset
+        mockCanvas.ds.scale = update.scale
+        transformState.syncWithCanvas(mockCanvas)
+      })
+
+      const syncTime = performance.now() - startTime
+
+      expect(syncTime).toBeLessThan(15) // 1000 syncs in under 15ms
+
+      // Verify final state is correct
+      const lastUpdate = transformUpdates[transformUpdates.length - 1]
+      expect(transformState.camera.x).toBe(lastUpdate.offset[0])
+      expect(transformState.camera.y).toBe(lastUpdate.offset[1])
+      expect(transformState.camera.z).toBe(lastUpdate.scale)
+    })
+
+    it('should generate CSS transform strings efficiently', () => {
+      const transformCount = 10000
+
+      // Set up varying transform states
+      const transforms = Array.from({ length: transformCount }, (_, i) => {
+        mockCanvas.ds.offset = [i * 10, i * 5]
+        mockCanvas.ds.scale = 0.5 + (i % 100) / 100
+        transformState.syncWithCanvas(mockCanvas)
+        return transformState.transformStyle.value
+      })
+
+      const startTime = performance.now()
+
+      // Access transform styles (triggers computed property)
+      transforms.forEach((style) => {
+        expect(style.transform).toContain('scale(')
+        expect(style.transform).toContain('translate(')
+        expect(style.transformOrigin).toBe('0 0')
+      })
+
+      const accessTime = performance.now() - startTime
+
+      expect(accessTime).toBeLessThan(200) // 10k style accesses in under 200ms
+    })
+  })
+
+  describe('bounds calculation performance', () => {
+    it('should calculate node screen bounds efficiently', () => {
+      // Set up realistic transform
+      mockCanvas.ds.offset = [200, 100]
+      mockCanvas.ds.scale = 1.5
+      transformState.syncWithCanvas(mockCanvas)
+
+      const nodeCount = 1000
+      const nodes = Array.from({ length: nodeCount }, () => ({
+        pos: [Math.random() * 5000, Math.random() * 3000] as ArrayLike<number>,
+        size: [
+          100 + Math.random() * 200,
+          80 + Math.random() * 120
+        ] as ArrayLike<number>
+      }))
+
+      const startTime = performance.now()
+
+      const bounds = nodes.map((node) =>
+        transformState.getNodeScreenBounds(node.pos, node.size)
+      )
+
+      const calcTime = performance.now() - startTime
+
+      expect(calcTime).toBeLessThan(15) // 1000 bounds calculations in under 15ms
+      expect(bounds).toHaveLength(nodeCount)
+
+      // Verify bounds are reasonable
+      bounds.forEach((bound) => {
+        expect(bound.width).toBeGreaterThan(0)
+        expect(bound.height).toBeGreaterThan(0)
+        expect(Number.isFinite(bound.x)).toBe(true)
+        expect(Number.isFinite(bound.y)).toBe(true)
+      })
+    })
+
+    it('should calculate viewport bounds efficiently', () => {
+      const viewportSizes = [
+        { width: 800, height: 600 },
+        { width: 1920, height: 1080 },
+        { width: 3840, height: 2160 },
+        { width: 1280, height: 720 }
+      ]
+
+      const margins = [0, 0.1, 0.2, 0.5]
+
+      const combinations = viewportSizes.flatMap((viewport) =>
+        margins.map((margin) => ({ viewport, margin }))
+      )
+
+      const startTime = performance.now()
+
+      const allBounds = combinations.map(({ viewport, margin }) => {
+        mockCanvas.ds.offset = [Math.random() * 1000, Math.random() * 500]
+        mockCanvas.ds.scale = 0.5 + Math.random() * 2
+        transformState.syncWithCanvas(mockCanvas)
+
+        return transformState.getViewportBounds(viewport, margin)
+      })
+
+      const calcTime = performance.now() - startTime
+
+      expect(calcTime).toBeLessThan(5) // All viewport calculations in under 5ms
+      expect(allBounds).toHaveLength(combinations.length)
+
+      // Verify bounds are reasonable
+      allBounds.forEach((bounds) => {
+        expect(bounds.width).toBeGreaterThan(0)
+        expect(bounds.height).toBeGreaterThan(0)
+        expect(Number.isFinite(bounds.x)).toBe(true)
+        expect(Number.isFinite(bounds.y)).toBe(true)
+      })
+    })
+  })
+
+  describe('real-world performance scenarios', () => {
+    it('should handle smooth panning performance', () => {
+      // Simulate smooth 60fps panning for 2 seconds
+      const frameCount = 120 // 2 seconds at 60fps
+      const panDistance = 2000 // Pan 2000 pixels
+
+      const frames: number[] = []
+
+      for (let frame = 0; frame < frameCount; frame++) {
+        const progress = frame / (frameCount - 1)
+        const x = progress * panDistance
+        const y = Math.sin(progress * Math.PI * 2) * 200 // Slight vertical wave
+
+        mockCanvas.ds.offset = [x, y]
+
+        const frameStart = performance.now()
+
+        // Typical operations during panning
+        transformState.syncWithCanvas(mockCanvas)
+        const style = transformState.transformStyle.value // Access transform style
+        expect(style.transform).toContain('translate') // Verify style is valid
+
+        // Simulate some coordinate conversions (mouse tracking, etc.)
+        for (let i = 0; i < 5; i++) {
+          const screen = transformState.canvasToScreen({
+            x: x + i * 100,
+            y: y + i * 50
+          })
+          transformState.screenToCanvas(screen)
+        }
+
+        const frameTime = performance.now() - frameStart
+        frames.push(frameTime)
+
+        // Each frame should be well under 16.67ms for 60fps
+        expect(frameTime).toBeLessThan(1) // Conservative: under 1ms per frame
+      }
+
+      const totalTime = frames.reduce((sum, time) => sum + time, 0)
+      const avgFrameTime = totalTime / frameCount
+
+      expect(avgFrameTime).toBeLessThan(0.5) // Average frame time under 0.5ms
+      expect(totalTime).toBeLessThan(60) // Total panning overhead under 60ms
+    })
+
+    it('should handle zoom performance with viewport updates', () => {
+      // Simulate smooth zoom from 0.1x to 10x
+      const zoomSteps = 100
+      const viewport = { width: 1920, height: 1080 }
+
+      const zoomTimes: number[] = []
+
+      for (let step = 0; step < zoomSteps; step++) {
+        const zoomLevel = Math.pow(10, (step / (zoomSteps - 1)) * 2 - 1) // 0.1 to 10
+        mockCanvas.ds.scale = zoomLevel
+
+        const stepStart = performance.now()
+
+        // Operations during zoom
+        transformState.syncWithCanvas(mockCanvas)
+
+        // Viewport bounds calculation (for culling)
+        transformState.getViewportBounds(viewport, 0.2)
+
+        // Test a few nodes for visibility
+        for (let i = 0; i < 10; i++) {
+          transformState.isNodeInViewport(
+            [i * 200, i * 150],
+            [200, 100],
+            viewport
+          )
+        }
+
+        const stepTime = performance.now() - stepStart
+        zoomTimes.push(stepTime)
+      }
+
+      const maxZoomTime = Math.max(...zoomTimes)
+      const avgZoomTime =
+        zoomTimes.reduce((sum, time) => sum + time, 0) / zoomSteps
+
+      expect(maxZoomTime).toBeLessThan(2) // No zoom step over 2ms
+      expect(avgZoomTime).toBeLessThan(1) // Average zoom step under 1ms
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/core/layout/layoutStore.test.ts b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
new file mode 100644
index 000000000..db3f9960d
--- /dev/null
+++ b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
@@ -0,0 +1,264 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import {
+  type LayoutChange,
+  LayoutSource,
+  type NodeLayout
+} from '@/renderer/core/layout/types'
+
+describe('layoutStore CRDT operations', () => {
+  beforeEach(() => {
+    // Clear the store before each test
+    layoutStore.initializeFromLiteGraph([])
+  })
+  // Helper to create test node data
+  const createTestNode = (id: string): NodeLayout => ({
+    id,
+    position: { x: 100, y: 100 },
+    size: { width: 200, height: 100 },
+    zIndex: 0,
+    visible: true,
+    bounds: { x: 100, y: 100, width: 200, height: 100 }
+  })
+
+  it('should create and retrieve nodes', () => {
+    const nodeId = 'test-node-1'
+    const layout = createTestNode(nodeId)
+
+    // Create node
+    layoutStore.setSource(LayoutSource.External)
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    // Retrieve node
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+    expect(nodeRef.value).toEqual(layout)
+  })
+
+  it('should move nodes', () => {
+    const nodeId = 'test-node-2'
+    const layout = createTestNode(nodeId)
+
+    // Create node first
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    // Move node
+    const newPosition = { x: 200, y: 300 }
+    layoutStore.applyOperation({
+      type: 'moveNode',
+      entity: 'node',
+      nodeId,
+      position: newPosition,
+      previousPosition: layout.position,
+      timestamp: Date.now(),
+      source: LayoutSource.Vue,
+      actor: 'test'
+    })
+
+    // Verify position updated
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+    expect(nodeRef.value?.position).toEqual(newPosition)
+  })
+
+  it('should resize nodes', () => {
+    const nodeId = 'test-node-3'
+    const layout = createTestNode(nodeId)
+
+    // Create node
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    // Resize node
+    const newSize = { width: 300, height: 150 }
+    layoutStore.applyOperation({
+      type: 'resizeNode',
+      entity: 'node',
+      nodeId,
+      size: newSize,
+      previousSize: layout.size,
+      timestamp: Date.now(),
+      source: LayoutSource.Canvas,
+      actor: 'test'
+    })
+
+    // Verify size updated
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+    expect(nodeRef.value?.size).toEqual(newSize)
+  })
+
+  it('should delete nodes', () => {
+    const nodeId = 'test-node-4'
+    const layout = createTestNode(nodeId)
+
+    // Create node
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    // Delete node
+    layoutStore.applyOperation({
+      type: 'deleteNode',
+      entity: 'node',
+      nodeId,
+      previousLayout: layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    // Verify node deleted
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+    expect(nodeRef.value).toBeNull()
+  })
+
+  it('should handle source and actor tracking', async () => {
+    const nodeId = 'test-node-5'
+    const layout = createTestNode(nodeId)
+
+    // Set source and actor
+    layoutStore.setSource(LayoutSource.Vue)
+    layoutStore.setActor('user-123')
+
+    // Track change notifications AFTER setting source/actor
+    const changes: LayoutChange[] = []
+    const unsubscribe = layoutStore.onChange((change) => {
+      changes.push(change)
+    })
+
+    // Create node
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: layoutStore.getCurrentSource(),
+      actor: layoutStore.getCurrentActor()
+    })
+
+    // Wait for async notification
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    expect(changes.length).toBeGreaterThanOrEqual(1)
+    const lastChange = changes[changes.length - 1]
+    expect(lastChange.source).toBe('vue')
+    expect(lastChange.operation.actor).toBe('user-123')
+
+    unsubscribe()
+  })
+
+  it('should query nodes by spatial bounds', () => {
+    const nodes = [
+      { id: 'node-a', position: { x: 0, y: 0 } },
+      { id: 'node-b', position: { x: 100, y: 100 } },
+      { id: 'node-c', position: { x: 250, y: 250 } }
+    ]
+
+    // Create nodes with proper bounds
+    nodes.forEach(({ id, position }) => {
+      const layout: NodeLayout = {
+        ...createTestNode(id),
+        position,
+        bounds: {
+          x: position.x,
+          y: position.y,
+          width: 200,
+          height: 100
+        }
+      }
+      layoutStore.applyOperation({
+        type: 'createNode',
+        entity: 'node',
+        nodeId: id,
+        layout,
+        timestamp: Date.now(),
+        source: LayoutSource.External,
+        actor: 'test'
+      })
+    })
+
+    // Query nodes in bounds
+    const nodesInBounds = layoutStore.queryNodesInBounds({
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 200
+    })
+
+    // node-a: (0,0) to (200,100) - overlaps with query bounds (50,50) to (250,250)
+    // node-b: (100,100) to (300,200) - overlaps with query bounds
+    // node-c: (250,250) to (450,350) - touches corner of query bounds
+    expect(nodesInBounds).toContain('node-a')
+    expect(nodesInBounds).toContain('node-b')
+    expect(nodesInBounds).toContain('node-c')
+  })
+
+  it('should maintain operation history', () => {
+    const nodeId = 'test-node-history'
+    const layout = createTestNode(nodeId)
+    const startTime = Date.now()
+
+    // Create node
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: startTime,
+      source: LayoutSource.External,
+      actor: 'test-actor'
+    })
+
+    // Move node
+    layoutStore.applyOperation({
+      type: 'moveNode',
+      entity: 'node',
+      nodeId,
+      position: { x: 150, y: 150 },
+      previousPosition: { x: 100, y: 100 },
+      timestamp: startTime + 100,
+      source: LayoutSource.Vue,
+      actor: 'test-actor'
+    })
+
+    // Get operations by actor
+    const operations = layoutStore.getOperationsByActor('test-actor')
+    expect(operations.length).toBeGreaterThanOrEqual(2)
+    expect(operations[0].type).toBe('createNode')
+    expect(operations[1].type).toBe('moveNode')
+
+    // Get operations since timestamp
+    const recentOps = layoutStore.getOperationsSince(startTime + 50)
+    expect(recentOps.length).toBeGreaterThanOrEqual(1)
+    expect(recentOps[0].type).toBe('moveNode')
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
new file mode 100644
index 000000000..b2faf8b7a
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
+import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking',
+  () => ({
+    useVueElementTracking: vi.fn()
+  })
+)
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    toastErrorHandler: vi.fn()
+  })
+}))
+
+vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
+  useNodeLayout: () => ({
+    position: { x: 100, y: 50 },
+    startDrag: vi.fn(),
+    handleDrag: vi.fn(),
+    endDrag: vi.fn()
+  })
+}))
+
+vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
+  useLOD: () => ({
+    lodLevel: { value: 0 },
+    shouldRenderWidgets: { value: true },
+    shouldRenderSlots: { value: true },
+    shouldRenderContent: { value: false },
+    lodCssClass: { value: '' }
+  }),
+  LODLevel: { MINIMAL: 0 }
+}))
+
+describe('LGraphNode', () => {
+  const mockNodeData: VueNodeData = {
+    id: 'test-node-123',
+    title: 'Test Node',
+    type: 'TestNode',
+    mode: 0,
+    flags: {},
+    inputs: [],
+    outputs: [],
+    widgets: [],
+    selected: false,
+    executing: false
+  }
+
+  const mountLGraphNode = (props: any, selectedNodeIds = new Set()) => {
+    return mount(LGraphNode, {
+      props,
+      global: {
+        provide: {
+          [SelectedNodeIdsKey as symbol]: ref(selectedNodeIds)
+        }
+      }
+    })
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should call resize tracking composable with node ID', () => {
+    mountLGraphNode({ nodeData: mockNodeData })
+
+    expect(useVueElementTracking).toHaveBeenCalledWith('test-node-123', 'node')
+  })
+
+  it('should render with data-node-id attribute', () => {
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+    expect(wrapper.attributes('data-node-id')).toBe('test-node-123')
+  })
+
+  it('should render node title', () => {
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+    expect(wrapper.text()).toContain('Test Node')
+  })
+
+  it('should apply selected styling when selected prop is true', () => {
+    const wrapper = mountLGraphNode(
+      { nodeData: mockNodeData, selected: true },
+      new Set(['test-node-123'])
+    )
+
+    expect(wrapper.classes()).toContain('border-blue-500')
+    expect(wrapper.classes()).toContain('ring-2')
+    expect(wrapper.classes()).toContain('ring-blue-300')
+  })
+
+  it('should apply executing animation when executing prop is true', () => {
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData, executing: true })
+
+    expect(wrapper.classes()).toContain('animate-pulse')
+  })
+
+  it('should emit node-click event on pointer down', async () => {
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+    await wrapper.trigger('pointerdown')
+
+    expect(wrapper.emitted('node-click')).toHaveLength(1)
+    expect(wrapper.emitted('node-click')?.[0]).toHaveLength(2)
+    expect(wrapper.emitted('node-click')?.[0][1]).toEqual(mockNodeData)
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts
new file mode 100644
index 000000000..51a0ae235
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts
@@ -0,0 +1,236 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+import { useCanvasStore } from '@/stores/graphStore'
+
+vi.mock('@/stores/graphStore', () => ({
+  useCanvasStore: vi.fn()
+}))
+
+vi.mock('@/renderer/core/layout/operations/layoutMutations', () => ({
+  useLayoutMutations: vi.fn()
+}))
+
+function createMockCanvas(): Pick<
+  LGraphCanvas,
+  'select' | 'deselect' | 'deselectAll'
+> {
+  return {
+    select: vi.fn(),
+    deselect: vi.fn(),
+    deselectAll: vi.fn()
+  }
+}
+
+function createMockNode(): Pick<LGraphNode, 'id' | 'selected' | 'flags'> {
+  return {
+    id: 'node-1',
+    selected: false,
+    flags: { pinned: false }
+  }
+}
+
+function createMockNodeManager(
+  node: Pick<LGraphNode, 'id' | 'selected' | 'flags'>
+) {
+  return {
+    getNode: vi.fn().mockReturnValue(node) as ReturnType<
+      typeof useGraphNodeManager
+    >['getNode']
+  }
+}
+
+function createMockCanvasStore(
+  canvas: Pick<LGraphCanvas, 'select' | 'deselect' | 'deselectAll'>
+): Pick<
+  ReturnType<typeof useCanvasStore>,
+  'canvas' | 'selectedItems' | 'updateSelectedItems'
+> {
+  return {
+    canvas: canvas as LGraphCanvas,
+    selectedItems: [],
+    updateSelectedItems: vi.fn()
+  }
+}
+
+function createMockLayoutMutations(): Pick<
+  ReturnType<typeof useLayoutMutations>,
+  'setSource' | 'bringNodeToFront'
+> {
+  return {
+    setSource: vi.fn(),
+    bringNodeToFront: vi.fn()
+  }
+}
+
+describe('useNodeEventHandlers', () => {
+  let mockCanvas: ReturnType<typeof createMockCanvas>
+  let mockNode: ReturnType<typeof createMockNode>
+  let mockNodeManager: ReturnType<typeof createMockNodeManager>
+  let mockCanvasStore: ReturnType<typeof createMockCanvasStore>
+  let mockLayoutMutations: ReturnType<typeof createMockLayoutMutations>
+
+  const testNodeData: VueNodeData = {
+    id: 'node-1',
+    title: 'Test Node',
+    type: 'test',
+    mode: 0,
+    selected: false,
+    executing: false
+  }
+
+  beforeEach(async () => {
+    mockNode = createMockNode()
+    mockCanvas = createMockCanvas()
+    mockNodeManager = createMockNodeManager(mockNode)
+    mockCanvasStore = createMockCanvasStore(mockCanvas)
+    mockLayoutMutations = createMockLayoutMutations()
+
+    vi.mocked(useCanvasStore).mockReturnValue(
+      mockCanvasStore as ReturnType<typeof useCanvasStore>
+    )
+    vi.mocked(useLayoutMutations).mockReturnValue(
+      mockLayoutMutations as ReturnType<typeof useLayoutMutations>
+    )
+  })
+
+  describe('handleNodeSelect', () => {
+    it('should select single node on regular click', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      const event = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: false,
+        metaKey: false
+      })
+
+      handleNodeSelect(event, testNodeData)
+
+      expect(mockCanvas.deselectAll).toHaveBeenCalledOnce()
+      expect(mockCanvas.select).toHaveBeenCalledWith(mockNode)
+      expect(mockCanvasStore.updateSelectedItems).toHaveBeenCalledOnce()
+    })
+
+    it('should toggle selection on ctrl+click', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      // Test selecting unselected node with ctrl
+      mockNode.selected = false
+
+      const ctrlClickEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: true,
+        metaKey: false
+      })
+
+      handleNodeSelect(ctrlClickEvent, testNodeData)
+
+      expect(mockCanvas.deselectAll).not.toHaveBeenCalled()
+      expect(mockCanvas.select).toHaveBeenCalledWith(mockNode)
+    })
+
+    it('should deselect on ctrl+click of selected node', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      // Test deselecting selected node with ctrl
+      mockNode.selected = true
+
+      const ctrlClickEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: true,
+        metaKey: false
+      })
+
+      handleNodeSelect(ctrlClickEvent, testNodeData)
+
+      expect(mockCanvas.deselect).toHaveBeenCalledWith(mockNode)
+      expect(mockCanvas.select).not.toHaveBeenCalled()
+    })
+
+    it('should handle meta key (Cmd) on Mac', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      mockNode.selected = false
+
+      const metaClickEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: false,
+        metaKey: true
+      })
+
+      handleNodeSelect(metaClickEvent, testNodeData)
+
+      expect(mockCanvas.select).toHaveBeenCalledWith(mockNode)
+      expect(mockCanvas.deselectAll).not.toHaveBeenCalled()
+    })
+
+    it('should bring node to front when not pinned', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      mockNode.flags.pinned = false
+
+      const event = new PointerEvent('pointerdown')
+      handleNodeSelect(event, testNodeData)
+
+      expect(mockLayoutMutations.bringNodeToFront).toHaveBeenCalledWith(
+        'node-1'
+      )
+    })
+
+    it('should not bring pinned node to front', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      mockNode.flags.pinned = true
+
+      const event = new PointerEvent('pointerdown')
+      handleNodeSelect(event, testNodeData)
+
+      expect(mockLayoutMutations.bringNodeToFront).not.toHaveBeenCalled()
+    })
+
+    it('should handle missing canvas gracefully', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      mockCanvasStore.canvas = null
+
+      const event = new PointerEvent('pointerdown')
+      expect(() => {
+        handleNodeSelect(event, testNodeData)
+      }).not.toThrow()
+
+      expect(mockCanvas.select).not.toHaveBeenCalled()
+    })
+
+    it('should handle missing node gracefully', () => {
+      const nodeManager = ref(mockNodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+
+      vi.mocked(mockNodeManager.getNode).mockReturnValue(undefined)
+
+      const event = new PointerEvent('pointerdown')
+      const nodeData = {
+        id: 'missing-node',
+        title: 'Missing Node',
+        type: 'test'
+      } as any
+
+      expect(() => {
+        handleNodeSelect(event, nodeData)
+      }).not.toThrow()
+
+      expect(mockCanvas.select).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts
new file mode 100644
index 000000000..f9c669cd4
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts
@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
+
+// Mock the layout mutations module
+vi.mock('@/renderer/core/layout/operations/layoutMutations')
+
+const mockedUseLayoutMutations = vi.mocked(useLayoutMutations)
+
+describe('useNodeZIndex', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('bringNodeToFront', () => {
+    it('should bring node to front with default source', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex()
+
+      bringNodeToFront('node1')
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.Vue)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node1')
+    })
+
+    it('should bring node to front with custom source', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex()
+
+      bringNodeToFront('node2', LayoutSource.Canvas)
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.Canvas)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node2')
+    })
+
+    it('should use custom layout source from options', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex({
+        layoutSource: LayoutSource.External
+      })
+
+      bringNodeToFront('node3')
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.External)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node3')
+    })
+
+    it('should override layout source with explicit source parameter', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex({
+        layoutSource: LayoutSource.External
+      })
+
+      bringNodeToFront('node4', LayoutSource.Canvas)
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.Canvas)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node4')
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
new file mode 100644
index 000000000..68850c18a
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import {
+  LODLevel,
+  LOD_THRESHOLDS,
+  supportsFeatureAtZoom,
+  useLOD
+} from '@/renderer/extensions/vueNodes/lod/useLOD'
+
+describe('useLOD', () => {
+  describe('LOD level detection', () => {
+    it('should return MINIMAL for zoom <= 0.4', () => {
+      const zoomRef = ref(0.4)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.2
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.1
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+    })
+
+    it('should return REDUCED for 0.4 < zoom <= 0.8', () => {
+      const zoomRef = ref(0.5)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 0.6
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 0.8
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+    })
+
+    it('should return FULL for zoom > 0.8', () => {
+      const zoomRef = ref(0.9)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+
+      zoomRef.value = 1.0
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+
+      zoomRef.value = 2.5
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+    })
+
+    it('should be reactive to zoom changes', () => {
+      const zoomRef = ref(0.2)
+      const { lodLevel } = useLOD(zoomRef)
+
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.6
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 1.0
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+    })
+  })
+
+  describe('rendering decisions', () => {
+    it('should disable all rendering for MINIMAL LOD', () => {
+      const zoomRef = ref(0.2)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(false)
+      expect(shouldRenderSlots.value).toBe(false)
+      expect(shouldRenderContent.value).toBe(false)
+      expect(shouldRenderSlotLabels.value).toBe(false)
+      expect(shouldRenderWidgetLabels.value).toBe(false)
+    })
+
+    it('should enable widgets/slots but disable labels for REDUCED LOD', () => {
+      const zoomRef = ref(0.6)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(true)
+      expect(shouldRenderSlots.value).toBe(true)
+      expect(shouldRenderContent.value).toBe(false)
+      expect(shouldRenderSlotLabels.value).toBe(false)
+      expect(shouldRenderWidgetLabels.value).toBe(false)
+    })
+
+    it('should enable all rendering for FULL LOD', () => {
+      const zoomRef = ref(1.0)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(true)
+      expect(shouldRenderSlots.value).toBe(true)
+      expect(shouldRenderContent.value).toBe(true)
+      expect(shouldRenderSlotLabels.value).toBe(true)
+      expect(shouldRenderWidgetLabels.value).toBe(true)
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should return correct CSS class for each LOD level', () => {
+      const zoomRef = ref(0.2)
+      const { lodCssClass } = useLOD(zoomRef)
+
+      expect(lodCssClass.value).toBe('lg-node--lod-minimal')
+
+      zoomRef.value = 0.6
+      expect(lodCssClass.value).toBe('lg-node--lod-reduced')
+
+      zoomRef.value = 1.0
+      expect(lodCssClass.value).toBe('lg-node--lod-full')
+    })
+  })
+
+  describe('essential widgets filtering', () => {
+    it('should return all widgets for FULL LOD', () => {
+      const zoomRef = ref(1.0)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: 'text' },
+        { type: 'button' },
+        { type: 'slider' }
+      ]
+
+      expect(getEssentialWidgets(widgets)).toEqual(widgets)
+    })
+
+    it('should return empty array for MINIMAL LOD', () => {
+      const zoomRef = ref(0.2)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [{ type: 'combo' }, { type: 'text' }, { type: 'button' }]
+
+      expect(getEssentialWidgets(widgets)).toEqual([])
+    })
+
+    it('should filter to essential types for REDUCED LOD', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: 'text' },
+        { type: 'button' },
+        { type: 'slider' },
+        { type: 'toggle' },
+        { type: 'number' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(4)
+      expect(essential.map((w: any) => w.type)).toEqual([
+        'combo',
+        'slider',
+        'toggle',
+        'number'
+      ])
+    })
+
+    it('should handle case-insensitive widget types', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'COMBO' },
+        { type: 'Select' },
+        { type: 'TOGGLE' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(3)
+    })
+
+    it('should handle widgets with undefined or missing type', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: undefined },
+        {},
+        { type: 'slider' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(2)
+      expect(essential.map((w: any) => w.type)).toEqual(['combo', 'slider'])
+    })
+  })
+
+  describe('performance metrics', () => {
+    it('should provide debug metrics', () => {
+      const zoomRef = ref(0.6)
+      const { lodMetrics } = useLOD(zoomRef)
+
+      expect(lodMetrics.value).toEqual({
+        level: LODLevel.REDUCED,
+        zoom: 0.6,
+        widgetCount: 'full',
+        slotCount: 'full'
+      })
+    })
+
+    it('should update metrics when zoom changes', () => {
+      const zoomRef = ref(0.2)
+      const { lodMetrics } = useLOD(zoomRef)
+
+      expect(lodMetrics.value.level).toBe(LODLevel.MINIMAL)
+      expect(lodMetrics.value.widgetCount).toBe('none')
+      expect(lodMetrics.value.slotCount).toBe('none')
+
+      zoomRef.value = 1.0
+      expect(lodMetrics.value.level).toBe(LODLevel.FULL)
+      expect(lodMetrics.value.widgetCount).toBe('full')
+      expect(lodMetrics.value.slotCount).toBe('full')
+    })
+  })
+})
+
+describe('LOD_THRESHOLDS', () => {
+  it('should export correct threshold values', () => {
+    expect(LOD_THRESHOLDS.FULL_THRESHOLD).toBe(0.8)
+    expect(LOD_THRESHOLDS.REDUCED_THRESHOLD).toBe(0.4)
+    expect(LOD_THRESHOLDS.MINIMAL_THRESHOLD).toBe(0.0)
+  })
+})
+
+describe('supportsFeatureAtZoom', () => {
+  it('should return correct feature support for different zoom levels', () => {
+    expect(supportsFeatureAtZoom(1.0, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(1.0, 'renderSlots')).toBe(true)
+    expect(supportsFeatureAtZoom(1.0, 'renderContent')).toBe(true)
+
+    expect(supportsFeatureAtZoom(0.6, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(0.6, 'renderSlots')).toBe(true)
+    expect(supportsFeatureAtZoom(0.6, 'renderContent')).toBe(false)
+
+    expect(supportsFeatureAtZoom(0.2, 'renderWidgets')).toBe(false)
+    expect(supportsFeatureAtZoom(0.2, 'renderSlots')).toBe(false)
+    expect(supportsFeatureAtZoom(0.2, 'renderContent')).toBe(false)
+  })
+
+  it('should handle threshold boundary values correctly', () => {
+    expect(supportsFeatureAtZoom(0.8, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(0.8, 'renderContent')).toBe(false)
+
+    expect(supportsFeatureAtZoom(0.81, 'renderContent')).toBe(true)
+
+    expect(supportsFeatureAtZoom(0.4, 'renderWidgets')).toBe(false)
+    expect(supportsFeatureAtZoom(0.41, 'renderWidgets')).toBe(true)
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
new file mode 100644
index 000000000..ce3acffc5
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -0,0 +1,211 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { assetService } from '@/services/assetService'
+
+vi.mock('@/scripts/widgets', () => ({
+  addValueControlWidgets: vi.fn()
+}))
+
+const mockSettingStoreGet = vi.fn(() => false)
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: mockSettingStoreGet
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  t: vi.fn((key: string) =>
+    key === 'widgets.selectModel' ? 'Select model' : key
+  )
+}))
+
+vi.mock('@/services/assetService', () => ({
+  assetService: {
+    isAssetBrowserEligible: vi.fn(() => false)
+  }
+}))
+
+// Test factory functions
+function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
+  return {
+    type: 'combo',
+    options: {},
+    name: 'testWidget',
+    value: undefined,
+    ...overrides
+  } as IBaseWidget
+}
+
+function createMockNode(comfyClass = 'TestNode'): LGraphNode {
+  const node = new LGraphNode('TestNode')
+  node.comfyClass = comfyClass
+
+  // Spy on the addWidget method
+  vi.spyOn(node, 'addWidget').mockReturnValue(createMockWidget())
+
+  return node
+}
+
+function createMockInputSpec(overrides: Partial<InputSpec> = {}): InputSpec {
+  return {
+    type: 'COMBO',
+    name: 'testInput',
+    ...overrides
+  } as InputSpec
+}
+
+describe('useComboWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset to defaults
+    mockSettingStoreGet.mockReturnValue(false)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
+  })
+
+  it('should handle undefined spec', () => {
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget()
+    const mockNode = createMockNode()
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({ name: 'inputName' })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'inputName',
+      undefined,
+      expect.any(Function),
+      expect.objectContaining({
+        values: []
+      })
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create normal combo widget when asset API is disabled', () => {
+    mockSettingStoreGet.mockReturnValue(false)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget()
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      options: ['model1.safetensors', 'model2.safetensors']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'ckpt_name',
+      'model1.safetensors',
+      expect.any(Function),
+      { values: ['model1.safetensors', 'model2.safetensors'] }
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create normal combo widget when widget is not eligible for asset browser', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget()
+    const mockNode = createMockNode()
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'not_eligible_widget',
+      options: ['option1', 'option2']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'not_eligible_widget',
+      'option1',
+      expect.any(Function),
+      { values: ['option1', 'option2'] }
+    )
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'not_eligible_widget',
+      'TestNode'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create asset browser button widget when API enabled and widget eligible', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'button',
+      name: 'ckpt_name',
+      value: 'Select model'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      options: ['model1.safetensors', 'model2.safetensors']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'button',
+      'ckpt_name',
+      'Select model',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should use asset browser button even when inputSpec has a default value but no options', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'button',
+      name: 'ckpt_name',
+      value: 'Select model'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      default: 'fallback.safetensors'
+      // Note: no options array provided
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'button',
+      'ckpt_name',
+      'Select model',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+})
diff --git a/tests-ui/tests/composables/widgets/useFloatWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
similarity index 95%
rename from tests-ui/tests/composables/widgets/useFloatWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
index 02819c9f2..6dde265a6 100644
--- a/tests-ui/tests/composables/widgets/useFloatWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { _for_testing } from '@/composables/widgets/useFloatWidget'
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
 
 vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
diff --git a/tests-ui/tests/composables/widgets/useIntWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
similarity index 94%
rename from tests-ui/tests/composables/widgets/useIntWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
index 8bed76042..edf4efab9 100644
--- a/tests-ui/tests/composables/widgets/useIntWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { _for_testing } from '@/composables/widgets/useIntWidget'
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
 
 vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
diff --git a/tests-ui/tests/composables/widgets/useRemoteWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
similarity index 99%
rename from tests-ui/tests/composables/widgets/useRemoteWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
index 0bf729453..9b301cce0 100644
--- a/tests-ui/tests/composables/widgets/useRemoteWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useRemoteWidget } from '@/composables/widgets/useRemoteWidget'
+import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
 import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 
 vi.mock('axios', () => {
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
new file mode 100644
index 000000000..64a8d614c
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest'
+
+import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
+import WidgetColorPicker from '@/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue'
+import WidgetFileUpload from '@/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue'
+import WidgetInputNumber from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
+import WidgetMarkdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue'
+import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
+import WidgetTextarea from '@/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue'
+import WidgetToggleSwitch from '@/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue'
+import {
+  getComponent,
+  isEssential,
+  shouldRenderAsVue
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+
+describe('widgetRegistry', () => {
+  describe('getComponent', () => {
+    // Test number type mappings
+    describe('number types', () => {
+      it('should map int types to slider widget', () => {
+        expect(getComponent('int')).toBe(WidgetInputNumber)
+        expect(getComponent('INT')).toBe(WidgetInputNumber)
+      })
+
+      it('should map float types to slider widget', () => {
+        expect(getComponent('float')).toBe(WidgetInputNumber)
+        expect(getComponent('FLOAT')).toBe(WidgetInputNumber)
+        expect(getComponent('number')).toBe(WidgetInputNumber)
+        expect(getComponent('slider')).toBe(WidgetInputNumber)
+      })
+    })
+
+    // Test text type mappings
+    describe('text types', () => {
+      it('should map text variations to input text widget', () => {
+        expect(getComponent('text')).toBe(WidgetInputText)
+        expect(getComponent('string')).toBe(WidgetInputText)
+        expect(getComponent('STRING')).toBe(WidgetInputText)
+      })
+
+      it('should map multiline text types to textarea widget', () => {
+        expect(getComponent('multiline')).toBe(WidgetTextarea)
+        expect(getComponent('textarea')).toBe(WidgetTextarea)
+        expect(getComponent('TEXTAREA')).toBe(WidgetTextarea)
+        expect(getComponent('customtext')).toBe(WidgetTextarea)
+      })
+
+      it('should map markdown to markdown widget', () => {
+        expect(getComponent('MARKDOWN')).toBe(WidgetMarkdown)
+        expect(getComponent('markdown')).toBe(WidgetMarkdown)
+      })
+    })
+
+    // Test selection type mappings
+    describe('selection types', () => {
+      it('should map combo types to select widget', () => {
+        expect(getComponent('combo')).toBe(WidgetSelect)
+        expect(getComponent('COMBO')).toBe(WidgetSelect)
+      })
+    })
+
+    // Test boolean type mappings
+    describe('boolean types', () => {
+      it('should map boolean types to toggle switch widget', () => {
+        expect(getComponent('toggle')).toBe(WidgetToggleSwitch)
+        expect(getComponent('boolean')).toBe(WidgetToggleSwitch)
+        expect(getComponent('BOOLEAN')).toBe(WidgetToggleSwitch)
+      })
+    })
+
+    // Test advanced widget mappings
+    describe('advanced widgets', () => {
+      it('should map color types to color picker widget', () => {
+        expect(getComponent('color')).toBe(WidgetColorPicker)
+        expect(getComponent('COLOR')).toBe(WidgetColorPicker)
+      })
+
+      it('should map file types to file upload widget', () => {
+        expect(getComponent('file')).toBe(WidgetFileUpload)
+        expect(getComponent('fileupload')).toBe(WidgetFileUpload)
+        expect(getComponent('FILEUPLOAD')).toBe(WidgetFileUpload)
+      })
+
+      it('should map button types to button widget', () => {
+        expect(getComponent('button')).toBe(WidgetButton)
+        expect(getComponent('BUTTON')).toBe(WidgetButton)
+      })
+    })
+
+    // Test fallback behavior
+    describe('fallback behavior', () => {
+      it('should return null for unknown types', () => {
+        expect(getComponent('unknown')).toBe(null)
+        expect(getComponent('custom_widget')).toBe(null)
+        expect(getComponent('')).toBe(null)
+      })
+    })
+  })
+
+  describe('shouldRenderAsVue', () => {
+    it('should return false for widgets marked as canvas-only', () => {
+      const widget = { type: 'text', options: { canvasOnly: true } }
+      expect(shouldRenderAsVue(widget)).toBe(false)
+    })
+
+    it('should return false for widgets without a type', () => {
+      const widget = { options: {} }
+      expect(shouldRenderAsVue(widget)).toBe(false)
+    })
+
+    it('should return true for widgets with mapped types', () => {
+      expect(shouldRenderAsVue({ type: 'text' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'int' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'combo' })).toBe(true)
+    })
+
+    it('should return false for unknown types', () => {
+      expect(shouldRenderAsVue({ type: 'unknown_type' })).toBe(false)
+    })
+
+    it('should respect options while checking type', () => {
+      const widget = { type: 'text', options: { someOption: 'value' } }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+  })
+
+  describe('isEssential', () => {
+    it('should identify essential widget types', () => {
+      expect(isEssential('int')).toBe(true)
+      expect(isEssential('INT')).toBe(true)
+      expect(isEssential('float')).toBe(true)
+      expect(isEssential('FLOAT')).toBe(true)
+      expect(isEssential('boolean')).toBe(true)
+      expect(isEssential('BOOLEAN')).toBe(true)
+      expect(isEssential('combo')).toBe(true)
+      expect(isEssential('COMBO')).toBe(true)
+    })
+
+    it('should identify non-essential widget types', () => {
+      expect(isEssential('button')).toBe(false)
+      expect(isEssential('color')).toBe(false)
+      expect(isEssential('chart')).toBe(false)
+      expect(isEssential('fileupload')).toBe(false)
+    })
+
+    it('should return false for unknown types', () => {
+      expect(isEssential('unknown')).toBe(false)
+      expect(isEssential('')).toBe(false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle widgets with empty options', () => {
+      const widget = { type: 'text', options: {} }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+
+    it('should handle case sensitivity correctly through aliases', () => {
+      // Test that both lowercase and uppercase work
+      expect(getComponent('string')).toBe(WidgetInputText)
+      expect(getComponent('STRING')).toBe(WidgetInputText)
+      expect(getComponent('combo')).toBe(WidgetSelect)
+      expect(getComponent('COMBO')).toBe(WidgetSelect)
+    })
+  })
+})
diff --git a/tests-ui/tests/services/assetService.test.ts b/tests-ui/tests/services/assetService.test.ts
new file mode 100644
index 000000000..6a3981acb
--- /dev/null
+++ b/tests-ui/tests/services/assetService.test.ts
@@ -0,0 +1,203 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { api } from '@/scripts/api'
+import { assetService } from '@/services/assetService'
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: vi.fn(() => ({
+    getRegisteredNodeTypes: vi.fn(
+      () =>
+        new Set([
+          'CheckpointLoaderSimple',
+          'LoraLoader',
+          'VAELoader',
+          'TestNode'
+        ])
+    )
+  }))
+}))
+
+// Test data constants
+const MOCK_ASSETS = {
+  checkpoints: {
+    id: 'uuid-1',
+    name: 'model1.safetensors',
+    tags: ['models', 'checkpoints'],
+    size: 123456
+  },
+  loras: {
+    id: 'uuid-2',
+    name: 'model2.safetensors',
+    tags: ['models', 'loras'],
+    size: 654321
+  },
+  vae: {
+    id: 'uuid-3',
+    name: 'vae1.safetensors',
+    tags: ['models', 'vae'],
+    size: 789012
+  }
+} as const
+
+// Helper functions
+function mockApiResponse(assets: any[], options = {}) {
+  const response = {
+    assets,
+    total: assets.length,
+    has_more: false,
+    ...options
+  }
+  vi.mocked(api.fetchApi).mockResolvedValueOnce(Response.json(response))
+  return response
+}
+
+function mockApiError(status: number, statusText = 'Error') {
+  vi.mocked(api.fetchApi).mockResolvedValueOnce(
+    new Response(null, { status, statusText })
+  )
+}
+
+describe('assetService', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.spyOn(api, 'fetchApi')
+  })
+
+  describe('getAssetModelFolders', () => {
+    it('should extract directory names from asset tags and filter blacklisted ones', async () => {
+      const assets = [
+        {
+          id: 'uuid-1',
+          name: 'checkpoint1.safetensors',
+          tags: ['models', 'checkpoints'],
+          size: 123456
+        },
+        {
+          id: 'uuid-2',
+          name: 'config.yaml',
+          tags: ['models', 'configs'], // Blacklisted
+          size: 654321
+        },
+        {
+          id: 'uuid-3',
+          name: 'vae1.safetensors',
+          tags: ['models', 'vae'],
+          size: 789012
+        }
+      ]
+      mockApiResponse(assets)
+
+      const result = await assetService.getAssetModelFolders()
+
+      expect(api.fetchApi).toHaveBeenCalledWith('/assets?include_tags=models')
+      expect(result).toHaveLength(2)
+
+      const folderNames = result.map((f) => f.name)
+      expect(folderNames).toEqual(['checkpoints', 'vae'])
+      expect(folderNames).not.toContain('configs')
+    })
+
+    it('should handle empty responses', async () => {
+      mockApiResponse([])
+      const emptyResult = await assetService.getAssetModelFolders()
+      expect(emptyResult).toHaveLength(0)
+    })
+
+    it('should handle network errors', async () => {
+      vi.mocked(api.fetchApi).mockRejectedValueOnce(new Error('Network error'))
+      await expect(assetService.getAssetModelFolders()).rejects.toThrow(
+        'Network error'
+      )
+    })
+
+    it('should handle HTTP errors', async () => {
+      mockApiError(500)
+      await expect(assetService.getAssetModelFolders()).rejects.toThrow(
+        'Unable to load model folders: Server returned 500. Please try again.'
+      )
+    })
+  })
+
+  describe('getAssetModels', () => {
+    it('should return filtered models for folder', async () => {
+      const assets = [
+        { ...MOCK_ASSETS.checkpoints, name: 'valid.safetensors' },
+        { ...MOCK_ASSETS.loras, name: 'lora.safetensors' }, // Wrong tag
+        {
+          id: 'uuid-4',
+          name: 'missing-model.safetensors',
+          tags: ['models', 'checkpoints', 'missing'], // Has missing tag
+          size: 654321
+        }
+      ]
+      mockApiResponse(assets)
+
+      const result = await assetService.getAssetModels('checkpoints')
+
+      expect(api.fetchApi).toHaveBeenCalledWith(
+        '/assets?include_tags=models,checkpoints'
+      )
+      expect(result).toEqual([
+        expect.objectContaining({ name: 'valid.safetensors', pathIndex: 0 })
+      ])
+    })
+
+    it('should handle errors and empty responses', async () => {
+      // Empty response
+      mockApiResponse([])
+      const emptyResult = await assetService.getAssetModels('nonexistent')
+      expect(emptyResult).toEqual([])
+
+      // Network error
+      vi.mocked(api.fetchApi).mockRejectedValueOnce(new Error('Network error'))
+      await expect(assetService.getAssetModels('checkpoints')).rejects.toThrow(
+        'Network error'
+      )
+
+      // HTTP error
+      mockApiError(404)
+      await expect(assetService.getAssetModels('checkpoints')).rejects.toThrow(
+        'Unable to load models for checkpoints: Server returned 404. Please try again.'
+      )
+    })
+  })
+
+  describe('isAssetBrowserEligible', () => {
+    it('should return true for eligible widget names with registered node types', () => {
+      expect(
+        assetService.isAssetBrowserEligible(
+          'ckpt_name',
+          'CheckpointLoaderSimple'
+        )
+      ).toBe(true)
+      expect(
+        assetService.isAssetBrowserEligible('lora_name', 'LoraLoader')
+      ).toBe(true)
+      expect(assetService.isAssetBrowserEligible('vae_name', 'VAELoader')).toBe(
+        true
+      )
+    })
+
+    it('should return false for non-eligible widget names', () => {
+      expect(assetService.isAssetBrowserEligible('seed', 'TestNode')).toBe(
+        false
+      )
+      expect(assetService.isAssetBrowserEligible('steps', 'TestNode')).toBe(
+        false
+      )
+      expect(
+        assetService.isAssetBrowserEligible('sampler_name', 'TestNode')
+      ).toBe(false)
+      expect(assetService.isAssetBrowserEligible('', 'TestNode')).toBe(false)
+    })
+
+    it('should return false for eligible widget names with unregistered node types', () => {
+      expect(
+        assetService.isAssetBrowserEligible('ckpt_name', 'UnknownNode')
+      ).toBe(false)
+      expect(
+        assetService.isAssetBrowserEligible('lora_name', 'UnknownNode')
+      ).toBe(false)
+    })
+  })
+})
diff --git a/tests-ui/tests/store/comfyManagerStore.test.ts b/tests-ui/tests/store/comfyManagerStore.test.ts
index b377c258b..a1d748111 100644
--- a/tests-ui/tests/store/comfyManagerStore.test.ts
+++ b/tests-ui/tests/store/comfyManagerStore.test.ts
@@ -439,4 +439,97 @@ describe('useComfyManagerStore', () => {
       expect(store.isPackInstalling('pack-3')).toBe(false)
     })
   })
+
+  describe('refreshInstalledList with pack ID normalization', () => {
+    it('normalizes pack IDs by removing version suffixes', async () => {
+      const mockPacks = {
+        'ComfyUI-GGUF@1_1_4': {
+          enabled: false,
+          cnr_id: 'ComfyUI-GGUF',
+          ver: '1.1.4',
+          aux_id: undefined
+        },
+        'ComfyUI-Manager': {
+          enabled: true,
+          cnr_id: 'ComfyUI-Manager',
+          ver: '2.0.0',
+          aux_id: undefined
+        }
+      }
+
+      vi.mocked(mockManagerService.listInstalledPacks).mockResolvedValue(
+        mockPacks
+      )
+
+      const store = useComfyManagerStore()
+      await store.refreshInstalledList()
+
+      // Both packs should be accessible by their base name
+      expect(store.installedPacks['ComfyUI-GGUF']).toEqual({
+        enabled: false,
+        cnr_id: 'ComfyUI-GGUF',
+        ver: '1.1.4',
+        aux_id: undefined
+      })
+      expect(store.installedPacks['ComfyUI-Manager']).toEqual({
+        enabled: true,
+        cnr_id: 'ComfyUI-Manager',
+        ver: '2.0.0',
+        aux_id: undefined
+      })
+
+      // Version suffixed keys should not exist
+      expect(store.installedPacks['ComfyUI-GGUF@1_1_4']).toBeUndefined()
+    })
+
+    it('handles duplicate keys after normalization', async () => {
+      const mockPacks = {
+        'test-pack': {
+          enabled: true,
+          cnr_id: 'test-pack',
+          ver: '1.0.0',
+          aux_id: undefined
+        },
+        'test-pack@1_1_0': {
+          enabled: false,
+          cnr_id: 'test-pack',
+          ver: '1.1.0',
+          aux_id: undefined
+        }
+      }
+
+      vi.mocked(mockManagerService.listInstalledPacks).mockResolvedValue(
+        mockPacks
+      )
+
+      const store = useComfyManagerStore()
+      await store.refreshInstalledList()
+
+      // The normalized key should exist (last one wins with mapKeys)
+      expect(store.installedPacks['test-pack']).toBeDefined()
+      expect(store.installedPacks['test-pack'].ver).toBe('1.1.0')
+    })
+
+    it('preserves version information for disabled packs', async () => {
+      const mockPacks = {
+        'disabled-pack@2_0_0': {
+          enabled: false,
+          cnr_id: 'disabled-pack',
+          ver: '2.0.0',
+          aux_id: undefined
+        }
+      }
+
+      vi.mocked(mockManagerService.listInstalledPacks).mockResolvedValue(
+        mockPacks
+      )
+
+      const store = useComfyManagerStore()
+      await store.refreshInstalledList()
+
+      // Pack should be accessible by base name with version preserved
+      expect(store.getInstalledPackVersion('disabled-pack')).toBe('2.0.0')
+      expect(store.isPackInstalled('disabled-pack')).toBe(true)
+    })
+  })
 })
diff --git a/tests-ui/tests/store/modelStore.test.ts b/tests-ui/tests/store/modelStore.test.ts
index 6964b04e8..e77e9be0d 100644
--- a/tests-ui/tests/store/modelStore.test.ts
+++ b/tests-ui/tests/store/modelStore.test.ts
@@ -2,7 +2,9 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { api } from '@/scripts/api'
+import { assetService } from '@/services/assetService'
 import { useModelStore } from '@/stores/modelStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 // Mock the api
 vi.mock('@/scripts/api', () => ({
@@ -13,7 +15,34 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-function enableMocks() {
+// Mock the assetService
+vi.mock('@/services/assetService', () => ({
+  assetService: {
+    getAssetModelFolders: vi.fn(),
+    getAssetModels: vi.fn()
+  }
+}))
+
+// Mock the settingStore
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: vi.fn()
+}))
+
+function enableMocks(useAssetAPI = false) {
+  // Mock settingStore to return the useAssetAPI setting
+  const mockSettingStore = {
+    get: vi.fn().mockImplementation((key: string) => {
+      if (key === 'Comfy.Assets.UseAssetAPI') {
+        return useAssetAPI
+      }
+      return false
+    })
+  }
+  vi.mocked(useSettingStore, { partial: true }).mockReturnValue(
+    mockSettingStore
+  )
+
+  // Mock experimental API - returns objects with name and folders properties
   vi.mocked(api.getModels).mockResolvedValue([
     { name: 'sdxl.safetensors', pathIndex: 0 },
     { name: 'sdv15.safetensors', pathIndex: 0 },
@@ -23,6 +52,18 @@ function enableMocks() {
     { name: 'checkpoints', folders: ['/path/to/checkpoints'] },
     { name: 'vae', folders: ['/path/to/vae'] }
   ])
+
+  // Mock asset API - also returns objects with name and folders properties
+  vi.mocked(assetService.getAssetModelFolders).mockResolvedValue([
+    { name: 'checkpoints', folders: ['/path/to/checkpoints'] },
+    { name: 'vae', folders: ['/path/to/vae'] }
+  ])
+  vi.mocked(assetService.getAssetModels).mockResolvedValue([
+    { name: 'sdxl.safetensors', pathIndex: 0 },
+    { name: 'sdv15.safetensors', pathIndex: 0 },
+    { name: 'noinfo.safetensors', pathIndex: 0 }
+  ])
+
   vi.mocked(api.viewMetadata).mockImplementation((_, model) => {
     if (model === 'noinfo.safetensors') {
       return Promise.resolve({})
@@ -46,26 +87,25 @@ describe('useModelStore', () => {
 
   beforeEach(async () => {
     setActivePinia(createPinia())
-    store = useModelStore()
     vi.resetAllMocks()
   })
 
   it('should load models', async () => {
     enableMocks()
+    store = useModelStore()
     await store.loadModelFolders()
     const folderStore = await store.getLoadedModelFolder('checkpoints')
-    expect(folderStore).not.toBeNull()
-    if (!folderStore) return
-    expect(Object.keys(folderStore.models).length).toBe(3)
+    expect(folderStore).toBeDefined()
+    expect(Object.keys(folderStore!.models)).toHaveLength(3)
   })
 
   it('should load model metadata', async () => {
     enableMocks()
+    store = useModelStore()
     await store.loadModelFolders()
     const folderStore = await store.getLoadedModelFolder('checkpoints')
-    expect(folderStore).not.toBeNull()
-    if (!folderStore) return
-    const model = folderStore.models['0/sdxl.safetensors']
+    expect(folderStore).toBeDefined()
+    const model = folderStore!.models['0/sdxl.safetensors']
     await model.load()
     expect(model.title).toBe('Title of sdxl.safetensors')
     expect(model.architecture_id).toBe('stable-diffusion-xl-base-v1')
@@ -79,11 +119,11 @@ describe('useModelStore', () => {
 
   it('should handle no metadata', async () => {
     enableMocks()
+    store = useModelStore()
     await store.loadModelFolders()
     const folderStore = await store.getLoadedModelFolder('checkpoints')
-    expect(folderStore).not.toBeNull()
-    if (!folderStore) return
-    const model = folderStore.models['0/noinfo.safetensors']
+    expect(folderStore).toBeDefined()
+    const model = folderStore!.models['0/noinfo.safetensors']
     await model.load()
     expect(model.file_name).toBe('noinfo.safetensors')
     expect(model.title).toBe('noinfo')
@@ -95,6 +135,7 @@ describe('useModelStore', () => {
 
   it('should cache model information', async () => {
     enableMocks()
+    store = useModelStore()
     await store.loadModelFolders()
     expect(api.getModels).toHaveBeenCalledTimes(0)
     await store.getLoadedModelFolder('checkpoints')
@@ -102,4 +143,36 @@ describe('useModelStore', () => {
     await store.getLoadedModelFolder('checkpoints')
     expect(api.getModels).toHaveBeenCalledTimes(1)
   })
+
+  describe('API switching functionality', () => {
+    it('should use experimental API for complete workflow when UseAssetAPI setting is false', async () => {
+      enableMocks(false) // useAssetAPI = false
+      store = useModelStore()
+      await store.loadModelFolders()
+      const folderStore = await store.getLoadedModelFolder('checkpoints')
+
+      // Both APIs return objects with .name property, modelStore extracts folder.name in both cases
+      expect(api.getModelFolders).toHaveBeenCalledTimes(1)
+      expect(api.getModels).toHaveBeenCalledWith('checkpoints')
+      expect(assetService.getAssetModelFolders).toHaveBeenCalledTimes(0)
+      expect(assetService.getAssetModels).toHaveBeenCalledTimes(0)
+      expect(folderStore).toBeDefined()
+      expect(Object.keys(folderStore!.models)).toHaveLength(3)
+    })
+
+    it('should use asset API for complete workflow when UseAssetAPI setting is true', async () => {
+      enableMocks(true) // useAssetAPI = true
+      store = useModelStore()
+      await store.loadModelFolders()
+      const folderStore = await store.getLoadedModelFolder('checkpoints')
+
+      // Both APIs return objects with .name property, modelStore extracts folder.name in both cases
+      expect(assetService.getAssetModelFolders).toHaveBeenCalledTimes(1)
+      expect(assetService.getAssetModels).toHaveBeenCalledWith('checkpoints')
+      expect(api.getModelFolders).toHaveBeenCalledTimes(0)
+      expect(api.getModels).toHaveBeenCalledTimes(0)
+      expect(folderStore).toBeDefined()
+      expect(Object.keys(folderStore!.models)).toHaveLength(3)
+    })
+  })
 })
diff --git a/tests-ui/tests/store/modelToNodeStore.test.ts b/tests-ui/tests/store/modelToNodeStore.test.ts
index dc08e10fc..179c76b9e 100644
--- a/tests-ui/tests/store/modelToNodeStore.test.ts
+++ b/tests-ui/tests/store/modelToNodeStore.test.ts
@@ -21,45 +21,44 @@ const EXPECTED_DEFAULT_TYPES = [
 
 type NodeDefStoreType = typeof import('@/stores/nodeDefStore')
 
+// Create minimal but valid ComfyNodeDefImpl for testing
+function createMockNodeDef(name: string): ComfyNodeDefImpl {
+  const def: ComfyNodeDefV1 = {
+    name,
+    display_name: name,
+    category: 'test',
+    python_module: 'nodes',
+    description: '',
+    input: { required: {}, optional: {} },
+    output: [],
+    output_name: [],
+    output_is_list: [],
+    output_node: false
+  }
+  return new ComfyNodeDefImpl(def)
+}
+
+const MOCK_NODE_NAMES = [
+  'CheckpointLoaderSimple',
+  'ImageOnlyCheckpointLoader',
+  'LoraLoader',
+  'LoraLoaderModelOnly',
+  'VAELoader',
+  'ControlNetLoader',
+  'UNETLoader',
+  'UpscaleModelLoader',
+  'StyleModelLoader',
+  'GLIGENLoader'
+] as const
+
+const mockNodeDefsByName = Object.fromEntries(
+  MOCK_NODE_NAMES.map((name) => [name, createMockNodeDef(name)])
+)
+
 // Mock nodeDefStore dependency - modelToNodeStore relies on this for registration
 // Most tests expect this to be populated; tests that need empty state can override
 vi.mock('@/stores/nodeDefStore', async (importOriginal) => {
   const original = await importOriginal<NodeDefStoreType>()
-  const { ComfyNodeDefImpl } = original
-
-  // Create minimal but valid ComfyNodeDefImpl for testing
-  function createMockNodeDef(name: string): ComfyNodeDefImpl {
-    const def: ComfyNodeDefV1 = {
-      name,
-      display_name: name,
-      category: 'test',
-      python_module: 'nodes',
-      description: '',
-      input: { required: {}, optional: {} },
-      output: [],
-      output_name: [],
-      output_is_list: [],
-      output_node: false
-    }
-    return new ComfyNodeDefImpl(def)
-  }
-
-  const MOCK_NODE_NAMES = [
-    'CheckpointLoaderSimple',
-    'ImageOnlyCheckpointLoader',
-    'LoraLoader',
-    'LoraLoaderModelOnly',
-    'VAELoader',
-    'ControlNetLoader',
-    'UNETLoader',
-    'UpscaleModelLoader',
-    'StyleModelLoader',
-    'GLIGENLoader'
-  ] as const
-
-  const mockNodeDefsByName = Object.fromEntries(
-    MOCK_NODE_NAMES.map((name) => [name, createMockNodeDef(name)])
-  )
 
   return {
     ...original,
@@ -72,6 +71,7 @@ vi.mock('@/stores/nodeDefStore', async (importOriginal) => {
 describe('useModelToNodeStore', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
+    vi.clearAllMocks()
   })
 
   describe('modelToNodeMap', () => {
@@ -288,12 +288,58 @@ describe('useModelToNodeStore', () => {
     })
 
     it('should not register when nodeDefStore is empty', () => {
+      // Create fresh Pinia for this test to avoid state persistence
+      setActivePinia(createPinia())
+
       vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
         nodeDefsByName: {}
       })
       const modelToNodeStore = useModelToNodeStore()
       modelToNodeStore.registerDefaults()
       expect(modelToNodeStore.getNodeProvider('checkpoints')).toBeUndefined()
+
+      // Restore original mock for subsequent tests
+      vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
+        nodeDefsByName: mockNodeDefsByName
+      })
+    })
+  })
+
+  describe('getRegisteredNodeTypes', () => {
+    it('should return a Set instance', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      const result = modelToNodeStore.getRegisteredNodeTypes()
+      expect(result).toBeInstanceOf(Set)
+    })
+
+    it('should return empty set when nodeDefStore is empty', () => {
+      // Create fresh Pinia for this test to avoid state persistence
+      setActivePinia(createPinia())
+
+      vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
+        nodeDefsByName: {}
+      })
+      const modelToNodeStore = useModelToNodeStore()
+
+      const result = modelToNodeStore.getRegisteredNodeTypes()
+      expect(result.size).toBe(0)
+
+      // Restore original mock for subsequent tests
+      vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
+        nodeDefsByName: mockNodeDefsByName
+      })
+    })
+
+    it('should contain node types for efficient Set.has() lookups', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+
+      const result = modelToNodeStore.getRegisteredNodeTypes()
+
+      // Test Set.has() functionality which assetService depends on
+      expect(result.has('CheckpointLoaderSimple')).toBe(true)
+      expect(result.has('LoraLoader')).toBe(true)
+      expect(result.has('NonExistentNode')).toBe(false)
     })
   })
 
diff --git a/tests-ui/tests/store/releaseStore.test.ts b/tests-ui/tests/store/releaseStore.test.ts
index 730037f03..93a9d9dc6 100644
--- a/tests-ui/tests/store/releaseStore.test.ts
+++ b/tests-ui/tests/store/releaseStore.test.ts
@@ -9,6 +9,10 @@ vi.mock('@/utils/envUtil')
 vi.mock('@/services/releaseService')
 vi.mock('@/stores/settingStore')
 vi.mock('@/stores/systemStatsStore')
+vi.mock('@vueuse/core', () => ({
+  until: vi.fn(() => Promise.resolve()),
+  useStorage: vi.fn(() => ({ value: {} }))
+}))
 
 describe('useReleaseStore', () => {
   let store: ReturnType<typeof useReleaseStore>
@@ -49,7 +53,8 @@ describe('useReleaseStore', () => {
           comfyui_version: '1.0.0'
         }
       },
-      fetchSystemStats: vi.fn(),
+      isInitialized: true,
+      refetchSystemStats: vi.fn(),
       getFormFactor: vi.fn(() => 'git-windows')
     }
 
@@ -334,12 +339,15 @@ describe('useReleaseStore', () => {
     })
 
     it('should fetch system stats if not available', async () => {
+      const { until } = await import('@vueuse/core')
       mockSystemStatsStore.systemStats = null
+      mockSystemStatsStore.isInitialized = false
       mockReleaseService.getReleases.mockResolvedValue([mockRelease])
 
       await store.initialize()
 
-      expect(mockSystemStatsStore.fetchSystemStats).toHaveBeenCalled()
+      expect(until).toHaveBeenCalled()
+      expect(mockReleaseService.getReleases).toHaveBeenCalled()
     })
 
     it('should not set loading state when notifications disabled', async () => {
@@ -401,12 +409,14 @@ describe('useReleaseStore', () => {
     })
 
     it('should proceed with fetchReleases when system stats are not available', async () => {
+      const { until } = await import('@vueuse/core')
       mockSystemStatsStore.systemStats = null
+      mockSystemStatsStore.isInitialized = false
       mockReleaseService.getReleases.mockResolvedValue([mockRelease])
 
       await store.fetchReleases()
 
-      expect(mockSystemStatsStore.fetchSystemStats).toHaveBeenCalled()
+      expect(until).toHaveBeenCalled()
       expect(mockReleaseService.getReleases).toHaveBeenCalled()
     })
   })
@@ -530,7 +540,7 @@ describe('useReleaseStore', () => {
       await store.initialize()
 
       // Should not fetch system stats when notifications disabled
-      expect(mockSystemStatsStore.fetchSystemStats).not.toHaveBeenCalled()
+      expect(mockSystemStatsStore.refetchSystemStats).not.toHaveBeenCalled()
     })
 
     it('should handle concurrent fetchReleases calls', async () => {
diff --git a/tests-ui/tests/store/subgraphStore.test.ts b/tests-ui/tests/store/subgraphStore.test.ts
new file mode 100644
index 000000000..e8f844c59
--- /dev/null
+++ b/tests-ui/tests/store/subgraphStore.test.ts
@@ -0,0 +1,128 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  createTestSubgraph,
+  createTestSubgraphNode
+} from '@/lib/litegraph/test/subgraph/fixtures/subgraphHelpers'
+import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
+import { api } from '@/scripts/api'
+import { app as comfyApp } from '@/scripts/app'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
+
+// Add mock for api at the top of the file
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getUserData: vi.fn(),
+    storeUserData: vi.fn(),
+    listUserDataFullInfo: vi.fn(),
+    apiURL: vi.fn(),
+    addEventListener: vi.fn()
+  }
+}))
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => ({
+    prompt: () => 'testname',
+    confirm: () => true
+  }))
+}))
+vi.mock('@/stores/graphStore', () => ({
+  useCanvasStore: vi.fn(() => ({
+    getCanvas: () => comfyApp.canvas
+  }))
+}))
+
+// Mock comfyApp globally for the store setup
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: {
+      _deserializeItems: vi.fn((i) => i),
+      ds: { visible_area: [0, 0, 0, 0] },
+      selected_nodes: null
+    },
+    loadGraphData: vi.fn()
+  }
+}))
+
+const mockGraph = {
+  nodes: [{ type: '123' }],
+  definitions: { subgraphs: [{ id: '123' }] }
+}
+
+describe('useSubgraphStore', () => {
+  let store: ReturnType<typeof useSubgraphStore>
+  const mockFetch = async (filenames: Record<string, unknown>) => {
+    vi.mocked(api.listUserDataFullInfo).mockResolvedValue(
+      Object.keys(filenames).map((filename) => ({
+        path: filename,
+        modified: new Date().getTime(),
+        size: 1 // size !== -1 for remote workflows
+      }))
+    )
+    vi.mocked(api).getUserData = vi.fn(
+      (f) =>
+        ({
+          status: 200,
+          text: () => JSON.stringify(filenames[f.slice(10)])
+        }) as any
+    )
+    return await store.fetchSubgraphs()
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    store = useSubgraphStore()
+    vi.clearAllMocks()
+  })
+
+  it('should allow publishing of a subgraph', async () => {
+    //mock canvas to provide a minimal subgraphNode
+    const subgraph = createTestSubgraph()
+    const subgraphNode = createTestSubgraphNode(subgraph)
+    const graph = subgraphNode.graph
+    graph.add(subgraphNode)
+    vi.mocked(comfyApp.canvas).selectedItems = new Set([subgraphNode])
+    vi.mocked(comfyApp.canvas)._serializeItems = vi.fn(() => ({
+      nodes: [subgraphNode.serialize()],
+      subgraphs: [subgraph.serialize() as any]
+    }))
+    //mock saving of file
+    vi.mocked(api.storeUserData).mockResolvedValue({
+      status: 200,
+      json: () =>
+        Promise.resolve({
+          path: 'subgraphs/testname.json',
+          modified: Date.now(),
+          size: 2
+        })
+    } as Response)
+    await mockFetch({ 'testname.json': mockGraph })
+    //Dialogue service already mocked
+    await store.publishSubgraph()
+    expect(api.storeUserData).toHaveBeenCalled()
+  })
+  it('should display published nodes in the node library', async () => {
+    await mockFetch({ 'test.json': mockGraph })
+    expect(
+      useNodeDefStore().nodeDefs.filter(
+        (d) => d.category == 'Subgraph Blueprints'
+      )
+    ).toHaveLength(1)
+  })
+  it('should allow subgraphs to be edited', async () => {
+    await mockFetch({ 'test.json': mockGraph })
+    await store.editBlueprint(store.typePrefix + 'test')
+    //check active graph
+    expect(comfyApp.loadGraphData).toHaveBeenCalled()
+  })
+  it('should allow subgraphs to be added to graph', async () => {
+    //mock
+    await mockFetch({ 'test.json': mockGraph })
+    const res = useLitegraphService().addNodeOnGraph({
+      name: 'SubgraphBlueprint.test'
+    } as ComfyNodeDefV1)
+    expect(res).toBeTruthy()
+  })
+})
diff --git a/tests-ui/tests/store/systemStatsStore.test.ts b/tests-ui/tests/store/systemStatsStore.test.ts
index 84e84ec44..67d76ee5a 100644
--- a/tests-ui/tests/store/systemStatsStore.test.ts
+++ b/tests-ui/tests/store/systemStatsStore.test.ts
@@ -21,18 +21,25 @@ describe('useSystemStatsStore', () => {
   let store: ReturnType<typeof useSystemStatsStore>
 
   beforeEach(() => {
+    // Mock API to prevent automatic fetch on store creation
+    vi.mocked(api.getSystemStats).mockResolvedValue(null as any)
     setActivePinia(createPinia())
     store = useSystemStatsStore()
     vi.clearAllMocks()
   })
 
-  it('should initialize with null systemStats', () => {
-    expect(store.systemStats).toBeNull()
-    expect(store.isLoading).toBe(false)
-    expect(store.error).toBeNull()
+  it('should initialize and start fetching immediately', async () => {
+    // useAsyncState with immediate: true starts loading right away
+    // In test environment, the mock resolves immediately so loading might be false already
+    expect(store.systemStats).toBeNull() // Initial value is null
+    expect(store.error).toBeUndefined()
+
+    // Wait for initial fetch to complete
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(store.isInitialized).toBe(true) // Should be initialized after fetch
   })
 
-  describe('fetchSystemStats', () => {
+  describe('refetchSystemStats', () => {
     it('should fetch system stats successfully', async () => {
       const mockStats = {
         system: {
@@ -51,11 +58,12 @@ describe('useSystemStatsStore', () => {
 
       vi.mocked(api.getSystemStats).mockResolvedValue(mockStats)
 
-      await store.fetchSystemStats()
+      await store.refetchSystemStats()
 
       expect(store.systemStats).toEqual(mockStats)
       expect(store.isLoading).toBe(false)
-      expect(store.error).toBeNull()
+      expect(store.error).toBeUndefined() // useAsyncState uses undefined for no error
+      expect(store.isInitialized).toBe(true)
       expect(api.getSystemStats).toHaveBeenCalled()
     })
 
@@ -63,19 +71,19 @@ describe('useSystemStatsStore', () => {
       const error = new Error('API Error')
       vi.mocked(api.getSystemStats).mockRejectedValue(error)
 
-      await store.fetchSystemStats()
+      await store.refetchSystemStats()
 
-      expect(store.systemStats).toBeNull()
+      expect(store.systemStats).toBeNull() // Initial value stays null on error
       expect(store.isLoading).toBe(false)
-      expect(store.error).toBe('API Error')
+      expect(store.error).toEqual(error) // useAsyncState stores the actual error object
     })
 
     it('should handle non-Error objects', async () => {
       vi.mocked(api.getSystemStats).mockRejectedValue('String error')
 
-      await store.fetchSystemStats()
+      await store.refetchSystemStats()
 
-      expect(store.error).toBe('An error occurred while fetching system stats')
+      expect(store.error).toBe('String error') // useAsyncState stores the actual error
     })
 
     it('should set loading state correctly', async () => {
@@ -85,7 +93,7 @@ describe('useSystemStatsStore', () => {
       })
       vi.mocked(api.getSystemStats).mockReturnValue(promise)
 
-      const fetchPromise = store.fetchSystemStats()
+      const fetchPromise = store.refetchSystemStats()
       expect(store.isLoading).toBe(true)
 
       resolvePromise({})
@@ -112,11 +120,12 @@ describe('useSystemStatsStore', () => {
 
       vi.mocked(api.getSystemStats).mockResolvedValue(updatedStats)
 
-      await store.fetchSystemStats()
+      await store.refetchSystemStats()
 
       expect(store.systemStats).toEqual(updatedStats)
       expect(store.isLoading).toBe(false)
-      expect(store.error).toBeNull()
+      expect(store.error).toBeUndefined()
+      expect(store.isInitialized).toBe(true)
       expect(api.getSystemStats).toHaveBeenCalled()
     })
   })
diff --git a/tests-ui/tests/store/versionCompatibilityStore.test.ts b/tests-ui/tests/store/versionCompatibilityStore.test.ts
index e3d3ceca9..b5ff99ab4 100644
--- a/tests-ui/tests/store/versionCompatibilityStore.test.ts
+++ b/tests-ui/tests/store/versionCompatibilityStore.test.ts
@@ -13,10 +13,11 @@ vi.mock('@/config', () => ({
 
 vi.mock('@/stores/systemStatsStore')
 
-// Mock useStorage from VueUse
+// Mock useStorage and until from VueUse
 const mockDismissalStorage = ref({} as Record<string, number>)
 vi.mock('@vueuse/core', () => ({
-  useStorage: vi.fn(() => mockDismissalStorage)
+  useStorage: vi.fn(() => mockDismissalStorage),
+  until: vi.fn(() => Promise.resolve())
 }))
 
 describe('useVersionCompatibilityStore', () => {
@@ -31,7 +32,8 @@ describe('useVersionCompatibilityStore', () => {
 
     mockSystemStatsStore = {
       systemStats: null,
-      fetchSystemStats: vi.fn()
+      isInitialized: false,
+      refetchSystemStats: vi.fn()
     }
 
     vi.mocked(useSystemStatsStore).mockReturnValue(mockSystemStatsStore)
@@ -51,6 +53,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -68,6 +71,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.23.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -83,6 +87,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.24.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -98,6 +103,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: ''
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -113,6 +119,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: 'not-a-version' // invalid semver format
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -129,6 +136,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.23.0' // Required is 1.23.0, frontend 1.24.0 meets this
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -148,6 +156,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -167,6 +176,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -180,6 +190,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.24.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -195,6 +206,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -212,6 +224,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.24.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
 
@@ -230,6 +243,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.checkVersionCompatibility()
       store.dismissWarning()
@@ -252,6 +266,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.initialize()
 
@@ -270,6 +285,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.25.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.initialize()
 
@@ -289,6 +305,7 @@ describe('useVersionCompatibilityStore', () => {
           required_frontend_version: '1.26.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.initialize()
 
@@ -298,24 +315,28 @@ describe('useVersionCompatibilityStore', () => {
 
   describe('initialization', () => {
     it('should fetch system stats if not available', async () => {
+      const { until } = await import('@vueuse/core')
       mockSystemStatsStore.systemStats = null
+      mockSystemStatsStore.isInitialized = false
 
       await store.initialize()
 
-      expect(mockSystemStatsStore.fetchSystemStats).toHaveBeenCalled()
+      expect(until).toHaveBeenCalled()
     })
 
     it('should not fetch system stats if already available', async () => {
+      const { until } = await import('@vueuse/core')
       mockSystemStatsStore.systemStats = {
         system: {
           comfyui_version: '1.24.0',
           required_frontend_version: '1.24.0'
         }
       }
+      mockSystemStatsStore.isInitialized = true
 
       await store.initialize()
 
-      expect(mockSystemStatsStore.fetchSystemStats).not.toHaveBeenCalled()
+      expect(until).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/tests-ui/tests/stores/managerStateStore.test.ts b/tests-ui/tests/stores/managerStateStore.test.ts
deleted file mode 100644
index 28047b12a..000000000
--- a/tests-ui/tests/stores/managerStateStore.test.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { api } from '@/scripts/api'
-import { useExtensionStore } from '@/stores/extensionStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-
-// Mock dependencies
-vi.mock('@/scripts/api', () => ({
-  api: {
-    getClientFeatureFlags: vi.fn(),
-    getServerFeature: vi.fn()
-  }
-}))
-
-vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: vi.fn(() => ({
-    flags: { supportsManagerV4: false },
-    featureFlag: vi.fn()
-  }))
-}))
-
-vi.mock('@/stores/extensionStore', () => ({
-  useExtensionStore: vi.fn()
-}))
-
-vi.mock('@/stores/systemStatsStore', () => ({
-  useSystemStatsStore: vi.fn()
-}))
-
-describe('useManagerStateStore', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    vi.clearAllMocks()
-  })
-
-  describe('managerUIState computed', () => {
-    it('should return DISABLED state when --disable-manager is present', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: {
-          system: { argv: ['python', 'main.py', '--disable-manager'] }
-        }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.DISABLED)
-    })
-
-    it('should return LEGACY_UI state when --enable-manager-legacy-ui is present', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: {
-          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
-        }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.LEGACY_UI)
-    })
-
-    it('should return NEW_UI state when client and server both support v4', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: { system: { argv: ['python', 'main.py'] } }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
-        supports_manager_v4_ui: true
-      })
-      vi.mocked(api.getServerFeature).mockReturnValue(true)
-      vi.mocked(useFeatureFlags).mockReturnValue({
-        flags: { supportsManagerV4: true },
-        featureFlag: vi.fn()
-      } as any)
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.NEW_UI)
-    })
-
-    it('should return LEGACY_UI state when server supports v4 but client does not', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: { system: { argv: ['python', 'main.py'] } }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
-        supports_manager_v4_ui: false
-      })
-      vi.mocked(api.getServerFeature).mockReturnValue(true)
-      vi.mocked(useFeatureFlags).mockReturnValue({
-        flags: { supportsManagerV4: true },
-        featureFlag: vi.fn()
-      } as any)
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.LEGACY_UI)
-    })
-
-    it('should return LEGACY_UI state when legacy manager extension exists', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: { system: { argv: ['python', 'main.py'] } }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
-      vi.mocked(useFeatureFlags).mockReturnValue({
-        flags: { supportsManagerV4: false },
-        featureFlag: vi.fn()
-      } as any)
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: [{ name: 'Comfy.CustomNodesManager' }]
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.LEGACY_UI)
-    })
-
-    it('should return DISABLED state when feature flags are undefined', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: { system: { argv: ['python', 'main.py'] } }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
-      vi.mocked(api.getServerFeature).mockReturnValue(undefined)
-      vi.mocked(useFeatureFlags).mockReturnValue({
-        flags: { supportsManagerV4: undefined },
-        featureFlag: vi.fn()
-      } as any)
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.DISABLED)
-    })
-
-    it('should return DISABLED state when no manager is available', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: { system: { argv: ['python', 'main.py'] } }
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
-      vi.mocked(api.getServerFeature).mockReturnValue(false)
-      vi.mocked(useFeatureFlags).mockReturnValue({
-        flags: { supportsManagerV4: false },
-        featureFlag: vi.fn()
-      } as any)
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.DISABLED)
-    })
-
-    it('should handle null systemStats gracefully', () => {
-      vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: null
-      } as any)
-      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
-        supports_manager_v4_ui: true
-      })
-      vi.mocked(api.getServerFeature).mockReturnValue(true)
-      vi.mocked(useFeatureFlags).mockReturnValue({
-        flags: { supportsManagerV4: true },
-        featureFlag: vi.fn()
-      } as any)
-      vi.mocked(useExtensionStore).mockReturnValue({
-        extensions: []
-      } as any)
-
-      const store = useManagerStateStore()
-
-      expect(store.managerUIState).toBe(ManagerUIState.NEW_UI)
-    })
-  })
-})
diff --git a/tests-ui/tests/utils/mathUtil.test.ts b/tests-ui/tests/utils/mathUtil.test.ts
new file mode 100644
index 000000000..c4cb16dd8
--- /dev/null
+++ b/tests-ui/tests/utils/mathUtil.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
+import { computeUnionBounds, gcd, lcm } from '@/utils/mathUtil'
+
+describe('mathUtil', () => {
+  describe('gcd', () => {
+    it('should compute greatest common divisor correctly', () => {
+      expect(gcd(48, 18)).toBe(6)
+      expect(gcd(100, 25)).toBe(25)
+      expect(gcd(17, 13)).toBe(1)
+      expect(gcd(0, 5)).toBe(5)
+      expect(gcd(5, 0)).toBe(5)
+    })
+  })
+
+  describe('lcm', () => {
+    it('should compute least common multiple correctly', () => {
+      expect(lcm(4, 6)).toBe(12)
+      expect(lcm(15, 20)).toBe(60)
+      expect(lcm(7, 11)).toBe(77)
+    })
+  })
+
+  describe('computeUnionBounds', () => {
+    it('should return null for empty input', () => {
+      expect(computeUnionBounds([])).toBe(null)
+    })
+
+    // Tests for tuple format (ReadOnlyRect)
+    it('should work with ReadOnlyRect tuple format', () => {
+      const tuples: ReadOnlyRect[] = [
+        [10, 20, 30, 40] as const, // bounds: 10,20 to 40,60
+        [50, 10, 20, 30] as const // bounds: 50,10 to 70,40
+      ]
+
+      const result = computeUnionBounds(tuples)
+
+      expect(result).toEqual({
+        x: 10, // min(10, 50)
+        y: 10, // min(20, 10)
+        width: 60, // max(40, 70) - min(10, 50) = 70 - 10
+        height: 50 // max(60, 40) - min(20, 10) = 60 - 10
+      })
+    })
+
+    it('should handle single ReadOnlyRect tuple', () => {
+      const tuple: ReadOnlyRect = [10, 20, 30, 40] as const
+      const result = computeUnionBounds([tuple])
+
+      expect(result).toEqual({
+        x: 10,
+        y: 20,
+        width: 30,
+        height: 40
+      })
+    })
+
+    it('should handle tuple format with negative dimensions', () => {
+      const tuples: ReadOnlyRect[] = [
+        [100, 50, -20, -10] as const, // x+width=80, y+height=40
+        [90, 45, 15, 20] as const // x+width=105, y+height=65
+      ]
+
+      const result = computeUnionBounds(tuples)
+
+      expect(result).toEqual({
+        x: 90, // min(100, 90)
+        y: 45, // min(50, 45)
+        width: 15, // max(80, 105) - min(100, 90) = 105 - 90
+        height: 20 // max(40, 65) - min(50, 45) = 65 - 45
+      })
+    })
+
+    it('should maintain optimal performance with SoA tuples', () => {
+      // Test that array access is as expected for typical selection sizes
+      const tuples: ReadOnlyRect[] = Array.from(
+        { length: 10 },
+        (_, i) =>
+          [
+            i * 20, // x
+            i * 15, // y
+            100 + i * 5, // width
+            80 + i * 3 // height
+          ] as const
+      )
+
+      const result = computeUnionBounds(tuples)
+
+      expect(result).toBeTruthy()
+      expect(result!.x).toBe(0)
+      expect(result!.y).toBe(0)
+      expect(result!.width).toBe(325)
+      expect(result!.height).toBe(242)
+    })
+  })
+})
diff --git a/tests-ui/tests/utils/packUtils.test.ts b/tests-ui/tests/utils/packUtils.test.ts
new file mode 100644
index 000000000..6af9ef43f
--- /dev/null
+++ b/tests-ui/tests/utils/packUtils.test.ts
@@ -0,0 +1,254 @@
+import { describe, expect, it } from 'vitest'
+
+import { normalizePackId, normalizePackKeys } from '@/utils/packUtils'
+
+describe('packUtils', () => {
+  describe('normalizePackId', () => {
+    it('should return pack ID unchanged when no version suffix exists', () => {
+      expect(normalizePackId('ComfyUI-GGUF')).toBe('ComfyUI-GGUF')
+      expect(normalizePackId('ComfyUI-Manager')).toBe('ComfyUI-Manager')
+      expect(normalizePackId('simple-pack')).toBe('simple-pack')
+    })
+
+    it('should remove version suffix with underscores', () => {
+      expect(normalizePackId('ComfyUI-GGUF@1_1_4')).toBe('ComfyUI-GGUF')
+      expect(normalizePackId('ComfyUI-Manager@2_0_0')).toBe('ComfyUI-Manager')
+      expect(normalizePackId('pack@1_0_0_beta')).toBe('pack')
+    })
+
+    it('should remove version suffix with dots', () => {
+      expect(normalizePackId('ComfyUI-GGUF@1.1.4')).toBe('ComfyUI-GGUF')
+      expect(normalizePackId('pack@2.0.0')).toBe('pack')
+    })
+
+    it('should handle multiple @ symbols by only removing after first @', () => {
+      expect(normalizePackId('pack@1_0_0@extra')).toBe('pack')
+      expect(normalizePackId('my@pack@1_0_0')).toBe('my')
+    })
+
+    it('should handle empty string', () => {
+      expect(normalizePackId('')).toBe('')
+    })
+
+    it('should handle pack ID with @ but no version', () => {
+      expect(normalizePackId('pack@')).toBe('pack')
+    })
+
+    it('should handle special characters in pack name', () => {
+      expect(normalizePackId('my-pack_v2@1_0_0')).toBe('my-pack_v2')
+      expect(normalizePackId('pack.with.dots@2_0_0')).toBe('pack.with.dots')
+      expect(normalizePackId('UPPERCASE-Pack@1_0_0')).toBe('UPPERCASE-Pack')
+    })
+
+    it('should handle edge cases', () => {
+      // Only @ symbol
+      expect(normalizePackId('@')).toBe('')
+      expect(normalizePackId('@1_0_0')).toBe('')
+
+      // Whitespace
+      expect(normalizePackId(' pack @1_0_0')).toBe(' pack ')
+      expect(normalizePackId('pack @1_0_0')).toBe('pack ')
+    })
+  })
+
+  describe('normalizePackKeys', () => {
+    it('should normalize all keys with version suffixes', () => {
+      const input = {
+        'ComfyUI-GGUF': { ver: '1.1.4', enabled: true },
+        'ComfyUI-Manager@2_0_0': { ver: '2.0.0', enabled: false },
+        'another-pack@1_0_0': { ver: '1.0.0', enabled: true }
+      }
+
+      const expected = {
+        'ComfyUI-GGUF': { ver: '1.1.4', enabled: true },
+        'ComfyUI-Manager': { ver: '2.0.0', enabled: false },
+        'another-pack': { ver: '1.0.0', enabled: true }
+      }
+
+      expect(normalizePackKeys(input)).toEqual(expected)
+    })
+
+    it('should handle empty object', () => {
+      expect(normalizePackKeys({})).toEqual({})
+    })
+
+    it('should handle keys without version suffixes', () => {
+      const input = {
+        pack1: { data: 'value1' },
+        pack2: { data: 'value2' }
+      }
+
+      expect(normalizePackKeys(input)).toEqual(input)
+    })
+
+    it('should handle mixed keys (with and without versions)', () => {
+      const input = {
+        'normal-pack': { ver: '1.0.0' },
+        'versioned-pack@2_0_0': { ver: '2.0.0' },
+        'another-normal': { ver: '3.0.0' },
+        'another-versioned@4_0_0': { ver: '4.0.0' }
+      }
+
+      const expected = {
+        'normal-pack': { ver: '1.0.0' },
+        'versioned-pack': { ver: '2.0.0' },
+        'another-normal': { ver: '3.0.0' },
+        'another-versioned': { ver: '4.0.0' }
+      }
+
+      expect(normalizePackKeys(input)).toEqual(expected)
+    })
+
+    it('should handle duplicate keys after normalization (last one wins)', () => {
+      const input = {
+        'pack@1_0_0': { ver: '1.0.0', data: 'first' },
+        'pack@2_0_0': { ver: '2.0.0', data: 'second' },
+        pack: { ver: '3.0.0', data: 'third' }
+      }
+
+      const result = normalizePackKeys(input)
+
+      // The exact behavior depends on object iteration order,
+      // but there should only be one 'pack' key in the result
+      expect(Object.keys(result)).toEqual(['pack'])
+      expect(result.pack).toBeDefined()
+      expect(result.pack.ver).toBeDefined()
+    })
+
+    it('should preserve value references', () => {
+      const value1 = { ver: '1.0.0', complex: { nested: 'data' } }
+      const value2 = { ver: '2.0.0', complex: { nested: 'data2' } }
+
+      const input = {
+        'pack1@1_0_0': value1,
+        'pack2@2_0_0': value2
+      }
+
+      const result = normalizePackKeys(input)
+
+      // Values should be the same references, not cloned
+      expect(result.pack1).toBe(value1)
+      expect(result.pack2).toBe(value2)
+    })
+
+    it('should handle special characters in keys', () => {
+      const input = {
+        '@1_0_0': { ver: '1.0.0' },
+        'my-pack.v2@2_0_0': { ver: '2.0.0' },
+        'UPPERCASE@3_0_0': { ver: '3.0.0' }
+      }
+
+      const expected = {
+        '': { ver: '1.0.0' },
+        'my-pack.v2': { ver: '2.0.0' },
+        UPPERCASE: { ver: '3.0.0' }
+      }
+
+      expect(normalizePackKeys(input)).toEqual(expected)
+    })
+
+    it('should work with different value types', () => {
+      const input = {
+        'pack1@1_0_0': 'string value',
+        'pack2@2_0_0': 123,
+        'pack3@3_0_0': null,
+        'pack4@4_0_0': undefined,
+        'pack5@5_0_0': true,
+        pack6: []
+      }
+
+      const expected = {
+        pack1: 'string value',
+        pack2: 123,
+        pack3: null,
+        pack4: undefined,
+        pack5: true,
+        pack6: []
+      }
+
+      expect(normalizePackKeys(input)).toEqual(expected)
+    })
+  })
+
+  describe('Integration scenarios from JSDoc examples', () => {
+    it('should handle the examples from normalizePackId JSDoc', () => {
+      expect(normalizePackId('ComfyUI-GGUF')).toBe('ComfyUI-GGUF')
+      expect(normalizePackId('ComfyUI-GGUF@1_1_4')).toBe('ComfyUI-GGUF')
+    })
+
+    it('should handle the examples from normalizePackKeys JSDoc', () => {
+      const input = {
+        'ComfyUI-GGUF': { ver: '1.1.4', enabled: true },
+        'ComfyUI-Manager@2_0_0': { ver: '2.0.0', enabled: false }
+      }
+
+      const expected = {
+        'ComfyUI-GGUF': { ver: '1.1.4', enabled: true },
+        'ComfyUI-Manager': { ver: '2.0.0', enabled: false }
+      }
+
+      expect(normalizePackKeys(input)).toEqual(expected)
+    })
+  })
+
+  describe('Real-world scenarios', () => {
+    it('should handle typical ComfyUI-Manager response with mixed enabled/disabled packs', () => {
+      // Simulating actual server response pattern
+      const serverResponse = {
+        // Enabled packs come without version suffix
+        'ComfyUI-Essential': { ver: '1.2.3', enabled: true, aux_id: undefined },
+        'ComfyUI-Impact': { ver: '2.0.0', enabled: true, aux_id: undefined },
+        // Disabled packs come with version suffix
+        'ComfyUI-GGUF@1_1_4': {
+          ver: '1.1.4',
+          enabled: false,
+          aux_id: undefined
+        },
+        'ComfyUI-Manager@2_5_0': {
+          ver: '2.5.0',
+          enabled: false,
+          aux_id: undefined
+        }
+      }
+
+      const normalized = normalizePackKeys(serverResponse)
+
+      // All keys should be normalized (no version suffixes)
+      expect(Object.keys(normalized)).toEqual([
+        'ComfyUI-Essential',
+        'ComfyUI-Impact',
+        'ComfyUI-GGUF',
+        'ComfyUI-Manager'
+      ])
+
+      // Values should be preserved
+      expect(normalized['ComfyUI-GGUF']).toEqual({
+        ver: '1.1.4',
+        enabled: false,
+        aux_id: undefined
+      })
+    })
+
+    it('should allow consistent access by pack ID regardless of enabled state', () => {
+      const packsBeforeToggle = {
+        'my-pack': { ver: '1.0.0', enabled: true }
+      }
+
+      const packsAfterToggle = {
+        'my-pack@1_0_0': { ver: '1.0.0', enabled: false }
+      }
+
+      const normalizedBefore = normalizePackKeys(packsBeforeToggle)
+      const normalizedAfter = normalizePackKeys(packsAfterToggle)
+
+      // Both should have the same key after normalization
+      expect(normalizedBefore['my-pack']).toBeDefined()
+      expect(normalizedAfter['my-pack']).toBeDefined()
+
+      // Can access by the same key regardless of the original format
+      expect(Object.keys(normalizedBefore)).toEqual(
+        Object.keys(normalizedAfter)
+      )
+    })
+  })
+})
diff --git a/tests-ui/tests/utils/spatial/QuadTree.test.ts b/tests-ui/tests/utils/spatial/QuadTree.test.ts
new file mode 100644
index 000000000..31831159a
--- /dev/null
+++ b/tests-ui/tests/utils/spatial/QuadTree.test.ts
@@ -0,0 +1,269 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
+
+describe('QuadTree', () => {
+  let quadTree: QuadTree<string>
+  const worldBounds: Bounds = { x: 0, y: 0, width: 1000, height: 1000 }
+
+  beforeEach(() => {
+    quadTree = new QuadTree<string>(worldBounds, {
+      maxDepth: 4,
+      maxItemsPerNode: 4
+    })
+  })
+
+  describe('insertion', () => {
+    it('should insert items within bounds', () => {
+      const success = quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'node1'
+      )
+      expect(success).toBe(true)
+      expect(quadTree.size).toBe(1)
+    })
+
+    it('should reject items outside bounds', () => {
+      const success = quadTree.insert(
+        'node1',
+        { x: -100, y: -100, width: 50, height: 50 },
+        'node1'
+      )
+      expect(success).toBe(false)
+      expect(quadTree.size).toBe(0)
+    })
+
+    it('should handle duplicate IDs by replacing', () => {
+      quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'data1'
+      )
+      quadTree.insert(
+        'node1',
+        { x: 200, y: 200, width: 50, height: 50 },
+        'data2'
+      )
+
+      expect(quadTree.size).toBe(1)
+      const results = quadTree.query({
+        x: 150,
+        y: 150,
+        width: 100,
+        height: 100
+      })
+      expect(results).toContain('data2')
+      expect(results).not.toContain('data1')
+    })
+  })
+
+  describe('querying', () => {
+    beforeEach(() => {
+      // Insert test nodes in a grid pattern
+      for (let x = 0; x < 10; x++) {
+        for (let y = 0; y < 10; y++) {
+          const id = `node_${x}_${y}`
+          quadTree.insert(
+            id,
+            {
+              x: x * 100,
+              y: y * 100,
+              width: 50,
+              height: 50
+            },
+            id
+          )
+        }
+      }
+    })
+
+    it('should find nodes within query bounds', () => {
+      const results = quadTree.query({ x: 0, y: 0, width: 250, height: 250 })
+      expect(results.length).toBe(9) // 3x3 grid
+    })
+
+    it('should return empty array for out-of-bounds query', () => {
+      const results = quadTree.query({
+        x: 2000,
+        y: 2000,
+        width: 100,
+        height: 100
+      })
+      expect(results.length).toBe(0)
+    })
+
+    it('should handle partial overlaps', () => {
+      const results = quadTree.query({ x: 25, y: 25, width: 100, height: 100 })
+      expect(results.length).toBe(4) // 2x2 grid due to overlap
+    })
+
+    it('should handle large query areas efficiently', () => {
+      const startTime = performance.now()
+      const results = quadTree.query({ x: 0, y: 0, width: 1000, height: 1000 })
+      const queryTime = performance.now() - startTime
+
+      expect(results.length).toBe(100) // All nodes
+      expect(queryTime).toBeLessThan(5) // Should be fast
+    })
+  })
+
+  describe('removal', () => {
+    it('should remove existing items', () => {
+      quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'node1'
+      )
+      expect(quadTree.size).toBe(1)
+
+      const success = quadTree.remove('node1')
+      expect(success).toBe(true)
+      expect(quadTree.size).toBe(0)
+    })
+
+    it('should handle removal of non-existent items', () => {
+      const success = quadTree.remove('nonexistent')
+      expect(success).toBe(false)
+    })
+  })
+
+  describe('updating', () => {
+    it('should update item position', () => {
+      quadTree.insert(
+        'node1',
+        { x: 100, y: 100, width: 50, height: 50 },
+        'node1'
+      )
+
+      const success = quadTree.update('node1', {
+        x: 200,
+        y: 200,
+        width: 50,
+        height: 50
+      })
+      expect(success).toBe(true)
+
+      // Should not find at old position
+      const oldResults = quadTree.query({
+        x: 75,
+        y: 75,
+        width: 100,
+        height: 100
+      })
+      expect(oldResults).not.toContain('node1')
+
+      // Should find at new position
+      const newResults = quadTree.query({
+        x: 175,
+        y: 175,
+        width: 100,
+        height: 100
+      })
+      expect(newResults).toContain('node1')
+    })
+  })
+
+  describe('subdivision', () => {
+    it('should subdivide when exceeding max items', () => {
+      // Insert 5 items (max is 4) to trigger subdivision
+      for (let i = 0; i < 5; i++) {
+        quadTree.insert(
+          `node${i}`,
+          {
+            x: i * 10,
+            y: i * 10,
+            width: 5,
+            height: 5
+          },
+          `node${i}`
+        )
+      }
+
+      expect(quadTree.size).toBe(5)
+
+      // Verify all items can still be found
+      const allResults = quadTree.query(worldBounds)
+      expect(allResults.length).toBe(5)
+    })
+  })
+
+  describe('performance', () => {
+    it('should handle 1000 nodes efficiently', () => {
+      const insertStart = performance.now()
+
+      // Insert 1000 nodes
+      for (let i = 0; i < 1000; i++) {
+        const x = Math.random() * 900
+        const y = Math.random() * 900
+        quadTree.insert(
+          `node${i}`,
+          {
+            x,
+            y,
+            width: 50,
+            height: 50
+          },
+          `node${i}`
+        )
+      }
+
+      const insertTime = performance.now() - insertStart
+      expect(insertTime).toBeLessThan(50) // Should be fast
+
+      // Query performance
+      const queryStart = performance.now()
+      const results = quadTree.query({
+        x: 400,
+        y: 400,
+        width: 200,
+        height: 200
+      })
+      const queryTime = performance.now() - queryStart
+
+      expect(queryTime).toBeLessThan(2) // Queries should be very fast
+      expect(results.length).toBeGreaterThan(0)
+      expect(results.length).toBeLessThan(1000) // Should cull most nodes
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle zero-sized bounds', () => {
+      const success = quadTree.insert(
+        'point',
+        { x: 100, y: 100, width: 0, height: 0 },
+        'point'
+      )
+      expect(success).toBe(true)
+
+      const results = quadTree.query({ x: 99, y: 99, width: 2, height: 2 })
+      expect(results).toContain('point')
+    })
+
+    it('should handle items spanning multiple quadrants', () => {
+      const success = quadTree.insert(
+        'large',
+        {
+          x: 400,
+          y: 400,
+          width: 200,
+          height: 200
+        },
+        'large'
+      )
+      expect(success).toBe(true)
+
+      // Should be found when querying any overlapping quadrant
+      const topLeft = quadTree.query({ x: 0, y: 0, width: 500, height: 500 })
+      const bottomRight = quadTree.query({
+        x: 500,
+        y: 500,
+        width: 500,
+        height: 500
+      })
+
+      expect(topLeft).toContain('large')
+      expect(bottomRight).toContain('large')
+    })
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
index 675a099c3..e183ed3f2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2022",
+    "target": "ES2023",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "ES2023.Array", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
     "incremental": true,
     "sourceMap": true,
diff --git a/vitest.config.ts b/vitest.config.ts
index 765a2ec11..36fdb1a00 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -20,11 +20,19 @@ export default defineConfig({
     retry: process.env.CI ? 2 : 0,
     include: [
       'tests-ui/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
-      'src/components/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
+      'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
     ],
     coverage: {
       reporter: ['text', 'json', 'html']
-    }
+    },
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/cypress/**',
+      '**/.{idea,git,cache,output,temp}/**',
+      '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*',
+      'src/lib/litegraph/test/**'
+    ]
   },
   resolve: {
     alias: {