diff --git a/.storybook/README.md b/.storybook/README.md
index ba09b24d5..08db988a9 100644
--- a/.storybook/README.md
+++ b/.storybook/README.md
@@ -226,8 +226,8 @@ In this project, only the `<i class="icon-[lucide--folder]" />` syntax from unpl
 <script setup lang="ts"></script>
 
 <template>
-  <i class="icon-[lucide--trophy] text-neutral size-4" />
-  <i class="icon-[lucide--settings] text-neutral size-4" />
+  <i class="text-neutral icon-[lucide--trophy] size-4" />
+  <i class="text-neutral icon-[lucide--settings] size-4" />
 </template>
 ```
 
diff --git a/lint-staged.config.mjs b/lint-staged.config.mjs
deleted file mode 100644
index 6f74d6616..000000000
--- a/lint-staged.config.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-import path from 'node:path'
-
-export default {
-  'tests-ui/**': () =>
-    'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
-
-  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
-
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
-}
-
-function formatAndEslint(fileNames) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
-  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
-  return [
-    `pnpm exec oxfmt ${joinedPaths}`,
-    `pnpm exec oxlint --fix ${joinedPaths}`,
-    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
-  ]
-}
diff --git a/lint-staged.config.ts b/lint-staged.config.ts
index 89deaa4b0..3ea9358fa 100644
--- a/lint-staged.config.ts
+++ b/lint-staged.config.ts
@@ -1,6 +1,9 @@
 import path from 'node:path'
 
 export default {
+  'tests-ui/**': () =>
+    'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
+
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
@@ -14,7 +17,7 @@ function formatAndEslint(fileNames: string[]) {
   const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
   const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
   return [
-    `pnpm exec prettier --cache --write ${joinedPaths}`,
+    `pnpm exec oxfmt ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 4a7695d18..a0a8a0cf5 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/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 h-full w-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="sidebarStateKey"
         state-storage="local"
         @resizestart="onResizestart"
@@ -30,10 +30,10 @@
           :class="
             sidebarLocation === 'left'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
-                  sidebarPanelVisible && 'min-w-78'
-                )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+                'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
+                sidebarPanelVisible && 'min-w-78'
+              )
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="sidebarLocation === 'left' ? 10 : 15"
           :size="20"
@@ -54,11 +54,17 @@
         </SplitterPanel>
 
         <!-- Main panel (always present) -->
-        <SplitterPanel :size="80" class="flex flex-col">
-          <slot name="topmenu" :sidebar-panel-visible />
+        <SplitterPanel
+          :size="80"
+          class="flex flex-col"
+        >
+          <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 mr-1 mb-1 ml-1 flex-1 border-none bg-transparent"
             layout="vertical"
             :pt:gutter="
               cn(
@@ -75,7 +81,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>
@@ -90,10 +96,10 @@
           :class="
             sidebarLocation === 'right'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
-                  sidebarPanelVisible && 'min-w-78'
-                )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+                'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
+                sidebarPanelVisible && 'min-w-78'
+              )
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="sidebarLocation === 'right' ? 10 : 15"
           :size="20"
@@ -103,7 +109,10 @@
             sidebarLocation === 'right' ? t('sideToolbar.sidebar') : undefined
           "
         >
-          <slot v-if="sidebarLocation === 'left'" name="right-side-panel" />
+          <slot
+            v-if="sidebarLocation === 'left'"
+            name="right-side-panel"
+          />
           <slot
             v-else-if="sidebarLocation === 'right' && sidebarPanelVisible"
             name="side-bar-panel"
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index fa99e032c..5b4103a49 100644
--- a/src/components/MenuHamburger.vue
+++ b/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 }"
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 28f2411ea..cd591d505 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -32,14 +32,14 @@
         </div>
 
         <div
-          class="actionbar-container pointer-events-auto flex gap-2 h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+          class="actionbar-container pointer-events-auto flex h-12 items-center gap-2 rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
         >
           <ActionBarButtons />
           <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
           <div
             ref="legacyCommandsContainerRef"
             class="[&:not(:has(*>*:not(:empty)))]:hidden"
-          ></div>
+          />
           <ComfyActionbar />
           <Button
             v-tooltip.bottom="queueHistoryTooltipConfig"
@@ -54,7 +54,7 @@
             <i class="icon-[lucide--history] size-4" />
             <span
               v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] leading-[14px] font-medium text-base-foreground"
             >
               {{ queuedCount }}
             </span>
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 5ea860852..86124544c 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex h-full items-center" :class="cn(!isDocked && '-ml-2')">
+  <div
+    class="flex h-full items-center"
+    :class="cn(!isDocked && '-ml-2')"
+  >
     <div
       v-if="isDragging && !isDocked"
       :class="actionbarClass"
@@ -18,12 +21,15 @@
         content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div ref="panelRef" class="flex items-center select-none gap-2">
+      <div
+        ref="panelRef"
+        class="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'
             )
           "
@@ -282,18 +288,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'
   )
 )
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index 655df0b65..809d547e4 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -4,7 +4,10 @@
     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="terminalEl" class="terminal-host h-full" />
+      <div
+        ref="terminalEl"
+        class="terminal-host h-full"
+      />
     </div>
     <Button
       v-tooltip.left="{
@@ -15,7 +18,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"
@@ -109,6 +112,6 @@ onUnmounted(() => {
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  @apply overflow-hidden bg-neutral-900;
 }
 </style>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index bf4ba405a..dc55bddb0 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -46,9 +46,9 @@
           :is-active="item.key === activeItemKey"
         />
       </template>
-      <template #separator
-        ><span style="transform: scale(1.5)"> / </span></template
-      >
+      <template #separator>
+        <span style="transform: scale(1.5)"> / </span>
+      </template>
     </Breadcrumb>
   </div>
 </template>
@@ -233,7 +233,7 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden h-8;
+  @apply flex h-8 items-center overflow-hidden;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
   border: 1px solid transparent;
   background-color: transparent;
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index 0edcc25f9..499ee7cd4 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -21,8 +21,15 @@
       class="icon-[lucide--triangle-alert] text-warning-background"
     />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
-    <Tag v-if="item.isBlueprint" value="Blueprint" severity="primary" />
-    <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
+    <Tag
+      v-if="item.isBlueprint"
+      value="Blueprint"
+      severity="primary"
+    />
+    <i
+      v-if="isActive"
+      class="pi pi-angle-down text-[10px]"
+    />
   </a>
   <Menu
     v-if="isActive || isRoot"
@@ -208,7 +215,7 @@ defineExpose({
 }
 
 .p-breadcrumb-item-label {
-  @apply whitespace-nowrap text-ellipsis overflow-hidden;
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
 .active-breadcrumb-item {
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 81a23c5ce..f0b27ec02 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -2,12 +2,12 @@
   <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
       )
     "
   >
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
diff --git a/src/components/card/CardBottom.vue b/src/components/card/CardBottom.vue
index 4a0ae1047..502d08bce 100644
--- a/src/components/card/CardBottom.vue
+++ b/src/components/card/CardBottom.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="containerClasses">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
@@ -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>
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 8b8f81944..0b9e8fa5c 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="containerClasses">
-    <slot name="top"></slot>
-    <slot name="bottom"></slot>
+    <slot name="top" />
+    <slot name="bottom" />
   </div>
 </template>
 
@@ -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'
     )
   }
 
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index b31e283db..0f19eb3fb 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="chipClasses">
-    <slot name="icon"></slot>
+    <slot name="icon" />
     <span>{{ label }}</span>
   </div>
 </template>
@@ -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]'
   )
 }
 
diff --git a/src/components/common/OverlayIcon.vue b/src/components/common/OverlayIcon.vue
index bc68918f0..268c51cfd 100644
--- a/src/components/common/OverlayIcon.vue
+++ b/src/components/common/OverlayIcon.vue
@@ -1,11 +1,14 @@
 <template>
-  <span class="relative inline-flex items-center justify-center size-[1em]">
-    <i :class="mainIcon" class="text-[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'
         )
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 3d91ddfe0..6bcfff507 100644
--- a/src/components/common/SearchBox.vue
+++ b/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
       )
@@ -14,19 +14,22 @@
       :placeholder
       :autofocus
       unstyled
-      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
+      class="absolute inset-0 size-full border-none bg-transparent pl-11 text-sm outline-none"
       :aria-label="placeholder"
     />
     <Button
       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" />
     </Button>
-    <InputIcon v-if="!modelValue" :class="icon" />
+    <InputIcon
+      v-if="!modelValue"
+      :class="icon"
+    />
     <Button
       v-if="modelValue"
       class="clear-button absolute left-0"
@@ -37,7 +40,10 @@
       <i class="icon-[lucide--x] size-4" />
     </Button>
   </div>
-  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
+  <div
+    v-if="filters?.length"
+    class="search-filters flex flex-wrap gap-2 pt-2"
+  >
     <SearchFilterChip
       v-for="filter in filters"
       :key="filter.id"
@@ -109,7 +115,7 @@ watchDebounced(
 
 const wrapperStyle = computed(() => {
   if (showBorder) {
-    return cn('rounded p-2 border border-solid border-border-default')
+    return cn('rounded border border-solid border-border-default p-2')
   }
 
   // Size-specific classes matching button sizes for consistency
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 828d8ff45..e9684b3dc 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -2,7 +2,7 @@
   <Tree
     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"
@@ -23,17 +23,26 @@
     }"
   >
     <template #folder="{ node }">
-      <slot name="folder" :node="node">
+      <slot
+        name="folder"
+        :node="node"
+      >
         <TreeExplorerTreeNode :node="node" />
       </slot>
     </template>
     <template #node="{ node }">
-      <slot name="node" :node="node">
+      <slot
+        name="node"
+        :node="node"
+      >
         <TreeExplorerTreeNode :node="node" />
       </slot>
     </template>
   </Tree>
-  <ContextMenu ref="menu" :model="menuItems" />
+  <ContextMenu
+    ref="menu"
+    :model="menuItems"
+  />
 </template>
 <script setup lang="ts">
 import ContextMenu from 'primevue/contextmenu'
diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index cea8ba451..dbacd359a 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -12,13 +12,19 @@
   >
     <div class="node-content">
       <span class="node-label">
-        <slot name="before-label" :node="props.node" />
+        <slot
+          name="before-label"
+          :node="props.node"
+        />
         <EditableText
           :model-value="node.label"
           :is-editing="isEditing"
           @edit="handleRename"
         />
-        <slot name="after-label" :node="props.node" />
+        <slot
+          name="after-label"
+          :node="props.node"
+        />
       </span>
       <Badge
         v-if="showNodeBadgeText"
@@ -28,9 +34,12 @@
       />
     </div>
     <div
-      class="node-actions touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100 touch:opacity-100"
     >
-      <slot name="actions" :node="props.node" />
+      <slot
+        name="actions"
+        :node="props.node"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
index 9a1cd5980..68addf02c 100644
--- a/src/components/dialog/confirm/ConfirmBody.vue
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col 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 text-muted-foreground"
   >
     <p v-if="promptTextReal">
       {{ promptTextReal }}
diff --git a/src/components/dialog/confirm/ConfirmFooter.vue b/src/components/dialog/confirm/ConfirmFooter.vue
index 9cdd6e37b..2fe66a98c 100644
--- a/src/components/dialog/confirm/ConfirmFooter.vue
+++ b/src/components/dialog/confirm/ConfirmFooter.vue
@@ -1,6 +1,11 @@
 <template>
-  <section class="w-full flex gap-2 justify-end px-2 pb-2">
-    <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
+  <section class="flex w-full justify-end gap-2 px-2 pb-2">
+    <Button
+      :disabled
+      variant="textonly"
+      autofocus
+      @click="$emit('cancel')"
+    >
       {{ cancelTextX }}
     </Button>
     <Button
diff --git a/src/components/dialog/confirm/ConfirmHeader.vue b/src/components/dialog/confirm/ConfirmHeader.vue
index 3c8337733..6736da82b 100644
--- a/src/components/dialog/confirm/ConfirmHeader.vue
+++ b/src/components/dialog/confirm/ConfirmHeader.vue
@@ -1,8 +1,11 @@
 <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>
+    <span
+      v-if="title"
+      class="flex-auto"
+    >{{ title }}</span>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/src/components/dialog/content/MissingNodesContent.vue b/src/components/dialog/content/MissingNodesContent.vue
index 7c3a35b24..44a0559d3 100644
--- a/src/components/dialog/content/MissingNodesContent.vue
+++ b/src/components/dialog/content/MissingNodesContent.vue
@@ -14,21 +14,27 @@
           }}
         </p>
       </div>
-      <MissingCoreNodesMessage v-if="!isCloud" :missing-core-nodes />
+      <MissingCoreNodesMessage
+        v-if="!isCloud"
+        :missing-core-nodes
+      />
 
       <!-- Missing Nodes List Wrapper -->
       <div
-        class="comfy-missing-nodes flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
+        class="comfy-missing-nodes flex scrollbar-custom max-h-[256px] flex-col rounded-lg bg-secondary-background py-2"
       >
         <div
           v-for="(node, i) in uniqueNodes"
           :key="i"
-          class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
+          class="flex min-h-8 items-center justify-between bg-secondary-background px-4 py-2 text-muted-foreground"
         >
           <span class="text-xs">
             {{ node.label }}
           </span>
-          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
+          <span
+            v-if="node.hint"
+            class="text-xs"
+          >{{ node.hint }}</span>
         </div>
       </div>
 
diff --git a/src/components/dialog/content/MissingNodesFooter.vue b/src/components/dialog/content/MissingNodesFooter.vue
index ba203660e..a25b37703 100644
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -2,7 +2,7 @@
   <!-- Cloud mode: Learn More + Got It buttons -->
   <div
     v-if="isCloud"
-    class="flex w-full items-center justify-between gap-2 py-2 px-4"
+    class="flex w-full items-center justify-between gap-2 px-4 py-2"
   >
     <Button
       variant="textonly"
@@ -12,19 +12,33 @@
       target="_blank"
       rel="noopener noreferrer"
     >
-      <i class="icon-[lucide--info]"></i>
+      <i class="icon-[lucide--info]" />
       <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
     </Button>
-    <Button variant="secondary" size="md" @click="handleGotItClick">{{
-      $t('missingNodes.cloud.gotIt')
-    }}</Button>
+    <Button
+      variant="secondary"
+      size="md"
+      @click="handleGotItClick"
+    >
+      {{
+        $t('missingNodes.cloud.gotIt')
+      }}
+    </Button>
   </div>
 
   <!-- OSS mode: Open Manager + Install All buttons -->
-  <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <Button variant="textonly" @click="openManager">{{
-      $t('g.openManager')
-    }}</Button>
+  <div
+    v-else-if="showManagerButtons"
+    class="flex justify-end gap-1 px-4 py-2"
+  >
+    <Button
+      variant="textonly"
+      @click="openManager"
+    >
+      {{
+        $t('g.openManager')
+      }}
+    </Button>
     <PackInstallButton
       v-if="showInstallAllButton"
       type="secondary"
diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue
index 51c29aaf5..7cee78257 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.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 px-8 py-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 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 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'
             )
           "
@@ -65,9 +65,7 @@
           @max-reached="showCeilingWarning = true"
         >
           <template #prefix>
-            <span class="shrink-0 text-base font-semibold text-base-foreground"
-              >$</span
-            >
+            <span class="shrink-0 text-base font-semibold text-base-foreground">$</span>
           </template>
         </FormattedNumberStepper>
       </div>
@@ -95,7 +93,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 +104,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" />
       {{
@@ -119,11 +117,10 @@
         href="https://www.comfy.org/cloud/enterprise"
         target="_blank"
         class="ml-1 text-inherit"
-        >{{ $t('credits.topUp.contactUs') }}</a
-      >
+      >{{ $t('credits.topUp.contactUs') }}</a>
     </p>
 
-    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+    <div class="flex flex-col gap-8 px-8 pt-8 pb-8">
       <Button
         :disabled="!isValidAmount || loading"
         :loading="loading"
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index c67c273a2..90985020d 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/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')"
   >
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index cbc946fea..ac785c580 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -7,7 +7,10 @@
   >
     <!-- Email Field -->
     <div class="flex flex-col gap-2">
-      <label class="mb-2 text-base font-medium opacity-80" :for="emailInputId">
+      <label
+        class="mb-2 text-base font-medium opacity-80"
+        :for="emailInputId"
+      >
         {{ t('auth.login.emailLabel') }}
       </label>
       <InputText
@@ -19,7 +22,10 @@
         :placeholder="t('auth.login.emailPlaceholder')"
         :invalid="$form.email?.invalid"
       />
-      <small v-if="$form.email?.invalid" class="text-red-500">{{
+      <small
+        v-if="$form.email?.invalid"
+        class="text-red-500"
+      >{{
         $form.email.error.message
       }}</small>
     </div>
@@ -54,13 +60,19 @@
         fluid
         class="h-10"
       />
-      <small v-if="$form.password?.invalid" class="text-red-500">{{
+      <small
+        v-if="$form.password?.invalid"
+        class="text-red-500"
+      >{{
         $form.password.error.message
       }}</small>
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
+    <ProgressSpinner
+      v-if="loading"
+      class="mx-auto h-8 w-8"
+    />
     <Button
       v-else
       type="submit"
@@ -131,6 +143,6 @@ const handleForgotPassword = async (
 @reference '../../../../assets/css/style.css';
 
 .text-link-disabled {
-  @apply opacity-50 cursor-not-allowed;
+  @apply cursor-not-allowed opacity-50;
 }
 </style>
diff --git a/src/components/graph/NodeContextMenu.vue b/src/components/graph/NodeContextMenu.vue
index 97ee1b9c9..ac1523d8f 100644
--- a/src/components/graph/NodeContextMenu.vue
+++ b/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"
   >
@@ -12,7 +12,10 @@
         class="flex items-center gap-2 px-3 py-1.5"
         @click="item.isColorSubmenu ? showColorPopover($event) : undefined"
       >
-        <i v-if="item.icon" :class="[item.icon, 'size-4']" />
+        <i
+          v-if="item.icon"
+          :class="[item.icon, 'size-4']"
+        />
         <span class="flex-1">{{ item.label }}</span>
         <span
           v-if="item.shortcut"
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index 17f350dbd..e1dbaa3ee 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -11,7 +11,10 @@
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
+        <i
+          class="pi pi-circle-fill"
+          :style="{ color: currentColor ?? '' }"
+        />
         <i class="icon-[lucide--chevron-down]" />
       </div>
     </Button>
@@ -166,6 +169,6 @@ watch(
 }
 
 :deep(.p-togglebutton) {
-  @apply py-2 px-1;
+  @apply px-1 py-2;
 }
 </style>
diff --git a/src/components/graph/selectionToolbox/ColorPickerMenu.vue b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
index dddcfb1d0..dde27630b 100644
--- a/src/components/graph/selectionToolbox/ColorPickerMenu.vue
+++ b/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 cursor-pointer',
+            'cursor-pointer rounded hover:bg-secondary-background-hover',
             isColorSubmenu
-              ? 'w-7 h-7 flex items-center justify-center'
+              ? 'flex h-7 w-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'
           )
         "
@@ -53,7 +53,10 @@
             v-if="isShapeSelected(subOption)"
             class="icon-[lucide--check] size-4 flex-shrink-0"
           />
-          <div v-else class="w-4 flex-shrink-0" />
+          <div
+            v-else
+            class="w-4 flex-shrink-0"
+          />
           <span>{{ subOption.label }}</span>
         </template>
       </div>
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index d912a2941..7fe7d1ce6 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -6,7 +6,10 @@
   >
     <!-- Main Menu Items -->
     <div class="w-full">
-      <nav class="flex w-full flex-col gap-2" role="menubar">
+      <nav
+        class="flex w-full flex-col gap-2"
+        role="menubar"
+      >
         <button
           v-for="menuItem in menuItems"
           v-show="menuItem.visible !== false"
@@ -26,14 +29,20 @@
                 v-if="typeof menuItem.icon === 'object'"
                 :size="16"
               />
-              <i v-else :class="menuItem.icon" />
+              <i
+                v-else
+                :class="menuItem.icon"
+              />
             </div>
-            <div v-if="menuItem.showRedDot" class="menu-red-dot" />
+            <div
+              v-if="menuItem.showRedDot"
+              class="menu-red-dot"
+            />
           </div>
           <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] h-4 w-4 text-primary"
           />
           <i
             v-if="menuItem.key === 'more'"
@@ -109,7 +118,10 @@
           @keydown.enter="onReleaseClick(release)"
           @keydown.space.prevent="onReleaseClick(release)"
         >
-          <i class="help-menu-icon icon-[lucide--package]" aria-hidden="true" />
+          <i
+            class="help-menu-icon icon-[lucide--package]"
+            aria-hidden="true"
+          />
           <div class="release-content">
             <span class="release-title">
               {{
@@ -119,7 +131,10 @@
                 })
               }}
             </span>
-            <time class="release-date" :datetime="release.published_at">
+            <time
+              class="release-date"
+              :datetime="release.published_at"
+            >
               <span class="normal-state">
                 {{ formatReleaseDate(release.published_at) }}
               </span>
@@ -138,13 +153,23 @@
         role="status"
         aria-live="polite"
       >
-        <i class="pi pi-spin pi-spinner help-menu-icon" aria-hidden="true" />
+        <i
+          class="pi pi-spin pi-spinner help-menu-icon"
+          aria-hidden="true"
+        />
         <span>{{ $t('helpCenter.loadingReleases') }}</span>
       </div>
 
       <!-- No Releases State -->
-      <div v-else class="help-menu-item" role="status">
-        <i class="pi pi-info-circle help-menu-icon" aria-hidden="true" />
+      <div
+        v-else
+        class="help-menu-item"
+        role="status"
+      >
+        <i
+          class="pi pi-info-circle help-menu-icon"
+          aria-hidden="true"
+        />
         <span>{{ $t('helpCenter.noRecentReleases') }}</span>
       </div>
     </section>
diff --git a/src/components/imagecrop/WidgetImageCrop.vue b/src/components/imagecrop/WidgetImageCrop.vue
index 4a1c39ef6..cb996e3c7 100644
--- a/src/components/imagecrop/WidgetImageCrop.vue
+++ b/src/components/imagecrop/WidgetImageCrop.vue
@@ -10,7 +10,10 @@
       ref="containerEl"
       class="relative min-h-0 flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
     >
-      <div v-if="isLoading" class="flex size-full items-center justify-center">
+      <div
+        v-if="isLoading"
+        class="flex size-full items-center justify-center"
+      >
         <span class="text-sm">{{ $t('imageCrop.loading') }}</span>
       </div>
 
@@ -19,7 +22,9 @@
         class="flex size-full flex-col items-center justify-center text-center"
       >
         <i class="mb-2 icon-[lucide--image] h-12 w-12" />
-        <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
+        <p class="text-sm">
+          {{ $t('imageCrop.noInputImage') }}
+        </p>
       </div>
 
       <img
@@ -28,11 +33,11 @@
         :src="imageUrl"
         :alt="$t('imageCrop.cropPreviewAlt')"
         draggable="false"
-        class="block size-full object-contain select-none brightness-50"
+        class="block size-full object-contain brightness-50 select-none"
         @load="handleImageLoad"
         @error="handleImageError"
         @dragstart.prevent
-      />
+      >
 
       <div
         v-if="imageUrl && !isLoading"
@@ -42,7 +47,10 @@
         @pointermove="handleDragMove"
         @pointerup="handleDragEnd"
       >
-        <div class="pointer-events-none size-full" :style="cropImageStyle" />
+        <div
+          class="pointer-events-none size-full"
+          :style="cropImageStyle"
+        />
       </div>
 
       <div
@@ -57,7 +65,10 @@
       />
     </div>
 
-    <WidgetBoundingBox v-model="modelValue" class="shrink-0" />
+    <WidgetBoundingBox
+      v-model="modelValue"
+      class="shrink-0"
+    />
   </div>
 </template>
 
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 21ba0d6a2..2953ca87c 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -121,7 +121,7 @@
             {{ $t('g.clearAll') }}
           </Button>
         </div>
-        <div class="my-4 h-px bg-border-default"></div>
+        <div class="my-4 h-px bg-border-default" />
       </div>
     </template>
 
@@ -147,7 +147,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
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index cf497dea5..9d51d76f3 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="relative h-full w-full min-h-[200px]"
+    class="relative h-full min-h-[200px] w-full"
     data-capture-wheel="true"
     @pointerdown.stop
     @pointermove.stop
@@ -14,7 +14,10 @@
     @dragleave.stop="handleDragLeave"
     @drop.prevent.stop="handleDrop"
   >
-    <LoadingOverlay :loading="loading" :loading-message="loadingMessage" />
+    <LoadingOverlay
+      :loading="loading"
+      :loading-message="loadingMessage"
+    />
     <div
       v-if="!isPreview && isDragging"
       class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
diff --git a/src/components/load3d/controls/PopupSlider.vue b/src/components/load3d/controls/PopupSlider.vue
index d51a2e5b1..b8e35b125 100644
--- a/src/components/load3d/controls/PopupSlider.vue
+++ b/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"
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index 45c7afb24..3650388e4 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -13,7 +13,7 @@
         :class="
           cn(
             'rounded-full',
-            isRecording && 'text-red-500 recording-button-blink'
+            isRecording && 'recording-button-blink text-red-500'
           )
         "
         :aria-label="
diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index 7054f1a15..8debdd2ce 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -1,75 +1,78 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3 class="text-center text-[15px] font-sans text-descrip-text mt-2.5">
+    <h3 class="text-descrip-text mt-2.5 text-center font-sans text-[15px]">
       {{ t('maskEditor.brushSettings') }}
     </h3>
 
-    <button :class="textButtonClass" @click="resetToDefault">
+    <button
+      :class="textButtonClass"
+      @click="resetToDefault"
+    >
       {{ t('maskEditor.resetToDefault') }}
     </button>
 
     <!-- Brush Shape -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-descrip-text">
+      <span class="text-descrip-text text-left font-sans text-xs">
         {{ t('maskEditor.brushShape') }}
       </span>
 
       <div
-        class="flex flex-row gap-2.5 items-center h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+        class="flex h-[50px] w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
       >
         <div
           class="maskEditor_sidePanelBrushShapeCircle hover:bg-comfy-menu-bg"
           :class="
             cn(
               store.brushSettings.type === BrushShape.Arc
-                ? 'bg-[var(--p-button-text-primary-color)] active'
+                ? 'active bg-[var(--p-button-text-primary-color)]'
                 : 'bg-transparent'
             )
           "
           @click="setBrushShape(BrushShape.Arc)"
-        ></div>
+        />
 
         <div
           class="maskEditor_sidePanelBrushShapeSquare hover:bg-comfy-menu-bg"
           :class="
             cn(
               store.brushSettings.type === BrushShape.Rect
-                ? 'bg-[var(--p-button-text-primary-color)] active'
+                ? 'active bg-[var(--p-button-text-primary-color)]'
                 : 'bg-transparent'
             )
           "
           @click="setBrushShape(BrushShape.Rect)"
-        ></div>
+        />
       </div>
     </div>
 
     <!-- Color -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-descrip-text">
+      <span class="text-descrip-text text-left font-sans text-xs">
         {{ t('maskEditor.colorSelector') }}
       </span>
       <input
         ref="colorInputRef"
         v-model="store.rgbColor"
         type="color"
-        class="h-10 rounded-md cursor-pointer"
-      />
+        class="h-10 cursor-pointer rounded-md"
+      >
     </div>
 
     <!-- Thickness -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.thickness') }}
         </span>
         <input
           v-model.number="brushSize"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="1"
           :max="250"
           :step="1"
-        />
+        >
       </div>
       <SliderControl
         v-model="brushSize"
@@ -84,17 +87,17 @@
     <!-- Opacity -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.opacity') }}
         </span>
         <input
           v-model.number="brushOpacity"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="0"
           :max="1"
           :step="0.01"
-        />
+        >
       </div>
       <SliderControl
         v-model="brushOpacity"
@@ -109,17 +112,17 @@
     <!-- Hardness -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.hardness') }}
         </span>
         <input
           v-model.number="brushHardness"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="0"
           :max="1"
           :step="0.01"
-        />
+        >
       </div>
       <SliderControl
         v-model="brushHardness"
@@ -134,17 +137,17 @@
     <!-- Step Size -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.stepSize') }}
         </span>
         <input
           v-model.number="brushStepSize"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="1"
           :max="100"
           :step="1"
-        />
+        >
       </div>
       <SliderControl
         v-model="brushStepSize"
diff --git a/src/components/maskeditor/ColorSelectSettingsPanel.vue b/src/components/maskeditor/ColorSelectSettingsPanel.vue
index 5a643c3d4..933f1f1b7 100644
--- a/src/components/maskeditor/ColorSelectSettingsPanel.vue
+++ b/src/components/maskeditor/ColorSelectSettingsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
     <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
+      class="mt-2.5 text-center font-sans text-[15px] text-[var(--descrip-text)]"
     >
       {{ t('maskEditor.colorSelectSettings') }}
     </h3>
diff --git a/src/components/maskeditor/ImageLayerSettingsPanel.vue b/src/components/maskeditor/ImageLayerSettingsPanel.vue
index e1c43d92a..237d414a7 100644
--- a/src/components/maskeditor/ImageLayerSettingsPanel.vue
+++ b/src/components/maskeditor/ImageLayerSettingsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
     <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
+      class="mt-2.5 text-center font-sans text-[15px] text-[var(--descrip-text)]"
     >
       {{ t('maskEditor.layers') }}
     </h3>
@@ -15,29 +15,35 @@
       @update:model-value="onMaskOpacityChange"
     />
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       t('maskEditor.maskBlendingOptions')
     }}</span>
 
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] -mt-2 -mb-1.5"
+      class="relative -mt-2 -mb-1.5 flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px]"
     >
       <select
         class="maskEditor_sidePanelDropdown"
         :value="store.maskBlendMode"
         @change="onBlendModeChange"
       >
