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/.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/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/.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/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/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/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..7aa22906b 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..41bb283d9 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-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..2006231c7 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/docs/adr/0004-crdt-based-layout-system.md b/docs/adr/0003-crdt-based-layout-system.md
similarity index 99%
rename from docs/adr/0004-crdt-based-layout-system.md
rename to docs/adr/0003-crdt-based-layout-system.md
index ceb483a6f..1eceb2a1f 100644
--- a/docs/adr/0004-crdt-based-layout-system.md
+++ b/docs/adr/0003-crdt-based-layout-system.md
@@ -1,4 +1,4 @@
-# 4. Centralized Layout Management with CRDT
+# 3. Centralized Layout Management with CRDT
 
 Date: 2025-08-27
 
diff --git a/docs/adr/README.md b/docs/adr/README.md
index 1b267345e..00e50a639 100644
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -12,6 +12,7 @@ An Architecture Decision Record captures an important architectural decision mad
 |-----|-------|--------|------|
 | [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 | Accepted | 2025-08-25 |
+| [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
 
 ## Creating a New ADR
 
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 2c1167ab3..9df077d77 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -2,84 +2,56 @@ 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
     '@trivago/prettier-plugin-sort-imports'
   ],
   ignore: [
-    // Generated files
-    'dist/**',
-    'types/**',
-    'node_modules/**',
-    // Config files that might not show direct usage
-    '.husky/**',
-    // Temporary or cache files
-    '.vite/**',
-    'coverage/**',
-    // i18n config
-    '.i18nrc.cjs',
-    // Vitest litegraph config
-    'vitest.litegraph.config.ts',
-    // Test setup files
-    'browser_tests/globalSetup.ts',
-    'browser_tests/globalTeardown.ts',
-    'browser_tests/utils/**',
-    // Scripts
-    'scripts/**',
-    // Vite config files
-    'vite.electron.config.mts',
-    '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',
-    // Generated file: openapi
-    'src/types/comfyRegistryTypes.ts'
+    '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: {
-    classMembers: 'off'
+  compilers: {
+    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
+    css: (text: string) =>
+      [
+        ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
+      ].join('\n')
+  },
+  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'
-  ],
-  // Include dependencies analysis
-  includeEntryExports: true
+  ]
 }
 
 export default config
diff --git a/package.json b/package.json
index 0a8700fd2..8e3876eb9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.1",
+  "version": "1.27.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -25,8 +25,8 @@
     "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": "eslint src --cache --concurrency=auto",
+    "lint:fix": "eslint src --cache --fix --concurrency=auto",
     "lint:no-cache": "eslint src",
     "lint:fix:no-cache": "eslint src --fix",
     "knip": "knip --cache",
@@ -62,7 +62,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",
@@ -84,7 +84,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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b54c4837d..bbbfd7c1b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,19 +176,19 @@ importers:
         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)
@@ -241,23 +241,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
@@ -307,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)
@@ -960,8 +960,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':
@@ -1314,32 +1314,50 @@ 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}
+
+  '@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':
@@ -1561,20 +1579,20 @@ 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@2.2.380':
@@ -2510,9 +2528,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==}
 
@@ -2594,26 +2609,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==}
@@ -2621,45 +2630,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==}
@@ -2667,11 +2677,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==}
@@ -2680,14 +2690,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}
@@ -2898,6 +2915,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'}
@@ -3000,10 +3022,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==}
 
@@ -3490,10 +3508,6 @@ packages:
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
-  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'}
@@ -3731,8 +3745,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:
@@ -3743,8 +3757,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:
@@ -3760,6 +3774,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}
@@ -3917,9 +3935,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==}
 
@@ -4059,10 +4074,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'}
@@ -4177,6 +4188,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==}
 
@@ -5685,10 +5700,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'}
@@ -5879,9 +5890,6 @@ 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==}
 
@@ -5958,12 +5966,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'}
@@ -6005,14 +6007,12 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  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==}
@@ -7412,7 +7412,7 @@ snapshots:
 
   '@babel/runtime@7.27.6': {}
 
-  '@babel/runtime@7.28.3': {}
+  '@babel/runtime@7.28.4': {}
 
   '@babel/template@7.27.2':
     dependencies:
@@ -7618,22 +7618,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:
@@ -7649,12 +7658,29 @@ 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
 
   '@firebase/analytics-compat@0.2.18(@firebase/app-compat@0.2.53)(@firebase/app@0.11.4)':
@@ -7987,16 +8013,16 @@ 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@2.2.380':
     dependencies:
@@ -8027,14 +8053,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
@@ -8047,7 +8073,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
@@ -8244,10 +8270,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
@@ -8278,11 +8304,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
@@ -8366,10 +8392,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
@@ -8388,11 +8414,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
@@ -8880,7 +8906,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
@@ -9098,8 +9124,6 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
-  '@types/estree@1.0.6': {}
-
   '@types/estree@1.0.8': {}
 
   '@types/fs-extra@11.0.4':
@@ -9188,33 +9212,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
@@ -9228,50 +9250,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:
@@ -9289,38 +9309,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)
@@ -9624,10 +9660,16 @@ snapshots:
     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: {}
@@ -9737,8 +9779,6 @@ snapshots:
 
   arr-rotate@1.0.0: {}
 
-  array-union@2.1.0: {}
-
   asap@2.0.6: {}
 
   assert-never@1.4.0: {}
@@ -10221,10 +10261,6 @@ snapshots:
 
   diff-match-patch@1.0.5: {}
 
-  dir-glob@3.0.1:
-    dependencies:
-      path-type: 4.0.0
-
   dirty-json@0.9.2:
     dependencies:
       lex: 1.7.9
@@ -10430,49 +10466,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
@@ -10482,7 +10518,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
@@ -10491,28 +10527,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
@@ -10527,7 +10564,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:
@@ -10541,6 +10577,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
@@ -10745,13 +10787,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: {}
@@ -10894,15 +10934,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: {}
@@ -11006,6 +11037,8 @@ snapshots:
 
   ignore@6.0.2: {}
 
+  ignore@7.0.5: {}
+
   immediate@3.0.6: {}
 
   import-fresh@3.3.0:
@@ -12841,8 +12874,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
@@ -13047,8 +13078,6 @@ snapshots:
       glob: 10.4.5
       minimatch: 9.0.5
 
-  text-table@0.2.0: {}
-
   three@0.170.0: {}
 
   tiny-invariant@1.3.3: {}
@@ -13108,10 +13137,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
@@ -13145,15 +13170,15 @@ snapshots:
 
   type-fest@4.41.0: {}
 
-  typescript-eslint@8.0.0(eslint@9.12.0(jiti@2.4.2))(typescript@5.9.2):
+  typescript-eslint@8.42.0(eslint@9.35.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: {}
@@ -13503,10 +13528,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
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/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/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..3bd571179 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -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/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/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 467da7e5d..c6eb86404 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -33,8 +33,8 @@
 
   <!-- TransformPane for Vue node rendering -->
   <TransformPane
-    v-if="isVueNodesEnabled && canvasStore.canvas && comfyAppReady"
-    :canvas="canvasStore.canvas as LGraphCanvas"
+    v-if="isVueNodesEnabled && comfyApp.canvas && comfyAppReady"
+    :canvas="comfyApp.canvas"
     @transform-update="handleTransformUpdate"
   >
     <!-- Vue nodes rendered based on graph nodes -->
@@ -44,7 +44,6 @@
       :node-data="nodeData"
       :position="nodePositions.get(nodeData.id)"
       :size="nodeSizes.get(nodeData.id)"
-      :selected="nodeData.selected"
       :readonly="false"
       :executing="executionStore.executingNodeId === nodeData.id"
       :error="
@@ -79,6 +78,7 @@ import {
   computed,
   onMounted,
   onUnmounted,
+  provide,
   ref,
   shallowRef,
   watch,
@@ -89,21 +89,16 @@ import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitter
 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'
-import TransformPane from '@/components/graph/TransformPane.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
-import { useTransformState } from '@/composables/element/useTransformState'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
-import type {
-  NodeState,
-  VueNodeData
-} from '@/composables/graph/useGraphNodeManager'
+import { useNodeEventHandlers } from '@/composables/graph/useNodeEventHandlers'
+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'
@@ -116,13 +111,10 @@ import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
-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 { LayoutSource } from '@/renderer/core/layout/types'
+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 { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
@@ -155,7 +147,6 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
-const layoutMutations = useLayoutMutations()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -172,280 +163,43 @@ const selectionToolboxEnabled = computed(() =>
 
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 
-// Feature flags (Vue-related)
+// Feature flags
 const { shouldRenderVueNodes } = useVueFeatureFlags()
-
 const isVueNodesEnabled = computed(() => shouldRenderVueNodes.value)
 
-// Vue node lifecycle management - initialize after graph is ready
-let nodeManager: ReturnType<typeof useGraphNodeManager> | null = null
-let cleanupNodeManager: (() => void) | null = null
-
-// Slot layout sync management
-let slotSync: ReturnType<typeof useSlotLayoutSync> | null = null
-let linkSync: ReturnType<typeof useLinkLayoutSync> | null = null
-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()
+// Vue node system
+const vueNodeLifecycle = useVueNodeLifecycle(isVueNodesEnabled)
+const viewportCulling = useViewportCulling(
+  isVueNodesEnabled,
+  vueNodeLifecycle.vueNodeData,
+  vueNodeLifecycle.nodeDataTrigger,
+  vueNodeLifecycle.nodeManager
 )
-const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
-  new Map()
-)
-let detectChangesInRAF = () => {}
+const nodeEventHandlers = useNodeEventHandlers(vueNodeLifecycle.nodeManager)
 
-// Initialize node manager when graph becomes available
-// Add a reactivity trigger to force computed re-evaluation
-const nodeDataTrigger = ref(0)
-
-const initializeNodeManager = () => {
-  if (!comfyApp.graph || nodeManager) return
-  nodeManager = useGraphNodeManager(comfyApp.graph)
-  cleanupNodeManager = nodeManager.cleanup
-  // Use the manager's reactive maps directly
-  vueNodeData.value = nodeManager.vueNodeData
-  nodeState.value = nodeManager.nodeState
-  nodePositions.value = nodeManager.nodePositions
-  nodeSizes.value = nodeManager.nodeSizes
-  detectChangesInRAF = nodeManager.detectChangesInRAF
-
-  // Initialize layout system with existing nodes
-  const nodes = comfyApp.graph._nodes.map((node: any) => ({
-    id: node.id.toString(),
-    pos: node.pos,
-    size: node.size
-  }))
-  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 slot layout sync for hit detection
-  slotSync = useSlotLayoutSync()
-  if (canvasStore.canvas) {
-    slotSync.start(canvasStore.canvas as LGraphCanvas)
-  }
-
-  // Initialize link layout sync for event-driven updates
-  linkSync = useLinkLayoutSync()
-  if (canvasStore.canvas) {
-    linkSync.start(canvasStore.canvas as LGraphCanvas)
-  }
-
-  // Force computed properties to re-evaluate
-  nodeDataTrigger.value++
-}
-
-const disposeNodeManagerAndSyncs = () => {
-  if (!nodeManager) return
-  try {
-    cleanupNodeManager?.()
-  } catch {
-    /* empty */
-  }
-  nodeManager = null
-  cleanupNodeManager = null
-
-  // Clean up slot layout sync
-  if (slotSync) {
-    slotSync.stop()
-    slotSync = null
-  }
-
-  // Clean up link layout sync
-  if (linkSync) {
-    linkSync.stop()
-    linkSync = null
-  }
-
-  // Reset reactive maps to inert defaults
-  vueNodeData.value = new Map()
-  nodeState.value = new Map()
-  nodePositions.value = new Map()
-  nodeSizes.value = new Map()
-}
-
-// Watch for transformPaneEnabled to gate the node manager lifecycle
-watch(
-  () => isVueNodesEnabled.value && Boolean(comfyApp.graph),
-  (enabled) => {
-    if (enabled) {
-      initializeNodeManager()
-    } else {
-      disposeNodeManagerAndSyncs()
-    }
-  },
-  { immediate: true }
-)
-
-// Transform state for viewport culling
-const { syncWithCanvas } = useTransformState()
-
-const nodesToRender = computed(() => {
-  // Early return for zero overhead when Vue nodes are disabled
-  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
-  if (nodeManager && canvasStore.canvas && comfyApp.canvas) {
-    const canvas = canvasStore.canvas
-    const manager = nodeManager
-
-    // 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
-})
-
-let lastScale = 1
-let lastOffsetX = 0
-let lastOffsetY = 0
+const nodePositions = vueNodeLifecycle.nodePositions
+const nodeSizes = vueNodeLifecycle.nodeSizes
+const nodesToRender = viewportCulling.nodesToRender
 
 const handleTransformUpdate = () => {
-  // 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 ||
-      currentOffsetX !== lastOffsetX ||
-      currentOffsetY !== lastOffsetY
-    ) {
-      syncWithCanvas(comfyApp.canvas)
-      lastScale = currentScale
-      lastOffsetX = currentOffsetX
-      lastOffsetY = currentOffsetY
-    }
-  }
-
-  // Detect node changes during transform updates
-  detectChangesInRAF()
-
-  // Trigger reactivity for nodesToRender
-  void nodesToRender.value.length
+  viewportCulling.handleTransformUpdate(
+    vueNodeLifecycle.detectChangesInRAF.value
+  )
 }
+const handleNodeSelect = nodeEventHandlers.handleNodeSelect
+const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
+const handleNodeTitleUpdate = nodeEventHandlers.handleNodeTitleUpdate
 
-// Node event handlers
-const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
-  if (!canvasStore.canvas || !nodeManager) return
-
-  const node = nodeManager.getNode(nodeData.id)
-  if (!node) return
-
-  if (!event.ctrlKey && !event.metaKey) {
-    canvasStore.canvas.deselectAllNodes()
-  }
-
-  canvasStore.canvas.selectNode(node)
-
-  // Bring node to front when clicked (similar to LiteGraph behavior)
-  // Skip if node is pinned
-  if (!node.flags?.pinned) {
-    layoutMutations.setSource(LayoutSource.Vue)
-    layoutMutations.bringNodeToFront(nodeData.id)
-  }
-  node.selected = true
-
-  canvasStore.updateSelectedItems()
-}
-
-// Handle node collapse state changes
-const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
-  if (!nodeManager) return
-
-  const node = nodeManager.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
-const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
-  if (!nodeManager) return
-
-  const node = nodeManager.getNode(nodeId)
-  if (!node) return
-
-  // Update the node title in LiteGraph for persistence
-  node.title = newTitle
-}
+// 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')
@@ -653,29 +407,7 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
-  // Set up Vue node initialization only when enabled
-  if (isVueNodesEnabled.value) {
-    // Set up a one-time listener for when the first node is added
-    // This handles the case where Vue nodes are enabled but the graph starts empty
-    // TODO: Replace this with a reactive graph mutations observer when available
-    if (comfyApp.graph && !nodeManager && comfyApp.graph._nodes.length === 0) {
-      const originalOnNodeAdded = comfyApp.graph.onNodeAdded
-      comfyApp.graph.onNodeAdded = function (node: any) {
-        // Restore original handler
-        comfyApp.graph.onNodeAdded = originalOnNodeAdded
-
-        // Initialize node manager if needed
-        if (isVueNodesEnabled.value && !nodeManager) {
-          initializeNodeManager()
-        }
-
-        // Call original handler
-        if (originalOnNodeAdded) {
-          originalOnNodeAdded.call(this, node)
-        }
-      }
-    }
-  }
+  vueNodeLifecycle.setupEmptyGraphListener()
 
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
@@ -719,17 +451,6 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  if (nodeManager) {
-    nodeManager.cleanup()
-    nodeManager = null
-  }
-  if (slotSync) {
-    slotSync.stop()
-    slotSync = null
-  }
-  if (linkSync) {
-    linkSync.stop()
-    linkSync = null
-  }
+  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/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/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/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
index 3e382492b..02145c100 100644
--- a/src/composables/graph/useCanvasTransformSync.ts
+++ b/src/composables/graph/useCanvasTransformSync.ts
@@ -2,7 +2,7 @@ import { onUnmounted, ref } from 'vue'
 
 import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
 
