Temporarily remove VRAM sort option

Comment out the VRAM Usage (Low to High) sort option in WorkflowTemplateSelectorDialog.vue and add a TODO, since real VRAM usage data is not available. Keeps the code in-place (commented) so it can be re-enabled when a reliable VRAM metric is implemented.

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

@@ -34,10 +34,13 @@ jobs:
 
       - name: Build project
         run: pnpm build
+        env:
+          DISTRIBUTION: localhost
 
-      - name: Scan dist for telemetry references
+      - name: Scan dist for GTM telemetry references
         run: |
           set -euo pipefail
+          echo '🔍 Scanning for Google Tag Manager references...'
           if rg --no-ignore -n \
             -g '*.html' \
             -g '*.js' \
@@ -46,7 +49,33 @@ jobs:
             -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
             -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
             dist; then
-            echo 'Telemetry references found in dist assets.'
+            echo '❌ ERROR: Google Tag Manager references found in dist assets!'
+            echo 'GTM must be properly tree-shaken from OSS builds.'
             exit 1
           fi
-          echo 'No telemetry references found in dist assets.'
+          echo '✅ No GTM references found'
+
+      - name: Scan dist for Mixpanel telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Mixpanel references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '(?i)mixpanel\.init' \
+            -e '(?i)mixpanel\.identify' \
+            -e 'MixpanelTelemetryProvider' \
+            -e 'mp\.comfy\.org' \
+            -e 'mixpanel-browser' \
+            -e '(?i)mixpanel\.track\(' \
+            dist; then
+            echo '❌ ERROR: Mixpanel references found in dist assets!'
+            echo 'Mixpanel must be properly tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
+            echo '2. Call telemetry via useTelemetry() hook'
+            echo '3. Use conditional dynamic imports behind isCloud checks'
+            exit 1
+          fi
+          echo '✅ No Mixpanel references found'

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

@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
-          token: ${{ secrets.PR_GH_TOKEN }}
+          token: ${{ !github.event.pull_request.head.repo.fork && secrets.PR_GH_TOKEN || github.token }}
 
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend

.oxlintrc.json

@@ -96,6 +96,7 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
+    "typescript/no-explicit-any": "error",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },

.storybook/main.ts

@@ -98,12 +98,10 @@ const config: StorybookConfig = {
       },
       build: {
         rolldownOptions: {
-          experimental: {
-            strictExecutionOrder: true
-          },
           treeshake: false,
           output: {
-            keepNames: true
+            keepNames: true,
+            strictExecutionOrder: true
           },
           onwarn: (warning, warn) => {
             // Suppress specific warnings

.storybook/preview.ts

@@ -90,7 +90,6 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
-        showName: true,
         dynamicTitle: true
       }
     }

.stylelintrc.json

@@ -52,7 +52,8 @@
           "reference",
           "plugin",
           "custom-variant",
-          "utility"
+          "utility",
+          "source"
         ]
       }
     ],

browser_tests/assets/missing/deprecated_nodes_complex.json

@@ -0,0 +1,205 @@
+{
+  "last_node_id": 7,
+  "last_link_id": 5,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "T2IAdapterLoader",
+      "pos": [100, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "CONTROL_NET",
+          "type": "CONTROL_NET",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "T2IAdapterLoader"
+      },
+      "widgets_values": ["t2iadapter_model.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 300],
+      "size": [315, 98],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    },
+    {
+      "id": 3,
+      "type": "ResizeImagesByLongerEdge",
+      "pos": [500, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ResizeImagesByLongerEdge"
+      },
+      "widgets_values": [1024]
+    },
+    {
+      "id": 4,
+      "type": "ImageScaleBy",
+      "pos": [500, 280],
+      "size": [300, 80],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2, 3],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageScaleBy"
+      },
+      "widgets_values": ["lanczos", 1.5]
+    },
+    {
+      "id": 5,
+      "type": "ImageBatch",
+      "pos": [900, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image1",
+          "type": "IMAGE",
+          "link": 2
+        },
+        {
+          "name": "image2",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageBatch"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 6,
+      "type": "SaveImage",
+      "pos": [900, 300],
+      "size": [300, 80],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SaveImage"
+      },
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 7,
+      "type": "PreviewImage",
+      "pos": [1250, 100],
+      "size": [300, 250],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 4
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [1, 3, 0, 4, 0, "IMAGE"],
+    [2, 4, 0, 5, 0, "IMAGE"],
+    [3, 4, 0, 6, 0, "IMAGE"],
+    [4, 5, 0, 7, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/deprecated_nodes_simple.json

@@ -0,0 +1,186 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3DAnimation",
+      "pos": [100, 100],
+      "size": [300, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3DAnimation"
+      },
+      "widgets_values": ["model.glb"]
+    },
+    {
+      "id": 2,
+      "type": "Preview3DAnimation",
+      "pos": [450, 100],
+      "size": [300, 100],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "mesh",
+          "type": "MESH",
+          "link": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Preview3DAnimation"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "ConditioningAverage ",
+      "pos": [100, 300],
+      "size": [300, 100],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "conditioning_to",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "conditioning_from",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ConditioningAverage "
+      },
+      "widgets_values": [1]
+    },
+    {
+      "id": 4,
+      "type": "SDV_img2vid_Conditioning",
+      "pos": [450, 300],
+      "size": [300, 150],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip_vision",
+          "type": "CLIP_VISION",
+          "link": null
+        },
+        {
+          "name": "init_image",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "latent",
+          "type": "LATENT",
+          "links": [2],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SDV_img2vid_Conditioning"
+      },
+      "widgets_values": [1024, 576, 14, 127, 25, 0.02]
+    },
+    {
+      "id": 5,
+      "type": "KSampler",
+      "pos": [800, 300],
+      "size": [300, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 1
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [42, "fixed", 20, 8, "euler", "normal", 1]
+    }
+  ],
+  "links": [
+    [1, 3, 0, 5, 1, "CONDITIONING"],
+    [2, 4, 2, 5, 3, "LATENT"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/save_image_and_animated_webp.json

@@ -0,0 +1,86 @@
+{
+  "id": "save-image-and-webm-test",
+  "revision": 0,
+  "last_node_id": 12,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 100],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1, 2]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 11,
+      "type": "SaveImage",
+      "pos": [450, 100],
+      "size": [210, 270],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 12,
+      "type": "SaveWEBM",
+      "pos": [450, 450],
+      "size": [210, 368],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI", "vp9", 6, 32]
+    }
+  ],
+  "links": [
+    [1, 10, 0, 11, 0, "IMAGE"],
+    [2, 10, 0, 12, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.17.0",
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -14,6 +14,7 @@ import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
 import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
@@ -166,6 +167,7 @@ export class ComfyPage {
 
   // Components
   public readonly searchBox: ComfyNodeSearchBox
+  public readonly searchBoxV2: ComfyNodeSearchBoxV2
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
@@ -210,6 +212,7 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
+    this.searchBoxV2 = new ComfyNodeSearchBoxV2(page)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)

browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '../ComfyPage'
+
+export class ComfyNodeSearchBoxV2 {
+  readonly dialog: Locator
+  readonly input: Locator
+  readonly results: Locator
+  readonly filterOptions: Locator
+
+  constructor(readonly page: Page) {
+    this.dialog = page.getByRole('search')
+    this.input = this.dialog.locator('input[type="text"]')
+    this.results = this.dialog.getByTestId('result-item')
+    this.filterOptions = this.dialog.getByTestId('filter-option')
+  }
+
+  categoryButton(categoryId: string): Locator {
+    return this.dialog.getByTestId(`category-${categoryId}`)
+  }
+
+  filterBarButton(name: string): Locator {
+    return this.dialog.getByRole('button', { name })
+  }
+
+  async reload(comfyPage: ComfyPage) {
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  }
+}

browser_tests/fixtures/components/SettingDialog.ts

@@ -23,9 +23,7 @@ export class SettingDialog extends BaseDialog {
    * @param value - The value to set
    */
   async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
     await settingInputDiv.locator('input').fill(value)
   }
 
@@ -34,16 +32,31 @@ export class SettingDialog extends BaseDialog {
    * @param id - The id of the setting
    */
   async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
     await settingInputDiv.locator('input').click()
   }
 
+  get searchBox() {
+    return this.root.getByPlaceholder(/Search/)
+  }
+
+  get categories() {
+    return this.root.locator('nav').getByRole('button')
+  }
+
+  category(name: string) {
+    return this.root.locator('nav').getByRole('button', { name })
+  }
+
+  get contentArea() {
+    return this.root.getByRole('main')
+  }
+
   async goToAboutPanel() {
-    await this.page.getByTestId(TestIds.dialogs.settingsTabAbout).click()
-    await this.page
-      .getByTestId(TestIds.dialogs.about)
-      .waitFor({ state: 'visible' })
+    const aboutButton = this.root.locator('nav').getByRole('button', {
+      name: 'About'
+    })
+    await aboutButton.click()
+    await this.page.waitForSelector('.about-container')
   }
 }

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -226,9 +226,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(bottomPanel.shortcuts.manageButton).toBeVisible()
     await bottomPanel.shortcuts.manageButton.click()
 
-    await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
-    await expect(
-      comfyPage.page.getByRole('option', { name: 'Keybinding' })
-    ).toBeVisible()
+    await expect(comfyPage.settingDialog.root).toBeVisible()
+    await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
   })
 })

browser_tests/tests/colorPalette.spec.ts

@@ -244,21 +244,9 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.nextFrame()
-      const parsed = await (
-        await comfyPage.page.waitForFunction(
-          () => {
-            const workflow = localStorage.getItem('workflow')
-            if (!workflow) return null
-            try {
-              const data = JSON.parse(workflow)
-              return Array.isArray(data?.nodes) ? data : null
-            } catch {
-              return null
-            }
-          },
-          { timeout: 3000 }
-        )
-      ).jsonValue()
+      const parsed = await comfyPage.page.evaluate(() => {
+        return window['app'].graph.serialize()
+      })
       expect(parsed.nodes).toBeDefined()
       expect(Array.isArray(parsed.nodes)).toBe(true)
       for (const node of parsed.nodes) {

browser_tests/tests/confirmDialogTextWrap.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
+  test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
+    comfyPage
+  }) => {
+    const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
+
+    await comfyPage.page.evaluate((msg) => {
+      window
+        .app!.extensionManager.dialog.confirm({
+          title: 'Confirm',
+          type: 'default',
+          message: msg
+        })
+        .catch(() => {})
+    }, longFilename)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
+    await expect(confirmButton).toBeVisible()
+    await expect(confirmButton).toBeInViewport()
+
+    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+    await expect(cancelButton).toBeVisible()
+    await expect(cancelButton).toBeInViewport()
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -37,7 +37,7 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
 })
 
 test('Does not report warning on undo/redo', async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
   await comfyPage.page
@@ -61,16 +61,21 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
 })
 
 test.describe('Execution error', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
   test('Should display an error message when an execution error occurs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
-    await comfyPage.queueButton.click()
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
     await comfyPage.nextFrame()
 
-    // Wait for the element with the .comfy-execution-error selector to be visible
-    const executionError = comfyPage.page.locator('.comfy-error-report')
-    await expect(executionError).toBeVisible()
+    // Wait for the error overlay to be visible
+    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(errorOverlay).toBeVisible()
   })
 })
 
@@ -244,9 +249,13 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsContent = comfyPage.page.locator('.settings-content')
-    await expect(settingsContent).toBeVisible()
-    const isUsableHeight = await settingsContent.evaluate(
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await expect(settingsDialog).toBeVisible()
+    const contentArea = settingsDialog.locator('main')
+    await expect(contentArea).toBeVisible()
+    const isUsableHeight = await contentArea.evaluate(
       (el) => el.clientHeight > 30
     )
     expect(isUsableHeight).toBeTruthy()
@@ -256,7 +265,9 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator('.settings-container')
+    const settingsLocator = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
     await expect(settingsLocator).not.toBeVisible()
@@ -275,10 +286,15 @@ test.describe('Settings', () => {
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('.settings-container')
+    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
 
     // Open the keybinding tab
-    await comfyPage.page.getByLabel('Keybinding').click()
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await settingsDialog
+      .locator('nav [role="button"]', { hasText: 'Keybinding' })
+      .click()
     await comfyPage.page.waitForSelector(
       '[placeholder="Search Keybindings..."]'
     )
@@ -298,7 +314,10 @@ test.describe('Settings', () => {
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
-      '**/api/settings/Comfy.Keybinding.NewBindings'
+      (req) =>
+        req.url().includes('/api/settings') &&
+        !req.url().includes('/api/settings/') &&
+        req.method() === 'POST'
     )
 
     // Save keybinding
@@ -326,17 +345,23 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    const pagePromise = comfyPage.page.context().waitForEvent('page')
+
+    // Prevent loading the external page
+    await comfyPage.page
+      .context()
+      .route('https://support.comfy.org/**', (route) =>
+        route.fulfill({ body: '<html></html>', contentType: 'text/html' })
+      )
+
+    const popupPromise = comfyPage.page.waitForEvent('popup')
     await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
-    const newPage = await pagePromise
+    const popup = await popupPromise
 
-    await newPage.waitForLoadState('networkidle')
-    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
-
-    const url = new URL(newPage.url())
+    const url = new URL(popup.url())
+    expect(url.hostname).toBe('support.comfy.org')
     expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
 
-    await newPage.close()
+    await popup.close()
   })
 })
 

browser_tests/tests/execution.spec.ts

@@ -7,22 +7,29 @@ test.beforeEach(async ({ comfyPage }) => {
 })
 
 test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
   test(
     'Report error on unconnected slot',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
       await comfyPage.canvasOps.disconnectEdge()
-      await comfyPage.canvasOps.clickEmptySpace()
+      await comfyPage.page.keyboard.press('Escape')
 
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-      await expect(comfyPage.page.locator('.comfy-error-report')).toBeVisible()
+      await expect(
+        comfyPage.page.locator('[data-testid="error-overlay"]')
+      ).toBeVisible()
       await comfyPage.page
-        .locator('.p-dialog')
-        .getByRole('button', { name: 'Close' })
+        .locator('[data-testid="error-overlay"]')
+        .getByRole('button', { name: 'Dismiss' })
         .click()
-      await comfyPage.page.locator('.comfy-error-report').waitFor({
-        state: 'hidden'
-      })
+      await comfyPage.page
+        .locator('[data-testid="error-overlay"]')
+        .waitFor({ state: 'hidden' })
       await expect(comfyPage.canvas).toHaveScreenshot(
         'execution-error-unconnected-slot.png'
       )

browser_tests/tests/featureFlags.spec.ts

@@ -37,12 +37,9 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
 
       // Monitor for server feature flags
       const checkInterval = setInterval(() => {
-        if (
-          window.app?.api?.serverFeatureFlags &&
-          Object.keys(window.app.api.serverFeatureFlags).length > 0
-        ) {
-          window.__capturedMessages!.serverFeatureFlags =
-            window.app.api.serverFeatureFlags
+        const flags = window.app?.api?.serverFeatureFlags?.value
+        if (flags && Object.keys(flags).length > 0) {
+          window.__capturedMessages!.serverFeatureFlags = flags
           clearInterval(checkInterval)
         }
       }, 100)
@@ -96,7 +93,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverFeatureFlags
+      return window.app!.api.serverFeatureFlags.value
     })
 
     // Verify we received real feature flags from the backend
