fix: Refactor: Convert repository structure from technical layers to Domain-Driven Design (DDD) (#9108)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.github/license-clarifications.json

@@ -0,0 +1,3 @@
+{
+  "posthog-js@*": { "licenses": "Apache-2.0" }
+}

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

@@ -79,3 +79,22 @@ jobs:
             exit 1
           fi
           echo '✅ No Mixpanel references found'
+
+      - name: Scan dist for PostHog telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for PostHog references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '(?i)posthog\.init' \
+            -e '(?i)posthog\.capture' \
+            -e 'PostHogTelemetryProvider' \
+            -e 'ph\.comfy\.org' \
+            -e 'posthog-js' \
+            dist; then
+            echo '❌ ERROR: PostHog references found in dist assets!'
+            echo 'PostHog must be properly tree-shaken from OSS builds.'
+            exit 1
+          fi
+          echo '✅ No PostHog references found'

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

@@ -100,6 +100,7 @@ jobs:
             --production \
             --summary \
             --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
+            --clarificationsFile .github/license-clarifications.json \
             --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
             echo ''
             echo '✅ All production dependency licenses are approved!'

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -29,11 +29,23 @@ test.describe(
       // Currently opens missing nodes dialog which is outside scope of AVIF loading functionality
       // 'workflow.avif'
     ]
+    const filesWithUpload = new Set(['no_workflow.webp'])
+
     fileNames.forEach(async (fileName) => {
       test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
         comfyPage
       }) => {
-        await comfyPage.dragDrop.dragAndDropFile(`workflowInMedia/${fileName}`)
+        const waitForUpload = filesWithUpload.has(fileName)
+        await comfyPage.dragDrop.dragAndDropFile(
+          `workflowInMedia/${fileName}`,
+          { waitForUpload }
+        )
+        if (waitForUpload) {
+          await comfyPage.page.waitForResponse(
+            (resp) => resp.url().includes('/view') && resp.status() !== 0,
+            { timeout: 10000 }
+          )
+        }
         await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
       })
     })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -330,12 +330,9 @@ test.describe('Workflows sidebar', () => {
       .getPersistedItem('workflow1.json')
       .click({ button: 'right' })
     await comfyPage.contextMenu.clickMenuItem('Duplicate')
-    await comfyPage.nextFrame()
-
-    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      '*workflow1 (Copy).json'
-    ])
+    await expect
+      .poll(() => workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow.json', '*workflow1 (Copy).json'])
   })
 
   test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {

eslint.config.ts

@@ -127,10 +127,8 @@ export default defineConfig([
       // Off: may conflict with oxfmt formatting
       'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
       // Off: large batch change, enable and apply with `eslint --fix`
-      'better-tailwindcss/enforce-consistent-class-order': 'off',
-      // Off: large batch change (v3→v4 renames like rounded→rounded-sm),
-      // enable and apply with `eslint --fix` in a follow-up PR
-      'better-tailwindcss/enforce-canonical-classes': 'off',
+      'better-tailwindcss/enforce-consistent-class-order': 'error',
+      'better-tailwindcss/enforce-canonical-classes': 'error',
       'better-tailwindcss/no-deprecated-classes': 'error'
     }
   },

global.d.ts

@@ -33,6 +33,8 @@ interface Window {
     gtm_container_id?: string
     ga_measurement_id?: string
     mixpanel_token?: string
+    posthog_project_token?: string
+    posthog_api_host?: string
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.12",
+  "version": "1.41.13",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -60,6 +60,7 @@
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
+    "@formkit/auto-animate": "catalog:",
     "@iconify/json": "catalog:",
     "@primeuix/forms": "catalog:",
     "@primeuix/styled": "catalog:",
@@ -100,6 +101,7 @@
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "catalog:",
+    "posthog-js": "catalog:",
     "primeicons": "catalog:",
     "primevue": "catalog:",
     "reka-ui": "catalog:",

packages/design-system/src/css/style.css

@@ -290,8 +290,6 @@
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
   --accent-background: var(--color-smoke-800);
-  --checkerboard-color-1: var(--color-white);
-  --checkerboard-color-2: #cccccc;
 
   /* Component/Node tokens from design system light */
   --component-node-background: var(--color-white);
@@ -439,8 +437,6 @@
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
   --accent-background: var(--color-charcoal-100);
-  --checkerboard-color-1: #3a3a3a;
-  --checkerboard-color-2: #2a2a2a;
 
   /* Component/Node tokens from design dark system */
   --component-node-background: var(--color-charcoal-600);
@@ -671,14 +667,6 @@
 }
 /* =================== End Custom Scrollbar (cross-browser) =================== */
 
-@utility bg-checkerboard {
-  background-image: repeating-conic-gradient(
-    var(--checkerboard-color-1) 0% 25%,
-    var(--checkerboard-color-2) 0% 50%
-  );
-  background-size: 16px 16px;
-}
-
 /* Everthing below here to be cleaned up over time. */
 
 body {

pnpm-lock.yaml

@@ -15,6 +15,9 @@ catalogs:
     '@eslint/js':
       specifier: ^9.39.1
       version: 9.39.1
+    '@formkit/auto-animate':
+      specifier: ^0.9.0
+      version: 0.9.0
     '@iconify-json/lucide':
       specifier: ^1.1.178
       version: 1.2.79
@@ -261,6 +264,9 @@ catalogs:
     postcss-html:
       specifier: ^1.8.0
       version: 1.8.0
+    posthog-js:
+      specifier: ^1.358.1
+      version: 1.358.1
     pretty-bytes:
       specifier: ^7.1.0
       version: 7.1.0
@@ -389,6 +395,9 @@ importers:
       '@comfyorg/tailwind-utils':
         specifier: workspace:*
         version: link:packages/tailwind-utils
+      '@formkit/auto-animate':
+        specifier: 'catalog:'
+        version: 0.9.0
       '@iconify/json':
         specifier: 'catalog:'
         version: 2.2.380
@@ -509,6 +518,9 @@ importers:
       pinia:
         specifier: 'catalog:'
         version: 3.0.4(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3))
+      posthog-js:
+        specifier: 'catalog:'
+        version: 1.358.1
       primeicons:
         specifier: 'catalog:'
         version: 7.0.0
@@ -764,7 +776,7 @@ importers:
         version: 8.0.5(vite@8.0.0-beta.13(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))
       vitest:
         specifier: 'catalog:'
-        version: 4.0.16(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+        version: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: 'catalog:'
         version: 3.2.5
@@ -2179,6 +2191,9 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
+  '@formkit/auto-animate@0.9.0':
+    resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==}
+
   '@grpc/grpc-js@1.9.15':
     resolution: {integrity: sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==}
     engines: {node: ^8.13.0 || >=10.10.0}
@@ -2436,25 +2451,21 @@ packages:
     resolution: {integrity: sha512-D+tPXB0tkSuDPsuXvyQIsF3f3PBWfAwIe9FkBWtVoDVYqE+jbz+tVGsjQMNWGafLE4sC8ZQdjhsxyT8I53Anbw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@nx/nx-linux-arm64-musl@22.5.2':
     resolution: {integrity: sha512-UbO527qqa8KLBi13uXto5SmxcZv1Smer7sPexJonshDlmrJsyvx5m8nm6tcSv04W5yQEL90vPlTux8dNvEDWrw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@nx/nx-linux-x64-gnu@22.5.2':
     resolution: {integrity: sha512-wR6596Vr/Z+blUAmjLHG2TCQMs4O1oi9JXK1J/PoPeO9UqdHwStCJBAd61zDFSUYJe0x+dkeRQu96fE5BW8Kcg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@nx/nx-linux-x64-musl@22.5.2':
     resolution: {integrity: sha512-MBXOw4AH4FWl4orwVykj/e75awTNDePogrl3pXNX9NcQLdj6JzS4e2jaALQeRBQLxQzeFvFQV/W4PBzoPV6/NA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@nx/nx-win32-arm64-msvc@22.5.2':
     resolution: {integrity: sha512-SaWSZkRH5uV8vP2lj6RRv+kw2IzaIDXkutReOXpooshIWZl9KjrQELNTCZTYyhLDsMlcyhSvLFlTiA4NkZ8udw==}
@@ -2502,6 +2513,78 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
+  '@opentelemetry/api-logs@0.208.0':
+    resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/core@2.2.0':
+    resolution: {integrity: sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
+  '@opentelemetry/core@2.6.0':
+    resolution: {integrity: sha512-HLM1v2cbZ4TgYN6KEOj+Bbj8rAKriOdkF9Ed3tG25FoprSiQl7kYc+RRT6fUZGOvx0oMi5U67GoFdT+XUn8zEg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
+  '@opentelemetry/exporter-logs-otlp-http@0.208.0':
+    resolution: {integrity: sha512-jOv40Bs9jy9bZVLo/i8FwUiuCvbjWDI+ZW13wimJm4LjnlwJxGgB+N/VWOZUTpM+ah/awXeQqKdNlpLf2EjvYg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/otlp-exporter-base@0.208.0':
+    resolution: {integrity: sha512-gMd39gIfVb2OgxldxUtOwGJYSH8P1kVFFlJLuut32L6KgUC4gl1dMhn+YC2mGn0bDOiQYSk/uHOdSjuKp58vvA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/otlp-transformer@0.208.0':
+    resolution: {integrity: sha512-DCFPY8C6lAQHUNkzcNT9R+qYExvsk6C5Bto2pbNxgicpcSWbe2WHShLxkOxIdNcBiYPdVHv/e7vH7K6TI+C+fQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/resources@2.2.0':
+    resolution: {integrity: sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/resources@2.6.0':
+    resolution: {integrity: sha512-D4y/+OGe3JSuYUCBxtH5T9DSAWNcvCb/nQWIga8HNtXTVPQn59j0nTBAgaAXxUVBDl40mG3Tc76b46wPlZaiJQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/sdk-logs@0.208.0':
+    resolution: {integrity: sha512-QlAyL1jRpOeaqx7/leG1vJMp84g0xKP6gJmfELBpnI4O/9xPX+Hu5m1POk9Kl+veNkyth5t19hRlN6tNY1sjbA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.4.0 <1.10.0'
+
+  '@opentelemetry/sdk-metrics@2.2.0':
+    resolution: {integrity: sha512-G5KYP6+VJMZzpGipQw7Giif48h6SGQ2PFKEYCybeXJsOCB4fp8azqMAAzE5lnnHK3ZVwYQrgmFbsUJO/zOnwGw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.9.0 <1.10.0'
+
+  '@opentelemetry/sdk-trace-base@2.2.0':
+    resolution: {integrity: sha512-xWQgL0Bmctsalg6PaXExmzdedSp3gyKV8mQBwK/j9VGdCDu2fmXIb2gAehBKbkXCpJ4HPkgv3QfoJWRT4dHWbw==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/semantic-conventions@1.40.0':
+    resolution: {integrity: sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==}
+    engines: {node: '>=14'}
+
   '@oxc-project/runtime@0.112.0':
     resolution: {integrity: sha512-4vYtWXMnXM6EaweCxbJ6bISAhkNHeN33SihvuX3wrpqaSJA4ZEoW35i9mSvE74+GDf1yTeVE+aEHA+WBpjDk/g==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2548,49 +2631,41 @@ packages:
     resolution: {integrity: sha512-SVjjjtMW66Mza76PBGJLqB0KKyFTBnxmtDXLJPbL6ZPGSctcXVmujz7/WAc0rb9m2oV0cHQTtVjnq6orQnI/jg==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-arm64-musl@11.15.0':
     resolution: {integrity: sha512-JDv2/AycPF2qgzEiDeMJCcSzKNDm3KxNg0KKWipoKEMDFqfM7LxNwwSVyAOGmrYlE4l3dg290hOMsr9xG7jv9g==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-linux-ppc64-gnu@11.15.0':
     resolution: {integrity: sha512-zbu9FhvBLW4KJxo7ElFvZWbSt4vP685Qc/Gyk/Ns3g2gR9qh2qWXouH8PWySy+Ko/qJ42+HJCLg+ZNcxikERfg==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-riscv64-gnu@11.15.0':
     resolution: {integrity: sha512-Kfleehe6B09C2qCnyIU01xLFqFXCHI4ylzkicfX/89j+gNHh9xyNdpEvit88Kq6i5tTGdavVnM6DQfOE2qNtlg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-riscv64-musl@11.15.0':
     resolution: {integrity: sha512-J7LPiEt27Tpm8P+qURDwNc8q45+n+mWgyys4/V6r5A8v5gDentHRGUx3iVk5NxdKhgoGulrzQocPTZVosq25Eg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-linux-s390x-gnu@11.15.0':
     resolution: {integrity: sha512-+8/d2tAScPjVJNyqa7GPGnqleTB/XW9dZJQ2D/oIM3wpH3TG+DaFEXBbk4QFJ9K9AUGBhvQvWU2mQyhK/yYn3Q==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-gnu@11.15.0':
     resolution: {integrity: sha512-xtvSzH7Nr5MCZI2FKImmOdTl9kzuQ51RPyLh451tvD2qnkg3BaqI9Ox78bTk57YJhlXPuxWSOL5aZhKAc9J6qg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-musl@11.15.0':
     resolution: {integrity: sha512-14YL1zuXj06+/tqsuUZuzL0T425WA/I4nSVN1kBXeC5WHxem6lQ+2HGvG+crjeJEqHgZUT62YIgj88W+8E7eyg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-openharmony-arm64@11.15.0':
     resolution: {integrity: sha512-/7Qli+1Wk93coxnrQaU8ySlICYN8HsgyIrzqjgIkQEpI//9eUeaeIHZptNl2fMvBGeXa7k2QgLbRNaBRgpnvMw==}
@@ -2664,56 +2739,48 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-arm64-musl@0.34.0':
     resolution: {integrity: sha512-H+F8+71gHQoGTFPPJ6z4dD0Fzfzi0UP8Zx94h5kUmIFThLvMq5K1Y/bUUubiXwwHfwb5C3MPjUpYijiy0rj51Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxfmt/binding-linux-ppc64-gnu@0.34.0':
     resolution: {integrity: sha512-dIGnzTNhCXqQD5pzBwduLg8pClm+t8R53qaE9i5h8iua1iaFAJyLffh4847CNZSlASb7gn1Ofuv7KoG/EpoGZg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-gnu@0.34.0':
     resolution: {integrity: sha512-FGQ2GTTooilDte/ogwWwkHuuL3lGtcE3uKM2EcC7kOXNWdUfMY6Jx3JCodNVVbFoybv4A+HuCj8WJji2uu1Ceg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-musl@0.34.0':
     resolution: {integrity: sha512-2dGbGneJ7ptOIVKMwEIHdCkdZEomh74X3ggo4hCzEXL/rl9HwfsZDR15MkqfQqAs6nVXMvtGIOMxjDYa5lwKaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@oxfmt/binding-linux-s390x-gnu@0.34.0':
     resolution: {integrity: sha512-cCtGgmrTrxq3OeSG0UAO+w6yLZTMeOF4XM9SAkNrRUxYhRQELSDQ/iNPCLyHhYNi38uHJQbS5RQweLUDpI4ajA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-gnu@0.34.0':
     resolution: {integrity: sha512-7AvMzmeX+k7GdgitXp99GQoIV/QZIpAS7rwxQvC/T541yWC45nwvk4mpnU8N+V6dE5SPEObnqfhCjO80s7qIsg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-musl@0.34.0':
     resolution: {integrity: sha512-uNiglhcmivJo1oDMh3hoN/Z0WsbEXOpRXZdQ3W/IkOpyV8WF308jFjSC1ZxajdcNRXWej0zgge9QXba58Owt+g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxfmt/binding-openharmony-arm64@0.34.0':
     resolution: {integrity: sha512-5eFsTjCyji25j6zznzlMc+wQAZJoL9oWy576xhqd2efv+N4g1swIzuSDcb1dz4gpcVC6veWe9pAwD7HnrGjLwg==}
@@ -2816,56 +2883,48 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-arm64-musl@1.49.0':
     resolution: {integrity: sha512-xeqkMOARgGBlEg9BQuPDf6ZW711X6BT5qjDyeM5XNowCJeTSdmMhpePJjTEiVbbr3t21sIlK8RE6X5bc04nWyQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxlint/binding-linux-ppc64-gnu@1.49.0':
     resolution: {integrity: sha512-uvcqRO6PnlJGbL7TeePhTK5+7/JXbxGbN+C6FVmfICDeeRomgQqrfVjf0lUrVpUU8ii8TSkIbNdft3M+oNlOsQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-gnu@1.49.0':
     resolution: {integrity: sha512-Dw1HkdXAwHNH+ZDserHP2RzXQmhHtpsYYI0hf8fuGAVCIVwvS6w1+InLxpPMY25P8ASRNiFN3hADtoh6lI+4lg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-musl@1.49.0':
     resolution: {integrity: sha512-EPlMYaA05tJ9km/0dI9K57iuMq3Tw+nHst7TNIegAJZrBPtsOtYaMFZEaWj02HA8FI5QvSnRHMt+CI+RIhXJBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@oxlint/binding-linux-s390x-gnu@1.49.0':
     resolution: {integrity: sha512-yZiQL9qEwse34aMbnMb5VqiAWfDY+fLFuoJbHOuzB1OaJZbN1MRF9Nk+W89PIpGr5DNPDipwjZb8+Q7wOywoUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-x64-gnu@1.49.0':
     resolution: {integrity: sha512-CcCDwMMXSchNkhdgvhVn3DLZ4EnBXAD8o8+gRzahg+IdSt/72y19xBgShJgadIRF0TsRcV/MhDUMwL5N/W54aQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-x64-musl@1.49.0':
     resolution: {integrity: sha512-u3HfKV8BV6t6UCCbN0RRiyqcymhrnpunVmLFI8sEa5S/EBu+p/0bJ3D7LZ2KT6PsBbrB71SWq4DeFrskOVgIZg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxlint/binding-openharmony-arm64@1.49.0':
     resolution: {integrity: sha512-dRDpH9fw+oeUMpM4br0taYCFpW6jQtOuEIec89rOgDA1YhqwmeRcx0XYeCv7U48p57qJ1XZHeMGM9LdItIjfzA==}
@@ -2929,6 +2988,12 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@posthog/core@1.23.2':
+    resolution: {integrity: sha512-zTDdda9NuSHrnwSOfFMxX/pyXiycF4jtU1kTr8DL61dHhV+7LF6XF1ndRZZTuaGGbfbb/GJYkEsjEX9SXfNZeQ==}
+
+  '@posthog/types@1.358.1':
+    resolution: {integrity: sha512-SFfhm+NHYqsk+SAxx5FlSg9FuvqsEPZidfTjPP5TYYM24fif//L+pAzxVGqaxJcnyZojIfF66NRZ3NfM5Jd+eg==}
+
   '@primeuix/forms@0.0.2':
     resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
     engines: {node: '>=12.11.0'}
@@ -3028,28 +3093,24 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-Z03/wrqau9Bicfgb3Dbs6SYTHliELk2PM2LpG2nFd+cGupTMF5kanLEcj2vuuJLLhptNyS61rtk7SOZ+lPsTUA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-iSXXZsQp08CSilff/DCTFZHSVEpEwdicV3W8idHyrByrcsRDVh9sGC3sev6d8BygSGj3vt8GvUKBPCoyMA4tgQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-qaj+MFudtdCv9xZo9znFvkgoajLdc+vwf0Kz5N44g+LU5XMe+IsACgn3UG7uTRlCCvhMAGXm1XlpEA5bZBrOcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-U662UnMETyjT65gFmG9ma+XziENrs7BBnENi/27swZPYagubfHRirXHG2oMl+pEax2WvO7Kb9gHZmMakpYqBHQ==}
@@ -3127,67 +3188,56 @@ packages:
     resolution: {integrity: sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.53.5':
     resolution: {integrity: sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.53.5':
     resolution: {integrity: sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.53.5':
     resolution: {integrity: sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.53.5':
     resolution: {integrity: sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.53.5':
     resolution: {integrity: sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.53.5':
     resolution: {integrity: sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.53.5':
     resolution: {integrity: sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.53.5':
     resolution: {integrity: sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.53.5':
     resolution: {integrity: sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.53.5':
     resolution: {integrity: sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.53.5':
     resolution: {integrity: sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==}
@@ -3463,28 +3513,24 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.0':
     resolution: {integrity: sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.0':
     resolution: {integrity: sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.0':
     resolution: {integrity: sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.0':
     resolution: {integrity: sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==}
@@ -3960,49 +4006,41 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -4869,6 +4907,9 @@ packages:
   core-js-compat@3.48.0:
     resolution: {integrity: sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q==}
 
+  core-js@3.48.0:
+    resolution: {integrity: sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -5552,6 +5593,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
@@ -6372,28 +6416,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -7148,6 +7188,12 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  posthog-js@1.358.1:
+    resolution: {integrity: sha512-teipwLZtfErKDrURiUlLMnmpjgjGlni15JxyJ7oRaSlT3sX4E/mgvNatHIbWnp+7z1zYm3Jz5BYwGqwgyesRnw==}
+
+  preact@10.28.4:
+    resolution: {integrity: sha512-uKFfOHWuSNpRFVTnljsCluEFq57OKT+0QdOiQo8XWnQ/pSvg7OpX5eNOejELXJMWy+BwM2nobz0FkvzmnpCNsQ==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -7309,6 +7355,9 @@ packages:
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
+  query-selector-shadow-dom@1.0.1:
+    resolution: {integrity: sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -8430,6 +8479,9 @@ packages:
   web-vitals@4.2.4:
     resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
 
+  web-vitals@5.1.0:
+    resolution: {integrity: sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -10120,6 +10172,8 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@formkit/auto-animate@0.9.0': {}
+
   '@grpc/grpc-js@1.9.15':
     dependencies:
       '@grpc/proto-loader': 0.7.13
@@ -10624,7 +10678,7 @@ snapshots:
       tsconfig-paths: 4.2.0
       tslib: 2.8.1
       vite: 8.0.0-beta.13(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
-      vitest: 4.0.16(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -10644,7 +10698,7 @@ snapshots:
       tslib: 2.8.1
     optionalDependencies:
       vite: 8.0.0-beta.13(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
-      vitest: 4.0.16(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -10673,6 +10727,82 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
+  '@opentelemetry/api-logs@0.208.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+
+  '@opentelemetry/api@1.9.0': {}
+
+  '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/core@2.6.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/exporter-logs-otlp-http@0.208.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.208.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-exporter-base': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
+
+  '@opentelemetry/otlp-exporter-base@0.208.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.0)
+
+  '@opentelemetry/otlp-transformer@0.208.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.208.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-metrics': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
+      protobufjs: 7.5.0
+
+  '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/resources@2.6.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/sdk-logs@0.208.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.208.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+
+  '@opentelemetry/sdk-metrics@2.2.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+
+  '@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@opentelemetry/semantic-conventions@1.40.0': {}
+
   '@oxc-project/runtime@0.112.0': {}
 
   '@oxc-project/types@0.112.0': {}
@@ -10904,6 +11034,12 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@posthog/core@1.23.2':
+    dependencies:
+      cross-spawn: 7.0.6
+
+  '@posthog/types@1.358.1': {}
+
   '@primeuix/forms@0.0.2':
     dependencies:
       '@primeuix/utils': 0.3.2
@@ -11983,7 +12119,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.16(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -12046,7 +12182,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vitest: 4.0.16(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -12969,6 +13105,8 @@ snapshots:
     dependencies:
       browserslist: 4.28.1
 
+  core-js@3.48.0: {}
+
   core-util-is@1.0.3: {}
 
   cosmiconfig@7.1.0:
@@ -13791,6 +13929,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fflate@0.4.8: {}
+
   fflate@0.8.2: {}
 
   figures@3.2.0:
@@ -15716,6 +15856,24 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  posthog-js@1.358.1:
+    dependencies:
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.208.0
+      '@opentelemetry/exporter-logs-otlp-http': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.6.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
+      '@posthog/core': 1.23.2
+      '@posthog/types': 1.358.1
+      core-js: 3.48.0
+      dompurify: 3.3.1
+      fflate: 0.4.8
+      preact: 10.28.4
+      query-selector-shadow-dom: 1.0.1
+      web-vitals: 5.1.0
+
+  preact@10.28.4: {}
+
   prelude-ls@1.2.1: {}
 
   prettier@3.7.4:
@@ -15957,6 +16115,8 @@ snapshots:
 
   quansync@0.2.11: {}
 
+  query-selector-shadow-dom@1.0.1: {}
+
   queue-microtask@1.2.3: {}
 
   raf-schd@4.0.3: {}
@@ -17262,7 +17422,7 @@ snapshots:
       tsx: 4.19.4
       yaml: 2.8.2
 
-  vitest@4.0.16(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2):
+  vitest@4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2):
     dependencies:
       '@vitest/expect': 4.0.16
       '@vitest/mocker': 4.0.16(vite@8.0.0-beta.13(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))
@@ -17285,6 +17445,7 @@ snapshots:
       vite: 8.0.0-beta.13(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
+      '@opentelemetry/api': 1.9.0
       '@types/node': 24.10.4
       '@vitest/ui': 4.0.16(vitest@4.0.16)
       happy-dom: 20.0.11
@@ -17408,6 +17569,8 @@ snapshots:
 
   web-vitals@4.2.4: {}
 
+  web-vitals@5.1.0: {}
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@8.0.0: {}

pnpm-workspace.yaml

@@ -6,6 +6,7 @@ catalog:
   '@alloc/quick-lru': ^5.2.0
   '@comfyorg/comfyui-electron-types': 0.6.2
   '@eslint/js': ^9.39.1
+  '@formkit/auto-animate': ^0.9.0
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
   '@iconify/tailwind4': ^1.2.0
@@ -88,6 +89,7 @@ catalog:
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
+  posthog-js: ^1.358.1
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5

src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <router-view />
-  <div
-    v-if="isLoading"
-    class="absolute inset-0 flex items-center justify-center"
-  >
-    <Loader size="lg" class="text-white" />
-  </div>
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
+  <div
+    v-if="isLoading"
+    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
+  >
+    <LogoComfyWaveLoader size="xl" color="yellow" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +15,7 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
+    class="pointer-events-none absolute top-0 left-0 z-999 flex size-full flex-col"
   >
     <slot name="workflow-tabs" />
 
@@ -17,7 +17,7 @@
 
       <Splitter
         :key="splitterRefreshKey"
-        class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
+        class="pointer-events-none flex-1 overflow-hidden border-none bg-transparent"
         :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
         state-storage="local"
         @resizestart="onResizestart"
@@ -30,10 +30,10 @@
           :class="
             sidebarLocation === 'left'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
                   sidebarPanelVisible && 'min-w-78'
                 )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="
             sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
@@ -60,11 +60,11 @@
           <slot name="topmenu" :sidebar-panel-visible />
 
           <Splitter
-            class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mr-1 mb-1 ml-1 flex-1"
+            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent"
             layout="vertical"
             :pt:gutter="
               cn(
-                'rounded-tl-lg rounded-tr-lg',
+                'rounded-t-lg',
                 !(bottomPanelVisible && !focusMode) && 'hidden'
               )
             "
@@ -77,7 +77,7 @@
             </SplitterPanel>
             <SplitterPanel
               v-show="bottomPanelVisible && !focusMode"
-              class="bottom-panel border border-(--p-panel-border-color) max-w-full overflow-x-auto bg-comfy-menu-bg pointer-events-auto rounded-lg"
+              class="bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg"
             >
               <slot name="bottom-panel" />
             </SplitterPanel>
@@ -92,10 +92,10 @@
           :class="
             sidebarLocation === 'right'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
                   sidebarPanelVisible && 'min-w-78'
                 )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="
             sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE

src/components/MenuHamburger.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="workspaceState.focusMode"
-    class="fixed z-9999 flex flex-row no-drag top-0 right-0"
+    class="no-drag fixed top-0 right-0 z-9999 flex flex-row"
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"

src/components/TopMenuSection.vue

@@ -38,7 +38,7 @@
             ref="actionbarContainerRef"
             :class="
               cn(
-                'actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
                 hasAnyError
                   ? 'border-destructive-background-hover'
                   : 'border-interface-stroke'
@@ -51,6 +51,7 @@
               ref="legacyCommandsContainerRef"
               class="[&:not(:has(*>*:not(:empty)))]:hidden"
             ></div>
+
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
@@ -61,6 +62,19 @@
               class="shrink-0"
             />
             <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+            <Button
+              v-if="isCloud && flags.workflowSharingEnabled"
+              v-tooltip.bottom="shareTooltipConfig"
+              variant="secondary"
+              :aria-label="t('actionbar.shareTooltip')"
+              @click="() => openShareDialog().catch(toastErrorHandler)"
+              @pointerenter="prefetchShareDialog"
+            >
+              <i class="icon-[lucide--share-2] size-4" />
+              <span class="not-md:hidden">
+                {{ t('actionbar.share') }}
+              </span>
+            </Button>
             <Button
               v-if="!isRightSidePanelOpen"
               v-tooltip.bottom="rightSidePanelTooltipConfig"
@@ -88,7 +102,7 @@
         :to="inlineProgressSummaryTarget"
       >
         <div
-          class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
+          class="pointer-events-none absolute inset-x-0 top-full mt-1 flex justify-end pr-1"
         >
           <QueueInlineProgressSummary
             :hidden="shouldHideInlineProgressSummary"
@@ -134,7 +148,12 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isDesktop } from '@/platform/distribution/types'
+import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import {
+  openShareDialog,
+  prefetchShareDialog
+} from '@/platform/workflow/sharing/composables/lazyShareDialog'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -144,6 +163,7 @@ const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
+const { flags } = useFeatureFlags()
 const { isLoggedIn } = useCurrentUser()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
@@ -195,6 +215,9 @@ const shouldHideInlineProgressSummary = computed(
 const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.manageExtensions'))
 )
+const shareTooltipConfig = computed(() =>
+  buildTooltipConfig(t('actionbar.shareTooltip'))
+)
 
 const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value

src/components/actionbar/ComfyActionbar.vue

@@ -19,12 +19,12 @@
         content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div class="relative flex items-center select-none gap-2">
+      <div class="relative flex items-center gap-2 select-none">
         <span
           ref="dragHandleRef"
           :class="
             cn(
-              'drag-handle cursor-grab w-3 h-max',
+              'drag-handle h-max w-3 cursor-grab',
               isDragging && 'cursor-grabbing'
             )
           "
@@ -423,18 +423,18 @@ const actionbarClass = computed(() =>
   cn(
     'w-[200px] border-dashed border-blue-500 opacity-80',
     'm-1.5 flex items-center justify-center self-stretch',
-    'rounded-md before:w-50 before:-ml-50 before:h-full',
+    'rounded-md before:-ml-50 before:h-full before:w-50',
     'pointer-events-auto',
     isMouseOverDropZone.value &&
-      'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
+      'scale-105 border-[3px] opacity-100 shadow-[0_0_20px] shadow-blue-500'
   )
 )
 const panelClass = computed(() =>
   cn(
     'actionbar pointer-events-auto z-1300',
-    isDragging.value && 'select-none pointer-events-none',
+    isDragging.value && 'pointer-events-none select-none',
     isDocked.value
-      ? 'p-0 static border-none bg-transparent'
+      ? 'static border-none bg-transparent p-0'
       : 'fixed shadow-interface'
   )
 )

src/components/appMode/AppModeToolbar.vue

@@ -42,7 +42,7 @@ function openTemplates() {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 pointer-events-auto">
+  <div class="pointer-events-auto flex flex-col gap-2">
     <WorkflowActionsDropdown source="app_mode_toolbar">
       <template #button="{ hasUnseenItems }">
         <Button
@@ -53,7 +53,7 @@ function openTemplates() {
           variant="secondary"
           size="unset"
           :aria-label="t('sideToolbar.labels.menu')"
-          class="relative h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i class="icon-[lucide--panels-top-left] size-4" />
           <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
@@ -83,7 +83,7 @@ function openTemplates() {
     </Button>
 
     <div
-      class="flex flex-col w-10 rounded-lg bg-secondary-background overflow-hidden"
+      class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
     >
       <Button
         v-tooltip.right="{

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,9 +1,6 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative h-full w-full overflow-hidden bg-neutral-900"
-  >
-    <div class="p-terminal h-full w-full rounded-none p-2">
+  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
+    <div class="p-terminal size-full rounded-none p-2">
       <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
@@ -15,7 +12,7 @@
       size="sm"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-transparent">
+  <div class="size-full bg-transparent">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-testid="subgraph-breadcrumb"
-    class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center -mt-4 pt-4"
+    class="subgraph-breadcrumb -mt-4 flex w-auto items-center pt-4 drop-shadow-(--interface-panel-drop-shadow)"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
@@ -17,7 +17,7 @@
     <WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
     <Button
       v-if="isInSubgraph"
-      class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 ml-1.5 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
+      class="back-button pointer-events-auto ml-1.5 size-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
       text
       severity="secondary"
       size="small"

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -42,7 +42,7 @@
     v-if="isEditing"
     ref="itemInputRef"
     v-model="itemLabel"
-    class="fixed z-10000 px-2 py-2 text-[.8rem]"
+    class="fixed z-10000 p-2 text-[.8rem]"
     @blur="inputBlur(false)"
     @click.stop
     @keydown.enter="inputBlur(true)"

src/components/builder/AppBuilder.vue

@@ -204,7 +204,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
 )
 </script>
 <template>
-  <div class="flex font-bold p-2 border-border-subtle border-b items-center">
+  <div class="flex items-center border-b border-border-subtle p-2 font-bold">
     {{
       isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
     }}
@@ -217,7 +217,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <div
       v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
       :key="`${nodeId}: ${widgetName}`"
-      :class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
+      :class="cn(dragClass, 'pointer-events-auto my-2 p-2')"
       :aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
     >
       <div v-if="widget" class="pointer-events-none" inert>
@@ -228,7 +228,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           hidden-widget-actions
         />
       </div>
-      <div v-else class="text-muted-foreground text-sm p-1 pointer-events-none">
+      <div v-else class="pointer-events-none p-1 text-sm text-muted-foreground">
         {{ widgetName }}
         <p class="text-xs italic">
           ({{ t('linearMode.builder.unknownWidget') }})
@@ -241,14 +241,14 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     :label="t('nodeHelpPage.inputs')"
     enable-empty-state
     :disabled="!appModeStore.selectedInputs.length"
-    class="border-border-subtle border-b"
+    class="border-b border-border-subtle"
     :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
     :tooltip-delay="100"
   >
     <template #label>
       <div class="flex gap-3">
         {{ t('nodeHelpPage.inputs') }}
-        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
+        <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
       </div>
     </template>
     <template #empty>
@@ -271,7 +271,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           rename
         } in inputsWithState"
         :key="`${nodeId}: ${widgetName}`"
-        :class="cn(dragClass, 'bg-primary-background/30 p-2 my-2 rounded-lg')"
+        :class="cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')"
         :title="label ?? widgetName"
         :sub-title="subLabel"
         :rename
@@ -296,7 +296,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <template #label>
       <div class="flex gap-3">
         {{ t('nodeHelpPage.outputs') }}
-        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
+        <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
       </div>
     </template>
     <template #empty>
@@ -319,8 +319,8 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
         :class="
           cn(
             dragClass,
-            'bg-warning-background/40 p-2 my-2 rounded-lg',
-            index === 0 && 'ring-warning-background ring-2'
+            'my-2 rounded-lg bg-warning-background/40 p-2',
+            index === 0 && 'ring-2 ring-warning-background'
           )
         "
         :title
@@ -337,7 +337,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <div
       :class="
         cn(
-          'absolute w-full h-full pointer-events-auto',
+          'pointer-events-auto absolute size-full',
           hoveringSelectable ? 'cursor-pointer' : 'cursor-grab'
         )
       "
@@ -352,7 +352,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             v-for="[key, style] in renderedInputs"
             :key
             :style="toValue(style)"
-            class="fixed bg-primary-background/30 rounded-lg"
+            class="fixed rounded-lg bg-primary-background/30"
           />
         </template>
         <template v-else>
@@ -362,7 +362,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             :style="toValue(style)"
             :class="
               cn(
-                'fixed ring-warning-background ring-5 rounded-2xl',
+                'fixed rounded-2xl ring-5 ring-warning-background',
                 !isSelected && 'ring-warning-background/50'
               )
             "
@@ -370,17 +370,17 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             <div class="absolute top-0 right-0 size-8">
               <div
                 v-if="isSelected"
-                class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg cursor-pointer pointer-events-auto"
+                class="pointer-events-auto absolute -top-1/2 -right-1/2 size-full cursor-pointer rounded-lg bg-warning-background p-2"
                 @click.stop="
                   remove(appModeStore.selectedOutputs, (k) => k == key)
                 "
                 @pointerdown.stop
               >
-                <i class="icon-[lucide--check] bg-text-foreground size-full" />
+                <i class="bg-text-foreground icon-[lucide--check] size-full" />
               </div>
               <div
                 v-else
-                class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg cursor-pointer pointer-events-auto"
+                class="pointer-events-auto absolute -top-1/2 -right-1/2 size-full cursor-pointer rounded-lg bg-component-node-background ring-4 ring-warning-background/50 ring-inset"
                 @click.stop="appModeStore.selectedOutputs.push(key)"
                 @pointerdown.stop
               />

src/components/builder/BuilderDialog.vue

@@ -24,12 +24,12 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-1 flex-col gap-4 px-4 py-4">
+    <div class="flex flex-1 flex-col gap-4 p-4">
       <slot />
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <slot name="footer" />
     </div>
   </div>

src/components/builder/BuilderMenu.vue

@@ -4,7 +4,7 @@
       <button
         :class="
           cn(
-            'absolute left-4 top-[calc(var(--workflow-tabs-height)+16px)] z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg py-2 pr-2 pl-3 shadow-interface transition-colors border-none',
+            'absolute top-[calc(var(--workflow-tabs-height)+16px)] left-4 z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg border-none py-2 pr-2 pl-3 shadow-interface transition-colors',
             'bg-secondary-background hover:bg-secondary-background-hover',
             'data-[state=open]:bg-secondary-background-hover'
           )
@@ -22,10 +22,10 @@
       <button
         :class="
           cn(
-            'flex w-full items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none',
+            'flex w-full items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm',
             hasOutputs
               ? 'cursor-pointer hover:bg-secondary-background-hover'
-              : 'opacity-50 pointer-events-none'
+              : 'pointer-events-none opacity-50'
           )
         "
         :disabled="!hasOutputs"
@@ -36,7 +36,7 @@
       </button>
       <div class="my-1 border-t border-border-default" />
       <button
-        class="flex w-full cursor-pointer items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none hover:bg-secondary-background-hover"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm hover:bg-secondary-background-hover"
         @click="onExitBuilder(close)"
       >
         <i class="icon-[lucide--square-pen] size-4" />

src/components/builder/BuilderToolbar.vue

@@ -13,7 +13,7 @@
               stepClasses,
               activeStep === step.id
                 ? 'bg-interface-builder-mode-background'
-                : 'hover:bg-secondary-background bg-transparent'
+                : 'bg-transparent hover:bg-secondary-background'
             )
           "
           :aria-current="activeStep === step.id ? 'step' : undefined"
@@ -32,7 +32,7 @@
         :is-select-active="isSelectStep"
         @switch="navigateToStep('builder:outputs')"
       >
-        <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
+        <button :class="cn(stepClasses, 'bg-transparent opacity-30')">
           <StepBadge
             :step="defaultViewStep"
             :index="steps.length"
@@ -48,7 +48,7 @@
             stepClasses,
             activeStep === 'setDefaultView'
               ? 'bg-interface-builder-mode-background'
-              : 'hover:bg-secondary-background bg-transparent'
+              : 'bg-transparent hover:bg-secondary-background'
           )
         "
         @click="navigateToStep('setDefaultView')"

src/components/builder/ConnectOutputPopover.vue

@@ -7,7 +7,7 @@
       side="bottom"
       :side-offset="8"
       :collision-padding="10"
-      class="z-[1001] w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
+      class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity]"
     >
       <div class="flex h-12 items-center justify-between px-4">
         <h3 class="text-sm font-medium text-base-foreground">
@@ -21,12 +21,12 @@
         </PopoverClose>
       </div>
       <div class="border-t border-border-default" />
-      <p class="mt-3 px-4 text-xs text-muted-foreground leading-relaxed">
+      <p class="mt-3 px-4 text-xs/relaxed text-muted-foreground">
         {{ t('builderToolbar.connectOutputBody1') }}
       </p>
       <p
         v-if="!isSelectActive"
-        class="mt-2 px-4 text-xs text-muted-foreground leading-relaxed"
+        class="mt-2 px-4 text-xs/relaxed text-muted-foreground"
       >
         {{ t('builderToolbar.connectOutputBody2') }}
       </p>

src/components/builder/IoItem.vue

@@ -32,13 +32,13 @@ const entries = computed(() => {
 })
 </script>
 <template>
-  <div class="p-2 my-2 rounded-lg flex items-center-safe gap-2">
+  <div class="my-2 flex items-center-safe gap-2 rounded-lg p-2">
     <div
-      class="mr-auto flex-[4_1_0%] max-w-max min-w-0 truncate drag-handle inline"
+      class="drag-handle mr-auto inline max-w-max min-w-0 flex-[4_1_0%] truncate"
       v-text="title"
     />
     <div
-      class="flex-[2_1_0%] max-w-max min-w-0 truncate text-muted-foreground text-end drag-handle inline"
+      class="drag-handle inline max-w-max min-w-0 flex-[2_1_0%] truncate text-end text-muted-foreground"
       v-text="subTitle"
     />
     <Popover :entries>

src/components/builder/StepLabel.vue

@@ -4,7 +4,7 @@
       {{ step.title }}
     </span>
     <span
-      class="hidden whitespace-nowrap text-xs text-muted-foreground sm:inline"
+      class="hidden text-xs whitespace-nowrap text-muted-foreground sm:inline"
     >
       {{ step.subtitle }}
     </span>

src/components/button/IconGroup.vue

@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
+        'flex shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-secondary-background p-0 shadow-sm outline-hidden transition-all duration-200',
         backgroundClass
       )
     "

src/components/card/CardBottom.vue

@@ -14,6 +14,6 @@ const { fullHeight = true } = defineProps<{
 }>()
 
 const containerClasses = computed(() =>
-  cn('flex-1 w-full', fullHeight && 'h-full')
+  cn('w-full flex-1', fullHeight && 'h-full')
 )
 </script>

src/components/card/CardContainer.vue

@@ -59,7 +59,7 @@ const containerClasses = computed(() => {
     outline: cn(
       hasBorder && 'border-2 border-border-subtle',
       hasCursor && 'cursor-pointer',
-      'hover:border-border-subtle/50 transition-colors'
+      'transition-colors hover:border-border-subtle/50'
     )
   }
 

src/components/card/CardTop.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="topStyle">
-    <slot class="absolute top-0 left-0 h-full w-full"></slot>
+    <slot class="absolute top-0 left-0 size-full"></slot>
 
     <div v-if="slots['top-left']" :class="slotClasses['top-left']">
       <slot name="top-left"></slot>

src/components/chip/SquareChip.vue

@@ -19,9 +19,9 @@ const baseClasses =
 
 const variantStyles = {
   dark: 'bg-zinc-500/40 text-white/90',
-  light: cn('backdrop-blur-[2px] bg-base-background/50 text-base-foreground'),
+  light: cn('bg-base-background/50 text-base-foreground backdrop-blur-[2px]'),
   gray: cn(
-    'backdrop-blur-[2px] bg-modal-card-tag-background text-base-foreground'
+    'bg-modal-card-tag-background text-base-foreground backdrop-blur-[2px]'
   )
 }
 

src/components/common/DraggableList.vue

@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
 })
 </script>
 <template>
-  <div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
+  <div ref="draggableItems" class="mt-0.5 space-y-0.5 px-2 pb-2">
     <slot
       drag-class="draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing"
     />

src/components/common/DropdownItem.vue

@@ -22,7 +22,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
 <template>
   <DropdownMenuSeparator
     v-if="item.separator"
-    class="h-[1px] bg-border-subtle m-1"
+    class="m-1 h-px bg-border-subtle"
   />
   <DropdownMenuSub v-else-if="item.items">
     <DropdownMenuSubTrigger
@@ -58,7 +58,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     {{ item.label }}
     <div
       v-if="item.new"
-      class="ml-auto bg-primary-background rounded-full text-xxs font-bold px-1 flex leading-none items-center"
+      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/DropdownMenu.vue

@@ -27,14 +27,14 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'data-[highlighted]:bg-secondary-background-hover data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground flex p-2 leading-none rounded-lg gap-1 cursor-pointer m-1',
+    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )
 
 const contentClass = computed(() =>
   cn(
-    'z-1700 rounded-lg p-2 bg-base-background border border-border-subtle min-w-[220px] shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+    'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-1700 min-w-[220px] rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[opacity,transform]',
     contentProp
   )
 )

src/components/common/FormImageUpload.vue

@@ -2,7 +2,7 @@
   <div class="image-upload-wrapper">
     <div class="flex items-center gap-2">
       <div
-        class="preview-box flex h-16 w-16 items-center justify-center rounded-sm border p-2"
+        class="preview-box flex size-16 items-center justify-center rounded-sm border p-2"
         :class="{ 'bg-base-background': !modelValue }"
       >
         <img

src/components/common/LazyImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="containerRef"
-    class="relative flex h-full w-full items-center justify-center overflow-hidden"
+    class="relative flex size-full items-center justify-center overflow-hidden"
     :class="containerClass"
   >
     <Skeleton

src/components/common/MarqueeLine.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="overflow-hidden [container-type:inline-size] [mask-image:linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:[mask-image:none]"
+    class="@container overflow-hidden mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none"
   >
     <span
-      class="whitespace-nowrap inline-block min-w-full text-center [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:[animation:marquee-scroll_3s_linear_infinite_alternate]"
+      class="inline-block min-w-full text-center whitespace-nowrap [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_3s_linear_infinite_alternate]"
     >
       <slot />
     </span>

src/components/common/OverlayIcon.vue

@@ -1,11 +1,11 @@
 <template>
-  <span class="relative inline-flex items-center justify-center size-[1em]">
+  <span class="relative inline-flex size-[1em] items-center justify-center">
     <i :class="mainIcon" class="text-[1em]" />
     <i
       :class="
         cn(
           subIcon,
-          'absolute leading-none pointer-events-none',
+          'pointer-events-none absolute leading-none',
           positionX === 'left' ? 'left-0' : 'right-0',
           positionY === 'top' ? 'top-0' : 'bottom-0'
         )

src/components/common/ScrubableNumberInput.vue

@@ -8,7 +8,7 @@
       v-if="!hideButtons"
       :aria-label="t('g.decrement')"
       data-testid="decrement"
-      class="h-full aspect-8/7 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="aspect-8/7 h-full rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
       :disabled="!canDecrement"
       tabindex="-1"
@@ -16,7 +16,7 @@
     >
       <i class="pi pi-minus" />
     </Button>
-    <div class="relative min-w-[4ch] flex-1 py-1.5 my-0.25">
+    <div class="relative my-0.25 min-w-[4ch] flex-1 py-1.5">
       <input
         ref="inputField"
         v-bind="inputAttrs"
@@ -24,7 +24,7 @@
         :disabled
         :class="
           cn(
-            'bg-transparent border-0 focus:outline-0 p-1 truncate text-sm absolute inset-0'
+            'absolute inset-0 truncate border-0 bg-transparent p-1 text-sm focus:outline-0'
           )
         "
         inputmode="decimal"
@@ -53,7 +53,7 @@
       v-if="!hideButtons"
       :aria-label="t('g.increment')"
       data-testid="increment"
-      class="h-full aspect-8/7 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="aspect-8/7 h-full rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
       :disabled="!canIncrement"
       tabindex="-1"

src/components/common/SearchBox.vue

@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
+        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
         customClass,
         wrapperStyle
       )
@@ -16,7 +16,7 @@
       unstyled
       :class="
         cn(
-          'absolute inset-0 size-full border-none outline-none bg-transparent text-sm',
+          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
           isLarge ? 'pl-11' : 'pl-8'
         )
       "
@@ -26,7 +26,7 @@
       v-if="filterIcon"
       size="icon"
       variant="textonly"
-      class="filter-button absolute right-0 inset-y-0 m-0 p-0"
+      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
       @click="$emit('showFilter', $event)"
     >
       <i :class="filterIcon" />
@@ -117,7 +117,7 @@ watchDebounced(
 const wrapperStyle = computed(() => {
   if (showBorder) {
     return cn(
-      'rounded-sm p-2 border border-solid border-border-default box-border',
+      'box-border rounded-sm border border-solid border-border-default p-2',
       isLarge.value ? 'h-10' : 'h-8'
     )
   }

src/components/common/SearchBoxV2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2 flex-auto">
+  <div class="flex flex-auto flex-col gap-2">
     <ComboboxRoot :ignore-filter="true" :open="false">
       <ComboboxAnchor
         :class="
@@ -7,7 +7,7 @@
             'relative flex w-full cursor-text items-center',
             'rounded-lg bg-comfy-input text-comfy-input-foreground',
             showBorder &&
-              'border border-solid border-border-default box-border',
+              'box-border border border-solid border-border-default',
             sizeClasses,
             className
           )
@@ -15,7 +15,7 @@
       >
         <i
           v-if="!searchTerm"
-          :class="cn('absolute left-4 pointer-events-none', icon, iconClass)"
+          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
         />
         <Button
           v-else

src/components/common/StatusBadge.vue

@@ -1,24 +1,31 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 import { statusBadgeVariants } from './statusBadge.variants'
 import type { StatusBadgeVariants } from './statusBadge.variants'
 
 const {
   label,
   severity = 'default',
-  variant
+  variant,
+  class: className
 } = defineProps<{
   label?: string | number
   severity?: StatusBadgeVariants['severity']
   variant?: StatusBadgeVariants['variant']
+  class?: string
 }>()
 
 const badgeClass = computed(() =>
-  statusBadgeVariants({
-    severity,
-    variant: variant ?? (label == null ? 'dot' : 'label')
-  })
+  cn(
+    statusBadgeVariants({
+      severity,
+      variant: variant ?? (label == null ? 'dot' : 'label')
+    }),
+    className
+  )
 )
 </script>
 

src/components/common/TextTickerMultiLine.vue

@@ -3,7 +3,7 @@
     <!-- Hidden single-line measurement element for overflow detection -->
     <div
       ref="measureRef"
-      class="invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap pointer-events-none"
+      class="pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap"
       aria-hidden="true"
     >
       <slot />
@@ -13,7 +13,7 @@
       <slot />
     </MarqueeLine>
 
-    <div v-else class="flex flex-col w-full">
+    <div v-else class="flex w-full flex-col">
       <MarqueeLine>{{ firstLine }}</MarqueeLine>
       <MarqueeLine>{{ secondLine }}</MarqueeLine>
     </div>

src/components/common/TreeExplorer.vue

@@ -3,7 +3,7 @@
     v-bind="$attrs"
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
+    class="tree-explorer bg-transparent px-2 py-0 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"

src/components/common/TreeExplorerTreeNode.vue

@@ -29,7 +29,7 @@
       />
     </div>
     <div
-      class="node-actions flex gap-1 touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+      class="node-actions flex gap-1 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100 touch:opacity-100"
     >
       <slot name="actions" :node="props.node" />
     </div>

src/components/common/TreeExplorerV2.vue

@@ -39,10 +39,10 @@
 
     <ContextMenuPortal v-if="showContextMenu">
       <ContextMenuContent
-        class="z-[9999] min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
+        class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
       >
         <ContextMenuItem
-          class="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-highlight focus:bg-highlight"
+          class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
           @select="handleAddToFavorites"
         >
           <i

src/components/common/TreeExplorerV2Node.vue

@@ -19,7 +19,7 @@
       @dragend="handleDragEnd"
     >
       <i class="icon-[comfy--node] size-4 shrink-0 text-muted-foreground" />
-      <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+      <span class="text-foreground min-w-0 flex-1 truncate text-sm">
         <slot name="node" :node="item.value">
           {{ item.value.label }}
         </slot>
@@ -27,7 +27,7 @@
       <button
         :class="
           cn(
-            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground hover:text-foreground',
+            'hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground',
             'opacity-0 group-hover/tree-node:opacity-100'
           )
         "
@@ -64,7 +64,7 @@
       <i
         :class="cn(item.value.icon, 'size-4 shrink-0 text-muted-foreground')"
       />
-      <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+      <span class="text-foreground min-w-0 flex-1 truncate text-sm">
         <slot name="folder" :node="item.value">
           {{ item.value.label }}
         </slot>

src/components/common/VirtualGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable] scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
+    class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface) h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable]"
   >
     <div :style="topSpacerStyle" />
     <div :style="mergedGridStyle">

src/components/common/WorkflowActionsDropdown.vue

@@ -9,7 +9,7 @@ import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
+import { useNewMenuItemIndicator } from '@/components/common/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -55,7 +55,7 @@ function handleOpen(open: boolean) {
           variant="secondary"
           size="unset"
           :aria-label="t('breadcrumbsMenu.workflowActions')"
-          class="relative h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="pointer-events-auto relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i
             class="size-4"
@@ -79,7 +79,7 @@ function handleOpen(open: boolean) {
         :align
         :side-offset="5"
         :collision-padding="10"
-        class="z-1000 rounded-lg px-2 py-3 min-w-56 bg-base-background shadow-interface border border-border-subtle"
+        class="z-1000 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
       >
         <WorkflowActionsList :items="menuItems" />
       </DropdownMenuContent>

src/components/common/WorkflowActionsList.vue

@@ -22,7 +22,7 @@ const {
     <component
       :is="separatorComponent"
       v-if="item.separator"
-      class="border-b w-full border-border-subtle my-1"
+      class="my-1 w-full border-b border-border-subtle"
     />
     <component
       :is="itemComponent"
@@ -30,11 +30,11 @@ const {
       :disabled="item.disabled"
       :class="
         cn(
-          'flex min-h-6 p-2 items-center gap-2 self-stretch rounded-sm outline-none',
+          'flex min-h-6 items-center gap-2 self-stretch rounded-sm p-2 outline-none',
           !item.disabled && item.command && 'cursor-pointer',
-          'data-[highlighted]:bg-secondary-background-hover',
+          'data-highlighted:bg-secondary-background-hover',
           !item.disabled && 'hover:bg-secondary-background-hover',
-          'data-[disabled]:opacity-50 data-[disabled]:cursor-default'
+          'data-disabled:cursor-default data-disabled:opacity-50'
         )
       "
       @select="() => item.command?.()"
@@ -44,7 +44,7 @@ const {
       <span class="flex-1">{{ item.label }}</span>
       <span
         v-if="item.badge"
-        class="rounded-full uppercase ml-3 flex items-center gap-1 bg-[var(--primary-background)] px-1.5 py-0.5 text-xxs text-base-foreground"
+        class="ml-3 flex items-center gap-1 rounded-full bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
       >
         {{ item.badge }}
       </span>

src/components/common/useNewMenuItemIndicator.test.ts

@@ -1,7 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
+import { useNewMenuItemIndicator } from '@/components/common/useNewMenuItemIndicator'
 import type { WorkflowMenuItem } from '@/types/workflowMenuItem'
 
 const mockSettingStore = vi.hoisted(() => ({

src/components/curve/CurveEditor.vue

@@ -76,7 +76,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from 'vue'
 
-import { useCurveEditor } from '@/composables/useCurveEditor'
+import { useCurveEditor } from '@/components/curve/useCurveEditor'
 
 import type { CurvePoint } from './types'
 

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -116,7 +116,7 @@
         v-if="!isLoading && filteredTemplates.length === 0"
         class="flex h-64 flex-col items-center justify-center text-neutral-500"
       >
-        <i class="mb-4 icon-[lucide--search] h-12 w-12 opacity-50" />
+        <i class="mb-4 icon-[lucide--search] size-12 opacity-50" />
         <p class="mb-2 text-lg">
           {{ $t('templateWorkflows.noResults', 'No templates found') }}
         </p>
@@ -154,9 +154,7 @@
             <template #top>
               <CardTop ratio="landscape">
                 <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="size-full animate-pulse bg-dialog-surface"></div>
                 </template>
               </CardTop>
             </template>
@@ -193,9 +191,7 @@
               <CardTop ratio="square">
                 <template #default>
                   <!-- Template Thumbnail -->
-                  <div
-                    class="relative h-full w-full overflow-hidden rounded-lg"
-                  >
+                  <div class="relative size-full overflow-hidden rounded-lg">
                     <template v-if="template.mediaType === 'audio'">
                       <AudioThumbnail :src="getBaseThumbnailSrc(template)" />
                     </template>
@@ -263,7 +259,7 @@
                     />
                     <ProgressSpinner
                       v-if="loadingTemplate === template.name"
-                      class="absolute inset-0 z-10 m-auto h-12 w-12"
+                      class="absolute inset-0 z-10 m-auto size-12"
                     />
                   </div>
                 </template>
@@ -339,9 +335,7 @@
             <template #top>
               <CardTop ratio="square">
                 <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="size-full animate-pulse bg-dialog-surface"></div>
                 </template>
               </CardTop>
             </template>

src/components/dialog/confirm/ConfirmBody.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col break-words px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
+    class="flex flex-col border-t border-border-default px-4 py-2 text-sm wrap-break-word text-muted-foreground"
   >
     <p v-if="promptTextReal">
       {{ promptTextReal }}

src/components/dialog/confirm/ConfirmFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="w-full flex flex-wrap gap-2 justify-end px-2 pb-2">
+  <section class="flex w-full flex-wrap justify-end gap-2 px-2 pb-2">
     <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
       {{ cancelTextX }}
     </Button>

src/components/dialog/confirm/ConfirmHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center gap-2 p-4 font-bold text-sm text-base-foreground font-inter"
+    class="flex items-center gap-2 p-4 font-inter text-sm font-bold text-base-foreground"
   >
     <span v-if="title" class="flex-auto">{{ title }}</span>
   </div>

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -1,5 +1,7 @@
 <template>
-  <section class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words">
+  <section
+    class="m-2 mt-4 flex flex-col gap-6 wrap-break-word whitespace-pre-wrap"
+  >
     <div>
       <span>{{ message }}</span>
       <ul v-if="itemList?.length" class="m-0 mt-2 flex flex-col gap-2 pl-4">
@@ -28,7 +30,7 @@
             id="doNotAskAgain"
             v-model="doNotAskAgain"
             type="checkbox"
-            class="h-4 w-4 cursor-pointer"
+            class="size-4 cursor-pointer"
           />
           <label for="doNotAskAgain">{{
             t('missingModelsDialog.doNotAskAgain')
@@ -38,12 +40,12 @@
           v-if="doNotAskAgain"
           keypath="missingModelsDialog.reEnableInSettings"
           tag="span"
-          class="text-sm text-muted-foreground ml-8"
+          class="ml-8 text-sm text-muted-foreground"
         >
           <template #link>
             <Button
               variant="textonly"
-              class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+              class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
               @click="openBlueprintOverwriteSetting"
             >
               {{ t('missingModelsDialog.reEnableInSettingsLink') }}

src/components/dialog/content/ErrorDialogContent.vue

@@ -28,7 +28,9 @@
     <template v-if="reportOpen">
       <Divider />
       <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
-        <pre class="break-words whitespace-pre-wrap">{{ reportContent }}</pre>
+        <pre class="wrap-break-word whitespace-pre-wrap">{{
+          reportContent
+        }}</pre>
       </ScrollPanel>
       <Divider />
     </template>

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -3,7 +3,7 @@
     v-if="hasMissingCoreNodes"
     severity="info"
     icon="pi pi-info-circle"
-    class="mx-2 my-2"
+    class="m-2"
     :pt="{
       root: { class: 'flex-col' },
       text: { class: 'flex-1' }

src/components/dialog/content/MissingModelsContent.vue

@@ -2,13 +2,13 @@
   <div
     class="flex w-full max-w-[490px] flex-col border-t border-border-default"
   >
-    <div class="flex h-full w-full flex-col gap-4 p-4">
-      <p class="m-0 text-sm leading-5 text-muted-foreground">
+    <div class="flex size-full flex-col gap-4 p-4">
+      <p class="m-0 text-sm/5 text-muted-foreground">
         {{ $t('missingModelsDialog.description') }}
       </p>
 
       <div
-        class="flex max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+        class="flex scrollbar-custom max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
       >
         <div
           v-for="model in processedModels"
@@ -17,13 +17,13 @@
         >
           <div class="flex items-center gap-2 overflow-hidden">
             <span
-              class="min-w-0 truncate text-sm text-foreground"
+              class="text-foreground min-w-0 truncate text-sm"
               :title="model.name"
             >
               {{ model.name }}
             </span>
             <span
-              class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold uppercase text-muted-foreground"
+              class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold text-muted-foreground uppercase"
             >
               {{ model.badgeLabel }}
             </span>
@@ -81,9 +81,7 @@
         </div>
       </div>
 
-      <p
-        class="m-0 text-xs leading-5 text-muted-foreground whitespace-pre-line"
-      >
+      <p class="m-0 text-xs/5 whitespace-pre-line text-muted-foreground">
         {{ $t('missingModelsDialog.footerDescription') }}
       </p>
 
@@ -92,15 +90,13 @@
         class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
       >
         <i
-          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
+          class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
         />
         <div class="flex flex-col gap-1">
-          <p
-            class="m-0 text-xs font-semibold leading-5 text-warning-background"
-          >
+          <p class="m-0 text-xs/5 font-semibold text-warning-background">
             {{ $t('missingModelsDialog.customModelsWarning') }}
           </p>
-          <p class="m-0 text-xs leading-5 text-warning-background">
+          <p class="m-0 text-xs/5 text-warning-background">
             {{ $t('missingModelsDialog.customModelsInstruction') }}
           </p>
         </div>

src/components/dialog/content/MissingModelsFooter.vue

@@ -6,7 +6,7 @@
           id="doNotAskAgainModels"
           v-model="doNotAskAgain"
           type="checkbox"
-          class="h-4 w-4 cursor-pointer"
+          class="size-4 cursor-pointer"
         />
         <label for="doNotAskAgainModels">{{
           $t('missingModelsDialog.doNotAskAgain')

src/components/dialog/content/MissingNodesContent.vue

@@ -4,10 +4,10 @@
     class="comfy-missing-nodes flex w-[490px] flex-col border-t border-border-default"
     :class="isCloud ? 'border-b' : ''"
   >
-    <div class="flex h-full w-full flex-col gap-4 p-4">
+    <div class="flex size-full flex-col gap-4 p-4">
       <!-- Description -->
       <div>
-        <p class="m-0 text-sm leading-5 text-muted-foreground">
+        <p class="m-0 text-sm/5 text-muted-foreground">
           {{
             isCloud
               ? $t('missingNodes.cloud.description')
@@ -23,10 +23,10 @@
         <!-- Section header with Replace button -->
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
-            <span class="text-xs font-semibold uppercase text-primary">
+            <span class="text-xs font-semibold text-primary uppercase">
               {{ $t('nodeReplacement.quickFixAvailable') }}
             </span>
-            <div class="h-2 w-2 rounded-full bg-primary" />
+            <div class="size-2 rounded-full bg-primary" />
           </div>
           <Button
             v-tooltip.top="$t('nodeReplacement.replaceWarning')"
@@ -35,7 +35,7 @@
             :disabled="selectedTypes.size === 0"
             @click="handleReplaceSelected"
           >
-            <i class="icon-[lucide--refresh-cw] mr-1.5 h-4 w-4" />
+            <i class="mr-1.5 icon-[lucide--refresh-cw] size-4" />
             {{
               $t('nodeReplacement.replaceSelected', {
                 count: selectedTypes.size
@@ -46,7 +46,7 @@
 
         <!-- Replaceable nodes list -->
         <div
-          class="flex max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+          class="flex scrollbar-custom max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
         >
           <!-- Select All row (sticky header) -->
           <div
@@ -55,7 +55,7 @@
                 'sticky top-0 z-10 flex items-center gap-3 border-b border-border-default bg-secondary-background px-3 py-2',
                 pendingNodes.length > 0
                   ? 'cursor-pointer hover:bg-secondary-background-hover'
-                  : 'opacity-50 pointer-events-none'
+                  : 'pointer-events-none opacity-50'
               )
             "
             tabindex="0"
@@ -77,14 +77,14 @@
             >
               <i
                 v-if="isAllSelected"
-                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+                class="text-bold icon-[lucide--check] text-xs text-base-foreground"
               />
               <i
                 v-else-if="isSomeSelected"
-                class="icon-[lucide--minus] text-bold text-xs text-base-foreground"
+                class="text-bold icon-[lucide--minus] text-xs text-base-foreground"
               />
             </div>
-            <span class="text-xs font-medium uppercase text-muted-foreground">
+            <span class="text-xs font-medium text-muted-foreground uppercase">
               {{ $t('nodeReplacement.compatibleAlternatives') }}
             </span>
           </div>
@@ -97,7 +97,7 @@
               cn(
                 'flex items-center gap-3 px-3 py-2',
                 replacedTypes.has(node.label)
-                  ? 'opacity-50 pointer-events-none'
+                  ? 'pointer-events-none opacity-50'
                   : 'cursor-pointer hover:bg-secondary-background-hover'
               )
             "
@@ -124,24 +124,24 @@
                 v-if="
                   replacedTypes.has(node.label) || selectedTypes.has(node.label)
                 "
-                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+                class="text-bold icon-[lucide--check] text-xs text-base-foreground"
               />
             </div>
             <div class="flex flex-col gap-0.5">
               <div class="flex items-center gap-2">
                 <span
                   v-if="replacedTypes.has(node.label)"
-                  class="inline-flex h-4 items-center rounded-full border border-success bg-success/10 px-1.5 text-xxxs font-semibold uppercase text-success"
+                  class="border-success bg-success/10 text-success inline-flex h-4 items-center rounded-full border px-1.5 text-xxxs font-semibold uppercase"
                 >
                   {{ $t('nodeReplacement.replaced') }}
                 </span>
                 <span
                   v-else
-                  class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold uppercase text-primary"
+                  class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold text-primary uppercase"
                 >
                   {{ $t('nodeReplacement.replaceable') }}
                 </span>
-                <span class="text-sm text-foreground">
+                <span class="text-foreground text-sm">
                   {{ node.label }}
                 </span>
               </div>
@@ -160,7 +160,7 @@
       >
         <!-- Section header -->
         <div class="flex items-center gap-2">
-          <span class="text-xs font-semibold uppercase text-error">
+          <span class="text-xs font-semibold text-error uppercase">
             {{ $t('nodeReplacement.installationRequired') }}
           </span>
           <i class="icon-[lucide--info] text-xs text-error" />
@@ -168,7 +168,7 @@
 
         <!-- Non-replaceable nodes list -->
         <div
-          class="flex flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+          class="flex scrollbar-custom flex-col overflow-y-auto rounded-lg bg-secondary-background"
         >
           <div
             v-for="node in nonReplaceableNodes"
@@ -179,11 +179,11 @@
               <div class="flex flex-col gap-0.5">
                 <div class="flex items-center gap-2">
                   <span
-                    class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold uppercase text-error"
+                    class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold text-error uppercase"
                   >
                     {{ $t('nodeReplacement.notReplaceable') }}
                   </span>
-                  <span class="text-sm text-foreground">
+                  <span class="text-foreground text-sm">
                     {{ node.label }}
                   </span>
                 </div>
@@ -209,9 +209,9 @@
         class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
       >
         <i
-          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
+          class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
         />
-        <p class="m-0 text-xs leading-5 text-neutral-foreground">
+        <p class="text-neutral-foreground m-0 text-xs/5">
           <i18n-t keypath="nodeReplacement.instructionMessage">
             <template #red>
               <span class="text-error">{{

src/components/dialog/content/MissingNodesFooter.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex w-full flex-col gap-2 py-2 px-4">
+  <div class="flex w-full flex-col gap-2 px-4 py-2">
     <div class="flex flex-col gap-1 text-sm text-muted-foreground">
       <div class="flex items-center gap-1">
         <input
           id="doNotAskAgainNodes"
           v-model="doNotAskAgain"
           type="checkbox"
-          class="h-4 w-4 cursor-pointer"
+          class="size-4 cursor-pointer"
         />
         <label for="doNotAskAgainNodes">{{
           $t('missingModelsDialog.doNotAskAgain')
@@ -16,12 +16,12 @@
         v-if="doNotAskAgain"
         keypath="missingModelsDialog.reEnableInSettings"
         tag="span"
-        class="text-sm text-muted-foreground ml-6"
+        class="ml-6 text-sm text-muted-foreground"
       >
         <template #link>
           <Button
             variant="textonly"
-            class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+            class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
             @click="openShowMissingNodesSetting"
           >
             {{ $t('missingModelsDialog.reEnableInSettingsLink') }}

src/components/dialog/content/SignInContent.vue

@@ -8,7 +8,7 @@
     <template v-else>
       <!-- Header -->
       <div class="mb-8 flex flex-col gap-4">
-        <h1 class="my-0 text-2xl leading-normal font-medium">
+        <h1 class="my-0 text-2xl/normal font-medium">
           {{ isSignIn ? t('auth.login.title') : t('auth.signup.title') }}
         </h1>
         <p class="my-0 text-base">
@@ -85,7 +85,7 @@
         >
           <img
             src="/assets/images/comfy-logo-mono.svg"
-            class="mr-2 h-5 w-5"
+            class="mr-2 size-5"
             :alt="$t('g.comfy')"
           />
           {{ t('auth.login.useApiKey') }}

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -3,8 +3,8 @@
     class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- Header -->
-    <div class="flex py-8 items-center justify-between px-8">
-      <h2 class="text-lg font-bold text-base-foreground m-0">
+    <div class="flex items-center justify-between p-8">
+      <h2 class="m-0 text-lg font-bold text-base-foreground">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />
@@ -20,7 +20,7 @@
     </div>
     <p
       v-if="isInsufficientCredits"
-      class="text-sm text-muted-foreground m-0 px-8"
+      class="m-0 px-8 text-sm text-muted-foreground"
     >
       {{ $t('credits.topUp.insufficientWorkflowMessage') }}
     </p>
@@ -39,7 +39,7 @@
           size="lg"
           :class="
             cn(
-              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              'focus-visible:ring-secondary-foreground h-10 w-full text-base font-medium',
               selectedPreset === amount && 'bg-secondary-background-selected'
             )
           "
@@ -95,7 +95,7 @@
 
     <p
       v-if="isBelowMin"
-      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+      class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
       <i class="icon-[lucide--component] size-4" />
       {{
@@ -106,7 +106,7 @@
     </p>
     <p
       v-if="showCeilingWarning"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+      class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
       <i class="icon-[lucide--component] size-4" />
       {{
@@ -123,7 +123,7 @@
       >
     </p>
 
-    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+    <div class="flex flex-col gap-8 p-8">
       <Button
         :disabled="!isValidAmount || loading"
         :loading="loading"

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
+    class="flex cursor-pointer items-center justify-between rounded-lg p-2 transition-all duration-200"
     :class="[
       selected
-        ? 'bg-secondary-background border-2 border-border-default'
-        : 'bg-component-node-disabled hover:bg-secondary-background border-2 border-transparent'
+        ? 'border-2 border-border-default bg-secondary-background'
+        : 'bg-component-node-disabled border-2 border-transparent hover:bg-secondary-background'
     ]"
     @click="$emit('select')"
   >

src/components/dialog/content/setting/UserPanel.vue

@@ -55,7 +55,7 @@
 
         <ProgressSpinner
           v-if="loading"
-          class="mt-4 h-8 w-8"
+          class="mt-4 size-8"
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">
@@ -67,7 +67,7 @@
             v-if="!isApiKeyLogin"
             keypath="auth.deleteAccount.contactSupport"
             tag="p"
-            class="text-muted text-sm"
+            class="text-sm text-muted"
           >
             <template #email>
               <a href="mailto:support@comfy.org" class="underline"

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-6">
     <div class="mb-8 flex flex-col gap-4">
-      <h1 class="my-0 text-2xl leading-normal font-medium">
+      <h1 class="my-0 text-2xl/normal font-medium">
         {{ t('auth.apiKey.title') }}
       </h1>
       <div class="flex flex-col gap-2">

src/components/dialog/content/signin/SignInForm.vue

@@ -63,7 +63,7 @@
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="mx-auto size-8" />
     <Button
       v-else
       type="submit"

src/components/dialog/content/signin/SignUpForm.vue

@@ -29,7 +29,7 @@
     <PasswordFields />
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="mx-auto size-8" />
     <Button
       v-else
       type="submit"

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('subscription.cancelDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         :disabled="isLoading"
         @click="onClose"
@@ -20,14 +20,14 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-col gap-4 p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{ description }}
       </p>
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" :disabled="isLoading" @click="onClose">
         {{ $t('subscription.cancelDialog.keepSubscription') }}
       </Button>

src/components/error/ErrorOverlay.vue

@@ -4,7 +4,7 @@
     enter-from-class="-translate-y-3 opacity-0"
     enter-to-class="translate-y-0 opacity-100"
   >
-    <div v-if="isVisible" class="flex justify-end w-full pointer-events-none">
+    <div v-if="isVisible" class="pointer-events-none flex w-full justify-end">
       <div
         role="alert"
         aria-live="assertive"
@@ -32,12 +32,12 @@
             <li
               v-for="(message, idx) in groupedErrorMessages"
               :key="idx"
-              class="flex items-baseline gap-2 text-sm leading-snug text-muted-foreground min-w-0"
+              class="flex min-w-0 items-baseline gap-2 text-sm/snug text-muted-foreground"
             >
               <span
                 class="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground"
               />
-              <span class="break-words line-clamp-3 whitespace-pre-wrap">{{
+              <span class="line-clamp-3 wrap-break-word whitespace-pre-wrap">{{
                 message
               }}</span>
             </li>

src/components/gradientslider/GradientSlider.vue

@@ -54,7 +54,7 @@ const pressed = ref(false)
     :class="
       cn(
         'relative flex w-full touch-none items-center select-none',
-        'data-[disabled]:opacity-50'
+        'data-disabled:opacity-50'
       )
     "
     :style="{ '--reka-slider-thumb-transform': 'translate(-50%, -50%)' }"
@@ -74,7 +74,7 @@ const pressed = ref(false)
       <SliderThumb
         :class="
           cn(
-            'block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25 top-1/2',
+            'top-1/2 block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25',
             'transition-[color,box-shadow,background-color]',
             'before:absolute before:-inset-1.5 before:block before:rounded-full before:bg-transparent',
             'hover:ring-2 hover:ring-black/40 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-hidden',

src/components/graph/CanvasModeSelector.vue

@@ -10,9 +10,9 @@
       <div
         class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
       >
-        <i :class="currentModeIcon" class="block h-4 w-4" />
+        <i :class="currentModeIcon" class="block size-4" />
       </div>
-      <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+      <i class="icon-[lucide--chevron-down] block size-4 pr-1.5" />
     </div>
   </Button>
 
@@ -31,7 +31,7 @@
         @click="setMode('select')"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--mouse-pointer-2] h-4 w-4" />
+          <i class="icon-[lucide--mouse-pointer-2] size-4" />
           <span>{{ $t('graphCanvasMenu.select') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{
@@ -44,7 +44,7 @@
         @click="setMode('hand')"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--hand] h-4 w-4" />
+          <i class="icon-[lucide--hand] size-4" />
           <span>{{ $t('graphCanvasMenu.hand') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>

src/components/graph/GraphCanvas.vue

@@ -6,12 +6,12 @@
     <template v-if="showUI" #workflow-tabs>
       <div
         v-if="workflowTabsPosition === 'Topbar'"
-        class="workflow-tabs-container pointer-events-auto relative w-full h-(--workflow-tabs-height)"
+        class="workflow-tabs-container pointer-events-auto relative h-(--workflow-tabs-height) w-full"
       >
         <!-- Native drag area for Electron -->
         <div
           v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
-          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+          class="app-drag fixed top-0 left-0 z-10 h-(--comfy-topbar-height) w-full"
         />
         <div
           class="flex h-full items-center border-b border-interface-stroke bg-comfy-menu-bg shadow-interface"
@@ -27,7 +27,7 @@
     </template>
     <template v-if="showUI" #side-bar-panel>
       <div
-        class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
+        class="sidebar-content-container size-full overflow-x-hidden overflow-y-auto"
       >
         <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
       </div>
@@ -148,9 +148,9 @@ import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
-import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
+import { useContextMenuTranslation } from '@/components/graph/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
-import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
+import { useGlobalLitegraph } from '@/components/graph/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -537,8 +537,13 @@ onMounted(async () => {
   await workflowPersistence.initializeWorkflow()
   workflowPersistence.restoreWorkflowTabsState()
 
+  const sharedWorkflowLoadStatus =
+    await workflowPersistence.loadSharedWorkflowFromUrlIfPresent()
+
   // Load template from URL if present
-  await workflowPersistence.loadTemplateFromUrlIfPresent()
+  if (sharedWorkflowLoadStatus === 'not-present') {
+    await workflowPersistence.loadTemplateFromUrlIfPresent()
+  }
 
   // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
   // WorkspaceAuthGate ensures flag state is resolved before GraphCanvas mounts

src/components/graph/GraphCanvasMenu.vue

@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
+      class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
       }"
@@ -20,17 +20,17 @@
         :button-styles="stringifiedMinimapStyles.buttonStyles"
       />
 
-      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
+      <div class="h-[27px] w-px self-center bg-node-divider" />
 
       <Button
         v-tooltip.top="fitViewTooltip"
         variant="secondary"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
+        class="size-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <i class="icon-[lucide--focus] h-4 w-4" />
+        <i class="icon-[lucide--focus] size-4" />
       </Button>
 
       <Button
@@ -44,11 +44,11 @@
       >
         <span class="inline-flex items-center gap-1 px-2 text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down] h-4 w-4" />
+          <i class="icon-[lucide--chevron-down] size-4" />
         </span>
       </Button>
 
-      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
+      <div class="h-[27px] w-px self-center bg-node-divider" />
 
       <Button
         v-tooltip.top="minimapTooltip"
@@ -59,7 +59,7 @@
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <i class="icon-[lucide--map] h-4 w-4" />
+        <i class="icon-[lucide--map] size-4" />
       </Button>
 
       <Button
@@ -78,7 +78,7 @@
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <i class="icon-[lucide--route-off] h-4 w-4" />
+        <i class="icon-[lucide--route-off] size-4" />
       </Button>
     </ButtonGroup>
   </div>
@@ -90,7 +90,7 @@ import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useZoomControls } from '@/composables/useZoomControls'
+import { useZoomControls } from '@/components/graph/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'

src/components/graph/NodeContextMenu.vue

@@ -2,7 +2,7 @@
   <ContextMenu
     ref="contextMenu"
     :model="menuItems"
-    class="max-h-[80vh] md:max-h-none overflow-y-auto md:overflow-y-visible"
+    class="max-h-[80vh] overflow-y-auto md:max-h-none md:overflow-y-visible"
     @show="onMenuShow"
     @hide="onMenuHide"
   >

src/components/graph/selectionToolbox/ColorPickerMenu.vue

@@ -23,7 +23,7 @@
       :class="
         isColorSubmenu
           ? 'flex flex-col gap-1 p-2'
-          : 'flex flex-col p-2 min-w-40'
+          : 'flex min-w-40 flex-col p-2'
       "
     >
       <div
@@ -31,12 +31,12 @@
         :key="subOption.label"
         :class="
           cn(
-            'hover:bg-secondary-background-hover rounded-sm cursor-pointer',
+            'cursor-pointer rounded-sm hover:bg-secondary-background-hover',
             isColorSubmenu
-              ? 'w-7 h-7 flex items-center justify-center'
+              ? 'flex size-7 items-center justify-center'
               : 'flex items-center gap-2 px-3 py-1.5 text-sm',
             subOption.disabled
-              ? 'cursor-not-allowed pointer-events-none text-node-icon-disabled'
+              ? 'pointer-events-none cursor-not-allowed text-node-icon-disabled'
               : 'hover:bg-secondary-background-hover'
           )
         "

src/components/graph/selectionToolbox/RefreshSelectionButton.vue

@@ -15,7 +15,7 @@
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
+import { useRefreshableSelection } from '@/components/graph/selectionToolbox/useRefreshableSelection'
 
 const { t } = useI18n()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()

src/components/graph/widgets/DomWidget.vue

@@ -2,14 +2,14 @@
   <div
     v-show="widgetState.visible"
     ref="widgetElement"
-    class="dom-widget h-full w-full"
+    class="dom-widget size-full"
     :title="tooltip"
     :style="style"
   >
     <component
       :is="widget.component"
       v-if="isComponentWidget(widget)"
-      class="h-full w-full"
+      class="size-full"
       :model-value="widget.value"
       :widget="widget"
       v-bind="widget.props"

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -33,7 +33,7 @@
           <span class="menu-label">{{ menuItem.label }}</span>
           <i
             v-if="menuItem.showExternalIcon"
-            class="icon-[lucide--external-link] text-primary w-4 h-4 ml-auto"
+            class="ml-auto icon-[lucide--external-link] size-4 text-primary"
           />
           <i
             v-if="menuItem.key === 'more'"
@@ -88,7 +88,7 @@
       data-testid="whats-new-section"
     >
       <h3
-        class="section-description flex items-center gap-2.5 self-stretch px-8 pt-2 pb-2"
+        class="section-description flex items-center gap-2.5 self-stretch px-8 py-2"
       >
         {{ $t('helpCenter.whatsNew') }}
       </h3>

src/components/honeyToast/HoneyToast.vue

@@ -31,10 +31,10 @@ function toggle() {
         <div
           :class="
             cn(
-              'overflow-hidden transition-all duration-300 min-w-0 max-w-full',
+              'max-w-full min-w-0 overflow-hidden transition-all duration-300',
               isExpanded
-                ? 'w-full max-h-100 sm:w-[max(400px,40vw)]'
-                : 'w-0 max-h-0'
+                ? 'max-h-100 w-full sm:w-[max(400px,40vw)]'
+                : 'max-h-0 w-0'
             )
           "
         >

src/components/imagecrop/WidgetImageCrop.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="widget-expands relative flex h-full w-full flex-col gap-1"
+    class="widget-expands relative flex size-full flex-col gap-1"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
@@ -18,7 +18,7 @@
         v-else-if="!imageUrl"
         class="flex size-full flex-col items-center justify-center text-center"
       >
-        <i class="mb-2 icon-[lucide--image] h-12 w-12" />
+        <i class="mb-2 icon-[lucide--image] size-12" />
         <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
       </div>
 
@@ -104,7 +104,10 @@ import SelectContent from '@/components/ui/select/SelectContent.vue'
 import SelectItem from '@/components/ui/select/SelectItem.vue'
 import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
 import SelectValue from '@/components/ui/select/SelectValue.vue'
-import { ASPECT_RATIOS, useImageCrop } from '@/composables/useImageCrop'
+import {
+  ASPECT_RATIOS,
+  useImageCrop
+} from '@/components/imagecrop/useImageCrop'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { Bounds } from '@/renderer/core/layout/types'
 

src/components/input/MultiSelect.vue

@@ -16,7 +16,7 @@
     :pt="{
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'h-10 relative inline-flex cursor-pointer select-none',
+          'relative inline-flex h-10 cursor-pointer select-none',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
           'border-[2.5px] border-solid',
@@ -24,7 +24,7 @@
             ? 'border-node-component-border'
             : 'border-transparent',
           'focus-within:border-node-component-border',
-          { 'opacity-60 cursor-default': props.disabled }
+          { 'cursor-default opacity-60': props.disabled }
         )
       }),
       labelContainer: {
@@ -46,7 +46,7 @@
       // Overlay & list visuals unchanged
       overlay: {
         class: cn(
-          'mt-2 rounded-lg py-2 px-2',
+          'mt-2 rounded-lg p-2',
           'bg-base-background',
           'text-base-foreground',
           'border border-solid border-border-default'
@@ -62,7 +62,7 @@
       // Option row hover and focus tone
       option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
+          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
           'hover:bg-secondary-background-hover',
           // Add focus/highlight state for keyboard navigation
           context?.focused &&
@@ -135,7 +135,7 @@
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
       >
         {{ selectedCount }}
       </span>
@@ -150,7 +150,7 @@
     <template #option="slotProps">
       <div
         role="button"
-        class="flex items-center gap-2 cursor-pointer"
+        class="flex cursor-pointer items-center gap-2"
         :style="popoverStyle"
       >
         <div

src/components/input/SingleSelect.vue

@@ -40,7 +40,7 @@
       },
       overlay: {
         class: cn(
-          'mt-2 p-2 rounded-lg',
+          'mt-2 rounded-lg p-2',
           'bg-base-background text-base-foreground',
           'border border-solid border-border-default'
         )
@@ -57,7 +57,7 @@
       option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
         class: cn(
           // Row layout
-          'flex items-center justify-between gap-3 px-2 py-3 rounded-sm',
+          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
           'hover:bg-secondary-background-hover',
           // Add focus state for keyboard navigation
           context.focused && 'bg-secondary-background-hover',

src/components/load3d/Load3DScene.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="relative h-full w-full min-h-[200px]"
+    class="relative size-full min-h-[200px]"
     data-capture-wheel="true"
     tabindex="-1"
     @pointerdown.stop="focusContainer"

src/components/load3d/Load3dViewerContent.vue

@@ -9,7 +9,7 @@
     <div class="relative flex-1">
       <div
         ref="containerRef"
-        class="absolute h-full w-full"
+        class="absolute size-full"
         @resize="viewer.handleResize"
         @dragover.prevent.stop="handleDragOver"
         @dragleave.stop="handleDragLeave"

src/components/load3d/controls/PopupSlider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative show-slider">
+  <div class="show-slider relative">
     <Button
       v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
       size="icon"
@@ -12,7 +12,7 @@
     </Button>
     <div
       v-show="showSlider"
-      class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface p-4 shadow-lg w-[150px]"
+      class="absolute top-0 left-12 w-[150px] rounded-lg bg-interface-menu-surface p-4 shadow-lg"
     >
       <Slider
         v-model="value"