refactor: type the checkout request and response

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

@@ -45,7 +45,6 @@ jobs:
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
-    timeout-minutes: 60
     permissions:
       contents: read
     strategy:

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

@@ -1,12 +1,12 @@
-# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
-name: "Release: Bi-weekly ComfyUI"
+# Automated weekly workflow to bump ComfyUI frontend RC releases
+name: "Release: Weekly ComfyUI"
 
 on:
   # Schedule for Monday at 12:00 PM PST (20:00 UTC)
   schedule:
     - cron: '0 20 * * 1'
 
-  # Allow manual triggering (bypasses bi-weekly check)
+  # Allow manual triggering
   workflow_dispatch:
     inputs:
       comfyui_fork:
@@ -16,39 +16,7 @@ on:
         type: string
 
 jobs:
-  check-release-week:
-    runs-on: ubuntu-latest
-    outputs:
-      is_release_week: ${{ steps.check.outputs.is_release_week }}
-    steps:
-      - name: Check if release week
-        id: check
-        run: |
-          # Anchor date: first bi-weekly release Monday
-          ANCHOR="2025-12-22"
-
-          ANCHOR_EPOCH=$(date -d "$ANCHOR" +%s)
-          NOW_EPOCH=$(date +%s)
-          WEEKS_SINCE=$(( (NOW_EPOCH - ANCHOR_EPOCH) / 604800 ))
-
-          if [ $((WEEKS_SINCE % 2)) -eq 0 ]; then
-            echo "Release week (week $WEEKS_SINCE since anchor $ANCHOR)"
-            echo "is_release_week=true" >> $GITHUB_OUTPUT
-          else
-            echo "Not a release week (week $WEEKS_SINCE since anchor $ANCHOR)"
-            echo "is_release_week=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Summary
-        run: |
-          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
-
   resolve-version:
-    needs: check-release-week
-    if: needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     outputs:
       current_version: ${{ steps.resolve.outputs.current_version }}
@@ -163,8 +131,8 @@ jobs:
           echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
 
   create-comfyui-pr:
-    needs: [check-release-week, resolve-version, trigger-release-if-needed]
-    if: always() && needs.resolve-version.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
+    needs: [resolve-version, trigger-release-if-needed]
+    if: always() && needs.resolve-version.result == 'success'
     runs-on: ubuntu-latest
 
     steps:
@@ -263,7 +231,7 @@ jobs:
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
-          # Create/update branch (reuse same branch name each release cycle)
+          # Create/update branch (reuse same branch name each week)
           BRANCH="automation/comfyui-frontend-bump"
           git checkout -B "$BRANCH"
           git add requirements.txt
@@ -275,7 +243,7 @@ jobs:
             exit 0
           fi
 
-          # Force push to fork (overwrites previous release cycle's branch)
+          # Force push to fork (overwrites previous week's branch)
           # Note: This intentionally destroys branch history to maintain a single PR
           # Any review comments or manual commits will need to be re-applied
           if ! git push -f origin "$BRANCH"; then

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

AGENTS.md

@@ -266,16 +266,3 @@ When referencing Comfy-Org repos:
   - Always use `import { cn } from '@/utils/tailwindUtil'`
     - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
   - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
-- NEVER use `!important` or the `!` important prefix for tailwind classes
-  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
-
-## Agent-only rules
-
-Rules for agent-based coding tasks.
-
-### Temporary Files
-
-- Put planning documents under `/temp/plans/`
-- Put scripts used under `/temp/scripts/`
-- Put summaries of work performed under `/temp/summaries/`
-- Put TODOs and status updates under `/temp/in_progress/`

CODEOWNERS

@@ -46,6 +46,7 @@
 # Mask Editor
 /src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
 /src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
 
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88

CONTRIBUTING.md

@@ -181,10 +181,6 @@ pnpm format
 - Use Tailwind CSS classes instead of custom CSS
 - NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the [style.css](packages/design-system/src/css/style.css) like `bg-node-component-surface`
 
-## Design Team Approval (Required for Notable UI Changes)
-
-Changes that materially affect the default UI must be approved or requested by our design team before they can be merged. This is generally a blocking requirement and applies to internal contributors and OSS contributors alike.
-
 ### Internationalization
 
 - All user-facing strings must use vue-i18n

README.md

@@ -33,11 +33,11 @@
 
 The project follows a structured release process for each minor version, consisting of three distinct phases:
 
-1. **Development Phase** - 2 weeks
+1. **Development Phase** - 1 week
    - Active development of new features
    - Code changes merged to the development branch
 
-2. **Feature Freeze** - 2 weeks
+2. **Feature Freeze** - 1 week
    - No new features accepted
    - Only bug fixes are cherry-picked to the release branch
    - Testing and stabilization of the codebase