@@ -129,8 +126,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window.app!.api.serverFeatureFlags
-      window.app!.api.serverFeatureFlags = {
+      const original = window.app!.api.serverFeatureFlags.value
+      window.app!.api.serverFeatureFlags.value = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -147,7 +144,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       }
 
       // Restore original
-      window.app!.api.serverFeatureFlags = original
+      window.app!.api.serverFeatureFlags.value = original
       return results
     })
 
@@ -282,8 +279,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       // Monitor when feature flags arrive by checking periodically
       const checkFeatureFlags = setInterval(() => {
         if (
-          window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
-          undefined
+          window.app?.api?.serverFeatureFlags?.value
+            ?.supports_preview_metadata !== undefined
         ) {
           window.__appReadiness!.featureFlagsReceived = true
           clearInterval(checkFeatureFlags)
@@ -320,8 +317,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Wait for feature flags to be received
     await newPage.waitForFunction(
       () =>
-        window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
-        undefined,
+        window.app?.api?.serverFeatureFlags?.value
+          ?.supports_preview_metadata !== undefined,
       {
         timeout: 10000
       }
@@ -331,7 +328,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     const readiness = await newPage.evaluate(() => {
       return {
         ...window.__appReadiness,
-        currentFlags: window.app!.api.serverFeatureFlags
+        currentFlags: window.app!.api.serverFeatureFlags.value
       }
     })
 

browser_tests/tests/groupNode.spec.ts

@@ -10,6 +10,8 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 
 test.describe('Group Node', { tag: '@node' }, () => {

browser_tests/tests/interaction.spec.ts

@@ -13,6 +13,9 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  // Wait for the legacy menu to appear and canvas to settle after layout shift.
+  await comfyPage.page.locator('.comfy-menu').waitFor({ state: 'visible' })
+  await comfyPage.nextFrame()
 })
 
 test.describe('Item Interaction', { tag: ['@screenshot', '@node'] }, () => {
@@ -733,6 +736,25 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
     )
+    // Wait for V2 persistence debounce to save the modified workflow
+    const start = Date.now()
+    await comfyPage.page.waitForFunction((since) => {
+      for (let i = 0; i < window.localStorage.length; i++) {
+        const key = window.localStorage.key(i)
+        if (!key?.startsWith('Comfy.Workflow.DraftIndex.v2:')) continue
+        const json = window.localStorage.getItem(key)
+        if (!json) continue
+        try {
+          const index = JSON.parse(json)
+          if (typeof index.updatedAt === 'number' && index.updatedAt >= since) {
+            return true
+          }
+        } catch {
+          // ignore
+        }
+      }
+      return false
+    }, start)
     await comfyPage.setup({ clearStorage: false })
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
@@ -755,10 +777,17 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
       await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
       await comfyPage.menu.topbar.saveWorkflow(workflowB)
 
-      // Wait for localStorage to persist the workflow paths before reloading
-      await comfyPage.page.waitForFunction(
-        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
-      )
+      // Wait for sessionStorage to persist the workflow paths before reloading
+      // V2 persistence uses sessionStorage with client-scoped keys
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.sessionStorage.length; i++) {
+          const key = window.sessionStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.OpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
       await comfyPage.setup({ clearStorage: false })
     })
 

browser_tests/tests/nodeHelp.spec.ts

@@ -27,6 +27,7 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setup()
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
 
   test.describe('Selection Toolbox', () => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -18,7 +18,10 @@ test.describe('Node search box', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test(`Can trigger on empty canvas double click`, async ({ comfyPage }) => {
@@ -45,7 +48,10 @@ test.describe('Node search box', { tag: '@node' }, () => {
     await comfyPage.setup({ clearStorage: true })
     // Simulate new user with 1.24.1+ installed version
     await comfyPage.settings.setSetting('Comfy.InstalledVersion', '1.24.1')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
     // Don't set LinkRelease settings explicitly to test versioned defaults
 
     await comfyPage.canvasOps.disconnectEdge()
@@ -215,6 +221,14 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
+    test('Does not add duplicate filter with same type and value', async ({
+      comfyPage
+    }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expectFilterChips(comfyPage, ['MODEL'])
+    })
+
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.removeFilter(0)
@@ -277,7 +291,10 @@ test.describe('Release context menu', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test(
@@ -321,7 +338,10 @@ test.describe('Release context menu', { tag: '@node' }, () => {
     await comfyPage.setup({ clearStorage: true })
     // Simulate existing user with pre-1.24.1 version
     await comfyPage.settings.setSetting('Comfy.InstalledVersion', '1.23.0')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
     // Don't set LinkRelease settings explicitly to test versioned defaults
 
     await comfyPage.canvasOps.disconnectEdge()
@@ -342,7 +362,10 @@ test.describe('Release context menu', { tag: '@node' }, () => {
       'Comfy.LinkRelease.Action',
       'context menu'
     )
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
 
     await comfyPage.canvasOps.disconnectEdge()
     // Context menu should appear due to explicit setting, not search box

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -0,0 +1,149 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Node search box V2', { tag: '@node' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.LinkRelease.Action',
+      'search box'
+    )
+    await comfyPage.settings.setSetting(
+      'Comfy.LinkRelease.ActionShift',
+      'search box'
+    )
+    await comfyPage.searchBoxV2.reload(comfyPage)
+  })
+
+  test('Can open search and add node', async ({ comfyPage }) => {
+    const { searchBoxV2 } = comfyPage
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    await comfyPage.canvasOps.doubleClick()
+    await expect(searchBoxV2.input).toBeVisible()
+
+    await searchBoxV2.input.fill('KSampler')
+    await expect(searchBoxV2.results.first()).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(searchBoxV2.input).not.toBeVisible()
+
+    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+    expect(newCount).toBe(initialCount + 1)
+  })
+
+  test('Can add first default result with Enter', async ({ comfyPage }) => {
+    const { searchBoxV2 } = comfyPage
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    await comfyPage.canvasOps.doubleClick()
+    await expect(searchBoxV2.input).toBeVisible()
+
+    // Default results should be visible without typing
+    await expect(searchBoxV2.results.first()).toBeVisible()
+
+    // Enter should add the first (selected) result
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(searchBoxV2.input).not.toBeVisible()
+
+    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+    expect(newCount).toBe(initialCount + 1)
+  })
+
+  test.describe('Category navigation', () => {
+    test('Favorites shows only bookmarked nodes', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+        'KSampler'
+      ])
+      await searchBoxV2.reload(comfyPage)
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.categoryButton('favorites').click()
+
+      await expect(searchBoxV2.results).toHaveCount(1)
+      await expect(searchBoxV2.results.first()).toContainText('KSampler')
+    })
+
+    test('Category filters results to matching nodes', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.categoryButton('sampling').click()
+
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const count = await searchBoxV2.results.count()
+      expect(count).toBeGreaterThan(0)
+    })
+  })
+
+  test.describe('Filter workflow', () => {
+    test('Can filter by input type via filter bar', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      // Click "Input" filter chip in the filter bar
+      await searchBoxV2.filterBarButton('Input').click()
+
+      // Filter options should appear
+      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
+
+      // Type to narrow and select MODEL
+      await searchBoxV2.input.fill('MODEL')
+      await searchBoxV2.filterOptions
+        .filter({ hasText: 'MODEL' })
+        .first()
+        .click()
+
+      // Filter chip should appear and results should be filtered
+      await expect(
+        searchBoxV2.dialog.getByText('Input:', { exact: false }).locator('..')
+      ).toContainText('MODEL')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+    })
+  })
+
+  test.describe('Keyboard navigation', () => {
+    test('Can navigate and select with keyboard', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.input.fill('KSampler')
+      const results = searchBoxV2.results
+      await expect(results.first()).toBeVisible()
+
+      // First result selected by default
+      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+
+      // ArrowDown moves selection
+      await comfyPage.page.keyboard.press('ArrowDown')
+      await expect(results.nth(1)).toHaveAttribute('aria-selected', 'true')
+      await expect(results.first()).toHaveAttribute('aria-selected', 'false')
+
+      // ArrowUp moves back
+      await comfyPage.page.keyboard.press('ArrowUp')
+      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+
+      // Enter selects and adds node
+      await comfyPage.page.keyboard.press('Enter')
+      await expect(searchBoxV2.input).not.toBeVisible()
+
+      const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(newCount).toBe(initialCount + 1)
+    })
+  })
+})

browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts

@@ -5,6 +5,7 @@ import { TestIds } from '../../fixtures/selectors'
 
 test.describe('Properties panel position', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     // Open a sidebar tab to ensure sidebar is visible
     await comfyPage.menu.nodeLibraryTab.open()
     await comfyPage.actionbar.propertiesButton.click()

browser_tests/tests/recordAudio.spec.ts

@@ -4,6 +4,7 @@ import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 
 test.describe('Record Audio Node', { tag: '@screenshot' }, () => {

browser_tests/tests/remoteWidgets.spec.ts

@@ -53,6 +53,11 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test.describe('Loading options', () => {

browser_tests/tests/saveImageAndWebp.spec.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Save Image and WEBM preview',
+  { tag: ['@screenshot', '@widget'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test('Can preview both SaveImage and SaveWEBM outputs', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'widgets/save_image_and_animated_webp'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      await comfyPage.runButton.click()
+
+      const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
+      const saveWebmNode = comfyPage.vueNodes.getNodeByTitle('SaveWEBM')
+
+      // Wait for SaveImage to render an img inside .image-preview
+      await expect(saveImageNode.locator('.image-preview img')).toBeVisible({
+        timeout: 30000
+      })
+
+      // Wait for SaveWEBM to render a video inside .video-preview
+      await expect(saveWebmNode.locator('.video-preview video')).toBeVisible({
+        timeout: 30000
+      })
+
+      await expect(comfyPage.page).toHaveScreenshot(
+        'save-image-and-webm-preview.png'
+      )
+    })
+  }
+)

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -5,6 +5,7 @@ import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 test.describe('Node library sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
     await comfyPage.settings.setSetting(
       'Comfy.NodeLibrary.BookmarksCustomization',

browser_tests/tests/subgraph-duplicate-ids.spec.ts

@@ -5,13 +5,6 @@ import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
   const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
 
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.Graph.DeduplicateSubgraphNodeIds',
-      true
-    )
-  })
-
   test('All node IDs are globally unique after loading', async ({
     comfyPage
   }) => {

browser_tests/tests/subgraph.spec.ts

@@ -19,6 +19,10 @@ const SELECTORS = {
 test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   // Helper to get subgraph slot count
@@ -61,7 +65,10 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
+      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
 
       await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -77,7 +84,10 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
+      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
 
       await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -820,7 +830,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Open settings dialog using hotkey
       await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
+      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
         state: 'visible'
       })
 
@@ -830,7 +840,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Dialog should be closed
       await expect(
-        comfyPage.page.locator('.settings-container')
+        comfyPage.page.locator('[data-testid="settings-dialog"]')
       ).not.toBeVisible()
 
       // Should still be in subgraph

browser_tests/tests/subgraphSearchAliases.spec.ts

@@ -54,7 +54,10 @@ async function searchAndExpectResult(
 test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test('Can set search aliases on subgraph and find via search', async ({

browser_tests/tests/templateFitView.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+/**
+ * Tests that templates are automatically fitted to view when loaded.
+ *
+ * When openSource === 'template', fitView() is called to ensure
+ * templates with saved off-screen viewport positions (extra.ds)
+ * are always displayed correctly.
+ */
+test.describe('Template Fit View', { tag: ['@canvas', '@workflow'] }, () => {
+  test('should automatically fit view when loading a template with off-screen saved position', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.EnableWorkflowViewRestore', true)
+
+    // Serialize the current default graph, inject an extreme off-screen
+    // viewport position, then reload it as a template. Without the fix,
+    // the saved offset [-5000, -5000] would be restored and nodes would
+    // be invisible.
+    const viewportState = await comfyPage.page.evaluate(async () => {
+      const app = window.app!
+      const workflow = app.graph.serialize()
+
+      workflow.extra = {
+        ...workflow.extra,
+        ds: { scale: 1, offset: [-5000, -5000] }
+      }
+
+      await app.loadGraphData(workflow as ComfyWorkflowJSON, true, true, null, {
+        openSource: 'template'
+      })
+
+      return {
+        offsetX: app.canvas.ds.offset[0],
+        offsetY: app.canvas.ds.offset[1],
+        nodeCount: app.graph._nodes.length
+      }
+    })
+
+    expect(viewportState.nodeCount).toBeGreaterThan(0)
+
+    // fitView() should have overridden the saved [-5000, -5000] offset
+    expect(
+      viewportState.offsetX,
+      'Viewport X offset should not be the saved off-screen value'
+    ).not.toBe(-5000)
+    expect(
+      viewportState.offsetY,
+      'Viewport Y offset should not be the saved off-screen value'
+    ).not.toBe(-5000)
+  })
+})

browser_tests/tests/useSettingSearch.spec.ts

@@ -22,7 +22,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
         name: 'TestSettingsExtension',
         settings: [
           {
-            // Extensions can register arbitrary setting IDs
             id: 'TestHiddenSetting' as TestSettingId,
             name: 'Test Hidden Setting',
             type: 'hidden',
@@ -30,7 +29,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
             category: ['Test', 'Hidden']
           },
           {
-            // Extensions can register arbitrary setting IDs
             id: 'TestDeprecatedSetting' as TestSettingId,
             name: 'Test Deprecated Setting',
             type: 'text',
@@ -39,7 +37,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
             category: ['Test', 'Deprecated']
           },
           {
-            // Extensions can register arbitrary setting IDs
             id: 'TestVisibleSetting' as TestSettingId,
             name: 'Test Visible Setting',
             type: 'text',
@@ -52,238 +49,143 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
   })
 
   test('can open settings dialog and use search box', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await expect(searchBox).toBeVisible()
-
-    // Verify search box has the correct placeholder
-    await expect(searchBox).toHaveAttribute(
+    await expect(dialog.searchBox).toHaveAttribute(
       'placeholder',
       expect.stringContaining('Search')
     )
   })
 
   test('search box is functional and accepts input', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Comfy')
-
-    // Verify the input was accepted
-    await expect(searchBox).toHaveValue('Comfy')
+    await dialog.searchBox.fill('Comfy')
+    await expect(dialog.searchBox).toHaveValue('Comfy')
   })
 
   test('search box clears properly', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('test')
-    await expect(searchBox).toHaveValue('test')
+    await dialog.searchBox.fill('test')
+    await expect(dialog.searchBox).toHaveValue('test')
 
-    // Clear the search box
-    await searchBox.clear()
-    await expect(searchBox).toHaveValue('')
+    await dialog.searchBox.clear()
+    await expect(dialog.searchBox).toHaveValue('')
   })
 
   test('settings categories are visible in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Check that the sidebar has categories
-    const categories = comfyPage.page.locator(
-      '.settings-sidebar .p-listbox-option'
-    )
-    expect(await categories.count()).toBeGreaterThan(0)
-
-    // Check that at least one category is visible
-    await expect(categories.first()).toBeVisible()
+    expect(await dialog.categories.count()).toBeGreaterThan(0)
   })
 
   test('can select different categories in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Click on a specific category (Appearance) to verify category switching
-    const appearanceCategory = comfyPage.page.getByRole('option', {
-      name: 'Appearance'
-    })
-    await appearanceCategory.click()
+    const categoryCount = await dialog.categories.count()
 
-    // Verify the category is selected
-    await expect(appearanceCategory).toHaveClass(/p-listbox-option-selected/)
-  })
+    if (categoryCount > 1) {
+      await dialog.categories.nth(1).click()
 
-  test('settings content area is visible', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
-
-    // Check that the content area is visible
-    const contentArea = comfyPage.page.locator('.settings-content')
-    await expect(contentArea).toBeVisible()
-
-    // Check that tab panels are visible
-    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
-    await expect(tabPanels).toBeVisible()
+      await expect(dialog.categories.nth(1)).toHaveClass(
+        /bg-interface-menu-component-surface-selected/
+      )
+    }
   })
 
   test('search functionality affects UI state', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-
-    // Type in search box
-    await searchBox.fill('graph')
-
-    // Verify that the search input is handled
-    await expect(searchBox).toHaveValue('graph')
+    await dialog.searchBox.fill('graph')
+    await expect(dialog.searchBox).toHaveValue('graph')
   })
 
   test('settings dialog can be closed', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Close with escape key
     await comfyPage.page.keyboard.press('Escape')
-
-    // Verify dialog is closed
-    await expect(settingsDialog).not.toBeVisible()
+    await expect(dialog.root).not.toBeVisible()
   })
 
   test('search box has proper debouncing behavior', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Type rapidly in search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('a')
-    await searchBox.fill('ab')
-    await searchBox.fill('abc')
-    await searchBox.fill('abcd')
+    await dialog.searchBox.fill('a')
+    await dialog.searchBox.fill('ab')
+    await dialog.searchBox.fill('abc')
+    await dialog.searchBox.fill('abcd')
 
-    // Verify final value
-    await expect(searchBox).toHaveValue('abcd')
+    await expect(dialog.searchBox).toHaveValue('abcd')
   })
 
   test('search excludes hidden settings from results', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should show visible setting but not hidden setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
   })
 
   test('search excludes deprecated settings from results', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should show visible setting but not deprecated setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
   })
 
   test('search shows visible settings but excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should only show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-
-    // Should not show hidden or deprecated settings
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
   })
 
   test('search by setting name excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
 
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Hidden')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
 
-    // Search specifically for hidden setting by name
-    await searchBox.clear()
-    await searchBox.fill('Hidden')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Deprecated')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
 
-    // Should not show the hidden setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-
-    // Search specifically for deprecated setting by name
-    await searchBox.clear()
-    await searchBox.fill('Deprecated')
-
-    // Should not show the deprecated setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
-
-    // Search for visible setting by name - should work
-    await searchBox.clear()
-    await searchBox.fill('Visible')
-
-    // Should show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Visible')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
   })
 })

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -102,6 +102,7 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
     // await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
