code improve

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

@@ -1,5 +1,5 @@
-# Description: When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Electron API Types'
+description: 'When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   workflow_dispatch:

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

@@ -1,5 +1,5 @@
-# Description: When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Manager API Types'
+description: 'When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

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

@@ -1,5 +1,5 @@
-# Description: When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Registry API Types'
+description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

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

@@ -1,5 +1,5 @@
-# Description: Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq
 name: "CI: JSON Validation"
+description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Linting and code formatting validation for pull requests
 name: "CI: Lint Format"
+description: "Linting and code formatting validation for pull requests"
 
 on:
   pull_request:

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

@@ -1,5 +1,5 @@
-# Description: Validates Python code in tools/devtools directory
 name: "CI: Python Validation"
+description: "Validates Python code in tools/devtools directory"
 
 on:
   pull_request:

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

@@ -1,5 +1,5 @@
-# Description: Deploys test results from forked PRs (forks can't access deployment secrets)
 name: "CI: Tests E2E (Deploy for Forks)"
+description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:

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

@@ -1,5 +1,5 @@
-# Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
 name: "CI: Tests E2E"
+description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Deploys Storybook previews from forked PRs (forks can't access deployment secrets)
 name: "CI: Tests Storybook (Deploy for Forks)"
+description: "Deploys Storybook previews from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:

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

@@ -1,9 +1,10 @@
-# Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
 name: "CI: Tests Storybook"
+description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
   workflow_dispatch:  # Allow manual triggering
   pull_request:
+    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs

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

@@ -1,5 +1,5 @@
-# Description: Unit and component testing with Vitest
 name: "CI: Tests Unit"
+description: "Unit and component testing with Vitest"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Validates YAML syntax and style using yamllint with relaxed rules
 name: "CI: YAML Validation"
+description: "Validates YAML syntax and style using yamllint with relaxed rules"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Generates and updates translations for core ComfyUI components using OpenAI
 name: "i18n: Update Core"
+description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
   # Manual dispatch for urgent translation updates

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

@@ -1,5 +1,5 @@
-# Description: AI-powered code review triggered by adding the 'claude-review' label to a PR
 name: "PR: Claude Review"
+description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
 
 permissions:
   contents: read

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

@@ -148,10 +148,10 @@ jobs:
           done
 
           {
-            echo "results<<EOF"
+            echo "results<<'EOF'"
             cat "$RESULTS_FILE"
             echo "EOF"
-          } >> "$GITHUB_OUTPUT"
+          } >> $GITHUB_OUTPUT
 
       - name: Ensure release labels
         if: steps.check_version.outputs.is_minor_bump == 'true'

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

@@ -1,5 +1,5 @@
-# Description: Manual workflow to increment package version with semantic versioning support
 name: "Release: Version Bump"
+description: "Manual workflow to increment package version with semantic versioning support"
 
 on:
   workflow_dispatch:

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

@@ -1,5 +1,5 @@
-# Description: Automated weekly documentation accuracy check and update via Claude
 name: "Weekly Documentation Check"
+description: "Automated weekly documentation accuracy check and update via Claude"
 
 permissions:
   contents: write

apps/desktop-ui/src/components/common/StartupDisplay.vue

@@ -22,11 +22,7 @@
         <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
           {{ title }}
         </h1>
-        <p
-          v-if="statusText"
-          class="text-lg text-neutral-400"
-          data-testid="startup-status-text"
-        >
+        <p v-if="statusText" class="text-lg text-neutral-400">
           {{ statusText }}
         </p>
       </div>

browser_tests/tests/vueNodes/nodeStates/lod.spec.ts

@@ -9,9 +9,9 @@ test.beforeEach(async ({ comfyPage }) => {
 test.describe('Vue Nodes - LOD', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.setup()
     await comfyPage.loadWorkflow('default')
-    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
   })
 
   test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.33.8",
+  "version": "1.33.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -75,7 +75,6 @@
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
     "@vue/test-utils": "catalog:",
-    "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
@@ -113,7 +112,6 @@
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",
-    "unplugin-typegpu": "catalog:",
     "unplugin-vue-components": "catalog:",
     "uuid": "^11.1.0",
     "vite": "catalog:",
@@ -178,7 +176,6 @@
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
-    "typegpu": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",

pnpm-lock.yaml

@@ -126,9 +126,6 @@ catalogs:
     '@vueuse/integrations':
       specifier: ^13.9.0
       version: 13.9.0
-    '@webgpu/types':
-      specifier: ^0.1.66
-      version: 0.1.66
     algoliasearch:
       specifier: ^5.21.0
       version: 5.21.0
@@ -249,9 +246,6 @@ catalogs:
     tw-animate-css:
       specifier: ^1.3.8
       version: 1.3.8
-    typegpu:
-      specifier: ^0.8.2
-      version: 0.8.2
     typescript:
       specifier: ^5.9.2
       version: 5.9.2
@@ -261,9 +255,6 @@ catalogs:
     unplugin-icons:
       specifier: ^0.22.0
       version: 0.22.0
-    unplugin-typegpu:
-      specifier: 0.8.0
-      version: 0.8.0
     unplugin-vue-components:
       specifier: ^0.28.0
       version: 0.28.0
@@ -473,9 +464,6 @@ importers:
       tiptap-markdown:
         specifier: ^0.8.10
         version: 0.8.10(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
-      typegpu:
-        specifier: 'catalog:'
-        version: 0.8.2
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.2)
@@ -573,9 +561,6 @@ importers:
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
-      '@webgpu/types':
-        specifier: 'catalog:'
-        version: 0.1.66
       cross-env:
         specifier: 'catalog:'
         version: 10.1.0
@@ -687,9 +672,6 @@ importers:
       unplugin-icons:
         specifier: 'catalog:'
         version: 0.22.0(@vue/compiler-sfc@3.5.13)
-      unplugin-typegpu:
-        specifier: 'catalog:'
-        version: 0.8.0(typegpu@0.8.2)
       unplugin-vue-components:
         specifier: 'catalog:'
         version: 0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2))
@@ -1449,10 +1431,6 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/standalone@7.28.5':
-    resolution: {integrity: sha512-1DViPYJpRU50irpGMfLBQ9B4kyfQuL6X7SS7pwTeWeZX0mNkjzPi0XFqxCjSdddZXUQy4AhnQnnesA/ZHnvAdw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -3812,8 +3790,8 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@webgpu/types@0.1.66':
-    resolution: {integrity: sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==}
+  '@webgpu/types@0.1.51':
+    resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
 
   '@xstate/fsm@1.6.5':
     resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
@@ -6060,10 +6038,6 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-string-ast@1.0.3:
-    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
-    engines: {node: '>=20.19.0'}
-
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -7437,14 +7411,6 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyest-for-wgsl@0.1.3:
-    resolution: {integrity: sha512-Wm5ADG1UyDxykf42S1gLYP4U9e1QP/TdtJeovQi6y68zttpiFLKqQGioHmPs9Mjysh7YMSAr/Lpuk0cD2MVdGA==}
-    engines: {node: '>=12.20.0'}
-
-  tinyest@0.1.2:
-    resolution: {integrity: sha512-aHRmouyowIq1P5jrTF+YK6pGX+WuvFtSCLbqk91yHnU3SWQRIcNIamZLM5XF6lLqB13AWz0PGPXRff2QGDsxIg==}
-    engines: {node: '>=12.20.0'}
-
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
@@ -7571,13 +7537,6 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typed-binary@4.3.2:
-    resolution: {integrity: sha512-HT3pIBM2njCZUmeczDaQUUErGiM6GXFCqMsHegE12HCoBtvHCkfR10JJni0TeGOTnLilTd6YFyj+YhflqQDrDQ==}
-
-  typegpu@0.8.2:
-    resolution: {integrity: sha512-wkMJWhJE0pSkw2G/FesjqjbtHkREyOKu1Zmyj19xfmaX5+65YFwgfQNKSK8CxqN4kJkP7JFelLDJTSYY536TYg==}
-    engines: {node: '>=12.20.0'}
-
   typescript-eslint@8.44.0:
     resolution: {integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -7682,11 +7641,6 @@ packages:
       vue-template-es2015-compiler:
         optional: true
 
-  unplugin-typegpu@0.8.0:
-    resolution: {integrity: sha512-VJHdXSXGOkAx0WhwFczhVUjAI6HyDkrQXk20HnwyuzIE3FdqE5l9sJTCYZzoVGo3z8i/IA5TMHCDzzP0Bc97Cw==}
-    peerDependencies:
-      typegpu: ^0.8.0
-
   unplugin-vue-components@0.28.0:
     resolution: {integrity: sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==}
     engines: {node: '>=14'}
@@ -9015,8 +8969,6 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
-  '@babel/standalone@7.28.5': {}
-
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -11064,7 +11016,7 @@ snapshots:
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.3
       '@types/webxr': 0.5.20
-      '@webgpu/types': 0.1.66
+      '@webgpu/types': 0.1.51
       fflate: 0.8.2
       meshoptimizer: 0.18.1
 
@@ -11567,7 +11519,7 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.9.2)
 
-  '@webgpu/types@0.1.66': {}
+  '@webgpu/types@0.1.51': {}
 
   '@xstate/fsm@1.6.5': {}
 
@@ -14048,10 +14000,6 @@ snapshots:
 
   lz-string@1.5.0: {}
 
-  magic-string-ast@1.0.3:
-    dependencies:
-      magic-string: 0.30.19
-
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -15916,12 +15864,6 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinyest-for-wgsl@0.1.3:
-    dependencies:
-      tinyest: 0.1.2
-
-  tinyest@0.1.2: {}
-
   tinyexec@0.3.2: {}
 
   tinyexec@1.0.1: {}
@@ -16053,13 +15995,6 @@ snapshots:
       reflect.getprototypeof: 1.0.10
     optional: true
 
-  typed-binary@4.3.2: {}
-
-  typegpu@0.8.2:
-    dependencies:
-      tinyest: 0.1.2
-      typed-binary: 4.3.2
-
   typescript-eslint@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
@@ -16155,19 +16090,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-typegpu@0.8.0(typegpu@0.8.2):
-    dependencies:
-      '@babel/standalone': 7.28.5
-      defu: 6.1.4
-      estree-walker: 3.0.3
-      magic-string-ast: 1.0.3
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      tinyest: 0.1.2
-      tinyest-for-wgsl: 0.1.3
-      typegpu: 0.8.2
-      unplugin: 2.3.5
-
   unplugin-vue-components@0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       '@antfu/utils': 0.7.10

pnpm-workspace.yaml

@@ -43,7 +43,6 @@ catalog:
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
-  '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   axios: ^1.8.2
   cross-env: ^10.1.0
@@ -84,11 +83,9 @@ catalog:
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
-  typegpu: ^0.8.2
   typescript: ^5.9.2
   typescript-eslint: ^8.44.0
   unplugin-icons: ^0.22.0
-  unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^0.28.0
   vite: ^5.4.19
   vite-plugin-dts: ^4.5.4

src/components/TopMenuSection.vue

@@ -4,7 +4,7 @@
       <SubgraphBreadcrumb />
     </div>
 
-    <div ref="queueAreaRef" class="mx-1 flex flex-col items-end gap-1">
+    <div class="mx-1 flex flex-col items-end gap-1">
       <div
         class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-interface-stroke px-2 shadow-interface"
       >
@@ -40,16 +40,12 @@
         <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
         <LoginButton v-else-if="isDesktop" />
       </div>
-      <QueueProgressOverlay
-        v-model:expanded="isQueueOverlayExpanded"
-        :external-hovered="isQueueAreaHovered"
-      />
+      <QueueProgressOverlay v-model:expanded="isQueueOverlayExpanded" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useElementBounding, useMouse } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -72,20 +68,6 @@ const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
 const isQueueOverlayExpanded = ref(false)
-
-// Track hover over the rectangular bounding box of the queue area
-// Using mouse position + element bounds instead of mouseenter/mouseleave
-// because QueueProgressOverlay has pointer-events-none on its wrapper
-const queueAreaRef = ref<HTMLElement | null>(null)
-const { x: mouseX, y: mouseY } = useMouse()
-const { left, top, right, bottom } = useElementBounding(queueAreaRef)
-const isQueueAreaHovered = computed(
-  () =>
-    mouseX.value >= left.value &&
-    mouseX.value <= right.value &&
-    mouseY.value >= top.value &&
-    mouseY.value <= bottom.value
-)
 const queueStore = useQueueStore()
 const queuedCount = computed(() => queueStore.pendingTasks.length)
 const queueHistoryTooltipConfig = computed(() =>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -92,7 +92,7 @@
             class="w-62.5"
           >
             <template #icon>
-              <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
+              <i class="icon-[lucide--arrow-up-down]" />
             </template>
           </SingleSelect>
         </div>

src/components/input/MultiSelect.vue

@@ -17,7 +17,7 @@
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
           'h-10 relative inline-flex cursor-pointer select-none',
-          'rounded-lg bg-secondary-background text-base-foreground',
+          'rounded-lg bg-base-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
           'border-[2.5px] border-solid',
           selectedCount > 0
@@ -83,7 +83,7 @@
     role="combobox"
     :aria-expanded="false"
     aria-haspopup="listbox"
-    :tabindex="0"
+    tabindex="0"
   >
     <template
       v-if="showSearchBox || showSelectedCount || showClearButton"
@@ -127,7 +127,7 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm">
+      <span class="text-sm text-muted-foreground">
         {{ label }}
       </span>
       <span
@@ -140,7 +140,7 @@
 
     <!-- Chevron size identical to current -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+      <i class="icon-[lucide--chevron-down] text-lg text-neutral-400" />
     </template>
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->

src/components/input/SearchBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search] text-muted-foreground" />
+    <i class="icon-[lucide--search] text-muted" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -73,7 +73,7 @@ onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
   const baseClasses =