@@ -56,16 +56,16 @@ To use the latest nightly release, add the following command line argument to yo
 ```
 
 ## Overlapping Release Cycles
-The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously. Each feature has approximately 4 weeks from merge to ComfyUI stable release (2 weeks on main, 2 weeks frozen on RC).
+The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously.
 
 ### Example Release Cycle
 
 | Week | Date Range | Version 1.1 | Version 1.2 | Version 1.3 | Patch Releases |
 |------|------------|-------------|-------------|-------------|----------------|
-| 1-2 | Mar 1-14 | Development | - | - | - |
-| 3-4 | Mar 15-28 | Feature Freeze | Development | - | 1.1.0 through 1.1.13 (daily) |
-| 5-6 | Mar 29-Apr 11 | Released | Feature Freeze | Development | 1.1.14+ (daily)<br>1.2.0 through 1.2.13 (daily) |
-| 7-8 | Apr 12-25 | - | Released | Feature Freeze | 1.2.14+ (daily)<br>1.3.0 through 1.3.13 (daily) |
+| 1 | Mar 1-7 | Development | - | - | - |
+| 2 | Mar 8-14 | Feature Freeze | Development | - | 1.1.0 through 1.1.6 (daily) |
+| 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
+| 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
 ## Release Summary
 

browser_tests/fixtures/ComfyPage.ts

@@ -110,18 +110,16 @@ type KeysOfType<T, Match> = {
 }[keyof T]
 
 class ConfirmDialog {
-  private readonly root: Locator
   public readonly delete: Locator
   public readonly overwrite: Locator
   public readonly reject: Locator
   public readonly confirm: Locator
 
   constructor(public readonly page: Page) {
-    this.root = page.getByRole('dialog')
-    this.delete = this.root.getByRole('button', { name: 'Delete' })
-    this.overwrite = this.root.getByRole('button', { name: 'Overwrite' })
-    this.reject = this.root.getByRole('button', { name: 'Cancel' })
-    this.confirm = this.root.getByRole('button', { name: 'Confirm' })
+    this.delete = page.locator('button.p-button[aria-label="Delete"]')
+    this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
+    this.reject = page.locator('button.p-button[aria-label="Cancel"]')
+    this.confirm = page.locator('button.p-button[aria-label="Confirm"]')
   }
 
   async click(locator: KeysOfType<ConfirmDialog, Locator>) {

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -30,7 +30,7 @@ export class ComfyNodeSearchFilterSelectionPanel {
   async addFilter(filterValue: string, filterType: string) {
     await this.selectFilterType(filterType)
     await this.selectFilterValue(filterValue)
-    await this.page.locator('button:has-text("Add")').click()
+    await this.page.locator('.p-button-label:has-text("Add")').click()
   }
 }
 

browser_tests/helpers/templates.ts

@@ -26,9 +26,10 @@ export class ComfyTemplates {
   }
 
   async loadTemplate(id: string) {
-    const templateCard = this.content.getByTestId(`template-workflow-${id}`)
-    await templateCard.scrollIntoViewIfNeeded()
-    await templateCard.getByRole('img').click()
+    await this.content
+      .getByTestId(`template-workflow-${id}`)
+      .getByRole('img')
+      .click()
   }
 
   async getAllTemplates(): Promise<TemplateInfo[]> {

browser_tests/tests/dialog.spec.ts

@@ -85,11 +85,11 @@ test.describe('Missing models warning', () => {
     const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
     await expect(missingModelsWarning).toBeVisible()
 
-    const downloadButton = missingModelsWarning.getByText('Download')
+    const downloadButton = missingModelsWarning.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
 
     // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
     await expect(copyUrlButton).toBeVisible()
   })
 
@@ -102,11 +102,11 @@ test.describe('Missing models warning', () => {
     const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
     await expect(missingModelsWarning).toBeVisible()
 
-    const downloadButton = missingModelsWarning.getByText('Download')
+    const downloadButton = missingModelsWarning.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
 
     // Check that the copy URL button is also visible for Desktop environment
-    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    const copyUrlButton = missingModelsWarning.getByLabel('Copy URL')
     await expect(copyUrlButton).toBeVisible()
   })
 
@@ -176,7 +176,7 @@ test.describe('Missing models warning', () => {
     const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
     await expect(missingModelsWarning).toBeVisible()
 
-    const downloadButton = comfyPage.page.getByText('Download')
+    const downloadButton = comfyPage.page.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
     const downloadPromise = comfyPage.page.waitForEvent('download')
     await downloadButton.click()
@@ -290,7 +290,7 @@ test.describe('Settings', () => {
     // Save keybinding
     const saveButton = comfyPage.page
       .getByLabel('New Blank Workflow')
-      .getByText('Save')
+      .getByLabel('Save')
     await saveButton.click()
 
     const request = await requestPromise

browser_tests/tests/nodeHelp.spec.ts

@@ -123,7 +123,8 @@ test.describe('Node Help', () => {
       await expect(helpPage).toContainText('KSampler')
 
       // Click the back button - use a more specific selector
-      const backButton = helpPage.getByRole('button', { name: /back/i })
+      const backButton = comfyPage.page.locator('button:has(.pi-arrow-left)')
+      await expect(backButton).toBeVisible()
       await backButton.click()
 
       // Verify that we're back to the node library view
@@ -552,6 +553,12 @@ This is English documentation.
       )
       await selectNodeWithPan(comfyPage, checkpointNodes[0])
 
+      // Click help button again
+      const helpButton2 = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton2.click()
+
       // Content should update
       await expect(helpPage).toContainText('Checkpoint Loader Help')
       await expect(helpPage).toContainText(

browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts

@@ -1,86 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Properties panel position', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Open a sidebar tab to ensure sidebar is visible
-    await comfyPage.menu.nodeLibraryTab.open()
-    await comfyPage.actionbar.propertiesButton.click()
-  })
-
-  test('positions on the right when sidebar is on the left', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.nextFrame()
-
-    const propertiesPanel = comfyPage.page.getByTestId('properties-panel')
-    const sidebar = comfyPage.page.locator('.side-bar-panel').first()
-
-    await expect(propertiesPanel).toBeVisible()
-    await expect(sidebar).toBeVisible()
-
-    const propsBoundingBox = await propertiesPanel.boundingBox()
-    const sidebarBoundingBox = await sidebar.boundingBox()
-
-    expect(propsBoundingBox).not.toBeNull()
-    expect(sidebarBoundingBox).not.toBeNull()
-
-    // Properties panel should be to the right of the sidebar
-    expect(propsBoundingBox!.x).toBeGreaterThan(
-      sidebarBoundingBox!.x + sidebarBoundingBox!.width
-    )
-  })
-
-  test('positions on the left when sidebar is on the right', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
-
-    const propertiesPanel = comfyPage.page.getByTestId('properties-panel')
-    const sidebar = comfyPage.page.locator('.side-bar-panel').first()
-
-    await expect(propertiesPanel).toBeVisible()
-    await expect(sidebar).toBeVisible()
-
-    const propsBoundingBox = await propertiesPanel.boundingBox()
-    const sidebarBoundingBox = await sidebar.boundingBox()
-
-    expect(propsBoundingBox).not.toBeNull()
-    expect(sidebarBoundingBox).not.toBeNull()
-
-    // Properties panel should be to the left of the sidebar
-    expect(propsBoundingBox!.x + propsBoundingBox!.width).toBeLessThan(
-      sidebarBoundingBox!.x
-    )
-  })
-
-  test('close button icon updates based on sidebar location', async ({
-    comfyPage
-  }) => {
-    const propertiesPanel = comfyPage.page.getByTestId('properties-panel')
-
-    // When sidebar is on the left, panel is on the right
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.nextFrame()
-
-    await expect(propertiesPanel).toBeVisible()
-    const closeButtonLeft = propertiesPanel
-      .locator('button[aria-pressed]')
-      .locator('i')
-    await expect(closeButtonLeft).toBeVisible()
-    await expect(closeButtonLeft).toHaveClass(/lucide--panel-right/)
-
-    // When sidebar is on the right, panel is on the left
-    await comfyPage.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
-
-    const closeButtonRight = propertiesPanel
-      .locator('button[aria-pressed]')
-      .locator('i')
-    await expect(closeButtonRight).toBeVisible()
-    await expect(closeButtonRight).toHaveClass(/lucide--panel-left/)
-  })
-})

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -100,7 +100,7 @@ test.describe('Node library sidebar', () => {
     const tab = comfyPage.menu.nodeLibraryTab
 
     await tab.getFolder('foo').click({ button: 'right' })
-    await comfyPage.page.getByRole('menuitem', { name: 'New Folder' }).click()
+    await comfyPage.page.getByLabel('New Folder').click()
     const textInput = comfyPage.page.locator('.editable-text input')
     await textInput.waitFor({ state: 'visible' })
     await textInput.fill('bar')
@@ -203,7 +203,7 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page
       .locator('.color-field .p-selectbutton > *:nth-child(2)')
       .click()
-    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
+    await comfyPage.page.getByLabel('Confirm').click()
     await comfyPage.nextFrame()
     expect(
       await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
@@ -223,7 +223,7 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page
       .locator('.icon-field .p-selectbutton > *:nth-child(2)')
       .click()
-    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
+    await comfyPage.page.getByLabel('Confirm').click()
     await comfyPage.nextFrame()
     expect(
       await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
@@ -261,7 +261,7 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page
       .locator('.icon-field .p-selectbutton > *:nth-child(2)')
       .click()
-    await comfyPage.page.getByRole('button', { name: 'Confirm' }).click()
+    await comfyPage.page.getByLabel('Confirm').click()
     await comfyPage.nextFrame()
 
     // Verify the color selection is saved

browser_tests/tests/templates.spec.ts

@@ -109,27 +109,22 @@ test.describe('Templates', () => {
   })
 
   test('Uses proper locale files for templates', async ({ comfyPage }) => {
+    // Set locale to French before opening templates
     await comfyPage.setSetting('Comfy.Locale', 'fr')
 
+    // Load the templates dialog and wait for the French index file request
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.fr.json'
+    )
+
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
 
-    const dialog = comfyPage.page.getByRole('dialog').filter({
-      has: comfyPage.page.getByRole('heading', { name: 'Modèles', exact: true })
-    })
-    await expect(dialog).toBeVisible()
+    const request = await requestPromise
 
-    // Validate that French-localized strings from the templates index are rendered
-    await expect(
-      dialog.getByRole('heading', { name: 'Modèles', exact: true })
-    ).toBeVisible()
-    await expect(
-      dialog.getByRole('button', { name: 'Tous les modèles', exact: true })
-    ).toBeVisible()
+    // Verify French index was requested
+    expect(request.url()).toContain('templates/index.fr.json')
 
-    // Ensure the English fallback copy is not shown anywhere
-    await expect(
-      comfyPage.page.getByText('All Templates', { exact: true })
-    ).toHaveCount(0)
+    await expect(comfyPage.templates.content).toBeVisible()
   })
 
   test('Falls back to English templates when locale file not found', async ({

browser_tests/tests/widget.spec.ts

@@ -205,32 +205,6 @@ test.describe('Image widget', () => {
     const filename = await fileComboWidget.getValue()
     expect(filename).toBe('image32x32.webp')
   })
-  test('Displays buttons when viewing single image of batch', async ({
-    comfyPage
-  }) => {
-    const [x, y] = await comfyPage.page.evaluate(() => {
-      const src =
-        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='512' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' stroke='black'/%3E%3C/svg%3E"
-      const image1 = new Image()
-      image1.src = src
-      const image2 = new Image()
-      image2.src = src
-      const targetNode = graph.nodes[6]
-      targetNode.imgs = [image1, image2]
-      targetNode.imageIndex = 1
-      app.canvas.setDirty(true)
-
-      const x = targetNode.pos[0] + targetNode.size[0] - 41
-      const y = targetNode.pos[1] + targetNode.widgets.at(-1).last_y + 30
-      return app.canvasPosToClientPos([x, y])
-    })
-
-    const clip = { x, y, width: 35, height: 35 }
-    await expect(comfyPage.page).toHaveScreenshot(
-      'image_preview_close_button.png',
-      { clip }
-    )
-  })
 })
 
 test.describe('Animated image widget', () => {
@@ -288,7 +262,13 @@ test.describe('Animated image widget', () => {
     expect(filename).toContain('animated_webp.webp')
   })
 
-  test('Can preview saved animated webp image', async ({ comfyPage }) => {
+  // FIXME: This test keeps flip-flopping because it relies on animated webp timing,
+  // which is inherently unreliable in CI environments. The test asset is an animated
+  // webp with 2 frames, and the test depends on animation frame timing to verify that
+  // animated webp images are properly displayed (as opposed to being treated as static webp).
+  // While the underlying functionality works (animated webp are correctly distinguished
+  // from static webp), the test is flaky due to timing dependencies with webp animation frames.
+  test.fixme('Can preview saved animated webp image', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/save_animated_webp')
 
     // Get position of the load animated webp node
@@ -315,13 +295,18 @@ test.describe('Animated image widget', () => {
       ([loadId, saveId]) => {
         // Set the output of the SaveAnimatedWEBP node to equal the loader node's image
         window['app'].nodeOutputs[saveId] = window['app'].nodeOutputs[loadId]
-        app.canvas.setDirty(true)
       },
       [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
     )
-    await expect(
-      comfyPage.page.locator('.dom-widget').locator('img')
-    ).toHaveCount(2)
+    await comfyPage.nextFrame()
+
+    // Move mouse and click on canvas to trigger render
+    await comfyPage.page.mouse.click(64, 64)
+
+    // Expect the SaveAnimatedWEBP node to have an output preview
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'animated_image_preview_saved_webp.png'
+    )
   })
 })
 

build/plugins/comfyAPIPlugin.ts

@@ -9,7 +9,11 @@ interface ShimResult {
 const SKIP_WARNING_FILES = new Set(['scripts/app', 'scripts/api'])
 
 /** Files that will be removed in v1.34 */
-const DEPRECATED_FILES = ['scripts/ui', 'extensions/core/groupNode'] as const
+const DEPRECATED_FILES = [
+  'scripts/ui',
+  'extensions/core/maskEditorOld',
+  'extensions/core/groupNode'
+] as const
 
 function getWarningMessage(
   fileKey: string,

docs/extensions/core.md

@@ -41,6 +41,7 @@ The following table lists ALL core extensions in the system as of 2025-01-30:
 | groupOptions.ts | Handles group node configuration options | Graph |
 | index.ts | Main extension registration and coordination | Core |
 | load3d.ts | Supports 3D model loading and visualization | 3D |
+| maskEditorOld.ts | Legacy mask editor implementation | Image |
 | maskeditor.ts | Implements the mask editor for image masking operations | Image |
 | nodeTemplates.ts | Provides node template functionality | Templates |
 | noteNode.ts | Adds note nodes for documentation within workflows | Graph |
@@ -177,4 +178,4 @@ For more detailed information about ComfyUI's extension system, refer to the off
 - [JavaScript Settings](https://docs.comfy.org/custom-nodes/js/javascript_settings)
 - [JavaScript Examples](https://docs.comfy.org/custom-nodes/js/javascript_examples)
 
-Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.
+Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.

eslint.config.ts

@@ -4,10 +4,7 @@ import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
-// WORKAROUND: eslint-plugin-prettier causes segfault on Node.js 24 + Windows
-// See: https://github.com/nodejs/node/issues/58690
-// Prettier is still run separately in lint-staged, so this is safe to disable
-import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
@@ -111,8 +108,7 @@ export default defineConfig([
   tseslintConfigs.recommended,
   // Difference in typecheck on CI vs Local
   pluginVue.configs['flat/recommended'],
-  // Use eslint-config-prettier instead of eslint-plugin-prettier to avoid Node 24 segfault
-  eslintConfigPrettier,
+  eslintPluginPrettierRecommended,
   // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types
   storybookConfigs['flat/recommended'],
   // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.36.13",
+  "version": "1.36.3",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -19,7 +19,6 @@
     "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
     "dev:electron": "nx serve --config vite.electron.config.mts",
-    "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
@@ -85,6 +84,7 @@
     "eslint-import-resolver-typescript": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
@@ -146,7 +146,6 @@
     "@primevue/icons": "catalog:",
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
-    "@sparkjsdev/spark": "catalog:",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-table": "^2.10.4",

packages/registry-types/src/comfyRegistryTypes.ts

@@ -217,28 +217,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/admin/verify-api-key": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /**
-         * Verify a ComfyUI API key and return customer details
-         * @description Validates a ComfyUI API key and returns the associated customer information.
-         *     This endpoint is used by cloud.comfy.org to authenticate users via API keys
-         *     instead of Firebase tokens.
-         */
-        post: operations["VerifyApiKey"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/admin/customers/{customer_id}/cloud-subscription-status": {
         parameters: {
             query?: never;
@@ -2176,26 +2154,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/proxy/bfl/flux-2-max/generate": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /**
-         * Proxy request to BFL Flux 2 Max for image generation
-         * @description Forwards image generation requests to BFL's Flux 2 Max API and returns the results. Supports image-to-image generation with up to 8 input images.
-         */
-        post: operations["bflFlux2MaxGenerate"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/proxy/bfl/flux-pro-1.0-expand/generate": {
         parameters: {
             query?: never;
@@ -3953,11 +3911,6 @@ export interface components {
          * @enum {string}
          */
         SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
-        /**
-         * @description The subscription billing duration
-         * @enum {string}
-         */
-        SubscriptionDuration: "MONTHLY" | "ANNUAL";
         FeaturesResponse: {
             /**
              * @description The conversion rate for partner nodes
@@ -4804,13 +4757,13 @@ export interface components {
          * @default kling-v1
          * @enum {string}
          */
-        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
+        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo";
         /**
          * @description Model Name
          * @default kling-v2-master
          * @enum {string}
          */
-        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
+        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo";
         /**
          * @description Video generation mode. std: Standard Mode, which is cost-effective. pro: Professional Mode, generates videos with longer duration but higher quality output.
          * @default std
@@ -4955,12 +4908,6 @@ export interface components {
             camera_control?: components["schemas"]["KlingCameraControl"];
             aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
             duration?: components["schemas"]["KlingVideoGenDuration"];
-            /**
-             * @description Whether to generate sound simultaneously when generating videos. Only V2.6 and subsequent versions of the model support this parameter.
-             * @default off
-             * @enum {string}
-             */
-            sound: "on" | "off";
             /**
              * Format: uri
              * @description The callback notification address
@@ -5023,12 +4970,6 @@ export interface components {
             camera_control?: components["schemas"]["KlingCameraControl"];
             aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
             duration?: components["schemas"]["KlingVideoGenDuration"];
-            /**
-             * @description Whether to generate sound simultaneously when generating videos. Only V2.6 and subsequent versions of the model support this parameter.
-             * @default off
-             * @enum {string}
-             */
-            sound: "on" | "off";
             /**
              * Format: uri
              * @description The callback notification address. Server will notify when the task status changes.
@@ -5818,7 +5759,7 @@ export interface components {
             width: number;
             /**
              * @description Height of the image.
-             * @default 1024
+             * @default 768
              */
             height: number;
             /** @description Seed for reproducibility. */
@@ -5834,11 +5775,6 @@ export interface components {
              * @enum {string}
              */
             output_format: "jpeg" | "png";
-            /**
-             * @description Moderation tolerance level (Flux 2 Max only).
-             * @default 2
-             */
-            safety_tolerance: number;
         };
         /** FluxProFillInputs */
         BFLFluxProFillInputs: {
@@ -7037,10 +6973,6 @@ export interface components {
                     image_tokens?: number;
                 };
                 output_tokens?: number;
-                output_tokens_details?: {
-                    text_tokens?: number;
-                    image_tokens?: number;
-                };
                 total_tokens?: number;
             };
         };
@@ -10424,76 +10356,40 @@ export interface components {
              * @description The ID of the model to call
              * @enum {string}
              */
-            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview" | "wan2.6-t2v" | "wan2.6-i2v";
+            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview";
             /** @description Enter basic information, such as prompt words, etc. */
             input: {
-                /**
-                 * @description Text prompt words. Support Chinese and English, length not exceeding 800 characters.
-                 *     For wan2.6-r2v with multiple reference videos, use 'character1', 'character2', etc. to refer to subjects
-                 *     in the order of reference videos. Example: "Character1 sings on the roadside, Character2 dances beside it"
-                 */
+                /** @description Text prompt words. Support Chinese and English, length not exceeding 800 characters */
                 prompt: string;
                 /** @description Reverse prompt words are used to describe content that you do not want to see in the video screen */
                 negative_prompt?: string;
-                /** @description Audio file download URL. Supported formats: mp3 and wav. Cannot be used with reference_video_urls. */
+                /** @description Audio file download URL. Supported formats: mp3 and wav. */
                 audio_url?: string;
                 /** @description First frame image URL or Base64 encoded data. Required for I2V models. Image formats: JPEG, JPG, PNG, BMP, WEBP. Resolution: 360-2000 pixels. File size: max 10MB. */
                 img_url?: string;
                 /** @description Video effect template name. Optional. Currently supported: squish, flying, carousel. When used, prompt parameter is ignored. */
                 template?: string;
-                /**
-                 * @description Reference video URLs for wan2.6-r2v model only. Array of 1-3 video URLs.
-                 *     Input restrictions:
-                 *     - Format: mp4, mov
-                 *     - Quantity: 1-3 videos
-                 *     - Single video length: 2-30 seconds
-                 *     - Single file size: max 30MB
-                 *     - Cannot be used with audio_url
-                 *     Reference duration: Single video max 5s, two videos max 2.5s each, three videos proportionally less.
-                 *     Billing: Based on actual reference duration used.
-                 */
-                reference_video_urls?: string[];
             };
             /** @description Video processing parameters */
             parameters?: {
-                /**
-                 * @description Video resolution in format width*height. Supported resolutions vary by model:
-                 *     For wan2.5 T2V: 480P (480*832, 832*480, 624*624), 720P, 1080P sizes
-                 *     For wan2.6 T2V/R2V (no 480P):
-                 *       720P: 1280*720, 720*1280, 960*960, 1088*832, 832*1088
-                 *       1080P: 1920*1080, 1080*1920, 1440*1440, 1632*1248, 1248*1632
-                 */
+                /** @description Used to specify the video resolution in the format of 宽*高. Supported resolutions vary by model (for T2V models) */
                 size?: string;
                 /**
-                 * @description Resolution level for I2V models. Supported values vary by model:
-                 *     - wan2.5-i2v-preview: 480P, 720P, 1080P
-                 *     - wan2.6-i2v: 720P, 1080P only (no 480P support)
+                 * @description Resolution level for I2V models. Supported values vary by model: 480P, 720P, 1080P
                  * @enum {string}
                  */
                 resolution?: "480P" | "720P" | "1080P";
                 /**
-                 * @description The duration of the video generated, in seconds:
-                 *     - wan2.5 models: 5 or 10 seconds
-                 *     - wan2.6-t2v, wan2.6-i2v: 5, 10, or 15 seconds
-                 *     - wan2.6-r2v: 5 or 10 seconds only (no 15s support)
+                 * @description The duration of the video generated, in seconds
                  * @default 5
                  * @enum {integer}
                  */
-                duration?: 5 | 10 | 15;
+                duration?: 5 | 10;
                 /**
                  * @description Is it enabled prompt intelligent rewriting. Default is true
                  * @default true
                  */
                 prompt_extend?: boolean;
-                /**
-                 * @description Intelligent multi-lens control. Only active when prompt_extend is enabled.
-                 *     For wan2.6 models only.
-                 *     - multi: Intelligent disassembly into multiple lenses (default)
-                 *     - single: Single lens generation
-                 * @default multi
-                 * @enum {string}
-                 */
-                shot_type?: "multi" | "single";
                 /** @description Random number seed, used to control the randomness of the model generated content */
                 seed?: number;
                 /**
@@ -11910,8 +11806,6 @@ export interface operations {
                 "application/json": {
                     /** @description Optional URL to redirect the customer after they're done with the billing portal */
                     return_url?: string;
-                    /** @description Optional target subscription tier. When provided, creates a deep link directly to the subscription update confirmation screen with this tier pre-selected. */
-                    target_tier?: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
                 };
             };
         };
@@ -12008,8 +11902,8 @@ export interface operations {
             query?: never;
             header?: never;
             path: {
-                /** @description The subscription tier (standard, creator, or pro) with optional yearly billing (standard-yearly, creator-yearly, pro-yearly) */
-                tier: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
+                /** @description The subscription tier (standard, creator, or pro) */
+                tier: "standard" | "creator" | "pro";
             };
             cookie?: never;
         };
@@ -12075,7 +11969,6 @@ export interface operations {
                         /** @description The active subscription ID if one exists */
                         subscription_id?: string | null;
                         subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
-                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                         /** @description Whether the customer has funds/credits available */
                         has_fund?: boolean;
                         /**
@@ -12109,72 +12002,6 @@ export interface operations {
             };
         };
     };
-    VerifyApiKey: {
-        parameters: {
-            query?: never;
-            header: {
-                /** @description Admin API secret used to authorize this request */
-                "X-Comfy-Admin-Secret": string;
-            };
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": {
-                    /** @description The ComfyUI API key to verify (e.g., comfy_xxx...) */
-                    api_key: string;
-                };
-            };
-        };
-        responses: {
-            /** @description API key is valid */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        /** @description Whether the API key is valid */
-                        valid: boolean;
-                        /** @description The Firebase UID of the user */
-                        firebase_uid: string;
-                        /** @description The customer's email address */
-                        email?: string;
-                        /** @description The customer's name */
-                        name?: string;
-                        /** @description Whether the customer is an admin */
-                        is_admin?: boolean;
-                    };
-                };
-            };
-            /** @description Unauthorized or missing admin API secret */
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            /** @description API key not found or invalid */
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Internal server error */
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-        };
-    };
     GetAdminCustomerCloudSubscriptionStatus: {
         parameters: {
             query?: never;
@@ -12202,7 +12029,6 @@ export interface operations {
                         /** @description The active subscription ID if one exists */
                         subscription_id?: string | null;
                         subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
-                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                         /** @description Whether the customer has funds/credits available */
                         has_fund?: boolean;
                         /**
@@ -12320,16 +12146,6 @@ export interface operations {
                          * @description The remaining balance from cloud credits in microamount
                          */
                         cloud_credit_balance_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The total amount of pending/unbilled charges from draft invoices in microamount. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        pending_charges_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The effective balance (total balance minus pending charges). Can be negative if pending charges exceed the balance. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        effective_balance_micros?: number;
                         /** @description The currency code (e.g., "usd") */
                         currency: string;
                     };
@@ -12396,16 +12212,6 @@ export interface operations {
                          * @description The remaining balance from cloud credits in microamount
                          */
                         cloud_credit_balance_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The total amount of pending/unbilled charges from draft invoices in microamount. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        pending_charges_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The effective balance (total balance minus pending charges). Can be negative if pending charges exceed the balance. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        effective_balance_micros?: number;
                         /** @description The currency code (e.g., "usd") */
                         currency: string;
                     };
@@ -19611,89 +19417,6 @@ export interface operations {
             };
         };
     };
-    bflFlux2MaxGenerate: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["BFLFlux2ProGenerateRequest"];
-            };
-        };
-        responses: {
-            /** @description Successful response from BFL Flux 2 Max proxy */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["BFLFluxProGenerateResponse"];
-                };
-            };
-            /** @description Bad Request (invalid input to proxy) */
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Unauthorized */
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            /** @description Payment Required */
-            402: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            /** @description Rate limit exceeded (either from proxy or BFL) */
-            429: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Internal Server Error (proxy or upstream issue) */
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Bad Gateway (error communicating with BFL) */
-            502: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Gateway Timeout (BFL took too long to respond) */
-            504: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-        };
-    };
     BFLExpand_v1_flux_pro_1_0_expand_post: {
         parameters: {
             query?: never;

packages/tailwind-utils/src/index.ts

@@ -1,5 +1,4 @@
-import { clsx } from 'clsx'
-import type { ClassArray } from 'clsx'
+import clsx, { type ClassArray } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export type { ClassValue } from 'clsx'

pnpm-lock.yaml

@@ -46,8 +46,8 @@ catalogs:
       specifier: ^0.1.5
       version: 0.1.5
     '@playwright/test':
-      specifier: ^1.57.0
-      version: 1.57.0
+      specifier: ^1.52.0
+      version: 1.52.0
     '@prettier/plugin-oxc':
       specifier: ^0.1.3
       version: 0.1.3
@@ -78,9 +78,6 @@ catalogs:
     '@sentry/vue':
       specifier: ^8.48.0
       version: 8.48.0
-    '@sparkjsdev/spark':
-      specifier: ^0.1.10
-      version: 0.1.10
     '@storybook/addon-docs':
       specifier: ^10.1.9
       version: 10.1.9
@@ -162,6 +159,9 @@ catalogs:
     eslint-plugin-oxlint:
       specifier: 1.25.0
       version: 1.25.0
+    eslint-plugin-prettier:
+      specifier: ^5.5.4
+      version: 5.5.4
     eslint-plugin-storybook:
       specifier: ^10.1.9
       version: 10.1.9
@@ -265,14 +265,14 @@ catalogs:
       specifier: ^8.49.0
       version: 8.49.0
     unplugin-icons:
-      specifier: ^22.5.0
-      version: 22.5.0
+      specifier: ^0.22.0
+      version: 0.22.0
     unplugin-typegpu:
       specifier: 0.8.0
       version: 0.8.0
     unplugin-vue-components:
-      specifier: ^30.0.0
-      version: 30.0.0
+      specifier: ^0.28.0
+      version: 0.28.0
     vite:
       specifier: ^7.3.0
       version: 7.3.0
@@ -377,9 +377,6 @@ importers:
       '@sentry/vue':
         specifier: 'catalog:'
         version: 8.48.0(pinia@2.2.2(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3)))(vue@3.5.13(typescript@5.9.3))
-      '@sparkjsdev/spark':
-        specifier: 'catalog:'
-        version: 0.1.10
       '@tiptap/core':
         specifier: ^2.10.4
         version: 2.10.4(@tiptap/pm@2.10.4)
@@ -521,7 +518,7 @@ importers:
         version: 22.2.6(@babel/traverse@7.28.5)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)
       '@nx/playwright':
         specifier: 'catalog:'
-        version: 22.2.6(@babel/traverse@7.28.5)(@playwright/test@1.57.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)
+        version: 22.2.6(@babel/traverse@7.28.5)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)
       '@nx/storybook':
         specifier: 'catalog:'
         version: 22.2.4(@babel/traverse@7.28.5)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
@@ -533,7 +530,7 @@ importers:
         version: 0.1.5(pinia@2.2.2(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3)))(vue@3.5.13(typescript@5.9.3))
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.57.0
+        version: 1.52.0
       '@prettier/plugin-oxc':
         specifier: 'catalog:'
         version: 0.1.3
@@ -603,6 +600,9 @@ importers:
       eslint-plugin-oxlint:
         specifier: 'catalog:'
         version: 1.25.0
+      eslint-plugin-prettier:
+        specifier: 'catalog:'
+        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.4)
       eslint-plugin-storybook:
         specifier: 'catalog:'
         version: 10.1.9(eslint@9.39.1(jiti@2.6.1))(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
@@ -692,13 +692,13 @@ importers:
         version: 8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       unplugin-icons:
         specifier: 'catalog:'
-        version: 22.5.0(@vue/compiler-sfc@3.5.25)
+        version: 0.22.0(@vue/compiler-sfc@3.5.25)
       unplugin-typegpu:
         specifier: 'catalog:'
         version: 0.8.0(typegpu@0.8.2)
       unplugin-vue-components:
         specifier: 'catalog:'
-        version: 30.0.0(@babel/parser@7.28.5)(vue@3.5.13(typescript@5.9.3))
+        version: 0.28.0(@babel/parser@7.28.5)(rollup@4.53.5)(vue@3.5.13(typescript@5.9.3))
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -780,10 +780,10 @@ importers:
         version: 16.6.1
       unplugin-icons:
         specifier: 'catalog:'
-        version: 22.5.0(@vue/compiler-sfc@3.5.25)
+        version: 0.22.0(@vue/compiler-sfc@3.5.25)
       unplugin-vue-components:
         specifier: 'catalog:'
-        version: 30.0.0(@babel/parser@7.28.5)(vue@3.5.13(typescript@5.9.3))
+        version: 0.28.0(@babel/parser@7.28.5)(rollup@4.53.5)(vue@3.5.13(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
         version: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
@@ -907,9 +907,18 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@0.5.0':
+    resolution: {integrity: sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==}
+
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@antfu/utils@0.7.10':
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
@@ -2138,8 +2147,8 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@3.1.0':
-    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
   '@internationalized/date@3.9.0':
     resolution: {integrity: sha512-yaN3brAnHRD+4KyyOsJyk49XUvj2wtbNACSqg0bz3u8t2VuzhC8Q5dfRnrSxjnnbDb+ienBnkn1TzQfE154vyg==}
@@ -2778,8 +2787,8 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@playwright/test@1.57.0':
-    resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
+  '@playwright/test@1.52.0':
+    resolution: {integrity: sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -3118,9 +3127,6 @@ packages:
   '@sinclair/typebox@0.34.40':
     resolution: {integrity: sha512-gwBNIP8ZAYev/ORDWW0QvxdwPXwxBtLsdsJgSc7eDIRt8ubP+rxUBzPsrwnu16fgEF8Bx4lh/+mvQvJzcTM6Kw==}
 
-  '@sparkjsdev/spark@0.1.10':
-    resolution: {integrity: sha512-CiijdZQuj7KPDUqIZPiEqyUkJCYo1JqR05vq/V+ElxMwqR7L70ZuZDyIKcasjZHSiPB8pGRMH8HZGqUKO9aRPQ==}
-
   '@storybook/addon-docs@10.1.9':
     resolution: {integrity: sha512-SvwEZ32lyk5p3PRmE3pmfAhs4HMiVo5zxjTBVmK9kgz9zGgWCTlikb56tJ998hVe52CFyCvt3I9rkHeYMCKPww==}
     peerDependencies:
@@ -4424,10 +4430,6 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
-
   chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
@@ -5054,6 +5056,20 @@ packages:
   eslint-plugin-oxlint@1.25.0:
     resolution: {integrity: sha512-grS4KdR9FAxoQC+wMkepeQHL4osMhoYfUI11Pot6Gitqr4wWi+JZrX0Shr8Bs9fjdWhEjtaZIV6cr4mbfytmyw==}
 
+  eslint-plugin-prettier@5.5.4:
+    resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '*'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
   eslint-plugin-storybook@10.1.9:
     resolution: {integrity: sha512-2XCnHhu+9ShW8U/MsvnlT4ZkzADIPtlfYVD/GBBbs8loWu0x9IZ3EfNg1LEImjvvNVDhwpd5K04lK4CAP+2bWA==}
     peerDependencies:
@@ -5154,8 +5170,8 @@ packages:
     resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
     engines: {node: '>=12.0.0'}
 
-  exsolve@1.0.8:
-    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+  exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
@@ -5179,6 +5195,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -6110,6 +6129,10 @@ packages:
     resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
     engines: {node: '>=20.0.0'}
 
+  local-pkg@0.5.1:
+    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
+    engines: {node: '>=14'}
+
   local-pkg@1.1.2:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
@@ -6673,8 +6696,11 @@ packages:
     resolution: {integrity: sha512-ua1L4OgXSBdsu1FPb7F3tYH0F48a6kxvod4pLUlGY9COeJAJQNX/sNH2IiEmsxw7lqYiAwrdHMjz1FctOsyDQg==}
     engines: {node: '>=18'}
 
-  package-manager-detector@1.6.0:
-    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
+  package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
 
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
@@ -6784,13 +6810,13 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  playwright-core@1.57.0:
-    resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
+  playwright-core@1.52.0:
+    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.57.0:
-    resolution: {integrity: sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==}
+  playwright@1.52.0:
+    resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -6832,6 +6858,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
   prettier@3.7.4:
     resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
@@ -7031,10 +7061,6 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
-
   recast@0.23.11:
     resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
@@ -7481,6 +7507,10 @@ packages:
     resolution: {integrity: sha512-2SG1TnJGjMkD4+gblONMGYSrwAzYi+ymOitD+Jb/iMYm57nH20PlkVeMQRah3yDMKEa0QQYUF/QPWpdW7C6zNg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   table@6.9.0:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
@@ -7537,9 +7567,8 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyexec@1.0.2:
-    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
-    engines: {node: '>=18'}
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
@@ -7743,8 +7772,8 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  unplugin-icons@22.5.0:
-    resolution: {integrity: sha512-MBlMtT5RuMYZy4TZgqUL2OTtOdTUVsS1Mhj6G1pEzMlFJlEnq6mhUfoIt45gBWxHcsOdXJDWLg3pRZ+YmvAVWQ==}
+  unplugin-icons@0.22.0:
+    resolution: {integrity: sha512-CP+iZq5U7doOifer5bcM0jQ9t3Is7EGybIYt3myVxceI8Zuk8EZEpe1NPtJvh7iqMs1VdbK0L41t9+um9VuuLw==}
     peerDependencies:
       '@svgr/core': '>=7.0.0'
       '@svgx/core': ^1.0.1
@@ -7775,12 +7804,12 @@ packages:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
-  unplugin-vue-components@30.0.0:
-    resolution: {integrity: sha512-4qVE/lwCgmdPTp6h0qsRN2u642tt4boBQtcpn4wQcWZAsr8TQwq+SPT3NDu/6kBFxzo/sSEK4ioXhOOBrXc3iw==}
+  unplugin-vue-components@0.28.0:
+    resolution: {integrity: sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/parser': ^7.15.8
-      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      '@nuxt/kit': ^3.2.2
       vue: 2 || 3
     peerDependenciesMeta:
       '@babel/parser':
@@ -8382,10 +8411,19 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@antfu/install-pkg@0.5.0':
+    dependencies:
+      package-manager-detector: 0.2.11
+      tinyexec: 0.3.2
+
   '@antfu/install-pkg@1.1.0':
     dependencies:
-      package-manager-detector: 1.6.0
-      tinyexec: 1.0.2
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
+
+  '@antfu/utils@0.7.10': {}
+
+  '@antfu/utils@8.1.1': {}
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
@@ -9759,11 +9797,18 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@3.1.0':
+  '@iconify/utils@2.3.0':
     dependencies:
       '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
       '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
       mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@internationalized/date@3.9.0':
     dependencies:
@@ -10268,7 +10313,7 @@ snapshots:
   '@nx/nx-win32-x64-msvc@22.2.6':
     optional: true
 
-  '@nx/playwright@22.2.6(@babel/traverse@7.28.5)(@playwright/test@1.57.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)':
+  '@nx/playwright@22.2.6(@babel/traverse@7.28.5)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)':
     dependencies:
       '@nx/devkit': 22.2.6(nx@22.2.6)
       '@nx/eslint': 22.2.6(@babel/traverse@7.28.5)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.2.6)
@@ -10276,7 +10321,7 @@ snapshots:
       minimatch: 9.0.3
       tslib: 2.8.1
     optionalDependencies:
-      '@playwright/test': 1.57.0
+      '@playwright/test': 1.52.0
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -10560,9 +10605,9 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
-  '@playwright/test@1.57.0':
+  '@playwright/test@1.52.0':
     dependencies:
-      playwright: 1.57.0
+      playwright: 1.52.0
 
   '@pnpm/config.env-replace@1.1.0': {}
 
@@ -10866,10 +10911,6 @@ snapshots:
 
   '@sinclair/typebox@0.34.40': {}
 
-  '@sparkjsdev/spark@0.1.10':
-    dependencies:
-      fflate: 0.8.2
-
   '@storybook/addon-docs@10.1.9(@types/react@19.1.9)(esbuild@0.27.1)(rollup@4.53.5)(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@19.1.9)(react@19.2.3)
@@ -12401,10 +12442,6 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  chokidar@4.0.3:
-    dependencies:
-      readdirp: 4.1.2
-
   chownr@3.0.0: {}
 
   clean-css@5.3.3:
@@ -13110,6 +13147,15 @@ snapshots:
     dependencies:
       jsonc-parser: 3.3.1
 
+  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.4):
+    dependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+      prettier: 3.7.4
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.11
+    optionalDependencies:
+      eslint-config-prettier: 10.1.8(eslint@9.39.1(jiti@2.6.1))
+
   eslint-plugin-storybook@10.1.9(eslint@9.39.1(jiti@2.6.1))(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/utils': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
@@ -13228,7 +13274,7 @@ snapshots:
 
   expect-type@1.2.2: {}
 
-  exsolve@1.0.8: {}
+  exsolve@1.0.7: {}
 
   extend-shallow@2.0.1:
     dependencies:
@@ -13268,6 +13314,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.3.0: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -14265,6 +14313,11 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.2
 
+  local-pkg@0.5.1:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 1.3.1
+
   local-pkg@1.1.2:
     dependencies:
       mlly: 1.8.0
@@ -15135,7 +15188,11 @@ snapshots:
       registry-url: 6.0.1
       semver: 7.7.3
 
-  package-manager-detector@1.6.0: {}
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.11
+
+  package-manager-detector@1.3.0: {}
 
   pako@1.0.11: {}
 
@@ -15225,14 +15282,14 @@ snapshots:
   pkg-types@2.3.0:
     dependencies:
       confbox: 0.2.2
-      exsolve: 1.0.8
+      exsolve: 1.0.7
       pathe: 2.0.3
 
-  playwright-core@1.57.0: {}
+  playwright-core@1.52.0: {}
 
-  playwright@1.57.0:
+  playwright@1.52.0:
     dependencies:
-      playwright-core: 1.57.0
+      playwright-core: 1.52.0
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -15271,6 +15328,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
   prettier@3.7.4: {}
 
   pretty-bytes@7.1.0: {}
@@ -15556,8 +15617,6 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.1.2: {}
-
   recast@0.23.11:
     dependencies:
       ast-types: 0.16.1
@@ -16158,6 +16217,10 @@ snapshots:
       '@pkgr/core': 0.2.9
       tslib: 2.8.1
 
+  synckit@0.11.11:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
   table@6.9.0:
     dependencies:
       ajv: 8.17.1
@@ -16220,7 +16283,7 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
-  tinyexec@1.0.2: {}
+  tinyexec@1.0.1: {}
 
   tinyglobby@0.2.15:
     dependencies:
@@ -16435,12 +16498,14 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-icons@22.5.0(@vue/compiler-sfc@3.5.25):
+  unplugin-icons@0.22.0(@vue/compiler-sfc@3.5.25):
     dependencies:
-      '@antfu/install-pkg': 1.1.0
-      '@iconify/utils': 3.1.0
+      '@antfu/install-pkg': 0.5.0
+      '@antfu/utils': 0.7.10
+      '@iconify/utils': 2.3.0
       debug: 4.4.3
-      local-pkg: 1.1.2
+      kolorist: 1.8.0
+      local-pkg: 0.5.1
       unplugin: 2.3.11
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.25
@@ -16465,20 +16530,23 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.3
 
-  unplugin-vue-components@30.0.0(@babel/parser@7.28.5)(vue@3.5.13(typescript@5.9.3)):
+  unplugin-vue-components@0.28.0(@babel/parser@7.28.5)(rollup@4.53.5)(vue@3.5.13(typescript@5.9.3)):
     dependencies:
-      chokidar: 4.0.3
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.5)
+      chokidar: 3.6.0
       debug: 4.4.3
-      local-pkg: 1.1.2
+      fast-glob: 3.3.3
+      local-pkg: 0.5.1
       magic-string: 0.30.21
+      minimatch: 9.0.5
       mlly: 1.8.0
-      tinyglobby: 0.2.15
       unplugin: 2.3.11
-      unplugin-utils: 0.3.1
       vue: 3.5.13(typescript@5.9.3)
     optionalDependencies:
       '@babel/parser': 7.28.5
     transitivePeerDependencies:
+      - rollup
       - supports-color
 
   unplugin@1.0.1:

pnpm-workspace.yaml

@@ -16,7 +16,7 @@ catalog:
   '@nx/storybook': 22.2.4
   '@nx/vite': 22.2.6
   '@pinia/testing': ^0.1.5
-  '@playwright/test': ^1.57.0
+  '@playwright/test': ^1.52.0
   '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
@@ -27,7 +27,6 @@ catalog:
   '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^8.48.0
-  '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
@@ -55,6 +54,7 @@ catalog:
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
+  eslint-plugin-prettier: ^5.5.4
   eslint-plugin-storybook: ^10.1.9
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
@@ -89,9 +89,9 @@ catalog:
   typegpu: ^0.8.2
   typescript: ^5.9.3
   typescript-eslint: ^8.49.0
-  unplugin-icons: ^22.5.0
+  unplugin-icons: ^0.22.0
   unplugin-typegpu: 0.8.0
-  unplugin-vue-components: ^30.0.0
+  unplugin-vue-components: ^0.28.0
   vite: ^7.3.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -22,38 +22,29 @@
         state-storage="local"
         @resizestart="onResizestart"
       >
-        <!-- First panel: sidebar when left, properties when right -->
         <SplitterPanel
-          v-if="
-            !focusMode && (sidebarLocation === 'left' || rightSidePanelVisible)
-          "
+          v-if="sidebarLocation === 'left' && !focusMode"
           :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'
+            cn(
+              'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+              sidebarPanelVisible && 'min-w-78'
+            )
           "
-          :min-size="sidebarLocation === 'left' ? 10 : 15"
+          :min-size="10"
           :size="20"
-          :style="firstPanelStyle"
-          :role="sidebarLocation === 'left' ? 'complementary' : undefined"
-          :aria-label="
-            sidebarLocation === 'left' ? t('sideToolbar.sidebar') : undefined
-          "
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'left'
+                ? 'flex'
+                : 'none'
+          }"
         >
           <slot
-            v-if="sidebarLocation === 'left' && sidebarPanelVisible"
+            v-if="sidebarPanelVisible && sidebarLocation === 'left'"
             name="side-bar-panel"
           />
-          <slot
-            v-else-if="sidebarLocation === 'right'"
-            name="right-side-panel"
-          />
         </SplitterPanel>
 
-        <!-- Main panel (always present) -->
         <SplitterPanel :size="80" class="flex flex-col">
           <slot name="topmenu" :sidebar-panel-visible />
 
@@ -82,33 +73,38 @@
           </Splitter>
         </SplitterPanel>
 
-        <!-- Last panel: properties when left, sidebar when right -->
         <SplitterPanel
-          v-if="
-            !focusMode && (sidebarLocation === 'right' || rightSidePanelVisible)
-          "
+          v-if="sidebarLocation === 'right' && !focusMode"
           :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'
+            cn(
+              'side-bar-panel pointer-events-auto',
+              sidebarPanelVisible && 'min-w-78'
+            )
           "
-          :min-size="sidebarLocation === 'right' ? 10 : 15"
+          :min-size="10"
           :size="20"
-          :style="lastPanelStyle"
-          :role="sidebarLocation === 'right' ? 'complementary' : undefined"
-          :aria-label="
-            sidebarLocation === 'right' ? t('sideToolbar.sidebar') : undefined
-          "
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'right'
+                ? 'flex'
+                : 'none'
+          }"
         >
-          <slot v-if="sidebarLocation === 'left'" name="right-side-panel" />
           <slot
-            v-else-if="sidebarLocation === 'right' && sidebarPanelVisible"
+            v-if="sidebarPanelVisible && sidebarLocation === 'right'"
             name="side-bar-panel"
           />
         </SplitterPanel>
+
+        <!-- Right Side Panel - independent of sidebar -->
+        <SplitterPanel
+          v-if="rightSidePanelVisible && !focusMode"
+          class="bg-comfy-menu-bg pointer-events-auto"
+          :min-size="15"
+          :size="20"
+        >
+          <slot name="right-side-panel" />
+        </SplitterPanel>
       </Splitter>
     </div>
   </div>
@@ -121,7 +117,6 @@ import Splitter from 'primevue/splitter'
 import type { SplitterResizeStartEvent } from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -133,7 +128,6 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const sidebarTabStore = useSidebarTabStore()
-const { t } = useI18n()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -165,25 +159,12 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
 }
 
 /*
- * Force refresh the splitter when right panel visibility or sidebar location changes
- * to recalculate the width and panel order
+ * Force refresh the splitter when right panel visibility changes to recalculate the width
  */
 const splitterRefreshKey = computed(() => {
-  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}-${sidebarLocation.value}`
-})
-
-const firstPanelStyle = computed(() => {
-  if (sidebarLocation.value === 'left') {
-    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
-  }
-  return undefined
-})
-
-const lastPanelStyle = computed(() => {
-  if (sidebarLocation.value === 'right') {
-    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
-  }
-  return undefined
+  return rightSidePanelVisible.value
+    ? 'main-splitter-with-right-panel'
+    : 'main-splitter'
 })
 </script>
 

