fix: stabilize splitter auto-save and add visible resize handles

- Use splitterRefreshKey as auto-save-id so layout persists across
  page refreshes (tab-dependent key caused mismatches on reload)
- Include sidebarLocation in LinearView auto-save-id to prevent
  layout reversal when sidebar switches sides
- Add w-1 to all SplitterResizeHandle elements for visible/grabbable
  drag handles
- Reduce CENTER_PANEL_SIZE from 80 to 60 so 3-panel layouts sum to
  100% without normalization

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

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Update electron types

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

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -27,7 +27,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -82,7 +82,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.github/workflows/pr-perf-report.yaml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version-file: '.nvmrc'
 
       - name: Download PR metadata
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
 
       - name: Read desktop-ui version
         id: get_version

.github/workflows/publish-desktop-ui.yaml

@@ -91,7 +91,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-biweekly-comfyui.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: 'frontend/.nvmrc'
 
       - name: Install dependencies
         working-directory: frontend

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

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
 
       - name: Check version bump type
         id: check_version

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

@@ -26,7 +26,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-npm-types.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-pypi-dev.yaml

@@ -22,7 +22,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-version-bump.yaml

@@ -149,7 +149,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
 
       - name: Bump version
         id: bump-version

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

@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

.github/workflows/weekly-docs-check.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.gitignore