-        <option value="black">{{ t('maskEditor.black') }}</option>
-        <option value="white">{{ t('maskEditor.white') }}</option>
-        <option value="negative">{{ t('maskEditor.negative') }}</option>
+        <option value="black">
+          {{ t('maskEditor.black') }}
+        </option>
+        <option value="white">
+          {{ t('maskEditor.white') }}
+        </option>
+        <option value="negative">
+          {{ t('maskEditor.negative') }}
+        </option>
       </select>
     </div>
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       t('maskEditor.maskLayer')
     }}</span>
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+      class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
       :style="{
         border: store.activeLayer === 'mask' ? '2px solid #007acc' : 'none'
       }"
@@ -47,9 +53,12 @@
         class="maskEditor_sidePanelLayerCheckbox"
         :checked="maskLayerVisible"
         @change="onMaskLayerVisibilityChange"
-      />
+      >
       <div class="maskEditor_sidePanelLayerPreviewContainer">
-        <svg viewBox="0 0 20 20" style="">
+        <svg
+          viewBox="0 0 20 20"
+          style=""
+        >
           <path
             class="cls-1"
             d="M1.31,5.32v9.36c0,.55.45,1,1,1h15.38c.55,0,1-.45,1-1V5.32c0-.55-.45-1-1-1H2.31c-.55,0-1,.45-1,1ZM11.19,13.44c-2.91.94-5.57-1.72-4.63-4.63.34-1.05,1.19-1.9,2.24-2.24,2.91-.94,5.57,1.72,4.63,4.63-.34,1.05-1.19-1.9-2.24,2.24Z"
@@ -66,11 +75,11 @@
       </button>
     </div>
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       t('maskEditor.paintLayer')
     }}</span>
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+      class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
       :style="{
         border: store.activeLayer === 'rgb' ? '2px solid #007acc' : 'none'
       }"
@@ -80,7 +89,7 @@
         class="maskEditor_sidePanelLayerCheckbox"
         :checked="paintLayerVisible"
         @change="onPaintLayerVisibilityChange"
-      />
+      >
       <div class="maskEditor_sidePanelLayerPreviewContainer">
         <svg viewBox="0 0 20 20">
           <path
@@ -106,24 +115,24 @@
       </button>
     </div>
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       t('maskEditor.baseImageLayer')
     }}</span>
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+      class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
     >
       <input
         type="checkbox"
         class="maskEditor_sidePanelLayerCheckbox"
         :checked="baseImageLayerVisible"
         @change="onBaseImageLayerVisibilityChange"
-      />
+      >
       <div class="maskEditor_sidePanelLayerPreviewContainer">
         <img
           class="maskEditor_sidePanelImageLayerImage"
           :src="baseImageSrc"
           :alt="t('maskEditor.baseLayerPreview')"
-        />
+        >
       </div>
     </div>
   </div>
diff --git a/src/components/maskeditor/MaskEditorContent.vue b/src/components/maskeditor/MaskEditorContent.vue
index 0563dc571..9e6783054 100644
--- a/src/components/maskeditor/MaskEditorContent.vue
+++ b/src/components/maskeditor/MaskEditorContent.vue
@@ -13,29 +13,32 @@
     >
       <canvas
         ref="imgCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-0"
+        class="absolute top-0 left-0 z-0 h-full w-full"
         @contextmenu.prevent
       />
       <canvas
         ref="rgbCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-10"
+        class="absolute top-0 left-0 z-10 h-full w-full"
         @contextmenu.prevent
       />
       <canvas
         ref="maskCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-30"
+        class="absolute top-0 left-0 z-30 h-full w-full"
         @contextmenu.prevent
       />
       <!-- GPU Preview Canvas -->
       <canvas
         ref="gpuCanvasRef"
-        class="absolute top-0 left-0 w-full h-full pointer-events-none"
+        class="pointer-events-none absolute top-0 left-0 h-full w-full"
         :class="{
           'z-20': store.activeLayer === 'rgb',
           'z-40': store.activeLayer === 'mask'
         }"
       />
-      <div ref="canvasBackgroundRef" class="bg-white w-full h-full" />
+      <div
+        ref="canvasBackgroundRef"
+        class="h-full w-full bg-white"
+      />
     </div>
 
     <div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">
@@ -60,7 +63,10 @@
       </div>
     </div>
 
-    <BrushCursor v-if="initialized" :container-ref="containerRef" />
+    <BrushCursor
+      v-if="initialized"
+      :container-ref="containerRef"
+    />
   </div>
 </template>
 
diff --git a/src/components/maskeditor/PaintBucketSettingsPanel.vue b/src/components/maskeditor/PaintBucketSettingsPanel.vue
index c5d674b77..86255fdcd 100644
--- a/src/components/maskeditor/PaintBucketSettingsPanel.vue
+++ b/src/components/maskeditor/PaintBucketSettingsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
     <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
+      class="mt-2.5 text-center font-sans text-[15px] text-[var(--descrip-text)]"
     >
       {{ t('maskEditor.paintBucketSettings') }}
     </h3>
diff --git a/src/components/maskeditor/PointerZone.vue b/src/components/maskeditor/PointerZone.vue
index 082b16ca7..f7f75d5c5 100644
--- a/src/components/maskeditor/PointerZone.vue
+++ b/src/components/maskeditor/PointerZone.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="pointerZoneRef"
-    class="w-[calc(100%-4rem-220px)] h-full"
+    class="h-full w-[calc(100%-4rem-220px)]"
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
diff --git a/src/components/maskeditor/SidePanel.vue b/src/components/maskeditor/SidePanel.vue
index 7d1fea82d..f641f44d8 100644
--- a/src/components/maskeditor/SidePanel.vue
+++ b/src/components/maskeditor/SidePanel.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex flex-col gap-3 pb-3 h-full !items-stretch bg-[var(--comfy-menu-bg)] overflow-y-auto w-55 px-2.5"
+    class="flex h-full w-55 flex-col !items-stretch gap-3 overflow-y-auto bg-[var(--comfy-menu-bg)] px-2.5 pb-3"
   >
-    <div class="w-full min-h-full">
+    <div class="min-h-full w-full">
       <SettingsPanelContainer />
 
-      <div class="w-full h-0.5 bg-[var(--border-color)] mt-6 mb-1.5" />
+      <div class="mt-6 mb-1.5 h-0.5 w-full bg-[var(--border-color)]" />
 
       <ImageLayerSettingsPanel :tool-manager="toolManager" />
     </div>
diff --git a/src/components/maskeditor/ToolPanel.vue b/src/components/maskeditor/ToolPanel.vue
index 89c8001f7..3fafb25b5 100644
--- a/src/components/maskeditor/ToolPanel.vue
+++ b/src/components/maskeditor/ToolPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full z-8888 flex flex-col justify-between bg-comfy-menu-bg">
+  <div class="z-8888 flex h-full flex-col justify-between bg-comfy-menu-bg">
     <div class="flex flex-col">
       <div
         v-for="tool in allTools"
@@ -13,13 +13,13 @@
         <div
           class="flex items-center justify-center"
           v-html="iconsHtml[tool]"
-        ></div>
-        <div class="maskEditor_toolPanelIndicator"></div>
+        />
+        <div class="maskEditor_toolPanelIndicator" />
       </div>
     </div>
 
     <div
-      class="flex flex-col items-center cursor-pointer rounded-md mb-2 transition-colors duration-200 hover:bg-secondary-background-hover"
+      class="mb-2 flex cursor-pointer flex-col items-center rounded-md transition-colors duration-200 hover:bg-secondary-background-hover"
       :title="t('maskEditor.clickToResetZoom')"
       @click="onResetZoom"
     >
diff --git a/src/components/maskeditor/controls/DropdownControl.vue b/src/components/maskeditor/controls/DropdownControl.vue
index ec16ac92b..5401ab4ae 100644
--- a/src/components/maskeditor/controls/DropdownControl.vue
+++ b/src/components/maskeditor/controls/DropdownControl.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+  <div class="relative flex min-h-6 flex-row items-center gap-2.5">
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       label
     }}</span>
     <select
-      class="absolute right-0 h-6 px-1.5 rounded-md border border-border-default transition-colors duration-100 bg-secondary-background focus:outline focus:outline-node-component-border"
+      class="absolute right-0 h-6 rounded-md border border-border-default bg-secondary-background px-1.5 transition-colors duration-100 focus:outline focus:outline-node-component-border"
       :value="modelValue"
       @change="onChange"
     >
diff --git a/src/components/maskeditor/controls/SliderControl.vue b/src/components/maskeditor/controls/SliderControl.vue
index 83969db3b..d6b39dad4 100644
--- a/src/components/maskeditor/controls/SliderControl.vue
+++ b/src/components/maskeditor/controls/SliderControl.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       label
     }}</span>
     <input
@@ -11,7 +11,7 @@
       :step="step"
       :value="modelValue"
       @input="onInput"
-    />
+    >
   </div>
 </template>
 
diff --git a/src/components/maskeditor/controls/ToggleControl.vue b/src/components/maskeditor/controls/ToggleControl.vue
index dd1a98c96..c589fa7fb 100644
--- a/src/components/maskeditor/controls/ToggleControl.vue
+++ b/src/components/maskeditor/controls/ToggleControl.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+  <div class="relative flex min-h-6 flex-row items-center gap-2.5">
+    <span class="text-left font-sans text-xs text-[var(--descrip-text)]">{{
       label
     }}</span>
     <label class="maskEditor_sidePanelToggleContainer">
@@ -9,8 +9,8 @@
         class="maskEditor_sidePanelToggleCheckbox"
         :checked="modelValue"
         @change="onChange"
-      />
-      <div class="maskEditor_sidePanelToggleSwitch"></div>
+      >
+      <div class="maskEditor_sidePanelToggleSwitch" />
     </label>
   </div>
 </template>
diff --git a/src/components/maskeditor/dialog/TopBarHeader.vue b/src/components/maskeditor/dialog/TopBarHeader.vue
index edad78dd7..06d66d9a0 100644
--- a/src/components/maskeditor/dialog/TopBarHeader.vue
+++ b/src/components/maskeditor/dialog/TopBarHeader.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="flex w-full items-center justify-between gap-3">
     <div class="flex items-center gap-3">
-      <h3 class="m-0 text-lg font-semibold">{{ t('maskEditor.title') }}</h3>
+      <h3 class="m-0 text-lg font-semibold">
+        {{ t('maskEditor.title') }}
+      </h3>
 
       <div class="flex items-center gap-4">
         <button
@@ -11,7 +13,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-current"
+            class="pointer-events-none h-6.25 w-6.25 fill-current"
           >
             <path
               d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -26,7 +28,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="pointer-events-none h-6.25 w-6.25 fill-[var(--input-text)]"
           >
             <path
               class="cls-1"
@@ -35,7 +37,7 @@
           </svg>
         </button>
 
-        <div class="h-5 border-l border-border" />
+        <div class="border-border h-5 border-l" />
 
         <button
           :class="iconButtonClass"
@@ -44,7 +46,7 @@
         >
           <svg
             viewBox="-6 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="pointer-events-none h-6.25 w-6.25 fill-[var(--input-text)]"
           >
             <path
               d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
@@ -59,7 +61,7 @@
         >
           <svg
             viewBox="-9 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="pointer-events-none h-6.25 w-6.25 fill-[var(--input-text)]"
           >
             <g transform="scale(-1, 1)">
               <path
@@ -76,7 +78,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="pointer-events-none h-6.25 w-6.25 fill-[var(--input-text)]"
           >
             <path
               d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
@@ -92,7 +94,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="pointer-events-none h-6.25 w-6.25 fill-[var(--input-text)]"
           >
             <path
               d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"
@@ -103,22 +105,35 @@
 
         <div class="h-5 w-px bg-[var(--p-form-field-border-color)]" />
 
-        <button :class="textButtonClass" @click="onInvert">
+        <button
+          :class="textButtonClass"
+          @click="onInvert"
+        >
           {{ t('maskEditor.invert') }}
         </button>
 
-        <button :class="textButtonClass" @click="onClear">
+        <button
+          :class="textButtonClass"
+          @click="onClear"
+        >
           {{ t('maskEditor.clear') }}
         </button>
       </div>
     </div>
 
     <div class="flex gap-3">
-      <Button variant="primary" :disabled="!saveEnabled" @click="handleSave">
+      <Button
+        variant="primary"
+        :disabled="!saveEnabled"
+        @click="handleSave"
+      >
         <i class="pi pi-check" />
         {{ saveButtonText }}
       </Button>
-      <Button variant="secondary" @click="handleCancel">
+      <Button
+        variant="secondary"
+        @click="handleCancel"
+      >
         <i class="pi pi-times" />
         {{ t('g.cancel') }}
       </Button>
diff --git a/src/components/node/NodeHelpContent.vue b/src/components/node/NodeHelpContent.vue
index ad1f75e3d..b351ab7e3 100644
--- a/src/components/node/NodeHelpContent.vue
+++ b/src/components/node/NodeHelpContent.vue
@@ -12,7 +12,10 @@
       v-html="renderedHelpHtml"
     />
     <!-- Fallback: markdown not found or fetch error -->
-    <div v-else class="fallback-content space-y-6 text-sm">
+    <div
+      v-else
+      class="fallback-content space-y-6 text-sm"
+    >
       <p v-if="node.description">
         <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
       </p>
@@ -31,7 +34,10 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="input in inputList" :key="input.name">
+            <tr
+              v-for="input in inputList"
+              :key="input.name"
+            >
               <td>
                 <code>{{ input.name }}</code>
               </td>
@@ -55,7 +61,10 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="output in outputList" :key="output.name">
+            <tr
+              v-for="output in outputList"
+              :key="output.name"
+            >
               <td>
                 <code>{{ output.name }}</code>
               </td>