@@ -928,7 +929,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'Comfy.LinkRelease.ActionShift',
         'context menu'
       )
-      await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl',
+        'v1 (legacy)'
+      )
 
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -994,6 +998,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'Comfy.LinkRelease.ActionShift',
         'search box'
       )
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl',
+        'v1 (legacy)'
+      )
 
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -1048,6 +1056,11 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+
     // Setup workflow with a KSampler node
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.nodeOps.waitForGraphNodes(0)

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Nodes Image Preview', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  async function loadImageOnNode(comfyPage: ComfyPage) {
+    const loadImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
+    const { x, y } = await loadImageNode.getPosition()
+
+    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+      dropPosition: { x, y }
+    })
+
+    const imagePreview = comfyPage.page.locator('.image-preview')
+    await expect(imagePreview).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview).toContainText('x')
+
+    return imagePreview
+  }
+
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('opens mask editor from image preview button', async ({
+    comfyPage
+  }) => {
+    const imagePreview = await loadImageOnNode(comfyPage)
+
+    await imagePreview.locator('[role="img"]').hover()
+    await comfyPage.page.getByLabel('Edit or mask image').click()
+
+    await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
+  })
+
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('shows image context menu options', async ({ comfyPage }) => {
+    await loadImageOnNode(comfyPage)
+
+    const nodeHeader = comfyPage.vueNodes.getNodeByTitle('Load Image')
+    await nodeHeader.click()
+    await nodeHeader.click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible()
+    await expect(contextMenu.getByText('Open Image')).toBeVisible()
+    await expect(contextMenu.getByText('Copy Image')).toBeVisible()
+    await expect(contextMenu.getByText('Save Image')).toBeVisible()
+    await expect(contextMenu.getByText('Open in Mask Editor')).toBeVisible()
+  })
+})

global.d.ts

@@ -5,9 +5,33 @@ declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
 
+interface ImpactQueueFunction {
+  (...args: unknown[]): void
+  a?: unknown[][]
+}
+
+type GtagGetFieldName = 'client_id' | 'session_id' | 'session_number'
+
+interface GtagGetFieldValueMap {
+  client_id: string | number | undefined
+  session_id: string | number | undefined
+  session_number: string | number | undefined
+}
+
+interface GtagFunction {
+  <TField extends GtagGetFieldName>(
+    command: 'get',
+    targetId: string,
+    fieldName: TField,
+    callback: (value: GtagGetFieldValueMap[TField]) => void
+  ): void
+  (...args: unknown[]): void
+}
+
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
+    ga_measurement_id?: string
     mixpanel_token?: string
     require_whitelist?: boolean
     subscription_required?: boolean
@@ -31,12 +55,10 @@ interface Window {
       badge?: string
     }
   }
-  __ga_identity__?: {
-    client_id?: string
-    session_id?: string
-    session_number?: string
-  }
   dataLayer?: Array<Record<string, unknown>>
+  gtag?: GtagFunction
+  ire_o?: string
+  ire?: ImpactQueueFunction
 }
 
 interface Navigator {

index.html

@@ -35,18 +35,6 @@
         background-size: cover;
         background-repeat: no-repeat;
       }
-      #vue-app:has(#loading-logo) {
-        display: contents;
-        color: var(--fg-color);
-        & #loading-logo {
-          place-self: center;
-          font-size: clamp(2px, 1vw, 6px);
-          line-height: 1;
-          overflow: hidden;
-          max-width: 100vw;
-          border-radius: 20ch;
-        }
-      }
       .visually-hidden {
         position: absolute;
         width: 1px;
@@ -65,36 +53,6 @@
   <body class="litegraph grid">
     <div id="vue-app">
       <span class="visually-hidden" role="status">Loading ComfyUI...</span>
-      <svg
-        width="520"
-        height="520"
-        viewBox="0 0 520 520"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        id="loading-logo"
-      >
-        <mask
-          id="mask0_227_285"
-          style="mask-type: alpha"
-          maskUnits="userSpaceOnUse"
-          x="0"
-          y="0"
-          width="520"
-          height="520"
-        >
-          <path
-            d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z"
-            fill="#EEFF30"
-          />
-        </mask>
-        <g mask="url(#mask0_227_285)">
-          <rect y="0.751831" width="520" height="520" fill="#172DD7" />
-          <path
-            d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z"
-            fill="#F0FF41"
-          />
-        </g>
-      </svg>
     </div>
     <script type="module" src="src/main.ts"></script>
   </body>

knip.config.ts

@@ -64,7 +64,8 @@ const config: KnipConfig = {
   },
   tags: [
     '-knipIgnoreUnusedButUsedByCustomNodes',
-    '-knipIgnoreUnusedButUsedByVueNodesBranch'
+    '-knipIgnoreUnusedButUsedByVueNodesBranch',
+    '-knipIgnoreUsedByStackedPR'
   ]
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.39.10",
+  "version": "1.41.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -70,13 +70,14 @@
     "@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",
-    "@tiptap/extension-table-cell": "^2.10.4",
-    "@tiptap/extension-table-header": "^2.10.4",
-    "@tiptap/extension-table-row": "^2.10.4",
-    "@tiptap/starter-kit": "^2.10.4",
+    "@tiptap/core": "catalog:",
+    "@tiptap/extension-link": "catalog:",
+    "@tiptap/extension-table": "catalog:",
+    "@tiptap/extension-table-cell": "catalog:",
+    "@tiptap/extension-table-header": "catalog:",
+    "@tiptap/extension-table-row": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@xterm/addon-fit": "^0.10.0",
@@ -93,9 +94,9 @@
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
-    "glob": "^11.0.3",
+    "glob": "catalog:",
     "jsonata": "catalog:",
-    "jsondiffpatch": "^0.6.0",
+    "jsondiffpatch": "catalog:",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "catalog:",
@@ -193,7 +194,7 @@
   },
   "pnpm": {
     "overrides": {
-      "vite": "^8.0.0-beta.8"
+      "vite": "catalog:"
     }
   }
 }

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

@@ -12,6 +12,12 @@
   icon-sets: from-folder(comfy, './packages/design-system/src/icons');
 }
 
+/* Safelist dynamic comfy icons for node library folders */
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
+
+/* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
+@source inline("icon-[comfy--{load-image,save-image,load-video,save-video,load-3-d,save-glb,image-batch,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,clip-text-encode,get-video-components,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0}]");
+
 @custom-variant touch (@media (hover: none));
 
 @theme {
@@ -1186,7 +1192,7 @@ button.comfy-queue-btn {
 .graphdialog {
   min-height: 1em;
   background-color: var(--comfy-menu-bg);
-  z-index: 41; /* z-index is set to 41 here in order to appear over selection-overlay-container which should have a z-index of 40 */
+  z-index: 1500;
 }
 
 .graphdialog .name {

packages/design-system/src/icons/bfl.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12672)">
+<path d="M365.047 229.802H310.584L256.118 153.072L86.2157 392.168H140.796L256.115 229.807H310.581L195.261 392.168H249.994L365.047 229.802L512 436.698H470.893V436.7H426.019V392.343L365.047 306.532L304.415 392.178V436.698H163.632L163.629 436.703H109.164L109.167 436.698H-0.105347L256.118 76L365.047 229.802Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1471_12672">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/bria.svg

@@ -0,0 +1,18 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12667)">
+<g clip-path="url(#clip1_1471_12667)">
+<path d="M0.307203 236.902C1.1008 227.43 4.48 211.021 6.5792 201.139C23.5008 121.805 83.0208 46.1824 160.691 20.3776V389.734H411.443C419.84 389.734 446.259 381.158 455.168 377.446C468.685 371.814 480.691 363.648 491.597 354.074C465.357 424.038 401.024 480.896 329.242 501.094C314.01 505.37 290.611 510.694 275.226 512H239.59C223.667 508.16 207.155 507.136 191.206 503.117C103.936 481.152 29.7984 406.63 8.704 318.925C5.0176 303.59 4.0704 287.744 0.307203 272.538C1.024 260.89 -0.665597 248.397 0.307203 236.877V236.902Z" fill="#8E4CFF"/>
+<path d="M265.062 211.43H375.808C378.394 211.43 392.55 217.498 395.75 219.494C427.213 238.925 420.122 291.226 384.794 301.952C382.771 302.566 366.669 305.69 365.619 305.69H268.877L265.062 301.875V211.456V211.43Z" fill="#8E4CFF"/>
+<path d="M265.062 137.549V48.4096H373.248C374.861 48.4096 384.205 53.8624 386.611 55.424C406.528 68.3776 414.49 96.5376 401.152 117.069C398.106 121.754 380.339 137.574 375.808 137.574H265.062V137.549Z" fill="#8E4CFF"/>
+<path d="M489.062 147.738C496.128 167.706 505.523 187.264 506.906 208.845L491.674 192.282C477.773 180.736 460.928 174.003 443.29 170.624L489.062 147.738Z" fill="#8E4CFF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1471_12667">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1471_12667">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/bytedance.svg