src/components/MenuHamburger.vue

@@ -5,23 +5,23 @@
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      variant="muted-textonly"
-      size="lg"
+      icon="pi pi-bars"
+      severity="secondary"
+      text
+      size="large"
       :aria-label="$t('menu.showMenu')"
       aria-live="assertive"
       @click="exitFocusMode"
       @contextmenu="showNativeSystemMenu"
-    >
-      <i class="pi pi-bars" />
-    </Button>
+    />
     <div class="window-actions-spacer" />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { watchEffect } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/TopMenuSection.vue

@@ -12,22 +12,23 @@
     <div class="mx-1 flex flex-col items-end gap-1">
       <div class="flex items-center gap-2">
         <div
-          v-if="managerState.shouldShowManagerButtons.value"
+          v-if="managerState.shouldShowManagerButtons.value && isDesktop"
           class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
         >
-          <Button
+          <IconButton
             v-tooltip.bottom="customNodesManagerTooltipConfig"
-            variant="secondary"
-            size="icon"
+            type="transparent"
+            size="sm"
+            class="text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
             :aria-label="t('menu.customNodesManager')"
             @click="openCustomNodeManager"
           >
             <i class="icon-[lucide--puzzle] size-4" />
-          </Button>
+          </IconButton>
         </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 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 -->