-export interface CanvasTransformSyncOptions {
+interface CanvasTransformSyncOptions {
   /**
    * Whether to automatically start syncing when canvas is available
    * @default true
@@ -10,7 +10,7 @@ export interface CanvasTransformSyncOptions {
   autoStart?: boolean
 }
 
-export interface CanvasTransformSyncCallbacks {
+interface CanvasTransformSyncCallbacks {
   /**
    * Called when sync starts
    */
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index a5079c453..262d37639 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -2,15 +2,16 @@
  * Vue node lifecycle management for LiteGraph integration
  * Provides event-driven reactivity with performance optimizations
  */
-import { nextTick, reactive, readonly } from 'vue'
+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'
-import { type Bounds, QuadTree } from '../../utils/spatial/QuadTree'
 
 export interface NodeState {
   visible: boolean
@@ -19,14 +20,14 @@ export interface NodeState {
   culled: boolean
 }
 
-export interface NodeMetadata {
+interface NodeMetadata {
   lastRenderTime: number
   cachedBounds: DOMRect | null
   lodLevel: 'high' | 'medium' | 'low'
   spatialIndex?: QuadTree<string>
 }
 
-export interface PerformanceMetrics {
+interface PerformanceMetrics {
   fps: number
   frameTime: number
   updateTime: number
@@ -60,12 +61,12 @@ export interface VueNodeData {
   }
 }
 
-export interface SpatialMetrics {
+interface SpatialMetrics {
   queryTime: number
   nodesInIndex: number
 }
 
-export interface GraphNodeManager {
+interface GraphNodeManager {
   // Reactive state - safe data extracted from LiteGraph nodes
   vueNodeData: ReadonlyMap<string, VueNodeData>
   nodeState: ReadonlyMap<string, NodeState>
@@ -235,11 +236,15 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     }
     if (typeof value === 'object') {
       // Check if it's a File array
-      if (Array.isArray(value) && value.every((item) => item instanceof File)) {
-        return value as File[]
+      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 as object
+      return value
     }
     // If none of the above, return undefined
     console.warn(`Invalid widget value type: ${typeof value}`, value)
@@ -591,6 +596,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
 
   /**
    * 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,
@@ -604,7 +610,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     // Set up widget callbacks BEFORE extracting data (critical order)
     setupNodeWidgetCallbacks(node)
 
-    // Extract safe data for Vue (now with proper callbacks)
+    // Extract safe data for Vue
     vueNodeData.set(id, extractVueNodeData(node))
 
     // Set up reactive tracking state
@@ -614,27 +620,48 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       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 for viewport culling
-    const bounds: Bounds = {
-      x: node.pos[0],
-      y: node.pos[1],
-      width: node.size[0],
-      height: node.size[1]
+    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
+      })
     }
-    spatialIndex.insert(id, bounds, id)
 
-    // Add node to layout store
-    setSource(LayoutSource.Canvas)
-    void createNode(id, {
-      position: { x: node.pos[0], y: node.pos[1] },
-      size: { width: node.size[0], height: node.size[1] },
-      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) {
@@ -789,16 +816,10 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
   }
 
   return {
-    vueNodeData: readonly(vueNodeData) as ReadonlyMap<string, VueNodeData>,
-    nodeState: readonly(nodeState) as ReadonlyMap<string, NodeState>,
-    nodePositions: readonly(nodePositions) as ReadonlyMap<
-      string,
-      { x: number; y: number }
-    >,
-    nodeSizes: readonly(nodeSizes) as ReadonlyMap<
-      string,
-      { width: number; height: number }
-    >,
+    vueNodeData,
+    nodeState,
+    nodePositions,
+    nodeSizes,
     getNode,
     setupEventListeners,
     cleanup,
@@ -807,7 +828,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     detectChangesInRAF,
     getVisibleNodeIds,
     performanceMetrics,
-    spatialMetrics: readonly(spatialMetrics),
+    spatialMetrics,
     getSpatialIndexDebugInfo: () => spatialIndex.getDebugInfo()
   }
 }
diff --git a/src/composables/graph/useNodeEventHandlers.ts b/src/composables/graph/useNodeEventHandlers.ts
new file mode 100644
index 000000000..e00f67b5b
--- /dev/null
+++ b/src/composables/graph/useNodeEventHandlers.ts
@@ -0,0 +1,217 @@
+/**
+ * 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 { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface NodeManager {
+  getNode: (id: string) => any
+}
+
+export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
+  const canvasStore = useCanvasStore()
+  const layoutMutations = useLayoutMutations()
+
+  /**
+   * 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) {
+      layoutMutations.setSource(LayoutSource.Vue)
+      layoutMutations.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.deselectAllNodes()
+    }
+
+    nodeIds.forEach((nodeId) => {
+      const node = nodeManager.value?.getNode(nodeId)
+      if (node && canvasStore.canvas) {
+        canvasStore.canvas.selectNode(node)
+        node.selected = true
+      }
+    })
+
+    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/composables/graph/useSpatialIndex.ts b/src/composables/graph/useSpatialIndex.ts
deleted file mode 100644
index 997e331f7..000000000
--- a/src/composables/graph/useSpatialIndex.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Composable for spatial indexing of nodes using QuadTree
- * Integrates with useGraphNodeManager for efficient viewport culling
- */
-import { useDebounceFn } from '@vueuse/core'
-import { computed, reactive, ref } from 'vue'
-
-import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
-
-export interface SpatialIndexOptions {
-  worldBounds?: Bounds
-  maxDepth?: number
-  maxItemsPerNode?: number
-  updateDebounceMs?: number
-}
-
-interface SpatialMetrics {
-  queryTime: number
-  totalNodes: number
-  visibleNodes: number
-  treeDepth: number
-  rebuildCount: number
-}
-
-export const useSpatialIndex = (options: SpatialIndexOptions = {}) => {
-  // Default world bounds (can be expanded dynamically)
-  const defaultBounds: Bounds = {
-    x: -10000,
-    y: -10000,
-    width: 20000,
-    height: 20000
-  }
-
-  // QuadTree instance
-  const quadTree = ref<QuadTree<string> | null>(null)
-
-  // Performance metrics
-  const metrics = reactive<SpatialMetrics>({
-    queryTime: 0,
-    totalNodes: 0,
-    visibleNodes: 0,
-    treeDepth: 0,
-    rebuildCount: 0
-  })
-
-  // Initialize QuadTree
-  const initialize = (bounds: Bounds = defaultBounds) => {
-    quadTree.value = new QuadTree<string>(bounds, {
-      maxDepth: options.maxDepth ?? 6,
-      maxItemsPerNode: options.maxItemsPerNode ?? 4
-    })
-    metrics.rebuildCount++
-  }
-
-  // Add or update node in spatial index
-  const updateNode = (
-    nodeId: string,
-    position: { x: number; y: number },
-    size: { width: number; height: number }
-  ) => {
-    if (!quadTree.value) {
-      initialize()
-    }
-
-    const bounds: Bounds = {
-      x: position.x,
-      y: position.y,
-      width: size.width,
-      height: size.height
-    }
-
-    // Use insert instead of update - insert handles both new and existing nodes
-    quadTree.value!.insert(nodeId, bounds, nodeId)
-    metrics.totalNodes = quadTree.value!.size
-  }
-
-  // Batch update for multiple nodes
-  const batchUpdate = (
-    updates: Array<{
-      id: string
-      position: { x: number; y: number }
-      size: { width: number; height: number }
-    }>
-  ) => {
-    if (!quadTree.value) {
-      initialize()
-    }
-
-    for (const update of updates) {
-      const bounds: Bounds = {
-        x: update.position.x,
-        y: update.position.y,
-        width: update.size.width,
-        height: update.size.height
-      }
-      // Use insert instead of update - insert handles both new and existing nodes
-      quadTree.value!.insert(update.id, bounds, update.id)
-    }
-
-    metrics.totalNodes = quadTree.value!.size
-  }
-
-  // Remove node from spatial index
-  const removeNode = (nodeId: string) => {
-    if (!quadTree.value) return
-
-    quadTree.value.remove(nodeId)
-    metrics.totalNodes = quadTree.value.size
-  }
-
-  // Query nodes within viewport bounds
-  const queryViewport = (viewportBounds: Bounds): string[] => {
-    if (!quadTree.value) return []
-
-    const startTime = performance.now()
-    const nodeIds = quadTree.value.query(viewportBounds)
-    const queryTime = performance.now() - startTime
-
-    metrics.queryTime = queryTime
-    metrics.visibleNodes = nodeIds.length
-
-    return nodeIds
-  }
-
-  // Get nodes within a radius (for proximity queries)
-  const queryRadius = (
-    center: { x: number; y: number },
-    radius: number
-  ): string[] => {
-    if (!quadTree.value) return []
-
-    const bounds: Bounds = {
-      x: center.x - radius,
-      y: center.y - radius,
-      width: radius * 2,
-      height: radius * 2
-    }
-
-    return quadTree.value.query(bounds)
-  }
-
-  // Clear all nodes
-  const clear = () => {
-    if (!quadTree.value) return
-
-    quadTree.value.clear()
-    metrics.totalNodes = 0
-    metrics.visibleNodes = 0
-  }
-
-  // Rebuild tree (useful after major layout changes)
-  const rebuild = (
-    nodes: Map<
-      string,
-      {
-        position: { x: number; y: number }
-        size: { width: number; height: number }
-      }
-    >
-  ) => {
-    initialize()
-
-    const updates = Array.from(nodes.entries()).map(([id, data]) => ({
-      id,
-      position: data.position,
-      size: data.size
-    }))
-
-    batchUpdate(updates)
-  }
-
-  // Debounced update for performance
-  const debouncedUpdateNode = useDebounceFn(
-    updateNode,
-    options.updateDebounceMs ?? 16
-  )
-
-  return {
-    // Core functions
-    initialize,
-    updateNode,
-    batchUpdate,
-    removeNode,
-    queryViewport,
-    queryRadius,
-    clear,
-    rebuild,
-
-    // Debounced version for high-frequency updates
-    debouncedUpdateNode,
-
-    // Metrics
-    metrics: computed(() => metrics),
-
-    // Direct access to QuadTree (for advanced usage)
-    quadTree: computed(() => quadTree.value)
-  }
-}
diff --git a/src/composables/graph/useTransformSettling.ts b/src/composables/graph/useTransformSettling.ts
index 669cfceaa..bc3d0fc06 100644
--- a/src/composables/graph/useTransformSettling.ts
+++ b/src/composables/graph/useTransformSettling.ts
@@ -2,7 +2,7 @@ import { useDebounceFn, useEventListener, useThrottleFn } from '@vueuse/core'
 import { ref } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 
-export interface TransformSettlingOptions {
+interface TransformSettlingOptions {
   /**
    * Delay in ms before transform is considered "settled" after last interaction
    * @default 200
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
index 1cf2fb353..96b5edcce 100644
--- a/src/composables/graph/useWidgetValue.ts
+++ b/src/composables/graph/useWidgetValue.ts
@@ -6,10 +6,7 @@ import { type Ref, ref, watch } from 'vue'
 
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 
-export interface UseWidgetValueOptions<
-  T extends WidgetValue = WidgetValue,
-  U = T
-> {
+interface UseWidgetValueOptions<T extends WidgetValue = WidgetValue, U = T> {
   /** The widget configuration from LiteGraph */
   widget: SimplifiedWidget<T>
   /** The current value from parent component */
@@ -22,10 +19,7 @@ export interface UseWidgetValueOptions<
   transform?: (value: U) => T
 }
 
-export interface UseWidgetValueReturn<
-  T extends WidgetValue = WidgetValue,
-  U = T
-> {
+interface UseWidgetValueReturn<T extends WidgetValue = WidgetValue, U = T> {
   /** Local value for immediate UI updates */
   localValue: Ref<T>
   /** Handler for user interactions */
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..48529fec1 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: {
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/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 2cd436d93..13291c339 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'
@@ -117,6 +114,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',
@@ -186,8 +192,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')
         }
@@ -734,34 +738,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
+        })
       }
     },
     {
@@ -769,33 +748,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
+        })
       }
     },
     {
@@ -804,32 +775,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
+        })
       }
     },
     {
@@ -935,8 +884,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
+        })
       }
     },
     {
@@ -1001,18 +953,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
+        })
       }
     },
     {
@@ -1021,16 +966,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/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/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 9b6a2a02c..8f023abbe 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'],
diff --git a/src/constants/slotColors.ts b/src/constants/slotColors.ts
index 797bd94f5..6f0d70053 100644
--- a/src/constants/slotColors.ts
+++ b/src/constants/slotColors.ts
@@ -2,7 +2,7 @@
  * Default colors for node slot types
  * Mirrors LiteGraph's slot_default_color_by_type
  */
-export const SLOT_TYPE_COLORS: Record<string, string> = {
+const SLOT_TYPE_COLORS: Record<string, string> = {
   number: '#AAD',
   string: '#DCA',
   boolean: '#DAA',
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/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index fa05ce2b0..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
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/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index cdd387d89..139919c60 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -314,6 +314,7 @@ export class LGraph
     if (this._nodes) {
       for (const _node of this._nodes) {
         _node.onRemoved?.()
+        this.onNodeRemoved?.(_node)
       }
     }
 
@@ -1482,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,
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index 9dacd426e..e0e0031d9 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -165,7 +165,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. */
@@ -667,6 +667,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
@@ -3754,13 +3755,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: [],
@@ -3818,10 +3813,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))
     )
   }
 