@@ -0,0 +1,13 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12658)">
+<path d="M324.094 389.858L284.667 379.567V191.5L326.871 180.816C350.01 174.941 369.446 170.154 370.371 170.339C371.112 170.339 371.667 222.027 371.667 285.326V400.334L367.594 400.15C365.189 400.15 345.566 395.361 324.094 389.835V389.857V389.858Z" fill="#00C8D2"/>
+<path d="M138.667 343.325C138.667 279.602 139.229 227.339 140.166 227.339C140.914 227.154 160.573 231.998 184.164 237.913L226.667 248.65L226.292 342.975L225.73 437.278L187.535 447.107C166.565 452.463 146.906 457.47 144.097 458.029L138.667 459.334V343.325Z" fill="#3C8CFF"/>
+<path d="M423.667 248.299C423.667 38.7081 423.853 27.4506 427.037 28.3797C428.722 28.9368 445.386 33.1843 463.921 37.8029C482.458 42.6075 500.807 47.2031 504.739 48.1312L511.667 49.9884L511.293 248.67L510.731 447.539L472.722 457.148C451.939 462.486 432.279 467.291 429.284 468.057L423.667 469.334V248.299Z" fill="#78E6DC"/>
+<path d="M-0.333038 248.845C-0.333038 140.208 0.222275 51.334 1.14852 51.334C1.88822 51.334 21.3242 56.1412 44.4631 61.8769L86.667 72.583V248.66C86.667 345.267 86.296 424.55 85.9262 424.55C85.3709 424.55 65.7494 429.544 42.4262 435.466L-0.333038 446.334V248.823V248.844V248.845Z" fill="#325AB4"/>
+</g>
+<defs>
+<clipPath id="clip0_1471_12658">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/clip-text-encode.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34 3.11111V6.07407C34 6.68795 33.4163 7.18519 32.6956 7.18519C31.975 7.18519 31.3913 6.68795 31.3913 6.07407V4.22222H25.3042V19.7778H28.3479C29.0685 19.7778 29.6523 20.275 29.6523 20.8889C29.6523 21.5028 29.0685 22 28.3479 22H19.6521C18.9315 22 18.3477 21.5028 18.3477 20.8889C18.3477 20.275 18.9315 19.7778 19.6521 19.7778H22.6958V4.22222H16.6087V6.07407C16.6087 6.68795 16.025 7.18519 15.3044 7.18519C14.5837 7.18519 14 6.68795 14 6.07407V3.11111C14 2.49723 14.5837 2 15.3044 2H32.6959C33.4166 2 34 2.49723 34 3.11111Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/comfy-c.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 9">
+  <path d="M1.82148 8.68376C1.61587 8.68376 1.44996 8.60733 1.34177 8.46284C1.23057 8.31438 1.20157 8.10711 1.26219 7.89434L1.50561 7.03961C1.52502 6.97155 1.51151 6.89831 1.46918 6.8417C1.42684 6.7852 1.3606 6.75194 1.29025 6.75194H0.590376C0.384656 6.75194 0.21875 6.67562 0.110614 6.53113C-0.000591531 6.38256 -0.0295831 6.17529 0.0310774 5.96252L0.867308 3.03952L0.959638 2.71838C1.08375 2.28258 1.53638 1.9284 1.96878 1.9284H2.80622C2.90615 1.9284 2.99406 1.86177 3.02157 1.76508L3.29852 0.79284C3.4225 0.357484 3.87514 0.0033043 4.30753 0.0033043L6.09854 0.000112775L7.40967 0C7.61533 0 7.78124 0.0763259 7.88937 0.220813C8.00058 0.369269 8.02957 0.576538 7.96895 0.78931L7.59405 2.10572C7.4701 2.54096 7.01746 2.89503 6.58507 2.89503L4.79008 2.89844H3.95292C3.8531 2.89844 3.7653 2.96496 3.73762 3.06155L3.03961 5.49964C3.02008 5.56781 3.03359 5.64127 3.07604 5.69787C3.11837 5.75437 3.18461 5.78763 3.2549 5.78763C3.25507 5.78763 4.44105 5.78532 4.44105 5.78532H5.7483C5.95396 5.78532 6.11986 5.86164 6.228 6.00613C6.33921 6.1547 6.3682 6.36197 6.30754 6.57474L5.93263 7.89092C5.80869 8.32628 5.35605 8.68034 4.92366 8.68034L3.12872 8.68376H1.82148Z" fill="#8A8A8A"/>
+</svg>
+

packages/design-system/src/icons/compare_images.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.9316 2.13269H25.2057V3.57269H29.9316C31.1241 3.57269 32.0916 4.54018 32.0916 5.73269V18.0646C32.0916 19.2571 31.1241 20.2246 29.9316 20.2246H25.2057V21.6646H29.9316C30.8859 21.6646 31.8019 21.2849 32.4768 20.6099C33.1516 19.9349 33.5314 19.019 33.5314 18.0647V5.73281C33.5314 4.77843 33.1518 3.86249 32.4768 3.18761C31.8018 2.51273 30.8858 2.13293 29.9316 2.13293V2.13269Z" fill="#8A8A8A"/>
+<path d="M30.2025 15.7602C30.5531 15.7602 30.8738 15.5652 31.0341 15.2539C31.1953 14.9427 31.1691 14.5677 30.9656 14.2817L29.0269 11.5601L26.7994 8.44014C26.6231 8.19359 26.3391 8.04733 26.0363 8.04733C25.7335 8.04733 25.4494 8.19358 25.2731 8.44014L25.2056 8.53389V15.7601L30.2025 15.7602Z" fill="#8A8A8A"/>
+<path d="M23.0457 1.00018C22.6482 1.00018 22.3257 1.32269 22.3257 1.72018V2.13269H17.5999C16.6455 2.13269 15.7296 2.51237 15.0547 3.18737C14.3798 3.86237 14 4.77831 14 5.73257V18.0645C14 19.0189 14.3797 19.9348 15.0547 20.6097C15.7297 21.2846 16.6456 21.6644 17.5999 21.6644H22.3257V21.88C22.3257 22.2775 22.6482 22.6 23.0457 22.6C23.4432 22.6 23.7657 22.2775 23.7657 21.88V1.72C23.7657 1.32251 23.4432 1.00018 23.0457 1.00018ZM22.3257 15.7602H17.3289C16.9783 15.7602 16.6577 15.5652 16.4974 15.2539C16.3361 14.9427 16.3624 14.5677 16.5658 14.2817L17.4471 13.0433L18.6208 11.397H18.6199C18.7961 11.1495 19.0802 11.0033 19.383 11.0033C19.6867 11.0033 19.9708 11.1495 20.1471 11.397L21.318 13.0433L21.6517 13.5233L22.3258 12.568L22.3257 15.7602Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/compare_videos.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.9316 2.13269H25.2057V3.57269H29.9316C31.1241 3.57269 32.0916 4.54018 32.0916 5.73269V18.0646C32.0916 19.2571 31.1241 20.2246 29.9316 20.2246H25.2057V21.6646H29.9316C30.8859 21.6646 31.8019 21.2849 32.4768 20.6099C33.1516 19.9349 33.5314 19.019 33.5314 18.0647V5.73281C33.5314 4.77843 33.1518 3.86249 32.4768 3.18761C31.8018 2.51273 30.8858 2.13293 29.9316 2.13293V2.13269Z" fill="#8A8A8A"/>
+<path d="M29.0586 10.918C29.5299 11.2086 29.703 11.7469 29.7031 12.1836C29.7031 12.6202 29.5288 13.1584 29.0576 13.4492L25 16.0273V12.4717L25.6396 12.0801L25 11.6865V8.33887L29.0586 10.918Z" fill="#8A8A8A"/>
+<path d="M23.0459 1C23.4433 1.0001 23.7656 1.32234 23.7656 1.71973V21.8799C23.7656 22.2773 23.4433 22.5995 23.0459 22.5996C22.6484 22.5996 22.3262 22.2774 22.3262 21.8799V21.6641H17.5996C16.6454 21.664 15.7296 21.2842 15.0547 20.6094C14.3798 19.9345 14 19.0188 14 18.0645V5.73242C14 4.77822 14.3799 3.86249 15.0547 3.1875C15.7295 2.51256 16.6453 2.13288 17.5996 2.13281H22.3262V1.71973C22.3263 1.32236 22.6485 1 23.0459 1ZM19.3008 5.00195C18.5469 5.04101 17.991 5.7594 18.001 6.48438V17.8672C17.9877 18.3783 18.241 18.8887 18.667 19.1621L18.6709 19.165C19.1025 19.4368 19.6599 19.4326 20.0879 19.1494L22 17.9336V14.3105L20.7266 15.0918V9.06055L22 9.84277V6.43359L20.0869 5.21875C19.8834 5.08395 19.6474 5.00777 19.4072 5L19.3008 5.00195Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/credits.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0zm-13.239 0a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0zm6.619 6.619a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0zm0-13.238a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"/>
+</svg>

packages/design-system/src/icons/crop_video.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3697 9.5C22.4578 9.50289 22.5441 9.53066 22.6187 9.58008L25.9107 11.6699C26.0837 11.7765 26.1471 11.9746 26.1471 12.1348C26.147 12.2949 26.0827 12.4921 25.9098 12.5986L22.6187 14.6895C22.4617 14.7931 22.2574 14.7941 22.0992 14.6943L22.0982 14.6934C21.9419 14.5931 21.8483 14.4063 21.8531 14.2188V10.0439C21.8496 9.77812 22.0541 9.51424 22.3307 9.5H22.3697ZM22.8619 13.2754L24.6646 12.1338L22.8619 10.9893V13.2754Z" fill="#8A8A8A"/>
+<path d="M18 1.2002C18.4418 1.2002 18.7998 1.55817 18.7998 2V5.2002H29C29.9941 5.2002 30.7998 6.00589 30.7998 7V17.7002H34C34.4418 17.7002 34.7998 18.0582 34.7998 18.5C34.7998 18.9418 34.4418 19.2998 34 19.2998H30.7998V22.5C30.7998 22.9418 30.4418 23.2998 30 23.2998C29.5582 23.2998 29.2002 22.9418 29.2002 22.5V19.2998H19C18.0059 19.2998 17.2002 18.4941 17.2002 17.5V6.7998H14C13.5582 6.7998 13.2002 6.44183 13.2002 6C13.2002 5.55817 13.5582 5.2002 14 5.2002H17.2002V2C17.2002 1.55817 17.5582 1.2002 18 1.2002ZM18.7998 17.5C18.7998 17.6105 18.8895 17.7002 19 17.7002H29.2002V7C29.2002 6.88954 29.1105 6.79981 29 6.7998H18.7998V17.5Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/depth_to_image.svg

@@ -0,0 +1,12 @@
+<svg width="49" height="24" viewBox="0 0 49 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.2461 5C47.9942 5.00009 48.6152 5.59922 48.6152 6.32031V16.8799C48.6152 17.601 47.9942 18.2001 47.2461 18.2002H31.9844C31.2363 18.2 30.6152 17.6009 30.6152 16.8799V6.32031C30.6152 5.59931 31.2363 5.00024 31.9844 5H47.2461ZM31.7891 14.918V16.8799C31.7891 16.9939 31.8661 17.0682 31.9844 17.0684H47.2461C47.3644 17.0682 47.4414 16.994 47.4414 16.8799V15.2656L44.085 12.6787L41.3154 14.5166C41.1091 14.6507 40.8115 14.6383 40.6182 14.4873L36.8516 11.5527L31.7891 14.918ZM31.9844 6.13184C31.8662 6.13202 31.7891 6.20628 31.7891 6.32031V13.5391L36.54 10.3799C36.6194 10.3255 36.7125 10.2913 36.8086 10.2803C36.9629 10.2641 37.1232 10.3091 37.2432 10.4033L41.0098 13.3447L43.7852 11.5059C43.9915 11.3718 44.2891 11.3841 44.4824 11.5352L47.4414 13.8154V6.32031C47.4414 6.20619 47.3645 6.13191 47.2461 6.13184H31.9844ZM40.9854 7.63965C41.9503 7.63986 42.7459 8.40684 42.7461 9.33691C42.7461 10.2671 41.9505 11.034 40.9854 11.0342C40.0201 11.0342 39.2236 10.2673 39.2236 9.33691C39.2238 8.40671 40.0202 7.63965 40.9854 7.63965ZM40.9854 8.77148C40.6545 8.77148 40.3986 9.01812 40.3984 9.33691C40.3984 9.65587 40.6544 9.90332 40.9854 9.90332C41.3161 9.90312 41.5723 9.65574 41.5723 9.33691C41.5721 9.01825 41.316 8.77168 40.9854 8.77148Z" fill="#8A8A8A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6398 11.7209C27.8739 11.9552 27.874 12.3353 27.6398 12.5695L25.0948 15.1154C24.8607 15.3496 24.4805 15.3492 24.2462 15.1154C24.0119 14.8811 24.0119 14.5011 24.2462 14.2668L25.7638 12.7492L18.2159 12.7492C17.8845 12.7492 17.6153 12.481 17.6153 12.1496C17.6153 11.8182 17.8846 11.55 18.2159 11.55L25.7726 11.55L24.2462 10.0236C24.0119 9.78931 24.0119 9.40931 24.2462 9.175C24.4805 8.94094 24.8606 8.94077 25.0948 9.175L27.6398 11.7209Z" fill="#8A8A8A"/>
+<rect x="0.5" y="4.5" width="14" height="14" rx="2.5" fill="#1C1C24" stroke="#8A8A8A"/>
+<circle cx="9.04375" cy="10.6062" r="3.98125" fill="url(#paint0_radial_1684_13636)"/>
+<defs>
+<radialGradient id="paint0_radial_1684_13636" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.53125 10.7687) rotate(-139.289) scale(4.6091)">
+<stop offset="0.00961538" stop-color="white"/>
+<stop offset="1" stop-color="#686868"/>
+</radialGradient>
+</defs>
+</svg>

packages/design-system/src/icons/depth_to_video.svg

@@ -0,0 +1,12 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0245 11.721C28.2587 11.9553 28.2588 12.3354 28.0245 12.5696L25.4796 15.1155C25.2454 15.3497 24.8653 15.3494 24.631 15.1155C24.3967 14.8812 24.3967 14.5012 24.631 14.2669L26.1485 12.7493L18.6007 12.7493C18.2693 12.7493 18.0001 12.4811 18.0001 12.1497C18.0001 11.8184 18.2693 11.5501 18.6007 11.5501L26.1573 11.5501L24.631 10.0238C24.3966 9.78943 24.3966 9.40944 24.631 9.17512C24.8653 8.94106 25.2454 8.94089 25.4796 9.17512L28.0245 11.721Z" fill="#8A8A8A"/>
+<rect x="0.5" y="4.61523" width="14" height="14" rx="2.5" fill="#1C1C24" stroke="#8A8A8A"/>
+<circle cx="9.04375" cy="10.7215" r="3.98125" fill="url(#paint0_radial_1694_13931)"/>
+<path d="M44.203 5C46.2974 5 48.01 6.71671 48.01 8.84956V14.3804C48.01 16.5133 46.2974 18.23 44.203 18.23H34.807C32.7125 18.23 31 16.5133 31 14.3804V8.84956C31 6.71671 32.7125 5 34.807 5H44.203ZM34.807 6.37812C33.4315 6.37812 32.3499 7.48086 32.3499 8.84956V14.3804C32.3499 15.7491 33.4315 16.8519 34.807 16.8519H44.203C45.5785 16.8519 46.6601 15.7491 46.6601 14.3804V8.84956C46.6601 7.48086 45.5785 6.37812 44.203 6.37812H34.807ZM37.5598 8.12949C37.6752 8.13322 37.7884 8.16994 37.8862 8.23544L42.193 11.0009C42.4194 11.1419 42.5025 11.403 42.5025 11.615C42.5025 11.8269 42.419 12.0878 42.1927 12.2288L37.8865 14.9946C37.6809 15.132 37.4135 15.1341 37.2063 15.002L37.2046 15.0009C37 14.8683 36.8785 14.6208 36.8848 14.3727V8.84956C36.88 8.49772 37.1469 8.14891 37.5089 8.13007L37.5598 8.12949ZM38.2041 13.1249L40.5626 11.6144L38.2041 10.0996V13.1249ZM42.1753 11.8255C42.1606 11.8574 42.1424 11.887 42.1205 11.913L42.1506 11.8717C42.1598 11.8571 42.168 11.8414 42.1753 11.8255Z" fill="#8A8A8A"/>
+<defs>
+<radialGradient id="paint0_radial_1694_13931" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.53125 10.884) rotate(-139.289) scale(4.6091)">
+<stop offset="0.00961538" stop-color="white"/>
+<stop offset="1" stop-color="#686868"/>
+</radialGradient>
+</defs>
+</svg>