@@ -26,7 +26,6 @@ dist-ssr
 .claude/*.local.json
 .claude/*.local.md
 .claude/*.local.txt
-.claude/worktrees
 CLAUDE.local.md
 
 # Editor directories and files

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v24) and pnpm
+  - Node.js (see `.nvmrc`, currently v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

browser_tests/README.md

@@ -27,7 +27,8 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
+Ensure you have the Node.js version from `.nvmrc` installed (currently v24).
+Then, set up the Chromium test driver:
 
 ```bash
 pnpm exec playwright install chromium --with-deps

browser_tests/assets/nodes/load_image_with_ksampler.json

@@ -1,47 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        { "name": "IMAGE", "type": "IMAGE", "links": null },
-        { "name": "MASK", "type": "MASK", "links": null }
-      ],
-      "properties": { "Node name for S&R": "LoadImage" },
-      "widgets_values": ["example.png", "image"]
-    },
-    {
-      "id": 2,
-      "type": "KSampler",
-      "pos": [500, 50],
-      "size": [315, 262],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": null }],
-      "properties": { "Node name for S&R": "KSampler" },
-      "widgets_values": [0, "randomize", 20, 8, "euler", "normal", 1]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": { "offset": [0, 0], "scale": 1 }
-  },
-  "version": 0.4
-}

browser_tests/tests/imagePastePriority.spec.ts

@@ -1,58 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Image paste priority over stale node metadata',
-  { tag: ['@node'] },
-  () => {
-    test('Should not paste copied node when a LoadImage node is selected and clipboard has stale node metadata', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
-
-      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBe(2)
-
-      // Copy the KSampler node (puts data-metadata in clipboard)
-      const ksamplerNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      await ksamplerNodes[0].copy()
-
-      // Select the LoadImage node
-      const loadImageNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-      await loadImageNodes[0].click('title')
-
-      // Simulate pasting when clipboard has stale node metadata (text/html
-      // with data-metadata) but no image file items. This replicates the bug
-      // scenario: user copied a node, then copied a web image (which replaces
-      // clipboard files but may leave stale text/html with node metadata).
-      await comfyPage.page.evaluate(() => {
-        const nodeData = { nodes: [{ type: 'KSampler', id: 99 }] }
-        const base64 = btoa(JSON.stringify(nodeData))
-        const html =
-          '<meta charset="utf-8"><div><span data-metadata="' +
-          base64 +
-          '"></span></div><span style="white-space:pre-wrap;">Text</span>'
-
-        const dataTransfer = new DataTransfer()
-        dataTransfer.setData('text/html', html)
-
-        const event = new ClipboardEvent('paste', {
-          clipboardData: dataTransfer,
-          bubbles: true,
-          cancelable: true
-        })
-        document.dispatchEvent(event)
-      })
-
-      await comfyPage.nextFrame()
-
-      // Node count should remain the same — stale node metadata should NOT
-      // be deserialized when a media node is selected.
-      const finalCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(finalCount).toBe(initialCount)
-    })
-  }
-)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.17",
+  "version": "1.42.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -195,6 +195,9 @@
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "catalog:"
   },
+  "engines": {
+    "node": "24.x"
+  },
   "pnpm": {
     "overrides": {
       "vite": "catalog:"

pnpm-lock.yaml

@@ -277,8 +277,8 @@ catalogs:
       specifier: ^4.2.5
       version: 4.2.5
     reka-ui:
-      specifier: ^2.5.0
-      version: 2.5.0
+      specifier: ^2.9.0
+      version: 2.9.0
     rollup-plugin-visualizer:
       specifier: ^6.0.4
       version: 6.0.4
@@ -529,7 +529,7 @@ importers:
         version: 4.2.5(vue@3.5.13(typescript@5.9.3))
       reka-ui:
         specifier: 'catalog:'
-        version: 2.5.0(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3))
+        version: 2.9.0(vue@3.5.13(typescript@5.9.3))
       semver:
         specifier: ^7.7.2
         version: 7.7.4
@@ -2451,21 +2451,25 @@ packages:
     resolution: {integrity: sha512-D+tPXB0tkSuDPsuXvyQIsF3f3PBWfAwIe9FkBWtVoDVYqE+jbz+tVGsjQMNWGafLE4sC8ZQdjhsxyT8I53Anbw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@nx/nx-linux-arm64-musl@22.5.2':
     resolution: {integrity: sha512-UbO527qqa8KLBi13uXto5SmxcZv1Smer7sPexJonshDlmrJsyvx5m8nm6tcSv04W5yQEL90vPlTux8dNvEDWrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@nx/nx-linux-x64-gnu@22.5.2':
     resolution: {integrity: sha512-wR6596Vr/Z+blUAmjLHG2TCQMs4O1oi9JXK1J/PoPeO9UqdHwStCJBAd61zDFSUYJe0x+dkeRQu96fE5BW8Kcg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@nx/nx-linux-x64-musl@22.5.2':
     resolution: {integrity: sha512-MBXOw4AH4FWl4orwVykj/e75awTNDePogrl3pXNX9NcQLdj6JzS4e2jaALQeRBQLxQzeFvFQV/W4PBzoPV6/NA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@nx/nx-win32-arm64-msvc@22.5.2':
     resolution: {integrity: sha512-SaWSZkRH5uV8vP2lj6RRv+kw2IzaIDXkutReOXpooshIWZl9KjrQELNTCZTYyhLDsMlcyhSvLFlTiA4NkZ8udw==}
@@ -2631,41 +2635,49 @@ packages:
     resolution: {integrity: sha512-SVjjjtMW66Mza76PBGJLqB0KKyFTBnxmtDXLJPbL6ZPGSctcXVmujz7/WAc0rb9m2oV0cHQTtVjnq6orQnI/jg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-resolver/binding-linux-arm64-musl@11.15.0':
     resolution: {integrity: sha512-JDv2/AycPF2qgzEiDeMJCcSzKNDm3KxNg0KKWipoKEMDFqfM7LxNwwSVyAOGmrYlE4l3dg290hOMsr9xG7jv9g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-resolver/binding-linux-ppc64-gnu@11.15.0':
     resolution: {integrity: sha512-zbu9FhvBLW4KJxo7ElFvZWbSt4vP685Qc/Gyk/Ns3g2gR9qh2qWXouH8PWySy+Ko/qJ42+HJCLg+ZNcxikERfg==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-resolver/binding-linux-riscv64-gnu@11.15.0':
     resolution: {integrity: sha512-Kfleehe6B09C2qCnyIU01xLFqFXCHI4ylzkicfX/89j+gNHh9xyNdpEvit88Kq6i5tTGdavVnM6DQfOE2qNtlg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-resolver/binding-linux-riscv64-musl@11.15.0':
     resolution: {integrity: sha512-J7LPiEt27Tpm8P+qURDwNc8q45+n+mWgyys4/V6r5A8v5gDentHRGUx3iVk5NxdKhgoGulrzQocPTZVosq25Eg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-resolver/binding-linux-s390x-gnu@11.15.0':
     resolution: {integrity: sha512-+8/d2tAScPjVJNyqa7GPGnqleTB/XW9dZJQ2D/oIM3wpH3TG+DaFEXBbk4QFJ9K9AUGBhvQvWU2mQyhK/yYn3Q==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-gnu@11.15.0':
     resolution: {integrity: sha512-xtvSzH7Nr5MCZI2FKImmOdTl9kzuQ51RPyLh451tvD2qnkg3BaqI9Ox78bTk57YJhlXPuxWSOL5aZhKAc9J6qg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-musl@11.15.0':
     resolution: {integrity: sha512-14YL1zuXj06+/tqsuUZuzL0T425WA/I4nSVN1kBXeC5WHxem6lQ+2HGvG+crjeJEqHgZUT62YIgj88W+8E7eyg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-resolver/binding-openharmony-arm64@11.15.0':
     resolution: {integrity: sha512-/7Qli+1Wk93coxnrQaU8ySlICYN8HsgyIrzqjgIkQEpI//9eUeaeIHZptNl2fMvBGeXa7k2QgLbRNaBRgpnvMw==}
@@ -2739,48 +2751,56 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-arm64-musl@0.34.0':
     resolution: {integrity: sha512-H+F8+71gHQoGTFPPJ6z4dD0Fzfzi0UP8Zx94h5kUmIFThLvMq5K1Y/bUUubiXwwHfwb5C3MPjUpYijiy0rj51Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxfmt/binding-linux-ppc64-gnu@0.34.0':
     resolution: {integrity: sha512-dIGnzTNhCXqQD5pzBwduLg8pClm+t8R53qaE9i5h8iua1iaFAJyLffh4847CNZSlASb7gn1Ofuv7KoG/EpoGZg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-gnu@0.34.0':
     resolution: {integrity: sha512-FGQ2GTTooilDte/ogwWwkHuuL3lGtcE3uKM2EcC7kOXNWdUfMY6Jx3JCodNVVbFoybv4A+HuCj8WJji2uu1Ceg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-musl@0.34.0':
     resolution: {integrity: sha512-2dGbGneJ7ptOIVKMwEIHdCkdZEomh74X3ggo4hCzEXL/rl9HwfsZDR15MkqfQqAs6nVXMvtGIOMxjDYa5lwKaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@oxfmt/binding-linux-s390x-gnu@0.34.0':
     resolution: {integrity: sha512-cCtGgmrTrxq3OeSG0UAO+w6yLZTMeOF4XM9SAkNrRUxYhRQELSDQ/iNPCLyHhYNi38uHJQbS5RQweLUDpI4ajA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-gnu@0.34.0':
     resolution: {integrity: sha512-7AvMzmeX+k7GdgitXp99GQoIV/QZIpAS7rwxQvC/T541yWC45nwvk4mpnU8N+V6dE5SPEObnqfhCjO80s7qIsg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-musl@0.34.0':
     resolution: {integrity: sha512-uNiglhcmivJo1oDMh3hoN/Z0WsbEXOpRXZdQ3W/IkOpyV8WF308jFjSC1ZxajdcNRXWej0zgge9QXba58Owt+g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxfmt/binding-openharmony-arm64@0.34.0':
     resolution: {integrity: sha512-5eFsTjCyji25j6zznzlMc+wQAZJoL9oWy576xhqd2efv+N4g1swIzuSDcb1dz4gpcVC6veWe9pAwD7HnrGjLwg==}
@@ -2883,48 +2903,56 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-arm64-musl@1.49.0':
     resolution: {integrity: sha512-xeqkMOARgGBlEg9BQuPDf6ZW711X6BT5qjDyeM5XNowCJeTSdmMhpePJjTEiVbbr3t21sIlK8RE6X5bc04nWyQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-linux-ppc64-gnu@1.49.0':
     resolution: {integrity: sha512-uvcqRO6PnlJGbL7TeePhTK5+7/JXbxGbN+C6FVmfICDeeRomgQqrfVjf0lUrVpUU8ii8TSkIbNdft3M+oNlOsQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-gnu@1.49.0':
     resolution: {integrity: sha512-Dw1HkdXAwHNH+ZDserHP2RzXQmhHtpsYYI0hf8fuGAVCIVwvS6w1+InLxpPMY25P8ASRNiFN3hADtoh6lI+4lg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-musl@1.49.0':
     resolution: {integrity: sha512-EPlMYaA05tJ9km/0dI9K57iuMq3Tw+nHst7TNIegAJZrBPtsOtYaMFZEaWj02HA8FI5QvSnRHMt+CI+RIhXJBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-linux-s390x-gnu@1.49.0':
     resolution: {integrity: sha512-yZiQL9qEwse34aMbnMb5VqiAWfDY+fLFuoJbHOuzB1OaJZbN1MRF9Nk+W89PIpGr5DNPDipwjZb8+Q7wOywoUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-x64-gnu@1.49.0':
     resolution: {integrity: sha512-CcCDwMMXSchNkhdgvhVn3DLZ4EnBXAD8o8+gRzahg+IdSt/72y19xBgShJgadIRF0TsRcV/MhDUMwL5N/W54aQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxlint/binding-linux-x64-musl@1.49.0':
     resolution: {integrity: sha512-u3HfKV8BV6t6UCCbN0RRiyqcymhrnpunVmLFI8sEa5S/EBu+p/0bJ3D7LZ2KT6PsBbrB71SWq4DeFrskOVgIZg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxlint/binding-openharmony-arm64@1.49.0':
     resolution: {integrity: sha512-dRDpH9fw+oeUMpM4br0taYCFpW6jQtOuEIec89rOgDA1YhqwmeRcx0XYeCv7U48p57qJ1XZHeMGM9LdItIjfzA==}
@@ -3093,24 +3121,28 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-Z03/wrqau9Bicfgb3Dbs6SYTHliELk2PM2LpG2nFd+cGupTMF5kanLEcj2vuuJLLhptNyS61rtk7SOZ+lPsTUA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-iSXXZsQp08CSilff/DCTFZHSVEpEwdicV3W8idHyrByrcsRDVh9sGC3sev6d8BygSGj3vt8GvUKBPCoyMA4tgQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-qaj+MFudtdCv9xZo9znFvkgoajLdc+vwf0Kz5N44g+LU5XMe+IsACgn3UG7uTRlCCvhMAGXm1XlpEA5bZBrOcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-U662UnMETyjT65gFmG9ma+XziENrs7BBnENi/27swZPYagubfHRirXHG2oMl+pEax2WvO7Kb9gHZmMakpYqBHQ==}
@@ -3188,56 +3220,67 @@ packages:
     resolution: {integrity: sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.53.5':
     resolution: {integrity: sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.53.5':
     resolution: {integrity: sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.53.5':
     resolution: {integrity: sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.53.5':
     resolution: {integrity: sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.53.5':
     resolution: {integrity: sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.53.5':
     resolution: {integrity: sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.53.5':
     resolution: {integrity: sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.53.5':
     resolution: {integrity: sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.53.5':
     resolution: {integrity: sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.53.5':
     resolution: {integrity: sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.53.5':
     resolution: {integrity: sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==}
@@ -3513,24 +3556,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.0':
     resolution: {integrity: sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.0':
     resolution: {integrity: sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.0':
     resolution: {integrity: sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.0':
     resolution: {integrity: sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==}
@@ -4006,41 +4053,49 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -4255,9 +4310,6 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  '@vueuse/core@12.8.2':
-    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
-
   '@vueuse/core@14.2.0':
     resolution: {integrity: sha512-tpjzVl7KCQNVd/qcaCE9XbejL38V6KJAEq/tVXj7mDPtl6JtzmUdnXelSS+ULRkkrDgzYVK7EerQJvd2jR794Q==}
     peerDependencies:
@@ -4305,15 +4357,9 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/metadata@12.8.2':
-    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
-
   '@vueuse/metadata@14.2.0':
     resolution: {integrity: sha512-i3axTGjU8b13FtyR4Keeama+43iD+BwX9C2TmzBVKqjSHArF03hjkp2SBZ1m72Jk2UtrX0aYCugBq2R1fhkuAQ==}
 
-  '@vueuse/shared@12.8.2':
-    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
-
   '@vueuse/shared@14.2.0':
     resolution: {integrity: sha512-Z0bmluZTlAXgUcJ4uAFaML16JcD8V0QG00Db3quR642I99JXIDRa2MI2LGxiLVhcBjVnL1jOzIvT5TT2lqJlkA==}
     peerDependencies:
@@ -6416,24 +6462,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -7452,10 +7502,10 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
-  reka-ui@2.5.0:
-    resolution: {integrity: sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==}
+  reka-ui@2.9.0:
+    resolution: {integrity: sha512-5dpp80u109iLTbRBu+jhAk8R/877/JN20gYGjb3GsuAgS7E/5QTX5ZxuzWtZAVbChBDYDpXc8pkaQAFpa6s+4w==}
     peerDependencies:
-      vue: '>= 3.2.0'
+      vue: '>= 3.4.0'
 
   relateurl@0.2.7:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
@@ -12438,15 +12488,6 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.2.12
 
-  '@vueuse/core@12.8.2(typescript@5.9.3)':
-    dependencies:
-      '@types/web-bluetooth': 0.0.21
-      '@vueuse/metadata': 12.8.2
-      '@vueuse/shared': 12.8.2(typescript@5.9.3)
-      vue: 3.5.13(typescript@5.9.3)
-    transitivePeerDependencies:
-      - typescript
-
   '@vueuse/core@14.2.0(vue@3.5.13(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
@@ -12463,16 +12504,8 @@ snapshots:
       axios: 1.13.5
       fuse.js: 7.0.0
 
-  '@vueuse/metadata@12.8.2': {}
-
   '@vueuse/metadata@14.2.0': {}
 
-  '@vueuse/shared@12.8.2(typescript@5.9.3)':
-    dependencies:
-      vue: 3.5.13(typescript@5.9.3)
-    transitivePeerDependencies:
-      - typescript
-
   '@vueuse/shared@14.2.0(vue@3.5.13(typescript@5.9.3))':
     dependencies:
       vue: 3.5.13(typescript@5.9.3)
@@ -16246,22 +16279,21 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
-  reka-ui@2.5.0(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3)):
+  reka-ui@2.9.0(vue@3.5.13(typescript@5.9.3)):
     dependencies:
       '@floating-ui/dom': 1.7.4
       '@floating-ui/vue': 1.1.9(vue@3.5.13(typescript@5.9.3))
       '@internationalized/date': 3.9.0
       '@internationalized/number': 3.6.5
       '@tanstack/vue-virtual': 3.13.12(vue@3.5.13(typescript@5.9.3))
-      '@vueuse/core': 12.8.2(typescript@5.9.3)
-      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      '@vueuse/core': 14.2.0(vue@3.5.13(typescript@5.9.3))
+      '@vueuse/shared': 14.2.0(vue@3.5.13(typescript@5.9.3))
       aria-hidden: 1.2.6
       defu: 6.1.4
       ohash: 2.0.11
       vue: 3.5.13(typescript@5.9.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
-      - typescript
 
   relateurl@0.2.7: {}
 

pnpm-workspace.yaml

@@ -93,7 +93,7 @@ catalog:
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
-  reka-ui: ^2.5.0
+  reka-ui: ^2.9.0
   rollup-plugin-visualizer: ^6.0.4
   storybook: ^10.2.10
   stylelint: ^16.26.1

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -15,18 +15,18 @@
         <slot name="side-toolbar" />
       </div>
 
-      <Splitter
+      <SplitterGroup
         :key="splitterRefreshKey"
-        class="pointer-events-none flex-1 overflow-hidden border-none bg-transparent"
-        :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
-        state-storage="local"
-        @resizestart="onResizestart"
+        direction="horizontal"
+        :auto-save-id="splitterRefreshKey"
+        class="pointer-events-none flex-1 overflow-hidden"
       >
         <!-- First panel: sidebar when left, properties when right -->
         <SplitterPanel
           v-if="
             !focusMode && (sidebarLocation === 'left' || showOffsideSplitter)
           "
+          :order="1"
           :class="
             sidebarLocation === 'left'
               ? cn(
@@ -38,7 +38,7 @@
           :min-size="
             sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
           "
-          :size="SIDE_PANEL_SIZE"
+          :default-size="SIDE_PANEL_SIZE"
           :style="firstPanelStyle"
           :role="sidebarLocation === 'left' ? 'complementary' : undefined"
           :aria-label="
@@ -54,41 +54,69 @@
             name="right-side-panel"
           />
         </SplitterPanel>
+        <SplitterResizeHandle
+          v-if="
+            !focusMode && (sidebarLocation === 'left' || showOffsideSplitter)
+          "
+          :class="
+            cn(
+              'splitter-resize-handle pointer-events-auto w-1',
+              sidebarLocation === 'left' && !sidebarPanelVisible && 'hidden'
+            )
+          "
+        />
 
         <!-- Main panel (always present) -->
-        <SplitterPanel :size="CENTER_PANEL_SIZE" class="flex flex-col">
+        <SplitterPanel
+          :order="2"
+          :default-size="CENTER_PANEL_SIZE"
+          class="flex flex-col"
+        >
           <slot name="topmenu" :sidebar-panel-visible />
 
-          <Splitter
-            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent"
-            layout="vertical"
-            :pt:gutter="
-              cn(
-                'rounded-t-lg',
-                !(bottomPanelVisible && !focusMode) && 'hidden'
-              )
-            "
-            state-key="bottom-panel-splitter"
-            state-storage="local"
-            @resizestart="onResizestart"
+          <SplitterGroup
+            direction="vertical"
+            auto-save-id="bottom-panel-splitter"
+            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1"
           >
-            <SplitterPanel class="graph-canvas-panel relative">
+            <SplitterPanel :order="1" class="graph-canvas-panel relative">
               <slot name="graph-canvas-panel" />
             </SplitterPanel>
+            <SplitterResizeHandle
+              :class="
+                cn(
+                  'splitter-resize-handle pointer-events-auto w-1 translate-y-[5px] rounded-t-lg',
+                  !(bottomPanelVisible && !focusMode) && 'hidden'
+                )
+              "
+            />
             <SplitterPanel
               v-show="bottomPanelVisible && !focusMode"
+              :order="2"
               class="bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg"
             >
               <slot name="bottom-panel" />
             </SplitterPanel>
-          </Splitter>
+          </SplitterGroup>
         </SplitterPanel>
 
         <!-- Last panel: properties when left, sidebar when right -->
+        <SplitterResizeHandle
+          v-if="
+            !focusMode && (sidebarLocation === 'right' || showOffsideSplitter)
+          "
+          :class="
+            cn(
+              'splitter-resize-handle pointer-events-auto w-1',
+              sidebarLocation === 'right' && !sidebarPanelVisible && 'hidden'
+            )
+          "
+        />
         <SplitterPanel
           v-if="
             !focusMode && (sidebarLocation === 'right' || showOffsideSplitter)
           "
+          :order="3"
           :class="
             sidebarLocation === 'right'
               ? cn(
@@ -100,7 +128,7 @@
           :min-size="
             sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
           "
-          :size="SIDE_PANEL_SIZE"
+          :default-size="SIDE_PANEL_SIZE"
           :style="lastPanelStyle"
           :role="sidebarLocation === 'right' ? 'complementary' : undefined"
           :aria-label="
@@ -113,7 +141,7 @@
             name="side-bar-panel"
           />
         </SplitterPanel>
-      </Splitter>
+      </SplitterGroup>
     </div>
   </div>
 </template>
@@ -121,9 +149,7 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 import { storeToRefs } from 'pinia'
-import Splitter from 'primevue/splitter'
-import type { SplitterResizeStartEvent } from 'primevue/splitter'
-import SplitterPanel from 'primevue/splitterpanel'
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -149,14 +175,10 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 
-const unifiedWidth = computed(() =>
-  settingStore.get('Comfy.Sidebar.UnifiedWidth')
-)
-
 const { focusMode } = storeToRefs(workspaceStore)
 
 const { isSelectMode, isBuilderMode } = useAppMode()
-const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
+const { activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
 const showOffsideSplitter = computed(
@@ -167,20 +189,6 @@ const sidebarPanelVisible = computed(
   () => activeSidebarTab.value !== null && !isBuilderMode.value
 )
 
-const sidebarStateKey = computed(() => {
-  return unifiedWidth.value
-    ? 'unified-sidebar'
-    : // When no tab is active, use a default key to maintain state
-      (activeSidebarTabId.value ?? 'default-sidebar')
-})
-
-/**
- * Avoid triggering default behaviors during drag-and-drop, such as text selection.
- */
-function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
-  event.preventDefault()
-}
-
 /*
  * Force refresh the splitter when right panel visibility or sidebar location changes
  * to recalculate the width and panel order
@@ -205,23 +213,9 @@ const lastPanelStyle = computed(() => {
 </script>
 
 <style scoped>
-:deep(.p-splitter-gutter) {
-  pointer-events: auto;
-}
-
-:deep(.p-splitter-gutter:hover),
-:deep(.p-splitter-gutter[data-p-gutter-resizing='true']) {
+.splitter-resize-handle[data-state='hover'],
+.splitter-resize-handle[data-state='drag'] {
   transition: background-color 0.2s ease 300ms;
   background-color: var(--p-primary-color);
 }
-
-/* Hide sidebar gutter when sidebar is not visible */
-:deep(.side-bar-panel[style*='display: none'] + .p-splitter-gutter),
-:deep(.p-splitter-gutter + .side-bar-panel[style*='display: none']) {
-  display: none;
-}
-
-.splitter-overlay-bottom :deep(.p-splitter-gutter) {
-  transform: translateY(5px);
-}
 </style>

src/components/TopMenuSection.test.ts