@@ -36,10 +37,11 @@
             class="[&:not(:has(*>*:not(:empty)))]:hidden"
           ></div>
           <ComfyActionbar />
-          <Button
+          <IconButton
             v-tooltip.bottom="queueHistoryTooltipConfig"
-            type="destructive"
-            size="icon"
+            type="transparent"
+            size="sm"
+            class="relative mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
             :aria-pressed="isQueueOverlayExpanded"
             :aria-label="
               t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
@@ -53,19 +55,20 @@
             >
               {{ queuedCount }}
             </span>
-          </Button>
+          </IconButton>
           <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
           <LoginButton v-else-if="isDesktop" />
-          <Button
+          <IconButton
             v-if="!isRightSidePanelOpen"
             v-tooltip.bottom="rightSidePanelTooltipConfig"
-            type="secondary"
-            size="icon"
+            type="transparent"
+            size="sm"
+            class="mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
             :aria-label="t('rightSidePanel.togglePanel')"
             @click="rightSidePanelStore.togglePanel"
           >
             <i class="icon-[lucide--panel-right] size-4" />
-          </Button>
+          </IconButton>
         </div>
       </div>
       <QueueProgressOverlay
@@ -83,11 +86,11 @@ import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import IconButton from '@/components/button/IconButton.vue'
 import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'