@@ -103,27 +112,27 @@ const outputList = computed(() =>
 @reference './../../assets/css/style.css';
 
 .node-help-content :deep(:is(img, video)) {
-  @apply max-w-full h-auto block mb-4;
+  @apply mb-4 block h-auto max-w-full;
 }
 
 .markdown-content,
 .fallback-content {
-  @apply text-sm overflow-visible;
+  @apply overflow-visible text-sm;
 }
 
 .markdown-content :deep(h1),
 .fallback-content h1 {
-  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+  @apply mt-8 mb-4 text-[22px] font-bold first:mt-0;
 }
 
 .markdown-content :deep(h2),
 .fallback-content h2 {
-  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+  @apply mt-8 mb-4 text-[18px] font-bold first:mt-0;
 }
 
 .markdown-content :deep(h3),
 .fallback-content h3 {
-  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+  @apply mt-8 mb-4 text-[16px] font-bold first:mt-0;
 }
 
 .markdown-content :deep(h4),
@@ -155,7 +164,7 @@ const outputList = computed(() =>
 .markdown-content :deep(ol),
 .fallback-content ul,
 .fallback-content ol {
-  @apply pl-8 my-2;
+  @apply my-2 pl-8;
 }
 
 .markdown-content :deep(ul ul),
@@ -166,7 +175,7 @@ const outputList = computed(() =>
 .fallback-content ol ol,
 .fallback-content ul ol,
 .fallback-content ol ul {
-  @apply pl-6 my-2;
+  @apply my-2 pl-6;
 }
 
 .markdown-content :deep(li),
@@ -215,7 +224,7 @@ const outputList = computed(() =>
 
 .markdown-content :deep(pre),
 .fallback-content pre {
-  @apply rounded p-4 my-4 overflow-x-auto;
+  @apply my-4 overflow-x-auto rounded p-4;
   background-color: var(--code-block-bg-color);
 
   code {
diff --git a/src/components/queue/QueueOverlayExpanded.vue b/src/components/queue/QueueOverlayExpanded.vue
index 1d2004098..fa8ddfba6 100644
--- a/src/components/queue/QueueOverlayExpanded.vue
+++ b/src/components/queue/QueueOverlayExpanded.vue
@@ -9,7 +9,7 @@
 
     <div class="flex items-center justify-between px-3">
       <Button
-        class="grow gap-1 justify-center"
+        class="grow justify-center gap-1"
         variant="secondary"
         size="sm"
         @click="$emit('showAssets')"
@@ -51,7 +51,7 @@
       @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
     />
 
-    <div class="flex-1 min-h-0 overflow-y-auto">
+    <div class="min-h-0 flex-1 overflow-y-auto">
       <JobGroupsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"
diff --git a/src/components/queue/QueueProgressOverlay.vue b/src/components/queue/QueueProgressOverlay.vue
index d6b3edcd8..33d565e80 100644
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -4,7 +4,7 @@
     :class="['flex', 'justify-end', 'w-full', 'pointer-events-none']"
   >
     <div
-      class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
+      class="pointer-events-auto flex max-h-[60vh] w-[350px] min-w-[310px] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
       :class="containerClass"
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
@@ -15,7 +15,7 @@
         v-model:selected-job-tab="selectedJobTab"
         v-model:selected-workflow-filter="selectedWorkflowFilter"
         v-model:selected-sort-mode="selectedSortMode"
-        class="flex-1 min-h-0"
+        class="min-h-0 flex-1"
         :header-title="headerTitle"
         :show-concurrent-indicator="showConcurrentIndicator"
         :concurrent-workflow-count="concurrentWorkflowCount"
diff --git a/src/components/queue/dialogs/QueueClearHistoryDialog.vue b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
index 0884dcf6f..bf362146c 100644
--- a/src/components/queue/dialogs/QueueClearHistoryDialog.vue
+++ b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
@@ -1,11 +1,11 @@
 <template>
   <section
-    class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
+    class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface font-inter text-text-primary shadow-interface"
   >
     <header
       class="flex items-center justify-between border-b border-interface-stroke px-4 py-4"
     >
-      <p class="m-0 text-[14px] font-normal leading-none">
+      <p class="m-0 text-[14px] leading-none font-normal">
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
       </p>
       <Button
@@ -31,7 +31,11 @@
 
     <footer class="flex items-center justify-end px-4 py-4">
       <div class="flex items-center gap-4 leading-none">
-        <Button variant="muted-textonly" size="lg" @click="onCancel">
+        <Button
+          variant="muted-textonly"
+          size="lg"
+          @click="onCancel"
+        >
           {{ t('g.cancel') }}
         </Button>
         <Button
@@ -39,8 +43,9 @@
           size="lg"
           :disabled="isClearing"
           @click="onConfirm"
-          >{{ t('g.clear') }}</Button
         >
+          {{ t('g.clear') }}
+        </Button>
       </div>
     </footer>
   </section>
diff --git a/src/components/queue/job/QueueJobItem.vue b/src/components/queue/job/QueueJobItem.vue
index b1809dac2..3e99dbc03 100644
--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -50,10 +50,10 @@
       <div
         v-if="
           props.state === 'running' &&
-          hasAnyProgressPercent(
-            props.progressTotalPercent,
-            props.progressCurrentPercent
-          )
+            hasAnyProgressPercent(
+              props.progressTotalPercent,
+              props.progressCurrentPercent
+            )
         "
         :class="progressBarContainerClass"
       >
@@ -72,7 +72,7 @@
       <div class="relative z-1 flex items-center gap-1">
         <div class="relative inline-flex items-center justify-center">
           <div
-            class="absolute left-1/2 top-1/2 size-10 -translate-x-1/2 -translate-y-1/2"
+            class="absolute top-1/2 left-1/2 size-10 -translate-x-1/2 -translate-y-1/2"
             @mouseenter.stop="onIconEnter"
             @mouseleave.stop="onIconLeave"
           />
@@ -83,7 +83,7 @@
               v-if="iconImageUrl"
               :src="iconImageUrl"
               class="h-full w-full object-cover"
-            />
+            >
             <i
               v-else
               :class="cn(iconClass, 'size-4', shouldSpin && 'animate-spin')"
@@ -93,8 +93,13 @@
       </div>
 
       <div class="relative z-1 min-w-0 flex-1">
-        <div class="truncate opacity-90" :title="props.title">
-          <slot name="primary">{{ props.title }}</slot>
+        <div
+          class="truncate opacity-90"
+          :title="props.title"
+        >
+          <slot name="primary">
+            {{ props.title }}
+          </slot>
         </div>
       </div>
 
@@ -143,8 +148,8 @@
             <Button
               v-else-if="
                 props.state !== 'completed' &&
-                props.state !== 'running' &&
-                computedShowClear
+                  props.state !== 'running' &&
+                  computedShowClear
               "
               v-tooltip.top="cancelTooltipConfig"
               variant="destructive"
@@ -159,8 +164,9 @@
               variant="textonly"
               size="sm"
               @click.stop="emit('view')"
-              >{{ t('menuLabels.View') }}</Button
             >
+              {{ t('menuLabels.View') }}
+            </Button>
             <Button
               v-if="props.showMenu !== undefined ? props.showMenu : true"
               v-tooltip.top="moreTooltipConfig"
@@ -177,7 +183,9 @@
             key="secondary"
             class="pr-2"
           >
-            <slot name="secondary">{{ props.rightText }}</slot>
+            <slot name="secondary">
+              {{ props.rightText }}
+            </slot>
           </div>
         </Transition>
         <!-- Running job cancel button - always visible -->
diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index b23346bf4..9b93f38d6 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -194,8 +194,8 @@ function handleTitleCancel() {
   >
     <!-- Panel Header -->
     <section class="pt-1">
-      <div class="flex items-center justify-between pl-4 pr-3">
-        <h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
+      <div class="flex items-center justify-between pr-3 pl-4">
+        <h3 class="my-3.5 line-clamp-2 cursor-default text-sm font-semibold">
           <template v-if="allowTitleEdit">
             <EditableText
               :model-value="panelTitle"
@@ -208,7 +208,7 @@ function handleTitleCancel() {
             />
             <i
               v-if="!isEditing"
-              class="icon-[lucide--pencil] size-4 text-muted-foreground ml-2 content-center relative top-[2px] hover:text-base-foreground cursor-pointer shrink-0"
+              class="relative top-[2px] ml-2 icon-[lucide--pencil] size-4 shrink-0 cursor-pointer content-center text-muted-foreground hover:text-base-foreground"
               @click="isEditing = true"
             />
           </template>
@@ -242,7 +242,7 @@ function handleTitleCancel() {
           </Button>
         </div>
       </div>
-      <nav class="px-4 pb-2 pt-1 overflow-x-auto">
+      <nav class="overflow-x-auto px-4 pt-1 pb-2">
         <TabList
           :model-value="activeTab"
           @update:model-value="
@@ -254,7 +254,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
+            class="px-2 py-1 font-inter text-sm transition-all active:scale-95"
             :value="tab.value"
           >
             {{ tab.label() }}
@@ -284,7 +284,10 @@ function handleTitleCancel() {
           :nodes="selectedNodes"
           :must-show-node-title="selectedGroups.length > 0"
         />
-        <TabInfo v-else-if="activeTab === 'info'" :nodes="selectedNodes" />
+        <TabInfo
+          v-else-if="activeTab === 'info'"
+          :nodes="selectedNodes"
+        />
         <TabSettings
           v-else-if="activeTab === 'settings'"
           :nodes="flattedItems"
diff --git a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
index d3ee425dd..06eaa3c34 100644
--- a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
+++ b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
@@ -25,21 +25,21 @@ const tooltipConfig = computed(() => {
 <template>
   <div class="flex flex-col bg-comfy-menu-bg">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
+      class="sticky top-0 z-10 flex items-center justify-between bg-inherit backdrop-blur-xl"
     >
       <button
         v-tooltip="tooltipConfig"
         type="button"
         :class="
           cn(
-            'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            'group flex min-h-12 w-full items-center justify-between border-0 bg-transparent pr-3 pl-4 text-left ring-0 outline-0',
             !disabled && 'cursor-pointer'
           )
         "
         :disabled="disabled"
         @click="isCollapse = !isCollapse"
       >
-        <span class="text-sm font-semibold line-clamp-2 flex-1">
+        <span class="line-clamp-2 flex-1 text-sm font-semibold">
           <slot name="label">
             {{ label }}
           </slot>
@@ -48,7 +48,7 @@ const tooltipConfig = computed(() => {
         <i
           :class="
             cn(
-              'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
+              'icon-[lucide--chevron-up] size-4 text-muted-foreground transition-all group-hover:text-base-foreground group-focus:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground',
               isCollapse && '-rotate-180',
               disabled && 'opacity-0'
             )
@@ -57,10 +57,16 @@ const tooltipConfig = computed(() => {
       </button>
     </div>
     <TransitionCollapse>
-      <div v-if="isExpanded" class="pb-4">
+      <div
+        v-if="isExpanded"
+        class="pb-4"
+      >
         <slot />
       </div>
-      <slot v-else-if="enableEmptyState && disabled" name="empty">
+      <slot
+        v-else-if="enableEmptyState && disabled"
+        name="empty"
+      >
         <div>
           {{ $t('g.empty') }}
         </div>
diff --git a/src/components/rightSidePanel/parameters/SectionWidgets.vue b/src/components/rightSidePanel/parameters/SectionWidgets.vue
index b1905a5f0..3779741b5 100644
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -131,8 +131,8 @@ defineExpose({
       :tooltip
     >
       <template #label>
-        <div class="flex items-center gap-2 flex-1 min-w-0">
-          <span class="flex-1 flex items-center gap-2 min-w-0">
+        <div class="flex min-w-0 flex-1 items-center gap-2">
+          <span class="flex min-w-0 flex-1 items-center gap-2">
             <span class="truncate">
               <slot name="label">
                 {{ displayLabel }}
@@ -140,7 +140,7 @@ defineExpose({
             </span>
             <span
               v-if="parentGroup"
-              class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
+              class="min-w-11 flex-1 truncate text-right text-xs text-muted-foreground"
               :title="parentGroup.title"
             >
               {{ parentGroup.title }}
@@ -150,7 +150,7 @@ defineExpose({
             v-if="canShowLocateButton"
             variant="textonly"
             size="icon-sm"
-            class="subbutton shrink-0 mr-3 size-8 cursor-pointer text-muted-foreground hover:text-base-foreground"
+            class="subbutton mr-3 size-8 shrink-0 cursor-pointer text-muted-foreground hover:text-base-foreground"
             :title="t('rightSidePanel.locateNode')"
             :aria-label="t('rightSidePanel.locateNode')"
             @click.stop="handleLocateNode"
@@ -160,11 +160,13 @@ defineExpose({
         </div>
       </template>
 
-      <template #empty><slot name="empty" /></template>
+      <template #empty>
+        <slot name="empty" />
+      </template>
 
       <div
         ref="widgetsContainer"
-        class="space-y-2 rounded-lg px-4 pt-1 relative"
+        class="relative space-y-2 rounded-lg px-4 pt-1"
       >
         <TransitionGroup name="list-scale">
           <WidgetItem
diff --git a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
index 51740bb59..12efbaddc 100644
--- a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
+++ b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
@@ -111,7 +111,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+  <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
     <FormSearchInput
       v-model="searchQuery"
       :searcher
@@ -130,7 +130,7 @@ onBeforeUnmount(() => {
     @update:collapse="nextTick(setDraggableState)"
   >
     <template #empty>
-      <div class="text-sm text-muted-foreground px-4 text-center py-10">
+      <div class="px-4 py-10 text-center text-sm text-muted-foreground">
         {{
           isSearching
             ? t('rightSidePanel.noneSearchDesc')
diff --git a/src/components/rightSidePanel/parameters/TabNodes.vue b/src/components/rightSidePanel/parameters/TabNodes.vue
index ab5deb1a9..52aa34bc5 100644
--- a/src/components/rightSidePanel/parameters/TabNodes.vue
+++ b/src/components/rightSidePanel/parameters/TabNodes.vue
@@ -50,17 +50,21 @@ async function searcher(query: string) {
 </script>
 
 <template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+  <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
     <FormSearchInput
       v-model="searchQuery"
       :searcher
       :update-key="widgetsSectionDataList"
     />
   </div>
-  <TransitionGroup tag="div" name="list-scale" class="relative">
+  <TransitionGroup
+    tag="div"
+    name="list-scale"
+    class="relative"
+  >
     <div
       v-if="isSearching && searchedWidgetsSectionDataList.length === 0"
-      class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
+      class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
     >
       {{ $t('rightSidePanel.noneSearchDesc') }}
     </div>
diff --git a/src/components/rightSidePanel/parameters/TabNormalInputs.vue b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
index 30689f1a4..a62279522 100644
--- a/src/components/rightSidePanel/parameters/TabNormalInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
@@ -59,17 +59,21 @@ const label = computed(() => {
 </script>
 
 <template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+  <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
     <FormSearchInput
       v-model="searchQuery"
       :searcher
       :update-key="widgetsSectionDataList"
     />
   </div>
-  <TransitionGroup tag="div" name="list-scale" class="relative">
+  <TransitionGroup
+    tag="div"
+    name="list-scale"
+    class="relative"
+  >
     <div
       v-if="searchedWidgetsSectionDataList.length === 0"
-      class="text-sm text-muted-foreground px-4 py-10 text-center"
+      class="px-4 py-10 text-center text-sm text-muted-foreground"
     >
       {{
         isSearching
diff --git a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
index a6fe94635..60636077e 100644
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -202,7 +202,7 @@ const label = computed(() => {
 </script>
 
 <template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+  <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
     <FormSearchInput
       v-model="searchQuery"
       :searcher
@@ -226,7 +226,7 @@ const label = computed(() => {
     @update:collapse="nextTick(setDraggableState)"
   >
     <template #empty>
-      <div class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15">
+      <div class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground">
         {{ t('rightSidePanel.noneSearchDesc') }}
       </div>
     </template>
diff --git a/src/components/rightSidePanel/parameters/WidgetActions.vue b/src/components/rightSidePanel/parameters/WidgetActions.vue
index ba20eac35..99719d939 100644
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -99,7 +99,7 @@ function handleToggleFavorite() {
 
 const buttonClasses = cn([
   'border-none bg-transparent',
-  'w-full flex items-center gap-2 rounded px-3 py-2 text-sm',
+  'flex w-full items-center gap-2 rounded px-3 py-2 text-sm',
   'cursor-pointer transition-all hover:bg-secondary-background-hover active:scale-95'
 ])
 </script>
@@ -107,7 +107,7 @@ const buttonClasses = cn([
 <template>
   <MoreButton
     is-vertical
-    class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
+    class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
   >
     <template #default="{ close }">
       <button
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index 85069f890..2a0fea590 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -106,9 +106,9 @@ const displayLabel = customRef((track, trigger) => {
   <div
     :class="
       cn(
-        'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
+        'widget-item group col-span-full grid grid-cols-subgrid rounded-lg',
         isDraggable &&
-          'draggable-item !will-change-auto drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
+          'draggable-item drag-handle cursor-grab bg-comfy-menu-bg outline-comfy-menu-bg !will-change-auto [&.is-draggable]:cursor-grabbing [&.is-draggable]:opacity-70 [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0'
       )
     "
   >
@@ -116,7 +116,7 @@ const displayLabel = customRef((track, trigger) => {
     <div
       :class="
         cn(
-          'min-h-8 flex items-center justify-between gap-1 mb-1.5 min-w-0',
+          'mb-1.5 flex min-h-8 min-w-0 items-center justify-between gap-1',
           isDraggable && 'pointer-events-none'
         )
       "
@@ -126,7 +126,7 @@ const displayLabel = customRef((track, trigger) => {
         :model-value="displayLabel"
         :is-editing="isEditing"
         :input-attrs="{ placeholder: widget.name }"
-        class="text-sm leading-8 p-0 m-0 truncate pointer-events-auto cursor-text"
+        class="pointer-events-auto m-0 cursor-text truncate p-0 text-sm leading-8"
         @edit="displayLabel = $event"
         @cancel="isEditing = false"
         @click="isEditing = true"
@@ -134,11 +134,11 @@ const displayLabel = customRef((track, trigger) => {
 
       <span
         v-if="(showNodeName || hasParents) && sourceNodeName"
-        class="text-xs text-muted-foreground flex-1 p-0 my-0 mx-1 truncate text-right min-w-10"
+        class="mx-1 my-0 min-w-10 flex-1 truncate p-0 text-right text-xs text-muted-foreground"
       >
         {{ sourceNodeName }}
       </span>
-      <div class="flex items-center gap-1 shrink-0 pointer-events-auto">
+      <div class="pointer-events-auto flex shrink-0 items-center gap-1">
         <WidgetActions
           v-model:label="displayLabel"
           :widget="widget"
@@ -152,12 +152,12 @@ const displayLabel = customRef((track, trigger) => {
     <div
       v-if="
         !hiddenFavoriteIndicator &&
-        favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
+          favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
       "
-      class="relative z-2 pointer-events-none"
+      class="pointer-events-none relative z-2"
     >
       <i
-        class="absolute -right-1 -top-1 pi pi-star-fill text-xs text-muted-foreground pointer-events-none"
+        class="pi pi-star-fill pointer-events-none absolute -top-1 -right-1 text-xs text-muted-foreground"
       />
     </div>
     <!-- widget content -->
@@ -173,7 +173,7 @@ const displayLabel = customRef((track, trigger) => {
     <div
       :class="
         cn(
-          'pointer-events-none mt-1.5 mx-auto max-w-40 w-1/2 h-1 rounded-lg bg-transparent transition-colors duration-150',
+          'pointer-events-none mx-auto mt-1.5 h-1 w-1/2 max-w-40 rounded-lg bg-transparent transition-colors duration-150',
           'group-hover:bg-interface-stroke group-[.is-draggable]:bg-component-node-widget-background-highlighted',
           !isDraggable && 'opacity-0'
         )
diff --git a/src/components/rightSidePanel/settings/LayoutField.vue b/src/components/rightSidePanel/settings/LayoutField.vue
index 7596b00ed..9d92818e4 100644
--- a/src/components/rightSidePanel/settings/LayoutField.vue
+++ b/src/components/rightSidePanel/settings/LayoutField.vue
@@ -18,14 +18,14 @@ defineProps<{
       v-tooltip.left="
         tooltip
           ? {
-              value: tooltip,
-              showDelay: 300
-            }
+            value: tooltip,
+            showDelay: 300
+          }
           : null
       "
       :class="
         cn(
-          'text-sm text-muted-foreground truncate',
+          'truncate text-sm text-muted-foreground',
           tooltip ? 'cursor-help' : '',
           singleline ? 'flex-1' : ''
         )
diff --git a/src/components/rightSidePanel/settings/SetNodeColor.vue b/src/components/rightSidePanel/settings/SetNodeColor.vue
index d6635be9e..63a7e3d55 100644
--- a/src/components/rightSidePanel/settings/SetNodeColor.vue
+++ b/src/components/rightSidePanel/settings/SetNodeColor.vue
@@ -107,14 +107,14 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
 <template>
   <LayoutField :label="t('rightSidePanel.color')">
     <div
-      class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
+      class="grid grid-cols-5 justify-items-center gap-1 rounded-lg border-none bg-secondary-background p-1"
     >
       <button
         v-for="option of colorOptions"
         :key="option.name"
         :class="
           cn(
-            'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
+            'flex size-8 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent text-left ring-0 outline-0',
             option.name === nodeColor
               ? 'bg-interface-menu-component-surface-selected'
               : 'hover:bg-interface-menu-component-surface-selected'
diff --git a/src/components/rightSidePanel/settings/TabGlobalSettings.vue b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
index d283c2e41..336475ec2 100644
--- a/src/components/rightSidePanel/settings/TabGlobalSettings.vue
+++ b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
@@ -125,7 +125,7 @@ function openFullSettings() {
         <LayoutField :label="t('rightSidePanel.globalSettings.gridSpacing')">
           <div
             :class="
-              cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')
+              cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')
             "
           >
             <Slider
@@ -189,7 +189,7 @@ function openFullSettings() {
 
     <!-- View all settings button -->
     <div
-      class="flex items-center justify-center p-4 border-b border-interface-stroke"
+      class="flex items-center justify-center border-b border-interface-stroke p-4"
     >
       <Button
         variant="muted-textonly"
diff --git a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
index 10c05ec16..9d4d7e461 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -239,8 +239,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
-    <div class="px-4 pb-4 pt-1 flex gap-2 border-b border-interface-stroke">
+  <div
+    v-if="activeNode"
+    class="subgraph-edit-section flex h-full flex-col"
+  >
+    <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
       <FormSearchInput v-model="searchQuery" />
     </div>
 
@@ -248,10 +251,10 @@ onBeforeUnmount(() => {
       <div
         v-if="
           searchQuery &&
-          filteredActive.length === 0 &&
-          filteredCandidates.length === 0
+            filteredActive.length === 0 &&
+            filteredCandidates.length === 0
         "
-        class="text-sm text-muted-foreground px-4 py-10 text-center"
+        class="px-4 py-10 text-center text-sm text-muted-foreground"
       >
         {{ $t('rightSidePanel.noneSearchDesc') }}
       </div>
@@ -261,19 +264,21 @@ onBeforeUnmount(() => {
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
-          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
+          class="sticky top-0 z-10 flex min-h-12 items-center justify-between px-4 backdrop-blur-xl"
         >
-          <div class="text-sm font-semibold uppercase line-clamp-1">
+          <div class="line-clamp-1 text-sm font-semibold uppercase">
             {{ $t('subgraphStore.shown') }}
           </div>
           <a
-            class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
+            class="cursor-pointer text-right text-xs font-normal whitespace-nowrap text-text-secondary hover:text-azure-600"
             @click.stop="hideAll"
           >
-            {{ $t('subgraphStore.hideAll') }}</a
-          >
+            {{ $t('subgraphStore.hideAll') }}</a>
         </div>
-        <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"
+        >
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredActive"
             :key="toKey([node, widget])"
@@ -293,19 +298,18 @@ onBeforeUnmount(() => {
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
-          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
+          class="sticky top-0 z-10 flex min-h-12 items-center justify-between px-4 backdrop-blur-xl"
         >
-          <div class="text-sm font-semibold uppercase line-clamp-1">
+          <div class="line-clamp-1 text-sm font-semibold uppercase">
             {{ $t('subgraphStore.hidden') }}
           </div>
           <a
-            class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
+            class="cursor-pointer text-right text-xs font-normal whitespace-nowrap text-text-secondary hover:text-azure-600"
             @click.stop="showAll"
           >
-            {{ $t('subgraphStore.showAll') }}</a
-          >
+            {{ $t('subgraphStore.showAll') }}</a>
         </div>
-        <div class="pb-2 px-2 space-y-0.5 mt-0.5">
+        <div class="mt-0.5 space-y-0.5 px-2 pb-2">
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredCandidates"
             :key="toKey([node, widget])"
diff --git a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
index 9c4b72d6a..df257e754 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -27,19 +27,21 @@ function getIcon() {
   <div
     :class="
       cn(
-        'flex py-1 px-2 break-all rounded items-center gap-1',
+        'flex items-center gap-1 rounded px-2 py-1 break-all',
         'bg-node-component-surface',
         props.isDraggable &&
-          'draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing hover:ring-1 ring-accent-background',
+          'draggable-item drag-handle cursor-grab ring-accent-background hover:ring-1 [&.is-draggable]:cursor-grabbing',
         props.class
       )
     "
   >
     <div class="pointer-events-none flex-1">
-      <div class="text-xs text-text-secondary line-clamp-1">
+      <div class="line-clamp-1 text-xs text-text-secondary">
         {{ nodeTitle }}
       </div>
-      <div class="text-sm line-clamp-1 leading-8">{{ widgetName }}</div>
+      <div class="line-clamp-1 text-sm leading-8">
+        {{ widgetName }}
+      </div>
     </div>
     <Button
       variant="muted-textonly"
@@ -51,7 +53,7 @@ function getIcon() {
     </Button>
     <div
       v-if="isDraggable"
-      class="size-4 pointer-events-none icon-[lucide--grip-vertical]"
+      class="pointer-events-none icon-[lucide--grip-vertical] size-4"
     />
   </div>
 </template>
diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 0f5424826..86d5b66a7 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -17,7 +17,12 @@
     />
   </div>
   <div class="_footer">
-    <Button type="button" @click="submit">{{ $t('g.add') }}</Button>
+    <Button
+      type="button"
+      @click="submit"
+    >
+      {{ $t('g.add') }}
+    </Button>
   </div>
 </template>
 
@@ -76,6 +81,6 @@ const submit = () => {
 }
 
 ._footer {
-  @apply flex flex-col pt-4 items-end;
+  @apply flex flex-col items-end pt-4;
 }
 </style>
diff --git a/src/components/sidebar/ModeToggle.vue b/src/components/sidebar/ModeToggle.vue
index ca94be771..eec262a29 100644
--- a/src/components/sidebar/ModeToggle.vue
+++ b/src/components/sidebar/ModeToggle.vue
@@ -7,7 +7,7 @@ import { useCommandStore } from '@/stores/commandStore'
 const canvasStore = useCanvasStore()
 </script>
 <template>
-  <div class="p-1 bg-secondary-background rounded-lg w-10">
+  <div class="w-10 rounded-lg bg-secondary-background p-1">
     <Button
       size="icon"
       :title="t('linearMode.linearMode')"
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 44dff5fc2..881e22f02 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -14,10 +14,13 @@
       :class="
         isOverflowing
           ? 'side-tool-bar-container overflow-y-auto'
-          : 'flex flex-col h-full'
+          : 'flex h-full flex-col'
       "
     >
-      <div ref="topToolbarRef" :class="groupClasses">
+      <div
+        ref="topToolbarRef"
+        :class="groupClasses"
+      >
         <ComfyMenuButton />
         <SidebarIcon
           v-for="tab in tabs"
@@ -35,12 +38,19 @@
         <SidebarTemplatesButton />
       </div>
 
-      <div ref="bottomToolbarRef" class="mt-auto" :class="groupClasses">
+      <div
+        ref="bottomToolbarRef"
+        class="mt-auto"
+        :class="groupClasses"
+      >
         <SidebarLogoutIcon
           v-if="userStore.isMultiUserServer"
           :is-small="isSmall"
         />
-        <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
+        <SidebarHelpCenterIcon
+          v-if="!isIntegratedTabBar"
+          :is-small="isSmall"
+        />
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
@@ -158,8 +168,8 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0',
-    !isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
+    'sidebar-item-group flex flex-shrink-0 flex-col items-center overflow-hidden',
+    !isConnected.value && 'pointer-events-auto rounded-lg shadow-interface'
   )
 )
 
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 88900c1a7..742e33fc5 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -17,12 +17,19 @@
   >
     <div class="side-bar-button-content">
       <slot name="icon">
-        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+        <OverlayBadge
+          v-if="shouldShowBadge"
+          :value="overlayValue"
+        >
           <i
             v-if="typeof icon === 'string'"
             :class="icon + ' side-bar-button-icon'"
           />
-          <component :is="icon" v-else class="side-bar-button-icon" />
+          <component
+            :is="icon"
+            v-else
+            class="side-bar-button-icon"
+          />
         </OverlayBadge>
         <i
           v-else-if="typeof icon === 'string'"
@@ -34,7 +41,10 @@
           class="side-bar-button-icon"
         />
       </slot>
-      <span v-if="label && !isSmall" class="side-bar-button-label">{{
+      <span
+        v-if="label && !isSmall"
+        class="side-bar-button-label"
+      >{{
         t(label)
       }}</span>
     </div>
@@ -117,7 +127,7 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 }
 
 .side-bar-button-label {
-  @apply text-[10px] text-center;
+  @apply text-center text-[10px];
   line-height: 1;
 }
 
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index dd7982fc9..c58cacd19 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -25,7 +25,10 @@
         @mouseleave="onJobLeave(job.id)"
         @click.stop
       >
-        <template v-if="hoveredJobId === job.id" #actions>
+        <template
+          v-if="hoveredJobId === job.id"
+          #actions
+        >
           <Button
             v-if="canCancelJob"
             :variant="cancelAction.variant"
@@ -33,7 +36,10 @@
             :aria-label="cancelAction.label"
             @click.stop="runCancelJob()"
           >
-            <i :class="cancelAction.icon" class="size-4" />
+            <i
+              :class="cancelAction.icon"
+              class="size-4"
+            />
           </Button>
         </template>
       </AssetsListItem>
@@ -44,7 +50,7 @@
       :class="cn('px-2', activeJobItems.length && 'mt-2')"
     >
       <div
-        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+        class="flex items-center py-2 font-inter text-sm leading-normal font-normal text-muted-foreground"
       >
         {{ t('sideToolbar.generatedAssetsHeader') }}
       </div>
@@ -79,7 +85,10 @@
           @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
           @click.stop="emit('select-asset', item.asset)"
         >
-          <template v-if="hoveredAssetId === item.asset.id" #actions>
+          <template
+            v-if="hoveredAssetId === item.asset.id"
+            #actions
+          >
             <Button
               variant="secondary"
               size="icon"
@@ -194,7 +203,7 @@ function getAssetCardClass(selected: boolean): string {
     'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
     'cursor-pointer',
     selected &&
-      'bg-secondary-background-hover ring-1 ring-inset ring-modal-card-border-highlighted'
+      'bg-secondary-background-hover ring-1 ring-modal-card-border-highlighted ring-inset'
   )
 }
 
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 341d41019..5444b2a6f 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -15,7 +15,7 @@
             role="button"
             @click="copyJobId"
           >
-            <i class="icon-[lucide--copy] text-sm"></i>
+            <i class="icon-[lucide--copy] text-sm" />
           </button>
         </div>
         <div>
@@ -25,19 +25,39 @@
     </template>
     <template #tool-buttons>
       <!-- Normal Tab View -->
-      <TabList v-if="!isInFolderView" v-model="activeTab">
-        <Tab class="font-inter" value="output">{{
-          $t('sideToolbar.labels.generated')
-        }}</Tab>
-        <Tab class="font-inter" value="input">{{
-          $t('sideToolbar.labels.imported')
-        }}</Tab>
+      <TabList
+        v-if="!isInFolderView"
+        v-model="activeTab"
+      >
+        <Tab
+          class="font-inter"
+          value="output"
+        >
+          {{
+            $t('sideToolbar.labels.generated')
+          }}
+        </Tab>
+        <Tab
+          class="font-inter"
+          value="input"
+        >
+          {{
+            $t('sideToolbar.labels.imported')
+          }}
+        </Tab>
       </TabList>
     </template>
     <template #header>
       <!-- Job Detail View Header -->
-      <div v-if="isInFolderView" class="px-2 2xl:px-4">
-        <Button variant="secondary" size="lg" @click="exitFolderView">
+      <div
+        v-if="isInFolderView"
+        class="px-2 2xl:px-4"
+      >
+        <Button
+          variant="secondary"
+          size="lg"
+          @click="exitFolderView"
+        >
           <i class="icon-[lucide--arrow-left] size-4" />
           <span>{{ $t('sideToolbar.backToAssets') }}</span>
         </Button>
@@ -49,7 +69,7 @@
         v-model:sort-by="sortBy"
         v-model:view-mode="viewMode"
         v-model:media-type-filters="mediaTypeFilters"
-        class="pb-1 px-2 2xl:px-4"
+        class="px-2 pb-1 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
       <div
@@ -76,7 +96,11 @@
           </Button>
         </div>
       </div>
-      <Divider v-else type="dashed" class="my-2" />
+      <Divider
+        v-else
+        type="dashed"
+        class="my-2"
+      />
     </template>
     <template #body>
       <div v-if="showLoadingState">
@@ -95,7 +119,11 @@
           :message="$t('sideToolbar.noFilesFoundMessage')"
         />
       </div>
-      <div v-else class="relative size-full" @click="handleEmptySpaceClick">
+      <div
+        v-else
+        class="relative size-full"
+        @click="handleEmptySpaceClick"
+      >
         <AssetsSidebarListView
           v-if="isListView"
           :assets="displayAssets"
@@ -134,10 +162,13 @@
       <div
         v-if="hasSelection"
         ref="footerRef"
-        class="flex gap-1 h-18 w-full items-center justify-between"
+        class="flex h-18 w-full items-center justify-between gap-1"
       >
         <div class="flex-1 pl-4">
-          <div ref="selectionCountButtonRef" class="inline-flex w-48">
+          <div
+            ref="selectionCountButtonRef"
+            class="inline-flex w-48"
+          >
             <Button
               variant="secondary"
               :class="cn(isCompact && 'text-left')"
@@ -147,13 +178,13 @@
                 isHoveringSelectionCount
                   ? $t('mediaAsset.selection.deselectAll')
                   : $t('mediaAsset.selection.selectedCount', {
-                      count: totalOutputCount
-                    })
+                    count: totalOutputCount
+                  })
               }}
             </Button>
           </div>
         </div>
-        <div class="flex shrink gap-2 pr-4 items-center-safe justify-end-safe">
+        <div class="flex shrink items-center-safe justify-end-safe gap-2 pr-4">
           <template v-if="isCompact">
             <!-- Compact mode: Icon only -->
             <Button
@@ -163,7 +194,10 @@
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button size="icon" @click="handleDownloadSelected">
+            <Button
+              size="icon"
+              @click="handleDownloadSelected"
+            >
               <i class="icon-[lucide--download] size-4" />
             </Button>
           </template>
@@ -177,7 +211,10 @@
               <span>{{ $t('mediaAsset.selection.deleteSelected') }}</span>
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button variant="secondary" @click="handleDownloadSelected">
+            <Button
+              variant="secondary"
+              @click="handleDownloadSelected"
+            >
               <span>{{ $t('mediaAsset.selection.downloadSelected') }}</span>
               <i class="icon-[lucide--download] size-4" />
             </Button>
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index aa9945653..df8c8f1ec 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -5,17 +5,20 @@
   >
     <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
-        class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+        class="min-h-16 rounded-none border-x-0 border-t-0 bg-transparent px-2 2xl:px-4"
       >
         <template #start>
-          <span class="truncate font-bold" :title="props.title">
+          <span
+            class="truncate font-bold"
+            :title="props.title"
+          >
             {{ props.title }}
           </span>
           <slot name="alt-title" />
         </template>
         <template #end>
           <div
-            class="touch:w-auto touch:opacity-100 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
+            class="flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100 touch:w-auto touch:opacity-100"
           >
             <slot name="tool-buttons" />
           </div>
diff --git a/src/components/tab/Tab.vue b/src/components/tab/Tab.vue
index 5176ef24e..22cf06930 100644
--- a/src/components/tab/Tab.vue
+++ b/src/components/tab/Tab.vue
@@ -32,12 +32,12 @@ const isActive = computed(() => currentValue?.value === value)
 const tabClasses = computed(() => {
   return cn(
     // Base styles from TextButton
-    'flex items-center justify-center shrink-0',
-    'px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200',
-    'outline-hidden border-none',
+    'flex shrink-0 items-center justify-center',
+    'cursor-pointer rounded-lg px-2.5 py-2 text-sm transition-all duration-200',
+    'border-none outline-hidden',
     // State styles with semantic tokens
     isActive.value
-      ? 'bg-interface-menu-component-surface-hovered text-text-primary text-bold'
+      ? 'text-bold bg-interface-menu-component-surface-hovered text-text-primary'
       : 'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
   )
 })
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 151dfd405..9565d3316 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -11,14 +11,20 @@
       <div
         :class="
           cn(
-            'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full aspect-square'
+            'flex items-center justify-center gap-1 rounded-full hover:bg-interface-button-hover-surface',
+            compact && 'aspect-square size-full'
           )
         "
       >
-        <UserAvatar :photo-url="photoURL" :class="compact && 'size-full'" />
+        <UserAvatar
+          :photo-url="photoURL"
+          :class="compact && 'size-full'"
+        />
 
-        <i v-if="showArrow" class="icon-[lucide--chevron-down] size-3 px-1" />
+        <i
+          v-if="showArrow"
+          class="icon-[lucide--chevron-down] size-3 px-1"
+        />
       </div>
     </Button>
 
diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue
index 69961628d..76fe1c928 100644
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/src/components/topbar/CurrentUserPopover.vue
@@ -1,10 +1,10 @@
 <!-- A popover that shows current user information and actions -->
 <template>
   <div
-    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+    class="current-user-popover -m-3 w-80 rounded-lg border border-border-default bg-base-background p-2 shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- User Info Section -->
-    <div class="flex flex-col items-center px-0 py-3 mb-4">
+    <div class="mb-4 flex flex-col items-center px-0 py-3">
       <UserAvatar
         class="mb-1"
         :photo-url="userPhotoUrl"
@@ -18,32 +18,41 @@
       <h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
         {{ userDisplayName || $t('g.user') }}
       </h3>
-      <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
+      <p
+        v-if="userEmail"
+        class="my-0 truncate text-sm text-muted"
+      >
         {{ userEmail }}
       </p>
       <span
         v-if="subscriptionTierName"
-        class="my-0 text-xs text-foreground bg-secondary-background-hover rounded-full uppercase px-2 py-0.5 font-bold mt-2"
+        class="text-foreground my-0 mt-2 rounded-full bg-secondary-background-hover px-2 py-0.5 text-xs font-bold uppercase"
       >
         {{ subscriptionTierName }}
       </span>
     </div>
 
     <!-- Credits Section -->
-    <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--component] text-amber-400 text-sm" />
+    <div
+      v-if="isActiveSubscription"
+      class="flex items-center gap-2 px-4 py-2"
+    >
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
       <Skeleton
         v-if="authStore.isFetchingBalance"
         width="4rem"
         height="1.25rem"
         class="w-full"
       />
-      <span v-else class="text-base font-semibold text-base-foreground">{{
+      <span
+        v-else
+        class="text-base font-semibold text-base-foreground"
+      >{{
         formattedBalance
       }}</span>
       <i
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
+        class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
       />
       <Button
         variant="secondary"
@@ -56,7 +65,10 @@
       </Button>
     </div>
 
-    <div v-else class="flex justify-center px-4">
+    <div
+      v-else
+      class="flex justify-center px-4"
+    >
       <SubscribeButton
         :fluid="false"
         :label="$t('subscription.subscribeToComfyCloud')"
@@ -66,32 +78,32 @@
       />
     </div>
 
-    <Divider class="my-2 mx-0" />
+    <Divider class="mx-0 my-2" />
 
     <div
       v-if="isActiveSubscription"
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="partner-nodes-menu-item"
       @click="handleOpenPartnerNodesInfo"
     >
-      <i class="icon-[lucide--tag] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--tag] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.partnerNodesCredits')
       }}</span>
     </div>
 
     <div
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="plans-pricing-menu-item"
       @click="handleOpenPlansAndPricing"
     >
-      <i class="icon-[lucide--receipt-text] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--receipt-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.plansAndPricing')
       }}</span>
       <span
         v-if="canUpgrade"
-        class="text-xs font-bold text-base-background bg-base-foreground px-1.5 py-0.5 rounded-full"
+        class="rounded-full bg-base-foreground px-1.5 py-0.5 text-xs font-bold text-base-background"
       >
         {{ $t('subscription.upgrade') }}
       </span>
@@ -99,36 +111,36 @@
 
     <div
       v-if="isActiveSubscription"
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="manage-plan-menu-item"
       @click="handleOpenPlanAndCreditsSettings"
     >
-      <i class="icon-[lucide--file-text] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--file-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.managePlan')
       }}</span>
     </div>
 
     <div
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="user-settings-menu-item"
       @click="handleOpenUserSettings"
     >
-      <i class="icon-[lucide--settings-2] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--settings-2] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('userSettings.accountSettings')
       }}</span>
     </div>
 
-    <Divider class="my-2 mx-0" />
+    <Divider class="mx-0 my-2" />
 
     <div
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="logout-menu-item"
       @click="handleLogout"
     >
-      <i class="icon-[lucide--log-out] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--log-out] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('auth.signOut.signOut')
       }}</span>
     </div>
diff --git a/src/components/topbar/LoginButton.vue b/src/components/topbar/LoginButton.vue
index 060e1f809..cd93fb10d 100644
--- a/src/components/topbar/LoginButton.vue
+++ b/src/components/topbar/LoginButton.vue
@@ -3,7 +3,7 @@
     v-if="!isLoggedIn"
     variant="textonly"
     size="icon"
-    :class="cn('group rounded-full text-base-foreground p-0', className)"
+    :class="cn('group rounded-full p-0 text-base-foreground', className)"
     :aria-label="t('g.login')"
     @click="handleSignIn()"
     @mouseenter="showPopover"
@@ -22,13 +22,14 @@
     @mouseover="cancelHidePopover"
   >
     <div>
-      <div class="mb-1">{{ t('auth.loginButton.tooltipHelp') }}</div>
+      <div class="mb-1">
+        {{ t('auth.loginButton.tooltipHelp') }}
+      </div>
       <a
         :href="apiNodesOverviewUrl"
         target="_blank"
         class="text-neutral-500 hover:text-primary"
-        >{{ t('auth.loginButton.tooltipLearnMore') }}</a
-      >
+      >{{ t('auth.loginButton.tooltipLearnMore') }}</a>
     </div>
   </Popover>
 </template>
diff --git a/src/components/topbar/TopMenuHelpButton.vue b/src/components/topbar/TopMenuHelpButton.vue
index b7f1fe5a8..7ae598adb 100644
--- a/src/components/topbar/TopMenuHelpButton.vue
+++ b/src/components/topbar/TopMenuHelpButton.vue
@@ -4,8 +4,10 @@
     variant="textonly"
     @click="toggleHelpCenter"
   >
-    <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
-    <i class="icon-[lucide--circle-help] ml-0.5" />
+    <div class="not-md:hidden">
+      {{ $t('menu.helpAndFeedback') }}
+    </div>
+    <i class="ml-0.5 icon-[lucide--circle-help]" />
     <span
       v-if="shouldShowRedDot"
       class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
index 34fd6454d..47edbb4bd 100644
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -18,7 +18,11 @@
     >
       {{ badge.label }}
     </div>
-    <div v-else class="size-2 shrink-0 rounded-full" :class="dotClasses" />
+    <div
+      v-else
+      class="size-2 shrink-0 rounded-full"
+      :class="dotClasses"
+    />
     <Popover
       ref="popover"
       append-to="body"
@@ -37,8 +41,13 @@
         >
           {{ badge.label }}
         </div>
-        <div class="text-sm font-inter">{{ badge.text }}</div>
-        <div v-if="badge.tooltip" class="text-xs">
+        <div class="font-inter text-sm">
+          {{ badge.text }}
+        </div>
+        <div
+          v-if="badge.tooltip"
+          class="text-xs"
+        >
           {{ badge.tooltip }}
         </div>
       </div>
@@ -90,8 +99,13 @@
         >
           {{ badge.label }}
         </div>
-        <div class="text-sm font-inter">{{ badge.text }}</div>
-        <div v-if="badge.tooltip" class="text-xs">
+        <div class="font-inter text-sm">
+          {{ badge.text }}
+        </div>
+        <div
+          v-if="badge.tooltip"
+          class="text-xs"
+        >
           {{ badge.tooltip }}
         </div>
       </div>
@@ -117,7 +131,10 @@
     >
       {{ badge.label }}
     </div>
-    <div class="font-inter text-sm" :class="textClasses">
+    <div
+      class="font-inter text-sm"
+      :class="textClasses"
+    >
       {{ badge.text }}
     </div>
   </div>
diff --git a/src/components/topbar/WorkflowOverflowMenu.vue b/src/components/topbar/WorkflowOverflowMenu.vue
index f22ebfe13..aa2817719 100644
--- a/src/components/topbar/WorkflowOverflowMenu.vue
+++ b/src/components/topbar/WorkflowOverflowMenu.vue
@@ -2,7 +2,7 @@
   <div>
     <Button
       v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
-      class="rounded-none h-full w-auto aspect-square"
+      class="aspect-square h-full w-auto rounded-none"
       variant="muted-textonly"
       size="icon"
       :aria-label="$t('g.moreWorkflows')"
diff --git a/src/components/topbar/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index 27b113e73..aed6573fe 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -2,7 +2,7 @@
   <div
     ref="positionRef"
     class="absolute bottom-0 left-1/2 -translate-x-1/2"
-  ></div>
+  />
   <Popover
     ref="popoverRef"
     append-to="body"
@@ -24,7 +24,7 @@
           :src="thumbnailUrl"
           class="block h-[200px] rounded-lg object-cover p-2"
           :style="{ width: `${POPOVER_WIDTH}px` }"
-        />
+        >
       </div>
       <div class="workflow-preview-footer">
         <span class="workflow-preview-name">{{ workflowFilename }}</span>
@@ -143,7 +143,7 @@ defineExpose({
 @reference '../../assets/css/style.css';
 
 .workflow-preview-content {
-  @apply flex flex-col rounded-xl overflow-hidden;
+  @apply flex flex-col overflow-hidden rounded-xl;
   max-width: var(--popover-width);
   background-color: var(--comfy-menu-bg);
   color: var(--fg-color);
@@ -163,11 +163,11 @@ defineExpose({
 }
 
 .workflow-preview-footer {
-  @apply pt-1 pb-2 px-3;
+  @apply px-3 pt-1 pb-2;
 }
 
 .workflow-preview-name {
-  @apply block text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap;
+  @apply block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap;
   color: var(--fg-color);
 }
 </style>
@@ -178,7 +178,7 @@ defineExpose({
 .workflow-popover-fade {
   --p-popover-background: transparent;
   --p-popover-content-padding: 0;
-  @apply bg-transparent rounded-xl shadow-lg;
+  @apply rounded-xl bg-transparent shadow-lg;
   transition: opacity 0.15s ease-out !important;
 }
 
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 27a1817ca..cbbf6dbe2 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -8,7 +8,7 @@
       v-if="showOverflowArrows"
       variant="muted-textonly"
       size="icon"
-      class="overflow-arrow overflow-arrow-left h-full w-auto aspect-square"
+      class="overflow-arrow overflow-arrow-left aspect-square h-full w-auto"
       :aria-label="$t('g.scrollLeft')"
       :disabled="!leftArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(-1))"
@@ -45,7 +45,7 @@
       v-if="showOverflowArrows"
       variant="muted-textonly"
       size="icon"
-      class="overflow-arrow overflow-arrow-right h-full w-auto aspect-square"
+      class="overflow-arrow overflow-arrow-right aspect-square h-full w-auto"
       :aria-label="$t('g.scrollRight')"
       :disabled="!rightArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(1))"
@@ -59,7 +59,7 @@
     />
     <Button
       v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
-      class="new-blank-workflow-button no-drag shrink-0 rounded-none h-full w-auto aspect-square"
+      class="new-blank-workflow-button no-drag aspect-square h-full w-auto shrink-0 rounded-none"
       variant="muted-textonly"
       size="icon"
       :aria-label="$t('sideToolbar.newBlankWorkflow')"
@@ -78,15 +78,30 @@
         compact
         class="shrink-0 p-1"
       />
-      <LoginButton v-else-if="isDesktop" class="p-1" />
+      <LoginButton
+        v-else-if="isDesktop"
+        class="p-1"
+      />
     </div>
-    <ContextMenu ref="menu" :model="contextMenuItems">
+    <ContextMenu
+      ref="menu"
+      :model="contextMenuItems"
+    >
       <template #itemicon="{ item }">
-        <OverlayIcon v-if="item.overlayIcon" v-bind="item.overlayIcon" />
-        <i v-else-if="item.icon" :class="item.icon" />
+        <OverlayIcon
+          v-if="item.overlayIcon"
+          v-bind="item.overlayIcon"
+        />
+        <i
+          v-else-if="item.icon"
+          :class="item.icon"
+        />
       </template>
     </ContextMenu>
-    <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
+    <div
+      v-if="isDesktop"
+      class="window-actions-spacer app-drag shrink-0"
+    />
   </div>
 </template>
 
@@ -383,13 +398,13 @@ onUpdated(() => {
 }
 
 :deep(.p-togglebutton) {
-  @apply p-0 bg-transparent rounded-none shrink relative border-0 border-r border-solid;
+  @apply relative shrink rounded-none border-0 border-r border-solid bg-transparent p-0;
   border-right-color: var(--border-color);
   min-width: 90px;
 }
 
 .overflow-arrow {
-  @apply px-2 rounded-none;
+  @apply rounded-none px-2;
 }
 
 .overflow-arrow[disabled] {
@@ -418,7 +433,7 @@ onUpdated(() => {
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {
-  @apply border-b border-solid h-full;
+  @apply h-full border-b border-solid;
   border-bottom-color: var(--p-button-text-primary-color);
 }
 
@@ -446,7 +461,7 @@ onUpdated(() => {
 }
 
 :deep(.p-selectbutton) {
-  @apply rounded-none h-full;
+  @apply h-full rounded-none;
 }
 
 .workflow-tabs-container-desktop {
diff --git a/src/components/ui/Popover.vue b/src/components/ui/Popover.vue
index 4bdd6dec2..97200cd31 100644
--- a/src/components/ui/Popover.vue
+++ b/src/components/ui/Popover.vue
@@ -36,21 +36,21 @@ defineProps<{
         :side-offset="5"
         :collision-padding="10"
         v-bind="$attrs"
-        class="rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[transform,opacity]"
       >
         <slot>
           <div class="flex flex-col p-1">
             <section
               v-for="(entryGroup, index) in entries ?? []"
               :key="index"
-              class="flex flex-col border-b-2 last:border-none border-border-subtle"
+              class="flex flex-col border-b-2 border-border-subtle last:border-none"
             >
               <div
                 v-for="{ label, action, icon } in entryGroup"
                 :key="label"
                 :class="
                   cn(
-                    'flex flex-row gap-4 p-2 rounded-sm my-1',
+                    'my-1 flex flex-row gap-4 rounded-sm p-2',
                     action &&
                       'cursor-pointer hover:bg-secondary-background-hover'
                   )
@@ -63,7 +63,10 @@ defineProps<{
                   }
                 "
               >
-                <i v-if="icon" :class="icon" />
+                <i
+                  v-if="icon"
+                  :class="icon"
+                />
                 {{ label }}
               </div>
             </section>
diff --git a/src/components/ui/TypeformPopoverButton.vue b/src/components/ui/TypeformPopoverButton.vue
index e6808e8bc..d2fb0b7c8 100644
--- a/src/components/ui/TypeformPopoverButton.vue
+++ b/src/components/ui/TypeformPopoverButton.vue
@@ -20,10 +20,17 @@ whenever(feedbackRef, () => {
 <template>
   <Popover>
     <template #button>
-      <Button variant="inverted" class="rounded-full size-12">
+      <Button
+        variant="inverted"
+        class="size-12 rounded-full"
+      >
         <i class="icon-[lucide--circle-question-mark] size-6" />
       </Button>
     </template>
-    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
+    <div
+      ref="feedbackRef"
+      data-tf-auto-resize
+      :data-tf-widget
+    />
   </Popover>
 </template>
diff --git a/src/components/ui/ZoomPane.vue b/src/components/ui/ZoomPane.vue
index 2cbb286ad..37962914e 100644
--- a/src/components/ui/ZoomPane.vue
+++ b/src/components/ui/ZoomPane.vue
@@ -47,7 +47,7 @@ const transform = computed(() => {
 <template>
   <div
     ref="zoomPane"
-    class="contain-size place-content-center"
+    class="place-content-center contain-size"
     @wheel="handleWheel"
     @pointerdown.prevent="handleDown"
     @pointermove="handleMove"
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
index 768332325..0968c03a0 100644
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -2,11 +2,11 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  base: 'focus-visible:ring-ring relative inline-flex cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border-none font-inter text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:
-        'bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover',
+        'text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover',
       primary:
         'bg-primary-background text-base-foreground hover:bg-primary-background-hover',
       inverted:
@@ -14,11 +14,11 @@ export const buttonVariants = cva({
       destructive:
         'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
       textonly:
-        'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
+        'bg-transparent text-base-foreground hover:bg-secondary-background-hover',
       'muted-textonly':
-        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
+        'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
       'destructive-textonly':
-        'text-destructive-background bg-transparent hover:bg-destructive-background/10',
+        'bg-transparent text-destructive-background hover:bg-destructive-background/10',
       'overlay-white': 'bg-white text-gray-600 hover:bg-white/90'
     },
     size: {
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index 7d7a95121..5ed9a79ed 100644
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="slider-track"
       :class="
         cn(
-          'bg-node-stroke relative grow overflow-hidden rounded-full',
+          'relative grow overflow-hidden rounded-full bg-node-stroke',
           'cursor-pointer overflow-visible',
           `before:absolute before:-inset-2 before:block before:bg-transparent`,
           'data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full',
@@ -70,9 +70,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="slider-thumb"
       :class="
         cn(
-          'bg-node-component-surface-highlight ring-node-component-surface-selected block size-3.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow]',
+          'block size-3.5 shrink-0 rounded-full bg-node-component-surface-highlight shadow-sm ring-node-component-surface-selected transition-[color,box-shadow]',
           'cursor-grab',
-          'before:absolute before:-inset-1 before:block before:bg-transparent before:rounded-full',
+          'before:absolute before:-inset-1 before:block before:rounded-full before:bg-transparent',
           'hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
           { 'cursor-grabbing': pressed }
         )
diff --git a/src/components/ui/stepper/FormattedNumberStepper.vue b/src/components/ui/stepper/FormattedNumberStepper.vue
index 2de6bbf13..04c3a4d4d 100644
--- a/src/components/ui/stepper/FormattedNumberStepper.vue
+++ b/src/components/ui/stepper/FormattedNumberStepper.vue
@@ -3,14 +3,14 @@
     :for="inputId"
     :class="
       cn(
-        'flex h-10 cursor-text items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover focus-within:ring-1 focus-within:ring-secondary-foreground',
-        disabled && 'opacity-50 pointer-events-none'
+        'text-secondary-foreground focus-within:ring-secondary-foreground flex h-10 cursor-text items-center rounded-lg bg-secondary-background focus-within:ring-1 hover:bg-secondary-background-hover',
+        disabled && 'pointer-events-none opacity-50'
       )
     "
   >
     <button
       type="button"
-      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
+      class="focus-visible:ring-secondary-foreground flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset disabled:opacity-30"
       :disabled="disabled || modelValue <= min"
       :aria-label="$t('g.decrement')"
       @click="handleStep(-1)"
@@ -28,17 +28,17 @@
         type="text"
         inputmode="numeric"
         :style="{ width: `${inputWidth}ch` }"
-        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
+        class="min-w-0 rounded border-none bg-transparent text-center text-lg font-medium text-base-foreground focus-visible:outline-none"
         :disabled="disabled"
         @input="handleInputChange"
         @blur="handleInputBlur"
         @focus="handleInputFocus"
-      />
+      >
       <slot name="suffix" />
     </div>
     <button
       type="button"
-      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
+      class="focus-visible:ring-secondary-foreground flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset disabled:opacity-30"
       :disabled="disabled || modelValue >= max"
       :aria-label="$t('g.increment')"
       @click="handleStep(1)"
diff --git a/src/components/ui/tags-input/TagsInput.vue b/src/components/ui/tags-input/TagsInput.vue
index f4a3fa001..29b3aa9e8 100644
--- a/src/components/ui/tags-input/TagsInput.vue
+++ b/src/components/ui/tags-input/TagsInput.vue
@@ -60,7 +60,7 @@ onClickOutside(rootEl, () => {
       cn(
         'group relative flex flex-wrap items-center gap-2 rounded-lg bg-transparent p-2 text-xs text-base-foreground',
         !internalDisabled &&
-          'hover:bg-modal-card-background-hovered focus-within:bg-modal-card-background-hovered',
+          'focus-within:bg-modal-card-background-hovered hover:bg-modal-card-background-hovered',
         !disabled && !isEditing && 'cursor-pointer',
         className
       )
@@ -71,7 +71,7 @@ onClickOutside(rootEl, () => {
     <i
       v-if="!disabled && !isEditing"
       aria-hidden="true"
-      class="icon-[lucide--square-pen] absolute bottom-2 right-2 size-4 text-muted-foreground"
+      class="absolute right-2 bottom-2 icon-[lucide--square-pen] size-4 text-muted-foreground"
     />
   </TagsInputRoot>
 </template>
diff --git a/src/components/ui/tags-input/TagsInputInput.vue b/src/components/ui/tags-input/TagsInputInput.vue
index 62d3f01e8..7b0cd579d 100644
--- a/src/components/ui/tags-input/TagsInputInput.vue
+++ b/src/components/ui/tags-input/TagsInputInput.vue
@@ -39,7 +39,7 @@ onUnmounted(() => {
     v-bind="forwardedProps"
     :class="
       cn(
-        'min-h-6 flex-1 bg-transparent text-xs text-muted-foreground placeholder:text-muted-foreground focus:outline-none appearance-none border-none',
+        'min-h-6 flex-1 appearance-none border-none bg-transparent text-xs text-muted-foreground placeholder:text-muted-foreground focus:outline-none',
         !isEditing && 'pointer-events-none',
         className
       )
diff --git a/src/components/ui/tags-input/TagsInputItem.vue b/src/components/ui/tags-input/TagsInputItem.vue
index 40cdab511..037920001 100644
--- a/src/components/ui/tags-input/TagsInputItem.vue
+++ b/src/components/ui/tags-input/TagsInputItem.vue
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(restProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'flex h-6 items-center gap-1 rounded-sm bg-modal-card-tag-background py-1 pl-2 pr-1 text-modal-card-tag-foreground backdrop-blur-sm ring-offset-base-background data-[state=active]:ring-2 data-[state=active]:ring-base-foreground data-[state=active]:ring-offset-1',
+        'flex h-6 items-center gap-1 rounded-sm bg-modal-card-tag-background py-1 pr-1 pl-2 text-modal-card-tag-foreground ring-offset-base-background backdrop-blur-sm data-[state=active]:ring-2 data-[state=active]:ring-base-foreground data-[state=active]:ring-offset-1',
         className
       )
     "
diff --git a/src/components/ui/tags-input/TagsInputItemDelete.vue b/src/components/ui/tags-input/TagsInputItemDelete.vue
index d5cc0a933..98aa05784 100644
--- a/src/components/ui/tags-input/TagsInputItemDelete.vue
+++ b/src/components/ui/tags-input/TagsInputItemDelete.vue
@@ -24,7 +24,7 @@ const { t } = useI18n()
     :aria-label="t('g.removeTag')"
     :class="
       cn(
-        'opacity-60 hover:bg-transparent hover:opacity-100 transition-[opacity,width] duration-150 w-4 data-[disabled]:w-0 data-[disabled]:opacity-0 data-[disabled]:pointer-events-none overflow-hidden',
+        'w-4 overflow-hidden opacity-60 transition-[opacity,width] duration-150 hover:bg-transparent hover:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:w-0 data-[disabled]:opacity-0',
         className
       )
     "
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index 0da7755af..1f2d07898 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="base-widget-layout rounded-2xl overflow-hidden relative">
+  <div class="base-widget-layout relative overflow-hidden rounded-2xl">
     <Button
       v-show="!isRightPanelOpen && hasRightPanel"
       size="lg"
       :class="
         cn('absolute top-4 right-18 z-10', 'transition-opacity duration-200', {
-          'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
+          'pointer-events-none opacity-0': isRightPanelOpen || !hasRightPanel
         })
       "
       @click="toggleRightPanel"
@@ -14,7 +14,7 @@
     </Button>
     <Button
       size="lg"
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200 w-10"
+      class="absolute top-4 right-6 z-10 w-10 transition-opacity duration-200"
       @click="closeDialog"
     >
       <i class="pi pi-times" />
@@ -29,18 +29,22 @@
             PANEL_SIZES.maxWidth
           ]"
         >
-          <slot name="leftPanel"></slot>
+          <slot name="leftPanel" />
         </nav>
       </Transition>
 
-      <div class="flex-1 flex bg-base-background">
+      <div class="flex flex-1 bg-base-background">
         <div class="flex h-full w-full flex-col">
           <header
             v-if="$slots.header"
-            class="w-full h-18 px-6 flex items-center justify-between gap-2"
+            class="flex h-18 w-full items-center justify-between gap-2 px-6"
           >
             <div class="flex flex-1 shrink-0 gap-2">
-              <Button v-if="!notMobile" size="icon" @click="toggleLeftPanel">
+              <Button
+                v-if="!notMobile"
+                size="icon"
+                @click="toggleLeftPanel"
+              >
                 <i
                   :class="
                     cn(
@@ -51,13 +55,13 @@
                   "
                 />
               </Button>
-              <slot name="header"></slot>
+              <slot name="header" />
             </div>
-            <slot name="header-right-area"></slot>
+            <slot name="header-right-area" />
             <div
               :class="
                 cn(
-                  'flex justify-end gap-2 w-0',
+                  'flex w-0 justify-end gap-2',
                   hasRightPanel && !isRightPanelOpen ? 'min-w-22' : 'min-w-10'
                 )
               "
@@ -74,7 +78,7 @@
 
           <main class="flex min-h-0 flex-1 flex-col">
             <!-- Fallback title bar when no leftPanel is provided -->
-            <slot name="contentFilter"></slot>
+            <slot name="contentFilter" />
             <h2
               v-if="!$slots.leftPanel"
               class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
@@ -82,17 +86,17 @@
               {{ contentTitle }}
             </h2>
             <div
-              class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
+              class="scrollbar-custom min-h-0 flex-1 overflow-y-auto px-6 pt-0 pb-10"
             >
-              <slot name="content"></slot>
+              <slot name="content" />
             </div>
           </main>
         </div>
         <aside
           v-if="hasRightPanel && isRightPanelOpen"
-          class="w-1/4 min-w-40 max-w-80 pt-16 pb-8"
+          class="w-1/4 max-w-80 min-w-40 pt-16 pb-8"
         >
-          <slot name="rightPanel"></slot>
+          <slot name="rightPanel" />
         </aside>
       </div>
     </div>
diff --git a/src/components/widget/nav/NavIcon.vue b/src/components/widget/nav/NavIcon.vue
index 91f70e23a..de2959d36 100644
--- a/src/components/widget/nav/NavIcon.vue
+++ b/src/components/widget/nav/NavIcon.vue
@@ -1,5 +1,8 @@
 <template>
-  <i :class="icon" class="text-neutral text-sm shrink-0" />
+  <i
+    :class="icon"
+    class="text-neutral shrink-0 text-sm"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 8c20ad929..fcd03f875 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -15,12 +15,21 @@
     @mouseenter="checkOverflow"
     @click="onClick"
   >
-    <div v-if="icon" class="pt-0.5">
+    <div
+      v-if="icon"
+      class="pt-0.5"
+    >
       <NavIcon :icon="icon" />
     </div>
-    <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
-    <span ref="textRef" class="min-w-0 truncate">
-      <slot></slot>
+    <i
+      v-else
+      class="text-neutral icon-[lucide--folder] shrink-0 text-xs"
+    />
+    <span
+      ref="textRef"
+      class="min-w-0 truncate"
+    >
+      <slot />
     </span>
   </div>
 </template>
diff --git a/src/components/widget/nav/NavTitle.vue b/src/components/widget/nav/NavTitle.vue
index 35c35b17a..0f348d3fc 100644
--- a/src/components/widget/nav/NavTitle.vue
+++ b/src/components/widget/nav/NavTitle.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'flex items-center justify-between m-0 px-3 py-0 pt-5',
+        'm-0 flex items-center justify-between px-3 py-0 pt-5',
         collapsible && 'cursor-pointer select-none'
       )
     "
@@ -15,7 +15,7 @@
       v-if="collapsible"
       :class="
         cn(
-          'pi transition-transform duration-200 text-xs text-text-secondary ',
+          'pi text-xs text-text-secondary transition-transform duration-200',
           isCollapsed ? 'pi-chevron-right' : 'pi-chevron-down'
         )
       "
diff --git a/src/lib/litegraph/README.md b/src/lib/litegraph/README.md
index 39cfa939d..a1f80e202 100755
--- a/src/lib/litegraph/README.md
+++ b/src/lib/litegraph/README.md
@@ -1,173 +1,173 @@
-# @ComfyOrg/litegraph
-
-This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend).
-
-It is a fork of the original `litegraph.js`. Some APIs may by unchanged, however it is largely incompatible with the original.
-
-Some early highlights:
-
-- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1)
-- Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3)
-- Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7)
-- Emit search box triggering custom events (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
-- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
-- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
-- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
-- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
-- And now with hundreds more...
-
-# Usage
-
-This library is included as a git subtree in the ComfyUI frontend project at `src/lib/litegraph`.
-
-# litegraph.js
-
-A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
-
-<details>
-
-<summary>Description of the original litegraph.js</summary>
-
-A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.
-
-It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
-
-</details>
-
-![Node Graph](imgs/node_graph_example.png 'Node graph example')
-
-## Features
-
-- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
-- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
-- Optimized to support hundreds of nodes per graph (on editor but also on execution)
-- Customizable theme (colors, shapes, background)
-- Callbacks to personalize every action/drawing/event of nodes
-- Graphs can be executed in NodeJS
-- Highly customizable nodes (color, shape, widgets, custom rendering)
-- Easy to integrate in any JS application (one single file, no dependencies)
-- Typescript support
-
-## Integration
-
-This library is integrated as a git subtree in the ComfyUI frontend project. To use it in your code:
-
-```typescript
-import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph'
-```
-
-## How to code a new Node type
-
-Here is an example of how to build a node that sums two inputs:
-
-```ts
-import { LiteGraph, LGraphNode } from './litegraph'
-
-class MyAddNode extends LGraphNode {
-  // Name to show
-  title = 'Sum'
-
-  constructor() {
-    this.addInput('A', 'number')
-    this.addInput('B', 'number')
-    this.addOutput('A+B', 'number')
-    this.properties.precision = 1
-  }
-
-  // Function to call when the node is executed
-  onExecute() {
-    var A = this.getInputData(0)
-    if (A === undefined) A = 0
-    var B = this.getInputData(1)
-    if (B === undefined) B = 0
-    this.setOutputData(0, A + B)
-  }
-}
-
-// Register the node type
-LiteGraph.registerNodeType('basic/sum', MyAddNode)
-```
-
-## Server side
-
-It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
-
-```ts
-import { LiteGraph, LGraph } from './litegraph.js'
-
-const graph = new LGraph()
-
-const firstNode = LiteGraph.createNode('basic/sum')
-graph.add(firstNode)
-
-const secondNode = LiteGraph.createNode('basic/sum')
-graph.add(secondNode)
-
-firstNode.connect(0, secondNode, 1)
-
-graph.start()
-```
-
-## Projects using it
-
-### [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
-
-![ComfyUI default workflow](https://github.com/comfyanonymous/ComfyUI/blob/6efe561c2a7321501b1b27f47039c7616dda1860/comfyui_screenshot.png 'ComfyUI default workflow')
-
-### Projects using the original litegraph.js
-
-<details>
-
-<summary>Click to expand</summary>
-
-### [webglstudio.org](http://webglstudio.org)
-
-![WebGLStudio](imgs/webglstudio.gif 'WebGLStudio')
-
-### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
-
-![MOI Elephant](imgs/elephant.gif 'MOI Elephant')
-
-### Mynodes
-
-![MyNodes](imgs/mynodes.png 'MyNodes')
-
-</details>
-
-## Feedback
-
-Please [open an issue](https://github.com/Comfy-Org/litegraph.js/issues/) on the GitHub repo.
-
-# Development
-
-Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x
-
-## Releasing
-
-Use GitHub actions to release normal versions.
-
-1. Run the `Release a New Version` action, selecting the version increment type
-1. Merge the resolution PR
-1. A GitHub release is automatically published on merge
-
-### Pre-release
-
-The action directly translates `Version increment type` to the pnpm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
-
-e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
-Use `patch` when ready to remove the pre-release suffix.
-
-## Contributors
-
-You can find the [current list of contributors](https://github.com/Comfy-Org/litegraph.js/graphs/contributors) on GitHub.
-
-### Contributors (pre-fork)
-
-- atlasan
-- kriffe
-- rappestad
-- InventivetalentDev
-- NateScarlet
-- coderofsalvation
-- ilyabesk
-- gausszhou
+# @ComfyOrg/litegraph
+
+This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend).
+
+It is a fork of the original `litegraph.js`. Some APIs may by unchanged, however it is largely incompatible with the original.
+
+Some early highlights:
+
+- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1)
+- Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3)
+- Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7)
+- Emit search box triggering custom events (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
+- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
+- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
+- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
+- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
+- And now with hundreds more...
+
+# Usage
+
+This library is included as a git subtree in the ComfyUI frontend project at `src/lib/litegraph`.
+
+# litegraph.js
+
+A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
+
+<details>
+
+<summary>Description of the original litegraph.js</summary>
+
+A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.
+
+It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
+
+</details>
+
+![Node Graph](imgs/node_graph_example.png 'Node graph example')
+
+## Features
+
+- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
+- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
+- Optimized to support hundreds of nodes per graph (on editor but also on execution)
+- Customizable theme (colors, shapes, background)
+- Callbacks to personalize every action/drawing/event of nodes
+- Graphs can be executed in NodeJS
+- Highly customizable nodes (color, shape, widgets, custom rendering)
+- Easy to integrate in any JS application (one single file, no dependencies)
+- Typescript support
+
+## Integration
+
+This library is integrated as a git subtree in the ComfyUI frontend project. To use it in your code:
+
+```typescript
+import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph'
+```
+
+## How to code a new Node type
+
+Here is an example of how to build a node that sums two inputs:
+
+```ts
+import { LiteGraph, LGraphNode } from './litegraph'
+
+class MyAddNode extends LGraphNode {
+  // Name to show
+  title = 'Sum'
+
+  constructor() {
+    this.addInput('A', 'number')
+    this.addInput('B', 'number')
+    this.addOutput('A+B', 'number')
+    this.properties.precision = 1
+  }
+
+  // Function to call when the node is executed
+  onExecute() {
+    var A = this.getInputData(0)
+    if (A === undefined) A = 0
+    var B = this.getInputData(1)
+    if (B === undefined) B = 0
+    this.setOutputData(0, A + B)
+  }
+}
+
+// Register the node type
+LiteGraph.registerNodeType('basic/sum', MyAddNode)
+```
+
+## Server side
+
+It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
+
+```ts
+import { LiteGraph, LGraph } from './litegraph.js'
+
+const graph = new LGraph()
+
+const firstNode = LiteGraph.createNode('basic/sum')
+graph.add(firstNode)
+
+const secondNode = LiteGraph.createNode('basic/sum')
+graph.add(secondNode)
+
+firstNode.connect(0, secondNode, 1)
+
+graph.start()
+```
+
+## Projects using it
+
+### [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
+
+![ComfyUI default workflow](https://github.com/comfyanonymous/ComfyUI/blob/6efe561c2a7321501b1b27f47039c7616dda1860/comfyui_screenshot.png 'ComfyUI default workflow')
+
+### Projects using the original litegraph.js
+
+<details>
+
+<summary>Click to expand</summary>
+
+### [webglstudio.org](http://webglstudio.org)
+
+![WebGLStudio](imgs/webglstudio.gif 'WebGLStudio')
+
+### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
+
+![MOI Elephant](imgs/elephant.gif 'MOI Elephant')
+
+### Mynodes
+
+![MyNodes](imgs/mynodes.png 'MyNodes')
+
+</details>
+
+## Feedback
+
+Please [open an issue](https://github.com/Comfy-Org/litegraph.js/issues/) on the GitHub repo.
+
+# Development
+
+Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x
+
+## Releasing
+
+Use GitHub actions to release normal versions.
+
+1. Run the `Release a New Version` action, selecting the version increment type
+1. Merge the resolution PR
+1. A GitHub release is automatically published on merge
+
+### Pre-release
+
+The action directly translates `Version increment type` to the pnpm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
+
+e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
+Use `patch` when ready to remove the pre-release suffix.
+
+## Contributors
+
+You can find the [current list of contributors](https://github.com/Comfy-Org/litegraph.js/graphs/contributors) on GitHub.
+
+### Contributors (pre-fork)
+
+- atlasan
+- kriffe
+- rappestad
+- InventivetalentDev
+- NateScarlet
+- coderofsalvation
+- ilyabesk
+- gausszhou
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 5c85713e4..70cf254f6 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1">
+  <div class="absolute bottom-2 left-2 flex flex-wrap justify-start gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"
       :class="
         cn(
-          'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
+          'rounded bg-modal-card-tag-background px-2 py-1 text-xs font-bold tracking-wider break-all text-modal-card-tag-foreground uppercase'
         )
       "
     >
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 11e404d41..a754b0580 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -7,9 +7,9 @@
     :tabindex="interactive ? 0 : -1"
     :class="
       cn(
-        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
+        'flex h-full flex-col gap-2 overflow-hidden rounded-2xl bg-modal-card-background p-2 transition-all duration-200',
         interactive &&
-          'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
+          'group m-0 appearance-none border-none bg-transparent text-left outline-4 outline-base-foreground outline-none hover:bg-secondary-background focus:bg-secondary-background focus:outline-solid'
       )
     "
     @keydown.enter.self="interactive && $emit('select', asset)"
@@ -25,22 +25,25 @@
         v-else
         :src="asset.preview_url"
         :alt="displayName"
-        class="size-full object-cover cursor-pointer"
+        class="size-full cursor-pointer object-cover"
         role="button"
         @click.self="interactive && $emit('select', asset)"
-      />
+      >
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
         v-if="showAssetOptions"
         :class="
           cn(
-            'absolute top-2 right-2 invisible group-hover:visible',
+            'invisible absolute top-2 right-2 group-hover:visible',
             dropdownMenuButton?.isOpen && 'visible'
           )
         "
       >
-        <MoreButton ref="dropdown-menu-button" size="sm">
+        <MoreButton
+          ref="dropdown-menu-button"
+          size="sm"
+        >
           <template #default>
             <Button
               v-if="flags.assetRenameEnabled"
@@ -66,13 +69,13 @@
         </MoreButton>
       </IconGroup>
     </div>
-    <div class="max-h-32 flex flex-col gap-2 justify-between flex-auto">
+    <div class="flex max-h-32 flex-auto flex-col justify-between gap-2">
       <h3
         :id="titleId"
         v-tooltip.top="{ value: displayName, showDelay: tooltipDelay }"
         :class="
           cn(
-            'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
+            'm-0 mb-2 line-clamp-2 text-base font-semibold wrap-anywhere',
             'text-base-foreground'
           )
         "
@@ -90,22 +93,31 @@
         v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
         :class="
           cn(
-            'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
+            'm-0 [display:-webkit-box] overflow-hidden text-sm leading-6 text-muted-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:2]'
           )
         "
       >
         {{ asset.description }}
       </p>
-      <div class="flex gap-4 text-xs text-muted-foreground mt-auto">
-        <span v-if="asset.stats.stars" class="flex items-center gap-1">
+      <div class="mt-auto flex gap-4 text-xs text-muted-foreground">
+        <span
+          v-if="asset.stats.stars"
+          class="flex items-center gap-1"
+        >
           <i class="icon-[lucide--star] size-3" />
           {{ asset.stats.stars }}
         </span>
-        <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
+        <span
+          v-if="asset.stats.downloadCount"
+          class="flex items-center gap-1"
+        >
           <i class="icon-[lucide--download] size-3" />
           {{ asset.stats.downloadCount }}
         </span>
-        <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
+        <span
+          v-if="asset.stats.formattedDate"
+          class="flex items-center gap-1"
+        >
           <i class="icon-[lucide--clock] size-3" />
           {{ asset.stats.formattedDate }}
         </span>
@@ -192,7 +204,7 @@ function confirmDeletion() {
       confirmText: t('g.delete'),
       // TODO: These need to be put into the new Button Variants once we have them.
       confirmClass: cn(
-        'bg-danger-200 text-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring ring-base-foreground'
+        'bg-danger-200 text-base-foreground ring-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring'
       ),
       optionsDisabled,
       onCancel: () => {
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 560e3138e..ae1d6686f 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex gap-4 items-center justify-between px-6 pt-2 pb-6"
+    class="flex items-center justify-between gap-4 px-6 pt-2 pb-6"
     data-component-id="asset-filter-bar"
   >
     <div
-      class="flex gap-4 items-center"
+      class="flex items-center gap-4"
       data-component-id="asset-filter-bar-left"
     >
       <MultiSelect
@@ -38,7 +38,10 @@
       />
     </div>
 
-    <div class="flex items-center" data-component-id="asset-filter-bar-right">
+    <div
+      class="flex items-center"
+      data-component-id="asset-filter-bar-right"
+    >
       <SingleSelect
         v-model="sortBy"
         :label="$t('assetBrowser.sortBy')"
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index 8da39c67b..3231cff68 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -5,18 +5,18 @@
     :aria-label="
       asset
         ? $t('assetBrowser.ariaLabel.assetCard', {
-            name: asset.name,
-            type: fileKind
-          })
+          name: asset.name,
+          type: fileKind
+        })
         : $t('assetBrowser.ariaLabel.loadingAsset')
     "
     :tabindex="loading ? -1 : 0"
     :class="
       cn(
-        'flex flex-col overflow-hidden cursor-pointer p-2 transition-colors duration-200 rounded-lg',
-        'gap-2 select-none group',
+        'flex cursor-pointer flex-col overflow-hidden rounded-lg p-2 transition-colors duration-200',
+        'group gap-2 select-none',
         selected
-          ? 'ring-3 ring-inset ring-modal-card-border-highlighted'
+          ? 'ring-3 ring-modal-card-border-highlighted ring-inset'
           : 'hover:bg-modal-card-background-hovered/20'
       )
     "
@@ -79,7 +79,10 @@
     <!-- Bottom Area: Media Info -->
     <div class="flex-1">
       <!-- Loading State -->
-      <div v-if="loading" class="flex justify-between items-start">
+      <div
+        v-if="loading"
+        class="flex items-start justify-between"
+      >
         <div class="flex flex-col gap-1">
           <div
             class="h-4 w-24 animate-pulse rounded bg-modal-card-background"
@@ -94,7 +97,7 @@
       <!-- Content -->
       <div
         v-else-if="asset && adaptedAsset"
-        class="flex justify-between items-end gap-1.5"
+        class="flex items-end justify-between gap-1.5"
       >
         <!-- Left side: Media name and metadata -->
         <div class="flex flex-col gap-1">
@@ -108,7 +111,10 @@
         </div>
 
         <!-- Right side: Output count -->
-        <div v-if="showOutputCount" class="flex-shrink-0">
+        <div
+          v-if="showOutputCount"
+          class="flex-shrink-0"
+        >
           <Button
             v-tooltip.top.pt:pointer-events-none="
               $t('mediaAsset.actions.seeMoreOutputs')
diff --git a/src/platform/assets/components/MediaAssetFilterButton.vue b/src/platform/assets/components/MediaAssetFilterButton.vue
index 98658fb01..9f27292fb 100644
--- a/src/platform/assets/components/MediaAssetFilterButton.vue
+++ b/src/platform/assets/components/MediaAssetFilterButton.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button variant="secondary" size="icon" @click="toggle">
+    <Button
+      variant="secondary"
+      size="icon"
+      @click="toggle"
+    >
       <i class="icon-[lucide--list-filter]" />
     </Button>
 
@@ -51,7 +55,7 @@ const pt = computed(() => ({
   },
   content: {
     class: cn(
-      'mt-1 rounded-lg bg-base-background text-base-foreground border border-border-default shadow-lg'
+      'mt-1 rounded-lg border border-border-default bg-base-background text-base-foreground shadow-lg'
     )
   }
 }))
diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
index 20c5960b7..806b5f2a1 100644
--- a/src/platform/assets/components/MediaAssetFilterMenu.vue
+++ b/src/platform/assets/components/MediaAssetFilterMenu.vue
@@ -11,7 +11,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
 - Benefits: Consistent checkbox UI, better maintainability, reusable design system component
 -->
 <template>
-  <div class="flex flex-col gap-0 p-0 m-0">
+  <div class="m-0 flex flex-col gap-0 p-0">
     <div
       v-for="filter in filters"
       :key="filter.type"
@@ -27,7 +27,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
         class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
         :class="
           mediaTypeFilters.includes(filter.type)
-            ? 'bg-primary-background border-primary-background'
+            ? 'border-primary-background bg-primary-background'
             : 'bg-secondary-background'
         "
       >
diff --git a/src/platform/assets/components/MediaAssetSortButton.vue b/src/platform/assets/components/MediaAssetSortButton.vue
index 1721eaf85..3cd19b766 100644
--- a/src/platform/assets/components/MediaAssetSortButton.vue
+++ b/src/platform/assets/components/MediaAssetSortButton.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button variant="secondary" size="icon" @click="toggle">
+    <Button
+      variant="secondary"
+      size="icon"
+      @click="toggle"
+    >
       <i class="icon-[lucide--arrow-up-down]" />
     </Button>
 
@@ -52,7 +56,7 @@ const pt = computed(() => ({
   content: {
     class: cn(
       'mt-1 rounded-lg',
-      'bg-base-background text-base-foreground border border-border-default',
+      'border border-border-default bg-base-background text-base-foreground',
       'shadow-lg'
     )
   }
diff --git a/src/platform/assets/components/MediaTitle.vue b/src/platform/assets/components/MediaTitle.vue
index 4a28245b8..3ebe18823 100644
--- a/src/platform/assets/components/MediaTitle.vue
+++ b/src/platform/assets/components/MediaTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <p
-    class="m-0 line-clamp-2 text-sm text-base-foreground leading-tight break-all"
+    class="m-0 line-clamp-2 text-sm leading-tight break-all text-base-foreground"
     :title="fileName"
   >
     {{ fileName }}
diff --git a/src/platform/assets/components/ModelImportProgressDialog.vue b/src/platform/assets/components/ModelImportProgressDialog.vue
index 92b21e282..161af09fa 100644
--- a/src/platform/assets/components/ModelImportProgressDialog.vue
+++ b/src/platform/assets/components/ModelImportProgressDialog.vue
@@ -83,7 +83,10 @@ function closeDialog() {
 </script>
 
 <template>
-  <HoneyToast v-model:expanded="isExpanded" :visible>
+  <HoneyToast
+    v-model:expanded="isExpanded"
+    :visible
+  >
     <template #default>
       <div
         class="flex h-12 items-center justify-between border-b border-border-default px-4"
@@ -143,7 +146,7 @@ function closeDialog() {
       <div class="relative max-h-75 overflow-y-auto px-4 py-4">
         <div
           v-if="filteredJobs.length > 3"
-          class="absolute right-1 top-4 h-12 w-1 rounded-full bg-muted-foreground"
+          class="absolute top-4 right-1 h-12 w-1 rounded-full bg-muted-foreground"
         />
 
         <div class="flex flex-col gap-2">
@@ -209,7 +212,7 @@ function closeDialog() {
         <div class="flex flex-shrink-0 items-center gap-2">
           <span
             v-if="isInProgress"
-            class="whitespace-nowrap text-sm text-muted-foreground"
+            class="text-sm whitespace-nowrap text-muted-foreground"
           >
             {{
               t('progressToast.progressCount', {
diff --git a/src/platform/assets/components/UploadModelDialogHeader.vue b/src/platform/assets/components/UploadModelDialogHeader.vue
index fb52bf501..d20e5ee15 100644
--- a/src/platform/assets/components/UploadModelDialogHeader.vue
+++ b/src/platform/assets/components/UploadModelDialogHeader.vue
@@ -4,10 +4,10 @@
       v-if="!flags.huggingfaceModelImportEnabled"
       src="/assets/images/civitai.svg"
       class="size-4"
-    />
+    >
     <span>{{ $t(titleKey) }}</span>
     <span
-      class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
+      class="rounded-full bg-white px-1.5 py-0 font-inter text-xxs font-semibold text-black uppercase"
     >
       {{ $t('g.beta') }}
     </span>
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 95ca59e45..47ba2616f 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-end gap-2 w-full">
+  <div class="flex w-full justify-end gap-2">
     <div
       v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
       class="mr-auto flex items-center gap-2"
@@ -77,13 +77,16 @@
       :disabled="!canUploadModel || isUploading"
       @click="emit('upload')"
     >
-      <i v-if="isUploading" class="icon-[lucide--loader-circle] animate-spin" />
+      <i
+        v-if="isUploading"
+        class="icon-[lucide--loader-circle] animate-spin"
+      />
       <span>{{ $t('assetBrowser.upload') }}</span>
     </Button>
     <template
       v-else-if="
         currentStep === 3 &&
-        (uploadStatus === 'success' || uploadStatus === 'processing')
+          (uploadStatus === 'success' || uploadStatus === 'processing')
       "
     >
       <Button
diff --git a/src/platform/assets/components/UploadModelProgress.vue b/src/platform/assets/components/UploadModelProgress.vue
index eb9ea7f3c..41326790a 100644
--- a/src/platform/assets/components/UploadModelProgress.vue
+++ b/src/platform/assets/components/UploadModelProgress.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-1 flex-col gap-6 text-sm text-muted-foreground">
     <!-- Processing State (202 async download in progress) -->
-    <div v-if="result === 'processing'" class="flex flex-col gap-2">
+    <div
+      v-if="result === 'processing'"
+      class="flex flex-col gap-2"
+    >
       <p class="m-0 font-bold">
         {{ $t('assetBrowser.processingModel') }}
       </p>
@@ -17,7 +20,7 @@
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
           class="size-14 flex-shrink-0 rounded object-cover"
-        />
+        >
         <div
           class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
         >
@@ -32,7 +35,10 @@
     </div>
 
     <!-- Success State -->
-    <div v-else-if="result === 'success'" class="flex flex-col gap-2">
+    <div
+      v-else-if="result === 'success'"
+      class="flex flex-col gap-2"
+    >
       <p class="m-0 font-bold">
         {{ $t('assetBrowser.modelUploaded') }}
       </p>
@@ -48,7 +54,7 @@
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
           class="size-14 flex-shrink-0 rounded object-cover"
-        />
+        >
         <div
           class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
         >
@@ -72,7 +78,10 @@
         <p class="m-0 text-sm font-bold">
           {{ $t('assetBrowser.uploadFailed') }}
         </p>
-        <p v-if="error" class="text-sm text-muted mb-0">
+        <p
+          v-if="error"
+          class="mb-0 text-sm text-muted"
+        >
           {{ error }}
         </p>
       </div>
diff --git a/src/platform/assets/components/UploadModelUpgradeModal.vue b/src/platform/assets/components/UploadModelUpgradeModal.vue
index 48010a3bb..41f9b7386 100644
--- a/src/platform/assets/components/UploadModelUpgradeModal.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col justify-between gap-10 p-4 border-t border-border-default w-auto max-w-[min(500px,90vw)]"
+    class="flex w-auto max-w-[min(500px,90vw)] flex-col justify-between gap-10 border-t border-border-default p-4"
   >
     <UploadModelUpgradeModalBody />
 
diff --git a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
index b030a7c3a..79ae60796 100644
--- a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
@@ -1,18 +1,26 @@
 <template>
-  <div class="flex flex-wrap justify-end gap-2 w-full">
+  <div class="flex w-full flex-wrap justify-end gap-2">
     <a
       href="https://blog.comfy.org/p/comfy-cloud-new-features-and-pricing"
       target="_blank"
       rel="noopener noreferrer"
-      class="text-muted-foreground mr-auto underline flex items-center gap-2"
+      class="mr-auto flex items-center gap-2 text-muted-foreground underline"
     >
       <i class="icon-[lucide--external-link]" />
       <span>{{ $t('g.learnMore') }}</span>
     </a>
-    <Button variant="textonly" @click="emit('close')">{{
-      $t('g.close')
-    }}</Button>
-    <Button variant="secondary" @click="emit('subscribe')">
+    <Button
+      variant="textonly"
+      @click="emit('close')"
+    >
+      {{
+        $t('g.close')
+      }}
+    </Button>
+    <Button
+      variant="secondary"
+      @click="emit('subscribe')"
+    >
       {{ $t('subscription.required.subscribe') }}
     </Button>
   </div>
diff --git a/src/platform/assets/components/UploadModelUrlInput.vue b/src/platform/assets/components/UploadModelUrlInput.vue
index d2c743d7a..b2e4a6654 100644
--- a/src/platform/assets/components/UploadModelUrlInput.vue
+++ b/src/platform/assets/components/UploadModelUrlInput.vue
@@ -1,36 +1,35 @@
 <template>
-  <div class="flex flex-col justify-between h-full gap-6 text-sm">
+  <div class="flex h-full flex-col justify-between gap-6 text-sm">
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
-        <p class="m-0 text-foreground">
+        <p class="text-foreground m-0">
           {{ $t('assetBrowser.uploadModelDescription1Generic') }}
         </p>
         <div class="m-0">
           <p class="m-0 text-muted-foreground">
             {{ $t('assetBrowser.uploadModelDescription2Generic') }}
           </p>
-          <span class="inline-flex items-center gap-1 flex-wrap mt-2">
+          <span class="mt-2 inline-flex flex-wrap items-center gap-1">
             <span class="inline-flex items-center gap-1">
               <img
                 :src="civitaiIcon"
                 :alt="$t('assetBrowser.providerCivitai')"
-                class="w-4 h-4"
-              />
+                class="h-4 w-4"
+              >
               <a
                 :href="civitaiUrl"
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-muted-foreground underline"
               >
-                {{ $t('assetBrowser.providerCivitai') }}</a
-              ><span>,</span>
+                {{ $t('assetBrowser.providerCivitai') }}</a><span>,</span>
             </span>
             <span class="inline-flex items-center gap-1">
               <img
                 :src="huggingFaceIcon"
                 :alt="$t('assetBrowser.providerHuggingFace')"
-                class="w-4 h-4"
-              />
+                class="h-4 w-4"
+              >
               <a
                 :href="huggingFaceUrl"
                 target="_blank"
@@ -55,14 +54,23 @@
           />
           <i
             v-if="isValidUrl"
-            class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
+            class="absolute top-1/2 right-3 icon-[lucide--circle-check-big] size-5 -translate-y-1/2 text-green-500"
           />
         </div>
-        <p v-if="error" class="text-sm text-error">
+        <p
+          v-if="error"
+          class="text-sm text-error"
+        >
           {{ error }}
         </p>
-        <p v-else-if="!flags.asyncModelUploadEnabled" class="text-foreground">
-          <i18n-t keypath="assetBrowser.maxFileSize" tag="span">
+        <p
+          v-else-if="!flags.asyncModelUploadEnabled"
+          class="text-foreground"
+        >
+          <i18n-t
+            keypath="assetBrowser.maxFileSize"
+            tag="span"
+          >
             <template #size>
               <span class="font-bold italic">{{
                 $t('assetBrowser.maxFileSizeValue')
diff --git a/src/platform/assets/components/UploadModelUrlInputCivitai.vue b/src/platform/assets/components/UploadModelUrlInputCivitai.vue
index 82c1dcf31..2560cb613 100644
--- a/src/platform/assets/components/UploadModelUrlInputCivitai.vue
+++ b/src/platform/assets/components/UploadModelUrlInputCivitai.vue
@@ -4,9 +4,12 @@
       <p class="m-0">
         {{ $t('assetBrowser.uploadModelDescription1') }}
       </p>
-      <ul class="list-disc space-y-1 pl-5 mt-0">
+      <ul class="mt-0 list-disc space-y-1 pl-5">
         <li>
-          <i18n-t keypath="assetBrowser.uploadModelDescription2" tag="span">
+          <i18n-t
+            keypath="assetBrowser.uploadModelDescription2"
+            tag="span"
+          >
             <template #link>
               <a
                 href="https://civitai.com/models"
@@ -19,7 +22,10 @@
           </i18n-t>
         </li>
         <li v-if="!flags.asyncModelUploadEnabled">
-          <i18n-t keypath="assetBrowser.uploadModelDescription3" tag="span">
+          <i18n-t
+            keypath="assetBrowser.uploadModelDescription3"
+            tag="span"
+          >
             <template #size>
               <span class="font-bold italic">{{
                 $t('assetBrowser.maxFileSizeValue')
@@ -31,7 +37,11 @@
     </div>
 
     <div class="flex flex-col gap-2">
-      <i18n-t keypath="assetBrowser.civitaiLinkLabel" tag="label" class="mb-0">
+      <i18n-t
+        keypath="assetBrowser.civitaiLinkLabel"
+        tag="label"
+        class="mb-0"
+      >
         <template #download>
           <span class="font-bold italic">{{
             $t('assetBrowser.civitaiLinkLabelDownload')
@@ -48,10 +58,13 @@
         />
         <i
           v-if="isValidUrl"
-          class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
+          class="absolute top-1/2 right-3 icon-[lucide--circle-check-big] size-5 -translate-y-1/2 text-green-500"
         />
       </div>
-      <p v-if="error" class="text-sm text-error">
+      <p
+        v-if="error"
+        class="text-sm text-error"
+      >
         {{ error }}
       </p>
       <i18n-t
diff --git a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
index 3e403a6ea..cd93b5367 100644
--- a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
+++ b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
@@ -26,9 +26,12 @@
       </div>
 
       <!-- Technical Details (Collapsible) -->
-      <div v-if="errorMessage" class="mb-4 text-left">
+      <div
+        v-if="errorMessage"
+        class="mb-4 text-left"
+      >
         <button
-          class="flex w-full items-center justify-between rounded bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
+          class="flex w-full items-center justify-between rounded border-0 bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover"
           @click="showTechnicalDetails = !showTechnicalDetails"
         >
           <span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
@@ -37,11 +40,11 @@
               'pi',
               showTechnicalDetails ? 'pi-chevron-up' : 'pi-chevron-down'
             ]"
-          ></i>
+          />
         </button>
         <div
           v-if="showTechnicalDetails"
-          class="mt-2 rounded border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
+          class="mt-2 rounded border border-muted-background p-4 font-mono text-xs break-all text-muted-foreground"
         >
           {{ errorMessage }}
         </div>
@@ -56,12 +59,14 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          {{ $t('cloudOnboarding.authTimeout.supportLink') }}</a
-        >.
+          {{ $t('cloudOnboarding.authTimeout.supportLink') }}</a>.
       </p>
 
       <div class="flex flex-col gap-3">
-        <Button class="w-full" @click="handleRestart">
+        <Button
+          class="w-full"
+          @click="handleRestart"
+        >
           {{ $t('cloudOnboarding.authTimeout.restart') }}
         </Button>
       </div>
diff --git a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
index d4da851ad..586637d21 100644
--- a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
+++ b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
@@ -95,17 +95,17 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex h-full w-full items-center justify-center bg-comfy-menu-secondary-bg"
+    class="bg-comfy-menu-secondary-bg flex h-full w-full items-center justify-center"
   >
     <div class="flex flex-col items-center gap-4">
       <img
         src="/assets/images/comfy-logo-single.svg"
         :alt="t('g.comfyOrgLogoAlt')"
         class="h-16 w-16"
-      />
+      >
       <p
         v-if="selectedTierKey"
-        class="font-inter text-base font-normal leading-normal text-base-foreground"
+        class="font-inter text-base leading-normal font-normal text-base-foreground"
       >
         {{
           t('subscription.subscribeTo', {
diff --git a/src/platform/cloud/subscription/components/PricingTable.vue b/src/platform/cloud/subscription/components/PricingTable.vue
index 1520a94bf..74b543395 100644
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -30,7 +30,7 @@
             <span>{{ option.label }}</span>
             <div
               v-if="option.value === 'yearly'"
-              class="bg-primary-background text-white text-[11px] px-1 py-0.5 rounded-full flex items-center font-bold"
+              class="flex items-center rounded-full bg-primary-background px-1 py-0.5 text-[11px] font-bold text-white"
             >
               -20%
             </div>
@@ -38,27 +38,27 @@
         </template>
       </SelectButton>
     </div>
-    <div class="flex flex-col xl:flex-row items-stretch gap-6">
+    <div class="flex flex-col items-stretch gap-6 xl:flex-row">
       <div
         v-for="tier in tiers"
         :key="tier.id"
         :class="
           cn(
-            'flex-1 flex flex-col rounded-2xl border border-border-default bg-base-background shadow-[0_0_12px_rgba(0,0,0,0.1)]',
+            'flex flex-1 flex-col rounded-2xl border border-border-default bg-base-background shadow-[0_0_12px_rgba(0,0,0,0.1)]',
             tier.isPopular ? 'border-muted-foreground' : ''
           )
         "
       >
-        <div class="p-8 pb-0 flex flex-col gap-8">
-          <div class="flex flex-row items-center gap-2 justify-between">
+        <div class="flex flex-col gap-8 p-8 pb-0">
+          <div class="flex flex-row items-center justify-between gap-2">
             <span
-              class="font-inter text-base font-bold leading-normal text-base-foreground"
+              class="font-inter text-base leading-normal font-bold text-base-foreground"
             >
               {{ tier.name }}
             </span>
             <div
               v-if="tier.isPopular"
-              class="rounded-full bg-base-foreground px-1.5 text-[11px] font-bold uppercase text-base-background h-5 tracking-tight flex items-center"
+              class="flex h-5 items-center rounded-full bg-base-foreground px-1.5 text-[11px] font-bold tracking-tight text-base-background uppercase"
             >
               {{ t('subscription.mostPopular') }}
             </div>
@@ -67,11 +67,11 @@
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-baseline gap-2">
                 <span
-                  class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
+                  class="font-inter text-[32px] leading-normal font-semibold text-base-foreground"
                 >
                   <span
                     v-show="currentBillingCycle === 'yearly'"
-                    class="line-through text-2xl text-muted-foreground"
+                    class="text-2xl text-muted-foreground line-through"
                   >
                     ${{ tier.pricing.monthly }}
                   </span>
@@ -88,8 +88,8 @@
                   {{
                     currentBillingCycle === 'yearly'
                       ? t('subscription.billedYearly', {
-                          total: `$${getAnnualTotal(tier)}`
-                        })
+                        total: `$${getAnnualTotal(tier)}`
+                      })
                       : t('subscription.billedMonthly')
                   }}
                 </span>
@@ -97,10 +97,10 @@
             </div>
           </div>
 
-          <div class="flex flex-col gap-4 pb-0 flex-1">
+          <div class="flex flex-1 flex-col gap-4 pb-0">
             <div class="flex flex-row items-center justify-between">
               <span
-                class="font-inter text-sm font-normal leading-normal text-foreground"
+                class="text-foreground font-inter text-sm leading-normal font-normal"
               >
                 {{
                   currentBillingCycle === 'yearly'
@@ -109,9 +109,9 @@
                 }}
               </span>
               <div class="flex flex-row items-center gap-1">
-                <i class="icon-[lucide--component] text-amber-400 text-sm" />
+                <i class="icon-[lucide--component] text-sm text-amber-400" />
                 <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                  class="font-inter text-sm leading-normal font-bold text-base-foreground"
                 >
                   {{ n(getCreditsDisplay(tier)) }}
                 </span>
@@ -119,55 +119,58 @@
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.maxDurationLabel') }}
               </span>
               <span
-                class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                class="font-inter text-sm leading-normal font-bold text-base-foreground"
               >
                 {{ tier.maxDuration }}
               </span>
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.gpuLabel') }}
               </span>
-              <i class="pi pi-check text-xs text-success-foreground" />
+              <i class="pi pi-check text-success-foreground text-xs" />
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.addCreditsLabel') }}
               </span>
-              <i class="pi pi-check text-xs text-success-foreground" />
+              <i class="pi pi-check text-success-foreground text-xs" />
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.customLoRAsLabel') }}
               </span>
               <i
                 v-if="tier.customLoRAs"
-                class="pi pi-check text-xs text-success-foreground"
+                class="pi pi-check text-success-foreground text-xs"
+              />
+              <i
+                v-else
+                class="pi pi-times text-foreground text-xs"
               />
-              <i v-else class="pi pi-times text-xs text-foreground" />
             </div>
 
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-start justify-between">
                 <div class="flex flex-col gap-2">
                   <span
-                    class="text-sm font-normal text-foreground leading-relaxed"
+                    class="text-foreground text-sm leading-relaxed font-normal"
                   >
                     {{ t('subscription.videoEstimateLabel') }}
                   </span>
-                  <div class="flex flex-row items-center gap-2 group pt-2">
+                  <div class="group flex flex-row items-center gap-2 pt-2">
                     <i
                       class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
                     />
                     <span
-                      class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
+                      class="cursor-pointer text-sm font-normal text-muted-foreground group-hover:text-base-foreground"
                       @click="togglePopover"
                     >
                       {{ t('subscription.videoEstimateHelp') }}
@@ -175,7 +178,7 @@
                   </div>
                 </div>
                 <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                  class="font-inter text-sm leading-normal font-bold text-base-foreground"
                 >
                   ~{{ n(tier.pricing.videoEstimate) }}
                 </span>
@@ -193,8 +196,8 @@
                 'h-10 w-full',
                 getButtonTextClass(tier),
                 tier.key === 'creator'
-                  ? 'bg-base-foreground border-transparent hover:bg-inverted-background-hover'
-                  : 'bg-secondary-background border-transparent hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
+                  ? 'border-transparent bg-base-foreground hover:bg-inverted-background-hover'
+                  : 'border-transparent bg-secondary-background hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
               )
             "
             @click="() => handleSubscribe(tier.key)"
@@ -222,19 +225,22 @@
       }"
     >
       <div class="flex flex-col gap-2">
-        <p class="text-sm text-base-foreground leading-normal">
+        <p class="text-sm leading-normal text-base-foreground">
           {{ t('subscription.videoEstimateExplanation') }}
         </p>
         <a
           href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
+          class="flex gap-1 text-sm text-azure-600 no-underline hover:text-azure-400"
         >
           <span class="underline">
             {{ t('subscription.videoEstimateTryTemplate') }}
           </span>
-          <span class="no-underline" v-html="'&rarr;'"></span>
+          <span
+            class="no-underline"
+            v-html="'&rarr;'"
+          />
         </a>
       </div>
     </Popover>
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 7a521b504..2a5392f8f 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -1,8 +1,11 @@
 <template>
-  <TabPanel value="PlanCredits" class="subscription-container h-full">
+  <TabPanel
+    value="PlanCredits"
+    class="subscription-container h-full"
+  >
     <div class="flex h-full flex-col gap-6">
       <div class="flex items-center gap-2">
-        <span class="text-2xl font-inter font-semibold leading-tight">
+        <span class="font-inter text-2xl leading-tight font-semibold">
           {{
             isActiveSubscription
               ? $t('subscription.title')
@@ -55,7 +58,7 @@
               <Button
                 v-if="isActiveSubscription"
                 variant="secondary"
-                class="ml-auto rounded-lg px-4 py-2 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                class="ml-auto rounded-lg bg-interface-menu-component-surface-selected px-4 py-2 text-sm font-normal text-text-primary"
                 @click="
                   async () => {
                     await authActions.accessBillingPortal()
@@ -84,8 +87,8 @@
             </div>
           </div>
 
-          <div class="flex flex-col lg:flex-row gap-6 pt-9">
-            <div class="flex flex-col shrink-0">
+          <div class="flex flex-col gap-6 pt-9 lg:flex-row">
+            <div class="flex shrink-0 flex-col">
               <div class="flex flex-col gap-3">
                 <div
                   :class="
@@ -102,7 +105,7 @@
                     :loading="isLoadingBalance"
                     @click="handleRefresh"
                   >
-                    <i class="pi pi-sync text-text-secondary text-sm" />
+                    <i class="pi pi-sync text-sm text-text-secondary" />
                   </Button>
 
                   <div class="flex flex-col gap-2">
@@ -114,7 +117,10 @@
                       width="8rem"
                       height="2rem"
                     />
-                    <div v-else class="text-2xl font-bold">
+                    <div
+                      v-else
+                      class="text-2xl font-bold"
+                    >
                       {{ totalCredits }}
                     </div>
                   </div>
@@ -123,7 +129,7 @@
                   <table class="text-sm text-muted">
                     <tbody>
                       <tr>
-                        <td class="pr-4 font-bold text-left align-middle">
+                        <td class="pr-4 text-left align-middle font-bold">
                           <Skeleton
                             v-if="isLoadingBalance"
                             width="5rem"
@@ -131,12 +137,15 @@
                           />
                           <span v-else>{{ includedCreditsDisplay }}</span>
                         </td>
-                        <td class="align-middle" :title="creditsRemainingLabel">
+                        <td
+                          class="align-middle"
+                          :title="creditsRemainingLabel"
+                        >
                           {{ creditsRemainingLabel }}
                         </td>
                       </tr>
                       <tr>
-                        <td class="pr-4 font-bold text-left align-middle">
+                        <td class="pr-4 text-left align-middle font-bold">
                           <Skeleton
                             v-if="isLoadingBalance"
                             width="3rem"
@@ -159,14 +168,14 @@
                       :href="usageHistoryUrl"
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="text-sm underline text-center text-muted"
+                      class="text-center text-sm text-muted underline"
                     >
                       {{ $t('subscription.viewUsageHistory') }}
                     </a>
                     <Button
                       v-if="isActiveSubscription"
                       variant="secondary"
-                      class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                      class="min-h-8 rounded-lg bg-interface-menu-component-surface-selected p-2 text-sm font-normal text-text-primary"
                       @click="handleAddApiCredits"
                     >
                       {{ $t('subscription.addCredits') }}
@@ -208,12 +217,12 @@
 
         <!-- View More Details - Outside main content -->
         <div class="flex items-center gap-2 py-4">
-          <i class="pi pi-external-link text-muted"></i>
+          <i class="pi pi-external-link text-muted" />
           <a
             href="https://www.comfy.org/cloud/pricing"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-sm underline hover:opacity-80 text-muted"
+            class="text-sm text-muted underline hover:opacity-80"
           >
             {{ $t('subscription.viewMoreDetailsPlans') }}
           </a>
@@ -229,7 +238,7 @@
             class="text-xs text-text-secondary"
             @click="handleLearnMoreClick"
           >
-            <i class="pi pi-question-circle text-text-secondary text-xs" />
+            <i class="pi pi-question-circle text-xs text-text-secondary" />
             {{ $t('subscription.learnMore') }}
           </Button>
           <Button
@@ -237,7 +246,7 @@
             class="text-xs text-text-secondary"
             @click="handleOpenPartnerNodesInfo"
           >
-            <i class="pi pi-question-circle text-text-secondary text-xs" />
+            <i class="pi pi-question-circle text-xs text-text-secondary" />
             {{ $t('subscription.partnerNodesCredits') }}
           </Button>
           <Button
@@ -246,7 +255,7 @@
             :loading="isLoadingSupport"
             @click="handleMessageSupport"
           >
-            <i class="pi pi-comment text-text-secondary text-xs" />
+            <i class="pi pi-comment text-xs text-text-secondary" />
             {{ $t('subscription.messageSupport') }}
           </Button>
         </div>
@@ -257,7 +266,7 @@
           @click="handleInvoiceHistory"
         >
           {{ $t('subscription.invoiceHistory') }}
-          <i class="pi pi-external-link text-text-secondary text-xs" />
+          <i class="pi pi-external-link text-xs text-text-secondary" />
         </Button>
       </div>
     </div>
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
index 4e61d8e8f..cf34d0759 100644
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -1,19 +1,19 @@
 <template>
   <div
     v-if="showCustomPricingTable"
-    class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
+    class="relative flex h-full flex-col gap-8 !overflow-y-auto p-4 pt-8 md:p-16"
   >
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
+      class="absolute top-2.5 right-2.5 shrink-0 rounded-full text-text-secondary hover:bg-white/10"
       :aria-label="$t('g.close')"
       @click="handleClose"
     >
       <i class="pi pi-times text-xl" />
     </Button>
     <div class="text-center">
-      <h2 class="text-xl lg:text-2xl text-muted-foreground m-0">
+      <h2 class="m-0 text-xl text-muted-foreground lg:text-2xl">
         {{ $t('subscription.description') }}
       </h2>
     </div>
@@ -22,7 +22,7 @@
 
     <!-- Contact and Enterprise Links -->
     <div class="flex flex-col items-center gap-2">
-      <p class="text-sm text-text-secondary m-0">
+      <p class="m-0 text-sm text-text-secondary">
         {{ $t('subscription.haveQuestions') }}
       </p>
       <div class="flex items-center gap-1.5">
@@ -46,12 +46,15 @@
       </div>
     </div>
   </div>
-  <div v-else class="legacy-dialog relative grid h-full grid-cols-5">
+  <div
+    v-else
+    class="legacy-dialog relative grid h-full grid-cols-5"
+  >
     <!-- Custom close button -->
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      class="absolute top-2.5 right-2.5 z-10 h-8 w-8 rounded-full p-0 text-white hover:bg-white/20"
       :aria-label="$t('g.close')"
       @click="handleClose"
     >
@@ -72,7 +75,7 @@
         <source
           src="/assets/images/cloud-subscription.webm"
           type="video/webm"
-        />
+        >
       </video>
     </div>
 
@@ -102,7 +105,7 @@
 
       <div class="flex flex-col pt-8">
         <SubscribeButton
-          class="py-2 px-4 rounded-lg"
+          class="rounded-lg px-4 py-2"
           :pt="{
             root: {
               style: 'background: var(--color-accent-blue, #0B8CE9);'
diff --git a/src/platform/updates/components/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
index 90419f4a1..a684313f4 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -1,25 +1,28 @@
 <template>
-  <div v-if="shouldShow" class="release-toast-popup">
+  <div
+    v-if="shouldShow"
+    class="release-toast-popup"
+  >
     <div
-      class="w-96 max-h-96 bg-base-background border border-border-default rounded-lg shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)] flex flex-col"
+      class="flex max-h-96 w-96 flex-col rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
     >
       <!-- Main content -->
-      <div class="p-4 flex flex-col gap-4 flex-1 min-h-0">
+      <div class="flex min-h-0 flex-1 flex-col gap-4 p-4">
         <!-- Header section with icon and text -->
         <div class="flex items-center gap-4">
           <div
-            class="p-3 bg-primary-background-hover rounded-lg flex items-center justify-center shrink-0"
+            class="flex shrink-0 items-center justify-center rounded-lg bg-primary-background-hover p-3"
           >
-            <i class="icon-[lucide--rocket] w-4 h-4 text-white" />
+            <i class="icon-[lucide--rocket] h-4 w-4 text-white" />
           </div>
           <div class="flex flex-col gap-1">
             <div
-              class="text-sm font-normal text-base-foreground leading-[1.429]"
+              class="text-sm leading-[1.429] font-normal text-base-foreground"
             >
               {{ $t('releaseToast.newVersionAvailable') }}
             </div>
             <div
-              class="text-sm font-normal text-muted-foreground leading-[1.21]"
+              class="text-sm leading-[1.21] font-normal text-muted-foreground"
             >
               {{ latestRelease?.version }}
             </div>
@@ -28,32 +31,32 @@
 
         <!-- Description section -->
         <div
-          class="pl-14 text-sm font-normal text-muted-foreground leading-[1.21] overflow-y-auto flex-1 min-h-0"
+          class="min-h-0 flex-1 overflow-y-auto pl-14 text-sm leading-[1.21] font-normal text-muted-foreground"
           v-html="formattedContent"
-        ></div>
+        />
       </div>
 
       <!-- Footer section -->
-      <div class="flex justify-between items-center px-4 pb-4">
+      <div class="flex items-center justify-between px-4 pb-4">
         <a
-          class="flex items-center gap-2 text-sm font-normal py-1 text-muted-foreground hover:text-base-foreground"
+          class="flex items-center gap-2 py-1 text-sm font-normal text-muted-foreground hover:text-base-foreground"
           :href="changelogUrl"
           target="_blank"
           rel="noopener noreferrer"
           @click="handleLearnMore"
         >
-          <i class="icon-[lucide--external-link] w-4 h-4"></i>
+          <i class="icon-[lucide--external-link] h-4 w-4" />
           {{ $t('releaseToast.whatsNew') }}
         </a>
         <div class="flex items-center gap-4">
           <button
-            class="h-6 px-0 bg-transparent border-none text-sm font-normal text-muted-foreground hover:text-base-foreground cursor-pointer"
+            class="h-6 cursor-pointer border-none bg-transparent px-0 text-sm font-normal text-muted-foreground hover:text-base-foreground"
             @click="handleSkip"
           >
             {{ $t('releaseToast.skip') }}
           </button>
           <button
-            class="h-10 px-4 bg-secondary-background hover:bg-secondary-background-hover rounded-lg border-none text-sm font-normal text-base-foreground cursor-pointer"
+            class="h-10 cursor-pointer rounded-lg border-none bg-secondary-background px-4 text-sm font-normal text-base-foreground hover:bg-secondary-background-hover"
             @click="handleUpdate"
           >
             {{ $t('releaseToast.update') }}
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index 511d053c2..7fa9a8a60 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -1,9 +1,15 @@
 <template>
-  <div v-if="shouldShow" class="whats-new-popup-container left-4">
-    <div class="whats-new-popup" @click.stop>
+  <div
+    v-if="shouldShow"
+    class="whats-new-popup-container left-4"
+  >
+    <div
+      class="whats-new-popup"
+      @click.stop
+    >
       <!-- Close Button -->
       <Button
-        class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50"
+        class="close-button absolute top-2 right-2 z-10 h-8 w-8 rounded-lg p-2 opacity-50"
         :aria-label="$t('g.close')"
         size="icon-sm"
         variant="muted-textonly"
@@ -13,26 +19,26 @@
       </Button>
 
       <!-- Modal Body -->
-      <div class="modal-body flex flex-col gap-4 px-0 pt-0 pb-2 flex-1">
+      <div class="modal-body flex flex-1 flex-col gap-4 px-0 pt-0 pb-2">
         <!-- Release Content -->
         <div
           class="content-text max-h-96 overflow-y-auto"
           v-html="formattedContent"
-        ></div>
+        />
       </div>
 
       <!-- Modal Footer -->
       <div
-        class="modal-footer flex justify-between items-center gap-4 px-4 pb-4"
+        class="modal-footer flex items-center justify-between gap-4 px-4 pb-4"
       >
         <a
-          class="learn-more-link flex items-center gap-2 text-sm font-normal py-1"
+          class="learn-more-link flex items-center gap-2 py-1 text-sm font-normal"
           :href="changelogUrl"
           target="_blank"
           rel="noopener noreferrer"
           @click="closePopup"
         >
-          <i class="icon-[lucide--external-link]"></i>
+          <i class="icon-[lucide--external-link]" />
           {{ $t('whatsNewPopup.learnMore') }}
         </a>
         <div class="footer-actions flex items-center gap-4">
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index cf542bb89..a8c17216b 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -3,7 +3,7 @@
     data-testid="transform-pane"
     :class="
       cn(
-        'absolute inset-0 w-full h-full pointer-events-none',
+        'pointer-events-none absolute inset-0 h-full w-full',
         isInteracting ? 'transform-pane--interacting' : 'will-change-auto'
       )
     "
diff --git a/src/renderer/extensions/linearMode/DropZone.vue b/src/renderer/extensions/linearMode/DropZone.vue
index ca6330aef..defe08584 100644
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -21,8 +21,8 @@ const canAcceptDrop = ref(false)
     v-if="onDragOver && onDragDrop"
     :class="
       cn(
-        'rounded-lg ring-inset ring-primary-500',
-        canAcceptDrop && 'ring-4 bg-primary-500/10'
+        'rounded-lg ring-primary-500 ring-inset',
+        canAcceptDrop && 'bg-primary-500/10 ring-4'
       )
     "
     @dragover.prevent="canAcceptDrop = onDragOver?.($event)"
@@ -39,7 +39,7 @@ const canAcceptDrop = ref(false)
       v-if="dropIndicator"
       :class="
         cn(
-          'flex flex-col items-center justify-center gap-2 border-dashed rounded-lg border h-25 border-border-subtle m-3 py-2',
+          'm-3 flex h-25 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-subtle py-2',
           dropIndicator?.onClick && 'cursor-pointer'
         )
       "
@@ -49,10 +49,16 @@ const canAcceptDrop = ref(false)
         v-if="dropIndicator?.imageUrl"
         class="h-23"
         :src="dropIndicator?.imageUrl"
-      />
+      >
       <template v-else>
-        <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
-        <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+        <span
+          v-if="dropIndicator.label"
+          v-text="dropIndicator.label"
+        />
+        <i
+          v-if="dropIndicator.iconClass"
+          :class="dropIndicator.iconClass"
+        />
       </template>
     </div>
   </div>
diff --git a/src/renderer/extensions/linearMode/ImagePreview.vue b/src/renderer/extensions/linearMode/ImagePreview.vue
index 1b2b83df9..8b13132c1 100644
--- a/src/renderer/extensions/linearMode/ImagePreview.vue
+++ b/src/renderer/extensions/linearMode/ImagePreview.vue
@@ -13,12 +13,16 @@ const width = ref('')
 const height = ref('')
 </script>
 <template>
-  <ZoomPane v-if="!mobile" v-slot="slotProps" class="flex-1 w-full">
+  <ZoomPane
+    v-if="!mobile"
+    v-slot="slotProps"
+    class="w-full flex-1"
+  >
     <img
       ref="imageRef"
       :src
       v-bind="slotProps"
-      class="h-full object-contain w-full"
+      class="h-full w-full object-contain"
       @load="
         () => {
           if (!imageRef) return
@@ -26,7 +30,7 @@ const height = ref('')
           height = `${imageRef.naturalHeight}`
         }
       "
-    />
+    >
   </ZoomPane>
   <img
     v-else
@@ -40,6 +44,9 @@ const height = ref('')
         height = `${imageRef.naturalHeight}`
       }
     "
+  >
+  <span
+    class="self-center md:z-10"
+    v-text="`${width} x ${height}`"
   />
-  <span class="self-center md:z-10" v-text="`${width} x ${height}`" />
 </template>
diff --git a/src/renderer/extensions/linearMode/LinearControls.vue b/src/renderer/extensions/linearMode/LinearControls.vue
index f37747f1a..b45dccbfa 100644
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -138,19 +138,25 @@ async function runButtonClick(e: Event) {
 defineExpose({ runButtonClick })
 </script>
 <template>
-  <div class="flex flex-col min-w-80 md:h-full">
+  <div class="flex min-w-80 flex-col md:h-full">
     <section
       v-if="mobile"
       data-testid="linear-run-button"
-      class="p-4 pb-6 border-t border-node-component-border"
+      class="border-t border-node-component-border p-4 pb-6"
     >
       <WidgetInputNumberInput
         v-model="batchCount"
         :widget="batchCountWidget"
-        class="*:[.min-w-0]:w-24 grid-cols-[auto_96px]!"
+        class="grid-cols-[auto_96px]! *:[.min-w-0]:w-24"
       />
-      <SubscribeToRunButton v-if="!isActiveSubscription" class="w-full mt-4" />
-      <div v-else class="flex mt-4 gap-2">
+      <SubscribeToRunButton
+        v-if="!isActiveSubscription"
+        class="mt-4 w-full"
+      />
+      <div
+        v-else
+        class="mt-4 flex gap-2"
+      >
         <Button
           variant="primary"
           class="grow-1"
@@ -173,17 +179,17 @@ defineExpose({ runButtonClick })
     </section>
     <section
       data-testid="linear-workflow-info"
-      class="h-12 border-x border-border-subtle py-2 px-4 gap-2 bg-comfy-menu-bg flex items-center md:contain-size"
+      class="flex h-12 items-center gap-2 border-x border-border-subtle bg-comfy-menu-bg px-4 py-2 md:contain-size"
     >
       <span
-        class="font-bold truncate"
+        class="truncate font-bold"
         v-text="workflowStore.activeWorkflow?.filename"
       />
       <div class="flex-1" />
       <Popover
         v-if="partitionedNodes[0].length"
         align="start"
-        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height) z-100"
+        class="z-100 max-h-(--reka-popover-content-available-height) overflow-x-clip overflow-y-auto"
         :reference="notesTo"
         side="left"
         :to="notesTo"
@@ -205,15 +211,17 @@ defineExpose({ runButtonClick })
             <NodeWidgets
               :node-data
               :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
-              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg max-w-100"
+              class="max-w-100 gap-y-3 rounded-lg py-3 not-has-[textarea]:flex-0 **:[.col-span-2]:grid-cols-1"
             />
           </template>
         </div>
       </Popover>
-      <Button v-if="false"> {{ t('menuLabels.publish') }} </Button>
+      <Button v-if="false">
+        {{ t('menuLabels.publish') }}
+      </Button>
     </section>
     <div
-      class="border gap-2 md:h-full border-[var(--interface-stroke)] bg-comfy-menu-bg flex flex-col px-2"
+      class="flex flex-col gap-2 border border-[var(--interface-stroke)] bg-comfy-menu-bg px-2 md:h-full"
     >
       <section
         data-testid="linear-widgets"
@@ -237,9 +245,9 @@ defineExpose({ runButtonClick })
               :node-data
               :class="
                 cn(
-                  'py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg',
+                  'gap-y-3 rounded-lg py-3 not-has-[textarea]:flex-0 **:[.col-span-2]:grid-cols-1',
                   nodeData.hasErrors &&
-                    'ring-2 ring-inset ring-node-stroke-error'
+                    'ring-2 ring-node-stroke-error ring-inset'
                 )
               "
               :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
@@ -250,18 +258,21 @@ defineExpose({ runButtonClick })
       <section
         v-if="!mobile"
         data-testid="linear-run-button"
-        class="p-4 pb-6 border-t border-node-component-border"
+        class="border-t border-node-component-border p-4 pb-6"
       >
         <WidgetInputNumberInput
           v-model="batchCount"
           :widget="batchCountWidget"
-          class="*:[.min-w-0]:w-24 grid-cols-[auto_96px]!"
+          class="grid-cols-[auto_96px]! *:[.min-w-0]:w-24"
         />
         <SubscribeToRunButton
           v-if="!isActiveSubscription"
-          class="w-full mt-4"
+          class="mt-4 w-full"
         />
-        <div v-else class="flex mt-4 gap-2">
+        <div
+          v-else
+          class="mt-4 flex gap-2"
+        >
           <Button
             variant="primary"
             class="grow-1"
@@ -290,19 +301,26 @@ defineExpose({ runButtonClick })
     :to="toastTo"
   >
     <div
-      class="bg-base-foreground text-base-background rounded-sm flex h-8 p-1 pr-2 gap-2 items-center"
+      class="flex h-8 items-center gap-2 rounded-sm bg-base-foreground p-1 pr-2 text-base-background"
     >
       <i
         v-if="jobFinishedQueue"
         class="icon-[lucide--check] size-5 bg-success-background"
       />
-      <i v-else class="icon-[lucide--loader-circle] size-4 animate-spin" />
+      <i
+        v-else
+        class="icon-[lucide--loader-circle] size-4 animate-spin"
+      />
       <span v-text="t('queue.jobAddedToQueue')" />
     </div>
   </Teleport>
-  <Teleport v-if="false" defer :to="notesTo">
+  <Teleport
+    v-if="false"
+    defer
+    :to="notesTo"
+  >
     <div
-      class="bg-base-background text-muted-foreground flex flex-col w-90 gap-2 rounded-2xl border-1 border-border-subtle py-3"
-    ></div>
+      class="flex w-90 flex-col gap-2 rounded-2xl border-1 border-border-subtle bg-base-background py-3 text-muted-foreground"
+    />
   </Teleport>
 </template>
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index 4dacf93a7..1e2ebcb47 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -99,7 +99,7 @@ async function rerun(e: Event) {
   <section
     v-if="selectedItem"
     data-testid="linear-output-info"
-    class="flex flex-wrap gap-2 p-1 w-full md:z-10 tabular-nums justify-between text-sm"
+    class="flex w-full flex-wrap justify-between gap-2 p-1 text-sm tabular-nums md:z-10"
   >
     <div class="flex gap-3 text-nowrap">
       <div
@@ -107,20 +107,29 @@ async function rerun(e: Event) {
         :key="index"
         class="flex items-center justify-items-center gap-1 tabular-nums"
       >
-        <i v-if="iconClass" :class="iconClass" />
+        <i
+          v-if="iconClass"
+          :class="iconClass"
+        />
         {{ content }}
       </div>
     </div>
     <div class="flex gap-3 justify-self-end">
-      <Button size="md" @click="rerun">
+      <Button
+        size="md"
+        @click="rerun"
+      >
         {{ t('linearMode.rerun') }}
         <i class="icon-[lucide--refresh-cw]" />
       </Button>
-      <Button size="md" @click="() => loadWorkflow(selectedItem)">
+      <Button
+        size="md"
+        @click="() => loadWorkflow(selectedItem)"
+      >
         {{ t('linearMode.reuseParameters') }}
         <i class="icon-[lucide--list-restart]" />
       </Button>
-      <div class="border-r border-border-subtle mx-1" />
+      <div class="mx-1 border-r border-border-subtle" />
       <Button
         size="icon"
         @click="
@@ -159,17 +168,17 @@ async function rerun(e: Event) {
   <VideoPreview
     v-else-if="getMediaType(selectedOutput) === 'video'"
     :src="selectedOutput!.url"
-    class="object-contain flex-1 md:contain-size"
+    class="flex-1 object-contain md:contain-size"
   />
   <audio
     v-else-if="getMediaType(selectedOutput) === 'audio'"
-    class="w-full m-auto"
+    class="m-auto w-full"
     controls
     :src="selectedOutput!.url"
   />
   <article
     v-else-if="getMediaType(selectedOutput) === 'text'"
-    class="w-full max-w-128 m-auto my-12 overflow-y-auto"
+    class="m-auto my-12 w-full max-w-128 overflow-y-auto"
     v-text="selectedOutput!.url"
   />
   <Preview3d
@@ -178,7 +187,7 @@ async function rerun(e: Event) {
   />
   <img
     v-else
-    class="pointer-events-none flex-1 max-h-full md:contain-size brightness-50 opacity-10"
+    class="pointer-events-none max-h-full flex-1 opacity-10 brightness-50 md:contain-size"
     src="/assets/images/comfy-logo-mono.svg"
-  />
+  >
 </template>
diff --git a/src/renderer/extensions/linearMode/OutputHistory.vue b/src/renderer/extensions/linearMode/OutputHistory.vue
index c5948ecfa..60b6aa5ce 100644
--- a/src/renderer/extensions/linearMode/OutputHistory.vue
+++ b/src/renderer/extensions/linearMode/OutputHistory.vue
@@ -188,7 +188,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
   <div
     :class="
       cn(
-        'min-w-38 flex bg-comfy-menu-bg md:h-full border-border-subtle',
+        'flex min-w-38 border-border-subtle bg-comfy-menu-bg md:h-full',
         settingStore.get('Comfy.Sidebar.Location') === 'right'
           ? 'flex-row-reverse border-l'
           : 'md:border-r'
@@ -198,7 +198,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
   >
     <div
       v-if="!mobile"
-      class="h-full flex flex-col w-14 shrink-0 overflow-hidden items-center p-2"
+      class="flex h-full w-14 shrink-0 flex-col items-center overflow-hidden p-2"
     >
       <template v-if="workflowTab">
         <SidebarIcon
@@ -217,46 +217,58 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
       <ModeToggle />
     </div>
     <div class="border-border-subtle md:border-r" />
-    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50 grow-1" />
+    <WorkflowsSidebarTab
+      v-if="displayWorkflows"
+      class="min-w-50 grow-1"
+    />
     <article
       v-else
       ref="outputsRef"
       data-testid="linear-outputs"
-      class="h-24 md:h-full min-w-24 grow-1 p-3 overflow-x-auto overflow-y-clip md:overflow-y-auto md:overflow-x-clip md:border-r-1 border-node-component-border flex md:flex-col items-center contain-size"
+      class="flex h-24 min-w-24 grow-1 items-center overflow-x-auto overflow-y-clip border-node-component-border p-3 contain-size md:h-full md:flex-col md:overflow-x-clip md:overflow-y-auto md:border-r-1"
     >
       <section
         v-if="
           queueStore.runningTasks.length > 0 ||
-          queueStore.pendingTasks.length > 0
+            queueStore.pendingTasks.length > 0
         "
         data-testid="linear-job"
-        class="py-3 not-md:h-24 md:w-full aspect-square px-1 relative"
+        class="relative aspect-square px-1 py-3 not-md:h-24 md:w-full"
       >
         <i
           v-if="queueStore.runningTasks.length > 0"
           class="icon-[lucide--loader-circle] size-full animate-spin"
         />
-        <i v-else class="icon-[lucide--ellipsis] size-full animate-pulse" />
+        <i
+          v-else
+          class="icon-[lucide--ellipsis] size-full animate-pulse"
+        />
         <div
           v-if="
             queueStore.runningTasks.length + queueStore.pendingTasks.length > 1
           "
-          class="absolute top-0 right-0 p-1 min-w-5 h-5 flex justify-center items-center rounded-full bg-primary-background text-text-primary"
+          class="absolute top-0 right-0 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary-background p-1 text-text-primary"
           v-text="
             queueStore.runningTasks.length + queueStore.pendingTasks.length
           "
         />
       </section>
-      <template v-for="(item, index) in outputs.media.value" :key="index">
+      <template
+        v-for="(item, index) in outputs.media.value"
+        :key="index"
+      >
         <div
-          class="border-border-subtle not-md:border-l md:border-t first:border-none not-md:h-21 md:w-full m-3"
+          class="m-3 border-border-subtle not-md:h-21 not-md:border-l first:border-none md:w-full md:border-t"
         />
-        <template v-for="(output, key) in allOutputs(item)" :key>
+        <template
+          v-for="(output, key) in allOutputs(item)"
+          :key
+        >
           <img
             v-if="getMediaType(output) === 'images'"
             :class="
               cn(
-                'p-1 rounded-lg aspect-square object-cover not-md:h-20 md:w-full',
+                'aspect-square rounded-lg object-cover p-1 not-md:h-20 md:w-full',
                 index === selectedIndex[0] &&
                   key === selectedIndex[1] &&
                   'border-2'
@@ -264,12 +276,12 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             "
             :src="output.url"
             @click="selectedIndex = [index, key]"
-          />
+          >
           <div
             v-else
             :class="
               cn(
-                'p-1 rounded-lg aspect-square w-full',
+                'aspect-square w-full rounded-lg p-1',
                 index === selectedIndex[0] &&
                   key === selectedIndex[1] &&
                   'border-2'
@@ -294,7 +306,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
     <Button
       :class="
         cn(
-          'p-3 size-10 bg-base-foreground',
+          'size-10 bg-base-foreground p-3',
           settingStore.get('Comfy.Sidebar.Location') === 'left'
             ? 'left-4'
             : 'right-4'
diff --git a/src/renderer/extensions/linearMode/Preview3d.vue b/src/renderer/extensions/linearMode/Preview3d.vue
index 25e4c355e..baca593b2 100644
--- a/src/renderer/extensions/linearMode/Preview3d.vue
+++ b/src/renderer/extensions/linearMode/Preview3d.vue
@@ -23,7 +23,7 @@ watch([containerRef, () => modelUrl], async () => {
 <template>
   <div
     ref="containerRef"
-    class="relative w-full h-full"
+    class="relative h-full w-full"
     @mouseenter="viewer.handleMouseEnter"
     @mouseleave="viewer.handleMouseLeave"
     @resize="viewer.handleResize"
diff --git a/src/renderer/extensions/linearMode/VideoPreview.vue b/src/renderer/extensions/linearMode/VideoPreview.vue
index 57504fc25..b85eed76c 100644
--- a/src/renderer/extensions/linearMode/VideoPreview.vue
+++ b/src/renderer/extensions/linearMode/VideoPreview.vue
@@ -23,5 +23,8 @@ const height = ref('')
       }
     "
   />
-  <span class="self-center z-10" v-text="`${width} x ${height}`" />
+  <span
+    class="z-10 self-center"
+    v-text="`${width} x ${height}`"
+  />
 </template>
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index cd34ee308..a04270196 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -21,7 +21,7 @@
       <div
         v-if="videoError"
         role="alert"
-        class="flex size-full flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
+        class="flex size-full flex-col items-center justify-center bg-muted-background py-8 text-center text-base-foreground"
       >
         <i
           class="mb-2 icon-[lucide--video-off] h-12 w-12 text-base-foreground"
@@ -103,10 +103,16 @@
 
     <!-- Video Dimensions -->
     <div class="mt-2 text-center text-xs text-muted-foreground">
-      <span v-if="videoError" class="text-red-400">
+      <span
+        v-if="videoError"
+        class="text-red-400"
+      >
         {{ $t('g.errorLoadingVideo') }}
       </span>
-      <span v-else-if="showLoader" class="text-smoke-400">
+      <span
+        v-else-if="showLoader"
+        class="text-smoke-400"
+      >
         {{ $t('g.loading') }}...
       </span>
       <span v-else>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index a8b0908c1..28b0084e4 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -1,13 +1,13 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
+    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col justify-center px-2"
     @keydown="handleKeyDown"
   >
     <!-- Image Wrapper -->
     <div
       ref="imageWrapperEl"
-      class="h-full w-full overflow-hidden rounded-[5px] bg-muted-background relative"
+      class="relative h-full w-full overflow-hidden rounded-[5px] bg-muted-background"
       tabindex="0"
       role="img"
       :aria-label="$t('g.imagePreview')"
@@ -21,7 +21,7 @@
       <div
         v-if="imageError"
         role="alert"
-        class="flex size-full flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
+        class="flex size-full flex-col items-center justify-center bg-muted-background py-8 text-center text-base-foreground"
       >
         <i
           class="mb-2 icon-[lucide--image-off] h-12 w-12 text-base-foreground"
@@ -34,8 +34,15 @@
         </p>
       </div>
       <!-- Loading State -->
-      <div v-if="showLoader && !imageError" class="size-full">
-        <Skeleton border-radius="5px" width="100%" height="100%" />
+      <div
+        v-if="showLoader && !imageError"
+        class="size-full"
+      >
+        <Skeleton
+          border-radius="5px"
+          width="100%"
+          height="100%"
+        />
       </div>
       <!-- Main Image -->
       <img
@@ -43,10 +50,10 @@
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="block size-full object-contain pointer-events-none"
+        class="pointer-events-none block size-full object-contain"
         @load="handleImageLoad"
         @error="handleImageError"
-      />
+      >
 
       <!-- Floating Action Buttons (appear on hover and focus) -->
       <div
@@ -88,10 +95,16 @@
 
     <!-- Image Dimensions -->
     <div class="pt-2 text-center text-xs text-base-foreground">
-      <span v-if="imageError" class="text-red-400">
+      <span
+        v-if="imageError"
+        class="text-red-400"
+      >
         {{ $t('g.errorLoadingImage') }}
       </span>
-      <span v-else-if="showLoader" class="text-base-foreground">
+      <span
+        v-else-if="showLoader"
+        class="text-base-foreground"
+      >
         {{ $t('g.loading') }}...
       </span>
       <span v-else>
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 61c4dd35a..1f8b9250d 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -1,11 +1,16 @@
 <template>
-  <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
+  <div
+    v-if="renderError"
+    class="node-error p-1 text-xs text-red-500"
+  >
+    ⚠️
+  </div>
   <div
     v-else
     v-tooltip.left="tooltipConfig"
     :class="
       cn(
-        'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
+        'lg-slot lg-slot--input group m-0 flex items-center rounded-r-lg',
         'cursor-crosshair',
         props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
         {
@@ -22,9 +27,9 @@
       ref="connectionDotRef"
       :class="
         cn(
-          '-translate-x-1/2 w-3',
+          'w-3 -translate-x-1/2',
           hasSlotError &&
-            'before:ring-2 before:ring-error before:ring-offset-0 before:size-4 before:absolute before:rounded-full before:pointer-events-none'
+            'before:pointer-events-none before:absolute before:size-4 before:rounded-full before:ring-2 before:ring-error before:ring-offset-0'
         )
       "
       :slot-data
@@ -34,21 +39,21 @@
     />
 
     <!-- Slot Name -->
-    <div class="h-full flex items-center min-w-0">
+    <div class="flex h-full min-w-0 items-center">
       <span
         v-if="!dotOnly"
         :class="
           cn(
             'truncate text-node-component-slot-text',
-            hasSlotError && 'text-error font-medium'
+            hasSlotError && 'font-medium text-error'
           )
         "
       >
         {{
           slotData.label ||
-          slotData.localized_name ||
-          slotData.name ||
-          `Input ${index}`
+            slotData.localized_name ||
+            slotData.name ||
+            `Input ${index}`
         }}
       </span>
     </div>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index b990c957a..127674379 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
+  <div
+    v-if="renderError"
+    class="node-error p-2 text-sm text-red-500"
+  >
     {{ st('nodeErrors.render', 'Node Render Error') }}
   </div>
   <div
@@ -9,30 +12,30 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-component-node-background lg-node absolute text-sm',
-        'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
+        'lg-node absolute bg-component-node-background text-sm',
+        'min-h-(--node-height) w-(--node-width) min-w-[225px] contain-layout contain-style',
         shapeClass,
-        'touch-none flex flex-col',
+        'flex touch-none flex-col',
         'border-1 border-solid border-component-node-border',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
-          'hover:ring-7 ring-node-component-ring',
-        'outline-transparent outline-2 focus-visible:outline-node-component-outline',
+          'ring-node-component-ring hover:ring-7',
+        'outline-2 outline-transparent focus-visible:outline-node-component-outline',
         borderClass,
         outlineClass,
         cursorClass,
         {
-          [`${beforeShapeClass} before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0`]:
+          [`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0 before:bg-bypass/60`]:
             bypassed,
           [`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0`]:
             muted,
-          'ring-4 ring-primary-500 bg-primary-500/10': isDraggingOver
+          'bg-primary-500/10 ring-4 ring-primary-500': isDraggingOver
         },
 
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none',
-        !isCollapsed && ' pb-1'
+        !isCollapsed && 'pb-1'
       )
     "
     :style="[
@@ -53,7 +56,7 @@
   >
     <div
       v-if="displayHeader"
-      class="flex flex-col justify-center items-center relative"
+      class="relative flex flex-col items-center justify-center"
     >
       <template v-if="isCollapsed">
         <SlotConnectionDot
@@ -66,7 +69,10 @@
           multi
           class="absolute right-0 translate-x-1/2"
         />
-        <NodeSlots :node-data="nodeData" unified />
+        <NodeSlots
+          :node-data="nodeData"
+          unified
+        />
       </template>
       <NodeHeader
         :node-data="nodeData"
@@ -110,24 +116,39 @@
       >
         <NodeSlots :node-data="nodeData" />
 
-        <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
+        <NodeWidgets
+          v-if="nodeData.widgets?.length"
+          :node-data="nodeData"
+        />
 
-        <div v-if="hasCustomContent" class="min-h-0 flex-1 flex">
-          <NodeContent :node-data="nodeData" :media="nodeMedia" />
+        <div
+          v-if="hasCustomContent"
+          class="flex min-h-0 flex-1"
+        >
+          <NodeContent
+            :node-data="nodeData"
+            :media="nodeMedia"
+          />
         </div>
         <!-- Live mid-execution preview images -->
-        <div v-if="shouldShowPreviewImg" class="min-h-0 flex-1 px-4">
+        <div
+          v-if="shouldShowPreviewImg"
+          class="min-h-0 flex-1 px-4"
+        >
           <LivePreview :image-url="latestPreviewUrl || null" />
         </div>
 
         <!-- Show advanced inputs button for subgraph nodes -->
-        <div v-if="showAdvancedInputsButton" class="flex justify-center px-3">
+        <div
+          v-if="showAdvancedInputsButton"
+          class="flex justify-center px-3"
+        >
           <button
             :class="
               cn(
                 WidgetInputBaseClass,
-                'w-full h-7 flex justify-center items-center gap-2 text-sm px-3 outline-0 ring-0 truncate',
-                'transition-all cursor-pointer hover:bg-accent-background duration-150 active:scale-95'
+                'flex h-7 w-full items-center justify-center gap-2 truncate px-3 text-sm ring-0 outline-0',
+                'cursor-pointer transition-all duration-150 hover:bg-accent-background active:scale-95'
               )
             "
             @click.stop="handleShowAdvancedInputs"
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index da7423850..150aff09c 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -3,18 +3,18 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-component-node-background lg-node pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke',
+        'lg-node flex w-[350px] touch-none flex-col rounded-2xl border-1 border-solid border-node-stroke bg-component-node-background pb-1 outline-2 outline-transparent contain-layout contain-style',
         position
       )
     "
   >
     <div
-      class="flex flex-col justify-center items-center relative pointer-events-none"
+      class="pointer-events-none relative flex flex-col items-center justify-center"
     >
       <NodeHeader :node-data="nodeData" />
     </div>
     <div
-      class="flex flex-1 flex-col gap-1 pb-2 pointer-events-none"
+      class="pointer-events-none flex flex-1 flex-col gap-1 pb-2"
       :data-testid="`node-body-${nodeData.id}`"
     >
       <NodeSlots :node-data="nodeData" />
diff --git a/src/renderer/extensions/vueNodes/components/NodeBadge.vue b/src/renderer/extensions/vueNodes/components/NodeBadge.vue
index 064eac26d..7823a3cff 100644
--- a/src/renderer/extensions/vueNodes/components/NodeBadge.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeBadge.vue
@@ -1,14 +1,17 @@
 <template>
   <div
     v-if="text"
-    class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
+    class="flex min-w-max items-center gap-1 rounded-sm bg-node-component-surface px-1 py-0.5 text-xs"
     :style="{
       color: fgColor,
       backgroundColor: bgColor
     }"
   >
     {{ text }}
-    <i v-if="cssIcon" :class="cn(cssIcon)" />
+    <i
+      v-if="cssIcon"
+      :class="cn(cssIcon)"
+    />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 0f24cf873..864a5791e 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -1,13 +1,16 @@
 <template>
-  <div v-if="renderError" class="node-error p-4 text-red-500">
+  <div
+    v-if="renderError"
+    class="node-error p-4 text-red-500"
+  >
     {{ st('nodeErrors.header', 'Node Header Error') }}
   </div>
   <div
     v-else
     :class="
       cn(
-        'lg-node-header text-sm py-2 pl-2 pr-3 w-full min-w-0',
-        'text-node-component-header bg-node-component-header-surface',
+        'lg-node-header w-full min-w-0 py-2 pr-3 pl-2 text-sm',
+        'bg-node-component-header-surface text-node-component-header',
         headerShapeClass
       )
     "
@@ -18,9 +21,9 @@
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
-    <div class="flex items-center justify-between gap-2.5 min-w-0">
+    <div class="flex min-w-0 items-center justify-between gap-2.5">
       <!-- Collapse/Expand Button -->
-      <div class="relative grow-1 flex items-center gap-2.5 min-w-0 flex-1">
+      <div class="relative flex min-w-0 flex-1 grow-1 items-center gap-2.5">
         <div class="flex shrink-0 items-center px-0.5">
           <Button
             size="icon-sm"
@@ -42,8 +45,14 @@
           </Button>
         </div>
 
-        <div v-if="isSubgraphNode" class="icon-[comfy--workflow] size-4" />
-        <div v-if="isApiNode" class="icon-[lucide--component] size-4" />
+        <div
+          v-if="isSubgraphNode"
+          class="icon-[comfy--workflow] size-4"
+        />
+        <div
+          v-if="isApiNode"
+          class="icon-[lucide--component] size-4"
+        />
 
         <!-- Node Title -->
         <div
@@ -51,7 +60,7 @@
           class="flex min-w-0 flex-1 items-center gap-2"
           data-testid="node-title"
         >
-          <div class="truncate min-w-0 flex-1">
+          <div class="min-w-0 flex-1 truncate">
             <EditableText
               :model-value="displayTitle"
               :is-editing="isEditing"
@@ -69,7 +78,10 @@
           :key="badge.text"
           v-bind="badge"
         />
-        <NodeBadge v-if="statusBadge" v-bind="statusBadge" />
+        <NodeBadge
+          v-if="statusBadge"
+          v-bind="statusBadge"
+        />
         <i-comfy:pin
           v-if="isPinned"
           class="size-5"
@@ -81,7 +93,7 @@
           variant="textonly"
           size="sm"
           data-testid="subgraph-enter-button"
-          class="text-node-component-header h-5 px-0.5"
+          class="h-5 px-0.5 text-node-component-header"
           @click.stop="handleEnterSubgraph"
           @dblclick.stop
         >
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 106ba5613..39b93d479 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -1,11 +1,17 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
+  <div
+    v-if="renderError"
+    class="node-error p-2 text-sm text-red-500"
+  >
     {{ st('nodeErrors.slots', 'Node Slots Error') }}
   </div>
-  <div v-else :class="cn('flex justify-between min-w-0', unifiedWrapperClass)">
+  <div
+    v-else
+    :class="cn('flex min-w-0 justify-between', unifiedWrapperClass)"
+  >
     <div
       v-if="filteredInputs.length"
-      :class="cn('flex flex-col min-w-0', unifiedDotsClass)"
+      :class="cn('flex min-w-0 flex-col', unifiedDotsClass)"
     >
       <InputSlot
         v-for="(input, index) in filteredInputs"
@@ -19,7 +25,7 @@
 
     <div
       v-if="nodeData?.outputs?.length"
-      :class="cn('ml-auto flex flex-col min-w-0', unifiedDotsClass)"
+      :class="cn('ml-auto flex min-w-0 flex-col', unifiedDotsClass)"
     >
       <OutputSlot
         v-for="(output, index) in nodeData.outputs"
@@ -68,13 +74,13 @@ const filteredInputs = computed(() => [
 const unifiedWrapperClass = computed((): string =>
   cn(
     unified &&
-      'absolute inset-0 items-center pointer-events-none opacity-0 z-30'
+      'pointer-events-none absolute inset-0 z-30 items-center opacity-0'
   )
 )
 const unifiedDotsClass = computed((): string =>
   cn(
     unified &&
-      'grid grid-cols-1 grid-rows-1 gap-0 [&>*]:row-span-full [&>*]:col-span-full place-items-center'
+      'grid grid-cols-1 grid-rows-1 place-items-center gap-0 [&>*]:col-span-full [&>*]:row-span-full'
   )
 )
 
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 9975ec864..05d1f7891 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -1,12 +1,15 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
+  <div
+    v-if="renderError"
+    class="node-error p-2 text-sm text-red-500"
+  >
     {{ st('nodeErrors.widgets', 'Node Widgets Error') }}
   </div>
   <div
     v-else
     :class="
       cn(
-        'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] flex-1 gap-y-1 pr-3',
+        'lg-node-widgets grid flex-1 grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] gap-y-1 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
@@ -32,7 +35,7 @@
         <div
           :class="
             cn(
-              'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-stretch',
+              'z-10 flex w-3 items-stretch opacity-0 transition-opacity duration-150 group-hover:opacity-100',
               widget.slotMetadata?.linked && 'opacity-100'
             )
           "
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 9a7506130..8098f6fae 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -1,9 +1,21 @@
 <template>
-  <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
-  <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
-    <div class="relative h-full flex items-center min-w-0">
+  <div
+    v-if="renderError"
+    class="node-error p-1 text-xs text-red-500"
+  >
+    ⚠️
+  </div>
+  <div
+    v-else
+    v-tooltip.right="tooltipConfig"
+    :class="slotWrapperClass"
+  >
+    <div class="relative flex h-full min-w-0 items-center">
       <!-- Slot Name -->
-      <span v-if="!dotOnly" class="truncate text-node-component-slot-text">
+      <span
+        v-if="!dotOnly"
+        class="truncate text-node-component-slot-text"
+      >
         {{ slotData.localized_name || slotData.name || `Output ${index}` }}
       </span>
     </div>
@@ -77,7 +89,7 @@ const shouldDim = computed(() => {
 
 const slotWrapperClass = computed(() =>
   cn(
-    'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
+    'lg-slot lg-slot--output group flex h-6 items-center justify-end rounded-l-lg',
     'cursor-crosshair',
     props.dotOnly ? 'lg-slot--dot-only justify-center' : 'pl-6',
     {
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index 3921128b0..87d399a37 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -32,12 +32,12 @@ defineExpose({
 
 const slotClass = computed(() =>
   cn(
-    'bg-slate-300 rounded-full slot-dot',
+    'slot-dot rounded-full bg-slate-300',
     'transition-all duration-150',
     'border border-solid border-node-component-slot-dot-outline',
     props.multi
-      ? 'w-3 h-6'
-      : 'size-3 cursor-crosshair group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125'
+      ? 'h-6 w-3'
+      : 'size-3 cursor-crosshair group-hover/slot:scale-125 group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5]'
   )
 )
 </script>
@@ -46,7 +46,7 @@ const slotClass = computed(() =>
   <div
     :class="
       cn(
-        'after:absolute after:inset-y-0 after:w-5/2 relative size-6 flex items-center justify-center group/slot',
+        'group/slot relative flex size-6 items-center justify-center after:absolute after:inset-y-0 after:w-5/2',
         props.class
       )
     "
@@ -71,7 +71,10 @@ const slotClass = computed(() =>
         v-if="types.length === 2"
         class="size-full -translate-y-1/2"
       />
-      <i-comfy:node-slot3 v-else class="size-full -translate-y-1/2" />
+      <i-comfy:node-slot3
+        v-else
+        class="size-full -translate-y-1/2"
+      />
     </div>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
index f81844f94..70d195d95 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
@@ -170,7 +170,7 @@ export function useNodeTooltips(nodeType: MaybeRef<string>) {
           class: cn(
             context.top && 'border-t-node-component-tooltip-border',
             context.bottom && 'border-b-node-component-tooltip-border',
-            context.left && 'border-l-node-component-tooltip-border ',
+            context.left && 'border-l-node-component-tooltip-border',
             context.right && 'border-r-node-component-tooltip-border'
           )
         })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
index 095d64aba..7326bba6a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
@@ -59,12 +59,12 @@ const controlMode = defineModel<ControlOptions>()
 <template>
   <Popover
     ref="popover"
-    class="bg-interface-panel-surface border border-interface-stroke rounded-lg"
+    class="rounded-lg border border-interface-stroke bg-interface-panel-surface"
   >
-    <div class="w-113 max-w-md p-4 space-y-4">
-      <div class="text-sm text-muted-foreground leading-tight">
+    <div class="w-113 max-w-md space-y-4 p-4">
+      <div class="text-sm leading-tight text-muted-foreground">
         {{ $t('widgets.valueControl.header.prefix') }}
-        <span class="text-base-foreground font-medium">
+        <span class="font-medium text-base-foreground">
           {{
             widgetControlMode === 'before'
               ? $t('widgets.valueControl.header.before')
@@ -78,11 +78,11 @@ const controlMode = defineModel<ControlOptions>()
         <div
           v-for="option in controlOptions"
           :key="option.mode"
-          class="flex items-center justify-between py-2 gap-7"
+          class="flex items-center justify-between gap-7 py-2"
         >
-          <div class="flex items-center gap-2 flex-1 min-w-0">
+          <div class="flex min-w-0 flex-1 items-center gap-2">
             <div
-              class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
+              class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-secondary-background"
             >
               <i
                 v-if="option.icon"
@@ -97,16 +97,16 @@ const controlMode = defineModel<ControlOptions>()
               </span>
             </div>
 
-            <div class="flex flex-col gap-0.5 min-w-0 flex-1">
+            <div class="flex min-w-0 flex-1 flex-col gap-0.5">
               <div
-                class="text-sm font-normal text-base-foreground leading-tight"
+                class="text-sm leading-tight font-normal text-base-foreground"
               >
                 <span>
                   {{ $t(`widgets.valueControl.${option.title}`) }}
                 </span>
               </div>
               <div
-                class="text-sm font-normal text-muted-foreground leading-tight"
+                class="text-sm leading-tight font-normal text-muted-foreground"
               >
                 {{ $t(`widgets.valueControl.${option.description}`) }}
               </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
index 7b46670d2..a32cbcaf0 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
@@ -1,8 +1,12 @@
 <template>
   <div
-    class="w-full col-span-2 widget-expands grid grid-cols-[minmax(80px,max-content)_minmax(125px,auto)] gap-y-3 p-3"
+    class="widget-expands col-span-2 grid w-full grid-cols-[minmax(80px,max-content)_minmax(125px,auto)] gap-y-3 p-3"
   >
-    <WidgetSelect v-model="modelValue" :widget class="col-span-2" />
+    <WidgetSelect
+      v-model="modelValue"
+      :widget
+      class="col-span-2"
+    />
     <AudioPreviewPlayer
       class="col-span-2"
       :audio-url="audioUrlFromWidget"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 8609202f4..5f4342dbf 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
-      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
+      class="w-full border-0 bg-component-node-widget-background p-2 text-base-foreground"
       :aria-label="widget.label"
       size="sm"
       variant="textonly"
@@ -9,7 +9,10 @@
       @click="handleClick"
     >
       {{ widget.label ?? widget.name }}
-      <i v-if="widget.options?.iconClass" :class="widget.options.iconClass" />
+      <i
+        v-if="widget.options?.iconClass"
+        :class="widget.options.iconClass"
+      />
     </Button>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index b87f6b616..93b62f1ee 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -3,7 +3,7 @@
   <WidgetLayoutField :widget="widget">
     <label
       :class="
-        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
+        cn(WidgetInputBaseClass, 'flex w-full items-center gap-2 px-4 py-2')
       "
     >
       <ColorPicker
@@ -17,10 +17,9 @@
         @update:model-value="onPickerUpdate"
       />
       <span
-        class="text-xs truncate min-w-[4ch]"
+        class="min-w-[4ch] truncate text-xs"
         data-testid="widget-color-text"
-        >{{ toHexFromFormat(localValue, format) }}</span
-      >
+      >{{ toHexFromFormat(localValue, format) }}</span>
     </label>
   </WidgetLayoutField>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index d14dd2167..978abc756 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -199,10 +199,10 @@ const sliderWidth = computed(() => {
       v-tooltip="buttonTooltip"
       v-bind="filteredProps"
       :aria-label="widget.name"
-      :class="cn(WidgetInputBaseClass, 'grow text-xs flex h-7 relative')"
+      :class="cn(WidgetInputBaseClass, 'relative flex h-7 grow text-xs')"
     >
       <div
-        class="bg-primary-background/15 absolute left-0 bottom-0 h-full rounded-lg pointer-events-none"
+        class="pointer-events-none absolute bottom-0 left-0 h-full rounded-lg bg-primary-background/15"
         :style="{ width: `${sliderWidth}%` }"
       />
       <button
@@ -215,7 +215,7 @@ const sliderWidth = computed(() => {
         tabindex="-1"
         @click="modelValue -= stepValue"
       />
-      <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"
           :aria-valuenow="dragValue ?? modelValue"
@@ -223,7 +223,7 @@ const sliderWidth = computed(() => {
           :aria-valuemax="filteredProps.max"
           :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"
@@ -241,12 +241,12 @@ const sliderWidth = computed(() => {
           @keydown.page-up.prevent="updateValueBy(10 * stepValue)"
           @keydown.page-down.prevent="updateValueBy(-10 * stepValue)"
           @dragstart.prevent
-        />
+        >
         <div
           :class="
             cn(
               'absolute inset-0 z-10 cursor-ew-resize',
-              textEdit && 'hidden pointer-events-none'
+              textEdit && 'pointer-events-none hidden'
             )
           "
           @pointerdown="handleMouseDown"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index a7f146355..ecca083ca 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -1,6 +1,6 @@
 <template>
   <WidgetLayoutField :widget="widget">
-    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')">
+    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
       <Slider
         :model-value="[modelValue]"
         v-bind="filteredProps"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index eff22f1ef..d2bf12cb1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -3,7 +3,7 @@
     <InputText
       v-model="modelValue"
       v-bind="filteredProps"
-      :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
+      :class="cn(WidgetInputBaseClass, 'w-full px-4 py-2 text-xs')"
       :aria-label="widget.name"
       size="small"
       :pt="{ root: 'truncate min-w-[4ch]' }"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 6e392d8e0..545bd37ab 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div class="mb-4">
       <Button
-        class="text-base-foreground w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
+        class="w-full border-0 bg-secondary-background text-base-foreground hover:bg-secondary-background-hover"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg px-3 bg-node-component-surface text-text-secondary"
+      class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg bg-node-component-surface px-3 text-text-secondary"
     >
       <!-- Recording Status -->
       <div class="flex shrink-0 items-center gap-1">
@@ -45,7 +45,7 @@
       <button
         v-if="isRecording"
         :title="t('g.stopRecording', 'Stop Recording')"
-        class="flex shrink-0 size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex size-8 shrink-0 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopRecording"
       >
         <div class="size-2.5 rounded-sm bg-danger-100" />
@@ -54,19 +54,19 @@
       <button
         v-else-if="!isRecording && recordedURL && !isPlaying"
         :title="t('g.playRecording') || 'Play Recording'"
-        class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handlePlayRecording"
       >
-        <i class="text-text-secondary icon-[lucide--play] size-4" />
+        <i class="icon-[lucide--play] size-4 text-text-secondary" />
       </button>
 
       <button
         v-else-if="isPlaying"
         :title="t('g.stopPlayback') || 'Stop Playback'"
-        class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopPlayback"
       >
-        <i class="text-text-secondary icon-[lucide--square] size-4" />
+        <i class="icon-[lucide--square] size-4 text-text-secondary" />
       </button>
     </div>
     <audio
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 93428aab5..eb8b92793 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
@@ -18,7 +18,7 @@
       }"
       data-capture-wheel="true"
     />
-    <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5 flex">
+    <div class="absolute top-5 right-8 flex h-4 w-7 -translate-y-4/5">
       <slot />
     </div>
   </WidgetLayoutField>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 25876f539..6ddda1508 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -3,7 +3,7 @@
     variant="in"
     :class="
       cn(
-        'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+        'space-y-1 rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
         widget.borderStyle
       )
     "
@@ -12,7 +12,7 @@
       v-bind="filteredProps"
       :id
       v-model="modelValue"
-      :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
+      :class="cn(WidgetInputBaseClass, 'size-full resize-none text-xs')"
       :placeholder
       :readonly="widget.options?.read_only"
       :disabled="widget.options?.read_only"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
index f571d6dad..5a56fe0fc 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
@@ -45,16 +45,24 @@ const togglePopover = (event: Event) => {
 
 <template>
   <div class="relative grid grid-cols-subgrid">
-    <component :is="component" v-bind="$attrs" v-model="modelValue" :widget>
+    <component
+      :is="component"
+      v-bind="$attrs"
+      v-model="modelValue"
+      :widget
+    >
       <Button
         variant="textonly"
         size="sm"
         class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
         @click.stop.prevent="togglePopover"
       >
-        <i :class="`${controlButtonIcon} text-blue-100 text-xs size-3.5`" />
+        <i :class="`${controlButtonIcon} size-3.5 text-xs text-blue-100`" />
       </Button>
     </component>
-    <ValueControlPopover ref="popover" v-model="controlModel" />
+    <ValueControlPopover
+      ref="popover"
+      v-model="controlModel"
+    />
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index bf69add86..bc49ea83b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -4,7 +4,7 @@
       v-if="!hidden"
       :class="
         cn(
-          'bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
+          'relative box-border flex h-16 w-full items-center justify-start gap-4 rounded-lg bg-component-node-widget-background px-4 py-0',
           { hidden: hideWhenEmpty && !hasAudio }
         )
       "
@@ -31,7 +31,10 @@
             v-if="!isPlaying"
             class="text-secondary icon-[lucide--play] size-4"
           />
-          <i v-else class="text-secondary icon-[lucide--pause] size-4" />
+          <i
+            v-else
+            class="text-secondary icon-[lucide--pause] size-4"
+          />
         </div>
 
         <!-- Time Display -->
@@ -55,7 +58,7 @@
           :aria-label="$t('g.audioProgress')"
           class="absolute inset-0 w-full cursor-pointer opacity-0"
           @input="handleSeek"
-        />
+        >
       </div>
 
       <!-- Right Actions -->
@@ -76,7 +79,10 @@
             v-else-if="showVolumeOne"
             class="text-secondary icon-[lucide--volume-1] size-4"
           />
-          <i v-else class="text-secondary icon-[lucide--volume-x] size-4" />
+          <i
+            v-else
+            class="text-secondary icon-[lucide--volume-x] size-4"
+          />
         </div>
 
         <!-- Options Button -->
@@ -104,7 +110,10 @@
         :pt:submenu:class="cn('bg-component-node-widget-background')"
       >
         <template #item="{ item }">
-          <div v-if="item.key === 'volume'" class="w-48 px-4 py-2">
+          <div
+            v-if="item.key === 'volume'"
+            class="w-48 px-4 py-2"
+          >
             <label class="mb-2 block text-xs text-base-foreground">{{
               item.label
             }}</label>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
index da9136799..e7a7f7ae6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
@@ -63,9 +63,9 @@ function handleFocus(event: FocusEvent) {
     :class="
       cn(
         'group',
-        'bg-component-node-widget-background rounded-lg transition-all duration-150',
-        'flex-1 flex items-center',
-        'text-base-foreground border-0',
+        'rounded-lg bg-component-node-widget-background transition-all duration-150',
+        'flex flex-1 items-center',
+        'border-0 text-base-foreground',
         'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80',
         customClass
       )
@@ -74,27 +74,27 @@ function handleFocus(event: FocusEvent) {
     <i
       :class="
         cn(
-          'size-4 ml-2 shrink-0 transition-colors duration-150',
+          'ml-2 size-4 shrink-0 transition-colors duration-150',
           isQuerying
             ? 'icon-[lucide--loader-circle] animate-spin'
             : 'icon-[lucide--search]',
           searchQuery?.trim() !== ''
             ? 'text-base-foreground'
-            : 'text-muted-foreground group-hover:text-base-foreground group-focus-within:text-base-foreground'
+            : 'text-muted-foreground group-focus-within:text-base-foreground group-hover:text-base-foreground'
         )
       "
     />
     <input
       v-model="searchQuery"
       type="text"
-      class="bg-transparent border-0 outline-0 ring-0 h-5 w-full my-1.5 mx-2"
+      class="mx-2 my-1.5 h-5 w-full border-0 bg-transparent ring-0 outline-0"
       :placeholder="$t('g.searchPlaceholder')"
       :autofocus
       @focus="handleFocus"
-    />
+    >
     <button
       v-if="searchQuery.trim().length > 0"
-      class="text-muted-foreground hover:text-base-foreground bg-transparent shrink-0 border-0 outline-0 ring-0 p-0 m-0 pr-3 pl-1 flex items-center justify-center transition-all duration-150 hover:scale-108"
+      class="m-0 flex shrink-0 items-center justify-center border-0 bg-transparent p-0 pr-3 pl-1 text-muted-foreground ring-0 outline-0 transition-all duration-150 hover:scale-108 hover:text-base-foreground"
       :aria-label="$t('g.clear')"
       @click="searchQuery = ''"
     >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index cca84a353..8190c32db 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -3,7 +3,7 @@
     :class="
       cn(
         WidgetInputBaseClass,
-        'p-1 inline-flex justify-center items-center gap-1'
+        'inline-flex items-center justify-center gap-1 p-1'
       )
     "
   >
@@ -12,15 +12,15 @@
       :key="getOptionValue(option, index)"
       :class="
         cn(
-          'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate min-w-[4ch]',
-          'bg-transparent border-none',
+          'flex h-6 min-w-[4ch] flex-1 items-center justify-center gap-1 truncate rounded px-5 py-[5px] transition-all duration-150 ease-in-out',
+          'border-none bg-transparent',
           'text-center text-xs font-normal',
           {
             'bg-interface-menu-component-surface-selected':
               isSelected(index) && !disabled,
             'hover:bg-interface-menu-component-surface-selected/50':
               !isSelected(index) && !disabled,
-            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-not-allowed opacity-50': disabled,
             'cursor-pointer': !disabled
           },
           isSelected(index) && !disabled
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
index 24f89995d..0e1a92d98 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
@@ -33,10 +33,10 @@ const selectedItems = computed(() => {
 
 const theButtonStyle = computed(() =>
   cn(
-    'border-0 bg-component-node-widget-background outline-none text-text-secondary',
+    'border-0 bg-component-node-widget-background text-text-secondary outline-none',
     props.disabled
       ? 'cursor-not-allowed'
-      : 'hover:bg-component-node-widget-background-hovered cursor-pointer',
+      : 'cursor-pointer hover:bg-component-node-widget-background-hovered',
     selectedItems.value.length > 0 && 'text-text-primary'
   )
 )
@@ -46,7 +46,7 @@ const theButtonStyle = computed(() =>
   <div
     :class="
       cn(WidgetInputBaseClass, 'flex text-base leading-none', {
-        'opacity-50 cursor-not-allowed !outline-zinc-300/10': disabled
+        'cursor-not-allowed opacity-50 !outline-zinc-300/10': disabled
       })
     "
   >
@@ -55,7 +55,7 @@ const theButtonStyle = computed(() =>
       :class="
         cn(
           theButtonStyle,
-          'flex justify-between items-center flex-1 min-w-0 h-8',
+          'flex h-8 min-w-0 flex-1 items-center justify-between',
           {
             'rounded-l-lg': uploadable,
             'rounded-lg': !uploadable
@@ -64,7 +64,7 @@ const theButtonStyle = computed(() =>
       "
       @click="emit('select-click', $event)"
     >
-      <span class="min-w-0 flex-1 px-1 py-2 text-left truncate">
+      <span class="min-w-0 flex-1 truncate px-1 py-2 text-left">
         <span v-if="!selectedItems.length">
           {{ placeholder }}
         </span>
@@ -76,7 +76,7 @@ const theButtonStyle = computed(() =>
         class="icon-[lucide--chevron-down]"
         :class="
           cn(
-            'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
+            'mr-2 size-4 flex-shrink-0 text-component-node-foreground-secondary transition-transform duration-200',
             isOpen && 'rotate-180'
           )
         "
@@ -89,7 +89,7 @@ const theButtonStyle = computed(() =>
         cn(
           theButtonStyle,
           'relative',
-          'size-8 flex justify-center items-center border-l rounded-r-lg border-zinc-300/10'
+          'flex size-8 items-center justify-center rounded-r-lg border-l border-zinc-300/10'
         )
       "
     >
@@ -101,7 +101,7 @@ const theButtonStyle = computed(() =>
         :disabled="disabled"
         :accept="accept"
         @change="emit('file-change', $event)"
-      />
+      >
     </label>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index 71ff863dd..3df14a85c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -56,11 +56,11 @@ const searchQuery = defineModel<string>('searchQuery')
       :searcher
     />
     <!-- List -->
-    <div class="relative flex h-full mt-2 overflow-y-scroll">
+    <div class="relative mt-2 flex h-full overflow-y-scroll">
       <div
         :class="
           cn(
-            'h-full max-h-full grid gap-x-2 gap-y-4 overflow-y-auto px-4 pt-4 pb-4 w-full',
+            'grid h-full max-h-full w-full gap-x-2 gap-y-4 overflow-y-auto px-4 pt-4 pb-4',
             {
               'grid-cols-4': layoutMode === 'grid',
               'grid-cols-1 gap-y-2': layoutMode === 'list',
@@ -72,7 +72,7 @@ const searchQuery = defineModel<string>('searchQuery')
         <div class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5" />
         <div
           v-if="items.length === 0"
-          class="h-50 col-span-full flex items-center justify-center"
+          class="col-span-full flex h-50 items-center justify-center"
         >
           <i
             :title="$t('g.noItems')"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index d0766afe2..86c9b2941 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -20,7 +20,7 @@ const searchQuery = defineModel<string>('searchQuery')
 const sortSelected = defineModel<OptionId>('sortSelected')
 
 const actionButtonStyle = cn(
-  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
+  'h-8 rounded-lg bg-zinc-500/20 outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
 )
 
 const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
@@ -57,7 +57,7 @@ function handleSortSelected(item: SortOption) {
         cn(
           actionButtonStyle,
           'hover:outline-component-node-widget-background-highlighted/80',
-          'focus-within:outline-component-node-widget-background-highlighted/80 focus-within:ring-0'
+          'focus-within:ring-0 focus-within:outline-component-node-widget-background-highlighted/80'
         )
       "
     />
@@ -68,7 +68,7 @@ function handleSortSelected(item: SortOption) {
         cn(
           resetInputStyle,
           actionButtonStyle,
-          'relative w-8 flex justify-center items-center cursor-pointer',
+          'relative flex w-8 cursor-pointer items-center justify-center',
           'hover:outline-component-node-widget-background-highlighted',
           'active:!scale-95'
         )
@@ -100,7 +100,7 @@ function handleSortSelected(item: SortOption) {
       <div
         :class="
           cn(
-            'flex flex-col gap-2 p-2 min-w-32',
+            'flex min-w-32 flex-col gap-2 p-2',
             'bg-component-node-background',
             'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
           )
@@ -112,7 +112,7 @@ function handleSortSelected(item: SortOption) {
           :class="
             cn(
               resetInputStyle,
-              'flex justify-between items-center h-6 cursor-pointer',
+              'flex h-6 cursor-pointer items-center justify-between',
               'hover:!text-blue-500'
             )
           "
@@ -132,7 +132,7 @@ function handleSortSelected(item: SortOption) {
       :class="
         cn(
           actionButtonStyle,
-          'flex justify-center items-center p-1 gap-1 hover:outline-component-node-widget-background-highlighted'
+          'flex items-center justify-center gap-1 p-1 hover:outline-component-node-widget-background-highlighted'
         )
       "
     >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index 73819cd50..4cd44a22f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -20,7 +20,7 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
 </script>
 
 <template>
-  <div class="text-secondary mb-4 flex gap-1 px-4 justify-start">
+  <div class="text-secondary mb-4 flex justify-start gap-1 px-4">
     <button
       v-for="option in filterOptions"
       :key="option.id"
@@ -28,9 +28,9 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
       :disabled="singleFilterOption"
       :class="
         cn(
-          'px-4 py-2 rounded-md inline-flex justify-center items-center select-none appearance-none border-0 text-base-foreground',
+          'inline-flex appearance-none items-center justify-center rounded-md border-0 px-4 py-2 text-base-foreground select-none',
           !singleFilterOption &&
-            'transition-all duration-150 hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered cursor-pointer active:scale-95',
+            'cursor-pointer transition-all duration-150 hover:bg-interface-menu-component-surface-hovered hover:text-base-foreground active:scale-95',
           !singleFilterOption && filterSelected === option.id
             ? '!bg-interface-menu-component-surface-selected text-base-foreground'
             : 'bg-transparent'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
index 0ba2161f9..95df2eef9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -57,13 +57,13 @@ function handleVideoLoad(event: Event) {
   <div
     :class="
       cn(
-        'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
+        'group/item flex cursor-pointer gap-1 bg-component-node-widget-background select-none',
         'transition-all duration-150',
         {
           'flex-col text-center': layout === 'grid',
-          'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
+          'max-h-16 flex-row rounded-lg text-left hover:scale-102 active:scale-98':
             layout === 'list',
-          'flex-row text-left hover:bg-component-node-widget-background-hovered rounded-lg':
+          'flex-row rounded-lg text-left hover:bg-component-node-widget-background-hovered':
             layout === 'list-small',
           // selection
           'ring-2 ring-component-node-widget-background-highlighted':
@@ -79,10 +79,10 @@ function handleVideoLoad(event: Event) {
       :class="
         cn(
           'relative',
-          'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
+          'aspect-square w-full overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
           'transition-all duration-150',
           {
-            'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
+            'max-w-16 min-w-16 rounded-l-lg': layout === 'list',
             'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
               layout === 'grid',
             // selection
@@ -98,7 +98,7 @@ function handleVideoLoad(event: Event) {
         class="absolute top-1 left-1 size-4 rounded-full border-1 border-base-foreground bg-primary-background"
       >
         <i
-          class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground bold"
+          class="bold icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground"
         />
       </div>
       <video
@@ -126,8 +126,8 @@ function handleVideoLoad(event: Event) {
       :class="
         cn('flex gap-1', {
           'flex-col': layout === 'grid',
-          'flex-col px-4 py-1 w-full justify-center min-w-0': layout === 'list',
-          'flex-row p-2 items-center justify-between w-full':
+          'w-full min-w-0 flex-col justify-center px-4 py-1': layout === 'list',
+          'w-full flex-row items-center justify-between p-2':
             layout === 'list-small'
         })
       "
@@ -136,7 +136,7 @@ function handleVideoLoad(event: Event) {
         v-tooltip="layout === 'grid' ? (label ?? name) : undefined"
         :class="
           cn(
-            'block text-xs line-clamp-2 break-words overflow-hidden',
+            'line-clamp-2 block overflow-hidden text-xs break-words',
             'transition-colors duration-150',
             // selection
             !!selected && 'text-base-foreground'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 696e37a45..186ff0eb3 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -16,9 +16,12 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 
 <template>
   <div
-    class="grid grid-cols-subgrid min-w-0 justify-between gap-1 text-node-component-slot-text"
+    class="grid min-w-0 grid-cols-subgrid justify-between gap-1 text-node-component-slot-text"
   >
-    <div v-if="!hideLayoutField" class="truncate content-center-safe">
+    <div
+      v-if="!hideLayoutField"
+      class="content-center-safe truncate"
+    >
       <template v-if="widget.name">
         {{ widget.label || widget.name }}
       </template>
@@ -28,7 +31,7 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
       <div
         :class="
           cn(
-            'cursor-default min-w-0 rounded-lg focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+            'min-w-0 cursor-default rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
             widget.borderStyle
           )
         "
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
index 90a45335b..9cbe080c3 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
@@ -1,9 +1,9 @@
 import { cn } from '@comfyorg/tailwind-utils'
 
 const sharedButtonClasses = cn(
-  'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out ',
+  'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out',
   'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected',
-  'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed'
+  'disabled:cursor-not-allowed disabled:bg-node-component-disabled disabled:text-node-icon-disabled'
 )
 
 export function useNumberWidgetButtonPt(options?: {
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 3e05c6736..8eafd6c8e 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -45,7 +45,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
 </script>
 <template>
   <div
-    class="absolute w-full h-full"
+    class="absolute h-full w-full"
     @wheel.capture="(e: WheelEvent) => outputHistoryRef?.onWheel(e)"
   >
     <div class="workflow-tabs-container pointer-events-auto h-9.5 w-full">
@@ -56,7 +56,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
     </div>
     <div
       v-if="mobileDisplay"
-      class="justify-center border-border-subtle border-t overflow-y-scroll h-[calc(100%-38px)] bg-comfy-menu-bg"
+      class="h-[calc(100%-38px)] justify-center overflow-y-scroll border-t border-border-subtle bg-comfy-menu-bg"
     >
       <div class="flex flex-col text-muted-foreground">
         <LinearPreview
@@ -83,8 +83,11 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
           }
         "
       />
-      <LinearControls ref="linearWorkflowRef" mobile />
-      <div class="text-base-foreground flex items-center gap-4 justify-end m-4">
+      <LinearControls
+        ref="linearWorkflowRef"
+        mobile
+      />
+      <div class="m-4 flex items-center justify-end gap-4 text-base-foreground">
         <a
           href="https://form.typeform.com/to/gmVqFi8l"
           v-text="t('linearMode.beta')"
@@ -94,7 +97,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
     </div>
     <Splitter
       v-else
-      class="h-[calc(100%-38px)] w-full bg-comfy-menu-secondary-bg"
+      class="bg-comfy-menu-secondary-bg h-[calc(100%-38px)] w-full"
       :pt="{ gutter: { class: 'bg-transparent w-4 -mx-3' } }"
       @resizestart="({ originalEvent }) => originalEvent.preventDefault()"
     >
@@ -127,7 +130,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       <SplitterPanel
         id="linearCenterPanel"
         :size="98"
-        class="flex flex-col min-w-min gap-4 mx-2 px-10 pt-8 pb-4 relative text-muted-foreground outline-none"
+        class="relative mx-2 flex min-w-min flex-col gap-4 px-10 pt-8 pb-4 text-muted-foreground outline-none"
       >
         <LinearPreview
           :latent-preview="
@@ -139,12 +142,24 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
           :selected-item
           :selected-output
         />
-        <div ref="topLeftRef" class="absolute z-21 top-4 left-4" />
-        <div ref="topRightRef" class="absolute z-21 top-4 right-4" />
-        <div ref="bottomLeftRef" class="absolute z-20 bottom-4 left-4" />
-        <div ref="bottomRightRef" class="absolute z-20 bottom-24 right-4" />
         <div
-          class="absolute z-20 bottom-4 right-4 text-base-foreground flex items-center gap-4"
+          ref="topLeftRef"
+          class="absolute top-4 left-4 z-21"
+        />
+        <div
+          ref="topRightRef"
+          class="absolute top-4 right-4 z-21"
+        />
+        <div
+          ref="bottomLeftRef"
+          class="absolute bottom-4 left-4 z-20"
+        />
+        <div
+          ref="bottomRightRef"
+          class="absolute right-4 bottom-24 z-20"
+        />
+        <div
+          class="absolute right-4 bottom-4 z-20 flex items-center gap-4 text-base-foreground"
         >
           <div v-text="t('linearMode.beta')" />
           <TypeformPopoverButton
diff --git a/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue b/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
index 0edb63f5e..793eb6f45 100644
--- a/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
@@ -2,11 +2,14 @@
   <div class="flex w-[490px] flex-col border-t-1 border-border-default">
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Error Details -->
-      <div v-if="importFailedPackages.length > 0" class="flex flex-col gap-3">
+      <div
+        v-if="importFailedPackages.length > 0"
+        class="flex flex-col gap-3"
+      >
         <div
           v-for="pkg in importFailedPackages"
           :key="pkg.packageId"
-          class="flex flex-col gap-2 max-h-60 overflow-x-hidden overflow-y-auto scrollbar-custom"
+          class="flex scrollbar-custom max-h-60 flex-col gap-2 overflow-x-hidden overflow-y-auto"
           role="region"
           :aria-label="`Error traceback for ${pkg.packageId}`"
           tabindex="0"
@@ -14,7 +17,7 @@
           <!-- Error Message -->
           <div
             v-if="pkg.traceback || pkg.errorMessage"
-            class="text-xs p-4 rounded-md bg-secondary-background font-mono"
+            class="rounded-md bg-secondary-background p-4 font-mono text-xs"
           >
             {{ pkg.traceback || pkg.errorMessage }}
           </div>
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
index ad7657645..99049adf6 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
@@ -5,7 +5,10 @@
     class="manager-dialog"
   >
     <template #leftPanel>
-      <LeftSidePanel v-model="selectedNavId" :nav-items="navItems">
+      <LeftSidePanel
+        v-model="selectedNavId"
+        :nav-items="navItems"
+      >
         <template #header-icon>
           <i class="icon-[lucide--puzzle]" />
         </template>
@@ -29,7 +32,7 @@
           :complete-on-focus="false"
           :delay="8"
           option-label="query"
-          class="w-full min-w-md max-w-lg"
+          class="w-full max-w-lg min-w-md"
           :pt="{
             pcInputText: {
               root: {
@@ -75,7 +78,7 @@
           size="icon"
           @click="dismissWarningBanner"
         >
-          <i class="pi pi-times text-xs text-base-foreground"></i>
+          <i class="pi pi-times text-xs text-base-foreground" />
         </Button>
       </div>
 
@@ -114,8 +117,14 @@
     </template>
 
     <template #content>
-      <div v-if="isLoading" class="scrollbar-hide h-full w-full overflow-auto">
-        <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
+      <div
+        v-if="isLoading"
+        class="h-full scrollbar-hide w-full overflow-auto"
+      >
+        <GridSkeleton
+          :grid-style="GRID_STYLE"
+          :skeleton-card-count
+        />
       </div>
       <NoResultsPlaceholder
         v-else-if="searchResults.length === 0"
@@ -130,7 +139,11 @@
             : $t('manager.tryDifferentSearch')
         "
       />
-      <div v-else class="h-full" @click="handleGridContainerClick">
+      <div
+        v-else
+        class="h-full"
+        @click="handleGridContainerClick"
+      >
         <VirtualGrid
           id="results-grid"
           :items="resultsWithKeys"
@@ -156,7 +169,10 @@
         v-if="!hasMultipleSelections && selectedNodePack"
         :node-pack="selectedNodePack"
       />
-      <InfoPanelMultiItem v-else :node-packs="selectedNodePacks" />
+      <InfoPanelMultiItem
+        v-else
+        :node-packs="selectedNodePacks"
+      />
     </template>
   </BaseModalLayout>
 </template>
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index 9cf091ffc..db3859ffa 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -6,7 +6,7 @@
       <div v-if="showAfterWhatsNew">
         <p class="m-0 mb-4 text-sm leading-4 text-base-foreground">
           {{ $t('manager.conflicts.description') }}
-          <br /><br />
+          <br><br>
           {{ $t('manager.conflicts.info') }}
         </p>
       </div>
@@ -30,7 +30,10 @@
             }}</span>
           </div>
           <div>
-            <Button variant="textonly" class="bg-transparent text-muted">
+            <Button
+              variant="textonly"
+              class="bg-transparent text-muted"
+            >
               <i
                 :class="
                   importFailedExpanded
@@ -51,12 +54,12 @@
             v-for="(packageName, i) in importFailedConflicts"
             :key="i"
             :aria-label="`Import failed package: ${packageName}`"
-            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
+            class="flex min-h-6 shrink-0 items-center justify-between px-4 py-1 hover:bg-node-component-surface-hovered"
           >
             <span class="text-xs text-muted">
               {{ packageName }}
             </span>
-            <span class="pi pi-info-circle text-sm"></span>
+            <span class="pi pi-info-circle text-sm" />
           </div>
         </div>
       </div>
@@ -79,7 +82,10 @@
             }}</span>
           </div>
           <div>
-            <Button variant="textonly" class="bg-transparent text-muted">
+            <Button
+              variant="textonly"
+              class="bg-transparent text-muted"
+            >
               <i
                 :class="
                   conflictsExpanded
@@ -100,12 +106,12 @@
             v-for="(conflict, i) in allConflictDetails"
             :key="i"
             :aria-label="`Conflict: ${getConflictMessage(conflict, t)}`"
-            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
+            class="flex min-h-6 shrink-0 items-center justify-between px-4 py-1 hover:bg-node-component-surface-hovered"
           >
             <span class="text-xs text-muted">{{
               getConflictMessage(conflict, t)
             }}</span>
-            <span class="pi pi-info-circle text-sm"></span>
+            <span class="pi pi-info-circle text-sm" />
           </div>
         </div>
       </div>
@@ -128,7 +134,10 @@
             }}</span>
           </div>
           <div>
-            <Button variant="textonly" class="bg-transparent text-muted">
+            <Button
+              variant="textonly"
+              class="bg-transparent text-muted"
+            >
               <i
                 :class="
                   extensionsExpanded
@@ -148,12 +157,12 @@
           <div
             v-for="conflictResult in conflictData"
             :key="conflictResult.package_id"
-            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
+            class="flex min-h-6 shrink-0 items-center justify-between px-4 py-1 hover:bg-node-component-surface-hovered"
           >
             <span class="text-xs text-muted">
               {{ conflictResult.package_name }}
             </span>
-            <span class="pi pi-info-circle text-sm"></span>
+            <span class="pi pi-info-circle text-sm" />
           </div>
         </div>
       </div>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 472a60e1d..359cc54df 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -9,9 +9,9 @@
       <template v-if="conflict.type === 'import_failed'">
         <div
           v-if="conflict.required_value"
-          class="max-h-64 overflow-x-hidden scrollbar-custom overflow-y-auto rounded px-2"
+          class="scrollbar-custom max-h-64 overflow-x-hidden overflow-y-auto rounded px-2"
         >
-          <p class="text-xs text-muted-foreground break-all font-mono">
+          <p class="font-mono text-xs break-all text-muted-foreground">
             {{ conflict.required_value }}
           </p>
         </div>
diff --git a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index cce839e22..323369dcf 100644
--- a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="aspect-7/3 w-full overflow-hidden">
     <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="h-full w-full">
+    <div
+      v-if="showDefaultBanner"
+      class="h-full w-full"
+    >
       <img
         :src="DEFAULT_BANNER"
         :alt="$t('g.defaultBanner')"
         class="h-full w-full object-cover"
-      />
+      >
     </div>
     <!-- banner_url or icon show -->
-    <div v-else class="relative h-full w-full">
+    <div
+      v-else
+      class="relative h-full w-full"
+    >
       <!-- blur background -->
       <div
         v-if="imgSrc"
@@ -18,18 +24,18 @@
           backgroundImage: `url(${imgSrc})`,
           filter: 'blur(10px)'
         }"
-      ></div>
+      />
       <!-- image -->
       <img
         :src="isImageError ? DEFAULT_BANNER : imgSrc"
         :alt="nodePack.name + ' banner'"
         :class="
           isImageError
-            ? 'relative w-full h-full object-cover z-10'
-            : 'relative w-full h-full object-contain z-10'
+            ? 'relative z-10 h-full w-full object-cover'
+            : 'relative z-10 h-full w-full object-contain'
         "
         @error="isImageError = true"
-      />
+      >
     </div>
   </div>
 </template>
diff --git a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
index d1375ff2f..4887e9952 100644
--- a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="aspect-[2/1] w-full max-w-[204] overflow-hidden rounded-lg">
     <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="h-full w-full">
+    <div
+      v-if="showDefaultBanner"
+      class="h-full w-full"
+    >
       <img
         :src="DEFAULT_BANNER"
         :alt="$t('g.defaultBanner')"
         class="h-full w-full object-cover"
-      />
+      >
     </div>
     <!-- banner_url or icon show -->
-    <div v-else class="relative h-full w-full">
+    <div
+      v-else
+      class="relative h-full w-full"
+    >
       <!-- blur background -->
       <div
         v-if="imgSrc"
@@ -18,18 +24,18 @@
           backgroundImage: `url(${imgSrc})`,
           filter: 'blur(10px)'
         }"
-      ></div>
+      />
       <!-- image -->
       <img
         :src="isImageError ? DEFAULT_BANNER : imgSrc"
         :alt="nodePack.name + ' banner'"
         :class="
           isImageError
-            ? 'relative w-full h-full object-cover z-10'
-            : 'relative w-full h-full object-contain z-10'
+            ? 'relative z-10 h-full w-full object-cover'
+            : 'relative z-10 h-full w-full object-contain'
         "
         @error="isImageError = true"
-      />
+      >
     </div>
   </div>
 </template>