packages/design-system/src/icons/edit_image.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.2435 1.33301C33.4808 1.33312 34.4935 2.34575 34.4935 3.58301V11.2422C35.9784 11.809 36.5649 13.8317 35.3109 15.0859C28.4415 21.9551 28.9659 21.498 28.681 21.5654C25.4267 22.3753 25.6288 22.3379 25.5013 22.3379L25.4935 22.3301C25.0063 22.3298 24.647 21.8727 24.767 21.4004C25.5693 18.2061 25.5088 18.2582 25.7113 18.0557L30.7767 12.9893C30.2817 12.6244 29.582 12.1127 28.6029 11.4082L24.5423 14.8135C24.2463 15.0618 23.7681 15.0618 23.472 14.8135L17.1341 9.49805L13.4955 12.042V17.0811C13.4955 17.4933 13.8322 17.8308 14.2445 17.8311H23.2445C23.6568 17.8313 23.9945 18.1687 23.9945 18.5811C23.9943 18.9933 23.6567 19.3309 23.2445 19.3311H14.2445C13.0073 19.3308 11.9955 18.3182 11.9955 17.0811V3.58301C11.9955 2.34583 13.0073 1.33325 14.2445 1.33301H32.2435ZM26.9183 18.9629L26.5209 20.5459L28.1039 20.1484L32.2982 15.9521C32.0571 15.7222 31.6993 15.3563 31.1127 14.7676L26.9183 18.9629ZM34.4857 13.4219C34.4857 12.672 33.5781 12.3043 33.0531 12.8291L32.7962 13.085C32.7438 13.1746 32.6636 13.2544 32.5629 13.3184L32.1712 13.71L33.3558 14.8945L34.2377 14.0137C34.3951 13.8562 34.4856 13.6468 34.4857 13.4219ZM14.2445 2.83301C13.8322 2.83325 13.4955 3.1707 13.4955 3.58301V10.4395L16.6937 8.14844C16.9973 7.93835 17.4383 7.951 17.7191 8.18652L24.0111 13.4639L28.0267 10.0967C28.3076 9.86126 28.7554 9.84805 29.0589 10.0645L31.8558 11.9102L31.9955 11.7715C32.2782 11.4887 32.6198 11.2892 32.9935 11.1816V3.58301C32.9935 3.17062 32.6559 2.83312 32.2435 2.83301H14.2445ZM24.2494 4.33301C25.4866 4.33301 26.4991 5.3449 26.4994 6.58203C26.4994 7.81936 25.4868 8.83203 24.2494 8.83203C23.0122 8.8318 22.0004 7.81922 22.0004 6.58203C22.0006 5.34504 23.0123 4.33323 24.2494 4.33301ZM24.2494 5.83301C23.8372 5.83323 23.4996 6.16991 23.4994 6.58203C23.4994 6.99435 23.8371 7.3318 24.2494 7.33203C24.6618 7.33203 24.9994 6.99449 24.9994 6.58203C24.9991 6.16977 24.6617 5.83301 24.2494 5.83301Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/edit_video.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.6289 0C30.5839 0.000217009 32.9999 2.46547 33 5.52832V11.666L31.0957 13.3594V5.52832C31.0956 3.56289 29.5694 1.9797 27.6289 1.97949H14.3711C12.4306 1.9797 10.9044 3.56289 10.9043 5.52832V13.4717C10.9044 15.4371 12.4306 17.0203 14.3711 17.0205H27V19H14.3711C11.4161 18.9998 9.00008 16.5345 9 13.4717V5.52832C9.00008 2.46547 11.4161 0.000217423 14.3711 0H27.6289ZM18.2559 4.49414C18.4185 4.49956 18.578 4.55256 18.7158 4.64648L24.793 8.61816C25.1122 8.82076 25.2295 9.19571 25.2295 9.5C25.2295 9.80434 25.1113 10.1792 24.792 10.3818L18.7168 14.3535C18.4268 14.5509 18.0492 14.5538 17.7568 14.3643L17.7539 14.3623C17.4655 14.1718 17.2938 13.8161 17.3027 13.46V5.52832C17.296 5.02308 17.6729 4.52218 18.1836 4.49512L18.2559 4.49414ZM19.1641 11.668L22.4922 9.49902L19.1641 7.32422V11.668Z" fill="#8A8A8A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.784 8.33301C40.5601 8.37159 41.2873 8.69547 41.8368 9.24316L41.8407 9.24707C42.4245 9.83307 42.7546 10.6211 42.7547 11.4551C42.7547 11.8685 42.6746 12.2762 42.5155 12.6572C42.3585 13.0341 42.1305 13.3744 41.8446 13.6631L41.8397 13.667L41.1717 14.3369C41.0982 14.4106 41.0176 14.4759 40.9325 14.5332C40.8753 14.6183 40.8098 14.6989 40.7362 14.7725L33.4803 22.0264C33.2633 22.2432 32.9882 22.3939 32.6883 22.459L29.9276 23.0576C29.396 23.1727 28.8415 23.0106 28.4569 22.626C28.0723 22.2413 27.91 21.6869 28.0252 21.1553L28.6239 18.3945L28.6522 18.2832C28.7275 18.0268 28.8667 17.7924 29.0565 17.6025L36.3124 10.3477L36.4335 10.2383C36.4711 10.2075 36.51 10.1782 36.5497 10.1514C36.6059 10.0679 36.6713 9.98891 36.745 9.91504L37.4139 9.24609L37.4188 9.24023C38.0053 8.65788 38.7927 8.3291 39.6278 8.3291L39.784 8.33301ZM30.1874 18.7344L29.5887 21.4941L32.3485 20.8955L38.9071 14.3369L36.745 12.1758L30.1874 18.7344ZM39.6278 9.92871C39.2325 9.92871 38.8609 10.078 38.5751 10.3477L40.7333 12.5059C40.863 12.3681 40.9676 12.2125 41.0389 12.041C41.0962 11.9038 41.1326 11.758 41.1473 11.6074L41.1551 11.4551C41.155 11.0484 40.9947 10.6649 40.7069 10.376C40.418 10.0883 40.0349 9.92882 39.6278 9.92871Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/enhance.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.6635 4.83333L30.6632 7.83286M16.9985 5.49937V9.49874M30.9971 13.4981V17.4975M21.998 1.5V3.49969M18.9983 7.49906H14.9987M32.9969 15.4978H28.9973M22.9979 2.49984H20.9981M33.6369 3.13979L32.3571 1.85999C32.2446 1.74632 32.1106 1.65609 31.963 1.59451C31.8154 1.53293 31.6571 1.50122 31.4971 1.50122C31.3372 1.50122 31.1789 1.53293 31.0313 1.59451C30.8837 1.65609 30.7497 1.74632 30.6372 1.85999L14.3588 18.1374C14.2451 18.2499 14.1549 18.3838 14.0933 18.5314C14.0317 18.679 14 18.8374 14 18.9973C14 19.1572 14.0317 19.3156 14.0933 19.4631C14.1549 19.6107 14.2451 19.7447 14.3588 19.8572L15.6387 21.137C15.7505 21.2518 15.8842 21.3432 16.0319 21.4055C16.1796 21.4679 16.3383 21.5 16.4986 21.5C16.6589 21.5 16.8176 21.4679 16.9653 21.4055C17.113 21.3432 17.2467 21.2518 17.3585 21.137L33.6369 4.85952C33.7518 4.74771 33.8432 4.61402 33.9055 4.46633C33.9679 4.31865 34 4.15996 34 3.99965C34 3.83934 33.9679 3.68066 33.9055 3.53297C33.8432 3.38528 33.7518 3.25159 33.6369 3.13979Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/enhance_3dmodel.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.7844 13.8522L29.9803 15.6814M24.2027 8.42231V10.8612M26.6082 16.2013V18.6402M31.7844 8V9.21945M23 9.64176H25.4055M25.4055 17.4207H27.8109M31.183 8.60973H32.3857M27.1899 11.8036L27.9597 11.0231C28.0273 10.9538 28.1079 10.8988 28.1966 10.8612C28.2854 10.8237 28.3807 10.8043 28.4768 10.8043C28.573 10.8043 28.6683 10.8237 28.757 10.8612C28.8458 10.8988 28.9263 10.9538 28.994 11.0231L38.7842 20.9494C38.8526 21.018 38.9069 21.0997 38.9439 21.1897C38.9809 21.2797 39 21.3763 39 21.4738C39 21.5713 38.9809 21.6679 38.9439 21.7579C38.9069 21.8479 38.8526 21.9296 38.7842 21.9982L38.0145 22.7786C37.9472 22.8487 37.8668 22.9044 37.778 22.9424C37.6892 22.9804 37.5937 23 37.4973 23C37.4009 23 37.3054 22.9804 37.2166 22.9424C37.1278 22.9044 37.0474 22.8487 36.9801 22.7786L27.1899 12.8523C27.1208 12.7841 27.0659 12.7026 27.0284 12.6125C26.9909 12.5225 26.9716 12.4257 26.9716 12.3279C26.9716 12.2302 26.9909 12.1334 27.0284 12.0433C27.0659 11.9533 27.1208 11.8717 27.1899 11.8036Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5908 0.00488281C18.644 0.010556 18.6968 0.0211124 18.748 0.0361328L18.8496 0.0732422L27.4863 3.82031C27.7975 3.956 27.9999 4.25977 27.999 4.59668V4.88281L25.2773 6.32324L19.3633 8.8916V17.8164L24 15.8018V15.959L19.2197 18.0361V18.0381L24 15.9609V17.6523L18.8496 19.8877C18.6546 19.9719 18.4361 19.982 18.2353 19.9189L18.1504 19.8877L9.51367 16.1396L9.40332 16.082C9.15808 15.9302 9.00203 15.6645 9 15.3721V4.59668C8.99911 4.25968 9.20241 3.95595 9.51367 3.82031L18.1494 0.0732422L18.2852 0.0263672C18.3319 0.0145036 18.3802 0.00679393 18.4287 0.00292969L18.5908 0.00488281ZM10.583 14.9121L17.7803 18.0381V18.0361L10.583 14.9102V14.9121ZM10.7266 14.8154L17.6357 17.8164V8.8916L10.7266 5.8916V14.8154ZM18.5 7.57617L11.6348 4.59668L11.6328 4.59863L18.5 7.57812L25.3672 4.59863L25.3643 4.59668L18.5 7.57617ZM11.9932 4.59668L18.5 7.41895L25.0059 4.59668L18.5 1.76758L11.9932 4.59668ZM18.4394 0.146484C18.359 0.152931 18.28 0.173119 18.207 0.205078L9.57129 3.95215C9.39972 4.0269 9.26947 4.16303 9.20019 4.32617C9.2698 4.16409 9.4004 4.02953 9.57129 3.95508L18.207 0.207031C18.28 0.175072 18.359 0.154884 18.4394 0.148438C18.5602 0.139301 18.6815 0.159598 18.792 0.207031L27.4287 3.95508C27.5993 4.02948 27.7311 4.16342 27.8008 4.3252C27.7314 4.16231 27.6 4.02684 27.4287 3.95215L18.792 0.205078C18.6815 0.157614 18.5602 0.137346 18.4394 0.146484Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/enhance_video.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.6289 0C27.5839 0.000217454 29.9999 2.46547 30 5.52832V12.7998L27.8828 14.7041C28.0196 14.3204 28.0957 13.9056 28.0957 13.4717V5.52832C28.0956 3.56289 26.5694 1.9797 24.6289 1.97949H11.3711C9.4306 1.9797 7.90438 3.56289 7.9043 5.52832V13.4717C7.90437 15.4371 9.4306 17.0203 11.3711 17.0205H24.6289C24.8981 17.0205 25.1589 16.9884 25.4092 16.9307L23.1113 19H11.3711C8.41613 18.9998 6.00008 16.5345 6 13.4717V5.52832C6.00008 2.46547 8.41613 0.000217456 11.3711 0H24.6289ZM15.2559 4.49414C15.4185 4.49956 15.578 4.55256 15.7158 4.64648L21.793 8.61816C22.1122 8.82076 22.2295 9.19571 22.2295 9.5C22.2295 9.80434 22.1113 10.1792 21.792 10.3818L15.7168 14.3535C15.4268 14.5509 15.0492 14.5538 14.7568 14.3643L14.7539 14.3623C14.4655 14.1718 14.2938 13.8161 14.3027 13.46V5.52832C14.296 5.02308 14.6729 4.52218 15.1836 4.49512L15.2559 4.49414ZM16.1641 11.668L19.4922 9.49902L16.1641 7.32422V11.668Z" fill="#8A8A8A"/>
+<path d="M32.6395 13.0655L34.6395 15.0655M38.5 4.66675V7.33341M35.9728 17.7322V20.3988M32.6395 6.66675V8.00008M39.8333 6.00008H37.1667M37.3062 19.0655H34.6395M33.3062 7.33341H31.9728M37.7329 10.8255L36.8795 9.97218C36.8045 9.89639 36.7152 9.83623 36.6168 9.79517C36.5184 9.75411 36.4128 9.73297 36.3062 9.73297C36.1996 9.73297 36.094 9.75411 35.9956 9.79517C35.8972 9.83623 35.8079 9.89639 35.7329 9.97218L24.8795 20.8255C24.8037 20.9005 24.7436 20.9898 24.7025 21.0882C24.6615 21.1866 24.6403 21.2922 24.6403 21.3988C24.6403 21.5055 24.6615 21.6111 24.7025 21.7095C24.7436 21.8079 24.8037 21.8972 24.8795 21.9722L25.7329 22.8255C25.8074 22.9021 25.8965 22.963 25.995 23.0046C26.0935 23.0462 26.1993 23.0676 26.3062 23.0676C26.4131 23.0676 26.5189 23.0462 26.6174 23.0046C26.7158 22.963 26.805 22.9021 26.8795 22.8255L37.7329 11.9722C37.8095 11.8976 37.8704 11.8085 37.9119 11.71C37.9535 11.6115 37.9749 11.5057 37.9749 11.3988C37.9749 11.292 37.9535 11.1862 37.9119 11.0877C37.8704 10.9892 37.8095 10.9001 37.7329 10.8255Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/gemini.svg