src/components/actionbar/ComfyActionbar.vue

@@ -18,12 +18,12 @@
         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 select-none">
         <span
           ref="dragHandleRef"
           :class="
             cn(
-              'drag-handle cursor-grab w-3 h-max',
+              'drag-handle cursor-grab w-3 h-max mr-2',
               isDragging && 'cursor-grabbing'
             )
           "
@@ -31,16 +31,17 @@
         <Suspense @resolve="comfyRunButtonResolved">
           <ComfyRunButton />
         </Suspense>
-        <Button
+        <IconButton
           v-tooltip.bottom="cancelJobTooltipConfig"
-          variant="destructive"
-          size="icon"
+          type="transparent"
+          size="sm"
+          class="ml-2 bg-destructive-background text-base-foreground transition-colors duration-200 ease-in-out hover:bg-destructive-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-destructive-background"
           :disabled="isExecutionIdle"
           :aria-label="t('menu.interrupt')"
           @click="cancelCurrentJob"
         >
           <i class="icon-[lucide--x] size-4" />
-        </Button>
+        </IconButton>
       </div>
     </Panel>
   </div>
@@ -57,10 +58,10 @@ import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
 import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from '@/components/button/IconButton.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
@@ -71,7 +72,6 @@ import ComfyRunButton from './ComfyRunButton'
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
-const { t } = useI18n()
 const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
@@ -301,7 +301,7 @@ const panelClass = computed(() =>
     'actionbar pointer-events-auto z-1300',
     isDragging.value && 'select-none pointer-events-none',
     isDocked.value
-      ? 'p-0 static border-none bg-transparent'
+      ? 'p-0 static mr-2 border-none bg-transparent'
       : 'fixed shadow-interface'
   )
 )

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -22,13 +22,12 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :variant="item.key === queueMode ? 'primary' : 'secondary'"
-          size="sm"
-          class="w-full justify-start"
-        >
-          <i v-if="item.icon" :class="item.icon" />
-          {{ String(item.label ?? '') }}
-        </Button>
+          :label="String(item.label ?? '')"
+          :icon="item.icon"
+          :severity="item.key === queueMode ? 'primary' : 'secondary'"
+          size="small"
+          text
+        />
       </template>
     </SplitButton>
     <BatchCountEdit />
@@ -37,12 +36,12 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'

src/components/bottomPanel/BottomPanel.vue

@@ -46,22 +46,21 @@
           <div class="flex items-center gap-2">
             <Button
               v-if="isShortcutsTabActive"
-              variant="muted-textonly"
-              size="sm"
+              :label="$t('shortcuts.manageShortcuts')"
+              icon="pi pi-cog"
+              severity="secondary"
+              size="small"
+              text
               @click="openKeybindingSettings"
-            >
-              <i class="pi pi-cog" />
-              {{ $t('shortcuts.manageShortcuts') }}
-            </Button>
+            />
             <Button
               class="justify-self-end"
-              variant="muted-textonly"
-              size="sm"
-              :aria-label="t('g.close')"
+              icon="pi pi-times"
+              severity="secondary"
+              size="small"
+              text
               @click="closeBottomPanel"
-            >
-              <i class="pi pi-times" />
-            </Button>
+            />
           </div>
         </div>
       </TabList>
@@ -80,6 +79,7 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Tab from 'primevue/tab'
 import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
@@ -88,7 +88,6 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'

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

@@ -11,8 +11,9 @@
         value: tooltipText,
         showDelay: 300
       }"
-      variant="secondary"
-      size="sm"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
           'opacity-0 pointer-events-none select-none': !isHovered
@@ -20,20 +21,18 @@
       "
       :aria-label="tooltipText"
       @click="handleCopy"