@@ -3853,6 +3856,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
 
@@ -3863,15 +3874,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 ??= []
@@ -5093,6 +5100,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) {
diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts
index a68f2a82d..c069bb36b 100644
--- a/src/lib/litegraph/src/LGraphNode.ts
+++ b/src/lib/litegraph/src/LGraphNode.ts
@@ -94,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 */
@@ -118,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 */
@@ -743,35 +743,6 @@ export class LGraphNode
       error: this.#getErrorStrokeStyle,
       selected: this.#getSelectedStrokeStyle
     }
-
-    // Assign onMouseDown implementation
-    this.onMouseDown = (
-      // @ts-expect-error - CanvasPointerEvent type needs fixing
-      e: CanvasPointerEvent,
-      pos: Point,
-      canvas: LGraphCanvas
-    ): boolean => {
-      // Check for title button clicks (only if not collapsed)
-      if (this.title_buttons?.length && !this.flags.collapsed) {
-        // pos contains the offset from the node's position, so we need to use node-relative coordinates
-        const nodeRelativeX = pos[0]
-        const nodeRelativeY = pos[1]
-
-        for (let i = 0; i < this.title_buttons.length; i++) {
-          const button = this.title_buttons[i]
-          if (
-            button.visible &&
-            button.isPointInside(nodeRelativeX, nodeRelativeY)
-          ) {
-            this.onTitleButtonClick(button, canvas)
-            return true // Prevent default behavior
-          }
-        }
-      }
-
-      return false // Allow default behavior
-    }
-
     // Initialize property manager with tracked properties
     this.changeTracker = new LGraphNodeProperties(this)
   }
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 b335f3f81..2b8987ef8 100644
--- a/src/lib/litegraph/src/draw.ts
+++ b/src/lib/litegraph/src/draw.ts
@@ -48,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 0abbf313b..f48a7f141 100644
--- a/src/lib/litegraph/src/interfaces.ts
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -64,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>
 }
@@ -210,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
@@ -273,7 +273,7 @@ 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
 >
@@ -445,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]
 }
diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts
index fd1d1a31a..ddfc12c40 100644
--- a/src/lib/litegraph/src/litegraph.ts
+++ b/src/lib/litegraph/src/litegraph.ts
@@ -8,7 +8,7 @@ import type { CanvasEventDetail } from './types/events'
 import type { RenderShape, TitleMode } from './types/globalEnums'
 
 // Must remain above LiteGraphGlobal (circular dependency due to abstract factory behaviour in `configure`)
-export { Subgraph, type GraphOrSubgraph } from './subgraph/Subgraph'
+export { Subgraph } from './subgraph/Subgraph'
 
 export const LiteGraph = new LiteGraphGlobal()
 
@@ -23,7 +23,7 @@ loadPolyfills()
 /** @deprecated Use {@link Point} instead. */
 export type Vector2 = Point
 
-export interface IContextMenuItem {
+interface IContextMenuItem {
   content: string
   callback?: ContextMenuEventListener
   /** Used as innerHTML for extra child element */
@@ -36,7 +36,7 @@ export interface IContextMenuItem {
   className?: string
 }
 
-export type ContextMenuEventListener = (
+type ContextMenuEventListener = (
   value: IContextMenuItem,
   options: IContextMenuOptions,
   event: MouseEvent,
@@ -74,58 +74,38 @@ 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,
   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, type NodeProperty } from './LGraphNode'
+export { LGraphNode, type NodeId } from './LGraphNode'
 export { COMFY_VUE_NODE_DIMENSIONS } from './LiteGraphGlobal'
-export { type LinkId, LLink } from './LLink'
+export { LLink } from './LLink'
 export { createBounds } from './measure'
 export { Reroute, type RerouteId } from './Reroute'
 export {
@@ -136,23 +116,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'
@@ -161,19 +136,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/slotUtils.ts b/src/lib/litegraph/src/node/slotUtils.ts
index e0eda79c8..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,
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 acbb89043..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,7 +45,7 @@ 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 {}
@@ -57,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/serialisation.ts b/src/lib/litegraph/src/types/serialisation.ts
index 4b1bfed90..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. */
diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
index 4dde6949b..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
@@ -144,7 +144,7 @@ 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
 }
@@ -169,7 +169,7 @@ export interface IMarkdownWidget extends IBaseWidget<string, 'markdown'> {
 }
 
 /** Image display widget */
-export interface IImageWidget extends IBaseWidget<string, 'image'> {
+interface IImageWidget extends IBaseWidget<string, 'image'> {
   type: 'image'
   value: string
 }
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/test/subgraph/fixtures/subgraphFixtures.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
index 1c2d936ac..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
 
diff --git a/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphHelpers.ts
index 4a3bd6c11..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
@@ -422,6 +422,3 @@ export function createEventCapture<T = unknown>(
       capturedEvents.filter((e) => e.type === type)
   }
 }
-
-// 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 aaeb65bae..d28d6ab43 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -968,6 +968,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",
@@ -1023,6 +1035,7 @@
   "menuLabels": {
     "Workflow": "Workflow",
     "Edit": "Edit",
+    "View": "View",
     "Manager": "Manager",
     "Help": "Help",
     "Check for Updates": "Check for Updates",
@@ -1096,6 +1109,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",
@@ -1778,6 +1792,7 @@
     "duplicate": "Duplicate",
     "clearWorkflow": "Clear Workflow",
     "deleteWorkflow": "Delete Workflow",
+    "deleteBlueprint": "Delete Blueprint",
     "enterNewName": "Enter new name"
   },
   "shortcuts": {
@@ -1801,4 +1816,4 @@
     "renderBypassState": "Render Bypass State",
     "renderErrorState": "Render Error State"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/es/commands.json b/src/locales/es/commands.json
index 7d2fef949..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"
   },
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 31acf70ba..0e7bf34ad 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -825,7 +825,11 @@
     "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 to fit": "Ajustar al tamaño"
@@ -1219,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",
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 f7201f187..8c65c07ae 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -825,7 +825,11 @@
     "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 to fit": "Ajuster à l'écran"
@@ -1220,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",
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 8b91c2c95..d97237e7e 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -824,7 +824,11 @@
     "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 to fit": "全体表示にズーム"
@@ -1218,6 +1222,10 @@
     },
     "workflows": "ワークフロー"
   },
+  "subgraphStore": {
+    "blueprintName": "サブグラフ名",
+    "saveBlueprint": "サブグラフをライブラリに保存"
+  },
   "tabMenu": {
     "addToBookmarks": "ブックマークに追加",
     "closeOtherTabs": "他のタブを閉じる",
diff --git a/src/locales/ko/commands.json b/src/locales/ko/commands.json
index a389d7701..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": "실행 큐에 프롬프트 추가"
   },
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index dd573dd06..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": "확인",
@@ -326,7 +326,7 @@
     "findIssues": "문제 찾기",
     "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
     "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
-    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상이 필요합니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래된 버전입니다. 백엔드는 {requiredVersion} 이상 버전이 필요합니다.",
     "goToNode": "노드로 이동",
     "help": "도움말",
     "icon": "아이콘",
@@ -353,7 +353,7 @@
     "micPermissionDenied": "마이크 권한이 거부되었습니다",
     "migrate": "이전(migrate)",
     "missing": "누락됨",
-    "moreWorkflows": "더 많은 워크플로우",
+    "moreWorkflows": "더 많은 워크플로",
     "name": "이름",
     "newFolder": "새 폴더",
     "next": "다음",
@@ -464,8 +464,8 @@
     "appPathLocationTooltip": "ComfyUI의 앱 에셋 디렉토리. ComfyUI 코드 및 에셋을 저장합니다.",
     "cannotWrite": "선택한 경로에 쓸 수 없습니다",
     "chooseInstallationLocation": "설치 위치 선택",
-    "customNodes": "사용자 정의 노드",
-    "customNodesDescription": "기존 ComfyUI 설치에서 사용자 정의 노드를 다시 설치합니다.",
+    "customNodes": "커스텀 노드",
+    "customNodesDescription": "기존 ComfyUI 설치에서 커스텀 노드를 다시 설치합니다.",
     "desktopAppSettings": "데스크탑 앱 설정",
     "desktopAppSettingsDescription": "ComfyUI가 데스크탑에서 어떻게 작동하는지 구성하세요. 이 설정은 나중에 변경할 수 있습니다.",
     "desktopSettings": "데스크탑 설정",
@@ -489,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": {
@@ -633,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)",
@@ -663,7 +663,7 @@
       "pending": "대기 중",
       "unknown": "알 수 없음"
     },