-    'relative flex w-full items-center gap-2 bg-secondary-background cursor-text'
+    'relative flex w-full items-center gap-2 bg-base-background cursor-text'
 
   if (showBorder) {
     return cn(

src/components/input/SingleSelect.vue

@@ -20,7 +20,7 @@
           'h-10 relative inline-flex cursor-pointer select-none items-center',
           // trigger surface
           'rounded-lg',
-          'bg-secondary-background text-base-foreground',
+          'bg-base-background text-base-foreground',
           'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
           'focus-within:border-node-component-border',
@@ -84,7 +84,7 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm">
+      <div class="flex items-center gap-2 text-sm text-neutral-500">
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
@@ -100,7 +100,7 @@
 
     <!-- Trigger caret -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+      <i class="icon-[lucide--chevron-down] text-base text-neutral-500" />
     </template>
 
     <!-- Option row -->

src/components/maskeditor/BrushCursor.vue

@@ -26,10 +26,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import {
-  getEffectiveBrushSize,
-  getEffectiveHardness
-} from '@/composables/maskeditor/brushUtils'
 import { BrushShape } from '@/extensions/core/maskeditor/types'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
@@ -40,14 +36,11 @@ const { containerRef } = defineProps<{
 const store = useMaskEditorStore()
 
 const brushOpacity = computed(() => {
-  return store.brushVisible ? 1 : 0
+  return store.brushVisible ? '1' : '0'
 })
 
 const brushRadius = computed(() => {
-  const size = store.brushSettings.size
-  const hardness = store.brushSettings.hardness
-  const effectiveSize = getEffectiveBrushSize(size, hardness)
-  return effectiveSize * store.zoomRatio
+  return store.brushSettings.size * store.zoomRatio
 })
 
 const brushSize = computed(() => {
@@ -85,26 +78,19 @@ const gradientVisible = computed(() => {
 })
 
 const gradientBackground = computed(() => {
-  const size = store.brushSettings.size
   const hardness = store.brushSettings.hardness
-  const effectiveSize = getEffectiveBrushSize(size, hardness)
-  const effectiveHardness = getEffectiveHardness(size, hardness, effectiveSize)
 
-  if (effectiveHardness === 1) {
+  if (hardness === 1) {
     return 'rgba(255, 0, 0, 0.5)'
   }
 
-  const midStop = effectiveHardness * 100
+  const midStop = hardness * 100
   const outerStop = 100
-  // Add an intermediate stop to approximate the squared falloff
-  // At 50% of the fade region, squared falloff is 0.25 (relative to max)
-  const fadeMidStop = midStop + (outerStop - midStop) * 0.5
 
   return `radial-gradient(
     circle,
     rgba(255, 0, 0, 0.5) 0%,
-    rgba(255, 0, 0, 0.5) ${midStop}%,
-    rgba(255, 0, 0, 0.125) ${fadeMidStop}%,
+    rgba(255, 0, 0, 0.25) ${midStop}%,
     rgba(255, 0, 0, 0) ${outerStop}%
   )`
 })

src/components/maskeditor/BrushSettingsPanel.vue

@@ -55,7 +55,7 @@
     <SliderControl
       :label="t('maskEditor.thickness')"
       :min="1"
-      :max="500"
+      :max="100"
       :step="1"
       :model-value="store.brushSettings.size"
       @update:model-value="onThicknessChange"
@@ -80,12 +80,12 @@
     />
 
     <SliderControl
-      label="Stepsize"
+      :label="t('maskEditor.smoothingPrecision')"
       :min="1"
       :max="100"
       :step="1"
-      :model-value="store.brushSettings.stepSize"
-      @update:model-value="onStepSizeChange"
+      :model-value="store.brushSettings.smoothingPrecision"
+      @update:model-value="onSmoothingPrecisionChange"
     />
   </div>
 </template>
@@ -119,8 +119,8 @@ const onHardnessChange = (value: number) => {
   store.setBrushHardness(value)
 }
 
-const onStepSizeChange = (value: number) => {
-  store.setBrushStepSize(value)
+const onSmoothingPrecisionChange = (value: number) => {
+  store.setBrushSmoothingPrecision(value)
 }
 
 const resetToDefault = () => {

src/components/maskeditor/MaskEditorContent.vue

@@ -12,28 +12,19 @@
     >
       <canvas
         ref="imgCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-0"
+        class="absolute top-0 left-0 w-full h-full"
         @contextmenu.prevent
       />
       <canvas
         ref="rgbCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-10"
+        class="absolute top-0 left-0 w-full h-full"
         @contextmenu.prevent
       />
       <canvas
         ref="maskCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-30"
+        class="absolute top-0 left-0 w-full h-full"
         @contextmenu.prevent
       />
-      <!-- GPU Preview Canvas -->
-      <canvas
-        ref="gpuCanvasRef"
-        class="absolute top-0 left-0 w-full h-full pointer-events-none"
-        :class="{
-          'z-20': store.activeLayer === 'rgb',
-          'z-40': store.activeLayer === 'mask'
-        }"
-      />
       <div ref="canvasBackgroundRef" class="bg-white w-full h-full" />
     </div>
 
@@ -96,7 +87,6 @@ const canvasContainerRef = ref<HTMLDivElement>()
 const imgCanvasRef = ref<HTMLCanvasElement>()
 const maskCanvasRef = ref<HTMLCanvasElement>()
 const rgbCanvasRef = ref<HTMLCanvasElement>()
-const gpuCanvasRef = ref<HTMLCanvasElement>()
 const canvasBackgroundRef = ref<HTMLDivElement>()
 
 const toolPanelRef = ref<InstanceType<typeof ToolPanel>>()
@@ -107,7 +97,7 @@ const initialized = ref(false)
 const keyboard = useKeyboard()
 const panZoom = usePanAndZoom()
 
-const toolManager = useToolManager(keyboard, panZoom)
+let toolManager: ReturnType<typeof useToolManager> | null = null
 
 let resizeObserver: ResizeObserver | null = null
 
@@ -145,6 +135,8 @@ const initUI = async () => {
   try {
     await loader.loadFromNode(node)
 
+    toolManager = useToolManager(keyboard, panZoom)
+
     const imageLoader = useImageLoader()
     const image = await imageLoader.loadImages()
 
@@ -157,18 +149,6 @@ const initUI = async () => {
 
     store.canvasHistory.saveInitialState()
 
-    // Initialize GPU resources
-    if (toolManager.brushDrawing) {
-      await toolManager.brushDrawing.initGPUResources()
-      if (gpuCanvasRef.value && toolManager.brushDrawing.initPreviewCanvas) {
-        // Match preview canvas resolution to mask canvas
-        gpuCanvasRef.value.width = maskCanvasRef.value.width
-        gpuCanvasRef.value.height = maskCanvasRef.value.height
-
-        toolManager.brushDrawing.initPreviewCanvas(gpuCanvasRef.value)
-      }
-    }
-
     initialized.value = true
   } catch (error) {
     console.error('[MaskEditorContent] Initialization failed:', error)
@@ -192,7 +172,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  toolManager.brushDrawing.saveBrushSettings()
+  toolManager?.brushDrawing.saveBrushSettings()
 
   keyboard?.removeListeners()
 

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -102,7 +102,6 @@ const onInvert = () => {
 
 const onClear = () => {
   canvasTools.clearMask()
-  store.triggerClear()
 }
 
 const handleSave = async () => {

src/components/queue/QueueOverlayActive.vue

@@ -47,7 +47,7 @@
             v-tooltip.top="cancelJobTooltip"
             type="secondary"
             size="sm"
-            class="size-6 bg-destructive-background hover:bg-destructive-background-hover"
+            class="size-6 bg-secondary-background hover:bg-destructive-background"
             :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
             @click="$emit('interruptAll')"
           >

src/components/queue/QueueProgressOverlay.vue

@@ -6,8 +6,8 @@
     <div
       class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
       :class="containerClass"
-      @mouseenter="isHoveredInternal = true"
-      @mouseleave="isHoveredInternal = false"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
     >
       <!-- Expanded state -->
       <QueueOverlayExpanded
@@ -87,8 +87,6 @@ type OverlayState = 'hidden' | 'empty' | 'active' | 'expanded'
 
 const props = defineProps<{
   expanded?: boolean
-  /** External hover state from parent container */
-  externalHovered?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -111,10 +109,7 @@ const {
   totalProgressStyle,
   currentNodeProgressStyle
 } = useQueueProgress()
-const isHoveredInternal = ref(false)
-const isHovered = computed(
-  () => isHoveredInternal.value || props.externalHovered
-)
+const isHovered = ref(false)
 const internalExpanded = ref(false)
 const isExpanded = computed({
   get: () =>

src/components/queue/job/QueueJobItem.vue

@@ -82,16 +82,7 @@
               :src="iconImageUrl"
               class="h-full w-full object-cover"
             />
-            <i
-              v-else
-              :class="
-                cn(
-                  iconClass,
-                  'size-4',
-                  props.state === 'pending' && 'animate-spin'
-                )
-              "
-            />
+            <i v-else :class="[iconClass, 'size-4']" />
           </div>
         </div>
       </div>
@@ -102,23 +93,6 @@
         </div>
       </div>
 
-      <!--
-        TODO: Refactor action buttons to use a declarative config system.
-
-        Instead of hardcoding button visibility logic in the template, define an array of
-        action button configs with properties like:
-        - icon, label, action, tooltip
-        - visibleStates: JobState[] (which job states show this button)
-        - alwaysVisible: boolean (show without hover)
-        - destructive: boolean (use destructive styling)
-
-        Then render buttons in two groups:
-        1. Always-visible buttons (outside Transition)
-        2. Hover-only buttons (inside Transition)
-
-        This would eliminate the current duplication where the cancel button exists
-        both outside (for running) and inside (for pending) the Transition.
-      -->
       <div class="relative z-[1] flex items-center gap-2 text-text-secondary">
         <Transition
           mode="out-in"
@@ -139,22 +113,18 @@
               v-tooltip.top="deleteTooltipConfig"
               type="transparent"
               size="sm"
-              class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
               :aria-label="t('g.delete')"
               @click.stop="emit('delete')"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </IconButton>
             <IconButton
-              v-else-if="
-                props.state !== 'completed' &&
-                props.state !== 'running' &&
-                computedShowClear
-              "
+              v-else-if="props.state !== 'completed' && computedShowClear"
               v-tooltip.top="cancelTooltipConfig"
               type="transparent"
               size="sm"
-              class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
               :aria-label="t('g.cancel')"
               @click.stop="emit('cancel')"
             >
@@ -173,33 +143,17 @@
               v-tooltip.top="moreTooltipConfig"
               type="transparent"
               size="sm"
-              class="size-6 transform gap-1 rounded bg-modal-card-button-surface text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
               :aria-label="t('g.more')"
               @click.stop="emit('menu', $event)"
             >
               <i class="icon-[lucide--more-horizontal] size-4" />
             </IconButton>
           </div>
-          <div
-            v-else-if="props.state !== 'running'"
-            key="secondary"
-            class="pr-2"
-          >
+          <div v-else key="secondary" class="pr-2">
             <slot name="secondary">{{ props.rightText }}</slot>
           </div>
         </Transition>
-        <!-- Running job cancel button - always visible -->
-        <IconButton
-          v-if="props.state === 'running' && computedShowClear"
-          v-tooltip.top="cancelTooltipConfig"
-          type="transparent"
-          size="sm"
-          class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
-          :aria-label="t('g.cancel')"
-          @click.stop="emit('cancel')"
-        >
-          <i class="icon-[lucide--x] size-4" />
-        </IconButton>
       </div>
     </div>
   </div>
@@ -216,7 +170,6 @@ import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
-import { cn } from '@/utils/tailwindUtil'
 
 const props = withDefaults(
   defineProps<{

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -214,7 +214,7 @@ const shouldShowDeleteButton = computed(() => {
 
 const getOutputCount = (item: AssetItem): number => {
   const count = item.user_metadata?.outputCount
-  return typeof count === 'number' && count > 0 ? count : 1
+  return typeof count === 'number' && count > 0 ? count : 0
 }
 
 const shouldShowOutputCount = (item: AssetItem): boolean => {

src/composables/maskeditor/ShiftClick.test.ts

@@ -1,84 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { resampleSegment } from './splineUtils'
-import type { Point } from '@/extensions/core/maskeditor/types'
-
-describe('Shift+Click Drawing Logic', () => {
-  it('should generate equidistant points across connected segments', () => {
-    const spacing = 4
-    let remainder = spacing // Simulate start point already painted
-    const outputPoints: Point[] = []
-
-    // Define points: A -> B -> C
-    // A(0,0) -> B(10,0) -> C(20,0)
-    // Total length 20. Spacing 4.
-    // Expected points at x = 4, 8, 12, 16, 20
-    const pA = { x: 0, y: 0 }
-    const pB = { x: 10, y: 0 }
-    const pC = { x: 20, y: 0 }
-
-    // Segment 1: A -> B
-    const result1 = resampleSegment([pA, pB], spacing, remainder)
-    outputPoints.push(...result1.points)
-    remainder = result1.remainder
-
-    // Verify intermediate state
-    // Length 10. Spacing 4. Start offset 4.
-    // Points at 4, 8. Next at 12.
-    // Remainder = 12 - 10 = 2.
-    expect(result1.points.length).toBe(2)
-    expect(result1.points[0].x).toBeCloseTo(4)
-    expect(result1.points[1].x).toBeCloseTo(8)
-    expect(remainder).toBeCloseTo(2)
-
-    // Segment 2: B -> C
-    const result2 = resampleSegment([pB, pC], spacing, remainder)
-    outputPoints.push(...result2.points)
-    remainder = result2.remainder
-
-    // Verify final state
-    // Start offset 2. Points at 2, 6, 10 (relative to B).
-    // Absolute x: 12, 16, 20.
-    expect(result2.points.length).toBe(3)
-    expect(result2.points[0].x).toBeCloseTo(12)
-    expect(result2.points[1].x).toBeCloseTo(16)
-    expect(result2.points[2].x).toBeCloseTo(20)
-
-    // Verify all distances
-    // Note: The first point is at distance `spacing` from start (0,0)
-    // Subsequent points are `spacing` apart.
-    let prevX = 0
-    for (const p of outputPoints) {
-      const dist = p.x - prevX
-      expect(dist).toBeCloseTo(spacing)
-      prevX = p.x
-    }
-  })
-
-  it('should handle segments shorter than spacing', () => {
-    const spacing = 10
-    let remainder = spacing // Simulate start point already painted
-
-    // A(0,0) -> B(5,0) -> C(15,0)
-    const pA = { x: 0, y: 0 }
-    const pB = { x: 5, y: 0 }
-    const pC = { x: 15, y: 0 }
-
-    // Segment 1: A -> B (Length 5)
-    // Spacing 10. No points should be generated.
-    // Remainder should be 5 (next point needs 5 more units).
-    const result1 = resampleSegment([pA, pB], spacing, remainder)
-    expect(result1.points.length).toBe(0)
-    expect(result1.remainder).toBeCloseTo(5)
-    remainder = result1.remainder
-
-    // Segment 2: B -> C (Length 10)
-    // Start offset 5. First point at 5 (relative to B).
-    // Absolute x = 10.
-    // Next point at 15 (relative to B). Segment ends at 10.
-    // Remainder = 15 - 10 = 5.
-    const result2 = resampleSegment([pB, pC], spacing, remainder)
-    expect(result2.points.length).toBe(1)
-    expect(result2.points[0].x).toBeCloseTo(10)
-    expect(result2.remainder).toBeCloseTo(5)
-  })
-})

src/composables/maskeditor/StrokeProcessor.test.ts

@@ -1,108 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { StrokeProcessor } from './StrokeProcessor'
-import type { Point } from '@/extensions/core/maskeditor/types'
-
-describe('StrokeProcessor', () => {
-  it('should generate equidistant points from irregular input', () => {
-    const spacing = 10
-    const processor = new StrokeProcessor(spacing)
-    const outputPoints: Point[] = []
-
-    // Simulate a horizontal line drawn with irregular speed
-    // Points: (0,0) -> (5,0) -> (25,0) -> (30,0) -> (100,0)
-    const inputPoints: Point[] = [
-      { x: 0, y: 0 },
-      { x: 5, y: 0 }, // dist 5
-      { x: 25, y: 0 }, // dist 20
-      { x: 30, y: 0 }, // dist 5
-      { x: 100, y: 0 } // dist 70
-    ]
-
-    for (const p of inputPoints) {
-      outputPoints.push(...processor.addPoint(p))
-    }
-    outputPoints.push(...processor.endStroke())
-
-    // Verify we have points
-    expect(outputPoints.length).toBeGreaterThan(0)
-
-    // Verify spacing
-    // Note: The first few points might be affected by the start condition,
-    // but the middle section should be perfectly spaced.
-    // Also, Catmull-Rom splines don't necessarily pass through control points in a straight line
-    // if the points are collinear, they should be straight.
-
-    // Let's check distances between consecutive points
-    const distances: number[] = []
-    for (let i = 1; i < outputPoints.length; i++) {
-      const dx = outputPoints[i].x - outputPoints[i - 1].x
-      const dy = outputPoints[i].y - outputPoints[i - 1].y
-      distances.push(Math.hypot(dx, dy))
-    }
-
-    // Check that distances are close to spacing
-    // We allow a small epsilon because of floating point and spline approximation
-    // Filter out the very last segment which might be shorter (remainder)
-    // But wait, our logic doesn't output the last point if it's not a full spacing step?
-    // resampleSegment outputs points at [start + spacing, start + 2*spacing, ...]
-    // It does NOT output the end point of the segment.
-    // So all distances between output points should be exactly `spacing`.
-    // EXCEPT possibly if the spline curvature makes the straight-line distance slightly different
-    // from the arc length. But for a straight line input, it should be exact.
-
-    // However, catmull-rom with collinear points IS a straight line.
-
-    // Let's log the distances for debugging if test fails
-    // console.log('Distances:', distances)
-
-    // All distances should be approximately equal to spacing
-    // We might have a gap between segments if the logic isn't perfect,
-    // but within a segment it's guaranteed by resampleSegment.
-    // The critical part is the transition between segments.
-
-    for (let i = 0; i < distances.length; i++) {
-      const d = distances[i]
-      if (Math.abs(d - spacing) > 0.5) {
-        console.log(
-          `Distance mismatch at index ${i}: ${d} (expected ${spacing})`
-        )
-        console.log(`Point ${i}:`, outputPoints[i])
-        console.log(`Point ${i + 1}:`, outputPoints[i + 1])
-      }
-      expect(d).toBeCloseTo(spacing, 1)
-    }
-  })
-
-  it('should handle a simple 3-point stroke', () => {
-    const spacing = 5
-    const processor = new StrokeProcessor(spacing)
-    const points: Point[] = []
-
-    points.push(...processor.addPoint({ x: 0, y: 0 }))
-    points.push(...processor.addPoint({ x: 10, y: 0 }))
-    points.push(...processor.addPoint({ x: 20, y: 0 }))
-    points.push(...processor.endStroke())
-
-    expect(points.length).toBeGreaterThan(0)
-
-    // Check distances
-    for (let i = 1; i < points.length; i++) {
-      const dx = points[i].x - points[i - 1].x
-      const dy = points[i].y - points[i - 1].y
-      const d = Math.hypot(dx, dy)
-      expect(d).toBeCloseTo(spacing, 1)
-    }
-  })
-
-  it('should handle a single point click', () => {
-    const spacing = 5
-    const processor = new StrokeProcessor(spacing)
-    const points: Point[] = []
-
-    points.push(...processor.addPoint({ x: 100, y: 100 }))
-    points.push(...processor.endStroke())
-
-    expect(points.length).toBe(1)
-    expect(points[0]).toEqual({ x: 100, y: 100 })
-  })
-})

src/composables/maskeditor/StrokeProcessor.ts

@@ -1,115 +0,0 @@
-import type { Point } from '@/extensions/core/maskeditor/types'
-import { catmullRomSpline, resampleSegment } from './splineUtils'
-
-export class StrokeProcessor {
-  private controlPoints: Point[] = []
-  private remainder: number = 0
-  private spacing: number
-  private isFirstPoint: boolean = true
-  private hasProcessedSegment: boolean = false
-
-  constructor(spacing: number) {
-    this.spacing = spacing
-  }
-
-  /**
-   * Adds a point to the stroke and returns any new equidistant points generated.
-   * Maintain a sliding window of 4 control points for spline generation
-   */
-  public addPoint(point: Point): Point[] {
-    // Initialize buffer with the first point
-    if (this.isFirstPoint) {
-      this.controlPoints.push(point) // p0: phantom start point
-      this.controlPoints.push(point) // p1: actual start point
-      this.isFirstPoint = false
-      return [] // Wait for more points to form a segment
-    }
-
-    this.controlPoints.push(point)
-
-    // Require 4 points for a spline segment
-    if (this.controlPoints.length < 4) {
-      return []
-    }
-
-    // Generate segment p1->p2
-    const p0 = this.controlPoints[0]
-    const p1 = this.controlPoints[1]
-    const p2 = this.controlPoints[2]
-    const p3 = this.controlPoints[3]
-
-    const newPoints = this.processSegment(p0, p1, p2, p3)
-
-    // Slide window
-    this.controlPoints.shift()
-
-    return newPoints
-  }
-
-  /**
-   * End stroke and flush remaining segments
-   */
-  public endStroke(): Point[] {
-    if (this.controlPoints.length < 2) {
-      // Insufficient points for a segment
-      return []
-    }
-
-    // Process remaining segments by duplicating the last point
-
-    const newPoints: Point[] = []
-
-    // Flush the buffer by processing the final segment
-
-    while (this.controlPoints.length >= 3) {
-      const p0 = this.controlPoints[0]
-      const p1 = this.controlPoints[1]
-      const p2 = this.controlPoints[2]
-      const p3 = p2 // Duplicate last point as phantom end
-
-      const points = this.processSegment(p0, p1, p2, p3)
-      newPoints.push(...points)
-
-      this.controlPoints.shift()
-    }
-
-    // Handle single point click
-    if (!this.hasProcessedSegment && this.controlPoints.length >= 2) {
-      // Process zero-length segment for single point
-      const p = this.controlPoints[1]
-      const points = this.processSegment(p, p, p, p)
-      newPoints.push(...points)
-    }
-
-    return newPoints
-  }
-
-  private processSegment(p0: Point, p1: Point, p2: Point, p3: Point): Point[] {
-    this.hasProcessedSegment = true
-    // Generate dense points for the segment
-    const densePoints: Point[] = []
-
-    // Adaptive sampling based on segment length
-    const dist = Math.hypot(p2.x - p1.x, p2.y - p1.y)
-    // Use 1 sample per pixel, but at least 5 samples to ensure smoothness for short segments
-    // and cap at a reasonable maximum if needed (though not strictly necessary with density)
-    const samples = Math.max(5, Math.ceil(dist))
-
-    for (let i = 0; i < samples; i++) {
-      const t = i / samples
-      densePoints.push(catmullRomSpline(p0, p1, p2, p3, t))
-    }
-    // Add segment end point
-    densePoints.push(p2)
-
-    // Resample points with carried-over remainder
-    const { points, remainder } = resampleSegment(
-      densePoints,
-      this.spacing,
-      this.remainder
-    )
-
-    this.remainder = remainder
-    return points
-  }
-}

src/composables/maskeditor/brushUtils.test.ts

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { getEffectiveBrushSize, getEffectiveHardness } from './brushUtils'
-
-describe('brushUtils', () => {
-  describe('getEffectiveBrushSize', () => {
-    it('should return original size when hardness is 1.0', () => {
-      const size = 100
-      const hardness = 1.0
-      expect(getEffectiveBrushSize(size, hardness)).toBe(100)
-    })
-
-    it('should return 1.5x size when hardness is 0.0', () => {
-      const size = 100
-      const hardness = 0.0
-      expect(getEffectiveBrushSize(size, hardness)).toBe(150)
-    })
-
-    it('should interpolate linearly', () => {
-      const size = 100
-      const hardness = 0.5
-      // Scale should be 1.0 + 0.5 * 0.5 = 1.25
-      expect(getEffectiveBrushSize(size, hardness)).toBe(125)
-    })
-  })
-
-  describe('getEffectiveHardness', () => {
-    it('should return same hardness if effective size matches size', () => {
-      const size = 100
-      const hardness = 0.8
-      const effectiveSize = 100
-      expect(getEffectiveHardness(size, hardness, effectiveSize)).toBe(0.8)
-    })
-
-    it('should scale hardness down as effective size increases', () => {
-      const size = 100
-      const hardness = 0.5
-      // Effective size at 0.5 hardness is 125
-      const effectiveSize = 125
-      // Hard core radius = 50. New hardness = 50 / 125 = 0.4
-      expect(getEffectiveHardness(size, hardness, effectiveSize)).toBe(0.4)
-    })
-
-    it('should return 0 if effective size is 0', () => {
-      expect(getEffectiveHardness(100, 0.5, 0)).toBe(0)
-    })
-  })
-})

src/composables/maskeditor/brushUtils.ts

@@ -1,34 +0,0 @@
-/**
- * Calculates the effective brush size based on the base size and hardness.
- * As hardness decreases, the effective size increases to allow for a softer falloff.
- *
- * @param size - The base radius of the brush
- * @param hardness - The hardness of the brush (0.0 to 1.0)
- * @returns The effective radius of the brush
- */
-export function getEffectiveBrushSize(size: number, hardness: number): number {
-  // Scale factor for maximum softness
-  const MAX_SCALE = 1.5
-  const scale = 1.0 + (1.0 - hardness) * (MAX_SCALE - 1.0)
-  return size * scale
-}
-
-/**
- * Calculates the effective hardness to maintain the visual "hard core" of the brush.
- * Since the effective size is larger, we need to adjust the hardness value so that
- * the inner hard circle remains at the same physical radius as the original size * hardness.
- *
- * @param size - The base radius of the brush
- * @param hardness - The base hardness of the brush
- * @param effectiveSize - The effective radius (calculated by getEffectiveBrushSize)
- * @returns The adjusted hardness value (0.0 to 1.0)
- */
-export function getEffectiveHardness(
-  size: number,
-  hardness: number,
-  effectiveSize: number
-): number {
-  if (effectiveSize <= 0) return 0
-  // Adjust hardness to maintain the physical radius of the hard core
-  return (size * hardness) / effectiveSize
-}

src/composables/maskeditor/gpu/GPUBrushRenderer.ts

@@ -1,805 +0,0 @@
-import * as d from 'typegpu/data'
-import { StrokePoint } from './gpuSchema'
-import {
-  brushFragment,
-  brushVertex,
-  blitShader,
-  compositeShader,
-  readbackShader
-} from './brushShaders'
-
-// ... (rest of the file)
-
-const QUAD_VERTS = new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1])
-const QUAD_INDICES = new Uint16Array([0, 1, 2, 0, 2, 3])
-
-const UNIFORM_SIZE = 48 // Uniform buffer size aligned to 16 bytes
-const STROKE_STRIDE = d.sizeOf(StrokePoint) // 16
-const MAX_STROKES = 10000
-
-export class GPUBrushRenderer {
-  private device: GPUDevice
-
-  // Buffers
-  private quadVertexBuffer: GPUBuffer
-  private indexBuffer: GPUBuffer
-  private instanceBuffer: GPUBuffer
-  private uniformBuffer: GPUBuffer
-
-  // Pipelines
-  private renderPipeline: GPURenderPipeline // Standard alpha blending pipeline
-  private accumulatePipeline: GPURenderPipeline // SourceOver blending pipeline for stroke accumulation
-  private blitPipeline: GPURenderPipeline
-  private compositePipeline: GPURenderPipeline // Composite pipeline that applies opacity
-  private compositePipelinePreview: GPURenderPipeline // Pipeline for rendering to the preview canvas
-  private erasePipeline: GPURenderPipeline // Pipeline for erasing (Destination Out)
-  private erasePipelinePreview: GPURenderPipeline // Eraser pipeline for the preview canvas
-  readbackPipeline: GPUComputePipeline // Compute pipeline for texture readback
-
-  // Bind Group Layouts
-  private uniformBindGroupLayout: GPUBindGroupLayout
-  private textureBindGroupLayout: GPUBindGroupLayout
-
-  // Shared Bind Groups
-  private mainUniformBindGroup: GPUBindGroup
-
-  // Textures
-  private currentStrokeTexture: GPUTexture | null = null
-  private currentStrokeView: GPUTextureView | null = null
-
-  // Cached Bind Groups
-  private compositeTextureBindGroup: GPUBindGroup | null = null
-  private previewTextureBindGroup: GPUBindGroup | null = null
-
-  // Removed separate uniform bind groups as we will use mainUniformBindGroup
-
-  private lastReadbackTexture: GPUTexture | null = null
-  private lastReadbackBuffer: GPUBuffer | null = null
-  private readbackBindGroup: GPUBindGroup | null = null
-
-  private lastBackgroundTexture: GPUTexture | null = null
-  private backgroundBindGroup: GPUBindGroup | null = null
-
-  constructor(
-    device: GPUDevice,
-    presentationFormat: GPUTextureFormat = 'rgba8unorm'
-  ) {
-    this.device = device
-
-    // --- 1. Initialize Buffers ---
-    this.quadVertexBuffer = device.createBuffer({
-      size: QUAD_VERTS.byteLength,
-      usage: GPUBufferUsage.VERTEX,
-      mappedAtCreation: true
-    })
-    new Float32Array(this.quadVertexBuffer.getMappedRange()).set(QUAD_VERTS)
-    this.quadVertexBuffer.unmap()
-
-    this.indexBuffer = device.createBuffer({
-      size: QUAD_INDICES.byteLength,
-      usage: GPUBufferUsage.INDEX,
-      mappedAtCreation: true
-    })
-    new Uint16Array(this.indexBuffer.getMappedRange()).set(QUAD_INDICES)
-    this.indexBuffer.unmap()
-
-    this.instanceBuffer = device.createBuffer({
-      size: MAX_STROKES * STROKE_STRIDE,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    })
-
-    this.uniformBuffer = device.createBuffer({
-      size: UNIFORM_SIZE,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    })
-
-    // --- 2. Brush Shader (Drawing) ---
-    const brushModuleV = device.createShaderModule({ code: brushVertex })
-    const brushModuleF = device.createShaderModule({ code: brushFragment })
-
-    // Create explicit bind group layouts
-    this.uniformBindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-          buffer: { type: 'uniform' }
-        }
-      ]
-    })
-
-    this.textureBindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.FRAGMENT,
-          texture: {} // default is float, 2d
-        }
-      ]
-    })
-
-    this.mainUniformBindGroup = device.createBindGroup({
-      layout: this.uniformBindGroupLayout,
-      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
-    })
-
-    const renderPipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.uniformBindGroupLayout]
-    })
-
-    // Standard Render Pipeline (Alpha Blend)
-    this.renderPipeline = device.createRenderPipeline({
-      layout: renderPipelineLayout,
-      vertex: {
-        module: brushModuleV,
-        entryPoint: 'vs',
-        buffers: [
-          {
-            arrayStride: 8,
-            stepMode: 'vertex',
-            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }] // Quad vertex attributes
-          },
-          {
-            arrayStride: 16,
-            stepMode: 'instance',
-            attributes: [
-              { shaderLocation: 1, offset: 0, format: 'float32x2' }, // Instance attributes: position
-              { shaderLocation: 2, offset: 8, format: 'float32' }, // size
-              { shaderLocation: 3, offset: 12, format: 'float32' } // pressure
-            ]
-          }
-        ]
-      },
-      fragment: {
-        module: brushModuleF,
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: 'rgba8unorm',
-            blend: {
-              color: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // Accumulate strokes using SourceOver blending to ensure smooth intersections.
-    this.accumulatePipeline = device.createRenderPipeline({
-      layout: renderPipelineLayout,
-      vertex: {
-        module: brushModuleV,
-        entryPoint: 'vs',
-        buffers: [
-          {
-            arrayStride: 8,
-            stepMode: 'vertex',
-            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }]
-          },
-          {
-            arrayStride: 16,
-            stepMode: 'instance',
-            attributes: [
-              { shaderLocation: 1, offset: 0, format: 'float32x2' },
-              { shaderLocation: 2, offset: 8, format: 'float32' },
-              { shaderLocation: 3, offset: 12, format: 'float32' }
-            ]
-          }
-        ]
-      },
-      fragment: {
-        module: brushModuleF,
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: 'rgba8unorm',
-            blend: {
-              // Use SourceOver blending for smooth stroke intersections.
-              color: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // --- 3. Blit Pipeline (For Preview) ---
-    const blitPipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.textureBindGroupLayout]
-    })
-
-    this.blitPipeline = device.createRenderPipeline({
-      layout: blitPipelineLayout,
-      vertex: {
-        module: device.createShaderModule({ code: blitShader }),
-        entryPoint: 'vs'
-      },
-      fragment: {
-        module: device.createShaderModule({ code: blitShader }),
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: presentationFormat, // Use the presentation format
-            blend: {
-              color: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // --- 4. Composite Pipeline ---
-
-    const compositePipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [
-        this.textureBindGroupLayout,
-        this.uniformBindGroupLayout
-      ]
-    })
-
-    // Standard composite pipeline for offscreen textures
-    this.compositePipeline = device.createRenderPipeline({
-      layout: compositePipelineLayout,
-      vertex: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'vs'
-      },
-      fragment: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: 'rgba8unorm',
-            blend: {
-              color: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // Composite pipeline for the preview canvas
-    this.compositePipelinePreview = device.createRenderPipeline({
-      layout: compositePipelineLayout,
-      vertex: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'vs'
-      },
-      fragment: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: presentationFormat,
-            blend: {
-              color: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'one',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // --- 5. Erase Pipeline (Destination Out) ---
-    // Standard erase pipeline for offscreen textures
-    this.erasePipeline = device.createRenderPipeline({
-      layout: compositePipelineLayout,
-      vertex: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'vs'
-      },
-      fragment: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: 'rgba8unorm',
-            blend: {
-              color: {
-                srcFactor: 'zero',
-                dstFactor: 'one-minus-src-alpha', // dst * (1 - src_alpha)
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'zero',
-                dstFactor: 'one-minus-src-alpha', // dst_alpha * (1 - src_alpha)
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // Erase pipeline for the preview canvas
-    this.erasePipelinePreview = device.createRenderPipeline({
-      layout: compositePipelineLayout,
-      vertex: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'vs'
-      },
-      fragment: {
-        module: device.createShaderModule({ code: compositeShader }),
-        entryPoint: 'fs',
-        targets: [
-          {
-            format: presentationFormat,
-            blend: {
-              color: {
-                srcFactor: 'zero',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              },
-              alpha: {
-                srcFactor: 'zero',
-                dstFactor: 'one-minus-src-alpha',
-                operation: 'add'
-              }
-            }
-          }
-        ]
-      },
-      primitive: { topology: 'triangle-list' }
-    })
-
-    // --- 6. Readback Pipeline (Compute) ---
-    this.readbackPipeline = device.createComputePipeline({
-      layout: 'auto',
-      compute: {
-        module: device.createShaderModule({ code: readbackShader }),
-        entryPoint: 'main'
-      }
-    })
-  }
-
-  public prepareStroke(width: number, height: number) {
-    // Initialize or resize the accumulation texture
-    if (
-      !this.currentStrokeTexture ||
-      this.currentStrokeTexture.width !== width ||
-      this.currentStrokeTexture.height !== height
-    ) {
-      if (this.currentStrokeTexture) this.currentStrokeTexture.destroy()
-      this.currentStrokeTexture = this.device.createTexture({
-        size: [width, height],
-        format: 'rgba8unorm',
-        usage:
-          GPUTextureUsage.RENDER_ATTACHMENT |
-          GPUTextureUsage.TEXTURE_BINDING |
-          GPUTextureUsage.COPY_SRC
-      })
-      this.currentStrokeView = this.currentStrokeTexture.createView()
-
-      // Invalidate texture-dependent bind groups
-      this.compositeTextureBindGroup = null
-      this.previewTextureBindGroup = null
-      // Readback bind group might also be invalid if it was using the old texture
-      if (this.lastReadbackTexture === this.currentStrokeTexture) {
-        this.readbackBindGroup = null
-        this.lastReadbackTexture = null
-      }
-    }
-
-    // Clear the accumulation texture
-    const encoder = this.device.createCommandEncoder()
-    const pass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
-          view: this.currentStrokeView!,
-          loadOp: 'clear',
-          clearValue: { r: 0, g: 0, b: 0, a: 0 },
-          storeOp: 'store'
-        }
-      ]
-    })
-    pass.end()
-    this.device.queue.submit([encoder.finish()])
-  }
-
-  public renderStrokeToAccumulator(
-    points: { x: number; y: number; pressure: number }[],
-    settings: {
-      size: number
-      opacity: number
-      hardness: number
-      color: [number, number, number]
-      width: number
-      height: number
-      brushShape: number
-    }
-  ) {
-    if (!this.currentStrokeView) return
-    // Render stroke using accumulation pipeline
-    this.renderStrokeInternal(
-      this.currentStrokeView,
-      this.accumulatePipeline,
-      points,
-      settings
-    )
-  }
-
-  public compositeStroke(
-    targetView: GPUTextureView,
-    settings: {
-      opacity: number
-      color: [number, number, number]
-      hardness: number // Required for uniform buffer layout
-      screenSize: [number, number]
-      brushShape: number
-      isErasing?: boolean
-    }
-  ) {
-    if (!this.currentStrokeTexture) return
-
-    // Update uniforms for the composite pass
-    const buffer = new ArrayBuffer(UNIFORM_SIZE)
-    const f32 = new Float32Array(buffer)
-    const u32 = new Uint32Array(buffer)
-
-    f32[0] = settings.color[0]
-    f32[1] = settings.color[1]
-    f32[2] = settings.color[2]
-    f32[3] = settings.opacity
-    f32[4] = settings.hardness
-    f32[5] = 0 // Padding
-    f32[6] = settings.screenSize[0]
-    f32[7] = settings.screenSize[1]
-    u32[8] = settings.brushShape // Brush shape: 0=Circle, 1=Square
-    this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
-
-    const encoder = this.device.createCommandEncoder()
-
-    // Choose pipeline based on operation
-    const pipeline = settings.isErasing
-      ? this.erasePipeline
-      : this.compositePipeline
-
-    // 1. Texture Bind Group (Group 0)
-    if (!this.compositeTextureBindGroup) {
-      this.compositeTextureBindGroup = this.device.createBindGroup({
-        layout: this.textureBindGroupLayout,
-        entries: [
-          { binding: 0, resource: this.currentStrokeTexture.createView() }
-        ]
-      })
-    }
-
-    // 2. Uniform Bind Group (Group 1) - Use shared mainUniformBindGroup
-    // It is compatible because we used the same layout
-
-    const pass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
-          view: targetView,
-          loadOp: 'load',
-          storeOp: 'store'
-        }
-      ]
-    })
-
-    pass.setPipeline(pipeline)
-    pass.setBindGroup(0, this.compositeTextureBindGroup)
-    pass.setBindGroup(1, this.mainUniformBindGroup)
-    pass.draw(3)
-    pass.end()
-
-    this.device.queue.submit([encoder.finish()])
-  }
-
-  // Direct rendering method
-  public renderStroke(
-    targetView: GPUTextureView,
-    points: { x: number; y: number; pressure: number }[],
-    settings: {
-      size: number
-      opacity: number
-      hardness: number
-      color: [number, number, number]
-      width: number
-      height: number
-      brushShape: number
-    }
-  ) {
-    this.renderStrokeInternal(targetView, this.renderPipeline, points, settings)
-  }
-
-  private renderStrokeInternal(
-    targetView: GPUTextureView,
-    pipeline: GPURenderPipeline,
-    points: { x: number; y: number; pressure: number }[],
-    settings: {
-      size: number
-      opacity: number
-      hardness: number
-      color: [number, number, number]
-      width: number
-      height: number
-      brushShape: number
-    }
-  ) {
-    if (points.length === 0) return
-
-    // 1. Update Uniforms
-    const buffer = new ArrayBuffer(UNIFORM_SIZE)
-    const f32 = new Float32Array(buffer)
-    const u32 = new Uint32Array(buffer)
-
-    f32[0] = settings.color[0]
-    f32[1] = settings.color[1]
-    f32[2] = settings.color[2]
-    f32[3] = settings.opacity
-    f32[4] = settings.hardness
-    f32[5] = 0 // Padding
-    f32[6] = settings.width
-    f32[7] = settings.height
-    u32[8] = settings.brushShape
-    this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
-
-    // 2. Batch Rendering
-    let processedPoints = 0
-    while (processedPoints < points.length) {
-      const batchSize = Math.min(points.length - processedPoints, MAX_STROKES)
-      const iData = new Float32Array(batchSize * 4)
-
-      for (let i = 0; i < batchSize; i++) {
-        const p = points[processedPoints + i]
-        iData[i * 4 + 0] = p.x
-        iData[i * 4 + 1] = p.y
-        iData[i * 4 + 2] = settings.size
-        iData[i * 4 + 3] = p.pressure
-      }
-
-      this.device.queue.writeBuffer(this.instanceBuffer, 0, iData)
-
-      // 3. Render Pass
-      const encoder = this.device.createCommandEncoder()
-      const pass = encoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: targetView,
-            loadOp: 'load',
-            storeOp: 'store'
-          }
-        ]
-      })
-
-      pass.setPipeline(pipeline)
-      pass.setBindGroup(0, this.mainUniformBindGroup)
-      pass.setVertexBuffer(0, this.quadVertexBuffer)
-      pass.setVertexBuffer(1, this.instanceBuffer)
-      pass.setIndexBuffer(this.indexBuffer, 'uint16')
-      pass.drawIndexed(6, batchSize)
-      pass.end()
-
-      this.device.queue.submit([encoder.finish()])
-
-      processedPoints += batchSize
-    }
-  }
-
-  // Blit the accumulated stroke to the preview canvas
-  public blitToCanvas(
-    destinationCtx: GPUCanvasContext,
-    settings: {
-      opacity: number
-      color: [number, number, number]
-      hardness: number
-      screenSize: [number, number]
-      brushShape: number
-      isErasing?: boolean
-    },
-    backgroundTexture?: GPUTexture
-  ) {
-    const encoder = this.device.createCommandEncoder()
-    const destView = destinationCtx.getCurrentTexture().createView()
-
-    if (backgroundTexture) {
-      // Draw background texture to allow erasing effect on existing content
-      if (
-        this.lastBackgroundTexture !== backgroundTexture ||
-        !this.backgroundBindGroup
-      ) {
-        this.backgroundBindGroup = this.device.createBindGroup({
-          layout: this.textureBindGroupLayout,
-          entries: [{ binding: 0, resource: backgroundTexture.createView() }]
-        })
-        this.lastBackgroundTexture = backgroundTexture
-      }
-
-      const pass = encoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: destView,
-            loadOp: 'clear', // Clear attachment before drawing
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            storeOp: 'store'
-          }
-        ]
-      })
-      pass.setPipeline(this.blitPipeline)
-      pass.setBindGroup(0, this.backgroundBindGroup)
-      pass.draw(3)
-      pass.end()
-    } else {
-      // Clear the destination texture
-      const clearPass = encoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: destView,
-            loadOp: 'clear',
-            clearValue: { r: 0, g: 0, b: 0, a: 0 },
-            storeOp: 'store'
-          }
-        ]
-      })
-      clearPass.end()
-    }
-
-    // Draw the accumulated stroke
-    if (this.currentStrokeTexture) {
-      // Update uniforms for the preview pass
-      const buffer = new ArrayBuffer(UNIFORM_SIZE)
-      const f32 = new Float32Array(buffer)
-      const u32 = new Uint32Array(buffer)
-
-      f32[0] = settings.color[0]
-      f32[1] = settings.color[1]
-      f32[2] = settings.color[2]
-      f32[3] = settings.opacity
-      f32[4] = settings.hardness
-      f32[5] = 0 // Padding
-      f32[6] = settings.screenSize[0]
-      f32[7] = settings.screenSize[1]
-      u32[8] = settings.brushShape
-      this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
-
-      // Select preview pipeline based on operation
-      const pipeline = settings.isErasing
-        ? this.erasePipelinePreview
-        : this.compositePipelinePreview
-
-      // 1. Texture Bind Group (Group 0)
-      if (!this.previewTextureBindGroup) {
-        this.previewTextureBindGroup = this.device.createBindGroup({
-          layout: this.textureBindGroupLayout,
-          entries: [
-            { binding: 0, resource: this.currentStrokeTexture.createView() }
-          ]
-        })
-      }
-
-      // 2. Uniform Bind Group (Group 1) - Use shared mainUniformBindGroup
-
-      const passStroke = encoder.beginRenderPass({
-        colorAttachments: [
-          {
-            view: destView,
-            loadOp: 'load', // Load the previous pass result
-            storeOp: 'store'
-          }
-        ]
-      })
-      passStroke.setPipeline(pipeline)
-      passStroke.setBindGroup(0, this.previewTextureBindGroup)
-      passStroke.setBindGroup(1, this.mainUniformBindGroup)
-      passStroke.draw(3)
-      passStroke.end()
-    }
-
-    this.device.queue.submit([encoder.finish()])
-  }
-
-  // Clear the preview canvas
-  public clearPreview(destinationCtx: GPUCanvasContext) {
-    const encoder = this.device.createCommandEncoder()
-    const pass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
-          view: destinationCtx.getCurrentTexture().createView(),
-          loadOp: 'clear',
-          clearValue: { r: 0, g: 0, b: 0, a: 0 },
-          storeOp: 'store'
-        }
-      ]
-    })
-    pass.end()
-    this.device.queue.submit([encoder.finish()])
-  }
-
-  public prepareReadback(texture: GPUTexture, outputBuffer: GPUBuffer) {
-    if (
-      this.lastReadbackTexture !== texture ||
-      this.lastReadbackBuffer !== outputBuffer ||
-      !this.readbackBindGroup
-    ) {
-      this.readbackBindGroup = this.device.createBindGroup({
-        layout: this.readbackPipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: texture.createView() },
-          { binding: 1, resource: { buffer: outputBuffer } }
-        ]
-      })
-      this.lastReadbackTexture = texture
-      this.lastReadbackBuffer = outputBuffer
-    }
-
-    const encoder = this.device.createCommandEncoder()
-    const pass = encoder.beginComputePass()
-    pass.setPipeline(this.readbackPipeline)
-    pass.setBindGroup(0, this.readbackBindGroup)
-
-    const width = texture.width
-    const height = texture.height
-    // Dispatch workgroups based on texture dimensions (8x8 block size)
-    pass.dispatchWorkgroups(Math.ceil(width / 8), Math.ceil(height / 8))
-    pass.end()
-
-    this.device.queue.submit([encoder.finish()])
-  }
-
-  public destroy() {
-    this.quadVertexBuffer.destroy()
-    this.indexBuffer.destroy()
-    this.instanceBuffer.destroy()
-    this.uniformBuffer.destroy()
-    if (this.currentStrokeTexture) this.currentStrokeTexture.destroy()
-
-    // Clear cached bind groups
-    this.compositeTextureBindGroup = null
-    this.previewTextureBindGroup = null
-    this.readbackBindGroup = null
-    this.backgroundBindGroup = null
-    this.lastReadbackTexture = null
-    this.lastReadbackBuffer = null
-    this.lastBackgroundTexture = null
-  }
-}