@@ -0,0 +1,25 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12686)">
+<path d="M439.808 232.147C404.368 217.06 372.144 195.328 344.875 168.125C306.899 130.074 279.806 82.5466 266.411 30.4827C265.823 28.1703 264.481 26.1197 262.598 24.6551C260.714 23.1905 258.397 22.3953 256.011 22.3953C253.625 22.3953 251.307 23.1905 249.423 24.6551C247.54 26.1197 246.198 28.1703 245.611 30.4827C232.187 82.5399 205.09 130.062 167.125 168.125C139.853 195.325 107.63 217.056 72.192 232.147C58.3253 238.12 44.0747 242.92 29.4827 246.611C27.1561 247.182 25.0884 248.518 23.6102 250.403C22.132 252.288 21.3287 254.615 21.3287 257.011C21.3287 259.406 22.132 261.733 23.6102 263.618C25.0884 265.504 27.1561 266.839 29.4827 267.411C44.0747 271.08 58.2827 275.88 72.192 281.853C107.632 296.94 139.856 318.672 167.125 345.875C205.111 383.93 232.212 431.465 245.611 483.539C246.182 485.865 247.518 487.933 249.403 489.411C251.288 490.889 253.615 491.693 256.011 491.693C258.406 491.693 260.733 490.889 262.618 489.411C264.504 487.933 265.839 485.865 266.411 483.539C270.08 468.925 274.88 454.717 280.853 440.808C295.939 405.368 317.671 373.143 344.875 345.875C382.934 307.897 430.468 280.804 482.539 267.411C484.851 266.823 486.902 265.481 488.366 263.598C489.831 261.714 490.626 259.397 490.626 257.011C490.626 254.625 489.831 252.307 488.366 250.423C486.902 248.54 484.851 247.198 482.539 246.611C467.932 242.936 453.643 238.099 439.808 232.147Z" fill="#3186FF"/>
+<path d="M439.808 232.147C404.368 217.06 372.144 195.328 344.875 168.125C306.899 130.074 279.806 82.5466 266.411 30.4827C265.823 28.1703 264.481 26.1197 262.598 24.6551C260.714 23.1905 258.397 22.3953 256.011 22.3953C253.625 22.3953 251.307 23.1905 249.423 24.6551C247.54 26.1197 246.198 28.1703 245.611 30.4827C232.187 82.5399 205.09 130.062 167.125 168.125C139.853 195.325 107.63 217.056 72.192 232.147C58.3253 238.12 44.0747 242.92 29.4827 246.611C27.1561 247.182 25.0884 248.518 23.6102 250.403C22.132 252.288 21.3287 254.615 21.3287 257.011C21.3287 259.406 22.132 261.733 23.6102 263.618C25.0884 265.504 27.1561 266.839 29.4827 267.411C44.0747 271.08 58.2827 275.88 72.192 281.853C107.632 296.94 139.856 318.672 167.125 345.875C205.111 383.93 232.212 431.465 245.611 483.539C246.182 485.865 247.518 487.933 249.403 489.411C251.288 490.889 253.615 491.693 256.011 491.693C258.406 491.693 260.733 490.889 262.618 489.411C264.504 487.933 265.839 485.865 266.411 483.539C270.08 468.925 274.88 454.717 280.853 440.808C295.939 405.368 317.671 373.143 344.875 345.875C382.934 307.897 430.468 280.804 482.539 267.411C484.851 266.823 486.902 265.481 488.366 263.598C489.831 261.714 490.626 259.397 490.626 257.011C490.626 254.625 489.831 252.307 488.366 250.423C486.902 248.54 484.851 247.198 482.539 246.611C467.932 242.936 453.643 238.099 439.808 232.147Z" fill="url(#paint0_linear_1471_12686)"/>
+<path d="M439.808 232.147C404.368 217.06 372.144 195.328 344.875 168.125C306.899 130.074 279.806 82.5466 266.411 30.4827C265.823 28.1703 264.481 26.1197 262.598 24.6551C260.714 23.1905 258.397 22.3953 256.011 22.3953C253.625 22.3953 251.307 23.1905 249.423 24.6551C247.54 26.1197 246.198 28.1703 245.611 30.4827C232.187 82.5399 205.09 130.062 167.125 168.125C139.853 195.325 107.63 217.056 72.192 232.147C58.3253 238.12 44.0747 242.92 29.4827 246.611C27.1561 247.182 25.0884 248.518 23.6102 250.403C22.132 252.288 21.3287 254.615 21.3287 257.011C21.3287 259.406 22.132 261.733 23.6102 263.618C25.0884 265.504 27.1561 266.839 29.4827 267.411C44.0747 271.08 58.2827 275.88 72.192 281.853C107.632 296.94 139.856 318.672 167.125 345.875C205.111 383.93 232.212 431.465 245.611 483.539C246.182 485.865 247.518 487.933 249.403 489.411C251.288 490.889 253.615 491.693 256.011 491.693C258.406 491.693 260.733 490.889 262.618 489.411C264.504 487.933 265.839 485.865 266.411 483.539C270.08 468.925 274.88 454.717 280.853 440.808C295.939 405.368 317.671 373.143 344.875 345.875C382.934 307.897 430.468 280.804 482.539 267.411C484.851 266.823 486.902 265.481 488.366 263.598C489.831 261.714 490.626 259.397 490.626 257.011C490.626 254.625 489.831 252.307 488.366 250.423C486.902 248.54 484.851 247.198 482.539 246.611C467.932 242.936 453.643 238.099 439.808 232.147Z" fill="url(#paint1_linear_1471_12686)"/>
+<path d="M439.808 232.147C404.368 217.06 372.144 195.328 344.875 168.125C306.899 130.074 279.806 82.5466 266.411 30.4827C265.823 28.1703 264.481 26.1197 262.598 24.6551C260.714 23.1905 258.397 22.3953 256.011 22.3953C253.625 22.3953 251.307 23.1905 249.423 24.6551C247.54 26.1197 246.198 28.1703 245.611 30.4827C232.187 82.5399 205.09 130.062 167.125 168.125C139.854 195.325 107.63 217.056 72.192 232.147C58.3253 238.12 44.0747 242.92 29.4827 246.611C27.1561 247.182 25.0884 248.518 23.6102 250.403C22.132 252.288 21.3287 254.615 21.3287 257.011C21.3287 259.406 22.132 261.733 23.6102 263.618C25.0884 265.504 27.1561 266.839 29.4827 267.411C44.0747 271.08 58.2827 275.88 72.192 281.853C107.632 296.94 139.856 318.672 167.125 345.875C205.111 383.93 232.212 431.465 245.611 483.539C246.182 485.865 247.518 487.933 249.403 489.411C251.288 490.889 253.615 491.693 256.011 491.693C258.406 491.693 260.733 490.889 262.618 489.411C264.504 487.933 265.839 485.865 266.411 483.539C270.08 468.925 274.88 454.717 280.853 440.808C295.939 405.368 317.671 373.143 344.875 345.875C382.934 307.897 430.468 280.804 482.539 267.411C484.851 266.823 486.902 265.481 488.366 263.598C489.831 261.714 490.626 259.397 490.626 257.011C490.626 254.625 489.831 252.307 488.366 250.423C486.902 248.54 484.851 247.198 482.539 246.611C467.932 242.936 453.643 238.099 439.808 232.147Z" fill="url(#paint2_linear_1471_12686)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1471_12686" x1="149.333" y1="331.667" x2="234.667" y2="257" gradientUnits="userSpaceOnUse">
+<stop stop-color="#08B962"/>
+<stop offset="1" stop-color="#08B962" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1471_12686" x1="170.667" y1="118.333" x2="245.333" y2="235.667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F94543"/>
+<stop offset="1" stop-color="#F94543" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1471_12686" x1="74.6667" y1="289" x2="373.333" y2="257" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FABC12"/>
+<stop offset="0.46" stop-color="#FABC12" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_1471_12686">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/get-video-components.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.8593 13C35.4827 13 36.0007 13.4988 36.0009 14.0996V22.9004C36.0007 23.5012 35.4827 24 34.8593 24H22.1425C21.5191 24 21.0011 23.5012 21.0009 22.9004V14.0996C21.0011 13.4988 21.5191 13 22.1425 13H34.8593ZM21.9794 21.2646V22.9004C21.9796 22.9953 22.0439 23.0566 22.1425 23.0566H34.8593C34.9579 23.0566 35.0222 22.9953 35.0224 22.9004V21.5547L32.2255 19.3984L29.9179 20.9307C29.746 21.0424 29.498 21.032 29.3369 20.9062L26.1982 18.4609L21.9794 21.2646ZM16.5009 10.5C16.777 10.5001 17.0009 10.7239 17.0009 11V17.5C17.001 18.3283 17.6727 18.9998 18.5009 19H18.7089L18.0615 18.3535C17.8665 18.1583 17.8665 17.8417 18.0615 17.6465C18.2567 17.4512 18.5742 17.4512 18.7695 17.6465L20.1835 19.0605C20.3785 19.2557 20.3784 19.5723 20.1835 19.7676L18.7695 21.1816C18.5742 21.3769 18.2567 21.3768 18.0615 21.1816C17.8666 20.9864 17.8664 20.6697 18.0615 20.4746L18.5361 20H18.5009C17.1204 19.9998 16.001 18.8806 16.0009 17.5V11C16.001 10.724 16.2249 10.5002 16.5009 10.5ZM22.1425 13.9424C22.0439 13.9424 21.9796 14.0047 21.9794 14.0996V20.1152L25.9384 17.4834C26.0045 17.4381 26.082 17.4096 26.162 17.4004C26.2907 17.3869 26.4244 17.4244 26.5244 17.5029L29.663 19.9531L31.9755 18.4219C32.1475 18.3102 32.3954 18.3204 32.5566 18.4463L35.0224 20.3467V14.0996C35.0222 14.0047 34.9579 13.9424 34.8593 13.9424H22.1425ZM29.6425 15.2002C30.4468 15.2003 31.1093 15.839 31.1093 16.6143C31.1093 17.3895 30.4469 18.0283 29.6425 18.0283C28.8381 18.0283 28.1747 17.3895 28.1747 16.6143C28.1748 15.839 28.8381 15.2002 29.6425 15.2002ZM29.6425 16.1426C29.3668 16.1426 29.1533 16.3485 29.1533 16.6143C29.1533 16.8801 29.3667 17.0859 29.6425 17.0859C29.9182 17.0859 30.1318 16.88 30.1318 16.6143C30.1318 16.3485 29.9182 16.1426 29.6425 16.1426ZM22.0917 0C23.6924 0.000102997 25.0009 1.29808 25.0009 2.91016V7.08984C25.0009 8.70192 23.6924 9.9999 22.0917 10H14.9111C13.3103 10 12.0009 8.70198 12.0009 7.08984V2.91016C12.0009 1.29802 13.3103 0 14.9111 0H22.0917ZM14.9111 1.04199C13.8598 1.04199 13.0331 1.87561 13.0331 2.91016V7.08984C13.0331 8.12439 13.8598 8.95801 14.9111 8.95801H22.0917C23.1429 8.95791 23.9697 8.12432 23.9697 7.08984V2.91016C23.9697 1.87568 23.1429 1.04209 22.0917 1.04199H14.9111ZM17.0146 2.36523C17.1026 2.36806 17.189 2.39596 17.2636 2.44531L20.5556 4.53613C20.7284 4.64278 20.7919 4.83988 20.7919 5C20.7919 5.16007 20.7283 5.35719 20.5556 5.46387L17.2646 7.55469C17.1075 7.65858 16.9024 7.66034 16.7441 7.56055L16.7431 7.55957C16.5867 7.45933 16.4941 7.27149 16.499 7.08398V2.91016C16.4953 2.64423 16.6989 2.38047 16.9755 2.36621L17.0146 2.36523ZM17.5068 6.1416L19.3095 5L17.5068 3.85449V6.1416ZM20.4999 5.22559L20.5234 5.19434C20.5303 5.1833 20.5364 5.17121 20.5419 5.15918C20.5308 5.1833 20.5167 5.20593 20.4999 5.22559Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/grok.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12732)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M197.76 327.187L367.957 201.384C376.299 195.197 388.224 197.608 392.213 207.187C413.12 257.725 403.776 318.44 362.133 360.125C320.512 401.811 262.571 410.941 209.621 390.12L151.787 416.936C234.752 473.704 335.488 459.667 398.443 396.605C448.384 346.6 463.851 278.44 449.387 216.979L449.515 217.128C428.544 126.845 454.677 90.7493 508.181 16.9573C509.461 15.208 510.741 13.4586 512 11.6666L441.579 82.1733V81.96L197.696 327.229M162.624 357.757C103.061 300.797 113.344 212.669 164.139 161.832C201.707 124.221 263.275 108.861 317.013 131.432L374.72 104.765C362.726 95.9422 349.603 88.7672 335.701 83.432C300.753 69.1279 262.355 65.4777 225.337 72.9405C188.32 80.4032 154.335 98.6457 127.659 125.373C73.6213 179.475 56.6187 262.675 85.8027 333.672C107.605 386.728 71.872 424.253 35.8827 462.141C23.104 475.581 10.304 489 0 503.208L162.56 357.821" fill="#B6B6B6"/>
+</g>
+<defs>
+<clipPath id="clip0_1471_12732">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/hitpaw.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12743)">
+<path d="M148.228 255.643L102.567 278.057L99.924 279.348L64.0174 296.98V325.672L113.435 301.418L117.364 299.492L139.326 288.706L145.968 285.454C148.837 273.378 152.193 262.214 155.914 251.876L148.228 255.643ZM432.49 117.736C431.012 114.312 429.43 110.958 427.761 107.637C427.552 107.225 427.343 106.777 427.1 106.364C408.825 70.8767 379.613 41.7882 343.81 23.4336C343.115 23.0725 318.563 11.8911 285.838 5.73274C276.222 3.92656 265.929 2.55047 255.305 2H122.372C90.1518 2 64.0174 27.7858 64.0174 59.5923V260.77L87.5957 249.209L88.6216 248.71L172.068 207.753L178.397 204.639C213.016 148.337 255.861 133.664 255.861 133.664V166.537C270.05 167.191 282.447 172.868 290.394 181.193C293.768 184.686 296.636 189.691 298.74 194.782C299.14 195.78 299.522 196.761 299.854 197.759C300.532 199.633 301.071 201.457 301.487 203.195C302.079 205.603 303.07 207.581 304.287 209.335C304.287 209.335 304.287 209.388 304.323 209.405C305.521 211.107 306.93 212.553 308.408 213.929C313.555 218.745 319.433 222.564 319.433 231.853C319.433 236.05 317.607 239.68 314.476 242.862C312.72 244.668 310.565 246.303 308.095 247.851C307.556 248.177 306.983 248.504 306.408 248.814L306.339 248.865C305.244 249.468 304.078 250.069 302.896 250.638C302.653 250.758 302.392 250.861 302.131 250.982C302.079 250.999 302.009 251.016 301.957 251.05C294.567 254.387 278.866 259.48 275.927 260.391C275.231 260.58 274.432 260.804 273.579 261.044C270.919 261.802 267.789 262.696 265.929 263.246C265.72 263.281 265.529 263.35 265.338 263.418C264.729 263.608 264.364 263.728 264.33 263.745C262.885 264.176 261.478 264.691 260.138 265.311C259.791 265.466 259.443 265.638 259.096 265.81C255.409 267.581 252.071 269.937 249.184 272.794C242.455 279.416 238.317 288.534 238.317 298.63C238.317 303.655 239.378 308.47 241.22 312.858C242.194 315.025 243.342 317.106 244.629 319.101C246.262 321.785 248.158 324.485 250.245 327.221C250.488 327.582 250.767 327.926 251.027 328.27C258.139 337.473 267.32 346.969 276.622 356.757C279.804 360.094 283.005 363.448 286.117 366.854C288.881 369.864 291.628 372.91 294.271 375.988C295.054 376.882 295.837 377.795 296.585 378.706C301.523 377.657 313.033 374.388 314.094 374.061C340.419 365.737 364.311 351.94 384.36 334.033C384.655 333.792 384.933 333.552 385.229 333.293C421.258 300.73 444.75 254.852 447.687 203.573C447.862 200.614 447.949 197.673 447.983 194.68C448 194.009 448 193.32 448 192.632C447.949 166.038 442.453 140.717 432.49 117.736ZM135.605 326.739L135.448 326.808L64.0174 361.848V390.541L135.326 355.552C135.552 352.25 135.831 348.947 136.161 345.576C136.196 344.99 136.265 344.389 136.317 343.803L136.387 343.081C136.822 338.54 137.361 333.93 137.987 329.234C138.161 327.943 138.334 326.618 138.526 325.311L135.605 326.739ZM156.522 505.434C155.775 503.696 154.958 501.717 154.088 499.464C147.394 482.176 137.517 449.923 134.996 405.214C134.753 400.983 134.579 396.665 134.474 392.227L68.6426 424.481L64 426.768V456.391C64 463.942 65.4606 471.132 68.1558 477.739C76.7282 498.983 97.7679 514 122.355 514H160.452V513.828C160.104 513.157 158.627 510.336 156.522 505.434Z" fill="#B6B6B6"/>
+</g>
+<defs>
+<clipPath id="clip0_1471_12743">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/image-batch.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 9C12.7761 9 13 9.22386 13 9.5V20C13 20.2761 13.2239 20.5 13.5 20.5H28C28.2761 20.5 28.5 20.7239 28.5 21C28.5 21.2761 28.2761 21.5 28 21.5H13.5C12.6716 21.5 12 20.8284 12 20V9.5C12 9.22386 12.2239 9 12.5 9ZM14.5 7C14.7761 7 15 7.22386 15 7.5V18C15 18.2761 15.2239 18.5 15.5 18.5H30C30.2761 18.5 30.5 18.7239 30.5 19C30.5 19.2761 30.2761 19.5 30 19.5H15.5C14.6716 19.5 14 18.8284 14 18V7.5C14 7.22386 14.2239 7 14.5 7ZM16.5 5C16.7761 5 17 5.22386 17 5.5V16C17 16.2761 17.2239 16.5 17.5 16.5H32C32.2761 16.5 32.5 16.7239 32.5 17C32.5 17.2761 32.2761 17.5 32 17.5H17.5C16.6716 17.5 16 16.8284 16 16V5.5C16 5.22386 16.2239 5 16.5 5ZM33.7061 2.5C34.4126 2.5 34.9999 3.08968 35 3.7998V14.2002C34.9999 14.9103 34.4126 15.5 33.7061 15.5H19.2939C18.5874 15.5 18.0001 14.9103 18 14.2002V3.7998C18.0001 3.08968 18.5874 2.5 19.2939 2.5H33.7061ZM19.1084 12.2676V14.2002C19.1085 14.3124 19.1814 14.3856 19.293 14.3857H33.7061C33.8179 14.3857 33.8915 14.3125 33.8916 14.2002V12.6094L30.7207 10.0615L28.1055 11.873C27.9107 12.005 27.6299 11.9923 27.4473 11.8438L23.8896 8.95312L19.1084 12.2676ZM19.2939 3.61426C19.1821 3.61426 19.1085 3.68744 19.1084 3.7998V10.9092L23.5957 7.79883C23.6707 7.74519 23.7587 7.71107 23.8496 7.7002C23.9954 7.68428 24.1465 7.72944 24.2598 7.82227L27.8164 10.7178L30.4385 8.90723C30.6334 8.7753 30.9141 8.78784 31.0967 8.93652L33.8916 11.1826V3.7998C33.8915 3.68747 33.8179 3.61426 33.7061 3.61426H19.2939ZM27.7939 5.09961C28.7054 5.09987 29.4561 5.8554 29.4561 6.77148C29.456 7.68754 28.7054 8.44213 27.7939 8.44238C26.8823 8.44238 26.1309 7.6877 26.1309 6.77148C26.1309 5.85524 26.8823 5.09961 27.7939 5.09961ZM27.7939 6.21387C27.4814 6.21387 27.2393 6.45737 27.2393 6.77148C27.2393 7.08557 27.4814 7.32812 27.7939 7.32812C28.1062 7.32788 28.3476 7.08542 28.3477 6.77148C28.3477 6.45752 28.1063 6.21411 27.7939 6.21387Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image-blur.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1683_13217)">
+<path d="M33.2579 14.2434C33.2579 8.04845 24.8306 0.0257698 24.4718 -0.312477C24.2037 -0.565892 23.7862 -0.561497 23.5226 -0.305153C23.1637 0.0434776 14.7439 8.30814 14.7439 14.2436C14.7439 19.3484 18.8966 23.5 24.0003 23.5C29.1067 23.5015 33.2579 19.3486 33.2579 14.2434ZM24.0015 22.1299C19.6538 22.1299 16.1165 18.5924 16.1165 14.2449C16.1165 9.63656 22.2409 2.98187 24.009 1.15676C25.7829 2.94092 31.8885 9.42993 31.8885 14.2449C31.887 18.5926 28.349 22.1299 24.0015 22.1299Z" fill="#8A8A8A"/>
+<path d="M28.4502 12.5882C28.0766 12.6482 27.8218 12.9998 27.8804 13.3733C28.1265 14.9143 27.5918 16.2605 26.0933 17.8748C25.8355 18.1516 25.8516 18.5852 26.1284 18.843C26.2603 18.9661 26.4273 19.0261 26.5943 19.0261C26.7788 19.0261 26.9619 18.9529 27.0967 18.8064C28.3037 17.5071 29.6381 15.6907 29.2339 13.1552C29.1753 12.7831 28.8222 12.5295 28.4502 12.5882Z" fill="#8A8A8A"/>
+</g>
+<defs>
+<clipPath id="clip0_1683_13217">
+<rect width="48" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/image-crop.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 1.2002C18.4418 1.2002 18.7998 1.55817 18.7998 2V5.2002H29C29.9941 5.2002 30.7998 6.00589 30.7998 7V17.7002H34C34.4418 17.7002 34.7998 18.0582 34.7998 18.5C34.7998 18.9418 34.4418 19.2998 34 19.2998H30.7998V22.5C30.7998 22.9418 30.4418 23.2998 30 23.2998C29.5582 23.2998 29.2002 22.9418 29.2002 22.5V19.2998H19C18.0059 19.2998 17.2002 18.4941 17.2002 17.5V6.7998H14C13.5582 6.7998 13.2002 6.44183 13.2002 6C13.2002 5.55817 13.5582 5.2002 14 5.2002H17.2002V2C17.2002 1.55817 17.5582 1.2002 18 1.2002ZM18.7998 17.5C18.7998 17.6105 18.8895 17.7002 19 17.7002H29.2002V7C29.2002 6.88954 29.1105 6.79981 29 6.7998H18.7998V17.5Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image-invert.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0035 1C17.9391 1 13 5.93909 13 12.0035C13 18.068 17.9391 23 24.0035 23C30.068 23 35 18.068 35 12.0035C35 5.93909 30.068 1 24.0035 1ZM24.0035 2.83353C29.0778 2.83353 33.1665 6.92919 33.1665 12.0035C33.1665 17.0779 29.0776 21.1665 24.0035 21.1665C18.9292 21.1665 14.8335 17.0776 14.8335 12.0035C14.8335 6.92949 18.9292 2.83353 24.0035 2.83353Z" fill="#8A8A8A"/>
+<path d="M24.0012 1.91791C21.3277 1.91791 18.762 2.98021 16.871 4.87092C14.9801 6.76174 13.9168 9.32742 13.9168 12.0023C13.9168 14.6772 14.9802 17.2415 16.871 19.1325C18.7618 21.0234 21.3275 22.0867 24.0012 22.0867V1.91791Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image-rotate.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1.2002C14.4418 1.2002 14.7998 1.55817 14.7998 2V8.00684C14.8958 7.83091 14.9994 7.65581 15.1113 7.48438C15.6603 6.64373 16.4355 5.78389 17.3633 5.01074C19.2091 3.47256 21.7588 2.2002 24.5 2.2002C29.8381 2.20019 35.7998 5.96117 35.7998 13.5C35.7998 13.9418 35.4418 14.2998 35 14.2998C34.5582 14.2998 34.2002 13.9418 34.2002 13.5C34.2002 7.03883 29.1619 3.7998 24.5 3.7998C22.2413 3.79981 20.0409 4.86081 18.3867 6.23926C17.5645 6.92442 16.9022 7.6688 16.4512 8.35938C16.1004 8.89656 15.9082 9.35442 15.835 9.7002H20.5C20.9418 9.7002 21.2998 10.0582 21.2998 10.5C21.2998 10.9418 20.9418 11.2998 20.5 11.2998H15C14.0059 11.2998 13.2002 10.4941 13.2002 9.5V2C13.2002 1.55817 13.5582 1.2002 14 1.2002Z" fill="#8A8A8A"/>
+<path d="M18.3446 15.6464C17.9126 15.8958 17.758 16.4565 18.0038 16.8823L21.6038 23.1177C21.8497 23.5435 22.4126 23.69 22.8446 23.4406L31.6554 18.3537C32.0874 18.1043 32.242 17.5435 31.9962 17.1177L28.3962 10.8823C28.1503 10.4565 27.5874 10.31 27.1554 10.5594L18.3446 15.6464ZM18.7303 16.3145L27.5411 11.2275C27.6095 11.188 27.6795 11.2062 27.7184 11.2736L30.2738 15.6996L27.7878 15.3394C27.6246 15.3147 27.4487 15.4064 27.3753 15.5544L26.3994 17.5653L23.2225 17.0844C23.121 17.0687 23.0133 17.095 22.9296 17.156C22.8778 17.1947 22.8358 17.2462 22.8085 17.3049L21.1425 20.7535L18.6816 16.491C18.6426 16.4236 18.6619 16.3539 18.7303 16.3145ZM24.4407 14.2052C23.8834 14.527 23.6855 15.245 24.0027 15.7943C24.3198 16.3436 25.0406 16.5312 25.5979 16.2095C26.1552 15.8877 26.3531 15.1697 26.0359 14.6204C25.7188 14.0711 24.998 13.8835 24.4407 14.2052ZM24.8264 14.8733C25.0175 14.763 25.2494 14.8234 25.3582 15.0117C25.4669 15.2 25.4032 15.4311 25.2121 15.5414C25.0211 15.6517 24.7891 15.5913 24.6804 15.403C24.5717 15.2147 24.6354 14.9836 24.8264 14.8733ZM23.3884 17.8934L26.5633 18.3707C26.7264 18.3954 26.9023 18.3037 26.9757 18.1558L27.948 16.1469L30.7679 16.5556L31.3183 17.509C31.3572 17.5764 31.338 17.6461 31.2696 17.6856L22.4588 22.7725C22.3904 22.812 22.3205 22.7938 22.2815 22.7264L21.6126 21.5677L23.3884 17.8934Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image-scale.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4316 13.4326C21.7455 13.1187 22.2535 13.1188 22.5674 13.4326C22.8813 13.7465 22.8813 14.2544 22.5674 14.5684L15.6777 21.4502H18.25C18.692 21.4502 19.0498 21.808 19.0498 22.25C19.0498 22.692 18.692 23.0498 18.25 23.0498H13.75C13.5592 23.0498 13.3754 22.9822 13.2305 22.8584L13.2295 22.8574C13.1888 22.8217 13.1504 22.7816 13.1172 22.7373V22.7363C13.0211 22.6128 12.9622 22.4629 12.9502 22.3066V17.75C12.9502 17.308 13.308 16.9502 13.75 16.9502C14.192 16.9502 14.5498 17.308 14.5498 17.75V20.3213L21.4316 13.4326ZM34.75 7.9502C34.9619 7.9502 35.1664 8.03452 35.3164 8.18457C35.4662 8.33455 35.5498 8.53829 35.5498 8.75V22.25C35.5498 22.4619 35.4665 22.6664 35.3164 22.8164C35.1664 22.9665 34.9619 23.0498 34.75 23.0498H21.25C20.8081 23.0497 20.4502 22.692 20.4502 22.25C20.4503 21.8081 20.8081 21.4503 21.25 21.4502H33.9502V8.75C33.9503 8.30811 34.3081 7.95026 34.75 7.9502ZM27.25 0.450195C27.6919 0.450195 28.0497 0.808072 28.0498 1.25C28.0498 1.692 27.692 2.0498 27.25 2.0498H14.5498V14.75C14.5498 14.9619 14.4665 15.1664 14.3164 15.3164C14.1664 15.4665 13.9619 15.5498 13.75 15.5498C13.5383 15.5498 13.3346 15.4662 13.1846 15.3164C13.0345 15.1664 12.9502 14.9619 12.9502 14.75V1.25C12.9503 0.808109 13.3081 0.450255 13.75 0.450195H27.25ZM35.5498 5.75C35.5498 6.192 35.192 6.5498 34.75 6.5498C34.3081 6.54974 33.9502 6.19196 33.9502 5.75V3.17773L27.0684 10.0674C26.9184 10.2183 26.7131 10.3047 26.5 10.3047C26.2872 10.3046 26.0825 10.2189 25.9326 10.0684C25.7817 9.91843 25.6953 9.71311 25.6953 9.5C25.6953 9.28687 25.7817 9.08159 25.9326 8.93164L32.8223 2.0498H30.25C29.808 2.0498 29.4502 1.692 29.4502 1.25C29.4502 0.808002 29.808 0.450195 30.25 0.450195H34.75C34.9408 0.450201 35.1246 0.517855 35.2695 0.641602L35.2705 0.642578C35.3109 0.678079 35.3488 0.717743 35.3818 0.761719L35.4473 0.859375C35.5053 0.961394 35.5408 1.07563 35.5498 1.19336V5.75Z" fill="#8A8A8A" stroke="#8A8A8A" stroke-width="0.1"/>
+</svg>