-    >
-      <i class="pi pi-copy" />
-    </Button>
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
+import Button from 'primevue/button'
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'

src/components/button/IconButton.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import IconButton from './IconButton.vue'
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/Button/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent']
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--trophy] size-4" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--settings] size-4" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--x] size-4" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const Small: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--bell] size-3" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'secondary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { IconButton },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <IconButton type="primary" size="sm" @click="() => {}">
+            <i class="icon-[lucide--trophy] size-3" />
+          </IconButton>
+          <IconButton type="primary" size="md" @click="() => {}">
+            <i class="icon-[lucide--trophy] size-4" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="secondary" size="sm" @click="() => {}">
+            <i class="icon-[lucide--settings] size-3" />
+          </IconButton>
+          <IconButton type="secondary" size="md" @click="() => {}">
+            <i class="icon-[lucide--settings] size-4" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="transparent" size="sm" @click="() => {}">
+            <i class="icon-[lucide--x] size-3" />
+          </IconButton>
+          <IconButton type="transparent" size="md" @click="() => {}">
+            <i class="icon-[lucide--x] size-4" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="primary" size="md" @click="() => {}">
+            <i class="icon-[lucide--bell] size-4" />
+          </IconButton>
+          <IconButton type="secondary" size="md" @click="() => {}">
+            <i class="icon-[lucide--heart] size-4" />
+          </IconButton>
+          <IconButton type="transparent" size="md" @click="() => {}">
+            <i class="icon-[lucide--download] size-4" />
+          </IconButton>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/button/IconButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getBorderButtonTypeClasses,
+  getButtonTypeClasses,
+  getIconButtonSizeClasses
+} from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+interface IconButtonProps extends BaseButtonProps {
+  onClick?: (event: MouseEvent) => void
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  size = 'md',
+  type = 'secondary',
+  border = false,
+  disabled = false,
+  class: className,
+  onClick
+} = defineProps<IconButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = `${getBaseButtonClasses()} p-0`
+  const sizeClasses = getIconButtonSizeClasses(size)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
+
+  return cn(baseClasses, sizeClasses, typeClasses, className)
+})
+</script>