-    "title": "사용자 정의 노드 관리자",
+    "title": "커스텀 노드 관리자",
     "totalNodes": "총 노드",
     "tryAgainLater": "나중에 다시 시도해 주세요.",
     "tryDifferentSearch": "다른 검색어를 시도해 주세요.",
@@ -750,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": "데스크톱 사용자 가이드",
@@ -770,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": "선택한 노드 오른쪽으로 이동",
@@ -779,7 +779,7 @@
     "New": "새로 만들기",
     "Next Opened Workflow": "다음 열린 워크플로",
     "Open": "열기",
-    "Open Custom Nodes Folder": "사용자 정의 노드 폴더 열기",
+    "Open Custom Nodes Folder": "커스텀 노드 폴더 열기",
     "Open DevTools": "개발자 도구 열기",
     "Open Inputs Folder": "입력 폴더 열기",
     "Open Logs Folder": "로그 폴더 열기",
@@ -814,20 +814,24 @@
     "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
     "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
     "Toggle Queue Sidebar": "대기열 사이드바 전환",
-    "Toggle Workflows Sidebar": "워크플로우 사이드바 전환",
+    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
     "Toggle View Controls Bottom Panel": "뷰 컨트롤 하단 패널 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
     "Toggle View Controls Bottom Panel": "뷰 컨트롤 하단 패널 전환",
-    "Toggle Workflows 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": "축소",
     "Zoom to fit": "화면에 맞추기"
@@ -838,10 +842,10 @@
     "renderErrorState": "에러 상태 렌더링",
     "showGroups": "프레임/그룹 표시",
     "showLinks": "링크 표시",
-    "sideToolbar_modelLibrary": "sideToolbar.모델 라이브러리",
-    "sideToolbar_nodeLibrary": "sideToolbar.노드 라이브러리",
-    "sideToolbar_queue": "sideToolbar.대기열",
-    "sideToolbar_workflows": "sideToolbar.워크플로우"
+    "sideToolbar_modelLibrary": "사이드툴바.모델 라이브러리",
+    "sideToolbar_nodeLibrary": "사이드툴바.노드 라이브러리",
+    "sideToolbar_queue": "사이드툴바.대기열",
+    "sideToolbar_workflows": "사이드툴바.워크플로"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "다시 보지 않기",
@@ -1007,7 +1011,7 @@
       "name": "DirectML 장치 번호"
     },
     "disable-all-custom-nodes": {
-      "name": "모든 사용자 정의 노드 로드 비활성화."
+      "name": "모든 커스텀 노드 로드 비활성화."
     },
     "disable-ipex-optimize": {
       "name": "IPEX 최적화 비활성화"
@@ -1221,6 +1225,10 @@
     },
     "workflows": "워크플로"
   },
+  "subgraphStore": {
+    "blueprintName": "서브그래프 이름",
+    "saveBlueprint": "서브그래프를 라이브러리에 저장"
+  },
   "tabMenu": {
     "addToBookmarks": "북마크에 추가",
     "closeOtherTabs": "다른 탭 닫기",
@@ -1239,7 +1247,7 @@
       "Basics": "기본",
       "ComfyUI Examples": "ComfyUI 예시",
       "ControlNet": "컨트롤넷",
-      "Custom Nodes": "사용자 정의 노드",
+      "Custom Nodes": "커스텀 노드",
       "Flux": "FLUX",
       "Image": "이미지",
       "Image API": "이미지 API",
@@ -1628,7 +1636,7 @@
   "versionMismatchWarning": {
     "dismiss": "닫기",
     "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
-    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상 버전을 필요로 합니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래된 버전입니다. 백엔드는 {requiredVersion} 이상 버전이 필요합니다.",
     "title": "버전 호환성 경고",
     "updateFrontend": "프론트엔드 업데이트"
   },
diff --git a/src/locales/ru/commands.json b/src/locales/ru/commands.json
index a1e9609de..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": "Очередь запросов"
   },
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 99cb25217..f9a5612de 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -825,7 +825,11 @@
     "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 to fit": "Масштабировать по размеру"
@@ -1219,6 +1223,10 @@
     },
     "workflows": "Рабочие процессы"
   },
+  "subgraphStore": {
+    "blueprintName": "Имя подграфа",
+    "saveBlueprint": "Сохранить подграф в библиотеку"
+  },
   "tabMenu": {
     "addToBookmarks": "Добавить в закладки",
     "closeOtherTabs": "Закрыть другие вкладки",
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 b29b7deaf..c98f2d0fb 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -825,7 +825,11 @@
     "Ungroup selected group nodes": "取消群組選取的群組節點",
     "Unload Models": "卸載模型",
     "Unload Models and Execution Cache": "卸載模型與執行快取",
+    "Unlock Canvas": "解除鎖定畫布",
+    "Unpack the selected Subgraph": "解包所選子圖",
+    "View": "檢視",
     "Workflow": "工作流程",
+    "Workflows": "工作流程",
     "Zoom In": "放大",
     "Zoom Out": "縮小"
   },
@@ -1207,6 +1211,10 @@
     },
     "workflows": "工作流程"
   },
+  "subgraphStore": {
+    "blueprintName": "子圖名稱",
+    "saveBlueprint": "將子圖儲存到資料庫"
+  },
   "tabMenu": {
     "addToBookmarks": "加入書籤",
     "closeOtherTabs": "關閉其他分頁",
diff --git a/src/locales/zh/commands.json b/src/locales/zh/commands.json
index fb0578cf5..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": "执行提示词"
   },
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 626c53c70..ea926fdab 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -814,6 +814,7 @@
     "Pin/Unpin Selected Items": "固定/取消固定选定项目",
     "Pin/Unpin Selected Nodes": "固定/取消固定选定节点",
     "Previous Opened Workflow": "上一个打开的工作流",
+    "Publish": "发布",
     "Queue Panel": "队列面板",
     "Queue Prompt": "执行提示词",
     "Queue Prompt (Front)": "执行提示词 (优先执行)",
@@ -846,6 +847,7 @@
     "Ungroup selected group nodes": "解散选中组节点",
     "Unlock Canvas": "解除锁定画布",
     "Unpack the selected Subgraph": "解包选中子图",
+    "View": "视图",
     "Workflows": "工作流",
     "Zoom In": "放大画面",
     "Zoom Out": "缩小画面",
@@ -1263,6 +1265,10 @@
     },
     "workflows": "工作流"
   },