src/composables/maskeditor/gpu/brushShaders.ts

@@ -1,171 +0,0 @@
-import tgpu from 'typegpu'
-import * as d from 'typegpu/data'
-import { BrushUniforms } from './gpuSchema'
-
-const VertexOutput = d.struct({
-  position: d.builtin.position,
-  localUV: d.location(0, d.vec2f),
-  color: d.location(1, d.vec3f),
-  opacity: d.location(2, d.f32),
-  hardness: d.location(3, d.f32)
-})
-
-const brushVertexTemplate = `
-@group(0) @binding(0) var<uniform> globals: BrushUniforms;
-
-@vertex
-fn vs(
-  @location(0) quadPos: vec2<f32>,
-  @location(1) pos: vec2<f32>,
-  @location(2) size: f32,
-  @location(3) pressure: f32
-) -> VertexOutput {
-  // Convert diameter to radius
-  let radius = size * pressure;
-  let pixelPos = pos + (quadPos * radius);
-  
-  // Convert pixel coordinates to Normalized Device Coordinates (NDC)
-  let ndcX = (pixelPos.x / globals.screenSize.x) * 2.0 - 1.0;
-  let ndcY = 1.0 - ((pixelPos.y / globals.screenSize.y) * 2.0);  // Flip Y axis for WebGPU coordinate system
-
-  return VertexOutput(
-    vec4<f32>(ndcX, ndcY, 0.0, 1.0),
-    quadPos,
-    globals.brushColor,
-    pressure * globals.brushOpacity,
-    globals.hardness
-  );
-}
-`
-
-export const brushVertex = tgpu.resolve({
-  template: brushVertexTemplate,
-  externals: {
-    BrushUniforms,
-    VertexOutput
-  }
-})
-
-const brushFragmentTemplate = `
-@group(0) @binding(0) var<uniform> globals: BrushUniforms;
-
-@fragment
-fn fs(v: VertexOutput) -> @location(0) vec4<f32> {
-  var dist: f32;
-  if (globals.brushShape == 1u) {
-    // Calculate Chebyshev distance for square shape
-    dist = max(abs(v.localUV.x), abs(v.localUV.y));
-  } else {
-    // Calculate Euclidean distance for circle shape
-    dist = length(v.localUV);
-  }
-
-  if (dist > 1.0) { discard; }
-
-  // Calculate alpha with hardness and anti-aliasing
-  let edgeWidth = fwidth(dist);
-  let startFade = min(v.hardness, 1.0 - edgeWidth * 2.0);
-  let linearAlpha = 1.0 - smoothstep(startFade, 1.0, dist);
-  // Apply quadratic falloff for smoother edges
-  let alphaShape = pow(linearAlpha, 2.0);
-  
-  // Return premultiplied alpha color
-  let alpha = alphaShape * v.opacity;
-  return vec4<f32>(v.color * alpha, alpha);
-}
-`
-
-export const brushFragment = tgpu.resolve({
-  template: brushFragmentTemplate,
-  externals: {
-    VertexOutput,
-    BrushUniforms
-  }
-})
-
-const blitShaderTemplate = `
-@vertex fn vs(@builtin(vertex_index) vIdx: u32) -> @builtin(position) vec4<f32> {
-  var pos = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0)
-  );
-  return vec4<f32>(pos[vIdx], 0.0, 1.0);
-}
-
-@group(0) @binding(0) var myTexture: texture_2d<f32>;
-
-@fragment fn fs(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
-  let c = textureLoad(myTexture, vec2<i32>(pos.xy), 0);
-  // Treat texture as premultiplied to prevent double-darkening on overlaps
-  return c;
-}
-`
-
-export const blitShader = tgpu.resolve({
-  template: blitShaderTemplate,
-  externals: {}
-})
-
-const compositeShaderTemplate = `
-@vertex fn vs(@builtin(vertex_index) vIdx: u32) -> @builtin(position) vec4<f32> {
-  var pos = array<vec2<f32>, 3>(
-    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0)
-  );
-  return vec4<f32>(pos[vIdx], 0.0, 1.0);
-}
-
-@group(0) @binding(0) var myTexture: texture_2d<f32>;
-@group(1) @binding(0) var<uniform> globals: BrushUniforms;
-
-@fragment fn fs(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
-  let sampled = textureLoad(myTexture, vec2<i32>(pos.xy), 0);
-  // Apply global brush opacity to accumulated coverage
-  return sampled * globals.brushOpacity;
-}
-`
-
-export const compositeShader = tgpu.resolve({
-  template: compositeShaderTemplate,
-  externals: {
-    BrushUniforms
-  }
-})
-
-const readbackShaderTemplate = `
-@group(0) @binding(0) var inputTex: texture_2d<f32>;
-@group(0) @binding(1) var<storage, read_write> outputBuf: array<u32>;
-
-@compute @workgroup_size(8, 8)
-fn main(@builtin(global_invocation_id) id: vec3<u32>) {
-  let dims = textureDimensions(inputTex);
-  if (id.x >= dims.x || id.y >= dims.y) { return; }
-
-  let color = textureLoad(inputTex, vec2<i32>(id.xy), 0);
-  
-  var r = color.r;
-  var g = color.g;
-  var b = color.b;
-  let a = color.a;
-
-  if (a > 0.0) {
-    r = r / a;
-    g = g / a;
-    b = b / a;
-  }
-
-  let ir = u32(clamp(r * 255.0, 0.0, 255.0));
-  let ig = u32(clamp(g * 255.0, 0.0, 255.0));
-  let ib = u32(clamp(b * 255.0, 0.0, 255.0));
-  let ia = u32(clamp(a * 255.0, 0.0, 255.0));
-
-  // Pack RGBA channels into a single u32 (Little Endian)
-  let packed = ir | (ig << 8u) | (ib << 16u) | (ia << 24u);
-
-  let index = id.y * dims.x + id.x;
-  outputBuf[index] = packed;
-}
-`
-
-export const readbackShader = tgpu.resolve({
-  template: readbackShaderTemplate,
-  externals: {}
-})