packages/design-system/src/icons/image_captioning.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5386 22.7695C25.8783 22.7697 26.1538 23.045 26.1538 23.3848C26.1537 23.7245 25.8783 23.9998 25.5386 24H15.3843C15.0445 23.9999 14.7691 23.7245 14.769 23.3848C14.769 23.0449 15.0445 22.7696 15.3843 22.7695H25.5386ZM32.6147 19.3848C32.9546 19.3848 33.231 19.6601 33.231 20C33.231 20.3399 32.9546 20.6152 32.6147 20.6152H15.3843C15.0445 20.6152 14.769 20.3398 14.769 20C14.769 19.6602 15.0445 19.3848 15.3843 19.3848H32.6147ZM32.6147 16C32.9546 16 33.2309 16.2754 33.231 16.6152C33.231 16.9551 32.9546 17.2305 32.6147 17.2305H15.3843C15.0445 17.2304 14.769 16.9551 14.769 16.6152C14.7691 16.2755 15.0445 16.0001 15.3843 16H32.6147ZM31.8257 0C32.593 0 33.2308 0.614038 33.231 1.35352V12.1846C33.231 12.9242 32.5931 13.5381 31.8257 13.5381H16.1733C15.4061 13.5379 14.769 12.9241 14.769 12.1846V1.35352C14.7692 0.614161 15.4062 0.000205504 16.1733 0H31.8257ZM15.9731 10.1719V12.1846C15.9731 12.3016 16.052 12.3778 16.1733 12.3779H31.8257C31.9472 12.3779 32.0269 12.3017 32.0269 12.1846V10.5283L28.5835 7.875L25.7427 9.76074C25.531 9.89807 25.2261 9.88528 25.0278 9.73047L21.1655 6.7207L15.9731 10.1719ZM16.1733 1.16016C16.0522 1.16032 15.9733 1.2367 15.9731 1.35352V8.75781L20.8452 5.51758C20.9267 5.4617 21.0228 5.42637 21.1216 5.41504C21.2799 5.39849 21.4439 5.44534 21.5669 5.54199L25.4292 8.55859L28.2769 6.67285C28.4885 6.53537 28.7934 6.54826 28.9917 6.70312L32.0269 9.04199V1.35352C32.0267 1.2366 31.9471 1.16016 31.8257 1.16016H16.1733ZM25.4048 2.70801C26.3946 2.70816 27.2104 3.49419 27.2104 4.44824C27.2104 5.40234 26.3947 6.1893 25.4048 6.18945C24.4148 6.18945 23.5981 5.40243 23.5981 4.44824C23.5982 3.4941 24.4148 2.70801 25.4048 2.70801ZM25.4048 3.86816C25.0654 3.86816 24.8023 4.12117 24.8022 4.44824C24.8022 4.77537 25.0654 5.02832 25.4048 5.02832C25.7441 5.02818 26.0063 4.77528 26.0063 4.44824C26.0063 4.12126 25.744 3.86831 25.4048 3.86816Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image_color_adjust.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0002 10.9506C22.4541 9.6908 20.4514 9.1392 18.4787 9.42816C18.2607 8.80882 18.1488 8.15727 18.1496 7.50043V7.49945C18.1498 5.41028 19.2656 3.47869 21.0754 2.43304C22.885 1.38855 25.1153 1.38845 26.925 2.43304L27.2561 2.6391C28.8699 3.72034 29.8497 5.5406 29.8498 7.49945V7.50043C29.8506 8.15737 29.7388 8.80876 29.5207 9.42816C27.5483 9.13945 25.5462 9.69102 24.0002 10.9506ZM22.2297 13.0707C20.9335 12.6588 19.8225 11.8085 19.0862 10.6674C19.2239 10.6578 19.3618 10.6504 19.5002 10.6498C20.7921 10.6481 22.0453 11.0775 23.0656 11.8657C22.7457 12.2373 22.466 12.6415 22.2297 13.0707ZM25.7697 13.0698C25.5339 12.6414 25.254 12.2386 24.9348 11.8676C25.954 11.079 27.2077 10.6501 28.4992 10.6508C28.6376 10.6514 28.7756 10.6578 28.9133 10.6674C28.1769 11.8085 27.066 12.6579 25.7697 13.0698ZM19.0969 22.3315C17.6196 22.2291 16.2357 21.5709 15.2248 20.4887C14.2139 19.4065 13.6505 17.9801 13.6496 16.4995C13.6507 15.2383 14.0599 14.0112 14.8156 13.0014C15.5468 12.0225 16.566 11.2995 17.7287 10.9301C18.5931 12.5003 20.0112 13.6917 21.7072 14.2719C21.3242 15.4366 21.2474 16.6814 21.4856 17.8852C21.7241 19.0859 22.2682 20.2045 23.0627 21.1332C21.9324 22.0019 20.5223 22.4303 19.0969 22.3315ZM29.6819 22.2426C28.0119 22.5816 26.28 22.1738 24.9367 21.1332C25.7315 20.2044 26.2763 19.0853 26.5149 17.8842C26.753 16.6805 26.6752 15.4365 26.2922 14.2719C27.988 13.692 29.405 12.5008 30.2697 10.9311C31.9037 11.4445 33.2334 12.6462 33.9035 14.226C34.5881 15.843 34.5115 17.682 33.6926 19.2348C32.8746 20.7878 31.402 21.8925 29.6819 22.2426ZM24.4133 13.3334C24.1376 13.3528 23.8609 13.3529 23.5852 13.3334C23.7115 13.1369 23.8508 12.9495 24.0002 12.77C24.1494 12.9492 24.2871 13.1372 24.4133 13.3334ZM24.0002 20.228C23.3622 19.4615 22.9284 18.5463 22.7453 17.5639C22.559 16.5634 22.6407 15.5335 22.9748 14.5746C23.6529 14.6745 24.3414 14.6744 25.0188 14.5746C25.3546 15.5336 25.4377 16.5632 25.2522 17.5629C25.07 18.5453 24.6372 19.4615 24.0002 20.228ZM35.6506 16.3696H35.6467C35.6172 14.8949 35.1354 13.4636 34.2619 12.2729C33.3925 11.087 32.1799 10.2008 30.7903 9.72797C31.027 9.00974 31.1505 8.25806 31.1496 7.50043C31.1506 5.39267 30.2222 3.3924 28.6115 2.03265C27.0017 0.673924 24.873 0.0954168 22.7961 0.449646C20.7192 0.803888 18.9039 2.05694 17.8362 3.8725C16.793 5.64585 16.5674 7.77997 17.2082 9.72894C15.2317 10.3959 13.6402 11.8926 12.8586 13.8334C12.0592 15.8203 12.1936 18.0622 13.2238 19.9409C14.2542 21.8195 16.0735 23.1361 18.1789 23.5297C20.2439 23.9157 22.3716 23.3717 23.9992 22.0502C25.3822 23.1703 27.134 23.737 28.9133 23.6332C30.7347 23.5279 32.446 22.73 33.6985 21.4047C34.9499 20.0786 35.6486 18.3245 35.6506 16.5004V16.3696Z" fill="#8A8A8A" stroke="#8A8A8A" stroke-width="0.3"/>
+</svg>