@@ -166,13 +166,22 @@ describe('TopMenuSection', () => {
   })
 
   describe('authentication state', () => {
+    function createLegacyTabBarWrapper() {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      const settingStore = useSettingStore(pinia)
+      vi.mocked(settingStore.get).mockImplementation((key) =>
+        key === 'Comfy.UI.TabBarLayout' ? 'Legacy' : undefined
+      )
+      return createWrapper({ pinia })
+    }
+
     describe('when user is logged in', () => {
       beforeEach(() => {
         mockData.isLoggedIn = true
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createWrapper()
+        const wrapper = createLegacyTabBarWrapper()
         expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
         expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
       })
@@ -186,7 +195,7 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
         })
@@ -194,7 +203,7 @@ describe('TopMenuSection', () => {
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
           expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
         })

src/components/TopMenuSection.vue

@@ -183,7 +183,7 @@ const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()

src/components/builder/AppBuilder.vue

@@ -8,7 +8,6 @@ import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
@@ -28,7 +27,7 @@ import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
-import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
@@ -53,15 +52,18 @@ workflowStore.activeWorkflow?.changeTracker?.reset()
 const arrangeInputs = computed(() =>
   appModeStore.selectedInputs
     .map(([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return node ? { nodeId, widgetName, node, widget } : null
+      const node = resolveNode(nodeId)
+      if (!node) return null
+      const widget = node.widgets?.find((w) => w.name === widgetName)
+      return { nodeId, widgetName, node, widget }
     })
     .filter((item): item is NonNullable<typeof item> => item !== null)
 )
 
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    const node = resolveNode(nodeId)
+    const widget = node?.widgets?.find((w) => w.name === widgetName)
     if (!node || !widget) {
       return {
         nodeId,
@@ -106,7 +108,7 @@ function getHovered(
 
 function getBounding(nodeId: NodeId, widgetName?: string) {
   if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  const node = app.rootGraph.getNodeById(nodeId)
   if (!node) return
 
   const titleOffset =
@@ -119,6 +121,7 @@ function getBounding(nodeId: NodeId, widgetName?: string) {
       left: `${node.pos[0]}px`,
       top: `${node.pos[1] - titleOffset}px`
     }
+  const widget = node.widgets?.find((w) => w.name === widgetName)
   if (!widget) return
 
   const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
@@ -157,16 +160,12 @@ function handleClick(e: MouseEvent) {
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
-  if (!isSelectInputsMode.value || widget.options.canvasOnly) return
+  if (!isSelectInputsMode.value) return
 
-  const storeId = isPromotedWidgetView(widget) ? widget.sourceNodeId : node.id
-  const storeName = isPromotedWidgetView(widget)
-    ? widget.sourceWidgetName
-    : widget.name
   const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => storeId == nodeId && storeName === widgetName
+    ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
   )
-  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
+  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
   else appModeStore.selectedInputs.splice(index, 1)
 }
 

src/components/common/Dialogue.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{ title?: string; to?: string | HTMLElement }>()
-
-const { t } = useI18n()
-</script>
-<template>
-  <DialogRoot v-slot="{ close }">
-    <DialogTrigger as-child>
-      <slot name="button" />
-    </DialogTrigger>
-    <DialogPortal :to>
-      <DialogOverlay
-        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-black/70"
-      />
-      <DialogContent
-        v-bind="$attrs"
-        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
-      >
-        <div
-          v-if="title"
-          class="flex w-full items-center justify-between border-b border-border-subtle px-4"
-        >
-          <DialogTitle class="text-sm">{{ title }}</DialogTitle>
-          <DialogClose as-child>
-            <Button
-              :aria-label="t('g.close')"
-              size="icon"
-              variant="muted-textonly"
-            >
-              <i class="icon-[lucide--x]" />
-            </Button>
-          </DialogClose>
-        </div>
-        <slot :close />
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>

src/components/common/DropdownItem.vue

@@ -54,12 +54,11 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <i class="size-5 shrink-0" :class="item.icon" />
-    <div class="mr-auto truncate" v-text="item.label" />
-    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
+    <i class="size-5" :class="item.icon" />
+    {{ item.label }}
     <div
-      v-else-if="item.new"
-      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-if="item.new"
+      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/DropdownMenu.vue

@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )

src/components/common/ScrubableNumberInput.vue

@@ -33,20 +33,19 @@
         spellcheck="false"
         @blur="handleBlur"
         @keyup.enter="handleBlur"
-        @keydown.up.prevent="updateValueBy(step)"
-        @keydown.down.prevent="updateValueBy(-step)"
-        @keydown.page-up.prevent="updateValueBy(10 * step)"
-        @keydown.page-down.prevent="updateValueBy(-10 * step)"
+        @dragstart.prevent
       />
       <div
-        ref="swipeElement"
         :class="
           cn(
-            'absolute inset-0 z-10 cursor-ew-resize touch-pan-y',
+            'absolute inset-0 z-10 cursor-ew-resize',
             textEdit && 'pointer-events-none hidden'
           )
         "
+        @pointerdown="handlePointerDown"
+        @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
+        @pointercancel="resetDrag"
       />
     </div>
     <slot />
@@ -66,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, usePointerSwipe, whenever } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -74,8 +73,8 @@ import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  min = -Number.MAX_VALUE,
-  max = Number.MAX_VALUE,
+  min,
+  max,
   step = 1,
   disabled = false,
   hideButtons = false,
@@ -97,7 +96,6 @@ const modelValue = defineModel<number>({ default: 0 })
 
 const container = useTemplateRef<HTMLDivElement>('container')
 const inputField = useTemplateRef<HTMLInputElement>('inputField')
-const swipeElement = useTemplateRef('swipeElement')
 const textEdit = ref(false)
 
 onClickOutside(container, () => {
@@ -105,11 +103,21 @@ onClickOutside(container, () => {
 })
 
 function clamp(value: number): number {
-  return Math.min(max, Math.max(min, value))
+  const lo = min ?? -Infinity
+  const hi = max ?? Infinity
+  return Math.min(hi, Math.max(lo, value))
 }
 
-const canDecrement = computed(() => modelValue.value > min && !disabled)
-const canIncrement = computed(() => modelValue.value < max && !disabled)
+const canDecrement = computed(
+  () => modelValue.value > (min ?? -Infinity) && !disabled
+)
+const canIncrement = computed(
+  () => modelValue.value < (max ?? Infinity) && !disabled
+)
+
+const dragging = ref(false)
+const dragDelta = ref(0)
+const hasDragged = ref(false)
 
 function handleBlur(e: Event) {
   const target = e.target as HTMLInputElement
@@ -127,27 +135,41 @@ function handleBlur(e: Event) {
   textEdit.value = false
 }
 
-let dragDelta = 0
-function handlePointerUp() {
-  if (isSwiping.value) return
-
-  textEdit.value = true
-  inputField.value?.focus()
-  inputField.value?.select()
+function handlePointerDown(e: PointerEvent) {
+  if (e.button !== 0) return
+  if (disabled) return
+  const target = e.target as HTMLElement
+  target.setPointerCapture(e.pointerId)
+  dragging.value = true
+  dragDelta.value = 0
+  hasDragged.value = false
 }
 
-const { distanceX, isSwiping } = usePointerSwipe(swipeElement, {
-  onSwipeEnd: () => (dragDelta = 0)
-})
+function handlePointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  dragDelta.value += e.movementX
+  const steps = (dragDelta.value / 10) | 0
+  if (steps === 0) return
+  hasDragged.value = true
+  const unclipped = modelValue.value + steps * step
+  dragDelta.value %= 10
+  modelValue.value = clamp(unclipped)
+}
 
-whenever(distanceX, () => {
-  if (disabled) return
-  const delta = ((distanceX.value - dragDelta) / 10) | 0
-  dragDelta += delta * 10
-  modelValue.value = clamp(modelValue.value - delta * step)
-})
+function handlePointerUp() {
+  if (!dragging.value) return
 
-function updateValueBy(delta: number) {
-  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
+  if (!hasDragged.value) {
+    textEdit.value = true
+    inputField.value?.focus()
+    inputField.value?.select()
+  }
+
+  resetDrag()
+}
+
+function resetDrag() {
+  dragging.value = false
+  dragDelta.value = 0
 }
 </script>

src/components/common/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <Avatar
-    class="bg-interface-panel-selected-surface"
+    class="aspect-square bg-interface-panel-selected-surface"
     :image="photoUrl ?? undefined"
     :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
     :pt:icon:class="{ 'size-4': !hasAvatar }"

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -178,7 +178,7 @@
             v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
-            size="tall"
+            size="compact"
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
@@ -318,20 +318,6 @@
                       </Button>
                     </div>
                   </div>
-                  <div class="flex">
-                    <span
-                      class="text-neutral flex items-center gap-1.5 text-xs font-bold"
-                    >
-                      <template v-if="isAppTemplate(template)">
-                        <i class="icon-[lucide--panels-top-left]" />
-                        {{ $t('builderToolbar.app', 'App') }}
-                      </template>
-                      <template v-else>
-                        <i class="icon-[lucide--workflow]" />
-                        {{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
-                      </template>
-                    </span>
-                  </div>
                 </div>
               </CardBottom>
             </template>
@@ -497,8 +483,6 @@ const {
 const getEffectiveSourceModule = (template: TemplateInfo) =>
   template.sourceModule || 'default'
 
-const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
-
 const getBaseThumbnailSrc = (template: TemplateInfo) => {
   const sm = getEffectiveSourceModule(template)
   return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')

src/components/error/ErrorOverlay.vue

@@ -50,9 +50,7 @@
             {{ t('g.dismiss') }}
           </Button>
           <Button variant="secondary" size="lg" @click="seeErrors">
-            {{
-              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
-            }}
+            {{ t('errorOverlay.seeErrors') }}
           </Button>
         </div>
       </div>
@@ -71,8 +69,6 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-defineProps<{ appMode?: boolean }>()
-
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -98,7 +94,6 @@ function dismiss() {
 }
 
 function seeErrors() {
-  canvasStore.linearMode = false
   if (canvasStore.canvas) {
     canvasStore.canvas.deselectAll()
     canvasStore.updateSelectedItems()

src/components/graph/GraphCanvas.vue

@@ -535,7 +535,7 @@ onMounted(async () => {
 
   // Restore saved workflow and workflow tabs state
   await workflowPersistence.initializeWorkflow()
-  await workflowPersistence.restoreWorkflowTabsState()
+  workflowPersistence.restoreWorkflowTabsState()
 
   const sharedWorkflowLoadStatus =
     await workflowPersistence.loadSharedWorkflowFromUrlIfPresent()

src/components/helpcenter/HelpCenterPopups.vue

@@ -5,11 +5,8 @@
       v-if="isHelpCenterVisible"
       class="help-center-popup"
       :class="{
-        'sidebar-left':
-          triggerLocation === 'sidebar' && sidebarLocation === 'left',
-        'sidebar-right':
-          triggerLocation === 'sidebar' && sidebarLocation === 'right',
-        'topbar-right': triggerLocation === 'topbar',
+        'sidebar-left': sidebarLocation === 'left',
+        'sidebar-right': sidebarLocation === 'right',
         'small-sidebar': isSmall
       }"
     >
@@ -63,7 +60,6 @@ const { isSmall = false } = defineProps<{
 
 const {
   isHelpCenterVisible,
-  triggerLocation,
   sidebarLocation,
   closeHelpCenter,
   handleWhatsNewDismissed
@@ -101,25 +97,6 @@ const {
   right: 1rem;
 }
 
-.help-center-popup.topbar-right {
-  top: 2rem;
-  right: 1rem;
-  bottom: auto;
-  animation: slideInDown 0.2s ease-out;
-}
-
-@keyframes slideInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes slideInUp {
   from {
     opacity: 0;

src/components/load3d/Load3dViewerContent.vue

@@ -141,7 +141,7 @@ onMounted(async () => {
   if (isStandaloneMode && props.modelUrl) {
     await viewer.initializeStandaloneViewer(containerRef.value, props.modelUrl)
   } else if (props.node) {
-    const source = useLoad3dService().getLoad3d(props.node)
+    const source = await useLoad3dService().getLoad3dAsync(props.node)
     if (source) {
       await viewer.initializeViewer(containerRef.value, source)
     }

src/components/maskeditor/BrushSettingsPanel.vue

@@ -72,12 +72,12 @@
         />
       </div>
       <SliderControl
-        v-model="brushSize"
+        v-model="brushSizeSliderValue"
         class="flex-1"
         label=""
-        :min="1"
-        :max="250"
-        :step="1"
+        :min="0"
+        :max="1"
+        :step="0.001"
       />
     </div>
 
@@ -182,6 +182,26 @@ const brushSize = computed({
   set: (value: number) => store.setBrushSize(value)
 })
 
+const rawSliderValue = ref<number | null>(null)
+
+const brushSizeSliderValue = computed({
+  get: () => {
+    if (rawSliderValue.value !== null) {
+      const cachedSize = Math.round(Math.pow(250, rawSliderValue.value))
+      if (cachedSize === brushSize.value) {
+        return rawSliderValue.value
+      }
+    }
+
+    return Math.log(brushSize.value) / Math.log(250)
+  },
+  set: (value: number) => {
+    rawSliderValue.value = value
+    const size = Math.round(Math.pow(250, value))
+    store.setBrushSize(size)
+  }
+})
+
 const brushOpacity = computed({
   get: () => store.brushSettings.opacity,
   set: (value: number) => store.setBrushOpacity(value)

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,5 +1,5 @@
-import { computed, reactive, ref, toValue, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
@@ -227,7 +227,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 }
 
 export function useErrorGroups(
-  searchQuery: MaybeRefOrGetter<string>,
+  searchQuery: Ref<string>,
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
@@ -584,7 +584,7 @@ export function useErrorGroups(
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
-    const query = toValue(searchQuery).trim()
+    const query = searchQuery.value.trim()
     return searchErrorGroups(tabErrorGroups.value, query)
   })
 

src/components/sidebar/ComfyMenuButton.vue

@@ -11,12 +11,13 @@
     }"
     @click="onLogoMenuClick($event)"
   >
-    <div class="flex size-8 items-center justify-center rounded-lg bg-black">
+    <div class="flex items-center gap-0.5">
       <ComfyLogo
         alt="ComfyUI Logo"
-        class="comfyui-logo h-[18px] w-[18px] text-white"
+        class="comfyui-logo h-[18px] w-[18px]"
         mode="fill"
       />
+      <i class="icon-[lucide--chevron-down] size-3 text-muted-foreground" />
     </div>
   </div>
 

src/components/sidebar/SideToolbar.vue

@@ -41,7 +41,7 @@
           v-if="userStore.isMultiUserServer"
           :is-small="isSmall"
         />
-        <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
+        <SidebarHelpCenterIcon :is-small="isSmall" />
         <SidebarBottomPanelToggleButton v-if="!isCloud" :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
@@ -95,9 +95,6 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
-const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
-)
 const isConnected = computed(
   () =>
     selectedTab.value ||

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -7,7 +7,7 @@
     :icon-badge="shouldShowRedDot ? '•' : ''"
     badge-class="-top-1 -right-1 min-w-2 w-2 h-2 p-0 rounded-full text-[0px] bg-[#ff3b30]"
     :is-small="isSmall"
-    @click="toggleHelpCenter"
+    @click="toggleHelpCenter()"
   />
 </template>
 

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -33,7 +33,7 @@
             tabindex="0"
             :aria-label="
               t('assetBrowser.ariaLabel.assetCard', {
-                name: item.asset.name,
+                name: getAssetDisplayName(item.asset),
                 type: getAssetMediaType(item.asset)
               })
             "
@@ -44,7 +44,7 @@
               )
             "
             :preview-url="getAssetPreviewUrl(item.asset)"
-            :preview-alt="item.asset.name"
+            :preview-alt="getAssetDisplayName(item.asset)"
             :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
             :is-video-preview="isVideoAsset(item.asset)"
             :primary-text="getAssetPrimaryText(item.asset)"
@@ -133,8 +133,12 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
+function getAssetDisplayName(asset: AssetItem): string {
+  return asset.display_name || asset.name
+}
+
 function getAssetPrimaryText(asset: AssetItem): string {
-  return truncateFilename(asset.name)
+  return truncateFilename(getAssetDisplayName(asset))
 }
 
 function getAssetMediaType(asset: AssetItem) {

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -569,7 +569,7 @@ const handleZoomClick = (asset: AssetItem) => {
     const dialogStore = useDialogStore()
     dialogStore.showDialog({
       key: 'asset-3d-viewer',
-      title: asset.name,
+      title: asset.display_name || asset.name,
       component: Load3dViewerContent,
       props: {
         modelUrl: asset.preview_url || ''

src/components/topbar/CurrentUserButton.vue

@@ -30,7 +30,7 @@
         <UserAvatar
           v-else
           :photo-url="photoURL"
-          :class="compact && 'size-full'"
+          :class="compact && 'h-full w-auto'"
         />
 
         <i v-if="showArrow" class="icon-[lucide--chevron-down] size-4 px-1" />

src/components/topbar/TopMenuHelpButton.vue

@@ -1,21 +0,0 @@
-<template>
-  <Button
-    class="comfy-help-center-btn relative text-base-foreground"
-    variant="textonly"
-    @click="toggleHelpCenter"
-  >
-    <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
-    <i class="ml-0.5 icon-[lucide--circle-help]" />
-    <span
-      v-if="shouldShowRedDot"
-      class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"
-    />
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { useHelpCenter } from '@/composables/useHelpCenter'
-
-const { shouldShowRedDot, toggleHelpCenter } = useHelpCenter('topbar')
-</script>

src/components/topbar/WorkflowTabs.vue

@@ -83,13 +83,18 @@
       v-if="isIntegratedTabBar"
       class="ml-auto flex shrink-0 items-center gap-2 px-2"
     >
-      <TopMenuHelpButton />
-      <CurrentUserButton
-        v-if="isLoggedIn"
-        :show-arrow="false"
-        compact
-        class="grid w-10 shrink-0 p-1"
-      />
+      <Button
+        v-if="isCloud || isNightly"
+        v-tooltip="{ value: $t('actionbar.feedbackTooltip'), showDelay: 300 }"
+        variant="muted-textonly"
+        size="icon"
+        class="shrink-0 text-base-foreground"
+        :aria-label="$t('actionbar.feedback')"
+        @click="openFeedback"
+      >
+        <i class="icon-[lucide--message-square-text]" />
+      </Button>
+      <CurrentUserButton v-if="showCurrentUser" compact class="shrink-0 p-1" />
       <LoginButton v-else-if="isDesktop" class="p-1" />
     </div>
     <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
@@ -102,21 +107,20 @@ import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
 import { computed, nextTick, onUpdated, ref, watch } from 'vue'
 import type { WatchStopHandle } from 'vue'
-
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
-import TopMenuHelpButton from '@/components/topbar/TopMenuHelpButton.vue'
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { buildFeedbackUrl } from '@/platform/support/config'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isDesktop } from '@/platform/distribution/types'
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
@@ -138,8 +142,14 @@ const commandStore = useCommandStore()
 const { isLoggedIn } = useCurrentUser()
 
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
+const showCurrentUser = computed(() => isCloud || isLoggedIn.value)
+
+const feedbackUrl = buildFeedbackUrl()
+function openFeedback() {
+  window.open(feedbackUrl, '_blank', 'noopener,noreferrer')
+}
 
 const containerRef = ref<HTMLElement | null>(null)
 const showOverflowArrows = ref(false)

src/components/ui/ZoomPane.vue

@@ -24,7 +24,7 @@ function handleWheel(e: WheelEvent) {
 
 let dragging = false
 function handleDown(e: PointerEvent) {
-  if (e.button !== 0 && e.button !== 1) return
+  if (e.button !== 0) return
 
   const zoomPaneEl = zoomPane.value
   if (!zoomPaneEl) return

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/composables/useHelpCenter.ts

@@ -5,19 +5,15 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
-import type { HelpCenterTriggerLocation } from '@/stores/helpCenterStore'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
 
-export function useHelpCenter(
-  triggerFrom: HelpCenterTriggerLocation = 'sidebar'
-) {
+export function useHelpCenter() {
   const settingStore = useSettingStore()
   const releaseStore = useReleaseStore()
   const helpCenterStore = useHelpCenterStore()
-  const { isVisible: isHelpCenterVisible, triggerLocation } =
-    storeToRefs(helpCenterStore)
+  const { isVisible: isHelpCenterVisible } = storeToRefs(helpCenterStore)
   const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 
   const conflictDetection = useConflictDetection()
@@ -42,9 +38,9 @@ export function useHelpCenter(
    */
   const toggleHelpCenter = () => {
     useTelemetry()?.trackUiButtonClicked({
-      button_id: `${triggerFrom}_help_center_toggled`
+      button_id: 'sidebar_help_center_toggled'
     })
-    helpCenterStore.toggle(triggerFrom)
+    helpCenterStore.toggle()
   }
 
   const closeHelpCenter = () => {
@@ -90,7 +86,6 @@ export function useHelpCenter(
 
   return {
     isHelpCenterVisible,
-    triggerLocation,
     shouldShowRedDot,
     sidebarLocation,
     toggleHelpCenter,

src/composables/usePaste.test.ts

@@ -595,34 +595,6 @@ describe('usePaste', () => {
       )
     })
   })
-
-  it('should skip node metadata paste when a media node is selected', async () => {
-    const mockNode = createMockLGraphNode({
-      is_selected: true,
-      pasteFile: vi.fn(),
-      pasteFiles: vi.fn()
-    })
-    mockCanvas.current_node = mockNode
-    vi.mocked(isImageNode).mockReturnValue(true)
-
-    usePaste()
-
-    const nodeData = { nodes: [{ type: 'KSampler' }] }
-    const encoded = btoa(JSON.stringify(nodeData))
-    const html = `<div data-metadata="${encoded}"></div>`
-
-    const dataTransfer = new DataTransfer()
-    dataTransfer.setData('text/html', html)
-    dataTransfer.setData('text/plain', 'some text')
-
-    const event = new ClipboardEvent('paste', { clipboardData: dataTransfer })
-    document.dispatchEvent(event)
-
-    await vi.waitFor(() => {
-      expect(mockCanvas._deserializeItems).not.toHaveBeenCalled()
-      expect(mockCanvas.pasteFromClipboard).toHaveBeenCalled()
-    })
-  })
 })
 
 describe('cloneDataTransfer', () => {

src/composables/usePaste.ts

@@ -229,10 +229,7 @@ export const usePaste = () => {
         return
       }
     }
-
-    const isMediaNodeSelected =
-      isImageNodeSelected || isVideoNodeSelected || isAudioNodeSelected
-    if (!isMediaNodeSelected && pasteClipboardItems(data)) return
+    if (pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')

src/composables/useStablePrimeVueSplitterSizer.test.ts

@@ -1,133 +0,0 @@
-import type { SplitterResizeEndEvent } from 'primevue/splitter'
-
-import { nextTick, ref } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
-
-import { useStablePrimeVueSplitterSizer } from './useStablePrimeVueSplitterSizer'
-
-vi.mock('@vueuse/core', async (importOriginal) => {
-  const actual = await importOriginal()
-  return {
-    ...(actual as object),
-    useStorage: <T>(_key: string, defaultValue: T) => ref(defaultValue)
-  }
-})
-
-function createPanel(width: number) {
-  const el = document.createElement('div')
-  Object.defineProperty(el, 'offsetWidth', { value: width })
-  return ref(el)
-}
-
-function resizeEndEvent(): SplitterResizeEndEvent {
-  return { originalEvent: new Event('mouseup'), sizes: [] }
-}
-
-async function flushWatcher() {
-  await nextTick()
-  await nextTick()
-}
-
-describe('useStablePrimeVueSplitterSizer', () => {
-  it('captures pixel widths on resize end and applies on trigger', async () => {
-    const panelRef = createPanel(400)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-capture' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('400px')
-    expect(panelRef.value!.style.flexGrow).toBe('0')
-    expect(panelRef.value!.style.flexShrink).toBe('0')
-  })
-
-  it('does not apply styles when no stored width exists', async () => {
-    const panelRef = createPanel(300)
-    const trigger = ref(0)
-
-    useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-no-stored' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('')
-  })
-
-  it('re-applies stored widths when watch sources change', async () => {
-    const panelRef = createPanel(500)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-reapply' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    panelRef.value!.style.flexBasis = ''
-    panelRef.value!.style.flexGrow = ''
-    panelRef.value!.style.flexShrink = ''
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('500px')
-    expect(panelRef.value!.style.flexGrow).toBe('0')
-    expect(panelRef.value!.style.flexShrink).toBe('0')
-  })
-
-  it('handles multiple panels independently', async () => {
-    const leftRef = createPanel(300)
-    const rightRef = createPanel(250)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [
-        { ref: leftRef, storageKey: 'test-multi-left' },
-        { ref: rightRef, storageKey: 'test-multi-right' }
-      ],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(leftRef.value!.style.flexBasis).toBe('300px')
-    expect(rightRef.value!.style.flexBasis).toBe('250px')
-  })
-
-  it('skips panels with null refs', async () => {
-    const nullRef = ref(null)
-    const validRef = createPanel(200)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [
-        { ref: nullRef, storageKey: 'test-null' },
-        { ref: validRef, storageKey: 'test-valid' }
-      ],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(validRef.value!.style.flexBasis).toBe('200px')
-  })
-})

src/composables/useStablePrimeVueSplitterSizer.ts

@@ -1,64 +0,0 @@
-import type { SplitterResizeEndEvent } from 'primevue/splitter'
-import type { WatchSource } from 'vue'
-
-import { unrefElement, useStorage } from '@vueuse/core'
-import type { MaybeComputedElementRef } from '@vueuse/core'
-import { nextTick, watch } from 'vue'
-
-interface PanelConfig {
-  ref: MaybeComputedElementRef
-  storageKey: string
-}
-
-/**
- * Works around PrimeVue Splitter not properly initializing flexBasis
- * when panels are conditionally rendered. Captures pixel widths on
- * resize end and re-applies them as rigid flex values (flex: 0 0 Xpx)
- * when watched sources change (e.g. tab switch, panel toggle).
- *
- * @param panels - array of panel configs with template ref and storage key
- * @param watchSources - reactive sources that trigger re-application
- */
-export function useStablePrimeVueSplitterSizer(
-  panels: PanelConfig[],
-  watchSources: WatchSource[]
-) {
-  const storedWidths = panels.map((panel) => ({
-    ref: panel.ref,
-    width: useStorage<number | null>(panel.storageKey, null)
-  }))
-
-  function resolveElement(
-    ref: MaybeComputedElementRef
-  ): HTMLElement | undefined {
-    return unrefElement(ref) as HTMLElement | undefined
-  }
-
-  function applyStoredWidths() {
-    for (const { ref, width } of storedWidths) {
-      const el = resolveElement(ref)
-      if (!el || width.value === null) continue
-      el.style.flexBasis = `${width.value}px`
-      el.style.flexGrow = '0'
-      el.style.flexShrink = '0'
-    }
-  }
-
-  function onResizeEnd(_event: SplitterResizeEndEvent) {
-    for (const { ref, width } of storedWidths) {
-      const el = resolveElement(ref)
-      if (el) width.value = el.offsetWidth
-    }
-  }
-
-  watch(
-    watchSources,
-    async () => {
-      await nextTick()
-      applyStoredWidths()
-    },
-    { immediate: true }
-  )
-
-  return { onResizeEnd }
-}

src/constants/splitterConstants.ts

@@ -2,7 +2,7 @@
 export const SIDE_PANEL_SIZE = 20
 
 /** Default panel size (%) for the center/main panel */
-export const CENTER_PANEL_SIZE = 80
+export const CENTER_PANEL_SIZE = 60
 
 /** Minimum panel size (%) for the sidebar */
 export const SIDEBAR_MIN_SIZE = 10

src/extensions/core/cloudBadges.ts

@@ -1,6 +1,7 @@
-import { computed } from 'vue'
-
+import { computed, watch } from 'vue'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { t } from '@/i18n'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useExtensionService } from '@/services/extensionService'
 import type { TopbarBadge } from '@/types/comfy'
 
@@ -17,16 +18,20 @@ const badges = computed<TopbarBadge[]>(() => {
       tooltip: alert.tooltip
     })
   }
-
-  // Always add cloud badge last (furthest right)
-  result.push({
-    icon: 'icon-[lucide--cloud]',
-    text: 'Comfy Cloud'
-  })
-
   return result
 })
 
+const canvasStore = useCanvasStore()
+watch(
+  () => canvasStore.canvas,
+  (canvas) => {
+    if (canvas) {
+      canvas.info_text = t('g.comfyCloud')
+    }
+  },
+  { immediate: true }
+)
+
 useExtensionService().registerExtension({
   name: 'Comfy.Cloud.Badges',
   get topbarBadges() {

src/extensions/core/cloudFeedbackTopbarButton.ts

@@ -1,21 +1,14 @@
 import { t } from '@/i18n'
-import { getDistribution, ZENDESK_FIELDS } from '@/platform/support/config'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { buildFeedbackUrl } from '@/platform/support/config'
 import { useExtensionService } from '@/services/extensionService'
 import type { ActionBarButton } from '@/types/comfy'
 
-const ZENDESK_BASE_URL = 'https://support.comfy.org/hc/en-us/requests/new'
-const ZENDESK_FEEDBACK_FORM_ID = '43066738713236'
-
-const distribution = getDistribution()
-const params = new URLSearchParams({
-  ticket_form_id: ZENDESK_FEEDBACK_FORM_ID,
-  [ZENDESK_FIELDS.DISTRIBUTION]: distribution
-})
-const feedbackUrl = `${ZENDESK_BASE_URL}?${params.toString()}`
+const feedbackUrl = buildFeedbackUrl()
 
 const buttons: ActionBarButton[] = [
   {
-    icon: 'icon-[lucide--message-circle-question-mark]',
+    icon: 'icon-[lucide--message-square-text]',
     label: t('actionbar.feedback'),
     tooltip: t('actionbar.feedbackTooltip'),
     onClick: () => {
@@ -25,6 +18,10 @@ const buttons: ActionBarButton[] = [
 ]
 
 useExtensionService().registerExtension({
-  name: 'Comfy.Cloud.FeedbackButton',
-  actionBarButtons: buttons
+  name: 'Comfy.FeedbackButton',
+  get actionBarButtons() {
+    return useSettingStore().get('Comfy.UI.TabBarLayout') === 'Legacy'
+      ? buttons
+      : []
+  }
 })

src/extensions/core/imageCompare.ts

@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { NodeOutputWith } from '@/schemas/apiSchema'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
@@ -28,6 +29,7 @@ useExtensionService().registerExtension({
 
       const toUrl = (record: Record<string, string>) => {
         const params = new URLSearchParams(record)
+        appendCloudResParam(params, record.filename)
         return api.apiURL(`/view?${params}${rand}`)
       }
 

src/lib/litegraph/src/LGraphCanvas.ts

@@ -559,6 +559,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   clear_background_color: string
   render_only_selected: boolean
   show_info: boolean
+  /** Additional text appended to the canvas info overlay (rendered by {@link renderInfo}). */
+  info_text: string | undefined
   allow_dragcanvas: boolean
   allow_dragnodes: boolean
   allow_interaction: boolean
@@ -5180,8 +5182,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
    * draws some useful stats in the corner of the canvas
    */
   renderInfo(ctx: CanvasRenderingContext2D, x: number, y: number): void {
+    const lineHeight = 13
+    const lineCount = (this.graph ? 5 : 1) + (this.info_text ? 1 : 0)
     x = x || 10
-    y = y || this.canvas.offsetHeight - 80
+    y = y || this.canvas.offsetHeight - (lineCount + 1) * lineHeight
 
     ctx.save()
     ctx.translate(x, y)
@@ -5189,18 +5193,26 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     ctx.font = `10px ${LiteGraph.DEFAULT_FONT}`
     ctx.fillStyle = '#888'
     ctx.textAlign = 'left'
+    let line = 1
     if (this.graph) {
-      ctx.fillText(`T: ${this.graph.globaltime.toFixed(2)}s`, 5, 13 * 1)
-      ctx.fillText(`I: ${this.graph.iteration}`, 5, 13 * 2)
+      ctx.fillText(
+        `T: ${this.graph.globaltime.toFixed(2)}s`,
+        5,
+        lineHeight * line++
+      )
+      ctx.fillText(`I: ${this.graph.iteration}`, 5, lineHeight * line++)
       ctx.fillText(
         `N: ${this.graph._nodes.length} [${this.visible_nodes.length}]`,
         5,
-        13 * 3
+        lineHeight * line++
       )
-      ctx.fillText(`V: ${this.graph._version}`, 5, 13 * 4)
-      ctx.fillText(`FPS:${this.fps.toFixed(2)}`, 5, 13 * 5)
+      ctx.fillText(`V: ${this.graph._version}`, 5, lineHeight * line++)
+      ctx.fillText(`FPS:${this.fps.toFixed(2)}`, 5, lineHeight * line++)
     } else {
-      ctx.fillText('No graph selected', 5, 13 * 1)
+      ctx.fillText('No graph selected', 5, lineHeight * line++)
+    }
+    if (this.info_text) {
+      ctx.fillText(this.info_text, 5, lineHeight * line++)
     }
     ctx.restore()
   }

src/locales/ar/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_PasteFromClipboard": {
     "label": "لصق"
   },
+  "Comfy_Canvas_PasteFromClipboardWithConnect": {
+    "label": "لصق مع الاتصال"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "إعادة تعيين العرض"
   },

src/locales/ar/main.json

@@ -2,7 +2,9 @@
   "actionbar": {
     "dockToTop": "إلصق بالأعلى",
     "feedback": "ملاحظات",
-    "feedbackTooltip": "إرسال ملاحظات"
+    "feedbackTooltip": "إرسال ملاحظات",
+    "share": "مشاركة",
+    "shareTooltip": "مشاركة سير العمل"
   },
   "apiNodesCostBreakdown": {
     "costPerRun": "التكلفة لكل تشغيل",
@@ -321,18 +323,24 @@
     "y": "ص"
   },
   "breadcrumbsMenu": {
+    "app": "التطبيق",
     "clearWorkflow": "مسح سير العمل",
     "deleteBlueprint": "حذف المخطط",
     "deleteWorkflow": "حذف سير العمل",
     "duplicate": "تكرار",
+    "editBuilderMode": "تعديل التطبيق",
     "enterAppMode": "الدخول إلى وضع التطبيق",
     "enterBuilderMode": "دخول وضع بناء التطبيق",
     "enterNewName": "أدخل اسمًا جديدًا",
+    "enterNodeGraph": "دخول رسم العقد",
     "exitAppMode": "الخروج من وضع التطبيق",
+    "graph": "الرسم البياني",
     "missingNodesWarning": "يحتوي سير العمل على عقد غير مدعومة (مظللة باللون الأحمر).",
+    "share": "مشاركة",
     "workflowActions": "إجراءات سير العمل"
   },
   "builderMenu": {
+    "enterAppMode": "الدخول إلى وضع التطبيق",
     "exitAppBuilder": "الخروج من مُنشئ التطبيق"
   },
   "builderToolbar": {
@@ -354,6 +362,7 @@
     "defaultViewTitle": "تعيين العرض الافتراضي لهذا سير العمل",
     "emptyWorkflowPrompt": "هل ترغب في البدء بقالب؟",
     "emptyWorkflowTitle": "لا يحتوي سير العمل هذا على أي عقد",
+    "exitToWorkflow": "الخروج إلى سير العمل",
     "inputs": "المدخلات",
     "inputsDescription": "اختر المدخلات",
     "label": "منشئ التطبيقات",
@@ -507,6 +516,80 @@
     "red": "أحمر",
     "yellow": "أصفر"
   },
+  "comfyHubProfile": {
+    "checkingAccess": "جارٍ التحقق من صلاحية النشر...",
+    "chooseProfilePicture": "اختر صورة الملف الشخصي",
+    "createProfile": "إنشاء الملف الشخصي",
+    "createProfileButton": "إنشاء ملفي الشخصي",
+    "createProfileTitle": "أنشئ ملفك الشخصي على Comfy Hub",
+    "creatingProfile": "جارٍ إنشاء الملف الشخصي...",
+    "descriptionLabel": "وصفك",
+    "descriptionPlaceholder": "أخبر المجتمع عن نفسك...",
+    "introDescription": "انشر سير عملك، وابنِ محفظتك، واكتشفك ملايين المستخدمين",
+    "introSubtitle": "لمشاركة سير عملك على ComfyHub، لنقم أولاً بإنشاء ملفك الشخصي.",
+    "introTitle": "النشر على ComfyHub",
+    "modalTitle": "إنشاء ملفك الشخصي على ComfyHub",
+    "nameLabel": "اسمك",
+    "namePlaceholder": "أدخل اسمك هنا",
+    "profileCreationNav": "إنشاء الملف الشخصي",
+    "startPublishingButton": "ابدأ النشر",
+    "successDescription": "يمكنك الآن رفع سير عملك على صفحة المبدع الخاصة بك",
+    "successProfileLink": "comfy.com/p/{username}",
+    "successProfileUrl": "صفحتك الشخصية متاحة الآن على",
+    "successTitle": "يبدو رائعًا، {'@'}{username}!",
+    "uploadCover": "+ رفع صورة الغلاف",
+    "uploadProfilePicture": "+ رفع صورة الملف الشخصي",
+    "uploadWorkflowButton": "رفع سير عملي",
+    "usernameLabel": "اسم المستخدم (إجباري)",
+    "usernamePlaceholder": "@"
+  },
+  "comfyHubPublish": {
+    "back": "رجوع",
+    "createProfileCta": "إنشاء ملف شخصي",
+    "createProfileToPublish": "أنشئ ملفًا شخصيًا للنشر على ComfyHub",
+    "exampleImage": "صورة نموذجية {index}",
+    "examplesDescription": "أضف حتى {total} صورة نموذجية إضافية",
+    "maxExamples": "يمكنك اختيار حتى {max} أمثلة",
+    "next": "التالي",
+    "publishButton": "النشر على ComfyHub",
+    "selectAThumbnail": "اختر صورة مصغرة",
+    "showLessTags": "عرض أقل...",
+    "showMoreTags": "عرض المزيد...",
+    "stepDescribe": "وصف سير العمل",
+    "stepExamples": "إضافة أمثلة للإخراج",
+    "stepFinish": "إنهاء النشر",
+    "suggestedTags": "وسوم مقترحة",
+    "tags": "الوسوم",
+    "tagsDescription": "اختر الوسوم ليسهل على الآخرين العثور على سير عملك",
+    "tagsPlaceholder": "أدخل وسومًا تناسب سير عملك لمساعدة الآخرين في العثور عليه مثل #nanobanana أو #anime أو #faceswap",
+    "thumbnailImage": "صورة",
+    "thumbnailImageComparison": "مقارنة الصور",
+    "thumbnailPreview": "معاينة الصورة المصغرة",
+    "thumbnailVideo": "فيديو",
+    "title": "النشر على ComfyHub",
+    "uploadAnImage": "انقر للاستعراض أو اسحب صورة",
+    "uploadComparison": "رفع صورة قبل وبعد",
+    "uploadComparisonAfterPrompt": "بعد",
+    "uploadComparisonBeforePrompt": "قبل",
+    "uploadExampleImage": "رفع صورة نموذجية",
+    "uploadPromptClickToBrowse": "انقر للاستعراض أو",
+    "uploadPromptDropImage": "أسقط صورة هنا",
+    "uploadPromptDropVideo": "أسقط فيديو هنا",
+    "uploadThumbnail": "رفع صورة",
+    "uploadThumbnailHint": "يفضل نسبة 1:1، الحد الأقصى 1080p",
+    "uploadVideo": "رفع فيديو",
+    "videoPreview": "معاينة صورة الفيديو المصغرة",
+    "workflowDescription": "وصف سير العمل",
+    "workflowDescriptionPlaceholder": "ما الذي يجعل سير عملك مميزًا ومثيرًا؟ كن محددًا حتى يعرف الآخرون ما يمكن توقعه.",
+    "workflowName": "اسم سير العمل",
+    "workflowNamePlaceholder": "نصيحة: أدخل اسمًا وصفيًا يسهل البحث عنه",
+    "workflowType": "نوع سير العمل",
+    "workflowTypeEditing": "تحرير",
+    "workflowTypeImageGeneration": "توليد الصور",
+    "workflowTypePlaceholder": "اختر النوع",
+    "workflowTypeUpscaling": "تحسين الجودة",
+    "workflowTypeVideoGeneration": "توليد الفيديو"
+  },
   "commands": {
     "clear": "مسح سير العمل",
     "clipspace": "فتح مساحة القص",
@@ -869,6 +952,7 @@
     "collapseAll": "طي الكل",
     "color": "اللون",
     "comfy": "Comfy",
+    "comfyCloud": "Comfy Cloud",
     "comfyOrgLogoAlt": "شعار ComfyOrg",
     "comingSoon": "قريباً",
     "command": "أمر",
@@ -1342,7 +1426,7 @@
       "appBuilder": "منشئ التطبيقات",
       "apps": "التطبيقات",
       "appsEmptyMessage": "سيتم عرض التطبيقات المحفوظة هنا.\nانقر أدناه لبناء تطبيقك الأول.",
-      "enterAppMode": "الدخول إلى وضع التطبيق"
+      "appsEmptyMessageAction": "انقر أدناه لإنشاء أول تطبيق لك."
     },
     "arrange": {
       "atLeastOne": "عقدة واحدة على الأقل",
@@ -1356,14 +1440,18 @@
     },
     "backToWorkflow": "العودة إلى سير العمل",
     "beta": "وضع التطبيق تجريبي - أرسل ملاحظاتك",
+    "buildAnApp": "أنشئ تطبيقًا",
     "builder": {
       "exit": "خروج من البناء",
       "exitConfirmMessage": "لديك تغييرات غير محفوظة ستفقد\nهل تريد الخروج بدون حفظ؟",
       "exitConfirmTitle": "الخروج من بناء التطبيق؟",
+      "inputPlaceholder": "سيتم عرض المدخلات هنا",
       "inputsDesc": "سيتفاعل المستخدمون مع هذه المدخلات ويعدلونها لإنشاء النتائج.",
       "inputsExample": "أمثلة: \"تحميل صورة\"، \"موجه نصي\"، \"خطوات\"",
       "noInputs": "لم تتم إضافة أي مدخلات بعد",
       "noOutputs": "لم تتم إضافة أي عقد إخراج بعد",
+      "outputPlaceholder": "سيتم عرض عقد الإخراج هنا",
+      "outputRequiredPlaceholder": "مطلوب عقدة واحدة على الأقل",
       "outputsDesc": "وصل عقدة إخراج واحدة على الأقل حتى يتمكن المستخدمون من رؤية النتائج بعد التشغيل.",
       "outputsExample": "أمثلة: \"حفظ صورة\" أو \"حفظ فيديو\"",
       "promptAddInputs": "انقر على معلمات العقدة لإضافتها هنا كمدخلات",
@@ -1371,12 +1459,15 @@
       "title": "وضع بناء التطبيق",
       "unknownWidget": "عنصر الواجهة غير مرئي"
     },
+    "cancelThisRun": "إلغاء هذا التشغيل",
+    "deleteAllAssets": "حذف جميع الأصول من هذه الجلسة",
     "downloadAll": "تنزيل الكل",
     "dragAndDropImage": "اسحب وأسقط صورة",
     "emptyWorkflowExplanation": "سير العمل الخاص بك فارغ. تحتاج إلى بعض العقد أولاً لبدء بناء التطبيق.",
     "enterNodeGraph": "دخول مخطط العقد",
     "giveFeedback": "إعطاء ملاحظات",
     "graphMode": "وضع الرسم البياني",
+    "hasCreditCost": "يتطلب أرصدة إضافية",
     "linearMode": "وضع التطبيق",
     "loadTemplate": "تحميل قالب",
     "mobileControls": "تعديل وتشغيل",
@@ -1393,6 +1484,8 @@
       "controls": "تظهر المخرجات في الأسفل، وعناصر التحكم على اليمين. كل شيء آخر يبقى بعيدًا.",
       "getStarted": "انقر على {runButton} للبدء.",
       "message": "عرض مبسط يخفي رسم العقد حتى تتمكن من التركيز على الإنشاء.",
+      "noOutputs": "يحتاج التطبيق إلى {count} على الأقل ليكون قابلاً للاستخدام.",
+      "oneOutput": "مخرج واحد",
       "sharing": "المشاركة سهلة: أنشئ سير العمل الخاص بك، افتح وضع التطبيق، انقر بزر الماوس الأيمن على علامة التبويب، ثم صدّر. عندما يفتح الآخرون ملفك، سيتم تشغيله مباشرة في هذا العرض النظيف. يمكنك مشاركة سير عمل قوي كأداة بسيطة دون الحاجة لفهم مخططات العقد.",
       "title": "مرحبًا بك في وضع التطبيق"
     }
@@ -1765,7 +1858,6 @@
     "execute": "تنفيذ",
     "fullscreen": "ملء الشاشة",
     "help": "مساعدة",
-    "helpAndFeedback": "المساعدة والتعليقات",
     "hideMenu": "إخفاء القائمة",
     "instant": "فوري",
     "instantTooltip": "سيتم وضع سير العمل في قائمة الانتظار فور انتهاء التوليد",
@@ -1866,6 +1958,7 @@
     "Open Sign In Dialog": "فتح نافذة تسجيل الدخول",
     "Open extra_model_paths_yaml": "فتح ملف extra_model_paths.yaml",
     "Paste": "لصق",
+    "Paste with Connect": "لصق مع الاتصال",
     "Pin/Unpin Selected Items": "تثبيت/إلغاء تثبيت العناصر المحددة",
     "Pin/Unpin Selected Nodes": "تثبيت/إلغاء تثبيت العقد المحددة",
     "Previous Opened Workflow": "سير العمل السابق المفتوح",
@@ -2037,6 +2130,7 @@
     "lotus": "lotus",
     "ltxv": "ltxv",
     "mask": "قناع",
+    "math": "رياضيات",
     "model": "نموذج",
     "model_merging": "دمج النماذج",
     "model_patches": "تصحيحات النموذج",
@@ -2140,6 +2234,18 @@
     },
     "title": "جهازك غير مدعوم"
   },
+  "openSharedWorkflow": {
+    "author": "المؤلف:",
+    "copyAssetsAndOpen": "استيراد الأصول وفتح سير العمل",
+    "copyDescription": "فتح سير العمل سينشئ نسخة جديدة في مساحة العمل الخاصة بك",
+    "dialogTitle": "فتح سير العمل المشترك",
+    "importFailed": "فشل استيراد أصول سير العمل",
+    "loadError": "تعذر تحميل سير العمل المشترك هذا. يرجى المحاولة لاحقًا.",
+    "nonPublicAssetsWarningLine1": "يأتي هذا سير العمل مع أصول غير عامة.",
+    "nonPublicAssetsWarningLine2": "سيتم استيراد هذه الأصول إلى مكتبتك عند فتح سير العمل",
+    "openWithoutImporting": "فتح بدون استيراد",
+    "openWorkflow": "فتح سير العمل"
+  },
   "painter": {
     "background": "الخلفية",
     "brush": "فرشاة",
@@ -2598,6 +2704,47 @@
     "default": "افتراضي",
     "round": "دائري"
   },
+  "shareNoOutputs": {
+    "message": "أنت على وشك مشاركة تطبيق بدون مخرجات. لا يمكن استخدامه حتى يتم توصيل مخرج.\n\nهل ترغب في المشاركة على أي حال؟",
+    "shareAnyway": "مشاركة على أي حال",
+    "title": "التطبيق لا يحتوي على مخرجات"
+  },
+  "shareWorkflow": {
+    "acknowledgeCheckbox": "أفهم أن عناصر الوسائط هذه سيتم نشرها وجعلها عامة",
+    "checkingAssets": "جارٍ التحقق من ظهور الوسائط…",
+    "comfyHubButton": "رفع إلى ComfyHub",
+    "comfyHubDescription": "ComfyHub هو مركز مجتمع ComfyUI الرسمي.\nسيكون لسير العمل الخاص بك صفحة عامة يمكن للجميع مشاهدتها.",
+    "comfyHubTitle": "رفع إلى ComfyHub",
+    "copyLink": "نسخ",
+    "createLinkButton": "إنشاء رابط",
+    "createLinkDescription": "عند إنشاء رابط لسير العمل الخاص بك، ستشارك عناصر الوسائط هذه مع سير العمل",
+    "createLinkTitle": "مشاركة سير العمل",
+    "creatingLink": "جارٍ إنشاء الرابط...",
+    "hasChangesDescription": "لقد أجريت تغييرات منذ آخر نشر لهذا سير العمل.",
+    "hasChangesTitle": "مشاركة سير العمل",
+    "inLibrary": "في المكتبة",
+    "linkCopied": "تم النسخ!",
+    "loadFailed": "فشل تحميل سير العمل المشترك",
+    "loadingTitle": "مشاركة سير العمل",
+    "mediaLabel": "{count} ملف وسائط | {count} ملفات وسائط",
+    "modelsLabel": "{count} نموذج | {count} نماذج",
+    "privateAssetsDescription": "يحتوي سير العمل الخاص بك على نماذج و/أو ملفات وسائط خاصة",
+    "publishToHubTab": "نشر",
+    "publishedOn": "تم النشر في {date}",
+    "saveButton": "حفظ سير العمل",
+    "saveFailedDescription": "فشل حفظ سير العمل. يرجى المحاولة مرة أخرى.",
+    "saveFailedTitle": "فشل الحفظ",
+    "saving": "جارٍ الحفظ...",
+    "shareLinkTab": "مشاركة",
+    "shareUrlLabel": "رابط المشاركة",
+    "successDescription": "أي شخص لديه هذا الرابط يمكنه عرض واستخدام سير العمل هذا. إذا قمت بإجراء تغييرات على سير العمل، يمكنك إعادة النشر لتحديث النسخة المشتركة.",
+    "successTitle": "تم نشر سير العمل بنجاح!",
+    "unsavedDescription": "يجب عليك حفظ سير العمل قبل المشاركة. احفظه الآن للمتابعة.",
+    "unsavedTitle": "احفظ سير العمل أولاً",
+    "updateLinkButton": "تحديث الرابط",
+    "updatingLink": "جارٍ تحديث الرابط...",
+    "workflowNameLabel": "اسم سير العمل"
+  },
   "shortcuts": {
     "essentials": "أساسي",
     "keyboardShortcuts": "اختصارات لوحة المفاتيح",
@@ -3229,6 +3376,7 @@
     "addedToWorkspace": "تمت إضافتك إلى {workspaceName}",
     "inviteAccepted": "تم قبول الدعوة",
     "inviteFailed": "فشل في قبول الدعوة",
+    "switchFailed": "فشل في تبديل مساحة العمل. يرجى المحاولة مرة أخرى.",
     "viewWorkspace": "عرض مساحة العمل"
   },
   "workspaceAuth": {

src/locales/ar/nodeDefs.json

@@ -1419,6 +1419,25 @@
       }
     }
   },
+  "ComfyMathExpression": {
+    "display_name": "تعبير رياضي",
+    "inputs": {
+      "expression": {
+        "name": "تعبير"
+      },
+      "values": {
+        "name": "القيم"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
+    }
+  },
   "ComfySwitchNode": {
     "display_name": "مفتاح التحويل",
     "inputs": {
@@ -15112,6 +15131,64 @@
       }
     }
   },
+  "TencentModelTo3DUVNode": {
+    "description": "تنفيذ فك UV لنموذج ثلاثي الأبعاد لإنشاء نسيج UV. يجب أن يحتوي النموذج المُدخل على أقل من ٣٠٬٠٠٠ وجه.",
+    "display_name": "Hunyuan3D: من نموذج إلى UV",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "model_3d": {
+        "name": "نموذج_ثلاثي_الأبعاد",
+        "tooltip": "إدخال نموذج ثلاثي الأبعاد (GLB، OBJ، أو FBX)"
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "تتحكم البذرة فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "OBJ",
+        "tooltip": null
+      },
+      "1": {
+        "name": "FBX",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentSmartTopologyNode": {
+    "description": "تنفيذ إعادة طوبولوجيا ذكية لنموذج ثلاثي الأبعاد. يدعم صيغ GLB/OBJ؛ الحد الأقصى ٢٠٠ ميجابايت؛ يُوصى به للنماذج عالية التفاصيل.",
+    "display_name": "Hunyuan3D: طوبولوجيا ذكية",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "face_level": {
+        "name": "مستوى الوجوه",
+        "tooltip": "مستوى تقليل المضلعات."
+      },
+      "model_3d": {
+        "name": "نموذج_ثلاثي_الأبعاد",
+        "tooltip": "إدخال نموذج ثلاثي الأبعاد (GLB أو OBJ)"
+      },
+      "polygon_type": {
+        "name": "نوع المضلع",
+        "tooltip": "نوع تركيب السطح."
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "تتحكم البذرة فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "OBJ",
+        "tooltip": null
+      }
+    }
+  },
   "TencentTextToModelNode": {
     "display_name": "Hunyuan3D: من نص إلى نموذج (احترافي)",
     "inputs": {

src/locales/ar/settings.json

@@ -400,7 +400,7 @@
     "name": "تخطيط شريط التبويبات",
     "options": {
       "Default": "افتراضي",
-      "Integrated": "مُدمج"
+      "Legacy": "تقليدي"
     },
     "tooltip": "يتحكم في تخطيط شريط التبويبات. \"مُدمج\" ينقل عناصر المساعدة والتحكمات الخاصة بالمستخدم إلى منطقة شريط التبويبات."
   },

src/locales/en/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_PasteFromClipboard": {
     "label": "Paste"
   },
+  "Comfy_Canvas_PasteFromClipboardWithConnect": {
+    "label": "Paste with Connect"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "Reset View"
   },

src/locales/en/main.json

@@ -301,6 +301,7 @@
     "1x": "1x",
     "2x": "2x",
     "beta": "BETA",
+    "comfyCloud": "Comfy Cloud",
     "nightly": "NIGHTLY",
     "profile": "Profile",
     "noItems": "No items",
@@ -968,7 +969,6 @@
     "customNodesManager": "Custom Nodes Manager",
     "settings": "Settings",
     "help": "Help",
-    "helpAndFeedback": "Help & Feedback",
     "queue": "Queue Panel",
     "fullscreen": "Fullscreen"
   },
@@ -1330,7 +1330,6 @@
     "Rename": "Rename",
     "Save": "Save",
     "Save As": "Save As",
-    "Share": "Share",
     "Show Settings Dialog": "Show Settings Dialog",
     "Set Subgraph Description": "Set Subgraph Description",
     "Set Subgraph Search Aliases": "Set Subgraph Search Aliases",
@@ -1597,6 +1596,7 @@
     "kandinsky5": "kandinsky5",
     "hooks": "hooks",
     "combine": "combine",
+    "math": "math",
     "logic": "logic",
     "cond single": "cond single",
     "context": "context",
@@ -3180,8 +3180,6 @@
     "cancelThisRun": "Cancel this run",
     "deleteAllAssets": "Delete all assets from this run",
     "hasCreditCost": "Requires additional credits",
-    "viewGraph": "View node graph",
-    "mobileNoWorkflow": "This workflow hasn't been built for app mode. Try a different one.",
     "welcome": {
       "title": "App Mode",
       "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3226,19 +3224,6 @@
       "outputPlaceholder": "Output nodes will show up here",
       "outputRequiredPlaceholder": "At least one node is required"
     },
-    "error": {
-      "header": "This app encountered an error",
-      "log": "Error Logs",
-      "mobileFixable": "Check {0} for errors",
-      "requiresGraph": "Something went wrong during generation. This could be due to invalid hidden inputs, missing resources, or workflow configuration issues.",
-      "promptVisitGraph": "View the node graph to see the full error.",
-      "getHelp": "For help, view our {0}, {1}, or {2} with the copied error.",
-      "goto": "Show errors in graph",
-      "github": "submit a GitHub issue",
-      "guide": "troubleshooting guide",
-      "support": "contact our support",
-      "promptShow": "Show error report"
-    },
     "queue": {
       "clickToClear": "Click to clear queue",
       "clear": "Clear queue"

src/locales/en/nodeDefs.json

@@ -1419,6 +1419,25 @@
       }
     }
   },
+  "ComfyMathExpression": {
+    "display_name": "Math Expression",
+    "inputs": {
+      "expression": {
+        "name": "expression"
+      },
+      "values": {
+        "name": "values"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
+    }
+  },
   "ComfySwitchNode": {
     "display_name": "Switch",
     "inputs": {
@@ -15112,6 +15131,64 @@
       }
     }
   },
+  "TencentModelTo3DUVNode": {
+    "display_name": "Hunyuan3D: Model to UV",
+    "description": "Perform UV unfolding on a 3D model to generate UV texture. Input model must have less than 30000 faces.",
+    "inputs": {
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Input 3D model (GLB, OBJ, or FBX)"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed controls whether the node should re-run; results are non-deterministic regardless of seed."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "OBJ",
+        "tooltip": null
+      },
+      "1": {
+        "name": "FBX",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentSmartTopologyNode": {
+    "display_name": "Hunyuan3D: Smart Topology",
+    "description": "Perform smart retopology on a 3D model. Supports GLB/OBJ formats; max 200MB; recommended for high-poly models.",
+    "inputs": {
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Input 3D model (GLB or OBJ)"
+      },
+      "polygon_type": {
+        "name": "polygon_type",
+        "tooltip": "Surface composition type."
+      },
+      "face_level": {
+        "name": "face_level",
+        "tooltip": "Polygon reduction level."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed controls whether the node should re-run; results are non-deterministic regardless of seed."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "OBJ",
+        "tooltip": null
+      }
+    }
+  },
   "TencentTextToModelNode": {
     "display_name": "Hunyuan3D: Text to Model",
     "inputs": {

src/locales/en/settings.json

@@ -398,10 +398,10 @@
   },
   "Comfy_UI_TabBarLayout": {
     "name": "Tab Bar Layout",
-    "tooltip": "Controls the layout of the tab bar. \"Integrated\" moves Help and User controls into the tab bar area.",
+    "tooltip": "Controls the elements contained in the integrated tab bar.",
     "options": {
       "Default": "Default",
-      "Integrated": "Integrated"
+      "Legacy": "Legacy"
     }
   },
   "Comfy_UseNewMenu": {

src/locales/es/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_PasteFromClipboard": {
     "label": "Pegar"
   },
+  "Comfy_Canvas_PasteFromClipboardWithConnect": {
+    "label": "Pegar con conectar"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "Restablecer vista"
   },

src/locales/es/main.json

@@ -2,7 +2,9 @@
   "actionbar": {
     "dockToTop": "Acoplar en la parte superior",
     "feedback": "Comentarios",
-    "feedbackTooltip": "Comentarios"
+    "feedbackTooltip": "Comentarios",
+    "share": "Compartir",
+    "shareTooltip": "Compartir flujo de trabajo"
   },
   "apiNodesCostBreakdown": {
     "costPerRun": "Costo por ejecución",
@@ -321,18 +323,24 @@
     "y": "Y"
   },
   "breadcrumbsMenu": {
+    "app": "Aplicación",
     "clearWorkflow": "Limpiar flujo de trabajo",
     "deleteBlueprint": "Eliminar Plano",
     "deleteWorkflow": "Eliminar flujo de trabajo",
     "duplicate": "Duplicar",
+    "editBuilderMode": "Editar aplicación",
     "enterAppMode": "Entrar en modo aplicación",
     "enterBuilderMode": "Entrar al constructor de aplicaciones",
     "enterNewName": "Ingrese un nuevo nombre",
+    "enterNodeGraph": "Entrar al gráfico de nodos",
     "exitAppMode": "Salir del modo aplicación",
+    "graph": "Gráfico",
     "missingNodesWarning": "El flujo de trabajo contiene nodos no compatibles (resaltados en rojo).",
+    "share": "Compartir",
     "workflowActions": "Acciones del flujo de trabajo"
   },
   "builderMenu": {
+    "enterAppMode": "Entrar en modo aplicación",
     "exitAppBuilder": "Salir del constructor de aplicaciones"
   },
   "builderToolbar": {
@@ -354,6 +362,7 @@
     "defaultViewTitle": "Establecer la vista predeterminada para este flujo de trabajo",
     "emptyWorkflowPrompt": "¿Quieres empezar con una plantilla?",
     "emptyWorkflowTitle": "Este flujo de trabajo no tiene nodos",
+    "exitToWorkflow": "Salir al flujo de trabajo",
     "inputs": "Entradas",
     "inputsDescription": "Elige entradas",
     "label": "Constructor de aplicaciones",
@@ -507,6 +516,80 @@
     "red": "Rojo",
     "yellow": "Amarillo"
   },
+  "comfyHubProfile": {
+    "checkingAccess": "Verificando tu acceso de publicación...",
+    "chooseProfilePicture": "Elige una foto de perfil",
+    "createProfile": "Crear perfil",
+    "createProfileButton": "Crear mi perfil",
+    "createProfileTitle": "Crea tu perfil de Comfy Hub",
+    "creatingProfile": "Creando perfil...",
+    "descriptionLabel": "Tu descripción",
+    "descriptionPlaceholder": "Cuéntale a la comunidad sobre ti...",
+    "introDescription": "Publica tus flujos de trabajo, construye tu portafolio y sé descubierto por millones de usuarios",
+    "introSubtitle": "Para compartir tu flujo de trabajo en ComfyHub, primero creemos tu perfil.",
+    "introTitle": "Publica en ComfyHub",
+    "modalTitle": "Crea tu perfil en ComfyHub",
+    "nameLabel": "Tu nombre",
+    "namePlaceholder": "Ingresa tu nombre aquí",
+    "profileCreationNav": "Creación de perfil",
+    "startPublishingButton": "Comenzar a publicar",
+    "successDescription": "Ahora puedes subir tu flujo de trabajo a tu página de creador",
+    "successProfileLink": "comfy.com/p/{username}",
+    "successProfileUrl": "Tu página de perfil está activa en",
+    "successTitle": "¡Te ves bien, {'@'}{username}!",
+    "uploadCover": "+ Subir una portada",
+    "uploadProfilePicture": "+ Subir una foto de perfil",
+    "uploadWorkflowButton": "Subir mi flujo de trabajo",
+    "usernameLabel": "Tu nombre de usuario (requerido)",
+    "usernamePlaceholder": "@"
+  },
+  "comfyHubPublish": {
+    "back": "Atrás",
+    "createProfileCta": "Crear un perfil",
+    "createProfileToPublish": "Crea un perfil para publicar en ComfyHub",
+    "exampleImage": "Imagen de ejemplo {index}",
+    "examplesDescription": "Agrega hasta {total} imágenes de ejemplo adicionales",
+    "maxExamples": "Puedes seleccionar hasta {max} ejemplos",
+    "next": "Siguiente",
+    "publishButton": "Publicar en ComfyHub",
+    "selectAThumbnail": "Selecciona una miniatura",
+    "showLessTags": "Mostrar menos...",
+    "showMoreTags": "Mostrar más...",
+    "stepDescribe": "Describe tu flujo de trabajo",
+    "stepExamples": "Agrega ejemplos de salida",
+    "stepFinish": "Finalizar publicación",
+    "suggestedTags": "Etiquetas sugeridas",
+    "tags": "Etiquetas",
+    "tagsDescription": "Selecciona etiquetas para que las personas encuentren tu flujo de trabajo más rápido",
+    "tagsPlaceholder": "Ingresa etiquetas que coincidan con tu flujo de trabajo para ayudar a las personas a encontrarlo, por ejemplo #nanobanana, #anime o #faceswap",
+    "thumbnailImage": "Imagen",
+    "thumbnailImageComparison": "Comparación de imágenes",
+    "thumbnailPreview": "Vista previa de la miniatura",
+    "thumbnailVideo": "Video",
+    "title": "Publicar en ComfyHub",
+    "uploadAnImage": "Haz clic para buscar o arrastra una imagen",
+    "uploadComparison": "Subir antes y después",
+    "uploadComparisonAfterPrompt": "Después",
+    "uploadComparisonBeforePrompt": "Antes",
+    "uploadExampleImage": "Subir imagen de ejemplo",
+    "uploadPromptClickToBrowse": "Haz clic para buscar o",
+    "uploadPromptDropImage": "arrastra una imagen aquí",
+    "uploadPromptDropVideo": "arrastra un video aquí",
+    "uploadThumbnail": "Subir una imagen",
+    "uploadThumbnailHint": "1:1 preferido, máximo 1080p",
+    "uploadVideo": "Subir un video",
+    "videoPreview": "Vista previa de miniatura de video",
+    "workflowDescription": "Descripción del flujo de trabajo",
+    "workflowDescriptionPlaceholder": "¿Qué hace que tu flujo de trabajo sea emocionante y especial? Sé específico para que las personas sepan qué esperar.",
+    "workflowName": "Nombre del flujo de trabajo",
+    "workflowNamePlaceholder": "Consejo: ingresa un nombre descriptivo y fácil de buscar",
+    "workflowType": "Tipo de flujo de trabajo",
+    "workflowTypeEditing": "Edición",
+    "workflowTypeImageGeneration": "Generación de imágenes",
+    "workflowTypePlaceholder": "Selecciona el tipo",
+    "workflowTypeUpscaling": "Aumento de resolución",
+    "workflowTypeVideoGeneration": "Generación de video"
+  },
   "commands": {
     "clear": "Limpiar flujo de trabajo",
     "clipspace": "Abrir Clipspace",
@@ -869,6 +952,7 @@
     "collapseAll": "Colapsar todo",
     "color": "Color",
     "comfy": "Comfy",
+    "comfyCloud": "Comfy Cloud",
     "comfyOrgLogoAlt": "Logo de ComfyOrg",
     "comingSoon": "Próximamente",
     "command": "Comando",
@@ -1342,7 +1426,7 @@
       "appBuilder": "Constructor de aplicaciones",
       "apps": "Aplicaciones",
       "appsEmptyMessage": "Las aplicaciones guardadas aparecerán aquí.\nHaz clic abajo para crear tu primera aplicación.",
-      "enterAppMode": "Entrar en modo de aplicación"
+      "appsEmptyMessageAction": "Haz clic abajo para crear tu primera aplicación."
     },
     "arrange": {
       "atLeastOne": "al menos uno",
@@ -1356,14 +1440,18 @@
     },
     "backToWorkflow": "Volver al flujo de trabajo",
     "beta": "Modo App Beta - Enviar comentarios",
+    "buildAnApp": "Crear una aplicación",
     "builder": {
       "exit": "Salir del constructor",
       "exitConfirmMessage": "Tienes cambios sin guardar que se perderán\n¿Salir sin guardar?",
       "exitConfirmTitle": "¿Salir del constructor de aplicaciones?",
+      "inputPlaceholder": "Las entradas aparecerán aquí",
       "inputsDesc": "Los usuarios interactuarán y ajustarán estos para generar sus resultados.",
       "inputsExample": "Ejemplos: “Cargar imagen”, “Prompt de texto”, “Pasos”",
       "noInputs": "Aún no se han agregado entradas",
       "noOutputs": "Aún no se han agregado nodos de salida",
+      "outputPlaceholder": "Los nodos de salida aparecerán aquí",
+      "outputRequiredPlaceholder": "Se requiere al menos un nodo",
       "outputsDesc": "Conecta al menos un nodo de salida para que los usuarios vean los resultados después de ejecutar.",
       "outputsExample": "Ejemplos: “Guardar imagen” o “Guardar video”",
       "promptAddInputs": "Haz clic en los parámetros del nodo para agregarlos aquí como entradas",
@@ -1371,12 +1459,15 @@
       "title": "Modo constructor de aplicaciones",
       "unknownWidget": "Widget no visible"
     },
+    "cancelThisRun": "Cancelar esta ejecución",
+    "deleteAllAssets": "Eliminar todos los recursos de esta ejecución",
     "downloadAll": "Descargar todo",
     "dragAndDropImage": "Arrastra y suelta una imagen",
     "emptyWorkflowExplanation": "Tu flujo de trabajo está vacío. Necesitas algunos nodos primero para empezar a construir una aplicación.",
     "enterNodeGraph": "Entrar al grafo de nodos",
     "giveFeedback": "Enviar comentarios",
     "graphMode": "Modo gráfico",
+    "hasCreditCost": "Requiere créditos adicionales",
     "linearMode": "Modo App",
     "loadTemplate": "Cargar una plantilla",
     "mobileControls": "Editar y ejecutar",
@@ -1393,6 +1484,8 @@
       "controls": "Tus resultados aparecen abajo, tus controles están a la derecha. Todo lo demás se mantiene fuera del camino.",
       "getStarted": "Haz clic en {runButton} para comenzar.",
       "message": "Una vista simplificada que oculta el grafo de nodos para que puedas concentrarte en crear.",
+      "noOutputs": "Una aplicación necesita al menos {count} para ser utilizable.",
+      "oneOutput": "1 salida",
       "sharing": "Compartir es fácil: crea tu flujo de trabajo, abre el Modo App, haz clic derecho en la pestaña y exporta. Cuando otros abran tu archivo, se lanzará directamente en esta vista limpia. Puedes compartir flujos de trabajo potentes como herramientas simples sin que nadie tenga que entender grafos de nodos.",
       "title": "Bienvenido al Modo App"
     }
@@ -1765,7 +1858,6 @@
     "execute": "Ejecutar",
     "fullscreen": "Pantalla completa",
     "help": "Ayuda",
-    "helpAndFeedback": "Ayuda y comentarios",
     "hideMenu": "Ocultar menú",
     "instant": "Instantáneo",
     "instantTooltip": "El flujo de trabajo se encolará instantáneamente después de que finalice una generación",
@@ -1866,6 +1958,7 @@
     "Open Sign In Dialog": "Abrir diálogo de inicio de sesión",
     "Open extra_model_paths_yaml": "Abrir extra_model_paths.yaml",
     "Paste": "Pegar",
+    "Paste with Connect": "Pegar con conectar",
     "Pin/Unpin Selected Items": "Anclar/Desanclar elementos seleccionados",
     "Pin/Unpin Selected Nodes": "Anclar/Desanclar nodos seleccionados",
     "Previous Opened Workflow": "Flujo de trabajo abierto anterior",
@@ -2037,6 +2130,7 @@
     "lotus": "lotus",
     "ltxv": "ltxv",
     "mask": "mask",
+    "math": "matemáticas",
     "model": "modelo",
     "model_merging": "fusión_de_modelos",
     "model_patches": "parches_de_modelo",
@@ -2140,6 +2234,18 @@
     },
     "title": "Tu dispositivo no es compatible"
   },
+  "openSharedWorkflow": {
+    "author": "Autor:",
+    "copyAssetsAndOpen": "Importar recursos y abrir flujo de trabajo",
+    "copyDescription": "Abrir el flujo de trabajo creará una nueva copia en tu espacio de trabajo",
+    "dialogTitle": "Abrir flujo de trabajo compartido",
+    "importFailed": "No se pudieron importar los recursos del flujo de trabajo",
+    "loadError": "No se pudo cargar este flujo de trabajo compartido. Por favor, inténtalo más tarde.",
+    "nonPublicAssetsWarningLine1": "Este flujo de trabajo incluye recursos no públicos.",
+    "nonPublicAssetsWarningLine2": "Estos se importarán a tu biblioteca al abrir el flujo de trabajo",
+    "openWithoutImporting": "Abrir sin importar",
+    "openWorkflow": "Abrir flujo de trabajo"
+  },
   "painter": {
     "background": "Fondo",
     "brush": "Pincel",
@@ -2598,6 +2704,47 @@
     "default": "Default",
     "round": "Redondo"
   },
+  "shareNoOutputs": {
+    "message": "Estás a punto de compartir una aplicación sin salidas. No se podrá usar hasta que se conecte una salida.\n\n¿Compartir de todos modos?",
+    "shareAnyway": "Compartir de todos modos",
+    "title": "La aplicación no tiene salidas"
+  },
+  "shareWorkflow": {
+    "acknowledgeCheckbox": "Entiendo que estos archivos multimedia serán publicados y hechos públicos",
+    "checkingAssets": "Comprobando visibilidad de los archivos multimedia…",
+    "comfyHubButton": "Subir a ComfyHub",
+    "comfyHubDescription": "ComfyHub es el centro comunitario oficial de ComfyUI.\nTu flujo de trabajo tendrá una página pública visible para todos.",
+    "comfyHubTitle": "Subir a ComfyHub",
+    "copyLink": "Copiar",
+    "createLinkButton": "Crear un enlace",
+    "createLinkDescription": "Cuando crees un enlace para tu flujo de trabajo, compartirás estos archivos multimedia junto con tu flujo de trabajo",
+    "createLinkTitle": "Compartir flujo de trabajo",
+    "creatingLink": "Creando enlace...",
+    "hasChangesDescription": "Has realizado cambios desde la última vez que se publicó este flujo de trabajo.",
+    "hasChangesTitle": "Compartir flujo de trabajo",
+    "inLibrary": "En la biblioteca",
+    "linkCopied": "¡Copiado!",
+    "loadFailed": "No se pudo cargar el flujo de trabajo compartido",
+    "loadingTitle": "Compartir flujo de trabajo",
+    "mediaLabel": "{count} archivo multimedia | {count} archivos multimedia",
+    "modelsLabel": "{count} modelo | {count} modelos",
+    "privateAssetsDescription": "Tu flujo de trabajo contiene modelos y/o archivos multimedia privados",
+    "publishToHubTab": "Publicar",
+    "publishedOn": "Publicado el {date}",
+    "saveButton": "Guardar flujo de trabajo",
+    "saveFailedDescription": "No se pudo guardar el flujo de trabajo. Por favor, inténtalo de nuevo.",
+    "saveFailedTitle": "Error al guardar",
+    "saving": "Guardando...",
+    "shareLinkTab": "Compartir",
+    "shareUrlLabel": "URL para compartir",
+    "successDescription": "Cualquiera con este enlace puede ver y usar este flujo de trabajo. Si realizas cambios en este flujo de trabajo, puedes volver a publicarlo para actualizar la versión compartida.",
+    "successTitle": "¡Flujo de trabajo publicado con éxito!",
+    "unsavedDescription": "Debes guardar tu flujo de trabajo antes de compartirlo. Guárdalo ahora para continuar.",
+    "unsavedTitle": "Guarda el flujo de trabajo primero",
+    "updateLinkButton": "Actualizar enlace",
+    "updatingLink": "Actualizando enlace...",
+    "workflowNameLabel": "Nombre del flujo de trabajo"
+  },
   "shortcuts": {
     "essentials": "Esencial",
     "keyboardShortcuts": "Atajos de teclado",
@@ -3229,6 +3376,7 @@
     "addedToWorkspace": "Has sido añadido a {workspaceName}",
     "inviteAccepted": "Invitación aceptada",
     "inviteFailed": "No se pudo aceptar la invitación",
+    "switchFailed": "No se pudo cambiar de espacio de trabajo. Por favor, inténtalo de nuevo.",
     "viewWorkspace": "Ver espacio de trabajo"
   },
   "workspaceAuth": {

src/locales/es/nodeDefs.json

@@ -1419,6 +1419,25 @@
       }
     }
   },
+  "ComfyMathExpression": {
+    "display_name": "Expresión matemática",
+    "inputs": {
+      "expression": {
+        "name": "expresión"
+      },
+      "values": {
+        "name": "valores"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
+    }
+  },
   "ComfySwitchNode": {
     "display_name": "Interruptor",
     "inputs": {
@@ -15112,6 +15131,64 @@
       }
     }
   },
+  "TencentModelTo3DUVNode": {
+    "description": "Realiza el desplegado UV en un modelo 3D para generar la textura UV. El modelo de entrada debe tener menos de 30,000 caras.",
+    "display_name": "Hunyuan3D: Modelo a UV",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control después de generar"
+      },
+      "model_3d": {
+        "name": "modelo_3d",
+        "tooltip": "Modelo 3D de entrada (GLB, OBJ o FBX)"
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "La semilla controla si el nodo debe ejecutarse de nuevo; los resultados son no deterministas independientemente de la semilla."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "OBJ",
+        "tooltip": null
+      },
+      "1": {
+        "name": "FBX",
+        "tooltip": null
+      }
+    }
+  },
+  "TencentSmartTopologyNode": {
+    "description": "Realiza retopología inteligente en un modelo 3D. Soporta formatos GLB/OBJ; máximo 200MB; recomendado para modelos de alta poligonización.",
+    "display_name": "Hunyuan3D: Topología inteligente",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control después de generar"
+      },
+      "face_level": {
+        "name": "nivel_de_caras",
+        "tooltip": "Nivel de reducción de polígonos."
+      },
+      "model_3d": {
+        "name": "modelo_3d",
+        "tooltip": "Modelo 3D de entrada (GLB u OBJ)"
+      },
+      "polygon_type": {
+        "name": "tipo_de_polígono",
+        "tooltip": "Tipo de composición de la superficie."
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "La semilla controla si el nodo debe ejecutarse de nuevo; los resultados son no deterministas independientemente de la semilla."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "OBJ",
+        "tooltip": null
+      }
+    }
+  },
   "TencentTextToModelNode": {
     "display_name": "Hunyuan3D: Texto a Modelo (Pro)",
     "inputs": {

src/locales/es/settings.json

@@ -400,7 +400,7 @@
     "name": "Diseño de barra de pestañas",
     "options": {
       "Default": "Predeterminado",
-      "Integrated": "Integrado"
+      "Legacy": "Clásico"
     },
     "tooltip": "Controla el diseño de la barra de pestañas. \"Integrado\" mueve los controles de Ayuda y Usuario al área de la barra de pestañas."
   },