src/composables/maskeditor/gpu/gpuSchema.ts

@@ -1,17 +0,0 @@
-import * as d from 'typegpu/data'
-
-// Global brush uniforms
-export const BrushUniforms = d.struct({
-  brushColor: d.vec3f,
-  brushOpacity: d.f32,
-  hardness: d.f32,
-  screenSize: d.vec2f,
-  brushShape: d.u32 // 0: Circle, 1: Square
-})
-
-// Per-point instance data
-export const StrokePoint = d.struct({
-  pos: d.location(0, d.vec2f), // Center position
-  size: d.location(1, d.f32), // Brush radius
-  pressure: d.location(2, d.f32) // Pressure value (0.0 - 1.0)
-})

src/composables/maskeditor/splineUtils.ts

@@ -1,126 +0,0 @@
-import type { Point } from '@/extensions/core/maskeditor/types'
-
-/**
- * Evaluates a Catmull-Rom spline at parameter t between p1 and p2
- * @param p0 Previous control point
- * @param p1 Start point of the curve segment
- * @param p2 End point of the curve segment
- * @param p3 Next control point
- * @param t Parameter in range [0, 1]
- * @returns Interpolated point on the curve
- */
-export function catmullRomSpline(
-  p0: Point,
-  p1: Point,
-  p2: Point,
-  p3: Point,
-  t: number
-): Point {
-  // Centripetal Catmull-Rom Spline (alpha = 0.5) to prevent loops and overshoots
-  const alpha = 0.5
-
-  const getT = (t: number, p0: Point, p1: Point) => {
-    const d = Math.hypot(p1.x - p0.x, p1.y - p0.y)
-    return t + Math.pow(d, alpha)
-  }
-
-  const t0 = 0
-  const t1 = getT(t0, p0, p1)
-  const t2 = getT(t1, p1, p2)
-  const t3 = getT(t2, p2, p3)
-
-  // Map normalized t to parameter range
-  const tInterp = t1 + (t2 - t1) * t
-
-  // Safe interpolation for coincident points
-  const interp = (
-    pA: Point,
-    pB: Point,
-    tA: number,
-    tB: number,
-    t: number
-  ): Point => {
-    if (Math.abs(tB - tA) < 0.0001) return pA
-    const k = (t - tA) / (tB - tA)
-    return add(mul(pA, 1 - k), mul(pB, k))
-  }
-
-  // Barry-Goldman pyramidal interpolation
-  const A1 = interp(p0, p1, t0, t1, tInterp)
-  const A2 = interp(p1, p2, t1, t2, tInterp)
-  const A3 = interp(p2, p3, t2, t3, tInterp)
-
-  const B1 = interp(A1, A2, t0, t2, tInterp)
-  const B2 = interp(A2, A3, t1, t3, tInterp)
-
-  const C = interp(B1, B2, t1, t2, tInterp)
-
-  return C
-}
-
-function add(p1: Point, p2: Point): Point {
-  return { x: p1.x + p2.x, y: p1.y + p2.y }
-}
-
-function mul(p: Point, s: number): Point {
-  return { x: p.x * s, y: p.y * s }
-}
-
-/**
- * Resamples a curve segment with a starting offset (remainder from previous segment).
- * Returns the resampled points and the new remainder distance.
- *
- * @param points Points defining the curve segment
- * @param spacing Desired spacing between points
- * @param startOffset Distance to travel before placing the first point (remainder)
- * @returns Object containing points and new remainder
- */
-export function resampleSegment(
-  points: Point[],
-  spacing: number,
-  startOffset: number
-): { points: Point[]; remainder: number } {
-  if (points.length === 0) return { points: [], remainder: startOffset }
-
-  const result: Point[] = []
-  let currentDist = 0
-  let nextSampleDist = startOffset
-
-  // Iterate through segment points
-  for (let i = 0; i < points.length - 1; i++) {
-    const p1 = points[i]
-    const p2 = points[i + 1]
-
-    const dx = p2.x - p1.x
-    const dy = p2.y - p1.y
-    const segmentLen = Math.hypot(dx, dy)
-
-    // Handle zero-length segments
-    if (segmentLen < 0.0001) {
-      while (nextSampleDist <= currentDist) {
-        result.push(p1)
-        nextSampleDist += spacing
-      }
-      continue
-    }
-
-    // Generate samples within the segment
-    while (nextSampleDist <= currentDist + segmentLen) {
-      const t = (nextSampleDist - currentDist) / segmentLen
-
-      // Interpolate
-      const x = p1.x + t * dx
-      const y = p1.y + t * dy
-      result.push({ x, y })
-
-      nextSampleDist += spacing
-    }
-
-    currentDist += segmentLen
-  }
-
-  // Calculate remainder distance for the next segment
-  const remainder = nextSampleDist - currentDist
-
-  return { points: result, remainder }
-}