packages/design-system/src/icons/image_compositor.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1625 8.91744L23.6625 14.1674C23.8744 14.2743 24.1256 14.2743 24.3375 14.1674L34.8375 8.91744C35.0878 8.789 35.2453 8.53119 35.2453 8.24996C35.2453 7.96872 35.0878 7.71089 34.8375 7.58247L24.3375 2.33247C24.1256 2.22559 23.8744 2.22559 23.6625 2.33247L13.1625 7.58247C12.9122 7.71091 12.7547 7.96872 12.7547 8.24996C12.7547 8.53119 12.9122 8.78902 13.1625 8.91744ZM23.9999 3.84L32.82 8.25L23.9999 12.66L15.1799 8.25L23.9999 3.84ZM35.1674 11.6626C35.353 12.031 35.2049 12.4801 34.8374 12.6676L24.3374 17.9176C24.1255 18.0244 23.8743 18.0244 23.6624 17.9176L13.1624 12.6676C12.8258 12.4651 12.7021 12.0366 12.8802 11.6869C13.0574 11.3363 13.4746 11.1816 13.8374 11.3326L23.9999 16.41L34.1625 11.3326C34.531 11.1469 34.9799 11.2951 35.1674 11.6626ZM35.1674 15.4126C35.353 15.781 35.2049 16.2301 34.8374 16.4176L24.3374 21.6676C24.1255 21.7744 23.8743 21.7744 23.6624 21.6676L13.1624 16.4176C12.8258 16.2151 12.7021 15.7866 12.8802 15.4369C13.0574 15.0863 13.4746 14.9316 13.8374 15.0826L23.9999 20.16L34.1625 15.0826C34.531 14.8969 34.9799 15.0451 35.1674 15.4126Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image_depth.svg

@@ -0,0 +1,15 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1683_13310)">
+<rect x="12.9001" y="0.400061" width="22.7" height="22.7" rx="7.35" fill="#1C1C24" stroke="#8A8A8A" stroke-width="1.3"/>
+<circle cx="24.35" cy="11.35" r="7.35" fill="url(#paint0_radial_1683_13310)"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_1683_13310" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25.25 11.65) rotate(-139.289) scale(8.50911)">
+<stop offset="0.00961538" stop-color="white"/>
+<stop offset="1" stop-color="#686868"/>
+</radialGradient>
+<clipPath id="clip0_1683_13310">
+<rect width="48" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/image_iterator.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5488 2.5C32.0541 2.50024 33.2763 3.71416 33.2763 5.20898V13.1113L35.0712 11.3291C35.2839 11.1179 35.628 11.1179 35.8407 11.3291C36.0531 11.5403 36.0533 11.8816 35.8407 12.0928H35.8447L33.1171 14.8008C33.0681 14.8494 33.0069 14.8936 32.9365 14.9199C32.8713 14.9472 32.8007 14.9638 32.7294 14.9639C32.659 14.9638 32.5868 14.9473 32.5214 14.9199C32.456 14.8925 32.3959 14.8545 32.3417 14.8008L29.9999 12.4766V15.5996C29.9999 16.0913 29.5856 16.5 29.0868 16.5H18.913C18.4142 16.5 17.9999 16.0913 17.9999 15.5996V13.3271C17.8586 13.3266 17.723 13.279 17.6142 13.1709L15.8193 11.3887V19.291C15.8194 20.1845 16.5562 20.9158 17.456 20.916H30.5478C31.4476 20.9159 32.1834 20.1845 32.1835 19.291V18.208C32.1835 17.9111 32.4287 17.6671 32.7275 17.666C33.0265 17.6667 33.2714 17.9109 33.2714 18.208V19.291C33.2713 20.7857 32.0492 21.9998 30.5439 22H17.4511C15.946 21.9996 14.7237 20.7856 14.7236 19.291V11.3887L12.9286 13.1709C12.7159 13.3818 12.3717 13.382 12.1591 13.1709C11.9469 12.9598 11.9469 12.6184 12.1591 12.4072L14.8876 9.69922C14.9417 9.64553 15.0021 9.60748 15.0673 9.58008C15.1981 9.5263 15.3505 9.52641 15.4814 9.58008C15.5519 9.60647 15.613 9.6505 15.662 9.69922L17.9999 12.0195V8.40039C17.9999 7.90871 18.4142 7.5 18.913 7.5H29.0868C29.5856 7.5 29.9999 7.90871 29.9999 8.40039V11.1709C30.1386 11.1713 30.2768 11.2239 30.3827 11.3291L32.1777 13.1113V5.20898C32.1777 4.31525 31.441 3.58398 30.5409 3.58398H17.455C16.5553 3.58438 15.8193 4.31549 15.8193 5.20898V6.29199C15.8191 6.58944 15.573 6.83398 15.2734 6.83398C14.9741 6.83359 14.7286 6.5892 14.7284 6.29199V5.20898C14.7284 3.71427 15.9508 2.50043 17.456 2.5H30.5488ZM18.7822 14.2617V15.5996C18.7822 15.6775 18.834 15.7285 18.913 15.7285H29.0868C29.1658 15.7285 29.2177 15.6775 29.2177 15.5996V14.499L26.9794 12.7354L25.1327 13.9893C24.9953 14.0803 24.7976 14.0714 24.6689 13.9688L22.1572 11.9678L18.7822 14.2617ZM18.913 8.27148C18.834 8.27148 18.7822 8.32254 18.7822 8.40039V13.3223L21.9491 11.168C22.0021 11.1308 22.0647 11.1072 22.1288 11.0996C22.2317 11.0886 22.3379 11.1204 22.4179 11.1846L24.9296 13.1895L26.7802 11.9355C26.9177 11.8444 27.1153 11.8533 27.2441 11.9561L29.2177 13.5107V8.40039C29.2177 8.32254 29.1658 8.27148 29.0868 8.27148H18.913ZM24.913 9.2998C25.5565 9.29981 26.0868 9.82277 26.0868 10.457C26.0868 11.0913 25.5565 11.6143 24.913 11.6143C24.2695 11.6143 23.7392 11.0914 23.7392 10.457C23.7392 9.82276 24.2695 9.2998 24.913 9.2998ZM24.913 10.0713C24.6924 10.0713 24.5215 10.2396 24.5214 10.457C24.5214 10.6745 24.6924 10.8428 24.913 10.8428C25.1336 10.8428 25.3046 10.6745 25.3046 10.457C25.3046 10.2396 25.1336 10.0713 24.913 10.0713Z" fill="#8A8A8A"/>
+</svg>

packages/design-system/src/icons/image_normalmap.svg

@@ -0,0 +1,21 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12" width="24" height="24" rx="8" fill="url(#paint0_linear_1814_3711)"/>
+<circle cx="24.35" cy="12.35" r="7.35" fill="url(#paint1_radial_1814_3711)"/>
+<circle cx="24.35" cy="12.35" r="7.35" fill="url(#paint2_radial_1814_3711)"/>
+<defs>
+<linearGradient id="paint0_linear_1814_3711" x1="24" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D18EFF"/>
+<stop offset="1" stop-color="#5C91FD"/>
+</linearGradient>
+<radialGradient id="paint1_radial_1814_3711" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.35 12.35) rotate(90) scale(7.35)">
+<stop stop-color="#2BECFF"/>
+<stop offset="0.37" stop-color="#F03CFF"/>
+<stop offset="0.72" stop-color="#133AFF"/>
+<stop offset="1" stop-color="#34F0FF"/>
+</radialGradient>
+<radialGradient id="paint2_radial_1814_3711" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.35 12.35) rotate(90) scale(7.35)">
+<stop stop-color="#8998FF"/>
+<stop offset="1" stop-color="#8998FF" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>