+  "subgraphStore": {
+    "blueprintName": "子图名称",
+    "saveBlueprint": "保存子图到库"
+  },
   "tabMenu": {
     "addToBookmarks": "添加到书签",
     "closeOtherTabs": "关闭其他标签",
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
index 301996585..88d32485f 100644
--- a/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
+++ b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
@@ -58,7 +58,7 @@ export interface LinkRenderContext {
   disabledPattern?: CanvasPattern | null
 }
 
-export interface LinkRenderOptions {
+interface LinkRenderOptions {
   color?: CanvasColour
   flow?: boolean
   skipBorder?: boolean
diff --git a/src/renderer/core/canvas/pathRenderer.ts b/src/renderer/core/canvas/pathRenderer.ts
index a2ee8817c..eb458b180 100644
--- a/src/renderer/core/canvas/pathRenderer.ts
+++ b/src/renderer/core/canvas/pathRenderer.ts
@@ -38,7 +38,7 @@ export interface LinkRenderData {
   centerAngle?: number
 }
 
-export interface RenderStyle {
+interface RenderStyle {
   mode: RenderMode
   connectionWidth: number
   borderWidth?: number
@@ -51,7 +51,7 @@ export interface RenderStyle {
   highQuality?: boolean
 }
 
-export interface RenderColors {
+interface RenderColors {
   default: string
   byType: Record<string, string>
   highlighted: string
diff --git a/src/components/graph/TransformPane.vue b/src/renderer/core/layout/TransformPane.vue
similarity index 96%
rename from src/components/graph/TransformPane.vue
rename to src/renderer/core/layout/TransformPane.vue
index 266dd0569..2f623257c 100644
--- a/src/components/graph/TransformPane.vue
+++ b/src/renderer/core/layout/TransformPane.vue
@@ -13,10 +13,10 @@
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 
-import { useTransformState } from '@/composables/element/useTransformState'
 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
diff --git a/src/components/graph/TransformPane.spec.ts b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
similarity index 98%
rename from src/components/graph/TransformPane.spec.ts
rename to src/renderer/core/layout/__tests__/TransformPane.spec.ts
index acfa172ee..f6fe7126c 100644
--- a/src/components/graph/TransformPane.spec.ts
+++ b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
@@ -2,7 +2,7 @@ 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'
+import TransformPane from '../TransformPane.vue'
 
 // Mock the transform state composable
 const mockTransformState = {
@@ -17,7 +17,7 @@ const mockTransformState = {
   isNodeInViewport: vi.fn()
 }
 
-vi.mock('@/composables/element/useTransformState', () => ({
+vi.mock('@/renderer/core/spatial/useTransformState', () => ({
   useTransformState: () => mockTransformState
 }))
 
diff --git a/src/renderer/core/layout/operations/layoutMutations.ts b/src/renderer/core/layout/operations/layoutMutations.ts
index 42ce2677c..0c656899d 100644
--- a/src/renderer/core/layout/operations/layoutMutations.ts
+++ b/src/renderer/core/layout/operations/layoutMutations.ts
@@ -19,7 +19,7 @@ import {
 
 const logger = log.getLogger('LayoutMutations')
 
-export interface LayoutMutations {
+interface LayoutMutations {
   // Single node operations (synchronous, CRDT-ready)
   moveNode(nodeId: NodeId, position: Point): void
   resizeNode(nodeId: NodeId, size: Size): void
diff --git a/src/renderer/core/layout/slots/register.ts b/src/renderer/core/layout/slots/register.ts
index 5965b885b..afe7242ee 100644
--- a/src/renderer/core/layout/slots/register.ts
+++ b/src/renderer/core/layout/slots/register.ts
@@ -24,7 +24,7 @@ import { getSlotKey } from './slotIdentifier'
  * @param isInput Whether this is an input slot
  * @param position The slot position in graph coordinates
  */
-export function registerSlotLayout(
+function registerSlotLayout(
   nodeId: string,
   slotIndex: number,
   isInput: boolean,
diff --git a/src/renderer/core/layout/slots/slotIdentifier.ts b/src/renderer/core/layout/slots/slotIdentifier.ts
index df1f64fc2..2600405e9 100644
--- a/src/renderer/core/layout/slots/slotIdentifier.ts
+++ b/src/renderer/core/layout/slots/slotIdentifier.ts
@@ -6,7 +6,7 @@
  * @TODO Replace this concatenated string with root cause fix
  */
 
-export interface SlotIdentifier {
+interface SlotIdentifier {
   nodeId: string
   index: number
   isInput: boolean
diff --git a/src/renderer/core/layout/store/layoutStore.ts b/src/renderer/core/layout/store/layoutStore.ts
index 5be50702b..997254d38 100644
--- a/src/renderer/core/layout/store/layoutStore.ts
+++ b/src/renderer/core/layout/store/layoutStore.ts
@@ -371,15 +371,6 @@ class LayoutStoreImpl implements LayoutStore {
   updateSlotLayout(key: string, layout: SlotLayout): void {
     const existing = this.slotLayouts.get(key)
 
-    if (!existing) {
-      logger.debug('Adding slot:', {
-        nodeId: layout.nodeId,
-        type: layout.type,
-        index: layout.index,
-        bounds: layout.bounds
-      })
-    }
-
     if (existing) {
       // Update spatial index
       this.slotSpatialIndex.update(key, layout.bounds)
@@ -419,6 +410,15 @@ class LayoutStoreImpl implements LayoutStore {
     }
   }
 
+  /**
+   * 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
    */
@@ -1178,31 +1178,25 @@ class LayoutStoreImpl implements LayoutStore {
     const rerouteId = Number(rerouteIdStr) as RerouteId
 
     if (change.action === 'delete') {
-      this.handleRerouteDelete(rerouteId, rerouteIdStr)
-    } else if (change.action === 'update' || change.action === 'add') {
-      this.handleRerouteAddOrUpdate(rerouteId, rerouteIdStr)
+      this.handleRerouteDelete(rerouteId)
+    } else {
+      this.handleRerouteUpsert(rerouteId)
     }
   }
 
   /**
    * Handle reroute deletion
    */
-  private handleRerouteDelete(
-    rerouteId: RerouteId,
-    rerouteIdStr: string
-  ): void {
+  private handleRerouteDelete(rerouteId: RerouteId): void {
     this.rerouteLayouts.delete(rerouteId)
-    this.rerouteSpatialIndex.remove(rerouteIdStr)
+    this.rerouteSpatialIndex.remove(String(rerouteId))
   }
 
   /**
-   * Handle reroute add or update
+   * Handle reroute upsert (update if exists, create if not)
    */
-  private handleRerouteAddOrUpdate(
-    rerouteId: RerouteId,
-    rerouteIdStr: string
-  ): void {
-    const rerouteData = this.yreroutes.get(rerouteIdStr)
+  private handleRerouteUpsert(rerouteId: RerouteId): void {
+    const rerouteData = this.yreroutes.get(String(rerouteId))
     if (!rerouteData) return
 
     const position = rerouteData.get('position') as Point
@@ -1351,6 +1345,3 @@ class LayoutStoreImpl implements LayoutStore {
 
 // Create singleton instance
 export const layoutStore = new LayoutStoreImpl()
-
-// Export types for convenience
-export type { LayoutStore } from '@/renderer/core/layout/types'
diff --git a/src/renderer/core/layout/sync/useSlotLayoutSync.ts b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
index faaebb21d..55a464140 100644
--- a/src/renderer/core/layout/sync/useSlotLayoutSync.ts
+++ b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
@@ -57,17 +57,18 @@ export function useSlotLayoutSync() {
   let restoreHandlers: (() => void) | null = null
 
   /**
-   * Start slot layout sync with full event-driven functionality
+   * 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 start(canvas: LGraphCanvas): void {
+  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
+      return false
     }
     const graph = canvas?.graph
-    if (!graph) return
+    if (!graph) return false
 
     // Initial registration for all nodes in the current graph
     for (const node of graph.nodes) {
@@ -135,6 +136,8 @@ export function useSlotLayoutSync() {
       graph.onTrigger = origTrigger || undefined
       graph.onAfterChange = origAfterChange || undefined
     }
+
+    return true
   }
 
   /**
@@ -157,7 +160,7 @@ export function useSlotLayoutSync() {
   })
 
   return {
-    start,
+    attemptStart,
     stop
   }
 }
diff --git a/src/renderer/core/layout/types.ts b/src/renderer/core/layout/types.ts
index 8ff25ea25..fdfcff430 100644
--- a/src/renderer/core/layout/types.ts
+++ b/src/renderer/core/layout/types.ts
@@ -84,7 +84,7 @@ export interface RerouteLayout {
 /**
  * Meta-only base for all operations - contains common fields
  */
-export interface OperationMeta {
+interface OperationMeta {
   /** Unique operation ID for deduplication */
   id?: string
   /** Timestamp for ordering operations */
@@ -100,9 +100,9 @@ export interface OperationMeta {
 /**
  * Entity-specific base types for proper type discrimination
  */
-export type NodeOpBase = OperationMeta & { entity: 'node'; nodeId: NodeId }
-export type LinkOpBase = OperationMeta & { entity: 'link'; linkId: LinkId }
-export type RerouteOpBase = OperationMeta & {
+type NodeOpBase = OperationMeta & { entity: 'node'; nodeId: NodeId }
+type LinkOpBase = OperationMeta & { entity: 'link'; linkId: LinkId }
+type RerouteOpBase = OperationMeta & {
   entity: 'reroute'
   rerouteId: RerouteId
 }
@@ -110,7 +110,7 @@ export type RerouteOpBase = OperationMeta & {
 /**
  * Operation type discriminator for type narrowing
  */
-export type OperationType =
+type OperationType =
   | 'moveNode'
   | 'resizeNode'
   | 'setNodeZIndex'
@@ -170,7 +170,7 @@ export interface DeleteNodeOperation extends NodeOpBase {
 /**
  * Set node visibility operation
  */
-export interface SetNodeVisibilityOperation extends NodeOpBase {
+interface SetNodeVisibilityOperation extends NodeOpBase {
   type: 'setNodeVisibility'
   visible: boolean
   previousVisible: boolean
@@ -179,7 +179,7 @@ export interface SetNodeVisibilityOperation extends NodeOpBase {
 /**
  * Batch update operation for atomic multi-property changes
  */
-export interface BatchUpdateOperation extends NodeOpBase {
+interface BatchUpdateOperation extends NodeOpBase {
   type: 'batchUpdate'
   updates: Partial<NodeLayout>
   previousValues: Partial<NodeLayout>
@@ -297,6 +297,7 @@ export interface LayoutStore {
   deleteSlotLayout(key: string): void
   deleteNodeSlotLayouts(nodeId: NodeId): void
   deleteRerouteLayout(rerouteId: RerouteId): void
+  clearAllSlotLayouts(): void
 
   // Get layout data
   getLinkLayout(linkId: LinkId): LinkLayout | null
diff --git a/src/composables/element/useTransformState.ts b/src/renderer/core/layout/useTransformState.ts
similarity index 98%
rename from src/composables/element/useTransformState.ts
rename to src/renderer/core/layout/useTransformState.ts
index 5192bd6df..515984567 100644
--- a/src/composables/element/useTransformState.ts
+++ b/src/renderer/core/layout/useTransformState.ts
@@ -51,14 +51,14 @@
  */
 import { computed, reactive, readonly } from 'vue'
 
-import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
-export interface Point {
+interface Point {
   x: number
   y: number
 }
 
-export interface Camera {
+interface Camera {
   x: number
   y: number
   z: number // scale/zoom
diff --git a/src/utils/spatial/QuadTree.ts b/src/renderer/core/spatial/QuadTree.ts
similarity index 99%
rename from src/utils/spatial/QuadTree.ts
rename to src/renderer/core/spatial/QuadTree.ts
index e2c90b32e..e24692cf5 100644
--- a/src/utils/spatial/QuadTree.ts
+++ b/src/renderer/core/spatial/QuadTree.ts
@@ -14,7 +14,7 @@ export interface Bounds {
   height: number
 }
 
-export interface QuadTreeItem<T> {
+interface QuadTreeItem<T> {
   id: string
   bounds: Bounds
   data: T
diff --git a/src/renderer/core/spatial/SpatialIndex.ts b/src/renderer/core/spatial/SpatialIndex.ts
index 5b6fb269c..92a4a627f 100644
--- a/src/renderer/core/spatial/SpatialIndex.ts
+++ b/src/renderer/core/spatial/SpatialIndex.ts
@@ -9,7 +9,8 @@ import {
   QUADTREE_CONFIG
 } from '@/renderer/core/layout/constants'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
-import { QuadTree } from '@/utils/spatial/QuadTree'
+
+import { QuadTree } from './QuadTree'
 
 /**
  * Cache entry for spatial queries
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
index 52dbacac0..58238d608 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -32,7 +32,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
+import {
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  onErrorCaptured,
+  ref,
+  watchEffect
+} from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -83,19 +90,17 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const connectionDotRef = ref<ComponentPublicInstance<{
+  slotElRef: HTMLElement | undefined
+}> | null>(null)
 const slotElRef = ref<HTMLElement | null>(null)
 
-// Watch for connection dot ref changes and sync the element ref
-watch(
-  connectionDotRef,
-  (newValue) => {
-    if (newValue?.slotElRef) {
-      slotElRef.value = newValue.slotElRef.value
-    }
-  },
-  { immediate: true }
-)
+// 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 ?? '',
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 4ce4e2100..bcd2a3636 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -10,10 +10,13 @@
         'bg-white dark-theme:bg-[#15161A]',
         'min-w-[445px]',
         'lg-node absolute border border-solid rounded-2xl',
-        'outline outline-transparent outline-2 hover:outline-black dark-theme:hover:outline-white',
+        'outline outline-transparent outline-2',
         {
-          'border-blue-500 ring-2 ring-blue-300': selected,
-          'border-[#e1ded5] dark-theme:border-[#292A30]': !selected,
+          'outline-black dark-theme:outline-white': isSelected
+        },
+        {
+          'border-blue-500 ring-2 ring-blue-300': isSelected,
+          'border-[#e1ded5] dark-theme:border-[#292A30]': !isSelected,
           'animate-pulse': executing,
           'opacity-50': nodeData.mode === 4,
           'border-red-500 bg-red-50': error,
@@ -107,12 +110,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
+import { computed, inject, onErrorCaptured, ref, toRef, watch } from 'vue'
 
 // Import the VueNodeData type
 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'
@@ -129,7 +133,6 @@ interface LGraphNodeProps {
   position?: { x: number; y: number }
   size?: { width: number; height: number }
   readonly?: boolean
-  selected?: boolean
   executing?: boolean
   progress?: number
   error?: string | null
@@ -150,6 +153,19 @@ const emit = defineEmits<{
   'update:title': [nodeId: string, newTitle: string]
 }>()
 
+// 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 {
@@ -193,7 +209,7 @@ const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
 // Watch for external changes to the collapsed state
 watch(
   () => props.nodeData.flags?.collapsed,
-  (newCollapsed) => {
+  (newCollapsed: boolean | undefined) => {
     if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
       isCollapsed.value = newCollapsed
     }
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 144d5978d..eb3196625 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -33,7 +33,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
+import {
+  type ComponentPublicInstance,
+  computed,
+  inject,
+  onErrorCaptured,
+  ref,
+  watchEffect
+} from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -82,19 +89,17 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const connectionDotRef = ref<ComponentPublicInstance<{
+  slotElRef: HTMLElement | undefined
+}> | null>(null)
 const slotElRef = ref<HTMLElement | null>(null)
 
-// Watch for connection dot ref changes and sync the element ref
-watch(
-  connectionDotRef,
-  (newValue) => {
-    if (newValue?.slotElRef) {
-      slotElRef.value = newValue.slotElRef.value
-    }
-  },
-  { immediate: true }
-)
+// 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 ?? '',
diff --git a/src/renderer/extensions/vueNodes/lod/useLOD.ts b/src/renderer/extensions/vueNodes/lod/useLOD.ts
index 9d07e37ca..584e21f9a 100644
--- a/src/renderer/extensions/vueNodes/lod/useLOD.ts
+++ b/src/renderer/extensions/vueNodes/lod/useLOD.ts
@@ -35,7 +35,7 @@ export enum LODLevel {
   FULL = 'full' // zoom > 0.8
 }
 
-export interface LODConfig {
+interface LODConfig {
   renderWidgets: boolean
   renderSlots: boolean
   renderContent: boolean
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/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/WidgetSlider.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.test.ts
new file mode 100644
index 000000000..3e554023f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.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 WidgetSlider from './WidgetSlider.vue'
+
+describe('WidgetSlider 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(WidgetSlider, {
+      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/WidgetSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
index 5bb53784f..a303b4923 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
@@ -74,9 +74,9 @@ const precision = computed(() => {
 
 // Calculate the step value based on precision or widget options
 const stepValue = computed(() => {
-  // If step is explicitly defined in options, use it
-  if (props.widget.options?.step !== undefined) {
-    return String(props.widget.options.step)
+  // 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) {
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/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 3aac1b242..5ecba2f5b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { noop } from 'es-toolkit'
+
 import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
 import { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -12,7 +14,7 @@ const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
 
 <template>
   <div
-    class="flex items-center justify-between gap-2"
+    class="flex items-center justify-between gap-2 overscroll-contain"
     :style="{ height: widgetHeight + 'px' }"
   >
     <p
@@ -21,7 +23,12 @@ const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
     >
       {{ widget.name }}
     </p>
-    <div class="w-75">
+    <div
+      class="w-75"
+      @pointerdown.stop="noop"
+      @pointermove.stop="noop"
+      @pointerup.stop="noop"
+    >
       <slot />
     </div>
   </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
index 0fde7592a..9022ab8c1 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/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/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
index e72d90be1..c8b0b0a49 100644
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -130,7 +130,7 @@ export const getComponent = (type: string): Component | null => {
   return widgets.get(canonicalType)?.component || null
 }
 
-export const isSupported = (type: string): boolean => {
+const isSupported = (type: string): boolean => {
   const canonicalType = getCanonicalType(type)
   return widgets.has(canonicalType)
 }
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 5c86ff00c..b4283d231 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -318,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(),
@@ -367,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(),
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 62be3392b..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(),
@@ -455,7 +455,7 @@ export type WorkflowJSON04 = z.infer<typeof zComfyWorkflow>
 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.
@@ -522,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 cb212fb99..09983d115 100644
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -207,10 +207,10 @@ 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>
diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts
index 9d4c0b2e8..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(),
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 1b081facd..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
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/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 9275c205c..d9e7a110f 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -33,6 +33,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..f43d3d8b9 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'
@@ -949,6 +950,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 6ba37e80d..000000000
--- a/src/stores/managerStateStore.ts
+++ /dev/null
@@ -1,68 +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'
-    )
-
-    // 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/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/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/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/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/settingTypes.ts b/src/types/settingTypes.ts
index 47b3a8a36..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,
diff --git a/src/types/spatialIndex.ts b/src/types/spatialIndex.ts
index fb4250ba1..0bdd9c9e1 100644
--- a/src/types/spatialIndex.ts
+++ b/src/types/spatialIndex.ts
@@ -1,7 +1,7 @@
 /**
  * Type definitions for spatial indexing system
  */
-import type { Bounds } from '@/utils/spatial/QuadTree'
+import type { Bounds } from '@/renderer/core/spatial/QuadTree'
 
 /**
  * Debug information for a single QuadTree node
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index 7f9ba3582..b89b28456 100644
--- a/src/utils/formatUtil.ts
+++ b/src/utils/formatUtil.ts
@@ -83,7 +83,7 @@ export function formatSize(value?: number) {
  * - filename: 'file'
  * - suffix: 'txt'
  */
-export function getFilenameDetails(fullFilename: string) {
+function getFilenameDetails(fullFilename: string) {
   if (fullFilename.includes('.')) {
     return {
       filename: fullFilename.split('.').slice(0, -1).join('.'),
@@ -479,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..2fb74e1cf 100644
--- a/src/utils/mathUtil.ts
+++ b/src/utils/mathUtil.ts
@@ -5,7 +5,7 @@
  * @param b - The second number.
  * @returns The GCD of the two numbers.
  */
-export const gcd = (a: number, b: number): number => {
+const gcd = (a: number, b: number): number => {
   return b === 0 ? a : gcd(b, a % b)
 }
 
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
index 39124c768..78e3a3d1a 100644
--- a/src/utils/tailwindUtil.ts
+++ b/src/utils/tailwindUtil.ts
@@ -1,7 +1,7 @@
 import clsx, { type ClassArray } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export type { ClassValue, ClassArray, ClassDictionary } from 'clsx'
+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/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
index ad250872f..409ea2e47 100644
--- a/tests-ui/tests/composables/element/useTransformState.test.ts
+++ b/tests-ui/tests/composables/element/useTransformState.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useTransformState } from '@/composables/element/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
 
 // Create a mock canvas context for transform testing
 function createMockCanvasContext() {
diff --git a/tests-ui/tests/composables/graph/useNodeEventHandlers.test.ts b/tests-ui/tests/composables/graph/useNodeEventHandlers.test.ts
new file mode 100644
index 000000000..8702327d1
--- /dev/null
+++ b/tests-ui/tests/composables/graph/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 { useNodeEventHandlers } from '@/composables/graph/useNodeEventHandlers'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+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/composables/graph/useSpatialIndex.test.ts b/tests-ui/tests/composables/graph/useSpatialIndex.test.ts
deleted file mode 100644
index 4e34c0f04..000000000
--- a/tests-ui/tests/composables/graph/useSpatialIndex.test.ts
+++ /dev/null
@@ -1,498 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
-
-// Mock @vueuse/core
-vi.mock('@vueuse/core', () => ({
-  useDebounceFn: (fn: (...args: any[]) => any) => fn // Return function directly for testing
-}))
-
-describe('useSpatialIndex', () => {
-  let spatialIndex: ReturnType<typeof useSpatialIndex>
-
-  beforeEach(() => {
-    spatialIndex = useSpatialIndex()
-  })
-
-  describe('initialization', () => {
-    it('should start with null quadTree', () => {
-      expect(spatialIndex.quadTree.value).toBeNull()
-    })
-
-    it('should initialize with default bounds when first node is added', () => {
-      const { updateNode, quadTree, metrics } = spatialIndex
-
-      updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
-
-      expect(quadTree.value).not.toBeNull()
-      expect(metrics.value.totalNodes).toBe(1)
-    })
-
-    it('should initialize with custom bounds', () => {
-      const { initialize, quadTree } = spatialIndex
-      const customBounds = { x: 0, y: 0, width: 5000, height: 3000 }
-
-      initialize(customBounds)
-
-      expect(quadTree.value).not.toBeNull()
-    })
-
-    it('should increment rebuild count on initialization', () => {
-      const { initialize, metrics } = spatialIndex
-
-      expect(metrics.value.rebuildCount).toBe(0)
-      initialize()
-      expect(metrics.value.rebuildCount).toBe(1)
-    })
-
-    it('should accept custom options', () => {
-      const customIndex = useSpatialIndex({
-        maxDepth: 8,
-        maxItemsPerNode: 6,
-        updateDebounceMs: 32
-      })
-
-      customIndex.initialize()
-
-      expect(customIndex.quadTree.value).not.toBeNull()
-    })
-  })
-
-  describe('updateNode', () => {
-    it('should add a new node to the index', () => {
-      const { updateNode, metrics } = spatialIndex
-
-      updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
-
-      expect(metrics.value.totalNodes).toBe(1)
-    })
-
-    it('should update existing node position', () => {
-      const { updateNode, queryViewport } = spatialIndex
-
-      // Add node
-      updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
-
-      // Move node
-      updateNode('node1', { x: 500, y: 500 }, { width: 200, height: 100 })
-
-      // Query old position - should not find node
-      const oldResults = queryViewport({
-        x: 50,
-        y: 50,
-        width: 300,
-        height: 200
-      })
-      expect(oldResults).not.toContain('node1')
-
-      // Query new position - should find node
-      const newResults = queryViewport({
-        x: 450,
-        y: 450,
-        width: 300,
-        height: 200
-      })
-      expect(newResults).toContain('node1')
-    })
-
-    it('should auto-initialize if quadTree is null', () => {
-      const { updateNode, quadTree } = spatialIndex
-
-      expect(quadTree.value).toBeNull()
-      updateNode('node1', { x: 0, y: 0 }, { width: 100, height: 100 })
-      expect(quadTree.value).not.toBeNull()
-    })
-  })
-
-  describe('batchUpdate', () => {
-    it('should update multiple nodes at once', () => {
-      const { batchUpdate, metrics } = spatialIndex
-
-      const updates = [
-        {
-          id: 'node1',
-          position: { x: 100, y: 100 },
-          size: { width: 200, height: 100 }
-        },
-        {
-          id: 'node2',
-          position: { x: 300, y: 300 },
-          size: { width: 150, height: 150 }
-        },
-        {
-          id: 'node3',
-          position: { x: 500, y: 200 },
-          size: { width: 100, height: 200 }
-        }
-      ]
-
-      batchUpdate(updates)
-
-      expect(metrics.value.totalNodes).toBe(3)
-    })
-
-    it('should handle empty batch', () => {
-      const { batchUpdate, metrics } = spatialIndex
-
-      batchUpdate([])
-
-      expect(metrics.value.totalNodes).toBe(0)
-    })
-
-    it('should auto-initialize if needed', () => {
-      const { batchUpdate, quadTree } = spatialIndex
-
-      expect(quadTree.value).toBeNull()
-      batchUpdate([
-        {
-          id: 'node1',
-          position: { x: 0, y: 0 },
-          size: { width: 100, height: 100 }
-        }
-      ])
-      expect(quadTree.value).not.toBeNull()
-    })
-  })
-
-  describe('removeNode', () => {
-    beforeEach(() => {
-      spatialIndex.updateNode(
-        'node1',
-        { x: 100, y: 100 },
-        { width: 200, height: 100 }
-      )
-      spatialIndex.updateNode(
-        'node2',
-        { x: 300, y: 300 },
-        { width: 200, height: 100 }
-      )
-    })
-
-    it('should remove node from index', () => {
-      const { removeNode, metrics } = spatialIndex
-
-      expect(metrics.value.totalNodes).toBe(2)
-      removeNode('node1')
-      expect(metrics.value.totalNodes).toBe(1)
-    })
-
-    it('should handle removing non-existent node', () => {
-      const { removeNode, metrics } = spatialIndex
-
-      expect(metrics.value.totalNodes).toBe(2)
-      removeNode('node999')
-      expect(metrics.value.totalNodes).toBe(2)
-    })
-
-    it('should handle removeNode when quadTree is null', () => {
-      const freshIndex = useSpatialIndex()
-
-      // Should not throw
-      expect(() => freshIndex.removeNode('node1')).not.toThrow()
-    })
-  })
-
-  describe('queryViewport', () => {
-    beforeEach(() => {
-      // Set up a grid of nodes
-      spatialIndex.updateNode(
-        'node1',
-        { x: 0, y: 0 },
-        { width: 100, height: 100 }
-      )
-      spatialIndex.updateNode(
-        'node2',
-        { x: 200, y: 0 },
-        { width: 100, height: 100 }
-      )
-      spatialIndex.updateNode(
-        'node3',
-        { x: 0, y: 200 },
-        { width: 100, height: 100 }
-      )
-      spatialIndex.updateNode(
-        'node4',
-        { x: 200, y: 200 },
-        { width: 100, height: 100 }
-      )
-    })
-
-    it('should find nodes within viewport bounds', () => {
-      const { queryViewport } = spatialIndex
-
-      // Query top-left quadrant
-      const results = queryViewport({ x: -50, y: -50, width: 200, height: 200 })
-      expect(results).toContain('node1')
-      expect(results).not.toContain('node2')
-      expect(results).not.toContain('node3')
-      expect(results).not.toContain('node4')
-    })
-
-    it('should find multiple nodes in larger viewport', () => {
-      const { queryViewport } = spatialIndex
-
-      // Query entire area
-      const results = queryViewport({ x: -50, y: -50, width: 400, height: 400 })
-      expect(results).toHaveLength(4)
-      expect(results).toContain('node1')
-      expect(results).toContain('node2')
-      expect(results).toContain('node3')
-      expect(results).toContain('node4')
-    })
-
-    it('should return empty array for empty region', () => {
-      const { queryViewport } = spatialIndex
-
-      const results = queryViewport({
-        x: 1000,
-        y: 1000,
-        width: 100,
-        height: 100
-      })
-      expect(results).toEqual([])
-    })
-
-    it('should update metrics after query', () => {
-      const { queryViewport, metrics } = spatialIndex
-
-      queryViewport({ x: 0, y: 0, width: 300, height: 300 })
-
-      expect(metrics.value.queryTime).toBeGreaterThan(0)
-      expect(metrics.value.visibleNodes).toBe(4)
-    })
-
-    it('should handle query when quadTree is null', () => {
-      const freshIndex = useSpatialIndex()
-
-      const results = freshIndex.queryViewport({
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100
-      })
-      expect(results).toEqual([])
-    })
-  })
-
-  describe('queryRadius', () => {
-    beforeEach(() => {
-      // Set up nodes at different distances
-      spatialIndex.updateNode(
-        'center',
-        { x: 475, y: 475 },
-        { width: 50, height: 50 }
-      )
-      spatialIndex.updateNode(
-        'near1',
-        { x: 525, y: 475 },
-        { width: 50, height: 50 }
-      )
-      spatialIndex.updateNode(
-        'near2',
-        { x: 425, y: 475 },
-        { width: 50, height: 50 }
-      )
-      spatialIndex.updateNode(
-        'far',
-        { x: 775, y: 775 },
-        { width: 50, height: 50 }
-      )
-    })
-
-    it('should find nodes within radius', () => {
-      const { queryRadius } = spatialIndex
-
-      const results = queryRadius({ x: 500, y: 500 }, 100)
-
-      expect(results).toContain('center')
-      expect(results).toContain('near1')
-      expect(results).toContain('near2')
-      expect(results).not.toContain('far')
-    })
-
-    it('should handle zero radius', () => {
-      const { queryRadius } = spatialIndex
-
-      const results = queryRadius({ x: 500, y: 500 }, 0)
-
-      // Zero radius creates a point query at (500,500)
-      // The 'center' node spans 475-525 on both axes, so it contains this point
-      expect(results).toContain('center')
-    })
-
-    it('should handle large radius', () => {
-      const { queryRadius } = spatialIndex
-
-      const results = queryRadius({ x: 500, y: 500 }, 1000)
-
-      expect(results).toHaveLength(4) // Should find all nodes
-    })
-  })
-
-  describe('clear', () => {
-    beforeEach(() => {
-      spatialIndex.updateNode(
-        'node1',
-        { x: 100, y: 100 },
-        { width: 200, height: 100 }
-      )
-      spatialIndex.updateNode(
-        'node2',
-        { x: 300, y: 300 },
-        { width: 200, height: 100 }
-      )
-    })
-
-    it('should remove all nodes', () => {
-      const { clear, metrics } = spatialIndex
-
-      expect(metrics.value.totalNodes).toBe(2)
-      clear()
-      expect(metrics.value.totalNodes).toBe(0)
-    })
-
-    it('should reset metrics', () => {
-      const { clear, queryViewport, metrics } = spatialIndex
-
-      // Do a query to set visible nodes
-      queryViewport({ x: 0, y: 0, width: 500, height: 500 })
-      expect(metrics.value.visibleNodes).toBe(2)
-
-      clear()
-      expect(metrics.value.visibleNodes).toBe(0)
-    })
-
-    it('should handle clear when quadTree is null', () => {
-      const freshIndex = useSpatialIndex()
-
-      expect(() => freshIndex.clear()).not.toThrow()
-    })
-  })
-
-  describe('rebuild', () => {
-    it('should rebuild index with new nodes', () => {
-      const { rebuild, metrics, queryViewport } = spatialIndex
-
-      // Add initial nodes
-      spatialIndex.updateNode(
-        'old1',
-        { x: 0, y: 0 },
-        { width: 100, height: 100 }
-      )
-      expect(metrics.value.rebuildCount).toBe(1)
-
-      // Rebuild with new set
-      const newNodes = new Map([
-        [
-          'new1',
-          { position: { x: 100, y: 100 }, size: { width: 50, height: 50 } }
-        ],
-        [
-          'new2',
-          { position: { x: 200, y: 200 }, size: { width: 50, height: 50 } }
-        ]
-      ])
-
-      rebuild(newNodes)
-
-      expect(metrics.value.totalNodes).toBe(2)
-      expect(metrics.value.rebuildCount).toBe(2)
-
-      // Old nodes should be gone
-      const oldResults = queryViewport({
-        x: -50,
-        y: -50,
-        width: 100,
-        height: 100
-      })
-      expect(oldResults).not.toContain('old1')
-
-      // New nodes should be findable
-      const newResults = queryViewport({
-        x: 50,
-        y: 50,
-        width: 200,
-        height: 200
-      })
-      expect(newResults).toContain('new1')
-      expect(newResults).toContain('new2')
-    })
-
-    it('should handle empty rebuild', () => {
-      const { rebuild, metrics } = spatialIndex
-
-      rebuild(new Map())
-
-      expect(metrics.value.totalNodes).toBe(0)
-    })
-  })
-
-  describe('metrics', () => {
-    it('should track performance metrics', () => {
-      const { metrics, updateNode, queryViewport } = spatialIndex
-
-      // Initial state
-      expect(metrics.value).toEqual({
-        queryTime: 0,
-        totalNodes: 0,
-        visibleNodes: 0,
-        treeDepth: 0,
-        rebuildCount: 0
-      })
-
-      // Add nodes
-      updateNode('node1', { x: 0, y: 0 }, { width: 100, height: 100 })
-      expect(metrics.value.totalNodes).toBe(1)
-
-      // Query
-      queryViewport({ x: -50, y: -50, width: 200, height: 200 })
-      expect(metrics.value.queryTime).toBeGreaterThan(0)
-      expect(metrics.value.visibleNodes).toBe(1)
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle nodes with zero size', () => {
-      const { updateNode, queryViewport } = spatialIndex
-
-      updateNode('point', { x: 100, y: 100 }, { width: 0, height: 0 })
-
-      // Should still be findable
-      const results = queryViewport({ x: 50, y: 50, width: 100, height: 100 })
-      expect(results).toContain('point')
-    })
-
-    it('should handle negative positions', () => {
-      const { updateNode, queryViewport } = spatialIndex
-
-      updateNode('negative', { x: -500, y: -500 }, { width: 100, height: 100 })
-
-      const results = queryViewport({
-        x: -600,
-        y: -600,
-        width: 200,
-        height: 200
-      })
-      expect(results).toContain('negative')
-    })
-
-    it('should handle very large nodes', () => {
-      const { updateNode, queryViewport } = spatialIndex
-
-      updateNode('huge', { x: 0, y: 0 }, { width: 5000, height: 5000 })
-
-      // Should be found even when querying small area within it
-      const results = queryViewport({ x: 100, y: 100, width: 10, height: 10 })
-      expect(results).toContain('huge')
-    })
-  })
-
-  describe('debouncedUpdateNode', () => {
-    it('should be available', () => {
-      const { debouncedUpdateNode } = spatialIndex
-
-      expect(debouncedUpdateNode).toBeDefined()
-      expect(typeof debouncedUpdateNode).toBe('function')
-    })
-  })
-})
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index dbd40a731..89df12a36 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)'
       )
     })
   })
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/useManagerQueue.test.ts b/tests-ui/tests/composables/useManagerQueue.test.ts
index 964c0686b..0d9313446 100644
--- a/tests-ui/tests/composables/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/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 1d47df5d8..3eb38215f 100644
--- a/tests-ui/tests/litegraph/core/LGraphNode.test.ts
+++ b/tests-ui/tests/litegraph/core/LGraphNode.test.ts
@@ -621,5 +621,10 @@ describe('LGraphNode', () => {
       expect(node.getInputSlotPos(inputSlot)).toEqual([expectedX, expectedY])
       delete (node.constructor as any).slot_start_y
     })
+    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 d3e6de7b2..1ce83fb46 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
@@ -84,7 +84,6 @@ LGraph {
       "lostFocusAt": undefined,
       "mode": 0,
       "mouseOver": undefined,
-      "onMouseDown": [Function],
       "order": 0,
       "outputs": [],
       "progress": undefined,
@@ -157,7 +156,6 @@ LGraph {
       "lostFocusAt": undefined,
       "mode": 0,
       "mouseOver": undefined,
-      "onMouseDown": [Function],
       "order": 0,
       "outputs": [],
       "progress": undefined,
@@ -231,7 +229,6 @@ LGraph {
       "lostFocusAt": undefined,
       "mode": 0,
       "mouseOver": undefined,
-      "onMouseDown": [Function],
       "order": 0,
       "outputs": [],
       "progress": undefined,
diff --git a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
index 88a3db3fb..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
 
diff --git a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphHelpers.ts b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphHelpers.ts
index 4a3bd6c11..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
@@ -422,6 +422,3 @@ export function createEventCapture<T = unknown>(
       capturedEvents.filter((e) => e.type === type)
   }
 }
-
-// Re-export expect from vitest for convenience
-export { expect } from 'vitest'
diff --git a/tests-ui/tests/performance/spatialIndexPerformance.test.ts b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
deleted file mode 100644
index e1281f48c..000000000
--- a/tests-ui/tests/performance/spatialIndexPerformance.test.ts
+++ /dev/null
@@ -1,406 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
-import type { Bounds } from '@/utils/spatial/QuadTree'
-
-// Skip this entire suite on CI to avoid flaky performance timing
-const isCI = Boolean(process.env.CI)
-const describeIfNotCI = isCI ? describe.skip : describe
-
-describeIfNotCI('Spatial Index Performance', () => {
-  let spatialIndex: ReturnType<typeof useSpatialIndex>
-
-  beforeEach(() => {
-    spatialIndex = useSpatialIndex({
-      maxDepth: 6,
-      maxItemsPerNode: 4,
-      updateDebounceMs: 0 // Disable debouncing for tests
-    })
-  })
-
-  describe('large scale operations', () => {
-    it('should handle 1000 node insertions efficiently', () => {
-      const startTime = performance.now()
-
-      // Generate 1000 nodes in a realistic distribution
-      const nodes = Array.from({ length: 1000 }, (_, i) => ({
-        id: `node${i}`,
-        position: {
-          x: (Math.random() - 0.5) * 10000,
-          y: (Math.random() - 0.5) * 10000
-        },
-        size: {
-          width: 150 + Math.random() * 100,
-          height: 100 + Math.random() * 50
-        }
-      }))
-
-      spatialIndex.batchUpdate(nodes)
-
-      const insertTime = performance.now() - startTime
-
-      // Should insert 1000 nodes in under 100ms
-      expect(insertTime).toBeLessThan(100)
-      expect(spatialIndex.metrics.value.totalNodes).toBe(1000)
-    })
-
-    it('should maintain fast viewport queries under load', () => {
-      // First populate with many nodes
-      const nodes = Array.from({ length: 1000 }, (_, i) => ({
-        id: `node${i}`,
-        position: {
-          x: (Math.random() - 0.5) * 10000,
-          y: (Math.random() - 0.5) * 10000
-        },
-        size: { width: 200, height: 100 }
-      }))
-      spatialIndex.batchUpdate(nodes)
-
-      // Now benchmark viewport queries
-      const queryCount = 100
-      const viewportBounds: Bounds = {
-        x: -960,
-        y: -540,
-        width: 1920,
-        height: 1080
-      }
-
-      const startTime = performance.now()
-
-      for (let i = 0; i < queryCount; i++) {
-        // Vary viewport position to test different tree regions
-        const offsetX = (i % 10) * 500
-        const offsetY = Math.floor(i / 10) * 300
-        spatialIndex.queryViewport({
-          x: viewportBounds.x + offsetX,
-          y: viewportBounds.y + offsetY,
-          width: viewportBounds.width,
-          height: viewportBounds.height
-        })
-      }
-
-      const totalQueryTime = performance.now() - startTime
-      const avgQueryTime = totalQueryTime / queryCount
-
-      // Each query should take less than 2ms on average
-      expect(avgQueryTime).toBeLessThan(2)
-      expect(totalQueryTime).toBeLessThan(100) // 100 queries in under 100ms
-    })
-
-    it('should demonstrate performance advantage over linear search', () => {
-      // Create test data
-      const nodeCount = 500
-      const nodes = Array.from({ length: nodeCount }, (_, i) => ({
-        id: `node${i}`,
-        position: {
-          x: (Math.random() - 0.5) * 8000,
-          y: (Math.random() - 0.5) * 8000
-        },
-        size: { width: 200, height: 100 }
-      }))
-
-      // Populate spatial index
-      spatialIndex.batchUpdate(nodes)
-
-      const viewport: Bounds = { x: -500, y: -300, width: 1000, height: 600 }
-      const queryCount = 50
-
-      // Benchmark spatial index queries
-      const spatialStartTime = performance.now()
-      for (let i = 0; i < queryCount; i++) {
-        spatialIndex.queryViewport(viewport)
-      }
-      const spatialTime = performance.now() - spatialStartTime
-
-      // Benchmark linear search equivalent
-      const linearStartTime = performance.now()
-      for (let i = 0; i < queryCount; i++) {
-        nodes.filter((node) => {
-          const nodeRight = node.position.x + node.size.width
-          const nodeBottom = node.position.y + node.size.height
-          const viewportRight = viewport.x + viewport.width
-          const viewportBottom = viewport.y + viewport.height
-
-          return !(
-            nodeRight < viewport.x ||
-            node.position.x > viewportRight ||
-            nodeBottom < viewport.y ||
-            node.position.y > viewportBottom
-          )
-        })
-      }
-      const linearTime = performance.now() - linearStartTime
-
-      // Spatial index should be faster than linear search
-      const speedup = linearTime / spatialTime
-      // In some environments, speedup may be less due to small dataset
-      // Just ensure spatial is not significantly slower (at least 10% of linear speed)
-      expect(speedup).toBeGreaterThan(0.1)
-
-      // Both should find roughly the same number of nodes
-      const spatialResults = spatialIndex.queryViewport(viewport)
-      const linearResults = nodes.filter((node) => {
-        const nodeRight = node.position.x + node.size.width
-        const nodeBottom = node.position.y + node.size.height
-        const viewportRight = viewport.x + viewport.width
-        const viewportBottom = viewport.y + viewport.height
-
-        return !(
-          nodeRight < viewport.x ||
-          node.position.x > viewportRight ||
-          nodeBottom < viewport.y ||
-          node.position.y > viewportBottom
-        )
-      })
-
-      // Results should be similar (within 10% due to QuadTree boundary effects)
-      const resultsDiff = Math.abs(spatialResults.length - linearResults.length)
-      const maxDiff =
-        Math.max(spatialResults.length, linearResults.length) * 0.1
-      expect(resultsDiff).toBeLessThan(maxDiff)
-    })
-  })
-
-  describe('update performance', () => {
-    it('should handle frequent position updates efficiently', () => {
-      // Add initial nodes
-      const nodeCount = 200
-      const initialNodes = Array.from({ length: nodeCount }, (_, i) => ({
-        id: `node${i}`,
-        position: { x: i * 100, y: i * 50 },
-        size: { width: 200, height: 100 }
-      }))
-      spatialIndex.batchUpdate(initialNodes)
-
-      // Benchmark frequent updates (simulating animation/dragging)
-      const updateCount = 100
-      const startTime = performance.now()
-
-      for (let frame = 0; frame < updateCount; frame++) {
-        // Update a subset of nodes each frame
-        for (let i = 0; i < 20; i++) {
-          const nodeId = `node${i}`
-          spatialIndex.updateNode(
-            nodeId,
-            {
-              x: i * 100 + Math.sin(frame * 0.1) * 50,
-              y: i * 50 + Math.cos(frame * 0.1) * 30
-            },
-            { width: 200, height: 100 }
-          )
-        }
-      }
-
-      const updateTime = performance.now() - startTime
-      const avgFrameTime = updateTime / updateCount
-
-      // Should maintain 60fps (16.67ms per frame) with 20 node updates per frame
-      expect(avgFrameTime).toBeLessThan(8) // Conservative target: 8ms per frame
-    })
-
-    it('should handle node additions and removals efficiently', () => {
-      const startTime = performance.now()
-
-      // Add nodes
-      for (let i = 0; i < 100; i++) {
-        spatialIndex.updateNode(
-          `node${i}`,
-          { x: Math.random() * 1000, y: Math.random() * 1000 },
-          { width: 200, height: 100 }
-        )
-      }
-
-      // Remove half of them
-      for (let i = 0; i < 50; i++) {
-        spatialIndex.removeNode(`node${i}`)
-      }
-
-      // Add new ones
-      for (let i = 100; i < 150; i++) {
-        spatialIndex.updateNode(
-          `node${i}`,
-          { x: Math.random() * 1000, y: Math.random() * 1000 },
-          { width: 200, height: 100 }
-        )
-      }
-
-      const totalTime = performance.now() - startTime
-
-      // All operations should complete quickly
-      expect(totalTime).toBeLessThan(50)
-      expect(spatialIndex.metrics.value.totalNodes).toBe(100) // 50 remaining + 50 new
-    })
-  })
-
-  describe('memory and scaling', () => {
-    it('should scale efficiently with increasing node counts', () => {
-      const nodeCounts = [100, 200, 500, 1000]
-      const queryTimes: number[] = []
-
-      for (const nodeCount of nodeCounts) {
-        // Create fresh spatial index for each test
-        const testIndex = useSpatialIndex({ updateDebounceMs: 0 })
-
-        // Populate with nodes
-        const nodes = Array.from({ length: nodeCount }, (_, i) => ({
-          id: `node${i}`,
-          position: {
-            x: (Math.random() - 0.5) * 10000,
-            y: (Math.random() - 0.5) * 10000
-          },
-          size: { width: 200, height: 100 }
-        }))
-        testIndex.batchUpdate(nodes)
-
-        // Benchmark query time
-        const viewport: Bounds = { x: -500, y: -300, width: 1000, height: 600 }
-        const startTime = performance.now()
-
-        for (let i = 0; i < 10; i++) {
-          testIndex.queryViewport(viewport)
-        }
-
-        const avgTime = (performance.now() - startTime) / 10
-        queryTimes.push(avgTime)
-      }
-
-      // Query time should scale logarithmically, not linearly
-      // The ratio between 1000 nodes and 100 nodes should be less than 5x
-      const ratio100to1000 = queryTimes[3] / queryTimes[0]
-      expect(ratio100to1000).toBeLessThan(5)
-
-      // All query times should be reasonable
-      queryTimes.forEach((time) => {
-        expect(time).toBeLessThan(5) // Each query under 5ms
-      })
-    })
-
-    it('should handle edge cases without performance degradation', () => {
-      // Test with very large nodes
-      spatialIndex.updateNode(
-        'huge-node',
-        { x: -1000, y: -1000 },
-        { width: 5000, height: 3000 }
-      )
-
-      // Test with many tiny nodes
-      for (let i = 0; i < 100; i++) {
-        spatialIndex.updateNode(
-          `tiny-${i}`,
-          { x: Math.random() * 100, y: Math.random() * 100 },
-          { width: 1, height: 1 }
-        )
-      }
-
-      // Test with nodes at extreme coordinates
-      spatialIndex.updateNode(
-        'extreme-pos',
-        { x: 50000, y: -50000 },
-        { width: 200, height: 100 }
-      )
-
-      spatialIndex.updateNode(
-        'extreme-neg',
-        { x: -50000, y: 50000 },
-        { width: 200, height: 100 }
-      )
-
-      // Queries should still be fast
-      const startTime = performance.now()
-      for (let i = 0; i < 20; i++) {
-        spatialIndex.queryViewport({
-          x: Math.random() * 1000 - 500,
-          y: Math.random() * 1000 - 500,
-          width: 1000,
-          height: 600
-        })
-      }
-      const queryTime = performance.now() - startTime
-
-      expect(queryTime).toBeLessThan(20) // 20 queries in under 20ms
-    })
-  })
-
-  describe('realistic workflow scenarios', () => {
-    it('should handle typical ComfyUI workflow performance', () => {
-      // Simulate a large ComfyUI workflow with clustered nodes
-      const clusters = [
-        { center: { x: 0, y: 0 }, nodeCount: 50 },
-        { center: { x: 2000, y: 0 }, nodeCount: 30 },
-        { center: { x: 4000, y: 1000 }, nodeCount: 40 },
-        { center: { x: 0, y: 2000 }, nodeCount: 35 }
-      ]
-
-      let nodeId = 0
-      const allNodes: Array<{
-        id: string
-        position: { x: number; y: number }
-        size: { width: number; height: number }
-      }> = []
-
-      // Create clustered nodes (realistic for ComfyUI workflows)
-      clusters.forEach((cluster) => {
-        for (let i = 0; i < cluster.nodeCount; i++) {
-          allNodes.push({
-            id: `node${nodeId++}`,
-            position: {
-              x: cluster.center.x + (Math.random() - 0.5) * 800,
-              y: cluster.center.y + (Math.random() - 0.5) * 600
-            },
-            size: {
-              width: 150 + Math.random() * 100,
-              height: 100 + Math.random() * 50
-            }
-          })
-        }
-      })
-
-      // Add the nodes
-      const setupTime = performance.now()
-      spatialIndex.batchUpdate(allNodes)
-      const setupDuration = performance.now() - setupTime
-
-      // Simulate user panning around the workflow
-      const viewportSize = { width: 1920, height: 1080 }
-      const panPositions = [
-        { x: -960, y: -540 }, // Center on first cluster
-        { x: 1040, y: -540 }, // Pan to second cluster
-        { x: 3040, y: 460 }, // Pan to third cluster
-        { x: -960, y: 1460 }, // Pan to fourth cluster
-        { x: 1000, y: 500 } // Overview position
-      ]
-
-      const panStartTime = performance.now()
-      const queryResults: number[] = []
-
-      panPositions.forEach((pos) => {
-        // Simulate multiple viewport queries during smooth panning
-        for (let step = 0; step < 10; step++) {
-          const results = spatialIndex.queryViewport({
-            x: pos.x + step * 20,
-            y: pos.y + step * 10,
-            width: viewportSize.width,
-            height: viewportSize.height
-          })
-          queryResults.push(results.length)
-        }
-      })
-
-      const panDuration = performance.now() - panStartTime
-      const avgQueryTime = panDuration / (panPositions.length * 10)
-
-      // Performance expectations for realistic workflows
-      expect(setupDuration).toBeLessThan(30) // Setup 155 nodes in under 30ms
-      expect(avgQueryTime).toBeLessThan(1.5) // Average query under 1.5ms
-      expect(panDuration).toBeLessThan(50) // All panning queries under 50ms
-
-      // Should have reasonable culling efficiency
-      const totalNodes = allNodes.length
-      const avgVisibleNodes =
-        queryResults.reduce((a, b) => a + b, 0) / queryResults.length
-      const cullRatio = (totalNodes - avgVisibleNodes) / totalNodes
-
-      expect(cullRatio).toBeGreaterThan(0.3) // At least 30% culling efficiency
-    })
-  })
-})
diff --git a/tests-ui/tests/performance/transformPerformance.test.ts b/tests-ui/tests/performance/transformPerformance.test.ts
index 9863bbfff..41d8c12c6 100644
--- a/tests-ui/tests/performance/transformPerformance.test.ts
+++ b/tests-ui/tests/performance/transformPerformance.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useTransformState } from '@/composables/element/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/useTransformState'
 
 // Mock canvas context for testing
 const createMockCanvasContext = () => ({
diff --git a/tests-ui/tests/renderer/core/layout/layoutStore.test.ts b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
index 9c64f468d..db3f9960d 100644
--- a/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
+++ b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
@@ -1,7 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { LayoutSource, type NodeLayout } from '@/renderer/core/layout/types'
+import {
+  type LayoutChange,
+  LayoutSource,
+  type NodeLayout
+} from '@/renderer/core/layout/types'
 
 describe('layoutStore CRDT operations', () => {
   beforeEach(() => {
@@ -145,7 +149,7 @@ describe('layoutStore CRDT operations', () => {
     layoutStore.setActor('user-123')
 
     // Track change notifications AFTER setting source/actor
-    const changes: any[] = []
+    const changes: LayoutChange[] = []
     const unsubscribe = layoutStore.onChange((change) => {
       changes.push(change)
     })
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/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..992fe2dcd
--- /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 })
+    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/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
index ea31e5682..31831159a 100644
--- a/tests-ui/tests/utils/spatial/QuadTree.test.ts
+++ b/tests-ui/tests/utils/spatial/QuadTree.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
+import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
 
 describe('QuadTree', () => {
   let quadTree: QuadTree<string>