src/composables/maskeditor/useCanvasHistory.ts

@@ -4,9 +4,7 @@ import { useMaskEditorStore } from '@/stores/maskEditorStore'
 export function useCanvasHistory(maxStates = 20) {
   const store = useMaskEditorStore()
 
-  const states = ref<
-    { mask: ImageData | ImageBitmap; rgb: ImageData | ImageBitmap }[]
-  >([])
+  const states = ref<{ mask: ImageData; rgb: ImageData }[]>([])
   const currentStateIndex = ref(-1)
   const initialized = ref(false)
 
@@ -55,10 +53,7 @@ export function useCanvasHistory(maxStates = 20) {
     initialized.value = true
   }
 
-  const saveState = (
-    providedMaskData?: ImageData | ImageBitmap,
-    providedRgbData?: ImageData | ImageBitmap
-  ) => {
+  const saveState = () => {
     const maskCtx = store.maskCtx
     const rgbCtx = store.rgbCtx
     const maskCanvas = store.maskCanvas
@@ -73,32 +68,23 @@ export function useCanvasHistory(maxStates = 20) {
 
     states.value = states.value.slice(0, currentStateIndex.value + 1)
 
-    let maskState: ImageData | ImageBitmap
-    let rgbState: ImageData | ImageBitmap
-
-    if (providedMaskData && providedRgbData) {
-      maskState = providedMaskData
-      rgbState = providedRgbData
-    } else {
-      maskState = maskCtx.getImageData(
-        0,
-        0,
-        maskCanvas.width,
-        maskCanvas.height
-      )
-      rgbState = rgbCtx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height)
-    }
-
+    const maskState = maskCtx.getImageData(
+      0,
+      0,
+      maskCanvas.width,
+      maskCanvas.height
+    )
+    const rgbState = rgbCtx.getImageData(
+      0,
+      0,
+      rgbCanvas.width,
+      rgbCanvas.height
+    )
     states.value.push({ mask: maskState, rgb: rgbState })
     currentStateIndex.value++
 
     if (states.value.length > maxStates) {
-      const removed = states.value.shift()
-      // Cleanup ImageBitmaps to avoid memory leaks
-      if (removed) {
-        if (removed.mask instanceof ImageBitmap) removed.mask.close()
-        if (removed.rgb instanceof ImageBitmap) removed.rgb.close()
-      }
+      states.value.shift()
       currentStateIndex.value--
     }
   }
@@ -123,35 +109,16 @@ export function useCanvasHistory(maxStates = 20) {
     restoreState(states.value[currentStateIndex.value])
   }
 
-  const restoreState = (state: {
-    mask: ImageData | ImageBitmap
-    rgb: ImageData | ImageBitmap
-  }) => {
+  const restoreState = (state: { mask: ImageData; rgb: ImageData }) => {
     const maskCtx = store.maskCtx
     const rgbCtx = store.rgbCtx
     if (!maskCtx || !rgbCtx) return
 
-    if (state.mask instanceof ImageBitmap) {
-      maskCtx.clearRect(0, 0, state.mask.width, state.mask.height)
-      maskCtx.drawImage(state.mask, 0, 0)
-    } else {
-      maskCtx.putImageData(state.mask, 0, 0)
-    }
-
-    if (state.rgb instanceof ImageBitmap) {
-      rgbCtx.clearRect(0, 0, state.rgb.width, state.rgb.height)
-      rgbCtx.drawImage(state.rgb, 0, 0)
-    } else {
-      rgbCtx.putImageData(state.rgb, 0, 0)
-    }
+    maskCtx.putImageData(state.mask, 0, 0)
+    rgbCtx.putImageData(state.rgb, 0, 0)
   }
 
   const clearStates = () => {
-    // Cleanup bitmaps
-    states.value.forEach((state) => {
-      if (state.mask instanceof ImageBitmap) state.mask.close()
-      if (state.rgb instanceof ImageBitmap) state.rgb.close()
-    })
     states.value = []
     currentStateIndex.value = -1
     initialized.value = false
@@ -160,7 +127,6 @@ export function useCanvasHistory(maxStates = 20) {
   return {
     canUndo,
     canRedo,
-    currentStateIndex,
     saveInitialState,
     saveState,
     undo,

src/composables/maskeditor/useMaskEditor.ts

@@ -1,48 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { useDialogStore } from '@/stores/dialogStore'
-import TopBarHeader from '@/components/maskeditor/dialog/TopBarHeader.vue'
-import MaskEditorContent from '@/components/maskeditor/MaskEditorContent.vue'
-
-export function useMaskEditor() {
-  const openMaskEditor = (node: LGraphNode) => {
-    if (!node) {
-      console.error('[MaskEditor] No node provided')
-      return
-    }
-
-    if (!node.imgs?.length && node.previewMediaType !== 'image') {
-      console.error('[MaskEditor] Node has no images')
-      return
-    }
-
-    useDialogStore().showDialog({
-      key: 'global-mask-editor',
-      headerComponent: TopBarHeader,
-      component: MaskEditorContent,
-      props: {
-        node
-      },
-      dialogComponentProps: {
-        style: 'width: 90vw; height: 90vh;',
-        modal: true,
-        maximizable: true,
-        closable: true,
-        pt: {
-          root: {
-            class: 'mask-editor-dialog flex flex-col'
-          },
-          content: {
-            class: 'flex flex-col min-h-0 flex-1 !p-0'
-          },
-          header: {
-            class: '!p-2'
-          }
-        }
-      }
-    })
-  }
-
-  return {
-    openMaskEditor
-  }
-}

src/composables/maskeditor/useMaskEditorLoader.ts

@@ -80,64 +80,21 @@ export function useMaskEditorLoader() {
     try {
       validateNode(node)
 
-      let nodeImageUrl = getNodeImageUrl(node)
+      const nodeImageUrl = getNodeImageUrl(node)
 
-      let nodeImageRef = parseImageRef(nodeImageUrl)
+      const nodeImageRef = parseImageRef(nodeImageUrl)
 
       let widgetFilename: string | undefined
       if (node.widgets) {
         const imageWidget = node.widgets.find((w) => w.name === 'image')
-        if (imageWidget) {
-          if (typeof imageWidget.value === 'string') {
-            widgetFilename = imageWidget.value
-          } else if (
-            typeof imageWidget.value === 'object' &&
-            imageWidget.value &&
-            'filename' in imageWidget.value &&
-            typeof imageWidget.value.filename === 'string'
-          ) {
-            widgetFilename = imageWidget.value.filename
-          }
-        }
-      }
-
-      // If we have a widget filename, we should prioritize it over the node image
-      // because the node image might be stale (e.g. from a previous save)
-      // while the widget value reflects the current selection.
-      if (widgetFilename) {
-        try {
-          // Parse the widget value which might be in format "subfolder/filename [type]" or just "filename"
-          let filename = widgetFilename
-          let subfolder: string | undefined = undefined
-          let type: string | undefined = 'input' // Default to input for widget values
-
-          // Check for type in brackets at the end
-          const typeMatch = filename.match(/ \[([^\]]+)\]$/)
-          if (typeMatch) {
-            type = typeMatch[1]
-            filename = filename.substring(
-              0,
-              filename.length - typeMatch[0].length
-            )
-          }
-
-          // Check for subfolder (forward slash separator)
-          const lastSlashIndex = filename.lastIndexOf('/')
-          if (lastSlashIndex !== -1) {
-            subfolder = filename.substring(0, lastSlashIndex)
-            filename = filename.substring(lastSlashIndex + 1)
-          }
-
-          nodeImageRef = {
-            filename,
-            type,
-            subfolder
-          }
-
-          // We also need to update nodeImageUrl to match this new ref so subsequent logic works
-          nodeImageUrl = mkFileUrl({ ref: nodeImageRef })
-        } catch (e) {
-          console.warn('Failed to parse widget filename as ref', e)
+        if (
+          imageWidget &&
+          typeof imageWidget.value === 'object' &&
+          imageWidget.value &&
+          'filename' in imageWidget.value &&
+          typeof imageWidget.value.filename === 'string'
+        ) {
+          widgetFilename = imageWidget.value.filename
         }
       }
 

src/composables/useCoreCommands.ts

@@ -50,6 +50,7 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useEagerExecutionStore } from '@/stores/eagerExecutionStore'
 import {
   getAllNonIoNodesInSubgraph,
   getExecutionIdsForSelectedNodes
@@ -1225,6 +1226,25 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-database',
       label: 'toggle linear mode',
       function: () => (canvasStore.linearMode = !canvasStore.linearMode)
+    },
+    {
+      id: 'Comfy.ToggleEagerExecution',
+      icon: 'pi pi-bolt',
+      label: 'Toggle Eager Execution',
+      function: async () => {
+        const eagerExecutionStore = useEagerExecutionStore()
+        await eagerExecutionStore.toggle()
+        toastStore.add({
+          severity: 'info',
+          summary: eagerExecutionStore.enabled
+            ? t('Eager execution enabled')
+            : t('Eager execution disabled'),
+          detail: eagerExecutionStore.enabled
+            ? t('Nodes will auto-execute when ancestors change')
+            : t('Auto-execution disabled'),
+          life: 3000
+        })
+      }
     }
   ]
 

src/constants/coreMenuCommands.ts

@@ -1,5 +1,3 @@
-import { isCloud } from '@/platform/distribution/types'
-
 export const CORE_MENU_COMMANDS = [
   [[], ['Comfy.NewBlankWorkflow']],
   [[], []], // Separator after New
@@ -16,16 +14,13 @@ export const CORE_MENU_COMMANDS = [
   [['Edit'], ['Comfy.Undo', 'Comfy.Redo']],
   [['Edit'], ['Comfy.ClearWorkflow']],
   [['Edit'], ['Comfy.OpenClipspace']],
+  [['Edit'], ['Comfy.RefreshNodeDefinitions']],
   [
     ['Edit'],
     [
       'Comfy.RefreshNodeDefinitions',
-      ...(isCloud
-        ? []
-        : [
-            'Comfy.Memory.UnloadModels',
-            'Comfy.Memory.UnloadModelsAndExecutionCache'
-          ])
+      'Comfy.Memory.UnloadModels',
+      'Comfy.Memory.UnloadModelsAndExecutionCache'
     ]
   ],
   [['View'], []],

src/extensions/core/maskeditor.ts

@@ -5,9 +5,10 @@ import { app } from '@/scripts/app'
 import { ComfyApp } from '@/scripts/app'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import MaskEditorContent from '@/components/maskeditor/MaskEditorContent.vue'
+import TopBarHeader from '@/components/maskeditor/dialog/TopBarHeader.vue'
 import { MaskEditorDialogOld } from './maskEditorOld'
 import { ClipspaceDialog } from './clipspace'
-import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 
 function openMaskEditor(node: LGraphNode): void {
   if (!node) {
@@ -25,7 +26,32 @@ function openMaskEditor(node: LGraphNode): void {
   )
 
   if (useNewEditor) {
-    useMaskEditor().openMaskEditor(node)
+    // Use new refactored editor
+    useDialogStore().showDialog({
+      key: 'global-mask-editor',
+      headerComponent: TopBarHeader,
+      component: MaskEditorContent,
+      props: {
+        node
+      },
+      dialogComponentProps: {
+        style: 'width: 90vw; height: 90vh;',
+        modal: true,
+        maximizable: true,
+        closable: true,
+        pt: {
+          root: {
+            class: 'mask-editor-dialog flex flex-col'
+          },
+          content: {
+            class: 'flex flex-col min-h-0 flex-1 !p-0'
+          },
+          header: {
+            class: '!p-2'
+          }
+        }
+      }
+    })
   } else {
     // Use old editor
     ComfyApp.copyToClipspace(node)

src/extensions/core/maskeditor/types.ts

@@ -61,5 +61,5 @@ export interface Brush {
   size: number
   opacity: number
   hardness: number
-  stepSize: number
+  smoothingPrecision: number
 }

src/lib/litegraph/src/LGraph.ts

@@ -79,7 +79,7 @@ export type {
   LGraphTriggerParam
 } from './types/graphTriggers'
 
-export type RendererType = 'LG' | 'Vue'
+export type rendererType = 'LG' | 'Vue'
 
 export interface LGraphState {
   lastGroupId: number
@@ -106,7 +106,7 @@ export interface LGraphExtra extends Dictionary<unknown> {
   reroutes?: SerialisableReroute[]
   linkExtensions?: { id: number; parentId: number | undefined }[]
   ds?: DragAndScaleState
-  workflowRendererVersion?: RendererType
+  workflowRendererVersion?: rendererType
 }
 
 export interface BaseLGraph {

src/locales/en/main.json

@@ -1186,8 +1186,7 @@
     "Vue Nodes": "Vue Nodes",
     "Canvas Navigation": "Canvas Navigation",
     "PlanCredits": "Plan & Credits",
-    "VueNodes": "Vue Nodes",
-    "Nodes 2_0": "Nodes 2.0"
+    "VueNodes": "Vue Nodes"
   },
   "serverConfigItems": {
     "listen": {
@@ -2199,10 +2198,6 @@
   "vueNodesMigrationMainMenu": {
     "message": "Switch back to Nodes 2.0 anytime from the main menu."
   },
-  "linearMode": {
-    "share": "Share",
-    "openWorkflow": "Open Workflow"
-  },
   "missingNodes": {
     "cloud": {
       "title": "These nodes aren't available on Comfy Cloud yet",

src/locales/en/nodeDefs.json

@@ -2001,7 +2001,7 @@
     }
   },
   "EmptyHunyuanLatentVideo": {
-    "display_name": "Empty HunyuanVideo 1.0 Latent",
+    "display_name": "EmptyHunyuanLatentVideo",
     "inputs": {
       "width": {
         "name": "width"
@@ -2023,7 +2023,7 @@
     }
   },
   "EmptyHunyuanVideo15Latent": {
-    "display_name": "Empty HunyuanVideo 1.5 Latent",
+    "display_name": "EmptyHunyuanVideo15Latent",
     "inputs": {
       "width": {
         "name": "width"

src/locales/en/settings.json

@@ -335,11 +335,11 @@
     "name": "Validate workflows"
   },
   "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "Auto-scale layout (Nodes 2.0)",
+    "name": "Auto-scale layout (Vue nodes)",
     "tooltip": "Automatically scale node positions when switching to Vue rendering to prevent overlap"
   },
   "Comfy_VueNodes_Enabled": {
-    "name": "Modern Node Design (Nodes 2.0)",
+    "name": "Modern Node Design (Vue Nodes)",
     "tooltip": "Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering."
   },
   "Comfy_WidgetControlMode": {

src/platform/settings/components/SettingDialogContent.vue

@@ -107,17 +107,10 @@ const {
 
 const authActions = useFirebaseAuthActions()
 
-// Get max sortOrder from settings in a group
-const getGroupSortOrder = (group: SettingTreeNode): number =>
-  Math.max(0, ...flattenTree<SettingParams>(group).map((s) => s.sortOrder ?? 0))
-
 // Sort groups for a category
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
   return [...(category.children ?? [])]
-    .sort((a, b) => {
-      const orderDiff = getGroupSortOrder(b) - getGroupSortOrder(a)
-      return orderDiff !== 0 ? orderDiff : a.label.localeCompare(b.label)
-    })
+    .sort((a, b) => a.label.localeCompare(b.label))
     .map((group) => ({
       label: group.label,
       settings: flattenTree<SettingParams>(group).sort((a, b) => {

src/platform/settings/constants/coreSettings.ts

@@ -1082,28 +1082,24 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
 
   /**
-   * Nodes 2.0 Settings
+   * Vue Node System Settings
    */
   {
     id: 'Comfy.VueNodes.Enabled',
-    category: ['Comfy', 'Nodes 2.0', 'VueNodesEnabled'],
-    name: 'Modern Node Design (Nodes 2.0)',
+    name: 'Modern Node Design (Vue Nodes)',
     type: 'boolean',
     tooltip:
       'Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering.',
     defaultValue: false,
-    sortOrder: 100,
     experimental: true,
     versionAdded: '1.27.1'
   },
   {
     id: 'Comfy.VueNodes.AutoScaleLayout',
-    category: ['Comfy', 'Nodes 2.0', 'AutoScaleLayout'],
-    name: 'Auto-scale layout (Nodes 2.0)',
+    name: 'Auto-scale layout (Vue nodes)',
     tooltip:
       'Automatically scale node positions when switching to Vue rendering to prevent overlap',
     type: 'boolean',
-    sortOrder: 50,
     experimental: true,
     defaultValue: true,
     versionAdded: '1.30.3'

src/platform/settings/settingStore.ts

@@ -38,9 +38,8 @@ function onChange(
   }
   // Backward compatibility with old settings dialog.
   // Some extensions still listens event emitted by the old settings dialog.
-  if (setting) {
-    app.ui.settings.dispatchChange(setting.id, newValue, oldValue)
-  }
+  // @ts-expect-error 'setting' is possibly 'undefined'.ts(18048)
+  app.ui.settings.dispatchChange(setting.id, newValue, oldValue)
 }
 
 export const useSettingStore = defineStore('setting', () => {

src/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -5,7 +5,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="cn('-translate-x-1/2 w-3', errorClassesDot)"
+      :class="cn('-translate-x-1/2', 'w-3', errorClassesDot)"
       @pointerdown="onPointerDown"
     />
 
@@ -48,7 +48,6 @@ interface InputSlotProps {
   connected?: boolean
   compatible?: boolean
   dotOnly?: boolean
-  socketless?: boolean
 }
 
 const props = defineProps<InputSlotProps>()
@@ -122,8 +121,7 @@ const slotWrapperClass = computed(() =>
       'lg-slot--connected': props.connected,
       'lg-slot--compatible': props.compatible,
       'opacity-40': shouldDim.value
-    },
-    props.socketless && 'pointer-events-none invisible'
+    }
   )
 )
 

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -154,6 +154,7 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 import SlotConnectionDot from '@/renderer/extensions/vueNodes/components/SlotConnectionDot.vue'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
@@ -200,6 +201,13 @@ const { bringNodeToFront } = useNodeZIndex()
 
 useVueElementTracking(() => nodeData.id, 'node')
 
+const transformState = useTransformState()
+if (!transformState) {
+  throw new Error(
+    'TransformState must be provided for node resize functionality'
+  )
+}
+
 const { selectedNodeIds } = storeToRefs(useCanvasStore())
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
@@ -356,24 +364,29 @@ const cornerResizeHandles: CornerResizeHandle[] = [
 
 const MIN_NODE_WIDTH = 225
 
-const { startResize } = useNodeResize((result, element) => {
-  if (isCollapsed.value) return
+const { startResize } = useNodeResize(
+  (result, element) => {
+    if (isCollapsed.value) return
 
-  // Clamp width to minimum to avoid conflicts with CSS min-width
-  const clampedWidth = Math.max(result.size.width, MIN_NODE_WIDTH)
+    // Clamp width to minimum to avoid conflicts with CSS min-width
+    const clampedWidth = Math.max(result.size.width, MIN_NODE_WIDTH)
 
-  // Apply size directly to DOM element - ResizeObserver will pick this up
-  element.style.setProperty('--node-width', `${clampedWidth}px`)
-  element.style.setProperty('--node-height', `${result.size.height}px`)
+    // Apply size directly to DOM element - ResizeObserver will pick this up
+    element.style.setProperty('--node-width', `${clampedWidth}px`)
+    element.style.setProperty('--node-height', `${result.size.height}px`)
 
-  const currentPosition = position.value
-  const deltaX = Math.abs(result.position.x - currentPosition.x)
-  const deltaY = Math.abs(result.position.y - currentPosition.y)
+    const currentPosition = position.value
+    const deltaX = Math.abs(result.position.x - currentPosition.x)
+    const deltaY = Math.abs(result.position.y - currentPosition.y)
 
-  if (deltaX > POSITION_EPSILON || deltaY > POSITION_EPSILON) {
-    moveNodeTo(result.position)
+    if (deltaX > POSITION_EPSILON || deltaY > POSITION_EPSILON) {
+      moveNodeTo(result.position)
+    }
+  },
+  {
+    transformState
   }
-})
+)
 
 const handleResizePointerDown = (direction: ResizeHandleDirection) => {
   return (event: PointerEvent) => {

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -6,7 +6,7 @@
     v-else
     :class="
       cn(
-        'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] has-[.widget-expands]:flex-1 gap-1 pr-3',
+        'lg-node-widgets flex flex-col has-[.widget-expands]:flex-1 gap-1 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
@@ -19,7 +19,7 @@
     <div
       v-for="(widget, index) in processedWidgets"
       :key="`widget-${index}-${widget.name}`"
-      class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch has-[.widget-expands]:flex-1"
+      class="lg-node-widget group flex items-stretch has-[.widget-expands]:flex-1"
     >
       <!-- Widget Input Slot Dot -->
 
@@ -40,7 +40,6 @@
           }"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :index="widget.slotMetadata.index"
-          :socketless="widget.simplified.spec?.socketless"
           dot-only
         />
       </div>
@@ -52,7 +51,7 @@
         :model-value="widget.value"
         :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
         :node-type="nodeType"
-        class="flex-1 col-span-2"
+        class="flex-1"
         @update:model-value="widget.updateHandler"
       />
     </div>
@@ -79,6 +78,8 @@ import {
   getComponent,
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import { app } from '@/scripts/app'
+import { eagerExecutionService } from '@/services/eagerExecutionService'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -171,6 +172,14 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       if (widget.type !== 'asset') {
         widget.callback?.(value)
       }
+
+      // Trigger eager execution for this widget change in Vue Nodes mode
+      if (nodeData?.id) {
+        const node = app.rootGraph?.getNodeById(Number(nodeData.id))
+        if (node) {
+          eagerExecutionService.onNodeChanged(node)
+        }
+      }
     }
 
     const tooltipText = getWidgetTooltip(widget)

src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts

@@ -7,7 +7,12 @@ import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useS
 
 import type { ResizeHandleDirection } from './resizeMath'
 import { createResizeSession, toCanvasDelta } from './resizeMath'
-import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import type { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+
+interface UseNodeResizeOptions {
+  /** Transform state for coordinate conversion */
+  transformState: ReturnType<typeof useTransformState>
+}
 
 interface ResizeCallbackPayload {
   size: Size
@@ -21,9 +26,13 @@ interface ResizeCallbackPayload {
  * Handles pointer capture, coordinate calculations, and size constraints.
  */
 export function useNodeResize(
-  resizeCallback: (payload: ResizeCallbackPayload, element: HTMLElement) => void
+  resizeCallback: (
+    payload: ResizeCallbackPayload,
+    element: HTMLElement
+  ) => void,
+  options: UseNodeResizeOptions
 ) {
-  const transformState = useTransformState()
+  const { transformState } = options
 
   const isResizing = ref(false)
   const resizeStartPointer = ref<Point | null>(null)

src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts

@@ -1,5 +1,5 @@
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import type { LGraph, RendererType } from '@/lib/litegraph/src/LGraph'
+import type { LGraph, rendererType } from '@/lib/litegraph/src/LGraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { createBounds } from '@/lib/litegraph/src/measure'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -13,108 +13,135 @@ import type { SubgraphOutputNode } from '@/lib/litegraph/src/subgraph/SubgraphOu
 const SCALE_FACTOR = 1.2
 
 export function ensureCorrectLayoutScale(
-  renderer: RendererType = 'LG',
+  renderer?: rendererType,
   targetGraph?: LGraph
 ) {
-  const autoScaleLayoutSetting = useSettingStore().get(
+  const settingStore = useSettingStore()
+
+  const autoScaleLayoutSetting = settingStore.get(
     'Comfy.VueNodes.AutoScaleLayout'
   )
 
-  if (!autoScaleLayoutSetting) return
+  if (autoScaleLayoutSetting === false) {
+    return
+  }
+
+  const { shouldRenderVueNodes } = useVueFeatureFlags()
 
   const canvas = comfyApp.canvas
   const graph = targetGraph ?? canvas?.graph
 
-  if (!graph?.nodes) return
+  if (!graph || !graph.nodes) return
 
-  const { shouldRenderVueNodes } = useVueFeatureFlags()
+  // Use renderer from graph, default to 'LG' for the check (but don't modify graph yet)
+  if (!renderer) {
+    // Always assume legacy LG format when unknown (pre-dates this feature)
+    renderer = 'LG'
+  }
 
-  const needsUpscale = renderer === 'LG' && shouldRenderVueNodes.value
-  const needsDownscale = renderer === 'Vue' && !shouldRenderVueNodes.value
+  const doesntNeedScale =
+    (renderer === 'LG' && shouldRenderVueNodes.value === false) ||
+    (renderer === 'Vue' && shouldRenderVueNodes.value === true)
 
-  if (!needsUpscale && !needsDownscale) {
+  if (doesntNeedScale) {
     // Don't scale, but ensure workflowRendererVersion is set for future checks
-    graph.extra.workflowRendererVersion ??= renderer
+    if (!graph.extra.workflowRendererVersion) {
+      graph.extra.workflowRendererVersion = renderer
+    }
     return
   }
 
+  const needsUpscale = renderer === 'LG' && shouldRenderVueNodes.value === true
+  const needsDownscale =
+    renderer === 'Vue' && shouldRenderVueNodes.value === false
+
   const lgBounds = createBounds(graph.nodes)
 
   if (!lgBounds) return
 
-  const [originX, originY] = lgBounds
+  const originX = lgBounds[0]
+  const originY = lgBounds[1]
 
   const lgNodesById = new Map(graph.nodes.map((node) => [node.id, node]))
 
   const yjsMoveNodeUpdates: NodeBoundsUpdate[] = []
 
-  const scaleFactor = needsUpscale ? SCALE_FACTOR : 1 / SCALE_FACTOR
-
-  const onActiveGraph = !targetGraph || targetGraph === canvas?.graph
+  const scaleFactor = needsUpscale
+    ? SCALE_FACTOR
+    : needsDownscale
+      ? 1 / SCALE_FACTOR
+      : 1
 
   //TODO: once we remove the need for LiteGraph.NODE_TITLE_HEIGHT in vue nodes we nned to remove everything here.
   for (const node of graph.nodes) {
     const lgNode = lgNodesById.get(node.id)
     if (!lgNode) continue
 
-    const [oldX, oldY] = lgNode.pos
+    const lgBodyY = lgNode.pos[1]
 
-    const adjustedY = oldY - (needsUpscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
+    const adjustedY = needsDownscale
+      ? lgBodyY - LiteGraph.NODE_TITLE_HEIGHT / 2
+      : lgBodyY
 
-    const relativeX = oldX - originX
+    const relativeX = lgNode.pos[0] - originX
     const relativeY = adjustedY - originY
-
-    const scaledX = originX + relativeX * scaleFactor
+    const newX = originX + relativeX * scaleFactor
     const scaledY = originY + relativeY * scaleFactor
+    const newWidth = lgNode.width * scaleFactor
+    const newHeight = lgNode.height * scaleFactor
 
-    const scaledWidth = lgNode.width * scaleFactor
-    const scaledHeight =
-      lgNode.height * scaleFactor -
-      (needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT)
-
-    const finalY = scaledY + (needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT) // Litegraph Position further down
+    const finalY = needsUpscale
+      ? scaledY + LiteGraph.NODE_TITLE_HEIGHT / 2
+      : scaledY
 
     // Directly update LiteGraph node to ensure immediate consistency
     // Dont need to reference vue directly because the pos and dims are already in yjs
-    lgNode.pos[0] = scaledX
+    lgNode.pos[0] = newX
     lgNode.pos[1] = finalY
-    lgNode.size[0] = scaledWidth
-    lgNode.size[1] = scaledHeight
+    lgNode.size[0] = newWidth
+    lgNode.size[1] =
+      newHeight - (needsDownscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
 
     // Track updates for layout store (only if this is the active graph)
-    if (onActiveGraph) {
+    if (!targetGraph || targetGraph === canvas?.graph) {
       yjsMoveNodeUpdates.push({
         nodeId: String(lgNode.id),
         bounds: {
-          x: scaledX,
+          x: newX,
           y: finalY,
-          width: scaledWidth,
-          height: scaledHeight
+          width: newWidth,
+          height: newHeight - (needsDownscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
         }
       })
     }
   }
 
-  if (onActiveGraph && yjsMoveNodeUpdates.length > 0) {
+  if (
+    (!targetGraph || targetGraph === canvas?.graph) &&
+    yjsMoveNodeUpdates.length > 0
+  ) {
     layoutStore.batchUpdateNodeBounds(yjsMoveNodeUpdates)
   }
 
   for (const reroute of graph.reroutes.values()) {
-    const [oldX, oldY] = reroute.pos
+    const oldX = reroute.pos[0]
+    const oldY = reroute.pos[1]
 
     const relativeX = oldX - originX
     const relativeY = oldY - originY
+    const newX = originX + relativeX * scaleFactor
+    const newY = originY + relativeY * scaleFactor
 
-    const scaledX = originX + relativeX * scaleFactor
-    const scaledY = originY + relativeY * scaleFactor
+    reroute.pos = [newX, newY]
 
-    reroute.pos = [scaledX, scaledY]
-
-    if (onActiveGraph && shouldRenderVueNodes.value) {
+    if (
+      (!targetGraph || targetGraph === canvas?.graph) &&
+      shouldRenderVueNodes.value
+    ) {
       const layoutMutations = useLayoutMutations()
       layoutMutations.moveReroute(
         reroute.id,
-        { x: scaledX, y: scaledY },
+        { x: newX, y: newY },
         { x: oldX, y: oldY }
       )
     }
@@ -126,48 +153,60 @@ export function ensureCorrectLayoutScale(
       graph.outputNode as SubgraphOutputNode
     ]
     for (const ioNode of ioNodes) {
-      const [oldX, oldY] = ioNode.pos
-      const [oldWidth, oldHeight] = ioNode.size
+      const oldX = ioNode.pos[0]
+      const oldY = ioNode.pos[1]
+      const oldWidth = ioNode.size[0]
+      const oldHeight = ioNode.size[1]
 
       const relativeX = oldX - originX
       const relativeY = oldY - originY
+      const newX = originX + relativeX * scaleFactor
+      const newY = originY + relativeY * scaleFactor
+      const newWidth = oldWidth * scaleFactor
+      const newHeight = oldHeight * scaleFactor
 
-      const scaledX = originX + relativeX * scaleFactor
-      const scaledY = originY + relativeY * scaleFactor
-
-      const scaledWidth = oldWidth * scaleFactor
-      const scaledHeight = oldHeight * scaleFactor
-
-      ioNode.pos = [scaledX, scaledY]
-      ioNode.size = [scaledWidth, scaledHeight]
+      ioNode.pos = [newX, newY]
+      ioNode.size = [newWidth, newHeight]
     }
   }
 
   graph.groups.forEach((group) => {
-    const [oldX, oldY] = group.pos
-    const [oldWidth, oldHeight] = group.size
+    const originalPosX = group.pos[0]
+    const originalPosY = group.pos[1]
+    const originalWidth = group.size[0]
+    const originalHeight = group.size[1]
 
-    const adjustedY = oldY - (needsUpscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
+    const adjustedY = needsDownscale
+      ? originalPosY - LiteGraph.NODE_TITLE_HEIGHT
+      : originalPosY
 
-    const relativeX = oldX - originX
+    const relativeX = originalPosX - originX
     const relativeY = adjustedY - originY
 
+    const newWidth = originalWidth * scaleFactor
+    const newHeight = originalHeight * scaleFactor
+
     const scaledX = originX + relativeX * scaleFactor
     const scaledY = originY + relativeY * scaleFactor
 
-    const scaledWidth = oldWidth * scaleFactor
-    const scaledHeight = oldHeight * scaleFactor
-
-    const finalY = scaledY + (needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT)
+    const finalY = needsUpscale
+      ? scaledY + LiteGraph.NODE_TITLE_HEIGHT
+      : scaledY
 
     group.pos = [scaledX, finalY]
-    group.size = [scaledWidth, scaledHeight]
+    group.size = [newWidth, newHeight]
   })
 
-  if (onActiveGraph && canvas) {
+  if ((!targetGraph || targetGraph === canvas?.graph) && canvas) {
     const originScreen = canvas.ds.convertOffsetToCanvas([originX, originY])
     canvas.ds.changeScale(canvas.ds.scale / scaleFactor, originScreen)
   }
 
-  graph.extra.workflowRendererVersion = needsUpscale ? 'Vue' : 'LG'
+  if (needsUpscale) {
+    graph.extra.workflowRendererVersion = 'Vue'
+  }
+
+  if (needsDownscale) {
+    graph.extra.workflowRendererVersion = 'LG'
+  }
 }

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts

@@ -82,11 +82,21 @@ describe('WidgetButton Interactions', () => {
       expect(button.exists()).toBe(true)
     })
 
-    it('renders widget text when name is provided', () => {
+    it('renders widget label when name is provided', () => {
       const widget = createMockWidget()
       const wrapper = mountComponent(widget)
 
-      expect(wrapper.text()).toBe('test_button')
+      const label = wrapper.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.text()).toBe('test_button')
+    })
+
+    it('does not render label when widget name is empty', () => {
+      const widget = createMockWidget({}, undefined, '')
+      const wrapper = mountComponent(widget)
+
+      const label = wrapper.find('label')
+      expect(label.exists()).toBe(false)
     })
 
     it('sets button size to small', () => {

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-secondary text-sm">{{
+      widget.name
+    }}</label>
     <Button
       v-bind="filteredProps"
       :aria-label="widget.name || widget.label"
       size="small"
       @click="handleClick"
-    >
-      <template v-if="widget.name">
-        {{ widget.name }}
-      </template>
-    </Button>
+    />
   </div>
 </template>
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -136,8 +136,8 @@ const outputItems = computed<DropdownItem[]>(() => {
     })
   })
 
-  return Array.from(outputs).map((output) => ({
-    id: `output-${output}`,
+  return Array.from(outputs).map((output, index) => ({
+    id: `output-${index}`,
     mediaSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
     name: output,
     label: getDisplayLabel(output),
@@ -215,14 +215,16 @@ const layoutMode = ref<LayoutMode>(props.defaultLayoutMode ?? 'grid')
 watch(
   modelValue,
   (currentValue) => {
-    if (currentValue === undefined) {
+    if (currentValue !== undefined) {
+      const item = dropdownItems.value.find(
+        (item) => item.name === currentValue
+      )
+      if (item) {
+        selectedSet.value.clear()
+        selectedSet.value.add(item.id)
+      }
+    } else {
       selectedSet.value.clear()
-      return
-    }
-    const item = dropdownItems.value.find((item) => item.name === currentValue)
-    if (item) {
-      selectedSet.value.clear()
-      selectedSet.value.add(item.id)
     }
   },
   { immediate: true }

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue

@@ -13,9 +13,6 @@
       fluid
       data-capture-wheel="true"
       @pointerdown.capture.stop
-      @pointermove.capture.stop
-      @pointerup.capture.stop
-      @contextmenu.capture.stop
     />
     <LODFallback />
   </div>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -32,13 +32,24 @@ const selectedItems = computed(() => {
   return props.items.filter((item) => props.selected.has(item.id))
 })
 
+const chevronClass = computed(() =>
+  cn(
+    'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
+    {
+      'rotate-180': props.isOpen
+    }
+  )
+)
+
 const theButtonStyle = computed(() =>
   cn(
     'border-0 bg-component-node-widget-background outline-none text-text-secondary',
-    props.disabled
-      ? 'cursor-not-allowed'
-      : 'hover:bg-component-node-widget-background-hovered cursor-pointer',
-    selectedItems.value.length > 0 && 'text-text-primary'
+    {
+      'hover:bg-component-node-widget-background-hovered cursor-pointer':
+        !props.disabled,
+      'cursor-not-allowed': props.disabled,
+      'text-text-primary': selectedItems.value.length > 0
+    }
   )
 )
 </script>
@@ -67,21 +78,13 @@ const theButtonStyle = computed(() =>
     >
       <span class="min-w-0 flex-1 px-1 py-2 text-left truncate">
         <span v-if="!selectedItems.length">
-          {{ placeholder }}
+          {{ props.placeholder }}
         </span>
         <span v-else>
           {{ selectedItems.map((item) => item.label ?? item.name).join(', ') }}
         </span>
       </span>
-      <i
-        class="icon-[lucide--chevron-down]"
-        :class="
-          cn(
-            'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
-            isOpen && 'rotate-180'
-          )
-        "
-      />
+      <i class="icon-[lucide--chevron-down]" :class="chevronClass" />
     </button>
     <!-- Open File -->
     <label

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -11,10 +11,8 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
-  >
-    <div class="relative flex h-full min-w-0 items-center">
+  <div class="flex h-[30px] min-w-0 items-center justify-between gap-1">
+    <div class="relative flex h-full min-w-0 w-20 items-center">
       <p
         v-if="widget.name"
         class="lod-toggle flex-1 truncate text-xs font-normal text-node-component-slot-text"

src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts

@@ -236,7 +236,9 @@ export function useRemoteWidget<
    * Add a refresh button to the node that, when clicked, will force the widget to refresh
    */
   function addRefreshButton() {
-    node.addWidget('button', 'refresh', 'refresh', widget.refresh)
+    node.addWidget('button', 'refresh', 'refresh', widget.refresh, {
+      canvasOnly: true
+    })
   }
 
   /**
@@ -261,7 +263,8 @@ export function useRemoteWidget<
         autoRefreshEnabled = value
       },
       {
-        serialize: false
+        serialize: false,
+        canvasOnly: true
       }
     )
 

src/schemas/nodeDefSchema.ts

@@ -29,7 +29,6 @@ export const zBaseInputOptions = z
     defaultInput: z.boolean().optional(),
     forceInput: z.boolean().optional(),
     tooltip: z.string().optional(),
-    socketless: z.boolean().optional(),
     hidden: z.boolean().optional(),
     advanced: z.boolean().optional(),
     widgetType: z.string().optional(),
@@ -228,7 +227,17 @@ export const zComfyNodeDef = z.object({
    * Used to ensure consistent widget ordering regardless of JSON serialization.
    * Keys are 'required', 'optional', etc., values are arrays of input names.
    */
-  input_order: z.record(z.array(z.string())).optional()
+  input_order: z.record(z.array(z.string())).optional(),
+  /**
+   * Whether this node wants to be a live preview target.
+   * Nodes with this flag will be executed when eager execution is enabled.
+   */
+  want_live_preview: z.boolean().optional(),
+  /**
+   * Whether this node allows live preview execution.
+   * Nodes without this flag are treated as expensive and stop eager execution propagation.
+   */
+  allow_live_preview: z.boolean().optional()
 })
 
 export const zDynamicComboInputSpec = z.tuple([

src/services/eagerExecutionService.ts

@@ -0,0 +1,383 @@
+import log from 'loglevel'
+
+import { LGraph } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
+
+const logger = log.getLogger('EagerExecutionService')
+logger.setLevel('debug')
+
+class EagerExecutionService {
+  private enabled: boolean = false
+  private executionPending: boolean = false
+  private isExecuting: boolean = false
+  private changedNodes: Set<string> = new Set()
+  private graphChangedListenerAttached: boolean = false
+  private isSettingUpListeners: boolean = false
+  private lastChangeTimestamp: Map<string, number> = new Map()
+
+  private wrappedNodes: Set<NodeId> = new Set()
+  private wrappedWidgets: WeakSet<object> = new WeakSet()
+  private graphPatched: boolean = false
+
+  private nodeDefs: Record<string, any> | null = null
+
+  async enable() {
+    if (this.enabled) {
+      return
+    }
+    this.enabled = true
+    // Load node definitions if not already loaded
+    if (!this.nodeDefs) {
+      this.nodeDefs = await app.getNodeDefs()
+    }
+    this.setupEventListeners()
+  }
+
+  disable() {
+    if (!this.enabled) {
+      return
+    }
+    this.enabled = false
+    this.changedNodes.clear()
+    this.lastChangeTimestamp.clear()
+    this.executionPending = false
+  }
+
+  private setupEventListeners() {
+    this.setupWidgetListeners()
+
+    if (!this.graphChangedListenerAttached) {
+      logger.debug('Attaching graphChanged event listener')
+      api.addEventListener('graphChanged', () => {
+        if (this.enabled && !this.isExecuting) {
+          logger.debug('Graph changed, re-setting up widget listeners')
+          this.setupWidgetListeners()
+        }
+      })
+      this.graphChangedListenerAttached = true
+    }
+  }
+
+  private setupWidgetListeners() {
+    if (this.isSettingUpListeners) {
+      logger.debug('Already setting up listeners, skipping duplicate call')
+      return
+    }
+
+    const graph = app.rootGraph
+    if (!graph) {
+      setTimeout(() => this.setupWidgetListeners(), 100)
+      return
+    }
+
+    this.isSettingUpListeners = true
+    logger.debug('Setting up widget listeners for all nodes')
+
+    try {
+      this.wrappedNodes.clear()
+
+      graph.nodes.forEach((node) => {
+        this.attachWidgetCallbacks(node)
+      })
+
+      if (!this.graphPatched) {
+        const originalAdd = LGraph.prototype.add
+        LGraph.prototype.add = function (node: LGraphNode) {
+          const result = originalAdd.call(this, node)
+          if (eagerExecutionService.enabled) {
+            eagerExecutionService.attachWidgetCallbacks(node)
+          }
+          return result
+        }
+        this.graphPatched = true
+      }
+
+      logger.debug('Finished setting up widget listeners')
+    } finally {
+      this.isSettingUpListeners = false
+    }
+  }
+
+  private attachWidgetCallbacks(node: LGraphNode) {
+    if (!node.widgets) return
+
+    if (this.wrappedNodes.has(node.id)) {
+      logger.debug(
+        `Skipping callback attachment for ${node.title || node.type} (${node.id}) - already attached`
+      )
+      return
+    }
+    this.wrappedNodes.add(node.id)
+
+    logger.debug(
+      `Attaching callbacks to ${node.title || node.type} (${node.id}) - ${node.widgets.length} widget(s)`
+    )
+
+    node.widgets.forEach((widget, index) => {
+      if (this.wrappedWidgets.has(widget)) {
+        logger.debug(
+          `  Widget ${index} (${widget.name}) already wrapped, skipping`
+        )
+        return
+      }
+      this.wrappedWidgets.add(widget)
+
+      const originalCallback = widget.callback
+
+      widget.callback = (value?: any) => {
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        if (this.enabled) {
+          this.onNodeChanged(node)
+        }
+      }
+    })
+  }
+
+  onNodeChanged(node: LGraphNode) {
+    if (!this.enabled) return
+
+    const nodeId = String(node.id)
+
+    const now = Date.now()
+    const lastChange = this.lastChangeTimestamp.get(nodeId) || 0
+    const timeSinceLastChange = now - lastChange
+
+    if (timeSinceLastChange < 50) {
+      return
+    }
+
+    this.lastChangeTimestamp.set(nodeId, now)
+
+    // Clean up old entries periodically to prevent memory leak
+    if (this.lastChangeTimestamp.size > 1000) {
+      const cutoff = now - 60000 // Remove entries older than 1 minute
+      for (const [id, timestamp] of this.lastChangeTimestamp.entries()) {
+        if (timestamp < cutoff) {
+          this.lastChangeTimestamp.delete(id)
+        }
+      }
+    }
+
+    if (this.isExecuting) {
+      return
+    }
+
+    const queueStore = useQueuePendingTaskCountStore()
+    if (queueStore.count > 0) {
+      return
+    }
+
+    this.changedNodes.add(nodeId)
+
+    if (!this.executionPending) {
+      this.scheduleExecution()
+    }
+  }
+
+  private scheduleExecution() {
+    this.executionPending = true
+
+    setTimeout(() => {
+      void this.executeEager()
+      this.executionPending = false
+      this.changedNodes.clear()
+    }, 300)
+  }
+
+  private async executeEager() {
+    if (!app.rootGraph || this.changedNodes.size === 0) return
+
+    const queueStore = useQueuePendingTaskCountStore()
+
+    if (queueStore.count > 0 || this.isExecuting) {
+      logger.info('Execution already in progress, skipping eager execution')
+      return
+    }
+
+    this.isExecuting = true
+
+    try {
+      logger.info('===== EAGER EXECUTION TRIGGERED =====')
+
+      const changedNodesInfo = Array.from(this.changedNodes).map((nodeId) => {
+        const node = app.rootGraph?.getNodeById(Number(nodeId))
+        const title = node?.title || node?.type || `Node ${nodeId}`
+        return `${title} (${nodeId})`
+      })
+      logger.info(`Changed nodes: [${changedNodesInfo.join(', ')}]`)
+
+      const executionTargets = this.getAffectedNodes(
+        app.rootGraph,
+        this.changedNodes
+      )
+
+      if (executionTargets.size === 0) {
+        logger.info(
+          'No execution targets found (no nodes with WANT_LIVE_PREVIEW)'
+        )
+        logger.info('===== EAGER EXECUTION COMPLETE =====')
+        return
+      }
+
+      const targetsInfo = Array.from(executionTargets).map((nodeId) => {
+        const node = app.rootGraph?.getNodeById(Number(nodeId))
+        const title = node?.title || node?.type || `Node ${nodeId}`
+        return `${title} (${nodeId})`
+      })
+      logger.info(`Execution targets: [${targetsInfo.join(', ')}]`)
+      logger.info(`Total: ${executionTargets.size} target(s) will execute`)
+
+      const allNodesInfo = app.rootGraph?.nodes.map((node) => {
+        const nodeId = String(node.id)
+        const title = node.title || node.type || `Node ${nodeId}`
+        const willExecute = executionTargets.has(nodeId)
+        const flags = this.getNodeFlags(node)
+
+        if (willExecute) {
+          return `WILL EXECUTE - ${title} (${nodeId}) [WANTS_LIVE_PREVIEW]`
+        }
+        if (flags.allowLivePreview) {
+          return `PASSTHROUGH - ${title} (${nodeId}) [ALLOW_LIVE_PREVIEW only]`
+        }
+        return `SKIPPED - ${title} (${nodeId}) [no flags / expensive]`
+      })
+      logger.info('Full execution plan:')
+      allNodesInfo?.forEach((info) => logger.info(`   ${info}`))
+
+      logger.info(
+        `Triggering partial execution with ${executionTargets.size} targets...`
+      )
+
+      await app.queuePrompt(0, 1, Array.from(executionTargets))
+      logger.info('===== EAGER EXECUTION COMPLETE =====')
+    } catch (error) {
+      logger.error('Failed to execute eagerly:', error)
+    } finally {
+      this.isExecuting = false
+    }
+  }
+
+  private getNodeFlags(node: LGraphNode): {
+    wantLivePreview: boolean
+    allowLivePreview: boolean
+  } {
+    const nodeDef = this.nodeDefs?.[node.type]
+    return {
+      wantLivePreview: nodeDef?.want_live_preview ?? false,
+      allowLivePreview: nodeDef?.allow_live_preview ?? false
+    }
+  }
+
+  private getAffectedNodes(
+    graph: LGraph,
+    changedNodeIds: Set<string>
+  ): Set<string> {
+    const executionTargets = new Set<string>()
+    const visited = new Set<string>()
+
+    logger.info('Analyzing downstream dependencies with live preview flags...')
+
+    const findDownstreamTargets = (nodeId: string, depth: number = 0) => {
+      if (visited.has(nodeId)) return
+      visited.add(nodeId)
+
+      const node = graph.getNodeById(Number(nodeId))
+      if (!node) return
+
+      const indent = '  '.repeat(depth)
+      const flags = this.getNodeFlags(node)
+      const nodeTitle = node.title || node.type || `Node ${nodeId}`
+
+      // Only nodes with WANT_LIVE_PREVIEW are execution targets
+      if (flags.wantLivePreview) {
+        logger.info(
+          `${indent}✓ ${nodeTitle} (${nodeId}) - WANTS_LIVE_PREVIEW (execution target)`
+        )
+        executionTargets.add(nodeId)
+      } else if (flags.allowLivePreview) {
+        logger.info(
+          `${indent}○ ${nodeTitle} (${nodeId}) - ALLOW_LIVE_PREVIEW (passthrough, not executed)`
+        )
+      } else {
+        // Node has no flags - it's expensive, stop propagation
+        logger.info(
+          `${indent}✗ ${nodeTitle} (${nodeId}) - no flags (expensive, stopping propagation)`
+        )
+        return
+      }
+
+      // Continue to downstream nodes if ALLOW or WANT
+      const canPropagate = flags.wantLivePreview || flags.allowLivePreview
+      if (canPropagate && node.outputs) {
+        node.outputs.forEach((output) => {
+          if (!output.links || output.links.length === 0) return
+
+          output.links.forEach((linkId) => {
+            const link = graph.links.get(linkId)
+            if (!link) return
+
+            const targetNodeId = String(link.target_id)
+            const targetNode = graph.getNodeById(link.target_id)
+            const targetTitle =
+              targetNode?.title || targetNode?.type || `Node ${targetNodeId}`
+
+            logger.info(`${indent}  └─> ${targetTitle} (${targetNodeId})`)
+            findDownstreamTargets(targetNodeId, depth + 1)
+          })
+        })
+      }
+    }
+
+    changedNodeIds.forEach((nodeId) => {
+      const node = graph.getNodeById(Number(nodeId))
+      if (!node) {
+        logger.warn(`Node ${nodeId} not found in graph`)
+        return
+      }
+
+      const nodeTitle = node.title || node.type || `Node ${nodeId}`
+      const flags = this.getNodeFlags(node)
+
+      logger.info(
+        `Starting from changed node: ${nodeTitle} (${nodeId}) [WANTS=${flags.wantLivePreview}, ALLOWS=${flags.allowLivePreview}]`
+      )
+
+      // Only nodes with WANT_LIVE_PREVIEW are execution targets
+      if (flags.wantLivePreview) {
+        logger.info(
+          `  ✓ Changed node has WANTS_LIVE_PREVIEW - adding as execution target`
+        )
+        executionTargets.add(nodeId)
+      } else if (flags.allowLivePreview) {
+        logger.info(
+          `  ○ Changed node has ALLOW_LIVE_PREVIEW - won't execute, but will propagate`
+        )
+      } else {
+        logger.info(
+          `  ✗ Changed node has no flags - won't execute or propagate`
+        )
+        return
+      }
+
+      // Start downstream propagation if ALLOW or WANT
+      const canPropagate = flags.wantLivePreview || flags.allowLivePreview
+      if (canPropagate) {
+        findDownstreamTargets(nodeId, 1)
+      }
+    })
+
+    logger.info(
+      `Analysis complete: ${executionTargets.size} execution target(s) found`
+    )
+
+    return executionTargets
+  }
+}
+
+export const eagerExecutionService = new EagerExecutionService()

src/services/litegraphService.ts

@@ -59,7 +59,6 @@ import {
 import { getOrderedInputSpecs } from '@/workbench/utils/nodeDefOrderingUtil'
 
 import { useExtensionService } from './extensionService'
-import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 
 export interface HasInitialMinSize {
   _initialMinSize: { width: number; height: number }
@@ -639,7 +638,11 @@ export const useLitegraphService = () => {
           options.push({
             content: 'Open in MaskEditor | Image Canvas',
             callback: () => {
-              useMaskEditor().openMaskEditor(this)
+              ComfyApp.copyToClipspace(this)
+              // @ts-expect-error fixme ts strict error
+              ComfyApp.clipspace_return_node = this
+              // @ts-expect-error fixme ts strict error
+              ComfyApp.open_maskeditor()
             }
           })
         }

src/services/nodeSearchService.ts

@@ -79,22 +79,9 @@ export class NodeSearchService {
     const results = matchedNodes.filter((node) => {
       return filters.every((filterAndValue) => {
         const { filterDef, value } = filterAndValue
-        return filterDef.matches(node, value)
+        return filterDef.matches(node, value, { wildcard })
       })
     })
-    if (matchWildcards) {
-      const alreadyValid = new Set(results.map((result) => result.name))
-      results.push(
-        ...matchedNodes
-          .filter((node) => !alreadyValid.has(node.name))
-          .filter((node) => {
-            return filters.every((filterAndValue) => {
-              const { filterDef, value } = filterAndValue
-              return filterDef.matches(node, value, { wildcard })
-            })
-          })
-      )
-    }
 
     return options?.limit ? results.slice(0, options.limit) : results
   }

src/stores/apiKeyAuthStore.ts

@@ -24,12 +24,7 @@ export const useApiKeyAuthStore = defineStore('apiKeyAuth', () => {
   const isAuthenticated = computed(() => !!currentUser.value)
 
   const initializeUserFromApiKey = async () => {
-    const createCustomerResponse = await firebaseAuthStore
-      .createCustomer()
-      .catch((err) => {
-        console.error(err)
-        return
-      })
+    const createCustomerResponse = await firebaseAuthStore.createCustomer()
     if (!createCustomerResponse) {
       apiKey.value = null
       throw new Error(t('auth.login.noAssociatedUser'))

src/stores/eagerExecutionStore.ts

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import { eagerExecutionService } from '@/services/eagerExecutionService'
+
+/**
+ * Store for managing eager execution settings and state
+ */
+export const useEagerExecutionStore = defineStore('eagerExecution', () => {
+  // State
+  const enabled = ref(false)
+
+  // Actions
+
+  /**
+   * Enable eager execution
+   */
+  async function enable() {
+    enabled.value = true
+    await eagerExecutionService.enable()
+  }
+
+  /**
+   * Disable eager execution
+   */
+  function disable() {
+    enabled.value = false
+    eagerExecutionService.disable()
+  }
+
+  /**
+   * Toggle eager execution
+   */
+  async function toggle() {
+    if (enabled.value) {
+      disable()
+    } else {
+      await enable()
+    }
+  }
+
+  return {
+    // State
+    enabled,
+
+    // Actions
+    enable,
+    disable,
+    toggle
+  }
+})

src/stores/maskEditorStore.ts

@@ -22,7 +22,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     size: 10,
     opacity: 0.7,
     hardness: 1,
-    stepSize: 10
+    smoothingPrecision: 10
   })
 
   const maskBlendMode = ref<MaskBlendMode>(MaskBlendMode.Black)
@@ -50,7 +50,6 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
   const panOffset = ref<Offset>({ x: 0, y: 0 })
   const cursorPoint = ref<Point>({ x: 0, y: 0 })
   const resetZoomTrigger = ref<number>(0)
-  const clearTrigger = ref<number>(0)
 
   const maskCanvas = ref<HTMLCanvasElement | null>(null)
   const maskCtx = ref<CanvasRenderingContext2D | null>(null)
@@ -71,8 +70,6 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
 
   const canvasHistory = useCanvasHistory(20)
 
-  const tgpuRoot = ref<any>(null)
-
   watch(maskCanvas, (canvas) => {
     if (canvas) {
       maskCtx.value = canvas.getContext('2d', { willReadFrequently: true })
@@ -113,7 +110,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
   })
 
   function setBrushSize(size: number): void {
-    brushSettings.value.size = _.clamp(size, 1, 500)
+    brushSettings.value.size = _.clamp(size, 1, 100)
   }
 
   function setBrushOpacity(opacity: number): void {
@@ -124,8 +121,8 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     brushSettings.value.hardness = _.clamp(hardness, 0, 1)
   }
 
-  function setBrushStepSize(step: number): void {
-    brushSettings.value.stepSize = _.clamp(step, 1, 100)
+  function setBrushSmoothingPrecision(precision: number): void {
+    brushSettings.value.smoothingPrecision = _.clamp(precision, 1, 100)
   }
 
   function resetBrushToDefault(): void {
@@ -133,7 +130,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     brushSettings.value.size = 20
     brushSettings.value.opacity = 1
     brushSettings.value.hardness = 1
-    brushSettings.value.stepSize = 5
+    brushSettings.value.smoothingPrecision = 60
   }
 
   function setPaintBucketTolerance(tolerance: number): void {
@@ -172,10 +169,6 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     resetZoomTrigger.value++
   }
 
-  function triggerClear(): void {
-    clearTrigger.value++
-  }
-
   function setMaskOpacity(opacity: number): void {
     maskOpacity.value = _.clamp(opacity, 0, 1)
   }
@@ -186,7 +179,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
       size: 10,
       opacity: 0.7,
       hardness: 1,
-      stepSize: 5
+      smoothingPrecision: 10
     }
     maskBlendMode.value = MaskBlendMode.Black
     activeLayer.value = 'mask'
@@ -250,12 +243,10 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
 
     canvasHistory,
 
-    tgpuRoot,
-
     setBrushSize,
     setBrushOpacity,
     setBrushHardness,
-    setBrushStepSize,
+    setBrushSmoothingPrecision,
     resetBrushToDefault,
     setPaintBucketTolerance,
     setFillOpacity,
@@ -266,8 +257,6 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     setPanOffset,
     setCursorPoint,
     resetZoom,
-    triggerClear,
-    clearTrigger,
     setMaskOpacity,
     resetState
   }

src/utils/fuseUtil.ts

@@ -62,9 +62,10 @@ export class FuseFilter<T, O = string> {
       return true
     }
     const options = this.getItemOptions(item)
-    return wildcard
-      ? options.some((option) => option === wildcard)
-      : options.includes(value)
+    return (
+      options.includes(value) ||
+      (!!wildcard && options.some((option) => option === wildcard))
+    )
   }
 }
 

src/utils/queueDisplay.ts

@@ -24,7 +24,7 @@ type JobDisplay = {
 export const iconForJobState = (state: JobState): string => {
   switch (state) {
     case 'pending':
-      return 'icon-[lucide--loader-circle]'
+      return 'icon-[lucide--clock]'
     case 'initialization':
       return 'icon-[lucide--server-crash]'
     case 'running':