src/components/button/IconGroup.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from './IconButton.vue'
 import IconGroup from './IconGroup.vue'
 
 const meta: Meta<typeof IconGroup> = {
@@ -16,18 +16,18 @@ type Story = StoryObj<typeof IconGroup>
 
 export const Basic: Story = {
   render: () => ({
-    components: { IconGroup, Button },
+    components: { IconGroup, IconButton },
     template: `
       <IconGroup>
-        <Button size="icon" @click="console.log('Hello World!!')">
+        <IconButton @click="console.log('Hello World!!')">
           <i class="icon-[lucide--heart] size-4" />
-        </Button>
-        <Button size="icon" @click="console.log('Hello World!!')">
+        </IconButton>
+        <IconButton @click="console.log('Hello World!!')">
           <i class="icon-[lucide--download] size-4" />
-        </Button>
-        <Button size="icon" @click="console.log('Hello World!!')">
+        </IconButton>
+        <IconButton @click="console.log('Hello World!!')">
           <i class="icon-[lucide--external-link] size-4" />
-        </Button>
+        </IconButton>
       </IconGroup>
     `
   })

src/components/button/IconTextButton.stories.ts

@@ -0,0 +1,213 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import IconTextButton from './IconTextButton.vue'
+
+const meta: Meta<typeof IconTextButton> = {
+  title: 'Components/Button/IconTextButton',
+  component: IconTextButton,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent']
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    iconPosition: {
+      control: { type: 'select' },
+      options: ['left', 'right']
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { IconTextButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <i class="icon-[lucide--package] size-4" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Deploy',
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { IconTextButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <i class="icon-[lucide--settings] size-4" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Settings',
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  render: (args) => ({
+    components: { IconTextButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <i class="icon-[lucide--x] size-4" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Cancel',
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const WithIconRight: Story = {
+  render: (args) => ({
+    components: { IconTextButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <i class="icon-[lucide--chevron-right] size-4" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Next',
+    type: 'primary',
+    size: 'md',
+    iconPosition: 'right'
+  }
+}
+
+export const Small: Story = {
+  render: (args) => ({
+    components: { IconTextButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <i class="icon-[lucide--save] size-3" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Save',
+    type: 'primary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: {
+      IconTextButton
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Download" type="primary" size="sm" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--download] size-3" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--download] size-4" />
+            </template>
+          </IconTextButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Settings" type="secondary" size="sm" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--settings] size-3" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--settings] size-4" />
+            </template>
+          </IconTextButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Delete" type="transparent" size="sm" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--trash-2] size-3" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--trash-2] size-4" />
+            </template>
+          </IconTextButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Next" type="primary" size="md" iconPosition="right" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--chevron-right] size-4" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--chevron-left] size-4" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
+            <template #icon>
+              <i class="icon-[lucide--save] size-4" />
+            </template>
+          </IconTextButton>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/button/IconTextButton.vue

@@ -0,0 +1,58 @@
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot v-if="iconPosition !== 'right'" name="icon"></slot>
+    <span>{{ label }}</span>
+    <slot v-if="iconPosition === 'right'" name="icon"></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getBorderButtonTypeClasses,
+  getButtonSizeClasses,
+  getButtonTypeClasses
+} from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+interface IconTextButtonProps extends BaseButtonProps {
+  iconPosition?: 'left' | 'right'
+  label: string
+  onClick?: () => void
+}
+
+const {
+  size = 'md',
+  type = 'primary',
+  border = false,
+  disabled = false,
+  class: className,
+  iconPosition = 'left',
+  label,
+  onClick
+} = defineProps<IconTextButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = `${getBaseButtonClasses()} justify-start gap-2`
+  const sizeClasses = getButtonSizeClasses(size)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
+
+  return cn(baseClasses, sizeClasses, typeClasses, className)
+})
+</script>

src/components/button/MoreButton.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconTextButton from './IconTextButton.vue'
 import MoreButton from './MoreButton.vue'
 
 const meta: Meta<typeof MoreButton> = {
@@ -17,26 +17,30 @@ type Story = StoryObj<typeof MoreButton>
 
 export const Basic: Story = {
   render: () => ({
-    components: { MoreButton, Button },
+    components: { MoreButton, IconTextButton },
     template: `
       <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
         <MoreButton>
           <template #default="{ close }">
-            <Button
-              variant="textonly"
+            <IconTextButton
+              type="transparent"
+              label="Settings"
               @click="() => { close() }"
             >
-              <i class="icon-[lucide--download] size-4" />
-              <span>Settings</span>
-            </Button>
+              <template #icon>
+                <i class="icon-[lucide--download] size-4" />
+              </template>
+            </IconTextButton>
 
-            <Button
-              variant="textonly"
+            <IconTextButton
+              type="transparent"
+              label="Profile"
               @click="() => { close() }"
             >
-              <i class="icon-[lucide--scroll-text] size-4" />
-              <span>Profile</span>
-            </Button>
+              <template #icon>
+                <i class="icon-[lucide--scroll-text] size-4" />
+              </template>
+            </IconTextButton>
           </template>
         </MoreButton>
       </div>

src/components/button/MoreButton.vue

@@ -1,17 +1,9 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
-      <i
-        :class="
-          cn(
-            !isVertical
-              ? 'icon-[lucide--ellipsis]'
-              : 'icon-[lucide--more-vertical]',
-            'text-sm'
-          )
-        "
-      />
-    </Button>
+    <IconButton :size="size" :type="type" @click="popover?.toggle">
+      <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
+      <i v-else class="icon-[lucide--more-vertical] text-sm" />
+    </IconButton>
 
     <Popover
       ref="popover"
@@ -57,14 +49,20 @@
 import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
+import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'
 
-interface MoreButtonProps {
+import IconButton from './IconButton.vue'
+
+interface MoreButtonProps extends BaseButtonProps {
   isVertical?: boolean
 }
 
-const { isVertical = false } = defineProps<MoreButtonProps>()
+const {
+  size = 'md',
+  type = 'secondary',
+  isVertical = false
+} = defineProps<MoreButtonProps>()
 
 defineEmits<{
   menuOpened: []

src/components/card/Card.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from '../button/IconButton.vue'
 import SquareChip from '../chip/SquareChip.vue'
 import CardBottom from './CardBottom.vue'
 import CardContainer from './CardContainer.vue'
@@ -173,7 +173,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardBottom,
     CardTitle,
     CardDescription,
-    Button,
+    IconButton,
     SquareChip
   },
   setup() {
@@ -222,19 +222,19 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showTopRight" #top-right>
-              <Button
+              <IconButton
                 class="!bg-white/90 !text-neutral-900"
                 @click="() => console.log('Info clicked')"
               >
                 <i class="icon-[lucide--info] size-4" />
-              </Button>
-              <Button
+              </IconButton>
+              <IconButton
                 class="!bg-white/90"
                 :class="favorited ? '!text-red-500' : '!text-neutral-900'"
                 @click="toggleFavorite"
               >
                 <i class="icon-[lucide--heart] size-4" :class="favorited ? 'fill-current' : ''" />
-              </Button>
+              </IconButton>
             </template>
             
             <template v-if="args.showBottomLeft" #bottom-left>

src/components/common/BackgroundImageUpload.vue

@@ -7,24 +7,20 @@
     />
     <Button
       v-tooltip="$t('g.upload')"
-      variant="secondary"
-      size="sm"
-      :aria-label="$t('g.upload')"
+      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
+      size="small"
       :disabled="isUploading"
       @click="triggerFileInput"
-    >
-      <i :class="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" />
-    </Button>
+    />
     <Button
       v-tooltip="$t('g.clear')"
-      variant="destructive"
-      size="sm"
-      :aria-label="$t('g.clear')"
+      outlined
+      icon="pi pi-trash"
+      severity="danger"
+      size="small"
       :disabled="!modelValue"
       @click="clearImage"
-    >
-      <i class="pi pi-trash" />
-    </Button>
+    />
     <input
       ref="fileInput"
       type="file"
@@ -36,10 +32,10 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 

src/components/common/CustomizationDialog.vue

@@ -27,19 +27,24 @@
       </div>
     </div>
     <template #footer>
-      <Button variant="textonly" @click="resetCustomization">
-        <i class="pi pi-refresh" />
-        {{ $t('g.reset') }}
-      </Button>
-      <Button autofocus @click="confirmCustomization">
-        <i class="pi pi-check" />
-        {{ $t('g.confirm') }}
-      </Button>
+      <Button
+        :label="$t('g.reset')"
+        icon="pi pi-refresh"
+        class="p-button-text"
+        @click="resetCustomization"
+      />
+      <Button
+        :label="$t('g.confirm')"
+        icon="pi pi-check"
+        autofocus
+        @click="confirmCustomization"
+      />
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
 import SelectButton from 'primevue/selectbutton'
@@ -47,7 +52,6 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ColorCustomizationSelector from '@/components/common/ColorCustomizationSelector.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const { t } = useI18n()

src/components/common/EditableText.vue

@@ -21,7 +21,6 @@
       @keyup.enter.capture.stop="blurInputElement"
       @keyup.escape.stop="cancelEditing"
       @click.stop
-      @contextmenu.stop
       @pointerdown.stop.capture
       @pointermove.stop.capture
     />

src/components/common/ElectronFileDownload.vue

@@ -16,22 +16,20 @@
         <Button
           v-if="status === null || status === 'error'"
           class="file-action-button"
-          variant="secondary"
-          size="sm"
+          :label="$t('g.download') + ' (' + fileSize + ')'"
+          size="small"
+          outlined
           :disabled="!!props.error"
+          icon="pi pi-download"
           @click="triggerDownload"
-        >
-          <i class="pi pi-download" />
-          {{ $t('g.download') + ' (' + fileSize + ')' }}
-        </Button>
+        />
         <Button
           v-if="(status === null || status === 'error') && !!props.url"
-          variant="secondary"
-          size="sm"
+          :label="$t('g.copyURL')"
+          size="small"
+          outlined
           @click="copyURL"
-        >
-          {{ $t('g.copyURL') }}
-        </Button>
+        />
       </div>
     </div>
     <div
@@ -51,48 +49,44 @@
         v-if="status === 'in_progress'"
         v-tooltip.top="t('electronFileDownload.pause')"
         class="file-action-button"
-        variant="secondary"
-        size="sm"
+        size="small"
+        outlined
         :disabled="!!props.error"
+        icon="pi pi-pause-circle"
         @click="triggerPauseDownload"
-      >
-        <i class="pi pi-pause-circle" />
-      </Button>
+      />
 
       <Button
         v-if="status === 'paused'"
         v-tooltip.top="t('electronFileDownload.resume')"
         class="file-action-button"
-        variant="secondary"
-        size="sm"
-        :aria-label="t('electronFileDownload.resume')"
+        size="small"
+        outlined
         :disabled="!!props.error"
+        icon="pi pi-play-circle"
         @click="triggerResumeDownload"
-      >
-        <i class="pi pi-play-circle" />
-      </Button>
+      />
 
       <Button
         v-tooltip.top="t('electronFileDownload.cancel')"
         class="file-action-button"
-        variant="destructive"
-        size="sm"
-        :aria-label="t('electronFileDownload.cancel')"
+        size="small"
+        outlined
         :disabled="!!props.error"
+        icon="pi pi-times-circle"
+        severity="danger"
         @click="triggerCancelDownload"
-      >
-        <i class="pi pi-times-circle" />
-      </Button>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'

src/components/common/FileDownload.vue

@@ -22,27 +22,31 @@
     </div>
     <div>
       <Button
-        variant="secondary"
+        :label="$t('g.download') + ' (' + fileSize + ')'"
+        size="small"
+        outlined
         :disabled="!!props.error"
         :title="props.url"
         @click="download.triggerBrowserDownload"
-      >
-        {{ $t('g.download') + ' (' + fileSize + ')' }}
-      </Button>
+      />
     </div>
     <div>
-      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
-        {{ $t('g.copyURL') }}
-      </Button>
+      <Button
+        :label="$t('g.copyURL')"
+        size="small"
+        outlined
+        :disabled="!!props.error"
+        @click="copyURL"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'

src/components/common/FormImageUpload.vue

@@ -14,20 +14,21 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <Button size="sm" @click="triggerFileInput">
-          <i class="pi pi-upload" />
-          {{ $t('g.upload') }}
-        </Button>
+        <Button
+          icon="pi pi-upload"
+          :label="$t('g.upload')"
+          size="small"
+          @click="triggerFileInput"
+        />
         <Button
           v-if="modelValue"
           class="w-full"
-          variant="destructive"
-          size="sm"
-          :aria-label="$t('g.delete')"
+          outlined
+          icon="pi pi-trash"
+          severity="danger"
+          size="small"
           @click="clearImage"
-        >
-          <i class="pi pi-trash" />
-        </Button>
+        />
       </div>
     </div>
     <input
@@ -41,10 +42,9 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
-
 defineProps<{
   modelValue: string
 }>()

src/components/common/NoResultsPlaceholder.vue

@@ -10,11 +10,10 @@
           </p>
           <Button
             v-if="buttonLabel"
-            variant="textonly"
+            :label="buttonLabel"
+            class="p-button-text"
             @click="$emit('action')"
-          >
-            {{ buttonLabel }}
-          </Button>
+          />
         </div>
       </template>
     </Card>
@@ -22,10 +21,9 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Card from 'primevue/card'
 
-import Button from '@/components/ui/button/Button.vue'
-
 const props = defineProps<{
   class?: string
   icon?: string

src/components/common/SearchBox.vue

@@ -17,25 +17,22 @@
       class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
       :aria-label="placeholder"
     />
-    <Button
+    <IconButton
       v-if="filterIcon"
-      size="icon"
-      variant="textonly"
-      class="filter-button absolute right-0 inset-y-0 m-0 p-0"
+      class="p-inputicon filter-button absolute right-0 inset-y-0 h-full m-0 p-0"
+      :icon="filterIcon"
+      severity="contrast"
       @click="$emit('showFilter', $event)"
-    >
-      <i :class="filterIcon" />
-    </Button>
+    />
     <InputIcon v-if="!modelValue" :class="icon" />
     <Button
       v-if="modelValue"
-      class="clear-button absolute left-0"
-      variant="textonly"
-      size="icon"
+      class="p-inputicon clear-button"
+      icon="pi pi-times"
+      text
+      severity="contrast"
       @click="modelValue = ''"
-    >
-      <i class="icon-[lucide--x] size-4" />
-    </Button>
+    />
   </div>
   <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
     <SearchFilterChip
@@ -52,12 +49,12 @@
 <script setup lang="ts" generic="TFilter extends SearchFilter">
 import { cn } from '@comfyorg/tailwind-utils'
 import { watchDebounced } from '@vueuse/core'
+import Button from 'primevue/button'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import { computed, ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
-
+import IconButton from '../button/IconButton.vue'
 import type { SearchFilter } from './SearchFilterChip.vue'
 import SearchFilterChip from './SearchFilterChip.vue'
 
@@ -128,4 +125,8 @@ const wrapperStyle = computed(() => {
 :deep(.p-inputtext) {
   --p-form-field-padding-x: 0.625rem;
 }
+
+.p-button.p-inputicon {
+  @apply p-0 w-auto border-none;
+}
 </style>

src/components/common/UserCredit.test.ts

@@ -1,134 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-import UserCredit from './UserCredit.vue'
-
-vi.mock('firebase/app', () => ({
-  initializeApp: vi.fn(),
-  getApp: vi.fn()
-}))
-
-vi.mock('firebase/auth', () => ({
-  getAuth: vi.fn(),
-  setPersistence: vi.fn(),
-  browserLocalPersistence: {},
-  onAuthStateChanged: vi.fn(),
-  signInWithEmailAndPassword: vi.fn(),
-  signOut: vi.fn()
-}))
-
-vi.mock('pinia')
-
-const mockBalance = vi.hoisted(() => ({
-  value: {
-    amount_micros: 100_000,
-    effective_balance_micros: 100_000,
-    currency: 'usd'
-  }
-}))
-
-const mockIsFetchingBalance = vi.hoisted(() => ({ value: false }))
-
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
-    balance: mockBalance.value,
-    isFetchingBalance: mockIsFetchingBalance.value
-  }))
-}))
-
-describe('UserCredit', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockBalance.value = {
-      amount_micros: 100_000,
-      effective_balance_micros: 100_000,
-      currency: 'usd'
-    }
-    mockIsFetchingBalance.value = false
-  })
-
-  const mountComponent = (props = {}) => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(UserCredit, {
-      props,
-      global: {
-        plugins: [i18n],
-        stubs: {
-          Skeleton: true,
-          Tag: true
-        }
-      }
-    })
-  }
-
-  describe('effective_balance_micros handling', () => {
-    it('uses effective_balance_micros when present (positive balance)', () => {
-      mockBalance.value = {
-        amount_micros: 200_000,
-        effective_balance_micros: 150_000,
-        currency: 'usd'
-      }
-
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('Credits')
-    })
-
-    it('uses effective_balance_micros when zero', () => {
-      mockBalance.value = {
-        amount_micros: 100_000,
-        effective_balance_micros: 0,
-        currency: 'usd'
-      }
-
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('0')
-    })
-
-    it('uses effective_balance_micros when negative', () => {
-      mockBalance.value = {
-        amount_micros: 0,
-        effective_balance_micros: -50_000,
-        currency: 'usd'
-      }
-
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('-')
-    })
-
-    it('falls back to amount_micros when effective_balance_micros is missing', () => {
-      mockBalance.value = {
-        amount_micros: 100_000,
-        currency: 'usd'
-      } as typeof mockBalance.value
-
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('Credits')
-    })
-
-    it('falls back to 0 when both effective_balance_micros and amount_micros are missing', () => {
-      mockBalance.value = {
-        currency: 'usd'
-      } as typeof mockBalance.value
-
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('0')
-    })
-  })
-
-  describe('loading state', () => {
-    it('shows skeleton when loading', () => {
-      mockIsFetchingBalance.value = true
-
-      const wrapper = mountComponent()
-      expect(wrapper.findComponent({ name: 'Skeleton' }).exists()).toBe(true)
-    })
-  })
-})

src/components/common/UserCredit.vue

@@ -14,7 +14,13 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i class="icon-[lucide--component]" />
+        <i
+          :class="
+            flags.subscriptionTiersEnabled
+              ? 'icon-[lucide--component]'
+              : 'pi pi-dollar'
+          "
+        />
       </template>
     </Tag>
     <div :class="textClass">
@@ -30,6 +36,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const { textClass, showCreditsOnly } = defineProps<{
@@ -38,14 +45,13 @@ const { textClass, showCreditsOnly } = defineProps<{
 }>()
 
 const authStore = useFirebaseAuthStore()
+const { flags } = useFeatureFlags()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 const { t, locale } = useI18n()
 
 const formattedBalance = computed(() => {
-  const cents =
-    authStore.balance?.effective_balance_micros ??
-    authStore.balance?.amount_micros ??
-    0
+  // Backend returns cents despite the *_micros naming convention.
+  const cents = authStore.balance?.amount_micros ?? 0
   const amount = formatCreditsFromCents({
     cents,
     locale: locale.value
@@ -54,10 +60,8 @@ const formattedBalance = computed(() => {
 })
 
 const formattedCreditsOnly = computed(() => {
-  const cents =
-    authStore.balance?.effective_balance_micros ??
-    authStore.balance?.amount_micros ??
-    0
+  // Backend returns cents despite the *_micros naming convention.
+  const cents = authStore.balance?.amount_micros ?? 0
   const amount = formatCreditsFromCents({
     cents,
     locale: locale.value,

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -22,17 +22,16 @@
 
     <template #header-right-area>
       <div class="flex gap-2">
-        <Button
+        <IconTextButton
           v-if="filteredCount !== totalCount"
-          variant="secondary"
-          size="lg"
+          type="secondary"
+          :label="$t('templateWorkflows.resetFilters', 'Clear Filters')"
           @click="resetFilters"
         >
-          <i class="icon-[lucide--filter-x]" />
-          <span>{{
-            $t('templateWorkflows.resetFilters', 'Clear Filters')
-          }}</span>
-        </Button>
+          <template #icon>
+            <i class="icon-[lucide--filter-x]" />
+          </template>
+        </IconTextButton>
       </div>
     </template>
 
@@ -302,16 +301,16 @@
                       v-if="template.tutorialUrl"
                       class="flex flex-col-reverse justify-center"
                     >
-                      <Button
+                      <IconButton
                         v-if="hoveredTemplate === template.name"
                         v-tooltip.bottom="$t('g.seeTutorial')"
                         v-bind="$attrs"
-                        variant="inverted"
-                        size="icon"
+                        type="primary"
+                        size="sm"
                         @click.stop="openTutorial(template)"
                       >
                         <i class="icon-[lucide--info] size-4" />
-                      </Button>
+                      </IconButton>
                     </div>
                   </div>
                 </div>
@@ -383,6 +382,8 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
@@ -394,7 +395,6 @@ import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
-import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -11,25 +11,24 @@
     <ApiNodesList :node-names="apiNodeNames" />
 
     <div class="flex items-center justify-between">
-      <Button variant="textonly" @click="handleLearnMoreClick">
-        {{ t('g.learnMore') }}
-      </Button>
+      <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
       <div class="flex gap-2">
-        <Button variant="secondary" @click="onCancel?.()">
-          {{ t('g.cancel') }}
-        </Button>
-        <Button @click="onLogin?.()">
-          {{ t('g.login') }}
-        </Button>
+        <Button
+          :label="t('g.cancel')"
+          outlined
+          severity="secondary"
+          @click="onCancel?.()"
+        />
+        <Button :label="t('g.login')" @click="onLogin?.()" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
 
 const { t } = useI18n()

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -31,64 +31,69 @@
         }}</label>
       </div>
 
-      <Button variant="secondary" autofocus @click="onCancel">
-        <i class="pi pi-undo" />
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button v-if="type === 'default'" variant="primary" @click="onConfirm">
-        <i class="pi pi-check" />
-        {{ $t('g.confirm') }}
-      </Button>
+      <Button
+        :label="$t('g.cancel')"
+        icon="pi pi-undo"
+        severity="secondary"
+        autofocus
+        @click="onCancel"
+      />
+      <Button
+        v-if="type === 'default'"
+        :label="$t('g.confirm')"
+        severity="primary"
+        icon="pi pi-check"
+        @click="onConfirm"
+      />
       <Button
         v-else-if="type === 'delete'"
-        variant="destructive"
+        :label="$t('g.delete')"
+        severity="danger"
+        icon="pi pi-trash"
         @click="onConfirm"
-      >
-        <i class="pi pi-trash" />
-        {{ $t('g.delete') }}
-      </Button>
+      />
       <Button
         v-else-if="type === 'overwrite' || type === 'overwriteBlueprint'"
-        variant="destructive"
+        :label="$t('g.overwrite')"
+        severity="warn"
+        icon="pi pi-save"
         @click="onConfirm"
-      >
-        <i class="pi pi-save" />
-        {{ $t('g.overwrite') }}
-      </Button>
+      />
       <template v-else-if="type === 'dirtyClose'">
-        <Button variant="secondary" @click="onDeny">
-          <i class="pi pi-times" />
-          {{ $t('g.no') }}
-        </Button>
-        <Button @click="onConfirm">
-          <i class="pi pi-save" />
-          {{ $t('g.save') }}
-        </Button>
+        <Button
+          :label="$t('g.no')"
+          severity="secondary"
+          icon="pi pi-times"
+          @click="onDeny"
+        />
+        <Button :label="$t('g.save')" icon="pi pi-save" @click="onConfirm" />
       </template>
       <Button
         v-else-if="type === 'reinstall'"
-        variant="destructive"
+        :label="$t('desktopMenu.reinstall')"
+        severity="warn"
+        icon="pi pi-eraser"
         @click="onConfirm"
-      >
-        <i class="pi pi-eraser" />
-        {{ $t('desktopMenu.reinstall') }}
-      </Button>
+      />
       <!-- Invalid - just show a close button. -->
-      <Button v-else variant="primary" @click="onCancel">
-        <i class="pi pi-times" />
-        {{ $t('g.close') }}
-      </Button>
+      <Button
+        v-else
+        :label="$t('g.close')"
+        severity="primary"
+        icon="pi pi-times"
+        @click="onCancel"
+      />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'

src/components/dialog/content/ErrorDialogContent.vue

@@ -14,16 +14,18 @@
     </template>
 
     <div class="flex justify-center gap-2">
-      <Button v-show="!reportOpen" variant="textonly" @click="showReport">
-        {{ $t('g.showReport') }}
-      </Button>
       <Button
         v-show="!reportOpen"
-        variant="textonly"
+        text
+        :label="$t('g.showReport')"
+        @click="showReport"
+      />
+      <Button
+        v-show="!reportOpen"
+        text
+        :label="$t('issueReport.helpFix')"
         @click="showContactSupport"
-      >
-        {{ $t('issueReport.helpFix') }}
-      </Button>
+      />
     </div>
     <template v-if="reportOpen">
       <Divider />
@@ -38,15 +40,18 @@
         :repo-owner="repoOwner"
         :repo-name="repoName"
       />
-      <Button v-if="reportOpen" @click="copyReportToClipboard">
-        <i class="pi pi-copy" />
-        {{ $t('g.copyToClipboard') }}
-      </Button>
+      <Button
+        v-if="reportOpen"
+        :label="$t('g.copyToClipboard')"
+        icon="pi pi-copy"
+        @click="copyReportToClipboard"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { useToast } from 'primevue/usetoast'
@@ -55,7 +60,6 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'

src/components/dialog/content/MissingNodesFooter.vue

@@ -4,17 +4,20 @@
     v-if="isCloud"
     class="flex w-full items-center justify-between gap-2 py-2 px-4"
   >
-    <Button
-      variant="textonly"
+    <IconTextButton
+      :label="$t('missingNodes.cloud.learnMore')"
+      type="transparent"
       size="sm"
+      icon-position="left"
       as="a"
       href="https://www.comfy.org/cloud"
       target="_blank"
       rel="noopener noreferrer"
     >
-      <i class="icon-[lucide--info]"></i>
-      <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
-    </Button>
+      <template #icon>
+        <i class="icon-[lucide--info]"></i>
+      </template>
+    </IconTextButton>
     <Button variant="secondary" size="md" @click="handleGotItClick">{{
       $t('missingNodes.cloud.gotIt')
     }}</Button>
@@ -47,6 +50,7 @@
 import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'

src/components/dialog/content/PromptDialogContent.vue

@@ -18,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{

src/components/dialog/content/SignInContent.vue

@@ -51,7 +51,8 @@
           <Button
             type="button"
             class="h-10"
-            variant="secondary"
+            severity="secondary"
+            outlined
             @click="signInWithGoogle"
           >
             <i class="pi pi-google mr-2"></i>
@@ -65,7 +66,8 @@
           <Button
             type="button"
             class="h-10"
-            variant="secondary"
+            severity="secondary"
+            outlined
             @click="signInWithGithub"
           >
             <i class="pi pi-github mr-2"></i>
@@ -80,7 +82,8 @@
         <Button
           type="button"
           class="h-10"
-          variant="secondary"
+          severity="secondary"
+          outlined
           @click="showApiKeyForm = true"
         >
           <img
@@ -139,12 +142,12 @@
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex w-112 flex-col gap-8 p-8">
+  <!-- New Credits Design (default) -->
+  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
       <h1 class="text-2xl font-semibold text-base-foreground m-0">
@@ -58,40 +59,98 @@
     <Button
       :disabled="!selectedCredits || loading"
       :loading="loading"
-      variant="primary"
-      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
+      severity="primary"
+      :label="$t('credits.topUp.buy')"
+      :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
+      :pt="{ label: { class: 'text-primary-foreground' } }"
       @click="handleBuy"
-    >
-      {{ $t('credits.topUp.buy') }}
-    </Button>
+    />
+  </div>
+
+  <!-- Legacy Design -->
+  <div v-else class="flex w-96 flex-col gap-10 p-2">
+    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
+        {{ $t('credits.topUp.insufficientTitle') }}
+      </h1>
+      <p class="my-0 text-base">
+        {{ $t('credits.topUp.insufficientMessage') }}
+      </p>
+    </div>
+
+    <!-- Balance Section -->
+    <div class="flex items-center justify-between">
+      <div class="flex w-full flex-col gap-2">
+        <div class="text-base text-muted">
+          {{ $t('credits.yourCreditBalance') }}
+        </div>
+        <div class="flex w-full items-center justify-between">
+          <UserCredit text-class="text-2xl" />
+          <Button
+            outlined
+            severity="secondary"
+            :label="$t('credits.topUp.seeDetails')"
+            icon="pi pi-arrow-up-right"
+            @click="handleSeeDetails"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Amount Input Section -->
+    <div class="flex flex-col gap-2">
+      <span class="text-sm text-muted"
+        >{{ $t('credits.topUp.quickPurchase') }}:</span
+      >
+      <div class="grid grid-cols-[2fr_1fr] gap-2">
+        <LegacyCreditTopUpOption
+          v-for="amount in amountOptions"
+          :key="amount"
+          :amount="amount"
+          :preselected="amount === preselectedAmountOption"
+        />
+
+        <LegacyCreditTopUpOption :amount="100" :preselected="false" editable />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
-import { cn } from '@/utils/tailwindUtil'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
+import LegacyCreditTopUpOption from './credit/LegacyCreditTopUpOption.vue'
 
 interface CreditOption {
   credits: number
   description: string
 }
 
-const { isInsufficientCredits = false } = defineProps<{
+const {
+  isInsufficientCredits = false,
+  amountOptions = [5, 10, 20, 50],
+  preselectedAmountOption = 10
+} = defineProps<{
   isInsufficientCredits?: boolean
+  amountOptions?: number[]
+  preselectedAmountOption?: number
 }>()
 
+const { flags } = useFeatureFlags()
 const { formattedRenewalDate } = useSubscription()
+// Use feature flag to determine design - defaults to true (new design)
+const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
@@ -143,4 +202,8 @@ const handleBuy = async () => {
     loading.value = false
   }
 }
+
+const handleSeeDetails = async () => {
+  await authActions.accessBillingPortal()
+}
 </script>

src/components/dialog/content/UpdatePasswordContent.vue

@@ -7,9 +7,12 @@
     <PasswordFields />
 
     <!-- Submit Button -->
-    <Button type="submit" class="mt-4 h-10 font-medium" :loading="loading">
-      {{ $t('userSettings.updatePassword') }}
-    </Button>
+    <Button
+      type="submit"
+      :label="$t('userSettings.updatePassword')"
+      class="mt-4 h-10 font-medium"
+      :loading="loading"
+    />
   </Form>
 </template>
 
@@ -17,10 +20,10 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
 import { ref } from 'vue'
 
 import PasswordFields from '@/components/dialog/content/signin/PasswordFields.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { updatePasswordSchema } from '@/schemas/signInSchema'
 

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Tag
+      severity="secondary"
+      icon="pi pi-wallet"
+      rounded
+      class="p-1 text-amber-400"
+    />
+    <div v-if="editable" class="flex items-center gap-2">
+      <InputNumber
+        v-model="customAmount"
+        :min="1"
+        :max="1000"
+        :step="1"
+        show-buttons
+        :allow-empty="false"
+        :highlight-on-focus="true"
+        prefix="$"
+        pt:pc-input-text:root="w-28"
+        @blur="
+          (e: InputNumberBlurEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+        @input="
+          (e: InputNumberInputEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+      />
+      <span class="text-xs text-muted">{{ formattedCredits }}</span>
+    </div>
+    <div v-else class="flex flex-col leading-tight">
+      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
+      <span class="text-xs text-muted">{{ formattedUsd }}</span>
+    </div>
+  </div>
+  <ProgressSpinner v-if="loading" class="h-8 w-8" />
+  <Button
+    v-else
+    :severity="preselected ? 'primary' : 'secondary'"
+    :outlined="!preselected"
+    :label="$t('credits.topUp.buyNow')"
+    @click="handleBuyNow"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import InputNumber from 'primevue/inputnumber'
+import type {
+  InputNumberBlurEvent,
+  InputNumberInputEvent
+} from 'primevue/inputnumber'
+import ProgressSpinner from 'primevue/progressspinner'
+import Tag from 'primevue/tag'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  clampUsd,
+  formatCreditsFromUsd,
+  formatUsd
+} from '@/base/credits/comfyCredits'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
+
+const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
+
+const {
+  amount,
+  preselected,
+  editable = false
+} = defineProps<{
+  amount: number
+  preselected: boolean
+  editable?: boolean
+}>()
+
+const customAmount = ref(amount)
+const didClickBuyNow = ref(false)
+const loading = ref(false)
+const { t, locale } = useI18n()
+
+const displayUsdAmount = computed(() =>
+  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
+)
+
+const formattedCredits = computed(
+  () =>
+    `${formatCreditsFromUsd({
+      usd: displayUsdAmount.value,
+      locale: locale.value
+    })} ${t('credits.credits')}`
+)
+
+const formattedUsd = computed(
+  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
+)
+
+const handleBuyNow = async () => {
+  const creditAmount = displayUsdAmount.value
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
+  loading.value = true
+  try {
+    await authActions.purchaseCredits(creditAmount)
+    didClickBuyNow.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onBeforeUnmount(() => {
+  if (didClickBuyNow.value) {
+    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
+    void authActions.fetchBalance()
+  }
+})
+</script>

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

@@ -1,14 +1,16 @@
 <template>
-  <Button variant="secondary" @click="openGitHubIssues">
-    <i class="pi pi-github" />
-    {{ $t('g.findIssues') }}
-  </Button>
+  <Button
+    :label="$t('g.findIssues')"
+    severity="secondary"
+    icon="pi pi-github"
+    @click="openGitHubIssues"
+  />
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 
 const props = defineProps<{