Bump version of 1.25 to 1.25.11 (#5221)

* Bump version of 1.25 - Gemini Image static price badge

* Cherry-pick 48b1ebf6cc and merge

* package-lock update

.claude/commands/create-frontend-release.md

@@ -111,7 +111,50 @@ echo "Last stable release: $LAST_STABLE"
    ```
 7. **HUMAN ANALYSIS**: Review change summary and verify scope
 
-### Step 3: Breaking Change Analysis
+### Step 3: Version Preview
+
+**Version Preview:**
+- Current: `${CURRENT_VERSION}`
+- Proposed: Show exact version number
+- **CONFIRMATION REQUIRED**: Proceed with version `X.Y.Z`?
+
+### Step 4: Security and Dependency Audit
+
+1. Run security audit:
+   ```bash
+   npm audit --audit-level moderate
+   ```
+2. Check for known vulnerabilities in dependencies
+3. Scan for hardcoded secrets or credentials:
+   ```bash
+   git log -p ${BASE_TAG}..HEAD | grep -iE "(password|key|secret|token)" || echo "No sensitive data found"
+   ```
+4. Verify no sensitive data in recent commits
+5. **SECURITY REVIEW**: Address any critical findings before proceeding?
+
+### Step 5: Pre-Release Testing
+
+1. Run complete test suite:
+   ```bash
+   npm run test:unit
+   npm run test:component
+   ```
+2. Run type checking:
+   ```bash
+   npm run typecheck
+   ```
+3. Run linting (may have issues with missing packages):
+   ```bash
+   npm run lint || echo "Lint issues - verify if critical"
+   ```
+4. Test build process:
+   ```bash
+   npm run build
+   npm run build:types
+   ```
+5. **QUALITY GATE**: All tests and builds passing?
+
+### Step 6: Breaking Change Analysis
 
 1. Analyze API changes in:
    - Public TypeScript interfaces
@@ -126,7 +169,7 @@ echo "Last stable release: $LAST_STABLE"
 3. Generate breaking change summary
 4. **COMPATIBILITY REVIEW**: Breaking changes documented and justified?
 
-### Step 4: Analyze Dependency Updates
+### Step 7: Analyze Dependency Updates
 
 1. **Check significant dependency updates:**
    ```bash
@@ -152,117 +195,7 @@ echo "Last stable release: $LAST_STABLE"
    done
    ```
 
-### Step 5: Generate GTM Feature Summary
-
-1. **Collect PR data for analysis:**
-   ```bash
-   # Get list of PR numbers from commits
-   PR_NUMBERS=$(git log ${BASE_TAG}..HEAD --oneline --no-merges --first-parent | \
-     grep -oE "#[0-9]+" | tr -d '#' | sort -u)
-   
-   # Save PR data for each PR
-   echo "[" > prs-${NEW_VERSION}.json
-   first=true
-   for PR in $PR_NUMBERS; do
-     [[ "$first" == true ]] && first=false || echo "," >> prs-${NEW_VERSION}.json
-     gh pr view $PR --json number,title,author,body,labels 2>/dev/null >> prs-${NEW_VERSION}.json || echo "{}" >> prs-${NEW_VERSION}.json
-   done
-   echo "]" >> prs-${NEW_VERSION}.json
-   ```
-
-2. **Analyze for GTM-worthy features:**
-   ```
-   <task>
-   Review these PRs to identify features worthy of marketing attention.
-   
-   A feature is GTM-worthy if it meets ALL of these criteria:
-   - Introduces a NEW capability users didn't have before (not just improvements)
-   - Would be a compelling reason for users to upgrade to this version
-   - Can be demonstrated visually or has clear before/after comparison
-   - Affects a significant portion of the user base
-   
-   NOT GTM-worthy:
-   - Bug fixes (even important ones)
-   - Minor UI tweaks or color changes
-   - Performance improvements without user-visible impact
-   - Internal refactoring
-   - Small convenience features
-   - Features that only improve existing functionality marginally
-   
-   For each GTM-worthy feature, note:
-   - PR number, title, and author
-   - Media links from the PR description
-   - One compelling sentence on why users should care
-   
-   If there are no GTM-worthy features, just say "No marketing-worthy features in this release."
-   </task>
-   
-   PR data: [contents of prs-${NEW_VERSION}.json]
-   ```
-
-3. **Generate GTM notification:**
-   ```bash
-   # Save to gtm-summary-${NEW_VERSION}.md based on analysis
-   # If GTM-worthy features exist, include them with testing instructions
-   # If not, note that this is a maintenance/bug fix release
-   
-   # Check if notification is needed
-   if grep -q "No marketing-worthy features" gtm-summary-${NEW_VERSION}.md; then
-     echo "✅ No GTM notification needed for this release"
-     echo "📄 Summary saved to: gtm-summary-${NEW_VERSION}.md"
-   else
-     echo "📋 GTM summary saved to: gtm-summary-${NEW_VERSION}.md"
-     echo "📤 Share this file in #gtm channel to notify the team"
-   fi
-   ```
-
-### Step 6: Version Preview
-
-**Version Preview:**
-- Current: `${CURRENT_VERSION}`
-- Proposed: Show exact version number based on analysis:
-  - Major version if breaking changes detected
-  - Minor version if new features added
-  - Patch version if only bug fixes
-- **CONFIRMATION REQUIRED**: Proceed with version `X.Y.Z`?
-
-### Step 7: Security and Dependency Audit
-
-1. Run security audit:
-   ```bash
-   npm audit --audit-level moderate
-   ```
-2. Check for known vulnerabilities in dependencies
-3. Scan for hardcoded secrets or credentials:
-   ```bash
-   git log -p ${BASE_TAG}..HEAD | grep -iE "(password|key|secret|token)" || echo "No sensitive data found"
-   ```
-4. Verify no sensitive data in recent commits
-5. **SECURITY REVIEW**: Address any critical findings before proceeding?
-
-### Step 8: Pre-Release Testing
-
-1. Run complete test suite:
-   ```bash
-   npm run test:unit
-   npm run test:component
-   ```
-2. Run type checking:
-   ```bash
-   npm run typecheck
-   ```
-3. Run linting (may have issues with missing packages):
-   ```bash
-   npm run lint || echo "Lint issues - verify if critical"
-   ```
-4. Test build process:
-   ```bash
-   npm run build
-   npm run build:types
-   ```
-5. **QUALITY GATE**: All tests and builds passing?
-
-### Step 9: Generate Comprehensive Release Notes
+### Step 8: Generate Comprehensive Release Notes
 
 1. Extract commit messages since base release:
    ```bash
@@ -277,54 +210,31 @@ echo "Last stable release: $LAST_STABLE"
        echo "WARNING: PR #$PR not on main branch!"
    done
    ```
-3. Create standardized release notes using this exact template:
+3. Create comprehensive release notes including:
+   - **Version Change**: Show version bump details
+   - **Changelog** grouped by type:
+     - 🚀 **Features** (feat:)
+     - 🐛 **Bug Fixes** (fix:)
+     - 💥 **Breaking Changes** (BREAKING CHANGE)
+     - 📚 **Documentation** (docs:)
+     - 🔧 **Maintenance** (chore:, refactor:)
+     - ⬆️ **Dependencies** (deps:, dependency updates)
+       - **Litegraph Changes** (if version updated):
+         - 🚀 Features: ${LITEGRAPH_FEATURES}
+         - 🐛 Bug Fixes: ${LITEGRAPH_FIXES}
+         - 💥 Breaking Changes: ${LITEGRAPH_BREAKING}
+         - 🔧 Other Changes: ${LITEGRAPH_OTHER}
+       - **Other Major Dependencies**: ${OTHER_DEP_CHANGES}
+   - Include PR numbers and links
+   - Add issue references (Fixes #123)
+4. **Save release notes:**
    ```bash
-   cat > release-notes-${NEW_VERSION}.md << 'EOF'
-   ## ⚠️ Breaking Changes
-   <!-- List breaking changes if any, otherwise remove this entire section -->
-   - Breaking change description (#PR_NUMBER)
-
-   ---
-
-   ## What's Changed
-
-   ### 🚀 Features
-   <!-- List features here, one per line with PR reference -->
-   - Feature description (#PR_NUMBER)
-
-   ### 🐛 Bug Fixes
-   <!-- List bug fixes here, one per line with PR reference -->
-   - Bug fix description (#PR_NUMBER)
-
-   ### 🔧 Maintenance
-   <!-- List refactoring, chore, and other maintenance items -->
-   - Maintenance item description (#PR_NUMBER)
-
-   ### 📚 Documentation
-   <!-- List documentation changes if any, remove section if empty -->
-   - Documentation update description (#PR_NUMBER)
-
-   ### ⬆️ Dependencies
-   <!-- List dependency updates -->
-   - Updated dependency from vX.X.X to vY.Y.Y (#PR_NUMBER)
-
-   **Full Changelog**: https://github.com/Comfy-Org/ComfyUI_frontend/compare/${BASE_TAG}...v${NEW_VERSION}
-   EOF
+   # Save release notes for PR and GitHub release
+   echo "$RELEASE_NOTES" > release-notes-${NEW_VERSION}.md
    ```
-4. **Parse commits and populate template:**
-   - Group commits by conventional commit type (feat:, fix:, chore:, etc.)
-   - Extract PR numbers from commit messages
-   - For breaking changes, analyze if changes affect:
-     - Public APIs (app object, api module)
-     - Extension/workspace manager APIs
-     - Node schema, workflow schema, or other public schemas
-     - Any other public-facing interfaces
-   - For dependency updates, list version changes with PR numbers
-   - Remove empty sections (e.g., if no documentation changes)
-   - Ensure consistent bullet format: `- Description (#PR_NUMBER)`
-5. **CONTENT REVIEW**: Release notes follow standard format?
+5. **CONTENT REVIEW**: Release notes clear and comprehensive with dependency details?
 
-### Step 10: Create Version Bump PR
+### Step 9: Create Version Bump PR
 
 **For standard version bumps (patch/minor/major):**
 ```bash
@@ -363,14 +273,40 @@ echo "Workflow triggered. Waiting for PR creation..."
      --body-file release-notes-${NEW_VERSION}.md \
      --label "Release"
    ```
-3. **Update PR with release notes:**
+3. **Add required sections to PR body:**
    ```bash
-   # For workflow-created PRs, update the body with our release notes
-   gh pr edit ${PR_NUMBER} --body-file release-notes-${NEW_VERSION}.md
-   ```
-4. **PR REVIEW**: Version bump PR created with standardized release notes?
+   # Create PR body with release notes plus required sections
+   cat > pr-body.md << EOF
+   ${RELEASE_NOTES}
 
-### Step 11: Critical Release PR Verification
+   ## Breaking Changes
+   ${BREAKING_CHANGES:-None}
+
+   ## Testing Performed
+   - ✅ Full test suite (unit, component)
+   - ✅ TypeScript compilation
+   - ✅ Linting checks
+   - ✅ Build verification
+   - ✅ Security audit
+
+   ## Distribution Channels
+   - GitHub Release (with dist.zip)
+   - PyPI Package (comfyui-frontend-package)
+   - npm Package (@comfyorg/comfyui-frontend-types)
+
+   ## Post-Release Tasks
+   - [ ] Verify all distribution channels
+   - [ ] Update external documentation
+   - [ ] Monitor for issues
+   EOF
+   ```
+4. Update PR with enhanced description:
+   ```bash
+   gh pr edit ${PR_NUMBER} --body-file pr-body.md
+   ```
+5. **PR REVIEW**: Version bump PR created and enhanced correctly?
+
+### Step 10: Critical Release PR Verification
 
 1. **CRITICAL**: Verify PR has "Release" label:
    ```bash
@@ -392,7 +328,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 7. **FINAL CODE REVIEW**: Release label present and no [skip ci]?
 
-### Step 12: Pre-Merge Validation
+### Step 11: Pre-Merge Validation
 
 1. **Review Requirements**: Release PRs require approval
 2. Monitor CI checks - watch for update-locales
@@ -400,7 +336,7 @@ echo "Workflow triggered. Waiting for PR creation..."
 4. Check no new commits to main since PR creation
 5. **DEPLOYMENT READINESS**: Ready to merge?
 
-### Step 13: Execute Release
+### Step 12: Execute Release
 
 1. **FINAL CONFIRMATION**: Merge PR to trigger release?
 2. Merge the Release PR:
@@ -433,7 +369,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    gh run watch ${WORKFLOW_RUN_ID}
    ```
 
-### Step 14: Enhance GitHub Release
+### Step 13: Enhance GitHub Release
 
 1. Wait for automatic release creation:
    ```bash
@@ -461,7 +397,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    gh release view v${NEW_VERSION}
    ```
 
-### Step 15: Verify Multi-Channel Distribution
+### Step 14: Verify Multi-Channel Distribution
 
 1. **GitHub Release:**
    ```bash
@@ -499,7 +435,7 @@ echo "Workflow triggered. Waiting for PR creation..."
 
 4. **DISTRIBUTION VERIFICATION**: All channels published successfully?
 
-### Step 16: Post-Release Monitoring Setup
+### Step 15: Post-Release Monitoring Setup
 
 1. **Monitor immediate release health:**
    ```bash
@@ -569,49 +505,11 @@ echo "Workflow triggered. Waiting for PR creation..."
    ## Files Generated
    - \`release-notes-${NEW_VERSION}.md\` - Comprehensive release notes
    - \`post-release-checklist.md\` - Follow-up tasks
-   - \`gtm-summary-${NEW_VERSION}.md\` - Marketing team notification
    EOF
    ```
 
 4. **RELEASE COMPLETION**: All post-release setup completed?
 
-### Step 17: Create Release Summary
-
-1. **Create comprehensive release summary:**
-   ```bash
-   cat > release-summary-${NEW_VERSION}.md << EOF
-   # Release Summary: ComfyUI Frontend v${NEW_VERSION}
-
-   **Released:** $(date)
-   **Type:** ${VERSION_TYPE}
-   **Duration:** ~${RELEASE_DURATION} minutes
-   **Release Commit:** ${RELEASE_COMMIT}
-
-   ## Metrics
-   - **Commits Included:** ${COMMITS_COUNT}
-   - **Contributors:** ${CONTRIBUTORS_COUNT}
-   - **Files Changed:** ${FILES_CHANGED}
-   - **Lines Added/Removed:** +${LINES_ADDED}/-${LINES_REMOVED}
-
-   ## Distribution Status
-   - ✅ GitHub Release: Published
-   - ✅ PyPI Package: Available
-   - ✅ npm Types: Available
-
-   ## Next Steps
-   - Monitor for 24-48 hours
-   - Address any critical issues immediately
-   - Plan next release cycle
-
-   ## Files Generated
-   - \`release-notes-${NEW_VERSION}.md\` - Comprehensive release notes
-   - \`post-release-checklist.md\` - Follow-up tasks
-   - \`gtm-summary-${NEW_VERSION}.md\` - Marketing team notification
-   EOF
-   ```
-
-2. **RELEASE COMPLETION**: All steps completed successfully?
-
 ## Advanced Safety Features
 
 ### Rollback Procedures
@@ -694,46 +592,55 @@ The command implements multiple quality gates:
 - Draft release status
 - Python package specs require that prereleases use alpha/beta/rc as the preid
 
-## Critical Implementation Notes
+## Common Issues and Solutions
 
-When executing this release process, pay attention to these key aspects:
+### Issue: Pre-release Version Confusion
+**Problem**: Not sure whether to promote pre-release or create new version
+**Solution**: 
+- Follow semver standards: a prerelease version is followed by a normal release.  It should have the same major, minor, and patch versions as the prerelease.
 
-### Version Handling
-- For pre-release versions (e.g., 1.24.0-rc.1), the next stable release should be the same version without the suffix (1.24.0)
-- Never skip version numbers - follow semantic versioning strictly
+### Issue: Wrong Commit Count
+**Problem**: Changelog includes commits from other branches
+**Solution**: Always use `--first-parent` flag with git log
 
-### Commit History Analysis
-- **ALWAYS** use `--first-parent` flag with git log to avoid including commits from merged feature branches
-- Verify PR merge targets before including them in changelogs:
-  ```bash
-  gh pr view ${PR_NUMBER} --json baseRefName
-  ```
+**Update**: Sometimes update-locales doesn't add [skip ci] - always verify!
 
-### Release Workflow Triggers
-- The "Release" label on the PR is **CRITICAL** - without it, PyPI/npm publishing won't occur
-- Check for `[skip ci]` in commit messages before merging - this blocks the release workflow
-- If you encounter `[skip ci]`, push an empty commit to override it:
-  ```bash
-  git commit --allow-empty -m "Trigger release workflow"
-  ```
+### Issue: Missing PRs in Changelog
+**Problem**: PR was merged to different branch
+**Solution**: Verify PR merge target with:
+```bash
+gh pr view ${PR_NUMBER} --json baseRefName
+```
 
-### PR Creation Details
-- Version bump PRs come from `comfy-pr-bot`, not `github-actions`
-- The workflow typically completes in 20-30 seconds
-- Always wait for the PR to be created before trying to edit it
+### Issue: Incomplete Dependency Changelog
+**Problem**: Litegraph or other dependency updates only show version bump, not actual changes
+**Solution**: The command now automatically:
+- Detects litegraph version changes between releases
+- Clones the litegraph repository temporarily
+- Extracts and categorizes changes between versions
+- Includes detailed litegraph changelog in release notes
+- Cleans up temporary files after analysis
 
-### Breaking Changes Detection
-- Analyze changes to public-facing APIs:
-  - The `app` object and its methods
-  - The `api` module exports
-  - Extension and workspace manager interfaces
-  - Node schema, workflow schema, and other public schemas
-- Any modifications to these require marking as breaking changes
+### Issue: Release Failed Due to [skip ci]
+**Problem**: Release workflow didn't trigger after merge
+**Prevention**: Always avoid this scenario
+- Ensure that `[skip ci]` or similar flags are NOT in the `HEAD` commit message of the PR
+  - Push a new, empty commit to the PR
+- Always double-check this immediately before merging
 
-### Recovery Procedures
-If the release workflow fails to trigger:
-1. Create a revert PR to restore the previous version
-2. Merge the revert
-3. Re-run the version bump workflow
-4. This approach is cleaner than creating extra version numbers
+**Recovery Strategy**:
+1. Revert version in a new PR (e.g., 1.24.0 → 1.24.0-1)
+2. Merge the revert PR
+3. Run version bump workflow again
+4. This creates a fresh PR without [skip ci]
+Benefits: Cleaner than creating extra version numbers
+
+## Key Learnings & Notes
+
+1. **PR Author**: Version bump PRs are created by `comfy-pr-bot`, not `github-actions`
+2. **Workflow Speed**: Version bump workflow typically completes in ~20-30 seconds
+3. **Update-locales Behavior**: Inconsistent - sometimes adds [skip ci], sometimes doesn't
+4. **Recovery Options**: Reverting version is cleaner than creating extra versions
+5. **Dependency Tracking**: Command now automatically includes litegraph and major dependency changes in changelogs
+6. **Litegraph Integration**: Temporary cloning of litegraph repo provides detailed change analysis between versions
 

.claude/commands/create-hotfix-release.md

@@ -138,50 +138,14 @@ For each commit:
    ```bash
    gh pr create --base core/X.Y --head release/1.23.5 \
      --title "[Release] v1.23.5" \
-     --body "Release notes will be added shortly..." \
+     --body "..." \
      --label "Release"
    ```
 3. **CRITICAL**: Verify "Release" label is added
-4. Create standardized release notes:
-   ```bash
-   cat > release-notes-${NEW_VERSION}.md << 'EOF'
-   ## ⚠️ Breaking Changes
-   <!-- List breaking changes if any, otherwise remove this entire section -->
-   - Breaking change description (#PR_NUMBER)
-
-   ---
-
-   ## What's Changed
-
-   ### 🚀 Features
-   <!-- List features here, one per line with PR reference -->
-   - Feature description (#PR_NUMBER)
-
-   ### 🐛 Bug Fixes
-   <!-- List bug fixes here, one per line with PR reference -->
-   - Bug fix description (#PR_NUMBER)
-
-   ### 🔧 Maintenance
-   <!-- List refactoring, chore, and other maintenance items -->
-   - Maintenance item description (#PR_NUMBER)
-
-   ### 📚 Documentation
-   <!-- List documentation changes if any, remove section if empty -->
-   - Documentation update description (#PR_NUMBER)
-
-   ### ⬆️ Dependencies
-   <!-- List dependency updates -->
-   - Updated dependency from vX.X.X to vY.Y.Y (#PR_NUMBER)
-
-   **Full Changelog**: https://github.com/Comfy-Org/ComfyUI_frontend/compare/v${CURRENT_VERSION}...v${NEW_VERSION}
-   EOF
-   ```
-   - For hotfixes, typically only populate the "Bug Fixes" section
-   - Include links to the cherry-picked PRs/commits
-   - Update the PR body with the release notes:
-     ```bash
-     gh pr edit ${PR_NUMBER} --body-file release-notes-${NEW_VERSION}.md
-     ```
+4. PR description should include:
+   - Version: `1.23.4` → `1.23.5`
+   - Included fixes (link to previous PR)
+   - Release notes for users
 5. **CONFIRMATION REQUIRED**: Release PR has "Release" label?
 
 ### Step 11: Monitor Release Process

.claude/commands/pr.md

@@ -1,131 +0,0 @@
-# Create PR
-
-Automate PR creation with proper tags, labels, and concise summary.
-
-## Step 1: Check Prerequisites
-
-```bash
-# Ensure you have uncommitted changes
-git status
-
-# If changes exist, commit them first
-git add .
-git commit -m "[tag] Your commit message"
-```
-
-## Step 2: Push and Create PR
-
-You'll create the PR with the following structure:
-
-### PR Tags (use in title)
-
-- `[feat]` - New features → label: `enhancement`
-- `[bugfix]` - Bug fixes → label: `verified bug`
-- `[refactor]` - Code restructuring → label: `enhancement`
-- `[docs]` - Documentation → label: `documentation`
-- `[test]` - Test changes → label: `enhancement`
-- `[ci]` - CI/CD changes → label: `enhancement`
-
-### Label Mapping
-
-#### General Labels
-
-- Feature/Enhancement: `enhancement`
-- Bug fixes: `verified bug`
-- Documentation: `documentation`
-- Dependencies: `dependencies`
-- Performance: `Performance`
-- Desktop app: `Electron`
-
-#### Product Area Labels
-
-**Core Features**
-
-- `area:nodes` - Node-related functionality
-- `area:workflows` - Workflow management
-- `area:queue` - Queue system
-- `area:models` - Model handling
-- `area:templates` - Template system
-- `area:subgraph` - Subgraph functionality
-
-**UI Components**
-
-- `area:ui` - General user interface improvements
-- `area:widgets` - Widget system
-- `area:dom-widgets` - DOM-based widgets
-- `area:links` - Connection links between nodes
-- `area:groups` - Node grouping functionality
-- `area:reroutes` - Reroute nodes
-- `area:previews` - Preview functionality
-- `area:minimap` - Minimap navigation
-- `area:floating-toolbox` - Floating toolbar
-- `area:mask-editor` - Mask editing tools
-
-**Navigation & Organization**
-
-- `area:navigation` - Navigation system
-- `area:search` - Search functionality
-- `area:workspace-management` - Workspace features
-- `area:topbar-menu` - Top bar menu
-- `area:help-menu` - Help menu system
-
-**System Features**
-
-- `area:settings` - Settings/preferences
-- `area:hotkeys` - Keyboard shortcuts
-- `area:undo-redo` - Undo/redo system
-- `area:customization` - Customization features
-- `area:auth` - Authentication
-- `area:comms` - Communication/networking
-
-**Development & Infrastructure**
-
-- `area:CI/CD` - CI/CD pipeline
-- `area:testing` - Testing infrastructure
-- `area:vue-migration` - Vue migration work
-- `area:manager` - ComfyUI Manager integration
-
-**Platform-Specific**
-
-- `area:mobile` - Mobile support
-- `area:3d` - 3D-related features
-
-**Special Areas**
-
-- `area:i18n` - Translation/internationalization
-- `area:CNR` - Comfy Node Registry
-
-## Step 3: Execute PR Creation
-
-```bash
-# First, push your branch
-git push -u origin $(git branch --show-current)
-
-# Then create the PR (replace placeholders)
-gh pr create \
-  --title "[TAG] Brief description" \
-  --body "$(cat <<'EOF'
-## Summary
-One sentence describing what changed and why.
-
-## Changes
-- **What**: Core functionality added/modified
-- **Breaking**: Any breaking changes (if none, omit this line)
-- **Dependencies**: New dependencies (if none, omit this line)
-
-## Review Focus
-- Critical design decisions or edge cases that need attention
-
-Fixes #ISSUE_NUMBER
-EOF
-)" \
-  --label "APPROPRIATE_LABEL" \
-  --base main
-```
-
-## Additional Options
-
-- Add multiple labels: `--label "enhancement,Performance"`
-- Request reviewers: `--reviewer @username`
-- Mark as draft: `--draft`
-- Open in browser after creation: `--web`

.cursorrules

@@ -49,7 +49,7 @@ DO NOT use deprecated PrimeVue components. Use these replacements instead:
 
 ## Development Guidelines
 1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
+2. Use lodash for utility functions
 3. Use TypeScript for type safety
 4. Implement proper props and emits definitions
 5. Utilize Vue 3's Teleport component when needed

.github/copilot-instructions.md

@@ -18,7 +18,7 @@ Use Tailwind CSS for styling
 
 Leverage VueUse functions for performance-enhancing styles
 
-Use es-toolkit for utility functions
+Use lodash for utility functions
 
 Use TypeScript for type safety
 

.github/pull_request_template.md

@@ -1,20 +0,0 @@
-## Summary
-
-<!-- One sentence describing what changed and why. -->
-
-## Changes
-
-- **What**: <!-- Core functionality added/modified -->
-- **Breaking**: <!-- Any breaking changes (if none, remove this line) -->
-- **Dependencies**: <!-- New dependencies (if none, remove this line) -->
-
-## Review Focus
-
-<!-- Critical design decisions or edge cases that need attention -->
-
-<!-- If this PR fixes an issue, uncomment and update the line below -->
-<!-- Fixes #ISSUE_NUMBER -->
-
-## Screenshots (if applicable)
-
-<!-- Add screenshots or video recording to help explain your changes -->

.github/workflows/claude-pr-review.yml

@@ -19,10 +19,10 @@ jobs:
       should-proceed: ${{ steps.check-status.outputs.proceed }}
     steps:
       - name: Wait for other CI checks
-        uses: lewagon/wait-on-check-action@e106e5c43e8ca1edea6383a39a01c5ca495fd812
+        uses: lewagon/wait-on-check-action@v1.3.1
         with:
           ref: ${{ github.event.pull_request.head.sha }}
-          check-regexp: '^(lint-and-format|test|playwright-tests)'
+          check-regexp: '^(eslint|prettier|test|playwright-tests)'
           wait-interval: 30
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       
@@ -30,7 +30,7 @@ jobs:
         id: check-status
         run: |
           # Get all check runs for this commit
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format|test|playwright-tests")) | {name, conclusion}')
+          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("eslint|prettier|test|playwright-tests")) | {name, conclusion}')
           
           # Check if any required checks failed
           if echo "$CHECK_RUNS" | grep -q '"conclusion": "failure"'; then

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

@@ -145,7 +145,7 @@ jobs:
             -d '{
               "required_status_checks": {
                 "strict": true,
-                "contexts": ["lint-and-format", "test", "playwright-tests"]
+                "contexts": ["build", "test"]
               },
               "enforce_admins": false,
               "required_pull_request_reviews": {

.github/workflows/eslint.yaml

@@ -0,0 +1,17 @@
+name: ESLint
+
+on:
+  pull_request:
+    branches-ignore: [ wip/*, draft/*, temp/* ]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+    - run: npm ci
+    - run: npm run lint

.github/workflows/format.yaml

@@ -0,0 +1,23 @@
+name: Prettier Check
+
+on:
+  pull_request:
+    branches-ignore: [ wip/*, draft/*, temp/* ]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run Prettier check
+      run: npm run format:check

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

@@ -1,83 +0,0 @@
-name: Lint and Format
-
-on:
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  lint-and-format:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout PR
-        uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 0
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 'lts/*'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run ESLint with auto-fix
-        run: npm run lint:fix
-
-      - name: Run Prettier with auto-format
-        run: npm run format
-
-      - name: Check for changes
-        id: verify-changed-files
-        run: |
-          if [ -n "$(git status --porcelain)" ]; then
-            echo "changed=true" >> $GITHUB_OUTPUT
-          else
-            echo "changed=false" >> $GITHUB_OUTPUT  
-          fi
-
-      - name: Commit changes
-        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
-        run: |
-          git config --local user.email "action@github.com"
-          git config --local user.name "GitHub Action"
-          git add .
-          git commit -m "[auto-fix] Apply ESLint and Prettier fixes"
-          git push
-
-      - name: Final validation
-        run: |
-          npm run lint
-          npm run format:check
-          npm run knip
-
-      - name: Comment on PR about auto-fix
-        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
-        uses: actions/github-script@v7
-        with:
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
-            })
-
-      - name: Comment on PR about manual fix needed
-        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
-        uses: actions/github-script@v7
-        with:
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\nnpm run prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\nnpm run lint:fix\nnpm run format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
-            })

.github/workflows/test-ui.yaml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [main, master, core/*, desktop/*]
   pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*, vue-nodes-migration]
+    branches-ignore: [wip/*, draft/*, temp/*]
 
 jobs:
   setup:
@@ -60,7 +60,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
+        browser: [chromium, chromium-2x, mobile-chrome]
     steps:
       - name: Wait for cache propagation
         run: sleep 10

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

@@ -61,11 +61,6 @@ jobs:
             exit 1
           fi
 
-      - name: Lint generated types
-        run: |
-          echo "Linting generated ComfyUI-Manager API types..."
-          npm run lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
-
       - name: Check for changes
         id: check-changes
         run: |
@@ -80,7 +75,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
+        uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'

.github/workflows/update-registry-types.yaml

@@ -61,11 +61,6 @@ jobs:
             exit 1
           fi
 
-      - name: Lint generated types
-        run: |
-          echo "Linting generated Comfy Registry API types..."
-          npm run lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
-
       - name: Check for changes
         id: check-changes
         run: |

.gitignore

@@ -7,15 +7,6 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-# Package manager lockfiles (allow users to use different package managers)
-bun.lock
-bun.lockb
-pnpm-lock.yaml
-yarn.lock
-
-# ESLint cache
-.eslintcache
-
 node_modules
 dist
 dist-ssr
@@ -67,8 +58,5 @@ dist.zip
 # Temporary repository directory
 templates_repo/
 
-# Vite's timestamped config modules
+# Vite’s timestamped config modules
 vite.config.mts.timestamp-*.mjs
-
-# Linux core dumps
-./core

.i18nrc.cjs

@@ -13,10 +13,6 @@ module.exports = defineConfig({
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
-  
-  IMPORTANT Chinese Translation Guidelines:
-  - For 'zh' locale: Use ONLY Simplified Chinese characters (简体中文). Common examples: 节点 (not 節點), 画布 (not 畫布), 图像 (not 圖像), 选择 (not 選擇), 减小 (not 減小).
-  - For 'zh-TW' locale: Use ONLY Traditional Chinese characters (繁體中文) with Taiwan-specific terminology.
-  - NEVER mix Simplified and Traditional Chinese characters within the same locale.
+  Note: For Traditional Chinese (Taiwan), use Taiwan-specific terminology and traditional characters.
   `
 });

AGENTS.md

@@ -1,40 +0,0 @@
-# Repository Guidelines
-
-## Project Structure & Module Organization
-- Source: `src/` (Vue 3 + TypeScript). Key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`.
-- Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
-- Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
-- Public assets: `public/`. Build output: `dist/`.
-- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
-
-## Build, Test, and Development Commands
-- `npm run dev`: Start Vite dev server.
-- `npm run dev:electron`: Dev server with Electron API mocks.
-- `npm run build`: Type-check then production build to `dist/`.
-- `npm run preview`: Preview the production build locally.
-- `npm run test:unit`: Run Vitest unit tests (`tests-ui/`).
-- `npm run test:component`: Run component tests (`src/components/`).
-- `npm run test:browser`: Run Playwright E2E tests (`browser_tests/`).
-- `npm run lint` / `npm run lint:fix`: Lint (ESLint). `npm run format` / `format:check`: Prettier.
-- `npm run typecheck`: Vue TSC type checking.
-
-## Coding Style & Naming Conventions
-- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
-- Imports: sorted/grouped by plugin; run `npm run format` before committing.
-- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
-- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
-
-## Testing Guidelines
-- Frameworks: Vitest (unit/component, happy-dom) and Playwright (E2E).
-- Test files: `**/*.{test,spec}.{ts,tsx,js}` under `tests-ui/`, `src/components/`, and `src/lib/litegraph/test/`.
-- Coverage: text/json/html reporters enabled; aim to cover critical logic and new features.
-- Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
-
-## Commit & Pull Request Guidelines
-- Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
-- PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
-- Quality gates: `npm run lint`, `npm run typecheck`, and relevant tests must pass. Keep PRs focused and small.
-
-## Security & Configuration Tips
-- Secrets: Use `.env` (see `.env_example`); do not commit secrets.
-- Backend: Dev server expects ComfyUI backend at `localhost:8188` by default; configure via `.env`.

CONTRIBUTING.md

@@ -255,17 +255,11 @@ npm run format
 - Add translations to `src/locales/en/main.json`
 - Use translation keys: `const { t } = useI18n(); t('key.path')`
 
-## Icons
+## Custom Icons
 
-The project supports three types of icons, all with automatic imports (no manual imports needed):
+The project supports custom SVG icons through the unplugin-icons system. Custom icons are stored in `src/assets/icons/custom/` and can be used as Vue components with the `i-comfy:` prefix.
 
-1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
-3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
-
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/`.
-
-For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
+For detailed instructions on adding and using custom icons, see [src/assets/icons/README.md](src/assets/icons/README.md).
 
 ## Working with litegraph.js
 

browser_tests/assets/reroute/single-native-reroute-default-workflow.json

@@ -1,259 +0,0 @@
-{
-  "id": "dec788c2-9829-4a5d-a1ee-d6f0a678b42a",
-  "revision": 0,
-  "last_node_id": 9,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 7,
-      "type": "CLIPTextEncode",
-      "pos": [413, 389],
-      "size": [425.27801513671875, 180.6060791015625],
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 5
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [6]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": ["text, watermark"]
-    },
-    {
-      "id": 6,
-      "type": "CLIPTextEncode",
-      "pos": [415, 186],
-      "size": [422.84503173828125, 164.31304931640625],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [4]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": [
-        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
-      ]
-    },
-    {
-      "id": 5,
-      "type": "EmptyLatentImage",
-      "pos": [473, 609],
-      "size": [315, 106],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [2]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "EmptyLatentImage"
-      },
-      "widgets_values": [512, 512, 1]
-    },
-    {
-      "id": 3,
-      "type": "KSampler",
-      "pos": [863, 186],
-      "size": [315, 262],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": 1
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": 4
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": 6
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": 2
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [7]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        156680208700286,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 8,
-      "type": "VAEDecode",
-      "pos": [1209, 188],
-      "size": [210, 46],
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": 7
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 8
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "slot_index": 0,
-          "links": [9]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 9,
-      "type": "SaveImage",
-      "pos": [1451, 189],
-      "size": [210, 58],
-      "flags": {},
-      "order": 6,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 9
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI"]
-    },
-    {
-      "id": 4,
-      "type": "CheckpointLoaderSimple",
-      "pos": [26, 474],
-      "size": [315, 98],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "MODEL",
-          "type": "MODEL",
-          "slot_index": 0,
-          "links": [1]
-        },
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "slot_index": 1,
-          "links": [3, 5]
-        },
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "slot_index": 2,
-          "links": [8]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
-    }
-  ],
-  "links": [
-    [1, 4, 0, 3, 0, "MODEL"],
-    [2, 5, 0, 3, 3, "LATENT"],
-    [3, 4, 1, 6, 0, "CLIP"],
-    [4, 6, 0, 3, 1, "CONDITIONING"],
-    [5, 4, 1, 7, 0, "CLIP"],
-    [6, 7, 0, 3, 2, "CONDITIONING"],
-    [7, 3, 0, 8, 0, "LATENT"],
-    [8, 4, 2, 8, 1, "VAE"],
-    [9, 8, 0, 9, 0, "IMAGE"]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    },
-    "reroutes": [
-      {
-        "id": 1,
-        "pos": [372.66668701171875, 415.33331298828125],
-        "linkIds": [3]
-      }
-    ],
-    "linkExtensions": [
-      {
-        "id": 3,
-        "parentId": 1
-      }
-    ],
-    "frontendVersion": "1.26.1"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -786,164 +786,6 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  /**
-   * Core helper method for interacting with subgraph I/O slots.
-   * Handles both input/output slots and both right-click/double-click actions.
-   *
-   * @param slotType - 'input' or 'output'
-   * @param action - 'rightClick' or 'doubleClick'
-   * @param slotName - Optional specific slot name to target
-   * @private
-   */
-  private async interactWithSubgraphSlot(
-    slotType: 'input' | 'output',
-    action: 'rightClick' | 'doubleClick',
-    slotName?: string
-  ): Promise<void> {
-    const foundSlot = await this.page.evaluate(
-      async (params) => {
-        const { slotType, action, targetSlotName } = params
-        const app = window['app']
-        const currentGraph = app.canvas.graph
-
-        // Check if we're in a subgraph
-        if (currentGraph.constructor.name !== 'Subgraph') {
-          throw new Error(
-            'Not in a subgraph - this method only works inside subgraphs'
-          )
-        }
-
-        // Get the appropriate node and slots
-        const node =
-          slotType === 'input'
-            ? currentGraph.inputNode
-            : currentGraph.outputNode
-        const slots =
-          slotType === 'input' ? currentGraph.inputs : currentGraph.outputs
-
-        if (!node) {
-          throw new Error(`No ${slotType} node found in subgraph`)
-        }
-
-        if (!slots || slots.length === 0) {
-          throw new Error(`No ${slotType} slots found in subgraph`)
-        }
-
-        // Filter slots based on target name and action type
-        const slotsToTry = targetSlotName
-          ? slots.filter((slot) => slot.name === targetSlotName)
-          : action === 'rightClick'
-            ? slots
-            : [slots[0]] // Right-click tries all, double-click uses first
-
-        if (slotsToTry.length === 0) {
-          throw new Error(
-            targetSlotName
-              ? `${slotType} slot '${targetSlotName}' not found`
-              : `No ${slotType} slots available to try`
-          )
-        }
-
-        // Handle the interaction based on action type
-        if (action === 'rightClick') {
-          // Right-click: try each slot until one works
-          for (const slot of slotsToTry) {
-            if (!slot.pos) continue
-
-            const event = {
-              canvasX: slot.pos[0],
-              canvasY: slot.pos[1],
-              button: 2, // Right mouse button
-              preventDefault: () => {},
-              stopPropagation: () => {}
-            }
-
-            if (node.onPointerDown) {
-              node.onPointerDown(
-                event,
-                app.canvas.pointer,
-                app.canvas.linkConnector
-              )
-            }
-
-            // Wait briefly for menu to appear
-            await new Promise((resolve) => setTimeout(resolve, 100))
-
-            // Check if context menu appeared
-            const menuExists = document.querySelector('.litemenu-entry')
-            if (menuExists) {
-              return {
-                success: true,
-                slotName: slot.name,
-                x: slot.pos[0],
-                y: slot.pos[1]
-              }
-            }
-          }
-        } else if (action === 'doubleClick') {
-          // Double-click: use first slot with bounding rect center
-          const slot = slotsToTry[0]
-          if (!slot.boundingRect) {
-            throw new Error(`${slotType} slot bounding rect not found`)
-          }
-
-          const rect = slot.boundingRect
-          const testX = rect[0] + rect[2] / 2 // x + width/2
-          const testY = rect[1] + rect[3] / 2 // y + height/2
-
-          const event = {
-            canvasX: testX,
-            canvasY: testY,
-            button: 0, // Left mouse button
-            preventDefault: () => {},
-            stopPropagation: () => {}
-          }
-
-          if (node.onPointerDown) {
-            node.onPointerDown(
-              event,
-              app.canvas.pointer,
-              app.canvas.linkConnector
-            )
-
-            // Trigger double-click
-            if (app.canvas.pointer.onDoubleClick) {
-              app.canvas.pointer.onDoubleClick(event)
-            }
-          }
-
-          // Wait briefly for dialog to appear
-          await new Promise((resolve) => setTimeout(resolve, 200))
-
-          return { success: true, slotName: slot.name, x: testX, y: testY }
-        }
-
-        return { success: false }
-      },
-      { slotType, action, targetSlotName: slotName }
-    )
-
-    if (!foundSlot.success) {
-      const actionText =
-        action === 'rightClick' ? 'open context menu for' : 'double-click'
-      throw new Error(
-        slotName
-          ? `Could not ${actionText} ${slotType} slot '${slotName}'`
-          : `Could not find any ${slotType} slot to ${actionText}`
-      )
-    }
-
-    // Wait for the appropriate UI element to appear
-    if (action === 'rightClick') {
-      await this.page.waitForSelector('.litemenu-entry', {
-        state: 'visible',
-        timeout: 5000
-      })
-    } else {
-      await this.nextFrame()
-    }
-  }
-
   /**
    * Right-clicks on a subgraph input slot to open the context menu.
    * Must be called when inside a subgraph.
@@ -958,7 +800,93 @@ export class ComfyPage {
    * @returns Promise that resolves when the context menu appears
    */
   async rightClickSubgraphInputSlot(inputName?: string): Promise<void> {
-    return this.interactWithSubgraphSlot('input', 'rightClick', inputName)
+    const foundSlot = await this.page.evaluate(async (targetInputName) => {
+      const app = window['app']
+      const currentGraph = app.canvas.graph
+
+      // Check if we're in a subgraph
+      if (currentGraph.constructor.name !== 'Subgraph') {
+        throw new Error(
+          'Not in a subgraph - this method only works inside subgraphs'
+        )
+      }
+
+      // Get the input node
+      const inputNode = currentGraph.inputNode
+      if (!inputNode) {
+        throw new Error('No input node found in subgraph')
+      }
+
+      // Get available inputs
+      const inputs = currentGraph.inputs
+      if (!inputs || inputs.length === 0) {
+        throw new Error('No input slots found in subgraph')
+      }
+
+      // Filter to specific input if requested
+      const inputsToTry = targetInputName
+        ? inputs.filter((inp) => inp.name === targetInputName)
+        : inputs
+
+      if (inputsToTry.length === 0) {
+        throw new Error(
+          targetInputName
+            ? `Input slot '${targetInputName}' not found`
+            : 'No input slots available to try'
+        )
+      }
+
+      // Try right-clicking on each input slot position until one works
+      for (const input of inputsToTry) {
+        if (!input.pos) continue
+
+        const testX = input.pos[0]
+        const testY = input.pos[1]
+
+        // Create a right-click event at the input slot position
+        const rightClickEvent = {
+          canvasX: testX,
+          canvasY: testY,
+          button: 2, // Right mouse button
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        }
+
+        // Trigger the input node's right-click handler
+        if (inputNode.onPointerDown) {
+          inputNode.onPointerDown(
+            rightClickEvent,
+            app.canvas.pointer,
+            app.canvas.linkConnector
+          )
+        }
+
+        // Wait briefly for menu to appear
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        // Check if litegraph context menu appeared
+        const menuExists = document.querySelector('.litemenu-entry')
+        if (menuExists) {
+          return { success: true, inputName: input.name, x: testX, y: testY }
+        }
+      }
+
+      return { success: false }
+    }, inputName)
+
+    if (!foundSlot.success) {
+      throw new Error(
+        inputName
+          ? `Could not open context menu for input slot '${inputName}'`
+          : 'Could not find any input slot position to right-click'
+      )
+    }
+
+    // Wait for the litegraph context menu to be visible
+    await this.page.waitForSelector('.litemenu-entry', {
+      state: 'visible',
+      timeout: 5000
+    })
   }
 
   /**
@@ -972,31 +900,93 @@ export class ComfyPage {
    * @returns Promise that resolves when the context menu appears
    */
   async rightClickSubgraphOutputSlot(outputName?: string): Promise<void> {
-    return this.interactWithSubgraphSlot('output', 'rightClick', outputName)
-  }
+    const foundSlot = await this.page.evaluate(async (targetOutputName) => {
+      const app = window['app']
+      const currentGraph = app.canvas.graph
 
-  /**
-   * Double-clicks on a subgraph input slot to rename it.
-   * Must be called when inside a subgraph.
-   *
-   * @param inputName Optional name of the specific input slot to target (e.g., 'text').
-   *                  If not provided, tries the first available input slot.
-   * @returns Promise that resolves when the rename dialog appears
-   */
-  async doubleClickSubgraphInputSlot(inputName?: string): Promise<void> {
-    return this.interactWithSubgraphSlot('input', 'doubleClick', inputName)
-  }
+      // Check if we're in a subgraph
+      if (currentGraph.constructor.name !== 'Subgraph') {
+        throw new Error(
+          'Not in a subgraph - this method only works inside subgraphs'
+        )
+      }
 
-  /**
-   * Double-clicks on a subgraph output slot to rename it.
-   * Must be called when inside a subgraph.
-   *
-   * @param outputName Optional name of the specific output slot to target.
-   *                   If not provided, tries the first available output slot.
-   * @returns Promise that resolves when the rename dialog appears
-   */
-  async doubleClickSubgraphOutputSlot(outputName?: string): Promise<void> {
-    return this.interactWithSubgraphSlot('output', 'doubleClick', outputName)
+      // Get the output node
+      const outputNode = currentGraph.outputNode
+      if (!outputNode) {
+        throw new Error('No output node found in subgraph')
+      }
+
+      // Get available outputs
+      const outputs = currentGraph.outputs
+      if (!outputs || outputs.length === 0) {
+        throw new Error('No output slots found in subgraph')
+      }
+
+      // Filter to specific output if requested
+      const outputsToTry = targetOutputName
+        ? outputs.filter((out) => out.name === targetOutputName)
+        : outputs
+
+      if (outputsToTry.length === 0) {
+        throw new Error(
+          targetOutputName
+            ? `Output slot '${targetOutputName}' not found`
+            : 'No output slots available to try'
+        )
+      }
+
+      // Try right-clicking on each output slot position until one works
+      for (const output of outputsToTry) {
+        if (!output.pos) continue
+
+        const testX = output.pos[0]
+        const testY = output.pos[1]
+
+        // Create a right-click event at the output slot position
+        const rightClickEvent = {
+          canvasX: testX,
+          canvasY: testY,
+          button: 2, // Right mouse button
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        }
+
+        // Trigger the output node's right-click handler
+        if (outputNode.onPointerDown) {
+          outputNode.onPointerDown(
+            rightClickEvent,
+            app.canvas.pointer,
+            app.canvas.linkConnector
+          )
+        }
+
+        // Wait briefly for menu to appear
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        // Check if litegraph context menu appeared
+        const menuExists = document.querySelector('.litemenu-entry')
+        if (menuExists) {
+          return { success: true, outputName: output.name, x: testX, y: testY }
+        }
+      }
+
+      return { success: false }
+    }, outputName)
+
+    if (!foundSlot.success) {
+      throw new Error(
+        outputName
+          ? `Could not open context menu for output slot '${outputName}'`
+          : 'Could not find any output slot position to right-click'
+      )
+    }
+
+    // Wait for the litegraph context menu to be visible
+    await this.page.waitForSelector('.litemenu-entry', {
+      state: 'visible',
+      timeout: 5000
+    })
   }
 
   /**

browser_tests/fixtures/utils/taskHistory.ts

@@ -1,5 +1,5 @@
-import _ from 'es-toolkit/compat'
 import fs from 'fs'
+import _ from 'lodash'
 import path from 'path'
 import type { Request, Route } from 'playwright'
 import { v4 as uuidv4 } from 'uuid'
@@ -75,9 +75,7 @@ export default class TaskHistory {
 
   private async handleGetView(route: Route) {
     const fileName = getFilenameParam(route.request())
-    if (!this.outputContentTypes.has(fileName)) {
-      return route.continue()
-    }
+    if (!this.outputContentTypes.has(fileName)) route.continue()
 
     const asset = this.loadAsset(fileName)
     return route.fulfill({

browser_tests/tests/menu.spec.ts

@@ -73,77 +73,6 @@ test.describe('Menu', () => {
       expect(isTextCutoff).toBe(false)
     })
 
-    test('Clicking on active state items does not close menu', async ({
-      comfyPage
-    }) => {
-      // Open the menu
-      await comfyPage.menu.topbar.openTopbarMenu()
-      const menu = comfyPage.page.locator('.comfy-command-menu')
-
-      // Navigate to View menu
-      const viewMenuItem = comfyPage.page.locator(
-        '.p-menubar-item-label:text-is("View")'
-      )
-      await viewMenuItem.hover()
-
-      // Wait for submenu to appear
-      const viewSubmenu = comfyPage.page
-        .locator('.p-tieredmenu-submenu:visible')
-        .first()
-      await viewSubmenu.waitFor({ state: 'visible' })
-
-      // Find Bottom Panel menu item
-      const bottomPanelMenuItem = viewSubmenu
-        .locator('.p-tieredmenu-item:has-text("Bottom Panel")')
-        .first()
-      const bottomPanelItem = bottomPanelMenuItem.locator(
-        '.p-menubar-item-label:text-is("Bottom Panel")'
-      )
-      await bottomPanelItem.waitFor({ state: 'visible' })
-
-      // Get checkmark icon element
-      const checkmark = bottomPanelMenuItem.locator('.pi-check')
-
-      // Check initial state of bottom panel (it's initially hidden)
-      const bottomPanel = comfyPage.page.locator('.bottom-panel')
-      await expect(bottomPanel).not.toBeVisible()
-
-      // Checkmark should be invisible initially (panel is hidden)
-      await expect(checkmark).toHaveClass(/invisible/)
-
-      // Click Bottom Panel to toggle it on
-      await bottomPanelItem.click()
-
-      // Verify menu is still visible after clicking
-      await expect(menu).toBeVisible()
-      await expect(viewSubmenu).toBeVisible()
-
-      // Verify bottom panel is now visible
-      await expect(bottomPanel).toBeVisible()
-
-      // Checkmark should now be visible (panel is shown)
-      await expect(checkmark).not.toHaveClass(/invisible/)
-
-      // Click Bottom Panel again to toggle it off
-      await bottomPanelItem.click()
-
-      // Verify menu is still visible after second click
-      await expect(menu).toBeVisible()
-      await expect(viewSubmenu).toBeVisible()
-
-      // Verify bottom panel is hidden again
-      await expect(bottomPanel).not.toBeVisible()
-
-      // Checkmark should be invisible again (panel is hidden)
-      await expect(checkmark).toHaveClass(/invisible/)
-
-      // Click outside to close menu
-      await comfyPage.page.locator('body').click({ position: { x: 10, y: 10 } })
-
-      // Verify menu is now closed
-      await expect(menu).not.toBeVisible()
-    })
-
     test('Displays keybinding next to item', async ({ comfyPage }) => {
       await comfyPage.menu.topbar.openTopbarMenu()
       const workflowMenuItem = comfyPage.menu.topbar.getMenuItem('File')

browser_tests/tests/rerouteNode.spec.ts

@@ -100,29 +100,4 @@ test.describe('LiteGraph Native Reroute Node', () => {
       'native_reroute_context_menu.png'
     )
   })
-
-  test('Can delete link that is connected to two reroutes', async ({
-    comfyPage
-  }) => {
-    // https://github.com/Comfy-Org/ComfyUI_frontend/issues/4695
-    await comfyPage.loadWorkflow(
-      'reroute/single-native-reroute-default-workflow'
-    )
-
-    // To find the clickable midpoint button, we use the hardcoded value from the browser logs
-    // since the link is a bezier curve and not a straight line.
-    const middlePoint = { x: 359.4188232421875, y: 468.7716979980469 }
-
-    // Click the middle point of the link to open the context menu.
-    await comfyPage.page.mouse.click(middlePoint.x, middlePoint.y)
-
-    // Click the "Delete" context menu option.
-    await comfyPage.page
-      .locator('.litecontextmenu .litemenu-entry', { hasText: 'Delete' })
-      .click()
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'native_reroute_delete_from_midpoint_context_menu.png'
-    )
-  })
 })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -317,25 +317,6 @@ test.describe('Workflows sidebar', () => {
     ])
   })
 
-  test('Can duplicate workflow from context menu', async ({ comfyPage }) => {
-    await comfyPage.setupWorkflowsDirectory({
-      'workflow1.json': 'default.json'
-    })
-
-    const { workflowsTab } = comfyPage.menu
-    await workflowsTab.open()
-
-    await workflowsTab
-      .getPersistedItem('workflow1.json')
-      .click({ button: 'right' })
-    await comfyPage.clickContextMenuItem('Duplicate')
-
-    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      '*workflow1 (Copy).json'
-    ])
-  })
-
   test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
     await comfyPage.setupWorkflowsDirectory({
       'workflow1.json': 'default.json'

browser_tests/tests/subgraph-rename-dialog.spec.ts

@@ -1,157 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-// Constants
-const INITIAL_NAME = 'initial_slot_name'
-const RENAMED_NAME = 'renamed_slot_name'
-const SECOND_RENAMED_NAME = 'second_renamed_name'
-
-// Common selectors
-const SELECTORS = {
-  promptDialog: '.graphdialog input'
-} as const
-
-test.describe('Subgraph Slot Rename Dialog', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
-  })
-
-  test('Shows current slot label (not stale) in rename dialog', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('basic-subgraph')
-
-    const subgraphNode = await comfyPage.getNodeRefById('2')
-    await subgraphNode.navigateIntoSubgraph()
-
-    // Get initial slot label
-    const initialInputLabel = await comfyPage.page.evaluate(() => {
-      const graph = window['app'].canvas.graph
-      return graph.inputs?.[0]?.label || graph.inputs?.[0]?.name || null
-    })
-
-    // First rename
-    await comfyPage.rightClickSubgraphInputSlot(initialInputLabel)
-    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Clear and enter new name
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Verify the rename worked
-    const afterFirstRename = await comfyPage.page.evaluate(() => {
-      const graph = window['app'].canvas.graph
-      const slot = graph.inputs?.[0]
-      return {
-        label: slot?.label || null,
-        name: slot?.name || null,
-        displayName: slot?.displayName || slot?.label || slot?.name || null
-      }
-    })
-    expect(afterFirstRename.label).toBe(RENAMED_NAME)
-
-    // Now rename again - this is where the bug would show
-    // We need to use the index-based approach since the method looks for slot.name
-    await comfyPage.rightClickSubgraphInputSlot()
-    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Get the current value in the prompt dialog
-    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
-
-    // This should show the current label (RENAMED_NAME), not the original name
-    expect(dialogValue).toBe(RENAMED_NAME)
-    expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name
-
-    // Complete the second rename to ensure everything still works
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Verify the second rename worked
-    const afterSecondRename = await comfyPage.page.evaluate(() => {
-      const graph = window['app'].canvas.graph
-      return graph.inputs?.[0]?.label || null
-    })
-    expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
-  })
-
-  test('Shows current output slot label in rename dialog', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('basic-subgraph')
-
-    const subgraphNode = await comfyPage.getNodeRefById('2')
-    await subgraphNode.navigateIntoSubgraph()
-
-    // Get initial output slot label
-    const initialOutputLabel = await comfyPage.page.evaluate(() => {
-      const graph = window['app'].canvas.graph
-      return graph.outputs?.[0]?.label || graph.outputs?.[0]?.name || null
-    })
-
-    // First rename
-    await comfyPage.rightClickSubgraphOutputSlot(initialOutputLabel)
-    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Clear and enter new name
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Now rename again to check for stale content
-    // We need to use the index-based approach since the method looks for slot.name
-    await comfyPage.rightClickSubgraphOutputSlot()
-    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Get the current value in the prompt dialog
-    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
-
-    // This should show the current label (RENAMED_NAME), not the original name
-    expect(dialogValue).toBe(RENAMED_NAME)
-  })
-})

browser_tests/tests/subgraph.spec.ts

@@ -155,182 +155,6 @@ test.describe('Subgraph Operations', () => {
       expect(newInputName).toBe(RENAMED_INPUT_NAME)
       expect(newInputName).not.toBe(initialInputLabel)
     })
-
-    test('Can rename input slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      await comfyPage.doubleClickSubgraphInputSlot(initialInputLabel)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(RENAMED_INPUT_NAME)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can rename output slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialOutputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.outputs?.[0]?.label || null
-      })
-
-      await comfyPage.doubleClickSubgraphOutputSlot(initialOutputLabel)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const renamedOutputName = 'renamed_output'
-      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newOutputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.outputs?.[0]?.label || null
-      })
-
-      expect(newOutputName).toBe(renamedOutputName)
-      expect(newOutputName).not.toBe(initialOutputLabel)
-    })
-
-    test('Right-click context menu still works alongside double-click', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      // Test that right-click still works for renaming
-      await comfyPage.rightClickSubgraphInputSlot(initialInputLabel)
-      await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const rightClickRenamedName = 'right_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(rightClickRenamedName)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can double-click on slot label text to rename', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      // Use direct pointer event approach to double-click on label
-      await comfyPage.page.evaluate(() => {
-        const app = window['app']
-        const graph = app.canvas.graph
-        const input = graph.inputs?.[0]
-
-        if (!input?.labelPos) {
-          throw new Error('Could not get label position for testing')
-        }
-
-        // Use labelPos for more precise clicking on the text
-        const testX = input.labelPos[0]
-        const testY = input.labelPos[1]
-
-        const leftClickEvent = {
-          canvasX: testX,
-          canvasY: testY,
-          button: 0, // Left mouse button
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        }
-
-        const inputNode = graph.inputNode
-        if (inputNode?.onPointerDown) {
-          inputNode.onPointerDown(
-            leftClickEvent,
-            app.canvas.pointer,
-            app.canvas.linkConnector
-          )
-
-          // Trigger double-click if pointer has the handler
-          if (app.canvas.pointer.onDoubleClick) {
-            app.canvas.pointer.onDoubleClick(leftClickEvent)
-          }
-        }
-      })
-
-      // Wait for dialog to appear
-      await comfyPage.page.waitForTimeout(200)
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const labelClickRenamedName = 'label_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(labelClickRenamedName)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
   })
 
   test.describe('Subgraph Creation and Deletion', () => {

eslint.config.js

@@ -14,10 +14,7 @@ export default [
     ignores: [
       'src/scripts/*',
       'src/extensions/core/*',
-      'src/types/vue-shim.d.ts',
-      // Generated files that don't need linting
-      'src/types/comfyRegistryTypes.ts',
-      'src/types/generatedManagerTypes.ts'
+      'src/types/vue-shim.d.ts'
     ]
   },
   {

knip.config.ts

@@ -1,75 +0,0 @@
-import type { KnipConfig } from 'knip'
-
-const config: KnipConfig = {
-  entry: [
-    'src/main.ts',
-    'vite.config.mts',
-    'vite.electron.config.mts',
-    'vite.types.config.mts',
-    'eslint.config.js',
-    'tailwind.config.js',
-    'postcss.config.js',
-    'playwright.config.ts',
-    'playwright.i18n.config.ts',
-    'vitest.config.ts',
-    'scripts/**/*.{js,ts}'
-  ],
-  project: [
-    'src/**/*.{js,ts,vue}',
-    'tests-ui/**/*.{js,ts,vue}',
-    'browser_tests/**/*.{js,ts}',
-    'scripts/**/*.{js,ts}'
-  ],
-  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',
-    // 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'
-  ],
-  ignoreExportsUsedInFile: true,
-  // Vue-specific configuration
-  vue: true,
-  // Only check for unused files, disable all other rules
-  // TODO: Gradually enable other rules - see https://github.com/Comfy-Org/ComfyUI_frontend/issues/4888
-  rules: {
-    binaries: 'off',
-    classMembers: 'off',
-    dependencies: 'off',
-    devDependencies: 'off',
-    duplicates: 'off',
-    enumMembers: 'off',
-    exports: 'off',
-    nsExports: 'off',
-    nsTypes: 'off',
-    types: 'off',
-    unlisted: 'off'
-  },
-  // Include dependencies analysis
-  includeEntryExports: true,
-  // Workspace configuration for monorepo-like structure
-  workspaces: {
-    '.': {
-      entry: ['src/main.ts']
-    }
-  }
-}
-
-export default config

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.26.4",
+  "version": "1.25.11",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -21,11 +21,8 @@
     "test:component": "vitest run src/components/",
     "prepare": "husky || true",
     "preview": "vite preview",
-    "lint": "eslint src --cache",
-    "lint:fix": "eslint src --cache --fix",
-    "lint:no-cache": "eslint src",
-    "lint:fix:no-cache": "eslint src --fix",
-    "knip": "knip",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "locale": "lobe-i18n locale",
     "collect-i18n": "playwright test --config=playwright.i18n.config.ts",
     "json-schema": "tsx scripts/generate-json-schema.ts"
@@ -41,6 +38,7 @@
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/dompurify": "^3.0.5",
     "@types/fs-extra": "^11.0.4",
+    "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.8",
     "@types/semver": "^7.7.0",
     "@types/three": "^0.169.0",
@@ -58,7 +56,6 @@
     "happy-dom": "^15.11.0",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
-    "knip": "^5.62.0",
     "lint-staged": "^15.2.7",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
@@ -99,12 +96,12 @@
     "axios": "^1.8.2",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
-    "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "firebase": "^11.6.0",
     "fuse.js": "^7.0.0",
     "jsondiffpatch": "^0.6.0",
+    "lodash": "^4.17.21",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "^2.1.7",

src/CLAUDE.md

@@ -51,7 +51,7 @@ const template = await fetch('/templates/default.json')
 
 ## General Guidelines
 
-- Use es-toolkit for utility functions
+- Use lodash for utility functions
 - Implement proper TypeScript types
 - Follow Vue 3 composition API style guide
 - Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json`

src/assets/css/style.css

@@ -616,8 +616,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d canvas,
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas{
+.comfy-preview-3d-animation canvas{
   display: flex;
   width: 100% !important;
   height: 100% !important;

src/assets/icons/README.md

@@ -1,148 +1,53 @@
-# ComfyUI Icons Guide
+# ComfyUI Custom Icons Guide
 
-ComfyUI supports three types of icons that can be used throughout the interface. All icons are automatically imported - no manual imports needed!
+This guide explains how to add and use custom SVG icons in the ComfyUI frontend.
 
-## Quick Start - Code Examples
+## Overview
 
-### 1. PrimeIcons
+ComfyUI uses a hybrid icon system that supports:
+- **PrimeIcons** - Legacy icon library (CSS classes like `pi pi-plus`)
+- **Iconify** - Modern icon system with 200,000+ icons
+- **Custom Icons** - Your own SVG icons
 
-```vue
-<template>
-  <!-- Basic usage -->
-  <i class="pi pi-plus" />
-  <i class="pi pi-cog" />
-  <i class="pi pi-check text-green-500" />
+Custom icons are powered by [unplugin-icons](https://github.com/unplugin/unplugin-icons) and integrate seamlessly with Vue's component system.
 
-  <!-- In PrimeVue components -->
-  <button icon="pi pi-save" label="Save" />
-  <button icon="pi pi-times" severity="danger" />
-</template>
-```
+## Quick Start
 
-[Browse all PrimeIcons →](https://primevue.org/icons/#list)
-
-### 2. Iconify Icons (Recommended)
-
-```vue
-<template>
-  <!-- Primary icon set: Lucide -->
-  <i-lucide:download />
-  <i-lucide:settings />
-  <i-lucide:workflow class="text-2xl" />
-
-  <!-- Other popular icon sets -->
-  <i-mdi:folder-open />
-  <!-- Material Design Icons -->
-  <i-heroicons:document-text />
-  <!-- Heroicons -->
-  <i-tabler:brand-github />
-  <!-- Tabler Icons -->
-  <i-carbon:cloud-upload />
-  <!-- Carbon Icons -->
-
-  <!-- With styling -->
-  <i-lucide:save class="w-6 h-6 text-blue-500" />
-</template>
-```
-
-[Browse 200,000+ icons →](https://icon-sets.iconify.design/)
-
-### 3. Custom Icons
-
-```vue
-<template>
-  <!-- Your custom SVG icons from src/assets/icons/custom/ -->
-  <i-comfy:workflow />
-  <i-comfy:node-tree />
-  <i-comfy:my-custom-icon class="text-xl" />
-
-  <!-- In PrimeVue button -->
-  <Button severity="secondary">
-    <template #icon>
-      <i-comfy:workflow />
-    </template>
-  </Button>
-</template>
-```
-
-## Icon Usage Patterns
-
-### In Buttons
-
-```vue
-<template>
-  <!-- PrimeIcon in button (simple) -->
-  <Button icon="pi pi-check" label="Confirm" />
-
-  <!-- Iconify/Custom in button (template) -->
-  <Button>
-    <template #icon>
-      <i-lucide:save />
-    </template>
-    Save File
-  </Button>
-</template>
-```
-
-### Conditional Icons
-
-```vue
-<template>
-  <i-lucide:eye v-if="isVisible" />
-  <i-lucide:eye-off v-else />
-
-  <!-- Or with ternary -->
-  <component :is="isLocked ? 'i-lucide:lock' : 'i-lucide:lock-open'" />
-</template>
-```
-
-### With Tooltips
-
-```vue
-<template>
-  <i-lucide:info
-    v-tooltip="'Click for more information'"
-    class="cursor-pointer"
-  />
-</template>
-```
-
-## Using Iconify Icons
-
-### Finding Icons
-
-1. Visit [Iconify Icon Sets](https://icon-sets.iconify.design/)
-2. Search or browse collections
-3. Click on any icon to get its name
-4. Use with `i-[collection]:[icon-name]` format
-
-### Popular Collections
-
-- **Lucide** (`i-lucide:`) - Our primary icon set, clean and consistent
-- **Material Design Icons** (`i-mdi:`) - Comprehensive Material Design icons
-- **Heroicons** (`i-heroicons:`) - Beautiful hand-crafted SVG icons
-- **Tabler** (`i-tabler:`) - 3000+ free SVG icons
-- **Carbon** (`i-carbon:`) - IBM's design system icons
-
-## Adding Custom Icons
-
-### 1. Add Your SVG
-
-Place your SVG file in `src/assets/icons/custom/`:
+### 1. Add Your SVG Icon
 
+Place your SVG file in the `custom/` directory:
 ```
 src/assets/icons/custom/
-├── workflow-duplicate.svg
-├── node-preview.svg
 └── your-icon.svg
 ```
 
-### 2. SVG Format Requirements
+### 2. Use in Components
 
+```vue
+<template>
+  <!-- Use as a Vue component -->
+  <i-comfy:your-icon />
+  
+  <!-- In a PrimeVue button -->
+  <Button>
+    <template #icon>
+      <i-comfy:your-icon />
+    </template>
+  </Button>
+</template>
+```
+
+## SVG Requirements
+
+### File Naming
+- Use kebab-case: `workflow-icon.svg`, `node-tree.svg`
+- Avoid special characters and spaces
+- The filename becomes the icon name
+
+### SVG Format
 ```xml
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <!-- Use currentColor for theme compatibility -->
-  <path fill="currentColor" d="..." />
+  <path d="..." />
 </svg>
 ```
 
@@ -152,98 +57,59 @@ src/assets/icons/custom/
 - Use `currentColor` for theme-aware icons
 - Keep SVGs optimized and simple
 
-### 3. Use Immediately
+### Color Theming
 
-```vue
-<template>
-  <i-comfy:your-icon />
-</template>
-```
-
-No imports needed - icons are auto-discovered!
-
-## Icon Guidelines
-
-### Naming Conventions
-
-- **Files**: `kebab-case.svg` (workflow-icon.svg)
-- **Usage**: `<i-comfy:workflow-icon />`
-
-### Size & Styling
-
-```vue
-<template>
-  <!-- Size with Tailwind classes -->
-  <i-lucide:plus class="w-4 h-4" />
-  <!-- 16px -->
-  <i-lucide:plus class="w-6 h-6" />
-  <!-- 24px (default) -->
-  <i-lucide:plus class="w-8 h-8" />
-  <!-- 32px -->
-
-  <!-- Or text size -->
-  <i-lucide:plus class="text-sm" />
-  <i-lucide:plus class="text-2xl" />
-
-  <!-- Colors -->
-  <i-lucide:check class="text-green-500" />
-  <i-lucide:x class="text-red-500" />
-</template>
-```
-
-### Theme Compatibility
-
-Always use `currentColor` in SVGs for automatic theme adaptation:
+For icons that adapt to the current theme, use `currentColor`:
 
 ```xml
-<!-- ✅ Good: Adapts to light/dark theme -->
+<!-- ✅ Good: Uses currentColor -->
 <svg viewBox="0 0 24 24">
-  <path fill="currentColor" d="..." />
+  <path stroke="currentColor" fill="none" d="..." />
 </svg>
 
-<!-- ❌ Bad: Fixed colors -->
+<!-- ❌ Bad: Hardcoded colors -->
 <svg viewBox="0 0 24 24">
-  <path fill="#000000" d="..." />
+  <path stroke="white" fill="black" d="..." />
 </svg>
 ```
 
-## Migration Guide
-
-### From PrimeIcons to Iconify/Custom
+## Usage Examples
 
+### Basic Icon
 ```vue
-<template>
-  <!-- Before -->
-  <Button icon="pi pi-download" />
-
-  <!-- After -->
-  <Button>
-    <template #icon>
-      <i-lucide:download />
-    </template>
-  </Button>
-</template>
+<i-comfy:workflow />
 ```
 
-### From Inline SVG to Custom Icon
-
+### With Classes
 ```vue
-<template>
-  <!-- Before: Inline SVG -->
-  <svg class="w-6 h-6" viewBox="0 0 24 24">
-    <path d="..." />
-  </svg>
+<i-comfy:workflow class="text-2xl text-blue-500" />
+```
 
-  <!-- After: Save as custom/my-icon.svg and use -->
-  <i-comfy:my-icon class="w-6 h-6" />
+### In Buttons
+```vue
+<Button severity="secondary" text>
+  <template #icon>
+    <i-comfy:workflow />
+  </template>
+</Button>
+```
+
+### Conditional Icons
+```vue
+<template #icon>
+  <i-comfy:workflow v-if="isWorkflow" />
+  <i-comfy:node v-else />
 </template>
 ```
 
 ## Technical Details
 
-### Auto-Import System
+### How It Works
 
-Icons are automatically imported using `unplugin-icons` - no manual imports needed! Just use the icon component directly.
+1. **unplugin-icons** automatically discovers SVG files in `custom/`
+2. During build, SVGs are converted to Vue components
+3. Components are tree-shaken - only used icons are bundled
+4. The `i-` prefix and `comfy:` namespace identify custom icons
 
 ### Configuration
 
@@ -253,18 +119,17 @@ The icon system is configured in `vite.config.mts`:
 Icons({
   compiler: 'vue3',
   customCollections: {
-    comfy: FileSystemIconLoader('src/assets/icons/custom')
+    'comfy': FileSystemIconLoader('src/assets/icons/custom'),
   }
 })
 ```
 
 ### TypeScript Support
 
-Icons are fully typed. If TypeScript doesn't recognize a new custom icon:
-
-1. Restart the dev server
-2. Ensure the SVG file is valid
-3. Check filename follows kebab-case
+Icons are automatically typed. If TypeScript doesn't recognize a new icon:
+1. Restart your dev server
+2. Check that the SVG file is valid
+3. Ensure the filename follows kebab-case convention
 
 ## Troubleshooting
 
@@ -292,6 +157,22 @@ Icons are fully typed. If TypeScript doesn't recognize a new custom icon:
 4. **Theme support**: Always use `currentColor` for adaptable icons
 5. **Test both themes**: Verify icons look good in light and dark modes
 
+## Migration from PrimeIcons
+
+When replacing a PrimeIcon with a custom icon:
+
+```vue
+<!-- Before: PrimeIcon -->
+<Button icon="pi pi-box" />
+
+<!-- After: Custom icon -->
+<Button>
+  <template #icon>
+    <i-comfy:workflow />
+  </template>
+</Button>
+```
+
 ## Adding Icon Collections
 
 To add an entire icon set from npm:
@@ -300,11 +181,4 @@ To add an entire icon set from npm:
 2. Configure in `vite.config.mts`
 3. Use with the appropriate prefix
 
-See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
-
-## Resources
-
-- [PrimeIcons List](https://primevue.org/icons/#list)
-- [Iconify Icon Browser](https://icon-sets.iconify.design/)
-- [Lucide Icons](https://lucide.dev/icons/)
-- [unplugin-icons docs](https://github.com/unplugin/unplugin-icons)
+See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.

src/components/actionbar/ComfyActionbar.vue

@@ -20,7 +20,7 @@ import {
   useLocalStorage,
   watchDebounced
 } from '@vueuse/core'
-import { clamp } from 'es-toolkit/compat'
+import { clamp } from 'lodash'
 import Panel from 'primevue/panel'
 import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 

src/components/bottomPanel/BottomPanel.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col h-full">
-    <Tabs v-model:value="bottomPanelStore.activeBottomPanelTabId">
+    <Tabs
+      :key="$i18n.locale"
+      v-model:value="bottomPanelStore.activeBottomPanelTabId"
+    >
       <TabList pt:tab-list="border-none">
         <div class="w-full flex justify-between">
           <div class="tabs-container">
@@ -11,11 +14,7 @@
               class="p-3 border-none"
             >
               <span class="font-bold">
-                {{
-                  shouldCapitalizeTab(tab.id)
-                    ? tab.title.toUpperCase()
-                    : tab.title
-                }}
+                {{ getTabDisplayTitle(tab) }}
               </span>
             </Tab>
           </div>
@@ -60,13 +59,16 @@ import Tab from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 const bottomPanelStore = useBottomPanelStore()
 const dialogService = useDialogService()
+const { t } = useI18n()
 
 const isShortcutsTabActive = computed(() => {
   const activeTabId = bottomPanelStore.activeBottomPanelTabId
@@ -80,6 +82,11 @@ const shouldCapitalizeTab = (tabId: string): boolean => {
   return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
 }
 
+const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
+  const title = tab.titleKey ? t(tab.titleKey) : tab.title || ''
+  return shouldCapitalizeTab(tab.id) ? title.toUpperCase() : title
+}
+
 const openKeybindingSettings = async () => {
   dialogService.showSettingsDialog('keybinding')
 }

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -10,8 +10,7 @@
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
-      'p-breadcrumb-item-link-icon-visible': isActive,
-      'active-breadcrumb-item': isActive
+      'p-breadcrumb-item-link-icon-visible': isActive
     }"
     @click="handleClick"
   >
@@ -112,7 +111,21 @@ const menuItems = computed<MenuItem[]>(() => {
     {
       label: t('g.rename'),
       icon: 'pi pi-pencil',
-      command: startRename
+      command: async () => {
+        let initialName =
+          workflowStore.activeSubgraph?.name ??
+          workflowStore.activeWorkflow?.filename
+
+        if (!initialName) return
+
+        const newName = await dialogService.prompt({
+          title: t('g.rename'),
+          message: t('breadcrumbsMenu.enterNewName'),
+          defaultValue: initialName
+        })
+
+        await rename(newName, initialName)
+      }
     },
     {
       label: t('breadcrumbsMenu.duplicate'),
@@ -162,22 +175,18 @@ const handleClick = (event: MouseEvent) => {
     menu.value?.hide()
     event.stopPropagation()
     event.preventDefault()
-    startRename()
-  }
-}
-
-const startRename = () => {
-  isEditing.value = true
-  itemLabel.value = props.item.label as string
-  void nextTick(() => {
-    if (itemInputRef.value?.$el) {
-      itemInputRef.value.$el.focus()
-      itemInputRef.value.$el.select()
-      if (wrapperRef.value) {
-        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+    isEditing.value = true
+    itemLabel.value = props.item.label as string
+    void nextTick(() => {
+      if (itemInputRef.value?.$el) {
+        itemInputRef.value.$el.focus()
+        itemInputRef.value.$el.select()
+        if (wrapperRef.value) {
+          itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+        }
       }
-    }
-  })
+    })
+  }
 }
 
 const inputBlur = async (doRename: boolean) => {
@@ -203,8 +212,4 @@ const inputBlur = async (doRename: boolean) => {
 .p-breadcrumb-item-label {
   @apply whitespace-nowrap text-ellipsis overflow-hidden;
 }
-
-.active-breadcrumb-item {
-  color: var(--text-primary);
-}
 </style>

src/components/common/ApiNodesCostBreakdown.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col gap-3 h-full">
+    <div class="flex justify-between text-xs">
+      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
+      <div>{{ t('apiNodesCostBreakdown.costPerRun') }}</div>
+    </div>
+    <ScrollPanel class="flex-grow h-0">
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="node in nodes"
+          :key="node.name"
+          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-base font-medium leading-tight">{{
+              node.name
+            }}</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <Tag
+              severity="secondary"
+              icon="pi pi-dollar"
+              rounded
+              class="text-amber-400 p-1"
+            />
+            <span class="text-base font-medium leading-tight">
+              {{ node.cost.toFixed(costPrecision) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </ScrollPanel>
+    <template v-if="showTotal && nodes.length > 1">
+      <Divider class="my-2" />
+      <div class="flex justify-between items-center border-t px-3">
+        <span class="text-sm">{{ t('apiNodesCostBreakdown.totalCost') }}</span>
+        <div class="flex items-center gap-1">
+          <Tag
+            severity="secondary"
+            icon="pi pi-dollar"
+            rounded
+            class="text-yellow-500 p-1"
+          />
+          <span>{{ totalCost.toFixed(costPrecision) }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Divider from 'primevue/divider'
+import ScrollPanel from 'primevue/scrollpanel'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ApiNodeCost } from '@/types/apiNodeTypes'
+
+const { t } = useI18n()
+
+const {
+  nodes,
+  showTotal = true,
+  costPrecision = 3
+} = defineProps<{
+  nodes: ApiNodeCost[]
+  showTotal?: boolean
+  costPrecision?: number
+}>()
+
+const totalCost = computed(() =>
+  nodes.reduce((sum, node) => sum + node.cost, 0)
+)
+</script>

src/components/common/ApiNodesList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col gap-3 h-full">
+    <div class="flex text-xs">
+      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
+    </div>
+    <ScrollPanel class="flex-grow h-0">
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="nodeName in nodeNames"
+          :key="nodeName"
+          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-base font-medium leading-tight">{{
+              nodeName
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { nodeNames } = defineProps<{ nodeNames: string[] }>()
+</script>

src/components/common/SearchBox.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts" generic="TFilter extends SearchFilter">
-import { debounce } from 'es-toolkit/compat'
+import { debounce } from 'lodash'
 import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'

src/components/common/VirtualGrid.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts" generic="T">
 import { useElementSize, useScroll, whenever } from '@vueuse/core'
-import { clamp, debounce } from 'es-toolkit/compat'
+import { clamp, debounce } from 'lodash'
 import { type CSSProperties, computed, onBeforeUnmount, ref, watch } from 'vue'
 
 type GridState = {

src/components/custom/button/IconButton.vue

@@ -1,15 +0,0 @@
-<template>
-  <button
-    class="flex justify-center items-center outline-none border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white w-8 h-8 rounded-lg cursor-pointer"
-    role="button"
-    @click="onClick"
-  >
-    <slot></slot>
-  </button>
-</template>
-
-<script setup lang="ts">
-const { onClick } = defineProps<{
-  onClick: () => void
-}>()
-</script>

src/components/custom/widget/ModelSelector.vue

@@ -1,67 +0,0 @@
-<template>
-  <BaseWidgetLayout>
-    <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
-        <template #header-icon>
-          <i-lucide:puzzle class="text-neutral" />
-        </template>
-        <template #header-title>
-          <span class="text-neutral text-base">{{ t('g.title') }}</span>
-        </template>
-      </LeftSidePanel>
-    </template>
-
-    <template #header>
-      <!-- here -->
-    </template>
-
-    <template #content>
-      <!-- here -->
-    </template>
-
-    <template #rightPanel>
-      <RightSidePanel></RightSidePanel>
-    </template>
-  </BaseWidgetLayout>
-</template>
-
-<script setup lang="ts">
-import { provide, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
-import { OnCloseKey } from '@/types/custom_components/widgetTypes'
-
-import BaseWidgetLayout from './layout/BaseWidgetLayout.vue'
-import LeftSidePanel from './panel/LeftSidePanel.vue'
-import RightSidePanel from './panel/RightSidePanel.vue'
-
-const { t } = useI18n()
-
-const { onClose } = defineProps<{
-  onClose: () => void
-}>()
-
-provide(OnCloseKey, onClose)
-
-const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
-  { id: 'installed', label: 'Installed' },
-  {
-    title: 'TAGS',
-    items: [
-      { id: 'tag-sd15', label: 'SD 1.5' },
-      { id: 'tag-sdxl', label: 'SDXL' },
-      { id: 'tag-utility', label: 'Utility' }
-    ]
-  },
-  {
-    title: 'CATEGORIES',
-    items: [
-      { id: 'cat-models', label: 'Models' },
-      { id: 'cat-nodes', label: 'Nodes' }
-    ]
-  }
-])
-
-const selectedNavItem = ref<string | null>('installed')
-</script>

src/components/custom/widget/layout/BaseWidgetLayout.vue

@@ -1,176 +0,0 @@
-<template>
-  <div
-    class="base-widget-layout rounded-2xl overflow-hidden relative bg-zinc-100 dark-theme:bg-zinc-800"
-  >
-    <IconButton
-      v-show="!isRightPanelOpen && hasRightPanel"
-      class="absolute top-4 right-16 z-10 transition-opacity duration-200"
-      :class="{
-        'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
-      }"
-      @click="toggleRightPanel"
-    >
-      <i-lucide:panel-right class="text-sm" />
-    </IconButton>
-    <IconButton
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
-      @click="closeDialog"
-    >
-      <i class="pi pi-times text-sm"></i>
-    </IconButton>
-    <div class="flex w-full h-full">
-      <Transition name="slide-panel">
-        <nav
-          v-if="$slots.leftPanel && showLeftPanel"
-          :class="[
-            PANEL_SIZES.width,
-            PANEL_SIZES.minWidth,
-            PANEL_SIZES.maxWidth
-          ]"
-        >
-          <slot name="leftPanel"></slot>
-        </nav>
-      </Transition>
-
-      <div class="flex-1 flex bg-zinc-100 dark-theme:bg-neutral-900">
-        <div class="w-full h-full flex flex-col">
-          <header
-            v-if="$slots.header"
-            class="w-full h-16 px-6 py-4 flex justify-between gap-2"
-          >
-            <div class="flex-1 flex gap-2 flex-shrink-0">
-              <IconButton v-if="!notMobile" @click="toggleLeftPanel">
-                <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
-                <i-lucide:panel-left-close v-else class="text-sm" />
-              </IconButton>
-              <slot name="header"></slot>
-            </div>
-            <div class="flex justify-end gap-2 min-w-20">
-              <slot name="header-right-area"></slot>
-              <IconButton
-                v-if="isRightPanelOpen && hasRightPanel"
-                @click="toggleRightPanel"
-              >
-                <i-lucide:panel-right-close class="text-sm" />
-              </IconButton>
-            </div>
-          </header>
-          <main class="flex-1">
-            <slot name="content"></slot>
-          </main>
-        </div>
-        <Transition name="slide-panel-right">
-          <aside
-            v-if="hasRightPanel && isRightPanelOpen"
-            class="w-1/4 min-w-40 max-w-80"
-          >
-            <slot name="rightPanel"></slot>
-          </aside>
-        </Transition>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBreakpoints } from '@vueuse/core'
-import { computed, inject, ref, useSlots, watch } from 'vue'
-
-import IconButton from '@/components/custom/button/IconButton.vue'
-import { OnCloseKey } from '@/types/custom_components/widgetTypes'
-
-const BREAKPOINTS = { sm: 480 }
-const PANEL_SIZES = {
-  width: 'w-1/3',
-  minWidth: 'min-w-40',
-  maxWidth: 'max-w-56'
-}
-
-const slots = useSlots()
-const closeDialog = inject(OnCloseKey, () => {})
-
-const breakpoints = useBreakpoints(BREAKPOINTS)
-const notMobile = breakpoints.greater('sm')
-
-const isLeftPanelOpen = ref<boolean>(true)
-const isRightPanelOpen = ref<boolean>(false)
-const mobileMenuOpen = ref<boolean>(false)
-
-const hasRightPanel = computed(() => !!slots.rightPanel)
-
-watch(notMobile, (isDesktop) => {
-  if (!isDesktop) {
-    mobileMenuOpen.value = false
-  }
-})
-
-const showLeftPanel = computed(() => {
-  const shouldShow = notMobile.value
-    ? isLeftPanelOpen.value
-    : mobileMenuOpen.value
-  return shouldShow
-})
-
-const toggleLeftPanel = () => {
-  if (notMobile.value) {
-    isLeftPanelOpen.value = !isLeftPanelOpen.value
-  } else {
-    mobileMenuOpen.value = !mobileMenuOpen.value
-  }
-}
-
-const toggleRightPanel = () => {
-  isRightPanelOpen.value = !isRightPanelOpen.value
-}
-</script>
-<style scoped>
-.base-widget-layout {
-  height: 80vh;
-  width: 90vw;
-  max-width: 1280px;
-  aspect-ratio: 20/13;
-}
-
-@media (min-width: 1450px) {
-  .base-widget-layout {
-    max-width: 1724px;
-  }
-}
-
-/* Fade transition for buttons */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Slide transition for left panel */
-.slide-panel-enter-active,
-.slide-panel-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
-  backface-visibility: hidden;
-}
-
-.slide-panel-enter-from,
-.slide-panel-leave-to {
-  transform: translateX(-100%);
-}
-
-/* Slide transition for right panel */
-.slide-panel-right-enter-active,
-.slide-panel-right-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
-  backface-visibility: hidden;
-}
-
-.slide-panel-right-enter-from,
-.slide-panel-right-leave-to {
-  transform: translateX(100%);
-}
-</style>

src/components/custom/widget/nav/NavItem.vue

@@ -1,24 +0,0 @@
-<template>
-  <div
-    class="flex items-center gap-2 px-4 py-2 text-xs rounded-md transition-colors cursor-pointer"
-    :class="
-      active
-        ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
-        : 'text-neutral hover:bg-zinc-100 hover:dark-theme:bg-zinc-700/50'
-    "
-    role="button"
-    @click="onClick"
-  >
-    <i-lucide:folder class="text-xs text-neutral" />
-    <span>
-      <slot></slot>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { active, onClick } = defineProps<{
-  active?: boolean
-  onClick: () => void
-}>()
-</script>

src/components/custom/widget/nav/NavTitle.vue

@@ -1,13 +0,0 @@
-<template>
-  <h3
-    class="m-0 px-3 py-0 pt-5 text-sm font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
-  >
-    {{ title }}
-  </h3>
-</template>
-
-<script setup lang="ts">
-const { title } = defineProps<{
-  title: string
-}>()
-</script>

src/components/custom/widget/panel/LeftSidePanel.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
-    <PanelHeader>
-      <template #icon>
-        <slot name="header-icon"></slot>
-      </template>
-      <slot name="header-title"></slot>
-    </PanelHeader>
-
-    <nav class="flex-1 px-3 py-4 flex flex-col gap-2">
-      <template v-for="(item, index) in navItems" :key="index">
-        <div v-if="'items' in item" class="flex flex-col gap-2">
-          <NavTitle :title="item.title" />
-          <NavItem
-            v-for="subItem in item.items"
-            :key="subItem.id"
-            :active="activeItem === subItem.id"
-            @click="activeItem = subItem.id"
-          >
-            {{ subItem.label }}
-          </NavItem>
-        </div>
-        <div v-else class="flex flex-col gap-2">
-          <NavItem
-            :active="activeItem === item.id"
-            @click="activeItem = item.id"
-          >
-            {{ item.label }}
-          </NavItem>
-        </div>
-      </template>
-    </nav>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
-
-import NavItem from '../nav/NavItem.vue'
-import NavTitle from '../nav/NavTitle.vue'
-import PanelHeader from './PanelHeader.vue'
-
-const { navItems = [], modelValue } = defineProps<{
-  navItems?: (NavItemData | NavGroupData)[]
-  modelValue?: string | null
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | null]
-}>()
-
-const getFirstItemId = () => {
-  if (!navItems || navItems.length === 0) {
-    return null
-  }
-
-  const firstEntry = navItems[0]
-
-  if ('items' in firstEntry && firstEntry.items.length > 0) {
-    return firstEntry.items[0].id
-  }
-  if ('id' in firstEntry) {
-    return firstEntry.id
-  }
-
-  return null
-}
-
-const activeItem = computed({
-  get: () => modelValue ?? getFirstItemId(),
-  set: (value: string | null) => emit('update:modelValue', value)
-})
-</script>

src/components/custom/widget/panel/PanelHeader.vue

@@ -1,12 +0,0 @@
-<template>
-  <header class="flex items-center justify-between h-16 px-6">
-    <div class="flex items-center gap-2 pl-1">
-      <slot name="icon">
-        <i-lucide:puzzle class="text-neutral text-base" />
-      </slot>
-      <h2 class="font-bold text-base text-neutral">
-        <slot></slot>
-      </h2>
-    </div>
-  </header>
-</template>

src/components/custom/widget/panel/RightSidePanel.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-zinc-800">
-    <slot></slot>
-  </div>
-</template>

src/components/dialog/GlobalDialog.vue

@@ -10,16 +10,14 @@
     :aria-labelledby="item.key"
   >
     <template #header>
-      <div v-if="!item.dialogComponentProps?.headless">
-        <component
-          :is="item.headerComponent"
-          v-if="item.headerComponent"
-          :id="item.key"
-        />
-        <h3 v-else :id="item.key">
-          {{ item.title || ' ' }}
-        </h3>
-      </div>
+      <component
+        :is="item.headerComponent"
+        v-if="item.headerComponent"
+        :id="item.key"
+      />
+      <h3 v-else :id="item.key">
+        {{ item.title || ' ' }}
+      </h3>
     </template>
 
     <component

src/components/dialog/content/MissingModelsWarning.vue

@@ -36,7 +36,6 @@ import ListBox from 'primevue/listbox'
 import { computed, onBeforeUnmount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { useSettingStore } from '@/stores/settingStore'

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -169,8 +169,8 @@ import { Form, FormField, type FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import type { CaptureContext, User } from '@sentry/core'
 import { captureMessage } from '@sentry/core'
-import _ from 'es-toolkit/compat'
-import { cloneDeep } from 'es-toolkit/compat'
+import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Dropdown from 'primevue/dropdown'

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -93,7 +93,7 @@
 
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
-import { merge } from 'es-toolkit/compat'
+import { merge } from 'lodash'
 import Button from 'primevue/button'
 import {
   computed,

src/components/dialog/content/manager/button/PackEnableToggle.test.ts

@@ -12,7 +12,7 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import PackEnableToggle from './PackEnableToggle.vue'
 
 // Mock debounce to execute immediately
-vi.mock('es-toolkit/compat', () => ({
+vi.mock('lodash', () => ({
   debounce: <T extends (...args: any[]) => any>(fn: T) => fn
 }))
 

src/components/dialog/content/manager/button/PackEnableToggle.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { debounce } from 'es-toolkit/compat'
+import { debounce } from 'lodash'
 import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, ref } from 'vue'
 

src/components/dialog/content/manager/packCard/PackCardHeader.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="w-[100%] flex justify-between items-center">
+    <div class="flex justify-start items-center">
+      <div class="w-1 h-6 rounded-md" />
+      <div class="w-6 h-6 relative overflow-hidden">
+        <i class="pi pi-box text-xl text-muted" style="opacity: 0.6" />
+      </div>
+      <div class="px-3 py-2 rounded-md flex justify-start items-start gap-2.5">
+        <div class="text-right justify-start text-sm font-bold leading-none">
+          {{ $t('manager.nodePack') }}
+        </div>
+      </div>
+    </div>
+    <div class="inline-flex justify-start items-center gap-3">
+      <div
+        v-if="nodePack.downloads"
+        class="flex items-center text-sm text-muted tracking-tighter"
+      >
+        <i class="pi pi-download mr-2" />
+        {{ $n(nodePack.downloads) }}
+      </div>
+      <template v-if="isInstalled">
+        <PackEnableToggle :node-pack="nodePack" />
+      </template>
+      <template v-else>
+        <PackInstallButton :node-packs="[nodePack]" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+const { nodePack } = defineProps<{
+  nodePack: components['schemas']['Node']
+}>()
+
+const { isPackInstalled } = useComfyManagerStore()
+const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+</script>

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { stubTrue } from 'es-toolkit/compat'
+import { stubTrue } from 'lodash'
 import AutoComplete, {
   AutoCompleteOptionSelectEvent
 } from 'primevue/autocomplete'

src/components/graph/GraphCanvas.vue

@@ -21,6 +21,7 @@
 
       <MiniMap
         v-if="comfyAppReady && minimapEnabled"
+        ref="minimapRef"
         class="pointer-events-auto"
       />
     </template>
@@ -70,6 +71,7 @@ import { useContextMenuTranslation } from '@/composables/useContextMenuTranslati
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
+import { useMinimap } from '@/composables/useMinimap'
 import { usePaste } from '@/composables/usePaste'
 import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
@@ -117,7 +119,9 @@ const selectionToolboxEnabled = computed(() =>
   settingStore.get('Comfy.Canvas.SelectionToolbox')
 )
 
+const minimapRef = ref<InstanceType<typeof MiniMap>>()
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
+const minimap = useMinimap()
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -354,6 +358,13 @@ onMounted(async () => {
     }
   )
 
+  whenever(
+    () => minimapRef.value,
+    (ref) => {
+      minimap.setMinimapRef(ref)
+    }
+  )
+
   whenever(
     () => useCanvasStore().canvas,
     (canvas) => {

src/components/graph/MiniMap.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     v-if="visible && initialized"
-    ref="minimapRef"
     class="minimap-main-container flex absolute bottom-[20px] right-[90px] z-[1000]"
   >
     <MiniMapPanel
@@ -55,13 +54,15 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { useMinimap } from '@/composables/useMinimap'
+import { useCanvasStore } from '@/stores/graphStore'
 
 import MiniMapPanel from './MiniMapPanel.vue'
 
-const minimapRef = ref<HTMLDivElement>()
+const minimap = useMinimap()
+const canvasStore = useCanvasStore()
 
 const {
   initialized,
@@ -79,13 +80,13 @@ const {
   renderBypass,
   renderError,
   updateOption,
+  init,
   destroy,
   handlePointerDown,
   handlePointerMove,
   handlePointerUp,
-  handleWheel,
-  setMinimapRef
-} = useMinimap()
+  handleWheel
+} = minimap
 
 const showOptionsPanel = ref(false)
 
@@ -93,8 +94,20 @@ const toggleOptionsPanel = () => {
   showOptionsPanel.value = !showOptionsPanel.value
 }
 
-onMounted(() => {
-  setMinimapRef(minimapRef.value)
+watch(
+  () => canvasStore.canvas,
+  async (canvas) => {
+    if (canvas && !initialized.value) {
+      await init()
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  if (canvasStore.canvas) {
+    await init()
+  }
 })
 
 onUnmounted(() => {

src/components/graph/SelectionOverlay.vue

@@ -14,13 +14,12 @@
 
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
-import { provide, readonly, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { createBounds } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
-import { SelectionOverlayInjectionKey } from '@/types/selectionOverlayTypes'
 
 const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
@@ -28,13 +27,6 @@ const { getSelectableItems } = useSelectedLiteGraphItems()
 
 const visible = ref(false)
 const showBorder = ref(false)
-// Increment counter to notify child components of position/visibility change
-// This does not include viewport changes.
-const overlayUpdateCount = ref(0)
-provide(SelectionOverlayInjectionKey, {
-  visible: readonly(visible),
-  updateCount: readonly(overlayUpdateCount)
-})
 
 const positionSelectionOverlay = () => {
   const selectableItems = getSelectableItems()
@@ -60,7 +52,6 @@ whenever(
   () => {
     requestAnimationFrame(() => {
       positionSelectionOverlay()
-      overlayUpdateCount.value++
       canvasStore.getCanvas().state.selectionChanged = false
     })
   },
@@ -80,7 +71,6 @@ watch(
       requestAnimationFrame(() => {
         visible.value = true
         positionSelectionOverlay()
-        overlayUpdateCount.value++
       })
     } else {
       // Selection change update to visible state is delayed by a frame. Here
@@ -88,7 +78,6 @@ watch(
       // the initial selection and dragging happens at the same time.
       requestAnimationFrame(() => {
         visible.value = false
-        overlayUpdateCount.value++
       })
     }
   }

src/components/graph/SelectionToolbox.vue

@@ -1,7 +1,6 @@
 <template>
   <Panel
     class="selection-toolbox absolute left-1/2 rounded-lg"
-    :class="{ 'animate-slide-up': shouldAnimate }"
     :pt="{
       header: 'hidden',
       content: 'p-0 flex flex-row'
@@ -13,7 +12,6 @@
     <BypassButton />
     <PinButton />
     <EditModelButton />
-    <Load3DViewerButton />
     <MaskEditorButton />
     <ConvertToSubgraphButton />
     <DeleteButton />
@@ -29,7 +27,7 @@
 
 <script setup lang="ts">
 import Panel from 'primevue/panel'
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
@@ -39,28 +37,19 @@ import EditModelButton from '@/components/graph/selectionToolbox/EditModelButton
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
 import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
-import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewerButton.vue'
 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 { useRetriggerableAnimation } from '@/composables/element/useRetriggerableAnimation'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { SelectionOverlayInjectionKey } from '@/types/selectionOverlayTypes'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
 
-const selectionOverlayState = inject(SelectionOverlayInjectionKey)
-const { shouldAnimate } = useRetriggerableAnimation(
-  selectionOverlayState?.updateCount,
-  { animateOnMount: true }
-)
-
 const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
   const commandIds = new Set<string>(
     canvasStore.selectedItems
@@ -82,20 +71,4 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
 .selection-toolbox {
   transform: translateX(-50%) translateY(-120%);
 }
-
-/* Slide up animation using CSS animation */
-@keyframes slideUp {
-  from {
-    transform: translateX(-50%) translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(-50%) translateY(-120%);
-    opacity: 1;
-  }
-}
-
-.animate-slide-up {
-  animation: slideUp 0.3s ease-out;
-}
 </style>

src/components/graph/TitleEditor.vue

@@ -24,7 +24,7 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
-import { useGraphMutationService } from '@/services/graphMutationService'
+import { app } from '@/scripts/app'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -42,23 +42,19 @@ const inputStyle = computed<CSSProperties>(() => ({
 const titleEditorStore = useTitleEditorStore()
 const canvasStore = useCanvasStore()
 const previousCanvasDraggable = ref(true)
-const graphMutationService = useGraphMutationService()
 
-const onEdit = async (newValue: string) => {
+const onEdit = (newValue: string) => {
   if (titleEditorStore.titleEditorTarget && newValue.trim() !== '') {
     const trimmedTitle = newValue.trim()
+    titleEditorStore.titleEditorTarget.title = trimmedTitle
+
+    // If this is a subgraph node, sync the runtime subgraph name for breadcrumb reactivity
     const target = titleEditorStore.titleEditorTarget
-
-    if (target instanceof LGraphNode) {
-      await graphMutationService.updateNodeTitle(target.id, trimmedTitle)
-
-      // If this is a subgraph node, sync the runtime subgraph name for breadcrumb reactivity
-      if (target.isSubgraphNode?.()) {
-        target.subgraph.name = trimmedTitle
-      }
-    } else if (target instanceof LGraphGroup) {
-      await graphMutationService.updateGroupTitle(target.id, trimmedTitle)
+    if (target instanceof LGraphNode && target.isSubgraphNode?.()) {
+      target.subgraph.name = trimmedTitle
     }
+
+    app.graph.setDirtyCanvas(true, true)
   }
   showInput.value = false
   titleEditorStore.titleEditorTarget = null

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -1,38 +0,0 @@
-<template>
-  <Button
-    v-show="is3DNode"
-    v-tooltip.top="{
-      value: t('commands.Comfy_3DViewer_Open3DViewer.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon="pi pi-pencil"
-    @click="open3DViewer"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-import { t } from '@/i18n'
-import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
-
-const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const is3DNode = computed(() => {
-  const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
-  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
-
-  return nodes.length === 1 && nodes.some(isLoad3dNode) && enable3DViewer
-})
-
-const open3DViewer = () => {
-  void commandStore.execute('Comfy.3DViewer.Open3DViewer')
-}
-</script>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -188,13 +188,16 @@ const showVersionUpdates = computed(() =>
   settingStore.get('Comfy.Notification.ShowVersionUpdates')
 )
 
-const moreItems = computed<MenuItem[]>(() => {
-  const allMoreItems: MenuItem[] = [
+const moreMenuItem = computed(() =>
+  menuItems.value.find((item) => item.key === 'more')
+)
+
+const menuItems = computed<MenuItem[]>(() => {
+  const moreItems: MenuItem[] = [
     {
       key: 'desktop-guide',
       type: 'item',
       label: t('helpCenter.desktopUserGuide'),
-      visible: isElectron(),
       action: () => {
         openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE)
         emit('close')
@@ -227,19 +230,6 @@ const moreItems = computed<MenuItem[]>(() => {
     }
   ]
 
-  // Filter for visible items only
-  return allMoreItems.filter((item) => item.visible !== false)
-})
-
-const hasVisibleMoreItems = computed(() => {
-  return !!moreItems.value.length
-})
-
-const moreMenuItem = computed(() =>
-  menuItems.value.find((item) => item.key === 'more')
-)
-
-const menuItems = computed<MenuItem[]>(() => {
   return [
     {
       key: 'docs',
@@ -286,9 +276,8 @@ const menuItems = computed<MenuItem[]>(() => {
       type: 'item',
       icon: '',
       label: t('helpCenter.more'),
-      visible: hasVisibleMoreItems.value,
       action: () => {}, // No action for more item
-      items: moreItems.value
+      items: moreItems
     }
   ]
 })

src/components/load3d/Load3D.vue

@@ -57,20 +57,9 @@
       @update-edge-threshold="handleUpdateEdgeThreshold"
       @export-model="handleExportModel"
     />
-    <div
-      v-if="enable3DViewer"
-      class="absolute top-12 right-2 z-20 pointer-events-auto"
-    >
-      <ViewerControls :node="node" />
-    </div>
-
     <div
       v-if="showRecordingControls"
-      class="absolute right-2 z-20 pointer-events-auto"
-      :class="{
-        'top-12': !enable3DViewer,
-        'top-24': enable3DViewer
-      }"
+      class="absolute top-12 right-2 z-20 pointer-events-auto"
     >
       <RecordingControls
         :node="node"
@@ -93,7 +82,6 @@ import { useI18n } from 'vue-i18n'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
-import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import {
   CameraType,
@@ -103,7 +91,6 @@ import {
 } from '@/extensions/core/load3d/interfaces'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
-import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 
 const { t } = useI18n()
@@ -134,9 +121,6 @@ const isRecording = ref(false)
 const hasRecording = ref(false)
 const recordingDuration = ref(0)
 const showRecordingControls = ref(!inputSpec.isPreview)
-const enable3DViewer = computed(() =>
-  useSettingStore().get('Comfy.Load3D.3DViewerEnable')
-)
 
 const showPreviewButton = computed(() => {
   return !type.includes('Preview')

src/components/load3d/Load3dViewerContent.vue

@@ -1,149 +0,0 @@
-<template>
-  <div
-    ref="viewerContentRef"
-    class="flex w-full"
-    :class="[maximized ? 'h-full' : 'h-[70vh]']"
-    @mouseenter="viewer.handleMouseEnter"
-    @mouseleave="viewer.handleMouseLeave"
-  >
-    <div ref="mainContentRef" class="flex-1 relative">
-      <div
-        ref="containerRef"
-        class="absolute w-full h-full comfy-load-3d-viewer"
-        @resize="viewer.handleResize"
-      />
-    </div>
-
-    <div class="w-72 flex flex-col">
-      <div class="flex-1 overflow-y-auto p-4">
-        <div class="space-y-2">
-          <div class="p-2 space-y-4">
-            <SceneControls
-              v-model:background-color="viewer.backgroundColor.value"
-              v-model:show-grid="viewer.showGrid.value"
-              :has-background-image="viewer.hasBackgroundImage.value"
-              @update-background-image="viewer.handleBackgroundImageUpdate"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <ModelControls
-              v-model:up-direction="viewer.upDirection.value"
-              v-model:material-mode="viewer.materialMode.value"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <CameraControls
-              v-model:camera-type="viewer.cameraType.value"
-              v-model:fov="viewer.fov.value"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <LightControls
-              v-model:light-intensity="viewer.lightIntensity.value"
-            />
-          </div>
-
-          <div class="p-2 space-y-4">
-            <ExportControls @export-model="viewer.exportModel" />
-          </div>
-        </div>
-      </div>
-
-      <div class="p-4">
-        <div class="flex gap-2">
-          <Button
-            icon="pi pi-times"
-            severity="secondary"
-            :label="t('g.cancel')"
-            @click="handleCancel"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
-
-import CameraControls from '@/components/load3d/controls/viewer/CameraControls.vue'
-import ExportControls from '@/components/load3d/controls/viewer/ExportControls.vue'
-import LightControls from '@/components/load3d/controls/viewer/LightControls.vue'
-import ModelControls from '@/components/load3d/controls/viewer/ModelControls.vue'
-import SceneControls from '@/components/load3d/controls/viewer/SceneControls.vue'
-import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { useLoad3dService } from '@/services/load3dService'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const props = defineProps<{
-  node: LGraphNode
-}>()
-
-const viewerContentRef = ref<HTMLDivElement>()
-const containerRef = ref<HTMLDivElement>()
-const mainContentRef = ref<HTMLDivElement>()
-const maximized = ref(false)
-const mutationObserver = ref<MutationObserver | null>(null)
-
-const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
-
-onMounted(async () => {
-  const source = useLoad3dService().getLoad3d(props.node)
-  if (source && containerRef.value) {
-    await viewer.initializeViewer(containerRef.value, source)
-  }
-
-  if (viewerContentRef.value) {
-    mutationObserver.value = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'maximized'
-        ) {
-          maximized.value =
-            (mutation.target as HTMLElement).getAttribute('maximized') ===
-            'true'
-
-          setTimeout(() => {
-            viewer.refreshViewport()
-          }, 0)
-        }
-      })
-    })
-
-    mutationObserver.value.observe(viewerContentRef.value, {
-      attributes: true,
-      attributeFilter: ['maximized']
-    })
-  }
-
-  window.addEventListener('resize', viewer.handleResize)
-})
-
-const handleCancel = () => {
-  viewer.restoreInitialState()
-  useDialogStore().closeDialog()
-}
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', viewer.handleResize)
-
-  if (mutationObserver.value) {
-    mutationObserver.value.disconnect()
-    mutationObserver.value = null
-  }
-
-  // we will manually cleanup the viewer in dialog close handler
-})
-</script>
-
-<style scoped>
-:deep(.p-panel-content) {
-  padding: 0;
-}
-</style>

src/components/load3d/controls/ViewerControls.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="relative bg-gray-700 bg-opacity-30 rounded-lg">
-    <div class="flex flex-col gap-2">
-      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.openIn3DViewer'),
-            showDelay: 300
-          }"
-          class="pi pi-expand text-white text-lg"
-        />
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Tooltip } from 'primevue'
-import Button from 'primevue/button'
-
-import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
-import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { useLoad3dService } from '@/services/load3dService'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const vTooltip = Tooltip
-
-const { node } = defineProps<{
-  node: LGraphNode
-}>()
-
-const openIn3DViewer = () => {
-  const props = { node: node }
-
-  useDialogStore().showDialog({
-    key: 'global-load3d-viewer',
-    title: t('load3d.viewer.title'),
-    component: Load3DViewerContent,
-    props: props,
-    dialogComponentProps: {
-      style: 'width: 80vw; height: 80vh;',
-      maximizable: true,
-      onClose: async () => {
-        await useLoad3dService().handleViewerClose(props.node)
-      }
-    }
-  })
-}
-</script>
-
-<style scoped></style>

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

@@ -1,37 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <label>
-      {{ t('load3d.viewer.cameraType') }}
-    </label>
-    <Select
-      v-model="cameraType"
-      :options="cameras"
-      option-label="title"
-      option-value="value"
-    >
-    </Select>
-  </div>
-
-  <div v-if="showFOVButton" class="space-y-4">
-    <label>{{ t('load3d.fov') }}</label>
-    <Slider v-model="fov" :min="10" :max="150" :step="1" aria-label="fov" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Select from 'primevue/select'
-import Slider from 'primevue/slider'
-import { computed } from 'vue'
-
-import { CameraType } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-
-const cameras = [
-  { title: t('load3d.cameraType.perspective'), value: 'perspective' },
-  { title: t('load3d.cameraType.orthographic'), value: 'orthographic' }
-]
-
-const cameraType = defineModel<CameraType>('cameraType')
-const fov = defineModel<number>('fov')
-const showFOVButton = computed(() => cameraType.value === 'perspective')
-</script>

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

@@ -1,37 +0,0 @@
-<template>
-  <Select
-    v-model="exportFormat"
-    :options="exportFormats"
-    option-label="label"
-    option-value="value"
-  >
-  </Select>
-
-  <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
-    {{ t('load3d.export') }}
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Select from 'primevue/select'
-import { ref } from 'vue'
-
-import { t } from '@/i18n'
-
-const emit = defineEmits<{
-  (e: 'exportModel', format: string): void
-}>()
-
-const exportFormats = [
-  { label: 'GLB', value: 'glb' },
-  { label: 'OBJ', value: 'obj' },
-  { label: 'STL', value: 'stl' }
-]
-
-const exportFormat = ref('obj')
-
-const exportModel = (format: string) => {
-  emit('exportModel', format)
-}
-</script>

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

@@ -1,30 +0,0 @@
-<template>
-  <label>{{ t('load3d.lightIntensity') }}</label>
-
-  <Slider
-    v-model="lightIntensity"
-    class="w-full"
-    :min="lightIntensityMinimum"
-    :max="lightIntensityMaximum"
-    :step="lightAdjustmentIncrement"
-  />
-</template>
-
-<script setup lang="ts">
-import Slider from 'primevue/slider'
-
-import { t } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
-
-const lightIntensity = defineModel<number>('lightIntensity')
-
-const lightIntensityMaximum = useSettingStore().get(
-  'Comfy.Load3D.LightIntensityMaximum'
-)
-const lightIntensityMinimum = useSettingStore().get(
-  'Comfy.Load3D.LightIntensityMinimum'
-)
-const lightAdjustmentIncrement = useSettingStore().get(
-  'Comfy.Load3D.LightAdjustmentIncrement'
-)
-</script>

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

@@ -1,52 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div>
-      <label>{{ t('load3d.upDirection') }}</label>
-      <Select
-        v-model="upDirection"
-        :options="upDirectionOptions"
-        option-label="label"
-        option-value="value"
-      />
-    </div>
-
-    <div>
-      <label>{{ t('load3d.materialMode') }}</label>
-      <Select
-        v-model="materialMode"
-        :options="materialModeOptions"
-        option-label="label"
-        option-value="value"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Select from 'primevue/select'
-import { computed } from 'vue'
-
-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-
-const upDirection = defineModel<UpDirection>('upDirection')
-const materialMode = defineModel<MaterialMode>('materialMode')
-
-const upDirectionOptions = [
-  { label: t('load3d.upDirections.original'), value: 'original' },
-  { label: '-X', value: '-x' },
-  { label: '+X', value: '+x' },
-  { label: '-Y', value: '-y' },
-  { label: '+Y', value: '+y' },
-  { label: '-Z', value: '-z' },
-  { label: '+Z', value: '+z' }
-]
-
-const materialModeOptions = computed(() => {
-  return [
-    { label: t('load3d.materialModes.original'), value: 'original' },
-    { label: t('load3d.materialModes.normal'), value: 'normal' },
-    { label: t('load3d.materialModes.wireframe'), value: 'wireframe' }
-  ]
-})
-</script>

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

@@ -1,82 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div v-if="!hasBackgroundImage">
-      <label>
-        {{ t('load3d.backgroundColor') }}
-      </label>
-      <input v-model="backgroundColor" type="color" class="w-full" />
-    </div>
-
-    <div>
-      <Checkbox v-model="showGrid" input-id="showGrid" binary name="showGrid" />
-      <label for="showGrid" class="pl-2">
-        {{ t('load3d.showGrid') }}
-      </label>
-    </div>
-
-    <div v-if="!hasBackgroundImage">
-      <Button
-        severity="secondary"
-        :label="t('load3d.uploadBackgroundImage')"
-        icon="pi pi-image"
-        class="w-full"
-        @click="openImagePicker"
-      />
-      <input
-        ref="imagePickerRef"
-        type="file"
-        accept="image/*"
-        class="hidden"
-        @change="handleImageUpload"
-      />
-    </div>
-
-    <div v-if="hasBackgroundImage" class="space-y-2">
-      <Button
-        severity="secondary"
-        :label="t('load3d.removeBackgroundImage')"
-        icon="pi pi-times"
-        class="w-full"
-        @click="removeBackgroundImage"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import { ref } from 'vue'
-
-import { t } from '@/i18n'
-
-const backgroundColor = defineModel<string>('backgroundColor')
-const showGrid = defineModel<boolean>('showGrid')
-
-defineProps<{
-  hasBackgroundImage?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateBackgroundImage', file: File | null): void
-}>()
-
-const imagePickerRef = ref<HTMLInputElement | null>(null)
-
-const openImagePicker = () => {
-  imagePickerRef.value?.click()
-}
-
-const handleImageUpload = (event: Event) => {
-  const input = event.target as HTMLInputElement
-  if (input.files && input.files[0]) {
-    emit('updateBackgroundImage', input.files[0])
-  }
-
-  input.value = ''
-}
-
-const removeBackgroundImage = () => {
-  emit('updateBackgroundImage', null)
-}
-</script>

src/components/node/NodePreview.vue

@@ -82,7 +82,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 </template>
 
 <script setup lang="ts">
-import _ from 'es-toolkit/compat'
+import _ from 'lodash'
 import { computed } from 'vue'
 
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -90,16 +90,18 @@ const closeDialog = () => {
 const canvasStore = useCanvasStore()
 
 const addNode = (nodeDef: ComfyNodeDefImpl) => {
+  if (!triggerEvent) {
+    console.warn('The trigger event was undefined when addNode was called.')
+    return
+  }
+
   const node = litegraphService.addNodeOnGraph(nodeDef, {
     pos: getNewNodeLocation()
   })
 
-  if (disconnectOnReset && triggerEvent) {
+  if (disconnectOnReset) {
     canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
-  } else if (!triggerEvent) {
-    console.warn('The trigger event was undefined when addNode was called.')
   }
-
   disconnectOnReset = false
 
   // Notify changeTracker - new step should be added

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -265,14 +265,6 @@ const renderTreeNode = (
                 const workflow = node.data
                 await workflowService.insertWorkflow(workflow)
               }
-            },
-            {
-              label: t('g.duplicate'),
-              icon: 'pi pi-file-export',
-              command: async () => {
-                const workflow = node.data
-                await workflowService.duplicateWorkflow(workflow)
-              }
             }
           ]
         },

src/components/topbar/CommandMenubar.vue

@@ -59,7 +59,7 @@
         @mousedown="
           isZoomCommand(item) ? handleZoomMouseDown(item, $event) : undefined
         "
-        @click="handleItemClick(item, $event)"
+        @click="isZoomCommand(item) ? handleZoomClick($event) : undefined"
       >
         <i
           v-if="hasActiveStateSiblings(item)"
@@ -177,7 +177,7 @@ const showManageExtensions = () => {
   }
 }
 
-const extraMenuItems: MenuItem[] = [
+const extraMenuItems = computed<MenuItem[]>(() => [
   { separator: true },
   {
     key: 'theme',
@@ -202,15 +202,15 @@ const extraMenuItems: MenuItem[] = [
     icon: 'mdi mdi-puzzle-outline',
     command: showManageExtensions
   }
-]
+])
 
-const lightLabel = t('menu.light')
-const darkLabel = t('menu.dark')
+const lightLabel = computed(() => t('menu.light'))
+const darkLabel = computed(() => t('menu.dark'))
 
 const activeTheme = computed(() => {
   return colorPaletteStore.completedActivePalette.light_theme
-    ? lightLabel
-    : darkLabel
+    ? lightLabel.value
+    : darkLabel.value
 })
 
 const onThemeChange = async () => {
@@ -243,7 +243,7 @@ const translatedItems = computed(() => {
   items.splice(
     helpIndex,
     0,
-    ...extraMenuItems,
+    ...extraMenuItems.value,
     ...(helpItem
       ? [
           {
@@ -285,19 +285,11 @@ const handleZoomMouseDown = (item: MenuItem, event: MouseEvent) => {
   }
 }
 
-const handleItemClick = (item: MenuItem, event: MouseEvent) => {
-  // Prevent the menu from closing for zoom commands or commands that have active state
-  if (isZoomCommand(item) || item.comfyCommand?.active) {
-    event.preventDefault()
-    event.stopPropagation()
-    if (item.comfyCommand?.active) {
-      item.command?.({
-        item,
-        originalEvent: event
-      })
-    }
-    return false
-  }
+const handleZoomClick = (event: MouseEvent) => {
+  event.preventDefault()
+  event.stopPropagation()
+  // Prevent the menu from closing for zoom commands
+  return false
 }
 
 const hasActiveStateSiblings = (item: MenuItem): boolean => {

src/composables/bottomPanelTabs/useShortcutsTab.ts

@@ -7,18 +7,19 @@ import { BottomPanelExtension } from '@/types/extensionTypes'
 
 export const useShortcutsTab = (): BottomPanelExtension[] => {
   const { t } = useI18n()
-
   return [
     {
       id: 'shortcuts-essentials',
-      title: t('shortcuts.essentials'),
+      title: t('shortcuts.essentials'), // For command labels (collected by i18n workflow)
+      titleKey: 'shortcuts.essentials', // For dynamic translation in UI
       component: markRaw(EssentialsPanel),
       type: 'vue',
       targetPanel: 'shortcuts'
     },
     {
       id: 'shortcuts-view-controls',
-      title: t('shortcuts.viewControls'),
+      title: t('shortcuts.viewControls'), // For command labels (collected by i18n workflow)
+      titleKey: 'shortcuts.viewControls', // For dynamic translation in UI
       component: markRaw(ViewControlsPanel),
       type: 'vue',
       targetPanel: 'shortcuts'

src/composables/bottomPanelTabs/useTerminal.ts

@@ -1,7 +1,7 @@
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
 import '@xterm/xterm/css/xterm.css'
-import { debounce } from 'es-toolkit/compat'
+import { debounce } from 'lodash'
 import { Ref, markRaw, onMounted, onUnmounted } from 'vue'
 
 export function useTerminal(element: Ref<HTMLElement | undefined>) {

src/composables/bottomPanelTabs/useTerminalTabs.ts

@@ -9,7 +9,8 @@ export const useLogsTerminalTab = (): BottomPanelExtension => {
   const { t } = useI18n()
   return {
     id: 'logs-terminal',
-    title: t('g.logs'),
+    title: t('g.logs'), // For command labels (collected by i18n workflow)
+    titleKey: 'g.logs', // For dynamic translation in UI
     component: markRaw(LogsTerminal),
     type: 'vue'
   }
@@ -19,7 +20,8 @@ export const useCommandTerminalTab = (): BottomPanelExtension => {
   const { t } = useI18n()
   return {
     id: 'command-terminal',
-    title: t('g.terminal'),
+    title: t('g.terminal'), // For command labels (collected by i18n workflow)
+    titleKey: 'g.terminal', // For dynamic translation in UI
     component: markRaw(CommandTerminal),
     type: 'vue'
   }

src/composables/element/useOverflowObserver.ts

@@ -1,5 +1,5 @@
 import { useMutationObserver, useResizeObserver } from '@vueuse/core'
-import { debounce } from 'es-toolkit/compat'
+import { debounce } from 'lodash'
 import { readonly, ref } from 'vue'
 
 /**

src/composables/element/useRetriggerableAnimation.ts

@@ -1,80 +0,0 @@
-import { onMounted, ref, watch } from 'vue'
-import type { Ref, WatchSource } from 'vue'
-
-/**
- * A composable that manages retriggerable CSS animations.
- * Provides a boolean ref that can be toggled to restart CSS animations.
- *
- * @param trigger - Optional reactive source that triggers the animation when it changes
- * @param options - Configuration options
- * @returns An object containing the animation state ref
- *
- * @example
- * ```vue
- * <template>
- *   <div :class="{ 'animate-slide-up': shouldAnimate }">
- *     Content
- *   </div>
- * </template>
- *
- * <script setup>
- * const { shouldAnimate } = useRetriggerableAnimation(someReactiveTrigger)
- * </script>
- * ```
- */
-export function useRetriggerableAnimation<T = any>(
-  trigger?: WatchSource<T> | Ref<T>,
-  options: {
-    animateOnMount?: boolean
-    animationDelay?: number
-  } = {}
-) {
-  const { animateOnMount = true, animationDelay = 0 } = options
-
-  const shouldAnimate = ref(false)
-
-  /**
-   * Retriggers the animation by removing and re-adding the animation class
-   */
-  const retriggerAnimation = () => {
-    // Remove animation class
-    shouldAnimate.value = false
-    // Force browser reflow to ensure the class removal is processed
-    void document.body.offsetHeight
-    // Re-add animation class in the next frame
-    requestAnimationFrame(() => {
-      if (animationDelay > 0) {
-        setTimeout(() => {
-          shouldAnimate.value = true
-        }, animationDelay)
-      } else {
-        shouldAnimate.value = true
-      }
-    })
-  }
-
-  // Trigger animation on mount if requested
-  if (animateOnMount) {
-    onMounted(() => {
-      if (animationDelay > 0) {
-        setTimeout(() => {
-          shouldAnimate.value = true
-        }, animationDelay)
-      } else {
-        shouldAnimate.value = true
-      }
-    })
-  }
-
-  // Watch for trigger changes to retrigger animation
-  if (trigger) {
-    watch(trigger, () => {
-      retriggerAnimation()
-    })
-  }
-
-  return {
-    shouldAnimate,
-    retriggerAnimation
-  }
-}

src/composables/node/useNodeBadge.ts

@@ -1,4 +1,4 @@
-import _ from 'es-toolkit/compat'
+import _ from 'lodash'
 import { computed, onMounted, watch } from 'vue'
 
 import { useNodePricing } from '@/composables/node/useNodePricing'

src/composables/node/useNodePricing.ts

@@ -1332,6 +1332,9 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return 'Token-based'
       }
     },
+    GeminiImageNode: {
+      displayPrice: '$0.03 per 1K tokens'
+    },
     // OpenAI nodes
     OpenAIChatNode: {
       displayPrice: (node: LGraphNode): string => {
@@ -1371,18 +1374,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         }
         return 'Token-based'
       }
-    },
-    ViduTextToVideoNode: {
-      displayPrice: '$0.4/Run'
-    },
-    ViduImageToVideoNode: {
-      displayPrice: '$0.4/Run'
-    },
-    ViduReferenceVideoNode: {
-      displayPrice: '$0.4/Run'
-    },
-    ViduStartEndToVideoNode: {
-      displayPrice: '$0.4/Run'
     }
   }
 

src/composables/nodePack/useMissingNodes.ts

@@ -1,4 +1,4 @@
-import { groupBy } from 'es-toolkit/compat'
+import { groupBy } from 'lodash'
 import { computed, onMounted } from 'vue'
 
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'

src/composables/useCoreCommands.ts

@@ -1,6 +1,5 @@
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
@@ -879,17 +878,6 @@ export function useCoreCommands(): ComfyCommand[] {
           navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
         )
       }
-    },
-    {
-      id: 'Comfy.Dev.ShowModelSelector',
-      icon: 'pi pi-box',
-      label: 'Show Model Selector (Dev)',
-      versionAdded: '1.26.2',
-      category: 'view-controls' as const,
-      function: () => {
-        const modelSelectorDialog = useModelSelectorDialog()
-        modelSelectorDialog.show()
-      }
     }
   ]
 

src/composables/useLoad3dViewer.ts

@@ -1,376 +0,0 @@
-import { ref, toRaw, watch } from 'vue'
-
-import Load3d from '@/extensions/core/load3d/Load3d'
-import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import {
-  CameraType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { useLoad3dService } from '@/services/load3dService'
-import { useToastStore } from '@/stores/toastStore'
-
-interface Load3dViewerState {
-  backgroundColor: string
-  showGrid: boolean
-  cameraType: CameraType
-  fov: number
-  lightIntensity: number
-  cameraState: any
-  backgroundImage: string
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold: number
-}
-
-export const useLoad3dViewer = (node: LGraphNode) => {
-  const backgroundColor = ref('')
-  const showGrid = ref(true)
-  const cameraType = ref<CameraType>('perspective')
-  const fov = ref(75)
-  const lightIntensity = ref(1)
-  const backgroundImage = ref('')
-  const hasBackgroundImage = ref(false)
-  const upDirection = ref<UpDirection>('original')
-  const materialMode = ref<MaterialMode>('original')
-  const edgeThreshold = ref(85)
-  const needApplyChanges = ref(true)
-
-  let load3d: Load3d | null = null
-  let sourceLoad3d: Load3d | null = null
-
-  const initialState = ref<Load3dViewerState>({
-    backgroundColor: '#282828',
-    showGrid: true,
-    cameraType: 'perspective',
-    fov: 75,
-    lightIntensity: 1,
-    cameraState: null,
-    backgroundImage: '',
-    upDirection: 'original',
-    materialMode: 'original',
-    edgeThreshold: 85
-  })
-
-  watch(backgroundColor, (newColor) => {
-    if (!load3d) return
-    try {
-      load3d.setBackgroundColor(newColor)
-    } catch (error) {
-      console.error('Error updating background color:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateBackgroundColor', { color: newColor })
-      )
-    }
-  })
-
-  watch(showGrid, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.toggleGrid(newValue)
-    } catch (error) {
-      console.error('Error toggling grid:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToToggleGrid', { show: newValue ? 'on' : 'off' })
-      )
-    }
-  })
-
-  watch(cameraType, (newCameraType) => {
-    if (!load3d) return
-    try {
-      load3d.toggleCamera(newCameraType)
-    } catch (error) {
-      console.error('Error toggling camera:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToToggleCamera', { camera: newCameraType })
-      )
-    }
-  })
-
-  watch(fov, (newFov) => {
-    if (!load3d) return
-    try {
-      load3d.setFOV(Number(newFov))
-    } catch (error) {
-      console.error('Error updating FOV:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateFOV', { fov: newFov })
-      )
-    }
-  })
-
-  watch(lightIntensity, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.setLightIntensity(Number(newValue))
-    } catch (error) {
-      console.error('Error updating light intensity:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateLightIntensity', { intensity: newValue })
-      )
-    }
-  })
-
-  watch(backgroundImage, async (newValue) => {
-    if (!load3d) return
-    try {
-      await load3d.setBackgroundImage(newValue)
-      hasBackgroundImage.value = !!newValue
-    } catch (error) {
-      console.error('Error updating background image:', error)
-      useToastStore().addAlert(t('toastMessages.failedToUpdateBackgroundImage'))
-    }
-  })
-
-  watch(upDirection, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.setUpDirection(newValue)
-    } catch (error) {
-      console.error('Error updating up direction:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateUpDirection', { direction: newValue })
-      )
-    }
-  })
-
-  watch(materialMode, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.setMaterialMode(newValue)
-    } catch (error) {
-      console.error('Error updating material mode:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateMaterialMode', { mode: newValue })
-      )
-    }
-  })
-
-  watch(edgeThreshold, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.setEdgeThreshold(Number(newValue))
-    } catch (error) {
-      console.error('Error updating edge threshold:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateEdgeThreshold', { threshold: newValue })
-      )
-    }
-  })
-
-  const initializeViewer = async (
-    containerRef: HTMLElement,
-    source: Load3d
-  ) => {
-    if (!containerRef) return
-
-    sourceLoad3d = source
-
-    try {
-      load3d = new Load3d(containerRef, {
-        node: node,
-        disablePreview: true,
-        isViewerMode: true
-      })
-
-      await useLoad3dService().copyLoad3dState(source, load3d)
-
-      const sourceCameraType = source.getCurrentCameraType()
-      const sourceCameraState = source.getCameraState()
-
-      cameraType.value = sourceCameraType
-      backgroundColor.value = source.sceneManager.currentBackgroundColor
-      showGrid.value = source.sceneManager.gridHelper.visible
-      lightIntensity.value = (node.properties['Light Intensity'] as number) || 1
-
-      const backgroundInfo = source.sceneManager.getCurrentBackgroundInfo()
-      if (
-        backgroundInfo.type === 'image' &&
-        node.properties['Background Image']
-      ) {
-        backgroundImage.value = node.properties['Background Image'] as string
-        hasBackgroundImage.value = true
-      } else {
-        backgroundImage.value = ''
-        hasBackgroundImage.value = false
-      }
-
-      if (sourceCameraType === 'perspective') {
-        fov.value = source.cameraManager.perspectiveCamera.fov
-      }
-
-      upDirection.value = source.modelManager.currentUpDirection
-      materialMode.value = source.modelManager.materialMode
-      edgeThreshold.value = (node.properties['Edge Threshold'] as number) || 85
-
-      initialState.value = {
-        backgroundColor: backgroundColor.value,
-        showGrid: showGrid.value,
-        cameraType: cameraType.value,
-        fov: fov.value,
-        lightIntensity: lightIntensity.value,
-        cameraState: sourceCameraState,
-        backgroundImage: backgroundImage.value,
-        upDirection: upDirection.value,
-        materialMode: materialMode.value,
-        edgeThreshold: edgeThreshold.value
-      }
-
-      const width = node.widgets?.find((w) => w.name === 'width')
-      const height = node.widgets?.find((w) => w.name === 'height')
-
-      if (width && height) {
-        load3d.setTargetSize(
-          toRaw(width).value as number,
-          toRaw(height).value as number
-        )
-      }
-    } catch (error) {
-      console.error('Error initializing Load3d viewer:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToInitializeLoad3dViewer')
-      )
-    }
-  }
-
-  const exportModel = async (format: string) => {
-    if (!load3d) return
-
-    try {
-      await load3d.exportModel(format)
-    } catch (error) {
-      console.error('Error exporting model:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToExportModel', { format: format.toUpperCase() })
-      )
-    }
-  }
-
-  const handleResize = () => {
-    load3d?.handleResize()
-  }
-
-  const handleMouseEnter = () => {
-    load3d?.updateStatusMouseOnViewer(true)
-  }
-
-  const handleMouseLeave = () => {
-    load3d?.updateStatusMouseOnViewer(false)
-  }
-
-  const restoreInitialState = () => {
-    const nodeValue = node
-
-    needApplyChanges.value = false
-
-    if (nodeValue.properties) {
-      nodeValue.properties['Background Color'] =
-        initialState.value.backgroundColor
-      nodeValue.properties['Show Grid'] = initialState.value.showGrid
-      nodeValue.properties['Camera Type'] = initialState.value.cameraType
-      nodeValue.properties['FOV'] = initialState.value.fov
-      nodeValue.properties['Light Intensity'] =
-        initialState.value.lightIntensity
-      nodeValue.properties['Camera Info'] = initialState.value.cameraState
-      nodeValue.properties['Background Image'] =
-        initialState.value.backgroundImage
-    }
-  }
-
-  const applyChanges = async () => {
-    if (!sourceLoad3d || !load3d) return false
-
-    const viewerCameraState = load3d.getCameraState()
-    const nodeValue = node
-
-    if (nodeValue.properties) {
-      nodeValue.properties['Background Color'] = backgroundColor.value
-      nodeValue.properties['Show Grid'] = showGrid.value
-      nodeValue.properties['Camera Type'] = cameraType.value
-      nodeValue.properties['FOV'] = fov.value
-      nodeValue.properties['Light Intensity'] = lightIntensity.value
-      nodeValue.properties['Camera Info'] = viewerCameraState
-      nodeValue.properties['Background Image'] = backgroundImage.value
-    }
-
-    await useLoad3dService().copyLoad3dState(load3d, sourceLoad3d)
-
-    if (backgroundImage.value) {
-      await sourceLoad3d.setBackgroundImage(backgroundImage.value)
-    }
-
-    sourceLoad3d.forceRender()
-
-    if (nodeValue.graph) {
-      nodeValue.graph.setDirtyCanvas(true, true)
-    }
-
-    return true
-  }
-
-  const refreshViewport = () => {
-    useLoad3dService().handleViewportRefresh(load3d)
-  }
-
-  const handleBackgroundImageUpdate = async (file: File | null) => {
-    if (!file) {
-      backgroundImage.value = ''
-      hasBackgroundImage.value = false
-      return
-    }
-
-    try {
-      const resourceFolder =
-        (node.properties['Resource Folder'] as string) || ''
-      const subfolder = resourceFolder.trim()
-        ? `3d/${resourceFolder.trim()}`
-        : '3d'
-
-      const uploadPath = await Load3dUtils.uploadFile(file, subfolder)
-
-      if (uploadPath) {
-        backgroundImage.value = uploadPath
-        hasBackgroundImage.value = true
-      }
-    } catch (error) {
-      console.error('Error uploading background image:', error)
-      useToastStore().addAlert(t('toastMessages.failedToUploadBackgroundImage'))
-    }
-  }
-
-  const cleanup = () => {
-    load3d?.remove()
-    load3d = null
-    sourceLoad3d = null
-  }
-
-  return {
-    // State
-    backgroundColor,
-    showGrid,
-    cameraType,
-    fov,
-    lightIntensity,
-    backgroundImage,
-    hasBackgroundImage,
-    upDirection,
-    materialMode,
-    edgeThreshold,
-    needApplyChanges,
-
-    // Methods
-    initializeViewer,
-    exportModel,
-    handleResize,
-    handleMouseEnter,
-    handleMouseLeave,
-    restoreInitialState,
-    applyChanges,
-    refreshViewport,
-    handleBackgroundImageUpdate,
-    cleanup
-  }
-}

src/composables/useModelSelectorDialog.ts

@@ -1,29 +0,0 @@
-import ModelSelector from '@/components/custom/widget/ModelSelector.vue'
-import { useDialogService } from '@/services/dialogService'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const DIALOG_KEY = 'global-model-selector'
-
-export const useModelSelectorDialog = () => {
-  const dialogService = useDialogService()
-  const dialogStore = useDialogStore()
-
-  function hide() {
-    dialogStore.closeDialog({ key: DIALOG_KEY })
-  }
-
-  function show() {
-    dialogService.showLayoutDialog({
-      key: DIALOG_KEY,
-      component: ModelSelector,
-      props: {
-        onClose: hide
-      }
-    })
-  }
-
-  return {
-    show,
-    hide
-  }
-}

src/composables/useRegistrySearch.ts

@@ -1,5 +1,5 @@
 import { watchDebounced } from '@vueuse/core'
-import { orderBy } from 'es-toolkit/compat'
+import { orderBy } from 'lodash'
 import { computed, ref, watch } from 'vue'
 
 import { DEFAULT_PAGE_SIZE } from '@/constants/searchConstants'

src/composables/useWorkflowPersistence.ts

@@ -1,4 +1,3 @@
-import { tryOnScopeDispose } from '@vueuse/core'
 import { computed, watch } from 'vue'
 
 import { api } from '@/scripts/api'
@@ -89,11 +88,6 @@ export function useWorkflowPersistence() {
   )
   api.addEventListener('graphChanged', persistCurrentWorkflow)
 
-  // Clean up event listener when component unmounts
-  tryOnScopeDispose(() => {
-    api.removeEventListener('graphChanged', persistCurrentWorkflow)
-  })
-
   // Restore workflow tabs states
   const openWorkflows = computed(() => workflowStore.openWorkflows)
   const activeWorkflow = computed(() => workflowStore.activeWorkflow)

src/composables/widgets/useFloatWidget.ts

@@ -1,4 +1,4 @@
-import _ from 'es-toolkit/compat'
+import _ from 'lodash'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'

src/constants/coreSettings.ts

@@ -772,8 +772,7 @@ export const CORE_SETTINGS: SettingParams[] = [
   {
     id: 'LiteGraph.Canvas.LowQualityRenderingZoomThreshold',
     name: 'Low quality rendering zoom threshold',
-    tooltip:
-      'Zoom level threshold for performance mode. Lower values (0.1) = quality at all zoom levels. Higher values (1.0) = performance mode even when zoomed in. Performance mode simplifies rendering by hiding text labels, shadows, and details.',
+    tooltip: 'Render low quality shapes when zoomed out',
     type: 'slider',
     attrs: {
       min: 0.1,
@@ -791,11 +790,11 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'combo',
     options: [
       { value: 'standard', text: 'Standard (New)' },
-      { value: 'legacy', text: 'Left-Click Pan (Legacy)' }
+      { value: 'legacy', text: 'Drag Navigation' }
     ],
     versionAdded: '1.25.0',
     defaultsByInstallVersion: {
-      '1.25.0': 'standard'
+      '1.25.0': 'legacy'
     }
   },
   {

src/constants/coreTemplates.ts

@@ -0,0 +1,438 @@
+export const CORE_TEMPLATES = [
+  {
+    moduleName: 'default',
+    title: 'Basics',
+    type: 'image',
+    templates: [
+      {
+        name: 'default',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate images from text descriptions.'
+      },
+      {
+        name: 'image2image',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Transform existing images using text prompts.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/img2img/'
+      },
+      {
+        name: 'lora',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Apply LoRA models for specialized styles or subjects.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/lora/'
+      },
+      {
+        name: 'inpaint_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Edit specific parts of images seamlessly.',
+        thumbnailVariant: 'compareSlider',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/inpaint/'
+      },
+      {
+        name: 'inpain_model_outpainting',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Extend images beyond their original boundaries.',
+        thumbnailVariant: 'compareSlider',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/inpaint/#outpainting'
+      },
+      {
+        name: 'embedding_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Use textual inversion for consistent styles',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/textual_inversion_embeddings/'
+      },
+      {
+        name: 'gligen_textbox_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Specify the location and size of objects.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/gligen/'
+      },
+      {
+        name: 'lora_multiple',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Combine multiple LoRA models for unique results.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/lora/'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'Flux',
+    type: 'image',
+    templates: [
+      {
+        name: 'flux_dev_checkpoint_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create images using Flux development models.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#flux-dev-1'
+      },
+      {
+        name: 'flux_schnell',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate images quickly with Flux Schnell.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#flux-schnell-1'
+      },
+      {
+        name: 'flux_fill_inpaint_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Fill in missing parts of images.',
+        thumbnailVariant: 'compareSlider',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#fill-inpainting-model'
+      },
+      {
+        name: 'flux_fill_outpaint_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Extend images using Flux outpainting.',
+        thumbnailVariant: 'compareSlider',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#fill-inpainting-model'
+      },
+      {
+        name: 'flux_canny_model_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate images from edge detection.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
+      },
+      {
+        name: 'flux_depth_lora_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create images with depth-aware LoRA.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
+      },
+      {
+        name: 'flux_redux_model_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description:
+          'Transfer style from a reference image to guide image generation with Flux.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#redux'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'ControlNet',
+    type: 'image',
+    templates: [
+      {
+        name: 'controlnet_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Control image generation with reference images.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/'
+      },
+      {
+        name: '2_pass_pose_worship',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate images from pose references.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#pose-controlnet'
+      },
+      {
+        name: 'depth_controlnet',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create images with depth-aware generation.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#t2i-adapter-vs-controlnets'
+      },
+      {
+        name: 'depth_t2i_adapter',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Quickly generate depth-aware images with a T2I adapter.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#t2i-adapter-vs-controlnets'
+      },
+      {
+        name: 'mixing_controlnets',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Combine multiple ControlNet models together.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#mixing-controlnets'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'Upscaling',
+    type: 'image',
+    templates: [
+      {
+        name: 'hiresfix_latent_workflow',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Enhance image quality in latent space.',
+        thumbnailVariant: 'zoomHover',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/'
+      },
+      {
+        name: 'esrgan_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Use upscale models to enhance image quality.',
+        thumbnailVariant: 'zoomHover',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/upscale_models/'
+      },
+      {
+        name: 'hiresfix_esrgan_workflow',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Use upscale models during intermediate steps.',
+        thumbnailVariant: 'zoomHover',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/#non-latent-upscaling'
+      },
+      {
+        name: 'latent_upscale_different_prompt_model',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Upscale and change prompt across passes',
+        thumbnailVariant: 'zoomHover',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/#more-examples'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'Video',
+    type: 'video',
+    templates: [
+      {
+        name: 'ltxv_text_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate videos from text descriptions.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/ltxv/#text-to-video'
+      },
+      {
+        name: 'ltxv_image_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Convert still images into videos.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/ltxv/#image-to-video'
+      },
+      {
+        name: 'mochi_text_to_video_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create videos with Mochi model.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/mochi/'
+      },
+      {
+        name: 'hunyuan_video_text_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate videos using Hunyuan model.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/hunyuan_video/'
+      },
+      {
+        name: 'image_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Transform images into animated videos.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
+      },
+      {
+        name: 'txt_to_image_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description:
+          'Generate images from text and then convert them into videos.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'SD3.5',
+    type: 'image',
+    templates: [
+      {
+        name: 'sd3.5_simple_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate images with SD 3.5.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35'
+      },
+      {
+        name: 'sd3.5_large_canny_controlnet_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description:
+          'Use edge detection to guide image generation with SD 3.5.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
+      },
+      {
+        name: 'sd3.5_large_depth',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create depth-aware images with SD 3.5.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
+      },
+      {
+        name: 'sd3.5_large_blur',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description:
+          'Generate images from blurred reference images with SD 3.5.',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'SDXL',
+    type: 'image',
+    templates: [
+      {
+        name: 'sdxl_simple_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create high-quality images with SDXL.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/'
+      },
+      {
+        name: 'sdxl_refiner_prompt_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Enhance SDXL outputs with refiners.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/'
+      },
+      {
+        name: 'sdxl_revision_text_prompts',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description:
+          'Transfer concepts from reference images to guide image generation with SDXL.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/#revision'
+      },
+      {
+        name: 'sdxl_revision_zero_positive',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description:
+          'Add text prompts alongside reference images to guide image generation with SDXL.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/#revision'
+      },
+      {
+        name: 'sdxlturbo_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate images in a single step with SDXL Turbo.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/sdturbo/'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'Area Composition',
+    type: 'image',
+    templates: [
+      {
+        name: 'area_composition',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Control image composition with areas.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/'
+      },
+      {
+        name: 'area_composition_reversed',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Reverse area composition workflow.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/'
+      },
+      {
+        name: 'area_composition_square_area_for_subject',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Create consistent subject placement.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/#increasing-consistency-of-images-with-area-composition'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: '3D',
+    type: 'video',
+    templates: [
+      {
+        name: 'stable_zero123_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Generate 3D views from single images.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/3d/'
+      }
+    ]
+  },
+  {
+    moduleName: 'default',
+    title: 'Audio',
+    type: 'audio',
+    templates: [
+      {
+        name: 'stable_audio_example',
+        mediaType: 'audio',
+        mediaSubtype: 'mp3',
+        description: 'Generate audio from text descriptions.',
+        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/audio/'
+      }
+    ]
+  }
+]

src/extensions/core/load3d.ts

@@ -2,7 +2,6 @@ import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
 import Load3DAnimation from '@/components/load3d/Load3DAnimation.vue'
-import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
@@ -10,13 +9,10 @@ import { t } from '@/i18n'
 import type { IStringWidget } from '@/lib/litegraph/src/types/widgets'
 import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { api } from '@/scripts/api'
-import { ComfyApp, app } from '@/scripts/app'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
-import { useDialogStore } from '@/stores/dialogStore'
 import { useToastStore } from '@/stores/toastStore'
-import { isLoad3dNode } from '@/utils/litegraphUtil'
 
 async function handleModelUpload(files: FileList, node: any) {
   if (!files?.length) return
@@ -178,51 +174,6 @@ useExtensionService().registerExtension({
       },
       defaultValue: 0.5,
       experimental: true
-    },
-    {
-      id: 'Comfy.Load3D.3DViewerEnable',
-      category: ['3D', '3DViewer', 'Enable'],
-      name: 'Enable 3D Viewer (Beta)',
-      tooltip:
-        'Enables the 3D Viewer (Beta) for selected nodes. This feature allows you to visualize and interact with 3D models directly within the full size 3d viewer.',
-      type: 'boolean',
-      defaultValue: false,
-      experimental: true
-    }
-  ],
-  commands: [
-    {
-      id: 'Comfy.3DViewer.Open3DViewer',
-      icon: 'pi pi-pencil',
-      label: 'Open 3D Viewer (Beta) for Selected Node',
-      function: () => {
-        const selectedNodes = app.canvas.selected_nodes
-        if (!selectedNodes || Object.keys(selectedNodes).length !== 1) return
-
-        const selectedNode = selectedNodes[Object.keys(selectedNodes)[0]]
-
-        if (!isLoad3dNode(selectedNode)) return
-
-        ComfyApp.copyToClipspace(selectedNode)
-        // @ts-expect-error clipspace_return_node is an extension property added at runtime
-        ComfyApp.clipspace_return_node = selectedNode
-
-        const props = { node: selectedNode }
-
-        useDialogStore().showDialog({
-          key: 'global-load3d-viewer',
-          title: t('load3d.viewer.title'),
-          component: Load3DViewerContent,
-          props: props,
-          dialogComponentProps: {
-            style: 'width: 80vw; height: 80vh;',
-            maximizable: true,
-            onClose: async () => {
-              await useLoad3dService().handleViewerClose(props.node)
-            }
-          }
-        })
-      }
     }
   ],
   getCustomWidgets() {

src/extensions/core/load3d/CameraManager.ts

@@ -179,16 +179,12 @@ export class CameraManager implements CameraManagerInterface {
   }
 
   handleResize(width: number, height: number): void {
-    const aspect = width / height
-    this.updateAspectRatio(aspect)
-  }
-
-  updateAspectRatio(aspect: number): void {
     if (this.activeCamera === this.perspectiveCamera) {
-      this.perspectiveCamera.aspect = aspect
+      this.perspectiveCamera.aspect = width / height
       this.perspectiveCamera.updateProjectionMatrix()
     } else {
       const frustumSize = 10
+      const aspect = width / height
       this.orthographicCamera.left = (-frustumSize * aspect) / 2
       this.orthographicCamera.right = (frustumSize * aspect) / 2
       this.orthographicCamera.top = frustumSize / 2

src/extensions/core/load3d/Load3d.ts

@@ -9,11 +9,11 @@ import { EventManager } from './EventManager'
 import { LightingManager } from './LightingManager'
 import { LoaderManager } from './LoaderManager'
 import { ModelExporter } from './ModelExporter'
+import { ModelManager } from './ModelManager'
 import { NodeStorage } from './NodeStorage'
 import { PreviewManager } from './PreviewManager'
 import { RecordingManager } from './RecordingManager'
 import { SceneManager } from './SceneManager'
-import { SceneModelManager } from './SceneModelManager'
 import { ViewHelperManager } from './ViewHelperManager'
 import {
   CameraState,
@@ -29,28 +29,22 @@ class Load3d {
   protected animationFrameId: number | null = null
   node: LGraphNode
 
-  eventManager: EventManager
-  nodeStorage: NodeStorage
-  sceneManager: SceneManager
-  cameraManager: CameraManager
-  controlsManager: ControlsManager
-  lightingManager: LightingManager
-  viewHelperManager: ViewHelperManager
-  previewManager: PreviewManager
-  loaderManager: LoaderManager
-  modelManager: SceneModelManager
-  recordingManager: RecordingManager
+  protected eventManager: EventManager
+  protected nodeStorage: NodeStorage
+  protected sceneManager: SceneManager
+  protected cameraManager: CameraManager
+  protected controlsManager: ControlsManager
+  protected lightingManager: LightingManager
+  protected viewHelperManager: ViewHelperManager
+  protected previewManager: PreviewManager
+  protected loaderManager: LoaderManager
+  protected modelManager: ModelManager
+  protected recordingManager: RecordingManager
 
   STATUS_MOUSE_ON_NODE: boolean
   STATUS_MOUSE_ON_SCENE: boolean
-  STATUS_MOUSE_ON_VIEWER: boolean
   INITIAL_RENDER_DONE: boolean = false
 
-  targetWidth: number = 512
-  targetHeight: number = 512
-  targetAspectRatio: number = 1
-  isViewerMode: boolean = false
-
   constructor(
     container: Element | HTMLElement,
     options: Load3DOptions = {
@@ -60,16 +54,6 @@ class Load3d {
   ) {
     this.node = options.node || ({} as LGraphNode)
     this.clock = new THREE.Clock()
-    this.isViewerMode = options.isViewerMode || false
-
-    const widthWidget = this.node.widgets?.find((w) => w.name === 'width')
-    const heightWidget = this.node.widgets?.find((w) => w.name === 'height')
-
-    if (widthWidget && heightWidget) {
-      this.targetWidth = widthWidget.value as number
-      this.targetHeight = heightWidget.value as number
-      this.targetAspectRatio = this.targetWidth / this.targetHeight
-    }
 
     this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
     this.renderer.setSize(300, 300)
@@ -125,11 +109,7 @@ class Load3d {
       this.sceneManager.backgroundCamera
     )
 
-    if (options.disablePreview) {
-      this.previewManager.togglePreview(false)
-    }
-
-    this.modelManager = new SceneModelManager(
+    this.modelManager = new ModelManager(
       this.sceneManager.scene,
       this.renderer,
       this.eventManager,
@@ -162,7 +142,6 @@ class Load3d {
 
     this.STATUS_MOUSE_ON_NODE = false
     this.STATUS_MOUSE_ON_SCENE = false
-    this.STATUS_MOUSE_ON_VIEWER = false
 
     this.handleResize()
     this.startAnimation()
@@ -172,41 +151,6 @@ class Load3d {
     }, 100)
   }
 
-  getEventManager(): EventManager {
-    return this.eventManager
-  }
-
-  getNodeStorage(): NodeStorage {
-    return this.nodeStorage
-  }
-  getSceneManager(): SceneManager {
-    return this.sceneManager
-  }
-  getCameraManager(): CameraManager {
-    return this.cameraManager
-  }
-  getControlsManager(): ControlsManager {
-    return this.controlsManager
-  }
-  getLightingManager(): LightingManager {
-    return this.lightingManager
-  }
-  getViewHelperManager(): ViewHelperManager {
-    return this.viewHelperManager
-  }
-  getPreviewManager(): PreviewManager {
-    return this.previewManager
-  }
-  getLoaderManager(): LoaderManager {
-    return this.loaderManager
-  }
-  getModelManager(): SceneModelManager {
-    return this.modelManager
-  }
-  getRecordingManager(): RecordingManager {
-    return this.recordingManager
-  }
-
   forceRender(): void {
     const delta = this.clock.getDelta()
     this.viewHelperManager.update(delta)
@@ -228,43 +172,12 @@ class Load3d {
   }
 
   renderMainScene(): void {
-    const containerWidth = this.renderer.domElement.clientWidth
-    const containerHeight = this.renderer.domElement.clientHeight
+    const width = this.renderer.domElement.clientWidth
+    const height = this.renderer.domElement.clientHeight
 
-    if (this.isViewerMode) {
-      const containerAspectRatio = containerWidth / containerHeight
-
-      let renderWidth: number
-      let renderHeight: number
-      let offsetX: number = 0
-      let offsetY: number = 0
-
-      if (containerAspectRatio > this.targetAspectRatio) {
-        renderHeight = containerHeight
-        renderWidth = renderHeight * this.targetAspectRatio
-        offsetX = (containerWidth - renderWidth) / 2
-      } else {
-        renderWidth = containerWidth
-        renderHeight = renderWidth / this.targetAspectRatio
-        offsetY = (containerHeight - renderHeight) / 2
-      }
-
-      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissorTest(true)
-      this.renderer.setClearColor(0x0a0a0a)
-      this.renderer.clear()
-
-      this.renderer.setViewport(offsetX, offsetY, renderWidth, renderHeight)
-      this.renderer.setScissor(offsetX, offsetY, renderWidth, renderHeight)
-
-      const renderAspectRatio = renderWidth / renderHeight
-      this.cameraManager.updateAspectRatio(renderAspectRatio)
-    } else {
-      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissorTest(true)
-    }
+    this.renderer.setViewport(0, 0, width, height)
+    this.renderer.setScissor(0, 0, width, height)
+    this.renderer.setScissorTest(true)
 
     this.sceneManager.renderBackground()
     this.renderer.render(
@@ -330,15 +243,10 @@ class Load3d {
     this.STATUS_MOUSE_ON_SCENE = onScene
   }
 
-  updateStatusMouseOnViewer(onViewer: boolean): void {
-    this.STATUS_MOUSE_ON_VIEWER = onViewer
-  }
-
   isActive(): boolean {
     return (
       this.STATUS_MOUSE_ON_NODE ||
       this.STATUS_MOUSE_ON_SCENE ||
-      this.STATUS_MOUSE_ON_VIEWER ||
       this.isRecording() ||
       !this.INITIAL_RENDER_DONE
     )
@@ -400,34 +308,6 @@ class Load3d {
       this.sceneManager.backgroundTexture
     )
 
-    if (
-      this.isViewerMode &&
-      this.sceneManager.backgroundTexture &&
-      this.sceneManager.backgroundMesh
-    ) {
-      const containerWidth = this.renderer.domElement.clientWidth
-      const containerHeight = this.renderer.domElement.clientHeight
-      const containerAspectRatio = containerWidth / containerHeight
-
-      let renderWidth: number
-      let renderHeight: number
-
-      if (containerAspectRatio > this.targetAspectRatio) {
-        renderHeight = containerHeight
-        renderWidth = renderHeight * this.targetAspectRatio
-      } else {
-        renderWidth = containerWidth
-        renderHeight = renderWidth / this.targetAspectRatio
-      }
-
-      this.sceneManager.updateBackgroundSize(
-        this.sceneManager.backgroundTexture,
-        this.sceneManager.backgroundMesh,
-        renderWidth,
-        renderHeight
-      )
-    }
-
     this.forceRender()
   }
 
@@ -460,10 +340,6 @@ class Load3d {
     return this.cameraManager.getCurrentCameraType()
   }
 
-  getCurrentModel(): THREE.Object3D | null {
-    return this.modelManager.currentModel
-  }
-
   setCameraState(state: CameraState): void {
     this.cameraManager.setCameraState(state)
 
@@ -521,9 +397,6 @@ class Load3d {
   }
 
   setTargetSize(width: number, height: number): void {
-    this.targetWidth = width
-    this.targetHeight = height
-    this.targetAspectRatio = width / height
     this.previewManager.setTargetSize(width, height)
     this.forceRender()
   }
@@ -549,30 +422,13 @@ class Load3d {
       return
     }
 
-    const containerWidth = parentElement.clientWidth
-    const containerHeight = parentElement.clientHeight
+    const width = parentElement.clientWidth
+    const height = parentElement.clientHeight
 
-    if (this.isViewerMode) {
-      const containerAspectRatio = containerWidth / containerHeight
-      let renderWidth: number
-      let renderHeight: number
+    this.cameraManager.handleResize(width, height)
+    this.sceneManager.handleResize(width, height)
 
-      if (containerAspectRatio > this.targetAspectRatio) {
-        renderHeight = containerHeight
-        renderWidth = renderHeight * this.targetAspectRatio
-      } else {
-        renderWidth = containerWidth
-        renderHeight = renderWidth / this.targetAspectRatio
-      }
-
-      this.cameraManager.handleResize(renderWidth, renderHeight)
-      this.sceneManager.handleResize(renderWidth, renderHeight)
-    } else {
-      this.cameraManager.handleResize(containerWidth, containerHeight)
-      this.sceneManager.handleResize(containerWidth, containerHeight)
-    }
-
-    this.renderer.setSize(containerWidth, containerHeight)
+    this.renderer.setSize(width, height)
 
     this.previewManager.handleResize()
     this.forceRender()

src/extensions/core/load3d/Load3dAnimation.ts

@@ -27,6 +27,10 @@ class Load3dAnimation extends Load3d {
     this.overrideAnimationLoop()
   }
 
+  private getCurrentModel(): THREE.Object3D | null {
+    return this.modelManager.currentModel
+  }
+
   private overrideAnimationLoop(): void {
     if (this.animationFrameId !== null) {
       cancelAnimationFrame(this.animationFrameId)

src/extensions/core/load3d/ModelManager.ts

@@ -18,7 +18,7 @@ import {
   UpDirection
 } from './interfaces'
 
-export class SceneModelManager implements ModelManagerInterface {
+export class ModelManager implements ModelManagerInterface {
   currentModel: THREE.Object3D | null = null
   originalModel:
     | THREE.Object3D
@@ -663,12 +663,6 @@ export class SceneModelManager implements ModelManagerInterface {
     this.originalMaterials = new WeakMap()
   }
 
-  addModelToScene(model: THREE.Object3D): void {
-    this.currentModel = model
-
-    this.scene.add(this.currentModel)
-  }
-
   async setupModel(model: THREE.Object3D): Promise<void> {
     this.currentModel = model
 

src/extensions/core/load3d/conditional-lines/OutsideEdgesGeometry.js

@@ -0,0 +1,48 @@
+/*
+Taken from: https://github.com/gkjohnson/threejs-sandbox/tree/master/conditional-lines
+under MIT license
+ */
+import { BufferAttribute, BufferGeometry, Vector3 } from 'three'
+
+const vec = new Vector3()
+export class OutsideEdgesGeometry extends BufferGeometry {
+  constructor(geometry) {
+    super()
+
+    const edgeInfo = {}
+    const index = geometry.index
+    const position = geometry.attributes.position
+    for (let i = 0, l = index.count; i < l; i += 3) {
+      const indices = [index.getX(i + 0), index.getX(i + 1), index.getX(i + 2)]
+
+      for (let j = 0; j < 3; j++) {
+        const index0 = indices[j]
+        const index1 = indices[(j + 1) % 3]
+
+        const hash = `${index0}_${index1}`
+        const reverseHash = `${index1}_${index0}`
+        if (reverseHash in edgeInfo) {
+          delete edgeInfo[reverseHash]
+        } else {
+          edgeInfo[hash] = [index0, index1]
+        }
+      }
+    }
+
+    const edgePositions = []
+    for (const key in edgeInfo) {
+      const [i0, i1] = edgeInfo[key]
+
+      vec.fromBufferAttribute(position, i0)
+      edgePositions.push(vec.x, vec.y, vec.z)
+
+      vec.fromBufferAttribute(position, i1)
+      edgePositions.push(vec.x, vec.y, vec.z)
+    }
+
+    this.setAttribute(
+      'position',
+      new BufferAttribute(new Float32Array(edgePositions), 3, false)
+    )
+  }
+}

src/extensions/core/load3d/interfaces.ts

@@ -37,8 +37,6 @@ export interface EventCallback {
 export interface Load3DOptions {
   node?: LGraphNode
   inputSpec?: CustomInputSpec
-  disablePreview?: boolean
-  isViewerMode?: boolean
 }
 
 export interface CaptureResult {
@@ -161,7 +159,6 @@ export interface ModelManagerInterface {
   clearModel(): void
   reset(): void
   setupModel(model: THREE.Object3D): Promise<void>
-  addModelToScene(model: THREE.Object3D): void
   setOriginalModel(model: THREE.Object3D | THREE.BufferGeometry | GLTF): void
   setUpDirection(direction: UpDirection): void
   materialMode: MaterialMode

src/extensions/core/maskeditor.ts

@@ -1,5 +1,5 @@
-import { debounce } from 'es-toolkit/compat'
-import _ from 'es-toolkit/compat'
+import { debounce } from 'lodash'
+import _ from 'lodash'
 
 import { t } from '@/i18n'