feat: enforce partner-node governance across the workbench

Admin-disabled partner nodes (Allowlist) now enforce everywhere users
meet nodes:

- Discovery: a workspace.disabled-partner-nodes NodeDefFilter (the
  deprecated/experimental seam) hides them from node search, the
  category sidebar, and the node library; when a query or the Partner
  filter would have matched only disabled nodes, the empty state says
  'This node has been disabled by your team admin.' — computed by
  running the same matcher over the hidden defs. The legacy right-click
  menu hides them via skip_list sync on registered types.
- Canvas: offenders surface as a 'Disabled node(s)' group in Workflow
  Overview > Errors with jump-to-node rows, flag the node error
  highlight, gate the Run button (opens the Errors tab instead of
  queueing), and announce once per workflow load via a toast with a
  View details action. Offenders re-derive live on node add/remove and
  governance toggles.

disabledPartnerNodesStore owns governance state: fetches the
partner-nodes list, scans the graph (api_node defs matched by display
name), and exposes the def predicate. TODO(endpoint): list() is the
real workspace API; enforcement activates once the backend serves it.

.github/workflows/cla.yml

@@ -38,11 +38,9 @@ jobs:
           PR_NUMBER: ${{ github.event.pull_request.number || github.event.issue.number }}
           PR_AUTHOR: ${{ github.event.pull_request.user.login || github.event.issue.user.login }}
           BASE_ALLOWLIST: action@github.com,actions-user,ampagent,claude,comfy-pr-bot,GitHub Action,github-actions,github-actions[bot],Glary Bot,Glary-Bot,*[bot]
-        # For each commit emit the GitHub login when the author/committer email resolves to a GitHub account
-        # otherwise fall back to the raw git name.
         run: |
           others=$(gh api "repos/${{ github.repository }}/pulls/${PR_NUMBER}/commits" --paginate \
-            --jq '.[] | (.author.login // .commit.author.name // empty), (.committer.login // .commit.committer.name // empty)' \
+            --jq '.[] | (.author.login // empty), (.committer.login // empty)' \
             | sort -u | grep -vix "${PR_AUTHOR}" | paste -sd, -)
           if [ -n "$others" ]; then
             echo "allowlist=${BASE_ALLOWLIST},${others}" >> "$GITHUB_OUTPUT"

.github/workflows/pr-backport.yaml

@@ -278,49 +278,32 @@ jobs:
               continue
             fi
 
-            # Create backport branch. A failure here (e.g. dirty state left
-            # by a prior target) must not abort the loop and skip remaining
-            # targets, so fall back to a clean checkout and record the error.
-            if ! git checkout -B "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"; then
-              echo "::error::Failed to create branch ${BACKPORT_BRANCH} for ${TARGET_BRANCH}"
-              FAILED="${FAILED}${TARGET_BRANCH}:branch-create-failed "
-              git checkout main || git checkout -f main
-              echo "::endgroup::"
-              continue
-            fi
+            # Create backport branch
+            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
 
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
               if [ "$REMOTE_BACKPORT_EXISTS" = true ]; then
-                PUSH_CMD=(git push --force-with-lease origin "${BACKPORT_BRANCH}")
+                git push --force-with-lease origin "${BACKPORT_BRANCH}"
               else
-                PUSH_CMD=(git push origin "${BACKPORT_BRANCH}")
+                git push origin "${BACKPORT_BRANCH}"
               fi
-
-              # A push failure for one target must not abort the loop and
-              # prevent remaining targets from being attempted.
-              if "${PUSH_CMD[@]}"; then
-                echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
-                SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
-                echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
-              else
-                echo "::error::Failed to push ${BACKPORT_BRANCH} for ${TARGET_BRANCH}"
-                FAILED="${FAILED}${TARGET_BRANCH}:push-failed "
-              fi
-
+              echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
+              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
+              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
               # Return to main (keep the branch, we need it for PR)
-              git checkout main || git checkout -f main
+              git checkout main
             else
               # Get conflict info
               CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
-              git cherry-pick --abort || true
+              git cherry-pick --abort
 
               echo "::error::Cherry-pick failed due to conflicts"
               FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
 
               # Clean up the failed branch
-              git checkout main || git checkout -f main
-              git branch -D "${BACKPORT_BRANCH}" || true
+              git checkout main
+              git branch -D "${BACKPORT_BRANCH}"
             fi
 
             echo "::endgroup::"
@@ -401,10 +384,6 @@ jobs:
 
             **Reason:** Merge conflicts detected during cherry-pick of `${MERGE_COMMIT_SHORT}`
 
-            The auto-backport could not be completed automatically. Please backport
-            manually onto branch `${BACKPORT_BRANCH}` (from `origin/${target}`) and
-            open a PR to `${target}`.
-
             <details>
             <summary>📄 Conflicting files</summary>
 
@@ -437,37 +416,19 @@ jobs:
             MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
           fi
 
-          # Post a comment without letting a single failed `gh pr comment` (e.g.
-          # a locked issue, as happened for PR #13359, or a transient API error)
-          # abort the step under `set -e` and swallow the remaining failures.
-          post_comment() {
-            local body="$1"
-            local context="$2"
-            if ! gh pr comment "${PR_NUMBER}" --body "${body}"; then
-              echo "::warning::Could not comment on PR #${PR_NUMBER} about ${context}. Manual backport required."
-            fi
-          }
-
           for failure in ${{ steps.backport.outputs.failed }}; do
             IFS=':' read -r target reason conflicts <<< "${failure}"
 
-            SAFE_TARGET=$(echo "$target" | tr '/' '-')
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
-
             if [ "${reason}" = "branch-missing" ]; then
-              post_comment "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist" "missing branch ${target}"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
 
             elif [ "${reason}" = "already-exists" ]; then
-              post_comment "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed." "already-backported ${target}"
-
-            elif [ "${reason}" = "branch-create-failed" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport to \`${target}\` failed: could not create the backport branch. Please retry or backport manually."
-
-            elif [ "${reason}" = "push-failed" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport to \`${target}\` cherry-picked cleanly but the push failed. Please retry or push the backport branch manually."
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
 
             elif [ "${reason}" = "conflicts" ]; then
               CONFLICTS_INLINE=$(echo "${conflicts}" | tr ',' ' ')
+              SAFE_TARGET=$(echo "$target" | tr '/' '-')
+              BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
               PR_URL="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}"
 
               export PR_NUMBER PR_URL MERGE_COMMIT target BACKPORT_BRANCH CONFLICTS_INLINE
@@ -483,10 +444,10 @@ jobs:
               CONFLICTS_BLOCK=$(echo "${conflicts}" | tr ',' '\n')
               MERGE_COMMIT_SHORT="${MERGE_COMMIT:0:7}"
 
-              export target MERGE_COMMIT_SHORT BACKPORT_BRANCH CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
-              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${BACKPORT_BRANCH} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
+              export target MERGE_COMMIT_SHORT CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
+              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
 
-              post_comment "${COMMENT_BODY}" "cherry-pick conflict on ${target} (backport manually onto ${BACKPORT_BRANCH})"
+              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
             fi
           done
 

apps/website/e2e/navigation.spec.ts

@@ -31,26 +31,6 @@ test.describe('Desktop navigation @smoke', () => {
     }
   })
 
-  test('NEW badge shows on Products and Community only', async ({ page }) => {
-    const nav = page.getByRole('navigation', { name: 'Main navigation' })
-    const desktopLinks = nav.getByTestId('desktop-nav-links')
-
-    for (const label of ['Products', 'Community']) {
-      await expect(
-        desktopLinks
-          .getByRole('button', { name: label })
-          .getByText('NEW', { exact: true })
-      ).toBeVisible()
-    }
-
-    await expect(
-      desktopLinks.getByRole('button', { name: 'Company' }).getByText('NEW')
-    ).toHaveCount(0)
-    await expect(
-      desktopLinks.getByRole('link', { name: 'Pricing' }).getByText('NEW')
-    ).toHaveCount(0)
-  })
-
   test('CTA buttons are visible', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopCTA = nav.getByTestId('desktop-nav-cta')
@@ -137,27 +117,6 @@ test.describe('Mobile menu @mobile', () => {
     }
   })
 
-  test('NEW badge shows on Products and Community only', async ({ page }) => {
-    await page.getByRole('button', { name: 'Toggle menu' }).click()
-
-    const menu = page.getByRole('dialog')
-
-    for (const label of ['Products', 'Community']) {
-      await expect(
-        menu.getByRole('button', { name: label }).getByText('NEW', {
-          exact: true
-        })
-      ).toBeVisible()
-    }
-
-    await expect(
-      menu.getByRole('button', { name: 'Company' }).getByText('NEW')
-    ).toHaveCount(0)
-    await expect(
-      menu.getByRole('link', { name: 'Pricing' }).getByText('NEW')
-    ).toHaveCount(0)
-  })
-
   test('clicking section with subitems drills down and back works', async ({
     page
   }) => {

apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue

@@ -16,7 +16,6 @@ import type { NavItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
 import NavColumn from './NavColumn.vue'
 import NavFeaturedCard from './NavFeaturedCard.vue'
-import NewBadge from './NewBadge.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 const mainNavigation = getMainNavigation(locale)
@@ -43,10 +42,7 @@ function isNavItemActive(navItem: NavItem, path: string): boolean {
           <NavigationMenuTrigger
             :active="isNavItemActive(navItem, currentPath)"
           >
-            <span class="inline-flex items-center gap-1">
-              <span class="ppformula-text-center">{{ navItem.label }}</span>
-              <NewBadge v-if="navItem.badge" :locale="locale" size="xxs" />
-            </span>
+            {{ navItem.label }}
           </NavigationMenuTrigger>
           <NavigationMenuContent class="w-auto" data-testid="nav-dropdown">
             <ul class="flex w-max gap-16">

apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue

@@ -8,7 +8,6 @@ import { lockScroll, unlockScroll } from '../../../composables/scrollLock'
 import type { Locale } from '../../../i18n/translations.ts'
 import { t } from '../../../i18n/translations.ts'
 import NavLinkContent from './NavLinkContent.vue'
-import NewBadge from './NewBadge.vue'
 import Sheet from '@/components/ui/sheet/Sheet.vue'
 import SheetContent from '@/components/ui/sheet/SheetContent.vue'
 import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
@@ -97,8 +96,7 @@ onUnmounted(() => {
                   :href="item.columns ? undefined : item.href"
                   @click="item.columns && (activeSection = item.label)"
                 >
-                  <span class="ppformula-text-center">{{ item.label }}</span>
-                  <NewBadge v-if="item.badge" :locale="locale" size="xxs" />
+                  {{ item.label }}
                   <template #append>
                     <ChevronRight class="size-7" />
                   </template>

apps/website/src/components/common/HeaderMain/NavLinkContent.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import Badge from '@/components/ui/badge/Badge.vue'
 import { ArrowUpRight } from '@lucide/vue'
 
 import type { NavColumnItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
-import NewBadge from './NewBadge.vue'
+import { t } from '../../../i18n/translations'
 
 defineProps<{ item: NavColumnItem; locale: Locale }>()
 </script>
@@ -11,7 +12,9 @@ defineProps<{ item: NavColumnItem; locale: Locale }>()
 <template>
   <span class="flex items-center gap-2">
     <span class="ppformula-text-center">{{ item.label }}</span>
-    <NewBadge v-if="item.badge" :locale="locale" size="xs" />
+    <Badge v-if="item.badge" size="xs" variant="accent">
+      {{ t('nav.badgeNew', locale) }}
+    </Badge>
     <ArrowUpRight
       v-if="item.external"
       class="text-primary-comfy-yellow size-4"

apps/website/src/components/common/HeaderMain/NewBadge.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Badge from '@/components/ui/badge/Badge.vue'
-
-import type { BadgeVariants } from '@/components/ui/badge'
-import type { Locale } from '../../../i18n/translations'
-import { t } from '../../../i18n/translations'
-
-defineProps<{ locale: Locale; size?: BadgeVariants['size'] }>()
-</script>
-
-<template>
-  <Badge :size="size" variant="accent">
-    {{ t('nav.badgeNew', locale) }}
-  </Badge>
-</template>

apps/website/src/components/ui/badge/index.ts

@@ -6,15 +6,14 @@ export const badgeVariants = cva({
   variants: {
     size: {
       md: 'px-4 py-1 text-xs',
-      xs: 'px-2 py-0.5 text-[9px]',
-      xxs: 'px-1.5 py-px text-[8px]'
+      xs: 'px-2 py-0.5 text-[9px]'
     },
     variant: {
       default: 'bg-transparency-ink-t80',
       subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas',
       category: 'text-primary-comfy-yellow px-0 font-semibold uppercase',
       accent:
-        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
+        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
     }
   },
   defaultVariants: {

apps/website/src/data/mainNavigation.ts

@@ -30,23 +30,15 @@ export type NavItem =
       label: string
       columns: NavColumn[]
       featured?: NavFeatured
-      badge?: 'new'
       href?: never
     }
-  | {
-      label: string
-      href: string
-      badge?: 'new'
-      columns?: never
-      featured?: never
-    }
+  | { label: string; href: string; columns?: never; featured?: never }
 
 export function getMainNavigation(locale: Locale): NavItem[] {
   const routes = getRoutes(locale)
   return [
     {
       label: t('nav.products', locale),
-      badge: 'new',
       featured: {
         imageSrc: 'https://media.comfy.org/website/nav/mcp-card.webp',
         imageAlt: t('nav.featuredProductsAlt', locale),
@@ -103,7 +95,6 @@ export function getMainNavigation(locale: Locale): NavItem[] {
     { label: t('nav.pricing', locale), href: routes.cloudPricing },
     {
       label: t('nav.community', locale),
-      badge: 'new',
       featured: {
         imageSrc: 'https://media.comfy.org/website/nav/featured-demo-card.jpg',
         imageAlt: t('nav.featuredCommunityAlt', locale),

apps/website/src/templates/drops/DropCard.vue

@@ -61,12 +61,7 @@ const { drop, locale } = defineProps<{
             class="size-full object-cover object-center transition-transform duration-500 ease-out group-hover/pill-trigger:scale-105"
           />
         </div>
-        <Badge
-          v-if="drop.badge"
-          size="xs"
-          variant="accent"
-          class="absolute top-6 left-8"
-        >
+        <Badge v-if="drop.badge" variant="accent" class="absolute top-6 left-8">
           {{ drop.badge[locale] }}
         </Badge>
       </CardContent>

browser_tests/fixtures/ComfyPage.ts

@@ -28,7 +28,6 @@ import {
   ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
   NodeLibrarySidebarTabV2,
-  SidebarTab,
   WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -71,7 +70,6 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
-  private _appsTab: SidebarTab | null = null
   private _assetsTab: AssetsSidebarTab | null = null
   private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
@@ -106,11 +104,6 @@ class ComfyMenu {
     return this._nodeLibraryTabV2
   }
 
-  get appsTab() {
-    this._appsTab ??= new SidebarTab(this.page, 'apps')
-    return this._appsTab
-  }
-
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab

browser_tests/fixtures/components/SidebarTab.ts

@@ -4,7 +4,7 @@ import { expect } from '@playwright/test'
 import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-export class SidebarTab {
+class SidebarTab {
   public readonly tabButton: Locator
   public readonly selectedTabButton: Locator
 

browser_tests/fixtures/components/WorkflowActionsDropdown.ts

@@ -1,40 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import { TestIds } from '@e2e/fixtures/selectors'
-
-/**
- * The graph/app view-mode toggle and its workflow actions dropdown.
- * A separate instance mounts in each host - the subgraph breadcrumb (graph
- * mode) and the app-mode center panel - and unmounts as the mode flips.
- */
-export class WorkflowActionsDropdown {
-  /** The segmented graph/app toggle hosting the workflow actions trigger. */
-  public readonly viewModeToggle: Locator
-  /** The active segment; opens the workflow actions menu. */
-  public readonly trigger: Locator
-  /** The inactive segment that switches into app mode. */
-  public readonly enterAppModeSegment: Locator
-  /** The inactive segment that switches back to the node graph. */
-  public readonly enterGraphSegment: Locator
-  /** The workflow actions dropdown menu. */
-  public readonly menu: Locator
-
-  constructor(page: Page) {
-    this.viewModeToggle = page.getByTestId(
-      TestIds.workflowActions.viewModeToggle
-    )
-    this.trigger = this.triggerIn(this.viewModeToggle)
-    this.enterAppModeSegment = this.viewModeToggle.getByRole('button', {
-      name: 'Enter app mode'
-    })
-    this.enterGraphSegment = this.viewModeToggle.getByRole('button', {
-      name: 'Enter node graph'
-    })
-    this.menu = page.getByRole('menu', { name: 'Workflow actions' })
-  }
-
-  /** The trigger as rendered inside a specific mode's host. */
-  triggerIn(host: Locator): Locator {
-    return host.getByRole('button', { name: 'Workflow actions' })
-  }
-}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -4,7 +4,6 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
-import { WorkflowActionsDropdown } from '@e2e/fixtures/components/WorkflowActionsDropdown'
 import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
 import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
@@ -20,7 +19,6 @@ export class AppModeHelper {
   readonly outputHistory: OutputHistoryComponent
   readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
-  readonly workflowActions: WorkflowActionsDropdown
 
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -79,7 +77,6 @@ export class AppModeHelper {
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
     this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
-    this.workflowActions = new WorkflowActionsDropdown(comfyPage.page)
 
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -188,7 +185,10 @@ export class AppModeHelper {
       .waitFor({ state: 'hidden', timeout: 5000 })
       .catch(() => {})
 
-    await this.workflowActions.trigger.click()
+    await this.page
+      .getByRole('button', { name: 'Workflow actions' })
+      .first()
+      .click()
     await this.page
       .getByRole('menuitem', { name: /Build app|Edit app/ })
       .click()

browser_tests/fixtures/selectors.ts

@@ -239,9 +239,6 @@ export const TestIds = {
     renameInput: 'subgraph-breadcrumb-rename-input',
     menu: (key: string) => `subgraph-breadcrumb-menu-${key}`
   },
-  workflowActions: {
-    viewModeToggle: 'view-mode-toggle'
-  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`
@@ -279,7 +276,6 @@ export const TestIds = {
     overlay: 'loading-overlay'
   },
   load3d: {
-    categoryMenu: 'load3d-category-menu',
     recordingDuration: 'load3d-recording-duration'
   },
   load3dViewer: {

browser_tests/tests/appMode.spec.ts

@@ -1,14 +1,9 @@
-import { mergeTests } from '@playwright/test'
-
 import {
-  comfyExpect as expect,
-  comfyPageFixture
+  comfyPageFixture as test,
+  comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import { subgraphBreadcrumbFixture } from '@e2e/fixtures/helpers/SubgraphBreadcrumbHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-const test = mergeTests(comfyPageFixture, subgraphBreadcrumbFixture)
-
 test.describe('App mode usage', () => {
   test('Drag and Drop @vue-nodes', async ({ comfyPage, comfyFiles }) => {
     const { centerPanel } = comfyPage.appMode
@@ -142,117 +137,6 @@ test.describe('App mode usage', () => {
     await expect.poll(() => fileComboWidget.getValue()).toBe(targetImage)
   })
 
-  test('Shows a single side toolbar per mode, filtered to assets + apps in app mode', async ({
-    comfyPage
-  }) => {
-    const { sideToolbar, nodeLibraryTab, assetsTab, appsTab } = comfyPage.menu
-
-    await test.step('Graph mode shows the full toolbar', async () => {
-      await expect(sideToolbar).toHaveCount(1)
-      await expect(nodeLibraryTab.tabButton).toBeVisible()
-    })
-
-    await test.step('App mode shows only assets + apps', async () => {
-      await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
-      await expect(comfyPage.appMode.centerPanel).toBeVisible()
-
-      await expect(sideToolbar).toHaveCount(1)
-      await expect(assetsTab.tabButton).toBeVisible()
-      await expect(appsTab.tabButton).toBeVisible()
-      await expect(nodeLibraryTab.tabButton).toBeHidden()
-    })
-  })
-
-  test('Workflow actions menu keeps the same position across graph/app mode', async ({
-    comfyPage,
-    subgraphBreadcrumb
-  }) => {
-    const { workflowActions, centerPanel } = comfyPage.appMode
-
-    // Toggling graph<->app mode happens from this control, so it must not move
-    // out from under the cursor as the mode flips.
-    const graphActions = workflowActions.triggerIn(
-      subgraphBreadcrumb.panel.root
-    )
-    await expect(graphActions).toBeVisible()
-    const graphBox = await graphActions.boundingBox()
-
-    expect(graphBox).not.toBeNull()
-
-    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
-    await expect(centerPanel).toBeVisible()
-
-    const appActions = workflowActions.triggerIn(centerPanel)
-    await expect(appActions).toBeVisible()
-
-    // The toggle segments reorder (morph) as the mode flips, so poll until the
-    // active control settles at the same x it occupied in graph mode.
-    await expect
-      .poll(async () => {
-        const box = await appActions.boundingBox()
-        return box ? Math.abs(box.x - graphBox!.x) : Infinity
-      })
-      .toBeLessThanOrEqual(1)
-  })
-
-  test('Toggle segment flips mode without opening the menu', async ({
-    comfyPage
-  }) => {
-    const { workflowActions } = comfyPage.appMode
-    await expect(workflowActions.viewModeToggle).toBeVisible()
-
-    await workflowActions.enterAppModeSegment.click()
-
-    await expect(comfyPage.appMode.centerPanel).toBeVisible()
-    // The inactive segment switches mode; it must not also open the actions menu.
-    await expect(workflowActions.menu).toBeHidden()
-    await expect(workflowActions.viewModeToggle).toBeVisible()
-  })
-
-  test('Toggle segment flips mode via keyboard without opening the menu', async ({
-    comfyPage
-  }) => {
-    const { workflowActions } = comfyPage.appMode
-    await workflowActions.enterAppModeSegment.focus()
-    await workflowActions.enterAppModeSegment.press('Enter')
-
-    await expect(comfyPage.appMode.centerPanel).toBeVisible()
-    await expect(workflowActions.menu).toBeHidden()
-    await expect(workflowActions.trigger).toBeFocused()
-  })
-
-  test('Mode toggle re-appears after exiting the builder to graph mode', async ({
-    comfyPage
-  }) => {
-    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
-    await comfyPage.appMode.enableLinearMode()
-    await expect(toggle).toBeVisible()
-
-    await comfyPage.appMode.enterBuilder()
-    await expect(toggle).toBeHidden()
-    await expect(comfyPage.appMode.centerPanel).toBeHidden()
-
-    await comfyPage.appMode.footer.exitButton.click()
-    // Exiting the builder lands in graph mode: the app-mode-only center panel
-    // stays hidden while the graph-mode toggle host re-mounts and the toggle
-    // re-appears.
-    await expect(toggle).toBeVisible()
-    await expect(comfyPage.appMode.centerPanel).toBeHidden()
-  })
-
-  test('Mode toggle survives a sidebar tab remounting the app panel', async ({
-    comfyPage
-  }) => {
-    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
-    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
-    await expect(comfyPage.appMode.centerPanel).toBeVisible()
-    await expect(toggle).toBeVisible()
-
-    // Opening a sidebar tab remounts the app panel; the toggle re-renders with it.
-    await comfyPage.menu.assetsTab.tabButton.click()
-    await expect(toggle).toBeVisible()
-  })
-
   test.describe('Mobile', { tag: ['@mobile'] }, () => {
     test('panel navigation', async ({ comfyPage }) => {
       const { mobile } = comfyPage.appMode

browser_tests/tests/load3d/Load3DHelper.ts

@@ -11,47 +11,39 @@ export class Load3DHelper {
   }
 
   get menuButton(): Locator {
-    return this.node.getByTestId(TestIds.load3d.categoryMenu)
-  }
-
-  private get menuPanel(): Locator {
-    return this.node.page().getByRole('dialog')
+    return this.node.getByRole('button', { name: /show menu/i })
   }
 
   get recordingButton(): Locator {
-    return this.node.getByRole('button', { name: 'Record', exact: true })
+    return this.node.getByRole('button', { name: /start recording/i })
   }
 
   get stopRecordingButton(): Locator {
     return this.node.getByRole('button', { name: /stop recording/i })
   }
 
-  get recordingMenuButton(): Locator {
+  get exportRecordingButton(): Locator {
+    return this.node.getByRole('button', { name: /export recording/i })
+  }
+
+  get clearRecordingButton(): Locator {
+    return this.node.getByRole('button', { name: /clear recording/i })
+  }
+
+  get recordingDuration(): Locator {
     return this.node.getByTestId(TestIds.load3d.recordingDuration)
   }
 
-  get downloadRecordingMenuItem(): Locator {
-    return this.menuPanel.getByRole('button', { name: 'Download Recording' })
-  }
-
-  get startNewRecordingMenuItem(): Locator {
-    return this.menuPanel.getByRole('button', { name: 'Start New Recording' })
-  }
-
-  get deleteRecordingMenuItem(): Locator {
-    return this.menuPanel.getByRole('button', { name: 'Delete Recording' })
-  }
-
   get gridToggleButton(): Locator {
     return this.node.getByRole('button', { name: /show grid/i })
   }
 
   get uploadBackgroundImageButton(): Locator {
-    return this.node.getByRole('button', { name: 'BG Image' })
+    return this.node.getByRole('button', { name: /upload background image/i })
   }
 
   get removeBackgroundImageButton(): Locator {
-    return this.node.getByRole('button', { name: 'Remove BG' })
+    return this.node.getByRole('button', { name: /remove background image/i })
   }
 
   get panoramaModeButton(): Locator {
@@ -62,10 +54,6 @@ export class Load3DHelper {
     return this.node.locator('input[type="color"]')
   }
 
-  get exportButton(): Locator {
-    return this.node.getByRole('button', { name: 'Export', exact: true })
-  }
-
   get openViewerButton(): Locator {
     return this.node.getByRole('button', { name: /open in 3d viewer/i })
   }
@@ -75,15 +63,11 @@ export class Load3DHelper {
   }
 
   getMenuCategory(name: string): Locator {
-    return this.menuPanel.getByRole('button', { name, exact: true })
+    return this.node.getByText(name, { exact: true })
   }
 
   get gizmoToggleButton(): Locator {
-    // The category chip is also named "Gizmo" once that category is active;
-    // only the toggle carries aria-pressed.
-    return this.node
-      .getByRole('button', { name: 'Gizmo' })
-      .and(this.node.locator('[aria-pressed]'))
+    return this.node.getByRole('button', { name: 'Gizmo' })
   }
 
   get gizmoTranslateButton(): Locator {
@@ -99,17 +83,13 @@ export class Load3DHelper {
   }
 
   get gizmoResetButton(): Locator {
-    return this.node.getByRole('button', { name: 'Reset', exact: true })
+    return this.node.getByRole('button', { name: 'Reset Transform' })
   }
 
   async openMenu(): Promise<void> {
     await this.menuButton.click()
   }
 
-  async openRecordingMenu(): Promise<void> {
-    await this.recordingMenuButton.click()
-  }
-
   async openGizmoCategory(): Promise<void> {
     await this.openMenu()
     await this.getMenuCategory('Gizmo').click()

browser_tests/tests/load3d/load3d.spec.ts

@@ -47,12 +47,10 @@ test.describe('Load3D', () => {
       await load3d.openMenu()
 
       await expect(load3d.getMenuCategory('Scene')).toBeVisible()
-      await expect(load3d.getMenuCategory('3D Model')).toBeVisible()
+      await expect(load3d.getMenuCategory('Model')).toBeVisible()
       await expect(load3d.getMenuCategory('Camera')).toBeVisible()
       await expect(load3d.getMenuCategory('Light')).toBeVisible()
-      await expect(load3d.getMenuCategory('HDRI')).toBeVisible()
-      await expect(load3d.getMenuCategory('Gizmo')).toBeVisible()
-      await expect(load3d.exportButton).toBeVisible()
+      await expect(load3d.getMenuCategory('Export')).toBeVisible()
 
       await expect(load3d.node).toHaveScreenshot(
         'load3d-controls-menu-open.png',
@@ -255,7 +253,7 @@ test.describe('Load3D', () => {
     }
   )
 
-  test('Recording controls collapse into a duration chip with a menu after a recording', async ({
+  test('Recording controls show stop/export/clear buttons after a recording', async ({
     comfyPage,
     load3d
   }) => {
@@ -267,25 +265,20 @@ test.describe('Load3D', () => {
       await expect(load3d.stopRecordingButton).toBeVisible()
     })
 
-    await test.step('Stop recording surfaces the duration chip with a 1s duration', async () => {
+    await test.step('Stop recording surfaces export/clear controls and a 1s duration', async () => {
       // Record for 1s wall-clock so the duration display settles on 00:01.
       await comfyPage.delay(1000)
       await load3d.stopRecordingButton.click()
-      await expect(load3d.recordingMenuButton).toBeVisible()
-      await expect(load3d.recordingMenuButton).toHaveText('00:01')
-    })
-
-    await test.step('Chip menu offers download, re-record and delete actions', async () => {
-      await load3d.openRecordingMenu()
-      await expect(load3d.downloadRecordingMenuItem).toBeVisible()
-      await expect(load3d.startNewRecordingMenuItem).toBeVisible()
-      await expect(load3d.deleteRecordingMenuItem).toBeVisible()
-    })
-
-    await test.step('Deleting the recording restores the record button', async () => {
-      await load3d.deleteRecordingMenuItem.click()
-      await expect(load3d.recordingMenuButton).toHaveCount(0)
       await expect(load3d.recordingButton).toBeVisible()
+      await expect(load3d.exportRecordingButton).toBeVisible()
+      await expect(load3d.clearRecordingButton).toBeVisible()
+      await expect(load3d.recordingDuration).toHaveText('00:01')
+    })
+
+    await test.step('Clear recording removes export and clear controls', async () => {
+      await load3d.clearRecordingButton.click()
+      await expect(load3d.exportRecordingButton).toHaveCount(0)
+      await expect(load3d.clearRecordingButton).toHaveCount(0)
     })
   })
 })

browser_tests/tests/maskEditor.spec.ts

@@ -46,10 +46,7 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     { tag: ['@smoke', '@screenshot'] },
     async ({ comfyPage, maskEditor }) => {
       const { nodeId } = await maskEditor.loadImageOnNode()
-      // Center the node so its header clears the view-mode toggle floating
-      // at the top-left of the canvas.
-      const nodeRef = await comfyPage.nodeOps.getNodeRefById(nodeId)
-      await nodeRef.centerOnNode()
+      await comfyPage.canvasOps.pan({ x: 0, y: 40 }, { x: 300, y: 300 })
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)

browser_tests/tests/minimap.spec.ts

@@ -476,37 +476,6 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
       })
       .toBe(true)
   })
-
-  test(
-    'Closing minimap after subgraph navigation keeps Vue render in sync',
-    { tag: '@vue-nodes' },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
-
-      // Round-trip layers Vue's onNodeAdded wrapper on top of the minimap's.
-      await comfyPage.vueNodes.enterSubgraph(subgraphNodeId)
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Minimap unmount must not clobber the Vue wrapper layered above it.
-      await comfyPage.page
-        .getByTestId(TestIds.canvas.closeMinimapButton)
-        .click()
-
-      const subgraphFixture =
-        await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
-      await comfyPage.contextMenu.openForVueNode(subgraphFixture.header)
-      await comfyPage.contextMenu.clickMenuItemExact('Unpack Subgraph')
-      await comfyPage.contextMenu.waitForHidden()
-
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(2)
-      await expect(
-        comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-      ).toHaveCount(0)
-    }
-  )
 })
 
 test.describe('Minimap mobile', { tag: ['@mobile', '@canvas'] }, () => {

knip.config.ts

@@ -54,6 +54,12 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
+    // Pending integration: consumed by split/member-auditing (Activity pager);
+    // models governance (DES-503) reuses it later
+    'src/components/ui/pagination/Pagination.vue',
+    // Pending integration: consumed by split/plan-credits-tabs (Overview);
+    // models governance (DES-503) reuses it later
+    'src/platform/workspace/composables/useAutoPageSize.ts',
     // Marketing media tooling — adopted by pages in a follow-up PR
     'apps/website/src/components/common/SiteVideo.vue',
     'apps/website/src/utils/marketingImage.ts',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.48.2",
+  "version": "1.48.0",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -114,7 +114,6 @@
     "jsonata": "catalog:",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
-    "minisearch": "catalog:",
     "pinia": "catalog:",
     "posthog-js": "catalog:",
     "primeicons": "catalog:",

packages/ingest-types/src/types.gen.ts

@@ -1320,21 +1320,13 @@ export type SecretProvidersResponse = {
 }
 
 /**
- * A provider the user may configure a secret for.
+ * A provider the user may configure a secret for. The shape is deliberately minimal (identifier only) and reserved for future per-provider fields such as sub-keys.
  */
 export type SecretProvider = {
   /**
    * Provider identifier (e.g., huggingface, civitai, runway, gemini)
    */
   id: string
-  /**
-   * How the credential is entered. `text` is a single-line secret (an API key); `json_file` is an uploaded/pasted JSON document (e.g. a Vertex service-account key). Defaults to `text` when omitted.
-   */
-  input_type?: 'text' | 'json_file'
-  /**
-   * Human-facing display label for the provider. Falls back to the frontend registry label, then the raw id, when omitted.
-   */
-  label?: string
 }
 
 /**

packages/ingest-types/src/zod.gen.ts

@@ -874,12 +874,10 @@ export const zTeamCreditStopSummary = z.object({
 })
 
 /**
- * A provider the user may configure a secret for.
+ * A provider the user may configure a secret for. The shape is deliberately minimal (identifier only) and reserved for future per-provider fields such as sub-keys.
  */
 export const zSecretProvider = z.object({
-  id: z.string(),
-  input_type: z.enum(['text', 'json_file']).optional(),
-  label: z.string().optional()
+  id: z.string()
 })
 
 /**

pnpm-lock.yaml

@@ -282,9 +282,6 @@ catalogs:
     markdown-table:
       specifier: ^3.0.4
       version: 3.0.4
-    minisearch:
-      specifier: ^7.2.0
-      version: 7.2.0
     mixpanel-browser:
       specifier: ^2.71.0
       version: 2.71.0
@@ -594,9 +591,6 @@ importers:
       marked:
         specifier: ^15.0.11
         version: 15.0.11
-      minisearch:
-        specifier: 'catalog:'
-        version: 7.2.0
       pinia:
         specifier: 'catalog:'
         version: 3.0.4(typescript@5.9.3)(vue@3.5.34(typescript@5.9.3))
@@ -7030,9 +7024,6 @@ packages:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minisearch@7.2.0:
-    resolution: {integrity: sha512-dqT2XBYUOZOiC5t2HRnwADjhNS2cecp9u+TJRiJ1Qp/f5qjkeT5APcGPjHw+bz89Ms8Jp+cG4AlE+QZ/QnDglg==}
-
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
@@ -8893,8 +8884,8 @@ packages:
   vue-component-type-helpers@3.3.2:
     resolution: {integrity: sha512-l4Z2Y34m7nFMlx8vrslJaVtXxUpzgDMSESC7TakG/c5kwjYT/do+E0NcT2/vWDzaoIhsShg/2OKwX7Q4nbzC0g==}
 
-  vue-component-type-helpers@3.3.6:
-    resolution: {integrity: sha512-FkljacAwJ9BUoSUdpFe3VDy0sGigNlTH9+2zcXUWmZOjN8swiCkl3t48wOJun0OsUd2cEIda1l04tsxMiKIIrQ==}
+  vue-component-type-helpers@3.3.5:
+    resolution: {integrity: sha512-Fe1jyPJoUGpJOYKOri44jduR7My4yYINOMJISuMAbmrs+L5LbIDUc8NTWZYY3EJLK0yPLuCmcd5zoCsE4k2/KA==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -11677,7 +11668,7 @@ snapshots:
       storybook: 10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.34(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.6
+      vue-component-type-helpers: 3.3.5
 
   '@swc/helpers@0.5.21':
     dependencies:
@@ -15826,8 +15817,6 @@ snapshots:
 
   minipass@7.1.3: {}
 
-  minisearch@7.2.0: {}
-
   mitt@3.0.1: {}
 
   mixpanel-browser@2.71.0:
@@ -18149,7 +18138,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.2: {}
 
-  vue-component-type-helpers@3.3.6: {}
+  vue-component-type-helpers@3.3.5: {}
 
   vue-demi@0.14.10(vue@3.5.34(typescript@5.9.3)):
     dependencies:

pnpm-workspace.yaml

@@ -103,7 +103,6 @@ catalog:
   lenis: ^1.3.21
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
-  minisearch: ^7.2.0
   mixpanel-browser: ^2.71.0
   monocart-coverage-reports: ^2.12.9
   oxfmt: ^0.54.0

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -82,7 +82,9 @@ import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDisabledPartnerNodesStore } from '@/platform/workspace/stores/disabledPartnerNodesStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import {
   isInstantMode,
   isInstantRunningMode,
@@ -99,6 +101,10 @@ const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
   graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
 )
+const disabledPartnerNodesStore = useDisabledPartnerNodesStore()
+const hasDisabledNodes = computed(
+  () => disabledPartnerNodesStore.offenders.length > 0
+)
 
 const { t } = useI18n()
 type QueueModeMenuKey = 'disabled' | 'change' | 'instant-idle'
@@ -190,7 +196,7 @@ const iconClass = computed(() => {
   if (isStopInstantAction.value) {
     return 'icon-[lucide--square]'
   }
-  if (hasMissingNodes.value) {
+  if (hasMissingNodes.value || hasDisabledNodes.value) {
     return 'icon-[lucide--triangle-alert]'
   }
   if (workspaceStore.shiftDown) {
@@ -215,6 +221,9 @@ const queueButtonTooltip = computed(() => {
   if (hasMissingNodes.value) {
     return t('menu.runWorkflowDisabled')
   }
+  if (hasDisabledNodes.value) {
+    return t('menu.runWorkflowDisabledNodes')
+  }
   if (workspaceStore.shiftDown) {
     return t('menu.runWorkflowFront')
   }
@@ -228,6 +237,11 @@ const queuePrompt = async (e: Event) => {
     return
   }
 
+  if (hasDisabledNodes.value) {
+    useRightSidePanelStore().openPanel('errors')
+    return
+  }
+
   const isShiftPressed = 'shiftKey' in e && e.shiftKey
   const commandId = isShiftPressed
     ? 'Comfy.QueuePromptFront'

src/components/appMode/AppModeToolbar.test.ts

@@ -1,87 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import AppModeToolbar from './AppModeToolbar.vue'
-
-const appModeState = vi.hoisted(() => ({
-  enableAppBuilder: true,
-  hasNodes: true
-}))
-const enterBuilder = vi.hoisted(() => vi.fn())
-
-vi.mock('@/composables/useAppMode', () => ({
-  useAppMode: () => ({ enableAppBuilder: appModeState.enableAppBuilder })
-}))
-
-vi.mock('@/stores/appModeStore', async () => {
-  const { computed, reactive } = await import('vue')
-  return {
-    useAppModeStore: () =>
-      reactive({
-        enterBuilder,
-        hasNodes: computed(() => appModeState.hasNodes)
-      })
-  }
-})
-
-const BUILD_AN_APP = 'Build an app'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      linearMode: { appModeToolbar: { buildAnApp: BUILD_AN_APP } }
-    }
-  }
-})
-
-function renderToolbar() {
-  const user = userEvent.setup()
-  const result = render(AppModeToolbar, {
-    global: {
-      plugins: [i18n],
-      stubs: {
-        WorkflowActionsDropdown: true
-      }
-    }
-  })
-  return { ...result, user }
-}
-
-describe('AppModeToolbar', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    appModeState.enableAppBuilder = true
-    appModeState.hasNodes = true
-  })
-
-  it('shows an enabled build button and enters the builder on click', async () => {
-    const { user } = renderToolbar()
-
-    const button = screen.getByRole('button', { name: BUILD_AN_APP })
-    expect(button).toBeEnabled()
-
-    await user.click(button)
-
-    expect(enterBuilder).toHaveBeenCalled()
-  })
-
-  it('disables the build button when there are no nodes', () => {
-    appModeState.hasNodes = false
-    renderToolbar()
-
-    expect(screen.getByRole('button', { name: BUILD_AN_APP })).toBeDisabled()
-  })
-
-  it('hides the build button when app building is disabled', () => {
-    appModeState.enableAppBuilder = false
-    renderToolbar()
-
-    expect(
-      screen.queryByRole('button', { name: BUILD_AN_APP })
-    ).not.toBeInTheDocument()
-  })
-})

src/components/appMode/AppModeToolbar.vue

@@ -1,33 +1,119 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import Button from '@/components/ui/button/Button.vue'
 import { useAppMode } from '@/composables/useAppMode'
+import { isCloud } from '@/platform/distribution/types'
+import {
+  openShareDialog,
+  prefetchShareDialog
+} from '@/platform/workflow/sharing/composables/lazyShareDialog'
 import { useAppModeStore } from '@/stores/appModeStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { cn } from '@comfyorg/tailwind-utils'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
+const commandStore = useCommandStore()
+const workspaceStore = useWorkspaceStore()
 const { enableAppBuilder } = useAppMode()
 const appModeStore = useAppModeStore()
 const { enterBuilder } = appModeStore
+const { toastErrorHandler } = useErrorHandling()
+const { flags } = useFeatureFlags()
 const { hasNodes } = storeToRefs(appModeStore)
+const tooltipOptions = { showDelay: 300, hideDelay: 300 }
+
+const isAssetsActive = computed(
+  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'assets'
+)
+const isAppsActive = computed(
+  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'apps'
+)
+
+function openAssets() {
+  void commandStore.execute('Workspace.ToggleSidebarTab.assets')
+}
+
+function showApps() {
+  void commandStore.execute('Workspace.ToggleSidebarTab.apps')
+}
 </script>
 
 <template>
   <div class="pointer-events-auto flex flex-row items-start gap-2">
+    <div class="pointer-events-auto flex flex-col gap-2">
+      <Button
+        v-if="enableAppBuilder"
+        v-tooltip.right="{
+          value: t('linearMode.appModeToolbar.appBuilder'),
+          ...tooltipOptions
+        }"
+        variant="secondary"
+        size="unset"
+        :disabled="!hasNodes"
+        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
+        class="size-10 rounded-lg"
+        @click="enterBuilder"
+      >
+        <i class="icon-[lucide--hammer] size-4" />
+      </Button>
+      <Button
+        v-if="isCloud && flags.workflowSharingEnabled"
+        v-tooltip.right="{
+          value: t('actionbar.shareTooltip'),
+          ...tooltipOptions
+        }"
+        variant="secondary"
+        size="unset"
+        :aria-label="t('actionbar.shareTooltip')"
+        class="size-10 rounded-lg"
+        @click="() => openShareDialog().catch(toastErrorHandler)"
+        @pointerenter="prefetchShareDialog"
+      >
+        <i class="icon-[lucide--send] size-4" />
+      </Button>
+
+      <div
+        class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
+      >
+        <Button
+          v-tooltip.right="{
+            value: t('sideToolbar.mediaAssets.title'),
+            ...tooltipOptions
+          }"
+          variant="textonly"
+          size="unset"
+          :aria-label="t('sideToolbar.mediaAssets.title')"
+          :class="
+            cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
+          "
+          @click="openAssets"
+        >
+          <i class="icon-[comfy--image-ai-edit] size-4" />
+        </Button>
+        <Button
+          v-tooltip.right="{
+            value: t('linearMode.appModeToolbar.apps'),
+            ...tooltipOptions
+          }"
+          variant="textonly"
+          size="unset"
+          :aria-label="t('linearMode.appModeToolbar.apps')"
+          :class="
+            cn('size-10', isAppsActive && 'bg-secondary-background-hover')
+          "
+          @click="showApps"
+        >
+          <i class="icon-[lucide--panels-top-left] size-4" />
+        </Button>
+      </div>
+    </div>
     <WorkflowActionsDropdown source="app_mode_toolbar" />
-    <Button
-      v-if="enableAppBuilder"
-      variant="base"
-      size="unset"
-      :disabled="!hasNodes"
-      :aria-label="t('linearMode.appModeToolbar.buildAnApp')"
-      class="h-10 gap-1.5 rounded-lg px-3 font-normal"
-      @click="enterBuilder"
-    >
-      <i class="icon-[lucide--hammer] size-4" />
-      <span>{{ t('linearMode.appModeToolbar.buildAnApp') }}</span>
-    </Button>
   </div>
 </template>

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -4,67 +4,37 @@
     data-testid="bounding-boxes"
     @pointerdown.stop
   >
-    <div class="flex flex-col">
-      <div
-        class="flex h-9 items-center gap-1 rounded-t-sm border border-b-0 border-component-node-border bg-component-node-widget-background px-2"
-      >
-        <Button
-          variant="textonly"
-          size="unset"
-          :aria-pressed="grid"
-          :class="
-            cn(
-              actionBtnClass,
-              grid && 'bg-component-node-widget-background-selected'
-            )
-          "
-          @click="grid = !grid"
-        >
-          <i class="icon-[lucide--grid-3x3] size-4" />
-          <span>{{ $t('boundingBoxes.grid') }}</span>
-        </Button>
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="cn(actionBtnClass, 'ml-auto')"
-          @click="clearAll"
-        >
-          <i class="icon-[lucide--undo-2] size-4" />
-          <span>{{ $t('boundingBoxes.clearAll') }}</span>
-        </Button>
-      </div>
-      <div
-        ref="canvasContainer"
-        class="relative w-full shrink-0 overflow-hidden rounded-b-sm border border-t-0 border-component-node-border bg-base-background"
-        :style="canvasStyle"
-      >
-        <canvas
-          ref="canvasEl"
-          tabindex="0"
-          class="absolute inset-0 size-full rounded-sm text-node-component-slot-text outline-none"
-          :style="{ cursor: canvasCursor }"
-          @pointerdown="onPointerDown"
-          @pointermove="onCanvasPointerMove"
-          @pointerup="onDocPointerUp"
-          @pointercancel="onDocPointerUp"
-          @pointerleave="onPointerLeave"
-          @lostpointercapture="onDocPointerUp"
-          @dblclick="onDoubleClick"
-          @keydown="onCanvasKeyDown"
-          @focus="focused = true"
-          @blur="focused = false"
-        />
-        <textarea
-          v-if="inlineEditor"
-          ref="inlineEditorEl"
-          v-model="inlineEditor.value"
-          class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
-          :style="inlineEditor.style"
-          data-capture-wheel="true"
-          @keydown.stop="onInlineKeyDown"
-          @blur="commitInlineEditor"
-        />
-      </div>
+    <div
+      ref="canvasContainer"
+      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
+      :style="canvasStyle"
+    >
+      <canvas
+        ref="canvasEl"
+        tabindex="0"
+        class="absolute inset-0 size-full rounded-sm outline-none"
+        :style="{ cursor: canvasCursor }"
+        @pointerdown="onPointerDown"
+        @pointermove="onCanvasPointerMove"
+        @pointerup="onDocPointerUp"
+        @pointercancel="onDocPointerUp"
+        @pointerleave="onPointerLeave"
+        @lostpointercapture="onDocPointerUp"
+        @dblclick="onDoubleClick"
+        @keydown="onCanvasKeyDown"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+      <textarea
+        v-if="inlineEditor"
+        ref="inlineEditorEl"
+        v-model="inlineEditor.value"
+        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
+        :style="inlineEditor.style"
+        data-capture-wheel="true"
+        @keydown.stop="onInlineKeyDown"
+        @blur="commitInlineEditor"
+      />
     </div>
 
     <div
@@ -152,6 +122,16 @@
     <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
       {{ $t('boundingBoxes.clickRegionToEdit') }}
     </div>
+
+    <Button
+      variant="secondary"
+      size="md"
+      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
+      @click="clearAll"
+    >
+      <i class="icon-[lucide--undo-2]" />
+      {{ $t('boundingBoxes.clearAll') }}
+    </Button>
   </div>
 </template>
 
@@ -167,9 +147,6 @@ import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import type { NodeId } from '@/types/nodeId'
 
-const actionBtnClass =
-  'flex shrink-0 items-center gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 text-sm text-base-foreground outline-none transition-colors hover:bg-component-node-widget-background-hovered'
-
 const { nodeId } = defineProps<{ nodeId: NodeId }>()
 const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
 
@@ -195,8 +172,7 @@ const {
   commitInlineEditor,
   setActiveType,
   clearAll,
-  syncState,
-  grid
+  syncState
 } = useBoundingBoxes(nodeId, {
   canvasEl,
   canvasContainer,

src/components/breadcrumb/SubgraphBreadcrumb.test.ts

@@ -1,71 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import SubgraphBreadcrumb from './SubgraphBreadcrumb.vue'
-
-const canvasState = vi.hoisted(() => ({ linearMode: false }))
-
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => ({ activeWorkflow: { filename: 'workflow.json' } })
-}))
-
-vi.mock('@/stores/subgraphNavigationStore', () => ({
-  useSubgraphNavigationStore: () => ({ navigationStack: [] })
-}))
-
-vi.mock('@/stores/subgraphStore', () => ({
-  useSubgraphStore: () => ({ isSubgraphBlueprint: () => false })
-}))
-
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({ linearMode: canvasState.linearMode })
-}))
-
-vi.mock('@/composables/element/useOverflowObserver', () => ({
-  useOverflowObserver: () => ({
-    dispose: vi.fn(),
-    checkOverflow: vi.fn(),
-    disposed: { value: false }
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: { g: { graphNavigation: 'Graph navigation' } }
-  }
-})
-
-function renderBreadcrumb() {
-  return render(SubgraphBreadcrumb, {
-    global: {
-      plugins: [i18n],
-      directives: { tooltip: {} },
-      stubs: {
-        WorkflowActionsDropdown: { template: '<div data-testid="wad" />' },
-        Breadcrumb: true,
-        Button: true,
-        SubgraphBreadcrumbItem: true
-      }
-    }
-  })
-}
-
-describe('SubgraphBreadcrumb', () => {
-  beforeEach(() => {
-    canvasState.linearMode = false
-  })
-
-  it('renders the workflow actions dropdown when not in linear mode', () => {
-    renderBreadcrumb()
-    expect(screen.getByTestId('wad')).toBeInTheDocument()
-  })
-
-  it('hides the workflow actions dropdown in linear mode', () => {
-    canvasState.linearMode = true
-    renderBreadcrumb()
-    expect(screen.queryByTestId('wad')).not.toBeInTheDocument()
-  })
-})

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -14,10 +14,7 @@
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
     }"
   >
-    <WorkflowActionsDropdown
-      v-if="!canvasStore.linearMode"
-      source="breadcrumb_subgraph_menu_selected"
-    />
+    <WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
     <Button
       v-if="isInSubgraph"
       class="back-button pointer-events-auto ml-1.5 size-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
@@ -74,7 +71,6 @@ const ICON_WIDTH = 20
 
 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
-const canvasStore = useCanvasStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 const isBlueprint = computed(() =>
@@ -95,7 +91,7 @@ const home = computed(() => ({
       button_id: 'breadcrumb_subgraph_root_selected',
       element_group: 'breadcrumb'
     })
-    const canvas = canvasStore.getCanvas()
+    const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
     canvas.setGraph(canvas.graph.rootGraph)
@@ -111,13 +107,13 @@ const items = computed(() => {
         button_id: 'breadcrumb_subgraph_item_selected',
         element_group: 'breadcrumb'
       })
-      const canvas = canvasStore.getCanvas()
+      const canvas = useCanvasStore().getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
       canvas.setGraph(subgraph)
     },
     updateTitle: (title: string) => {
-      const rootGraph = canvasStore.getCanvas().graph?.rootGraph
+      const rootGraph = useCanvasStore().getCanvas().graph?.rootGraph
       if (!rootGraph) return
 
       forEachSubgraphNode(rootGraph, subgraph.id, (node) => {

src/components/common/DropdownMenu.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ZIndex } from '@primeuix/utils/zindex'
 import type { MenuItem } from 'primevue/menuitem'
 import {
   DropdownMenuArrow,
@@ -11,15 +12,21 @@ import { computed, ref, toValue } from 'vue'
 
 import DropdownItem from '@/components/common/DropdownItem.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useModalLiftedZIndex } from '@/composables/useModalLiftedZIndex'
 import { cn } from '@comfyorg/tailwind-utils'
 import type { ButtonVariants } from '../ui/button/button.variants'
 
+// Shared base for @primeuix's auto-incrementing 'modal' z-index counter.
+const MODAL_BASE_Z_INDEX = 1700
+
 defineOptions({
   inheritAttrs: false
 })
 
-const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
+const {
+  itemClass: itemProp,
+  contentClass: contentProp,
+  modal = true
+} = defineProps<{
   entries?: MenuItem[]
   icon?: string
   to?: string | HTMLElement
@@ -27,6 +34,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
   contentClass?: string
   buttonSize?: ButtonVariants['size']
   buttonClass?: string
+  modal?: boolean
 }>()
 
 const itemClass = computed(() =>
@@ -43,12 +51,19 @@ const contentClass = computed(() =>
   )
 )
 
+// Body-portaled content keeps its static z-1700 unless a dialog that joined
+// @primeuix's auto-incrementing 'modal' counter is open above it; then lift
+// past that dialog so the menu isn't hidden behind it.
 const open = ref(false)
-const contentStyle = useModalLiftedZIndex(open)
+const contentStyle = computed(() => {
+  if (!open.value) return undefined
+  const topZIndex = ZIndex.getCurrent('modal')
+  return topZIndex >= MODAL_BASE_Z_INDEX ? { zIndex: topZIndex + 1 } : undefined
+})
 </script>
 
 <template>
-  <DropdownMenuRoot v-model:open="open">
+  <DropdownMenuRoot v-model:open="open" :modal>
     <DropdownMenuTrigger as-child>
       <slot name="button">
         <Button :size="buttonSize ?? 'icon'" :class="buttonClass">

src/components/common/SelectionBar.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative mx-2">
+    <div
+      class="absolute bottom-6 left-1/2 z-40 flex w-full max-w-78 -translate-x-1/2 items-center gap-2 rounded-lg bg-base-foreground p-2 text-base-background shadow-interface"
+    >
+      <Button
+        v-tooltip.top="{ value: deselectLabel, showDelay: 300 }"
+        variant="inverted"
+        size="icon-lg"
+        type="button"
+        :aria-label="deselectLabel"
+        class="rounded-lg hover:bg-base-background/10"
+        @click="emit('deselect')"
+      >
+        <i class="icon-[lucide--x] size-4" />
+      </Button>
+      <span class="pr-6 text-sm font-bold whitespace-nowrap tabular-nums">
+        {{ label }}
+      </span>
+      <div class="ml-auto flex shrink-0 items-center gap-1">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+defineProps<{
+  /** The "N selected" text; the caller formats it (pluralization, wording). */
+  label: string
+  /** Accessible label + tooltip for the deselect button. */
+  deselectLabel: string
+}>()
+
+const emit = defineEmits<{
+  deselect: []
+}>()
+</script>

src/components/common/UserCredit.vue

@@ -14,7 +14,7 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i class="icon-[lucide--component]" />
+        <i class="icon-[lucide--coins]" />
       </template>
     </Tag>
     <div :class="textClass">

src/components/common/WorkflowActionsDropdown.test.ts

@@ -1,285 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import type { ViewMode } from '@/utils/appMode'
-
-import WorkflowActionsDropdown from './WorkflowActionsDropdown.vue'
-
-const spies = vi.hoisted(() => ({
-  execute: vi.fn(),
-  trackUiButtonClicked: vi.fn(),
-  markAsSeen: vi.fn()
-}))
-
-const viewState = vi.hoisted(() => ({
-  viewMode: 'graph' as ViewMode,
-  displayViewMode: 'graph' as ViewMode
-}))
-
-vi.mock('@/stores/appModeStore', async () => {
-  const { computed, reactive } = await import('vue')
-  return {
-    useAppModeStore: () =>
-      reactive({
-        viewMode: computed(() => viewState.viewMode),
-        displayViewMode: computed(() => viewState.displayViewMode)
-      })
-  }
-})
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({ execute: spies.execute, commands: [] })
-}))
-
-vi.mock('@/platform/keybindings/keybindingStore', () => ({
-  useKeybindingStore: () => ({
-    getKeybindingByCommandId: () => ({ combo: { toString: () => 'Ctrl+L' } })
-  })
-}))
-
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({ trackUiButtonClicked: spies.trackUiButtonClicked })
-}))
-
-vi.mock('@/composables/useWorkflowActionsMenu', async () => {
-  const { ref } = await import('vue')
-  return { useWorkflowActionsMenu: () => ({ menuItems: ref([]) }) }
-})
-
-vi.mock('@/composables/useNewMenuItemIndicator', async () => {
-  const { ref } = await import('vue')
-  return {
-    useNewMenuItemIndicator: () => ({
-      hasUnseenItems: ref(true),
-      markAsSeen: spies.markAsSeen
-    })
-  }
-})
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: { shortcutSuffix: ' ({shortcut})' },
-      breadcrumbsMenu: {
-        graph: 'Graph',
-        app: 'App',
-        enterNodeGraph: 'Enter node graph',
-        enterAppMode: 'Enter app mode',
-        workflowActions: 'Workflow actions',
-        activeModeWorkflowActions: '{mode} mode, workflow actions'
-      }
-    }
-  }
-})
-
-function renderDropdown() {
-  const user = userEvent.setup()
-  const result = render(WorkflowActionsDropdown, {
-    props: { source: 'test' },
-    global: {
-      plugins: [i18n],
-      directives: { tooltip: {} },
-      stubs: {
-        DropdownMenuPortal: { template: '<div><slot /></div>' },
-        DropdownMenuContent: { template: '<div role="menu"><slot /></div>' },
-        WorkflowActionsList: true
-      }
-    }
-  })
-  return { ...result, user }
-}
-
-describe('WorkflowActionsDropdown', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    viewState.viewMode = 'graph'
-    viewState.displayViewMode = 'graph'
-    // A prior test's segment switch arms the module-level focus handoff;
-    // a throwaway mount consumes it so it cannot steal focus mid-test.
-    renderDropdown().unmount()
-  })
-
-  it('keeps the active segment label in its accessible name alongside the actions label', () => {
-    renderDropdown()
-
-    // Graph is the active segment, so its name must contain the visible "Graph"
-    // label (label-in-name) while still matching the "Workflow actions" trigger.
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-    expect(active).toHaveAttribute('aria-label', 'Graph mode, workflow actions')
-  })
-
-  it('labels the inactive segment with its switch action only', () => {
-    renderDropdown()
-
-    // getByRole with a string name requires an exact accessible-name match,
-    // so this also proves the name has no "mode, workflow actions" suffix.
-    expect(
-      screen.getByRole('button', { name: 'Enter app mode' })
-    ).toBeInTheDocument()
-  })
-
-  it('flips the segment roles when app mode is active', () => {
-    viewState.viewMode = 'app'
-    viewState.displayViewMode = 'app'
-    renderDropdown()
-
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-    expect(active).toHaveAttribute('aria-label', 'App mode, workflow actions')
-    expect(
-      screen.getByRole('button', { name: 'Enter node graph' })
-    ).toBeInTheDocument()
-  })
-
-  it('derives the active segment from the real mode, not the lagged display mode', () => {
-    // Mid-animation: the mode has flipped to app but the display still lags.
-    viewState.viewMode = 'app'
-    viewState.displayViewMode = 'graph'
-    renderDropdown()
-
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-    expect(active).toHaveAttribute('aria-label', 'App mode, workflow actions')
-    expect(
-      screen.getByRole('button', { name: 'Enter node graph' })
-    ).toBeInTheDocument()
-  })
-
-  it('carries the popup semantics only on the active segment', () => {
-    renderDropdown()
-
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-    expect(active).toHaveAttribute('aria-haspopup', 'menu')
-    expect(active).toHaveAttribute('aria-expanded', 'false')
-    expect(
-      screen.getByRole('button', { name: 'Enter app mode' })
-    ).not.toHaveAttribute('aria-haspopup')
-  })
-
-  it('toggles the view mode when the inactive segment is clicked', async () => {
-    const { user } = renderDropdown()
-
-    await user.click(screen.getByRole('button', { name: 'Enter app mode' }))
-
-    expect(spies.execute).toHaveBeenCalledWith('Comfy.ToggleLinear', {
-      metadata: { source: 'test' }
-    })
-    // The switch must not also open the menu as a side effect.
-    expect(
-      screen.getByRole('button', { name: /workflow actions/ })
-    ).toHaveAttribute('aria-expanded', 'false')
-    expect(spies.trackUiButtonClicked).not.toHaveBeenCalled()
-    expect(spies.markAsSeen).not.toHaveBeenCalled()
-  })
-
-  it('opens the menu instead of toggling the mode when the active segment is clicked', async () => {
-    const { user } = renderDropdown()
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-
-    await user.click(active)
-
-    expect(spies.execute).not.toHaveBeenCalled()
-    expect(active).toHaveAttribute('aria-expanded', 'true')
-    expect(spies.markAsSeen).toHaveBeenCalled()
-    expect(spies.trackUiButtonClicked).toHaveBeenCalledWith({
-      button_id: 'test',
-      element_group: 'workflow_actions'
-    })
-  })
-
-  it('closes the menu when the open trigger is clicked again', async () => {
-    const { user } = renderDropdown()
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-
-    await user.click(active)
-    await user.click(active)
-
-    expect(active).toHaveAttribute('aria-expanded', 'false')
-  })
-
-  it('switches mode when the inactive segment is activated by keyboard', async () => {
-    const { user } = renderDropdown()
-    const inactive = screen.getByRole('button', { name: 'Enter app mode' })
-
-    inactive.focus()
-    await user.keyboard('{Enter}')
-
-    expect(spies.execute).toHaveBeenCalledWith('Comfy.ToggleLinear', {
-      metadata: { source: 'test' }
-    })
-    // The keydown must not reach the trigger and open the menu.
-    expect(
-      screen.getByRole('button', { name: /workflow actions/ })
-    ).toHaveAttribute('aria-expanded', 'false')
-    expect(spies.trackUiButtonClicked).not.toHaveBeenCalled()
-  })
-
-  it('lets non-trigger keys bubble past the inactive segment', async () => {
-    const { user } = renderDropdown()
-    const bubbledKeys: string[] = []
-    const recordKey = (event: KeyboardEvent) => bubbledKeys.push(event.key)
-    document.addEventListener('keydown', recordKey)
-
-    screen.getByRole('button', { name: 'Enter app mode' }).focus()
-    await user.keyboard('r{Enter}')
-    document.removeEventListener('keydown', recordKey)
-
-    // App-level keybindings rely on keydowns bubbling; only the keys that
-    // would open the reka trigger may be stopped.
-    expect(bubbledKeys).toContain('r')
-    expect(bubbledKeys).not.toContain('Enter')
-  })
-
-  it('opens the menu when the active segment is activated by keyboard', async () => {
-    const { user } = renderDropdown()
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-
-    active.focus()
-    await user.keyboard('{Enter}')
-
-    expect(spies.execute).not.toHaveBeenCalled()
-    expect(active).toHaveAttribute('aria-expanded', 'true')
-  })
-
-  it('opens the menu on ArrowDown on the active segment', async () => {
-    const { user } = renderDropdown()
-    const active = screen.getByRole('button', { name: /workflow actions/ })
-
-    active.focus()
-    await user.keyboard('{ArrowDown}')
-
-    expect(active).toHaveAttribute('aria-expanded', 'true')
-  })
-
-  it('forwards focus from the toggle group to the active segment', () => {
-    renderDropdown()
-
-    // Reka returns focus to the trigger div when the menu closes; the div
-    // hands it on so focus lands on an interactive element.
-    screen.getByRole('group', { name: 'Workflow actions' }).focus()
-
-    expect(
-      screen.getByRole('button', { name: /workflow actions/ })
-    ).toHaveFocus()
-  })
-
-  it('focuses the newly mounted toggle after a segment-initiated switch', async () => {
-    const { user, unmount } = renderDropdown()
-    await user.click(screen.getByRole('button', { name: 'Enter app mode' }))
-
-    // The mode flip unmounts this instance and mounts a fresh one in the
-    // other mode's host.
-    unmount()
-    viewState.viewMode = 'app'
-    viewState.displayViewMode = 'app'
-    renderDropdown()
-    await nextTick()
-
-    expect(
-      screen.getByRole('button', { name: /workflow actions/ })
-    ).toHaveFocus()
-  })
-})

src/components/common/WorkflowActionsDropdown.vue

@@ -1,19 +1,11 @@
-<script lang="ts">
-// A segment switch unmounts the focused toggle instance and mounts a fresh
-// one in the other mode's host, so the focus handoff is tracked at module
-// scope where both instances can reach it.
-let restoreFocusOnMount = false
-</script>
-
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
 import {
   DropdownMenuContent,
   DropdownMenuPortal,
   DropdownMenuRoot,
   DropdownMenuTrigger
 } from 'reka-ui'
-import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
@@ -22,21 +14,8 @@ import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useTelemetry } from '@/platform/telemetry'
-import { useAppModeStore } from '@/stores/appModeStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
-import type { ViewMode } from '@/utils/appMode'
-
-interface ViewModeSegment {
-  mode: ViewMode
-  icon: string
-  label: string
-  switchLabel: string
-  switchTooltip: string
-  /** Drives behavior and aria; flips as soon as the mode changes. */
-  active: boolean
-  /** Frame-lagged mirror of {@link active} that drives the morph order. */
-  displayActive: boolean
-}
 
 const { source, align = 'start' } = defineProps<{
   source: string
@@ -44,111 +23,46 @@ const { source, align = 'start' } = defineProps<{
 }>()
 
 const { t } = useI18n()
+const canvasStore = useCanvasStore()
 const keybindingStore = useKeybindingStore()
 const dropdownOpen = ref(false)
-const appModeStore = useAppModeStore()
 
 const { menuItems } = useWorkflowActionsMenu(
   () => useCommandStore().execute('Comfy.RenameWorkflow'),
   { isRoot: true }
 )
+
 const { hasUnseenItems, markAsSeen } = useNewMenuItemIndicator(
   () => menuItems.value
 )
 
-const toggleShortcut = computed(() => {
+function handleOpen(open: boolean) {
+  if (open) {
+    markAsSeen()
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: source,
+      element_group: 'workflow_actions'
+    })
+  }
+}
+
+function toggleModeTooltip() {
+  const label = canvasStore.linearMode
+    ? t('breadcrumbsMenu.enterNodeGraph')
+    : t('breadcrumbsMenu.enterAppMode')
   const shortcut = keybindingStore
     .getKeybindingByCommandId('Comfy.ToggleLinear')
     ?.combo.toString()
-  return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
-})
-
-const segments = computed<ViewModeSegment[]>(() =>
-  (
-    [
-      {
-        mode: 'graph',
-        icon: 'icon-[comfy--workflow]',
-        label: t('breadcrumbsMenu.graph'),
-        switchLabel: t('breadcrumbsMenu.enterNodeGraph'),
-        switchTooltip:
-          t('breadcrumbsMenu.enterNodeGraph') + toggleShortcut.value
-      },
-      {
-        mode: 'app',
-        icon: 'icon-[lucide--panels-top-left]',
-        label: t('breadcrumbsMenu.app'),
-        switchLabel: t('breadcrumbsMenu.enterAppMode'),
-        switchTooltip: t('breadcrumbsMenu.enterAppMode') + toggleShortcut.value
-      }
-    ] as const
-  ).map((seg) => ({
-    ...seg,
-    active: appModeStore.viewMode === seg.mode,
-    displayActive: appModeStore.displayViewMode === seg.mode
-  }))
-)
-
-// Display-inactive segment first (left), display-active last (right). The
-// reorder on mode switch is what TransitionGroup FLIP-animates.
-const orderedSegments = computed(() => {
-  const [graph, app] = segments.value
-  return graph.displayActive ? [app, graph] : [graph, app]
-})
-
-function onOpenChange(open: boolean) {
-  dropdownOpen.value = open
-  if (!open) return
-  markAsSeen()
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: source,
-    element_group: 'workflow_actions'
-  })
+  return label + (shortcut ? t('g.shortcutSuffix', { shortcut }) : '')
 }
 
-function switchMode() {
+function toggleLinearMode() {
   dropdownOpen.value = false
-  restoreFocusOnMount = true
   void useCommandStore().execute('Comfy.ToggleLinear', {
     metadata: { source }
   })
 }
 
-function onSegmentClick(seg: ViewModeSegment, event: MouseEvent) {
-  if (seg.active) return
-  event.stopPropagation()
-  switchMode()
-}
-
-/** Keys the reka trigger opens the menu on; other keys bubble on so app-level
- *  keybindings keep working while a segment has focus. */
-const MENU_TRIGGER_KEYS = new Set(['Enter', ' ', 'ArrowDown'])
-
-function onSegmentKeydown(seg: ViewModeSegment, event: KeyboardEvent) {
-  if (!seg.active && MENU_TRIGGER_KEYS.has(event.key)) event.stopPropagation()
-}
-
-const toggleRef = useTemplateRef<HTMLDivElement>('toggleRef')
-
-// The trigger div carries role="group" (permitting the aria-label, prohibited
-// on a plain div, that names the menu via reka's aria-labelledby) and
-// tabindex="-1" so reka's close-focus (e.g. Escape closing the menu) lands
-// there; its @focus forwards focus here, to the active segment. Also called
-// when this instance mounts to replace the one unmounted by a
-// segment-initiated mode switch.
-function focusActiveSegment() {
-  toggleRef.value
-    ?.querySelector<HTMLButtonElement>('button[aria-haspopup]')
-    ?.focus()
-}
-
-onMounted(async () => {
-  if (!restoreFocusOnMount) return
-  restoreFocusOnMount = false
-  await nextTick()
-  focusActiveSegment()
-})
-
 const tooltipPt = {
   root: {
     style: {
@@ -161,100 +75,80 @@ const tooltipPt = {
     style: { whiteSpace: 'nowrap' }
   },
   arrow: {
-    style: { left: '16px' }
+    class: '!left-[16px]'
   }
 }
 </script>
 
 <template>
   <DropdownMenuRoot
-    :open="dropdownOpen"
+    v-model:open="dropdownOpen"
     :modal="false"
-    @update:open="onOpenChange"
+    @update:open="handleOpen"
   >
-    <DropdownMenuTrigger as-child>
+    <slot name="button" :has-unseen-items="hasUnseenItems">
       <div
-        ref="toggleRef"
-        data-testid="view-mode-toggle"
-        role="group"
-        tabindex="-1"
-        :aria-label="t('breadcrumbsMenu.workflowActions')"
-        class="group pointer-events-auto relative inline-block shrink-0 rounded-lg bg-base-background p-1"
-        @focus="focusActiveSegment"
+        class="pointer-events-auto inline-flex items-center rounded-lg bg-secondary-background"
       >
-        <TransitionGroup
-          tag="div"
-          move-class="transition-[background-color,color,transform] duration-200"
-          class="flex items-center gap-1"
+        <Button
+          v-tooltip.bottom="{
+            value: toggleModeTooltip(),
+            showDelay: 300,
+            hideDelay: 300,
+            pt: tooltipPt
+          }"
+          :aria-label="
+            canvasStore.linearMode
+              ? t('breadcrumbsMenu.enterNodeGraph')
+              : t('breadcrumbsMenu.enterAppMode')
+          "
+          variant="base"
+          class="m-1"
+          @pointerdown.stop
+          @click="toggleLinearMode"
         >
-          <Button
-            v-for="seg in orderedSegments"
-            :key="seg.mode"
-            v-tooltip.bottom="{
-              value: seg.active
-                ? t('breadcrumbsMenu.workflowActions')
-                : seg.switchTooltip,
-              showDelay: 300,
-              hideDelay: 300,
-              pt: seg.active ? undefined : tooltipPt
-            }"
-            type="button"
-            variant="textonly"
-            size="unset"
-            :aria-label="
-              seg.active
-                ? t('breadcrumbsMenu.activeModeWorkflowActions', {
-                    mode: seg.label
-                  })
-                : seg.switchLabel
-            "
-            :aria-haspopup="seg.active ? 'menu' : undefined"
-            :aria-expanded="seg.active ? dropdownOpen : undefined"
+          <i
+            class="size-4"
             :class="
-              cn(
-                'relative flex h-8 items-center gap-0 rounded-md font-normal transition-[background-color,color,transform] duration-200',
-                seg.displayActive
-                  ? 'bg-secondary-background pr-2 pl-2.5 text-base-foreground group-data-[state=open]:bg-secondary-background-hover group-data-[state=open]:shadow-interface hover:bg-secondary-background'
-                  : 'w-8 justify-center bg-transparent text-muted-foreground hover:bg-secondary-background hover:text-base-foreground'
-              )
+              canvasStore.linearMode
+                ? 'icon-[lucide--panels-top-left]'
+                : 'icon-[comfy--workflow]'
             "
-            @click="onSegmentClick(seg, $event)"
-            @keydown="onSegmentKeydown(seg, $event)"
+          />
+        </Button>
+        <DropdownMenuTrigger as-child>
+          <Button
+            v-tooltip="{
+              value: t('breadcrumbsMenu.workflowActions'),
+              showDelay: 300,
+              hideDelay: 300
+            }"
+            variant="secondary"
+            size="unset"
+            :aria-label="t('breadcrumbsMenu.workflowActions')"
+            class="relative h-10 gap-1 rounded-lg pr-2 pl-2.5 text-center data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
           >
-            <i :class="cn('size-4 shrink-0', seg.icon)" aria-hidden="true" />
+            <span>{{
+              canvasStore.linearMode
+                ? t('breadcrumbsMenu.app')
+                : t('breadcrumbsMenu.graph')
+            }}</span>
+            <i
+              class="icon-[lucide--chevron-down] size-4 text-muted-foreground"
+            />
             <span
-              :class="
-                cn(
-                  'grid transition-[grid-template-columns,opacity] duration-200',
-                  seg.displayActive
-                    ? 'ml-1.5 grid-cols-[1fr] opacity-100'
-                    : 'grid-cols-[0fr] opacity-0'
-                )
-              "
-            >
-              <span
-                class="flex min-w-0 items-center overflow-hidden text-sm leading-none whitespace-nowrap"
-              >
-                {{ seg.label }}
-                <i
-                  class="ml-1 icon-[lucide--chevron-down] size-4 shrink-0 text-muted-foreground"
-                  aria-hidden="true"
-                />
-              </span>
-            </span>
-            <span
-              v-if="seg.active && hasUnseenItems"
+              v-if="hasUnseenItems"
               aria-hidden="true"
               class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
             />
           </Button>
-        </TransitionGroup>
+        </DropdownMenuTrigger>
       </div>
-    </DropdownMenuTrigger>
+    </slot>
     <DropdownMenuPortal>
       <DropdownMenuContent
         :align
-        :side-offset="8"
+        :side-offset="5"
         :collision-padding="10"
         class="z-1000 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
       >

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -97,7 +97,7 @@
         <!-- Sort Options -->
         <div>
           <SingleSelect
-            v-model="sortSelection"
+            v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
             :options="sortOptions"
             :content-style="selectContentStyle"
@@ -556,8 +556,7 @@ const {
   selectedModels,
   selectedUseCases,
   selectedRunsOn,
-  sortSelection,
-  hasActiveQuery,
+  sortBy,
   activeModels,
   activeUseCases,
   filteredTemplates,
@@ -566,13 +565,14 @@ const {
   availableRunsOn,
   filteredCount,
   totalCount,
-  resetFilters
+  resetFilters,
+  loadFuseOptions
 } = useTemplateFiltering(navigationFilteredTemplates)
 
 /**
  * Raw search input bound to the search box. The actual `searchQuery` consumed
  * by the filtering composable is only updated via `applySearchQuery` after the
- * debounce settles, keeping search/grid re-renders off the keystroke critical path.
+ * debounce settles, keeping Fuse/grid re-renders off the keystroke critical path.
  */
 const searchInput = ref(searchQuery.value)
 
@@ -595,13 +595,15 @@ watch(searchQuery, (value) => {
  */
 const coordinateNavAndSort = (source: 'nav' | 'sort') => {
   const isPopularNav = selectedNavItem.value === 'popular'
-  const isPopularSort = sortSelection.value === 'popular'
+  const isPopularSort = sortBy.value === 'popular'
 
   if (source === 'nav') {
     if (isPopularNav && !isPopularSort) {
-      sortSelection.value = 'popular'
+      // When navigating to 'Popular' category, automatically set sort to 'Popular'.
+      sortBy.value = 'popular'
     } else if (!isPopularNav && isPopularSort) {
-      sortSelection.value = 'default'
+      // When navigating away from 'Popular' category while sort is 'Popular', reset sort to default.
+      sortBy.value = 'default'
     }
   } else if (source === 'sort') {
     // When sort is changed away from 'Popular' while in the 'Popular' category,
@@ -614,7 +616,7 @@ const coordinateNavAndSort = (source: 'nav' | 'sort') => {
 
 // Watch for changes from the two sources ('nav' and 'sort') and trigger the coordinator.
 watch(selectedNavItem, () => coordinateNavAndSort('nav'))
-watch(sortSelection, () => coordinateNavAndSort('sort'))
+watch(sortBy, () => coordinateNavAndSort('sort'))
 
 // Convert between string array and object array for MultiSelect component
 // Only show selected items that exist in the current scope
@@ -724,15 +726,8 @@ const runsOnFilterLabel = computed(() => {
   }
 })
 
+// Sort options
 const sortOptions = computed(() => [
-  ...(hasActiveQuery.value
-    ? [
-        {
-          name: t('templateWorkflows.sort.relevance', 'Relevance'),
-          value: 'relevance'
-        }
-      ]
-    : []),
   {
     name: t('templateWorkflows.sort.default', 'Default'),
     value: 'default'
@@ -794,7 +789,7 @@ watch(
   [
     filteredTemplates,
     selectedNavItem,
-    sortSelection,
+    sortBy,
     selectedModels,
     selectedUseCases,
     selectedRunsOn
@@ -844,7 +839,8 @@ const { isLoading } = useAsyncState(
   async () => {
     await Promise.all([
       loadTemplates(),
-      workflowTemplatesStore.loadWorkflowTemplates()
+      workflowTemplatesStore.loadWorkflowTemplates(),
+      loadFuseOptions()
     ])
     return true
   },

src/components/dialog/GlobalDialog.test.ts

@@ -398,43 +398,6 @@ describe('shouldPreventRekaDismiss', () => {
     overlay.remove()
   })
 
-  it.for(['menu', 'dialog', 'listbox'])(
-    'prevents dismiss when clicking an aria-haspopup="%s" trigger',
-    (popupType) => {
-      // Clicking an open popup's trigger to close it must not tear down the
-      // surrounding dialog: while the popup layer is open, the parent
-      // DismissableLayer classifies the trigger click as outside.
-      const trigger = document.createElement('button')
-      trigger.setAttribute('aria-haspopup', popupType)
-      const icon = document.createElement('i')
-      trigger.appendChild(icon)
-      document.body.appendChild(trigger)
-
-      const event = makeEvent(icon)
-      onRekaPointerDownOutside({ dismissableMask: undefined }, event)
-
-      expect(event.defaultPrevented).toBe(true)
-      trigger.remove()
-    }
-  )
-
-  it.for(['true', 'grid', 'tree'])(
-    'allows dismiss for unsupported aria-haspopup="%s" values',
-    (popupType) => {
-      // Only the values Reka trigger primitives emit are allowlisted; other
-      // ARIA values stay ordinary outside elements.
-      const trigger = document.createElement('button')
-      trigger.setAttribute('aria-haspopup', popupType)
-      document.body.appendChild(trigger)
-
-      const event = makeEvent(trigger)
-      onRekaPointerDownOutside({ dismissableMask: undefined }, event)
-
-      expect(event.defaultPrevented).toBe(false)
-      trigger.remove()
-    }
-  )
-
   it('allows dismiss when target is outside any PrimeVue overlay', () => {
     const event = makeEvent(document.body)
     onRekaPointerDownOutside({ dismissableMask: undefined }, event)
@@ -503,19 +466,4 @@ describe('shouldPreventRekaDismiss', () => {
     expect(event.defaultPrevented).toBe(true)
     portal.remove()
   })
-
-  it('focus-outside on an aria-haspopup trigger still dismisses (triggers are pointer-only)', () => {
-    // Tab focus is not blocked by the non-modal scrim, so keyboard focus
-    // landing on an app-chrome popup trigger must dismiss like any other
-    // outside element.
-    const trigger = document.createElement('button')
-    trigger.setAttribute('aria-haspopup', 'menu')
-    document.body.appendChild(trigger)
-
-    const event = makeEvent(trigger)
-    onRekaFocusOutside(event)
-
-    expect(event.defaultPrevented).toBe(false)
-    trigger.remove()
-  })
 })

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -86,7 +86,7 @@
           @max-reached="showCeilingWarning = true"
         >
           <template #prefix>
-            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
+            <i class="icon-[lucide--coins] size-4 shrink-0 text-gold-500" />
           </template>
         </FormattedNumberStepper>
       </div>
@@ -98,7 +98,7 @@
       v-if="isBelowMin"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
-      <i class="icon-[lucide--component] size-4" />
+      <i class="icon-[lucide--coins] size-4" />
       {{
         $t('credits.topUp.minRequired', {
           credits: formatNumber(usdToCredits(MIN_AMOUNT))
@@ -109,7 +109,7 @@
       v-if="showCeilingWarning"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
-      <i class="icon-[lucide--component] size-4" />
+      <i class="icon-[lucide--coins] size-4" />
       {{
         $t('credits.topUp.maxAllowed', {
           credits: formatNumber(usdToCredits(MAX_AMOUNT))

src/components/dialog/rekaPrimeVueBridge.ts

@@ -12,19 +12,10 @@ const PRIMEVUE_OVERLAY_SELECTORS =
 // dismiss itself. These selectors cover the portaled roots so we can treat
 // interactions on them as inside.
 const REKA_PORTAL_SELECTORS =
-  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]'
+  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"], [aria-haspopup="menu"], [aria-haspopup="dialog"], [aria-haspopup="listbox"]'
 
 const OUTSIDE_LAYER_SELECTORS = `${PRIMEVUE_OVERLAY_SELECTORS}, ${REKA_PORTAL_SELECTORS}`
 
-// While a popup is open, the parent layer also classifies a pointer-down on
-// the popup's own trigger (closing it) as outside, so triggers are allowlisted
-// for the pointer path only. The focus path must not match them: the non-modal
-// scrim intercepts background clicks but not Tab focus, so a focus-outside
-// match would keep the dialog open whenever keyboard focus merely lands on an
-// app-chrome popup trigger.
-const POPUP_TRIGGER_SELECTORS =
-  '[aria-haspopup="menu"], [aria-haspopup="dialog"], [aria-haspopup="listbox"]'
-
 type OutsideEvent = CustomEvent<{ originalEvent: Event }>
 
 function isInsideOverlay(target: EventTarget | null): boolean {
@@ -34,13 +25,6 @@ function isInsideOverlay(target: EventTarget | null): boolean {
   )
 }
 
-function isPopupTrigger(target: EventTarget | null): boolean {
-  return (
-    target instanceof Element &&
-    target.closest(POPUP_TRIGGER_SELECTORS) !== null
-  )
-}
-
 export function onRekaPointerDownOutside(
   options: { dismissableMask?: boolean },
   event: OutsideEvent,
@@ -56,8 +40,7 @@ export function onRekaPointerDownOutside(
     event.preventDefault()
     return
   }
-  const target = event.detail.originalEvent.target
-  if (isInsideOverlay(target) || isPopupTrigger(target)) {
+  if (isInsideOverlay(event.detail.originalEvent.target)) {
     event.preventDefault()
     return
   }

src/components/graph/GraphCanvas.vue

@@ -18,8 +18,8 @@
         </div>
       </div>
     </template>
-    <template #side-toolbar>
-      <SideToolbar v-if="showUI && !isBuilderMode && !linearMode" />
+    <template v-if="showUI && !isBuilderMode" #side-toolbar>
+      <SideToolbar />
     </template>
     <template v-if="showUI" #side-bar-panel>
       <div

src/components/load3d/Load3D.test.ts

@@ -128,9 +128,9 @@ function renderLoad3D(options: RenderOptions = {}) {
             name: 'AnimationControls',
             template: '<div data-testid="animation-controls" />'
           },
-          RecordMenuControl: {
-            name: 'RecordMenuControl',
-            template: '<div data-testid="record-menu-control" />'
+          RecordingControls: {
+            name: 'RecordingControls',
+            template: '<div data-testid="recording-controls" />'
           },
           ViewerControls: {
             name: 'ViewerControls',
@@ -232,16 +232,14 @@ describe('Load3D', () => {
   })
 
   describe('recording controls', () => {
-    it('renders the record control in regular (non-preview) mode', () => {
+    it('renders RecordingControls in regular (non-preview) mode', () => {
       renderLoad3D({ stateOverrides: { isPreview: ref(false) } })
-      expect(screen.getByTestId('record-menu-control')).toBeInTheDocument()
+      expect(screen.getByTestId('recording-controls')).toBeInTheDocument()
     })
 
-    it('hides the record control in preview mode', () => {
+    it('hides RecordingControls in preview mode', () => {
       renderLoad3D({ stateOverrides: { isPreview: ref(true) } })
-      expect(
-        screen.queryByTestId('record-menu-control')
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('recording-controls')).not.toBeInTheDocument()
     })
   })
 

src/components/load3d/Load3D.vue

@@ -15,39 +15,25 @@
       :is-preview="isPreview"
     />
     <div class="pointer-events-none absolute top-0 left-0 size-full">
-      <Load3DMenuBar
+      <Load3DControls
         v-model:scene-config="sceneConfig"
         v-model:model-config="modelConfig"
         v-model:camera-config="cameraConfig"
         v-model:light-config="lightConfig"
-        v-model:is-recording="isRecording"
-        v-model:has-recording="hasRecording"
-        v-model:recording-duration="recordingDuration"
         :can-use-gizmo="canUseGizmo"
         :can-use-lighting="canUseLighting"
         :can-export="canExport"
         :can-use-hdri="canUseHdri"
         :can-use-background-image="canUseBackgroundImage"
-        :can-fit-to-viewer="canFitToViewer"
-        :can-center-camera-on-model="canCenterCameraOnModel"
-        :node="node as LGraphNode"
-        :enable-viewer="enable3DViewer"
-        :can-use-recording="canUseRecording && !isPreview"
         :material-modes="materialModes"
         :has-skeleton="hasSkeleton"
         :source-format="sourceFormat"
         @update-background-image="handleBackgroundImageUpdate"
-        @update-hdri-file="handleHDRIFileUpdate"
         @export-model="handleExportModel"
-        @fit-to-viewer="handleFitToViewer"
-        @center-camera="handleCenterCameraOnModel"
+        @update-hdri-file="handleHDRIFileUpdate"
         @toggle-gizmo="handleToggleGizmo"
         @set-gizmo-mode="handleSetGizmoMode"
         @reset-gizmo-transform="handleResetGizmoTransform"
-        @start-recording="handleStartRecording"
-        @stop-recording="handleStopRecording"
-        @export-recording="handleExportRecording"
-        @clear-recording="handleClearRecording"
       />
       <AnimationControls
         v-if="animations && animations.length > 0"
@@ -60,6 +46,59 @@
         @seek="handleSeek"
       />
     </div>
+    <div
+      class="pointer-events-auto absolute top-12 right-2 z-20 flex flex-col gap-2"
+    >
+      <div
+        v-if="canFitToViewer || canCenterCameraOnModel"
+        class="flex flex-col rounded-lg bg-backdrop/30"
+      >
+        <Button
+          v-if="canFitToViewer"
+          v-tooltip.left="{
+            value: $t('load3d.fitToViewer'),
+            showDelay: 300
+          }"
+          size="icon"
+          variant="textonly"
+          class="rounded-full"
+          :aria-label="$t('load3d.fitToViewer')"
+          @click="handleFitToViewer"
+        >
+          <i class="pi pi-window-maximize text-lg text-base-foreground" />
+        </Button>
+        <Button
+          v-if="canCenterCameraOnModel"
+          v-tooltip.left="{
+            value: $t('load3d.centerCameraOnModel'),
+            showDelay: 300
+          }"
+          size="icon"
+          variant="textonly"
+          class="rounded-full"
+          :aria-label="$t('load3d.centerCameraOnModel')"
+          @click="handleCenterCameraOnModel"
+        >
+          <i class="pi pi-compass text-lg text-base-foreground" />
+        </Button>
+      </div>
+
+      <ViewerControls
+        v-if="enable3DViewer && node"
+        :node="node as LGraphNode"
+      />
+
+      <RecordingControls
+        v-if="canUseRecording && !isPreview"
+        v-model:is-recording="isRecording"
+        v-model:has-recording="hasRecording"
+        v-model:recording-duration="recordingDuration"
+        @start-recording="handleStartRecording"
+        @stop-recording="handleStopRecording"
+        @export-recording="handleExportRecording"
+        @clear-recording="handleClearRecording"
+      />
+    </div>
   </div>
 </template>
 
@@ -67,9 +106,12 @@
 import { computed, onMounted, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import Load3DMenuBar from '@/components/load3d/Load3DMenuBar.vue'
+import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
+import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
+import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useLoad3d } from '@/composables/useLoad3d'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -150,11 +192,11 @@ const {
   handleHDRIFileUpdate,
   handleExportModel,
   handleModelDrop,
-  handleFitToViewer,
-  handleCenterCameraOnModel,
   handleToggleGizmo,
   handleSetGizmoMode,
   handleResetGizmoTransform,
+  handleFitToViewer,
+  handleCenterCameraOnModel,
   cleanup
 } = useLoad3d(node as Ref<LGraphNode | null>)
 

src/components/load3d/Load3DMenuBar.test.ts

@@ -1,242 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import { createI18n } from 'vue-i18n'
-
-import Load3DMenuBar from '@/components/load3d/Load3DMenuBar.vue'
-import type {
-  CameraConfig,
-  LightConfig,
-  ModelConfig,
-  SceneConfig
-} from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function makeSceneConfig(): SceneConfig {
-  return {
-    showGrid: true,
-    backgroundColor: '#000000',
-    backgroundImage: '',
-    backgroundRenderMode: 'tiled'
-  }
-}
-
-function makeModelConfig(): ModelConfig {
-  return {
-    upDirection: 'original',
-    materialMode: 'original',
-    showSkeleton: false,
-    gizmo: {
-      enabled: false,
-      mode: 'translate',
-      position: { x: 0, y: 0, z: 0 },
-      rotation: { x: 0, y: 0, z: 0 },
-      scale: { x: 1, y: 1, z: 1 }
-    }
-  }
-}
-
-function makeCameraConfig(): CameraConfig {
-  return { cameraType: 'perspective', fov: 75 }
-}
-
-function makeLightConfig(): LightConfig {
-  return {
-    intensity: 5,
-    hdri: {
-      enabled: false,
-      hdriPath: '',
-      showAsBackground: false,
-      intensity: 1
-    }
-  }
-}
-
-type RenderProps = Partial<ComponentProps<typeof Load3DMenuBar>>
-
-function renderMenuBar(overrides: RenderProps = {}) {
-  const result = render(Load3DMenuBar, {
-    props: {
-      sceneConfig: makeSceneConfig(),
-      modelConfig: makeModelConfig(),
-      cameraConfig: makeCameraConfig(),
-      lightConfig: makeLightConfig(),
-      ...overrides
-    },
-    global: {
-      plugins: [i18n],
-      directives: { tooltip: () => {} }
-    }
-  })
-  return { ...result, user: userEvent.setup() }
-}
-
-async function selectCategory(
-  user: ReturnType<typeof userEvent.setup>,
-  label: string
-) {
-  await openCategoryMenu(user)
-  await user.click(screen.getByRole('button', { name: label }))
-}
-
-async function openCategoryMenu(user: ReturnType<typeof userEvent.setup>) {
-  await user.click(screen.getByRole('button', { name: /Scene/ }))
-}
-
-describe('Load3DMenuBar', () => {
-  it('shows scene controls by default', () => {
-    renderMenuBar()
-    expect(
-      screen.getByRole('button', { name: 'Show grid' })
-    ).toBeInTheDocument()
-  })
-
-  it('toggles showGrid on the bound config when the grid button is clicked', async () => {
-    const sceneConfig = makeSceneConfig()
-    const { user } = renderMenuBar({ sceneConfig })
-
-    await user.click(screen.getByRole('button', { name: 'Show grid' }))
-
-    expect(sceneConfig.showGrid).toBe(false)
-  })
-
-  it('emits fitToViewer when the fit button is clicked', async () => {
-    const onFitToViewer = vi.fn()
-    const { user } = renderMenuBar({ onFitToViewer })
-
-    await user.click(screen.getByRole('button', { name: 'Fit to Viewer' }))
-
-    expect(onFitToViewer).toHaveBeenCalledOnce()
-  })
-
-  it('emits centerCamera when the center button is clicked', async () => {
-    const onCenterCamera = vi.fn()
-    const { user } = renderMenuBar({ onCenterCamera })
-
-    await user.click(
-      screen.getByRole('button', { name: 'Center Camera on Model' })
-    )
-
-    expect(onCenterCamera).toHaveBeenCalledOnce()
-  })
-
-  it('hides the center button when canCenterCameraOnModel is false', () => {
-    renderMenuBar({ canCenterCameraOnModel: false })
-
-    expect(
-      screen.queryByRole('button', { name: 'Center Camera on Model' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('toggles the gizmo and reveals the mode controls inline', async () => {
-    const onToggleGizmo = vi.fn()
-    const onSetGizmoMode = vi.fn()
-    const { user } = renderMenuBar({ onToggleGizmo, onSetGizmoMode })
-
-    await selectCategory(user, 'Gizmo')
-    // The chip and the enable toggle share the 'Gizmo' name; click the toggle.
-    const gizmoButtons = screen.getAllByRole('button', { name: 'Gizmo' })
-    await user.click(gizmoButtons[gizmoButtons.length - 1])
-    expect(onToggleGizmo).toHaveBeenCalledWith(true)
-
-    await user.click(screen.getByRole('button', { name: 'Rotate' }))
-    expect(onSetGizmoMode).toHaveBeenCalledWith('rotate')
-  })
-
-  it('shows the hdri upload inline without an extra popover', async () => {
-    const { user } = renderMenuBar()
-
-    await selectCategory(user, 'HDRI')
-
-    expect(screen.getByRole('button', { name: 'Upload' })).toBeInTheDocument()
-  })
-
-  it('forwards removeHdri as updateHdriFile(null) when a file is loaded', async () => {
-    const onUpdateHdriFile = vi.fn()
-    const lightConfig = makeLightConfig()
-    lightConfig.hdri = {
-      enabled: true,
-      hdriPath: 'env.hdr',
-      showAsBackground: false,
-      intensity: 1
-    }
-    const { user } = renderMenuBar({ lightConfig, onUpdateHdriFile })
-
-    await selectCategory(user, 'HDRI')
-    await user.click(screen.getByRole('button', { name: 'Remove' }))
-
-    expect(onUpdateHdriFile).toHaveBeenCalledWith(null)
-  })
-
-  it('emits startRecording when the record button is clicked', async () => {
-    const onStartRecording = vi.fn()
-    const { user } = renderMenuBar({ onStartRecording })
-
-    await user.click(screen.getByRole('button', { name: 'Record' }))
-
-    expect(onStartRecording).toHaveBeenCalledOnce()
-  })
-
-  it('forwards exportRecording from the recording menu once a recording exists', async () => {
-    const onExportRecording = vi.fn()
-    const { user } = renderMenuBar({
-      hasRecording: true,
-      isRecording: false,
-      onExportRecording
-    })
-
-    await user.click(
-      screen.getByRole('button', { name: 'Video recording of the scene [mp4]' })
-    )
-    await user.click(screen.getByRole('button', { name: 'Download Recording' }))
-
-    expect(onExportRecording).toHaveBeenCalledOnce()
-  })
-
-  it('omits the gizmo category when canUseGizmo is false', async () => {
-    const { user } = renderMenuBar({ canUseGizmo: false })
-    await openCategoryMenu(user)
-
-    expect(
-      screen.queryByRole('button', { name: 'Gizmo' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('switches to the camera category and shows its controls', async () => {
-    const { user } = renderMenuBar()
-    await openCategoryMenu(user)
-
-    await user.click(screen.getByRole('button', { name: 'Camera' }))
-
-    expect(
-      screen.getByRole('button', { name: 'Perspective' })
-    ).toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Show grid' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('omits the light category when canUseLighting is false', async () => {
-    const { user } = renderMenuBar({ canUseLighting: false })
-    await openCategoryMenu(user)
-
-    expect(
-      screen.queryByRole('button', { name: 'Light' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('hides scene controls when sceneConfig is undefined', () => {
-    renderMenuBar({ sceneConfig: undefined })
-
-    expect(
-      screen.queryByRole('button', { name: 'Show grid' })
-    ).not.toBeInTheDocument()
-  })
-})

src/components/load3d/Load3DMenuBar.vue

@@ -1,337 +0,0 @@
-<template>
-  <div class="pointer-events-none absolute inset-0 flex flex-col">
-    <div
-      ref="topBarRef"
-      class="pointer-events-auto flex h-10 items-center gap-1 bg-interface-menu-surface px-2"
-      @wheel.stop
-    >
-      <Popover v-model:open="catMenuOpen">
-        <PopoverTrigger as-child>
-          <button
-            :class="chipClass"
-            type="button"
-            data-testid="load3d-category-menu"
-          >
-            {{ activeLabel }}
-            <i class="icon-[lucide--chevron-down] size-4 opacity-70" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="bottom"
-          align="start"
-          :side-offset="8"
-          :class="panelClass"
-        >
-          <button
-            v-for="c in categoryDefs"
-            :key="c.key"
-            type="button"
-            :class="
-              cn(
-                rowClass,
-                activeCategory === c.key && 'bg-button-active-surface'
-              )
-            "
-            @click="selectCategory(c.key)"
-          >
-            {{ c.label }}
-          </button>
-        </PopoverContent>
-      </Popover>
-
-      <div class="mx-1 h-5 w-px shrink-0 bg-interface-menu-stroke" />
-
-      <SceneMenuGroup
-        v-if="activeCategory === 'scene' && sceneConfig"
-        v-model:config="sceneConfig"
-        v-model:fov="cameraFov"
-        :compact
-        :can-use-background-image="canUseBackgroundImage"
-        :hdri-active="hdriActive"
-        @update-background-image="emit('updateBackgroundImage', $event)"
-      />
-      <ModelMenuGroup
-        v-else-if="activeCategory === 'model' && modelConfig"
-        v-model:config="modelConfig"
-        :compact
-        :material-modes="materialModes"
-        :has-skeleton="hasSkeleton"
-      />
-      <CameraMenuGroup
-        v-else-if="activeCategory === 'camera' && cameraConfig"
-        v-model:config="cameraConfig"
-        :compact
-      />
-      <LightMenuGroup
-        v-else-if="activeCategory === 'light' && lightConfig && modelConfig"
-        v-model:config="lightConfig"
-        :compact
-        :is-original-material="isOriginalMaterial"
-      />
-      <HdriMenuGroup
-        v-else-if="activeCategory === 'hdri' && lightConfig"
-        v-model:config="lightConfig"
-        :compact
-        :scene-has-image="sceneHasImage"
-        @update-hdri-file="emit('updateHdriFile', $event)"
-      />
-      <GizmoMenuGroup
-        v-else-if="activeCategory === 'gizmo' && modelConfig"
-        v-model:config="modelConfig"
-        :compact
-        @toggle-gizmo="emit('toggleGizmo', $event)"
-        @set-gizmo-mode="emit('setGizmoMode', $event)"
-        @reset-gizmo-transform="emit('resetGizmoTransform')"
-      />
-    </div>
-
-    <div
-      :class="
-        cn('flex-1', isRecording && 'border-2 border-node-component-executing')
-      "
-    />
-
-    <div
-      class="pointer-events-auto flex h-10 items-center justify-between gap-1 bg-interface-menu-surface px-2"
-      @wheel.stop
-    >
-      <div class="flex items-center gap-1">
-        <RecordMenuControl
-          v-if="canUseRecording"
-          v-model:is-recording="isRecording"
-          v-model:has-recording="hasRecording"
-          v-model:recording-duration="recordingDuration"
-          :compact
-          @start-recording="emit('startRecording')"
-          @stop-recording="emit('stopRecording')"
-          @export-recording="emit('exportRecording')"
-          @clear-recording="emit('clearRecording')"
-        />
-      </div>
-      <div class="flex items-center gap-1">
-        <ViewerControls
-          v-if="enableViewer && node"
-          :node="node as LGraphNode"
-        />
-        <button
-          v-if="canFitToViewer"
-          v-tooltip.top="tip(t('load3d.fitToViewer'))"
-          :class="iconBtnClass"
-          type="button"
-          :aria-label="t('load3d.fitToViewer')"
-          @click="emit('fitToViewer')"
-        >
-          <i class="icon-[lucide--scan] size-4" />
-        </button>
-        <button
-          v-if="canCenterCameraOnModel"
-          v-tooltip.top="tip(t('load3d.centerCameraOnModel'))"
-          :class="iconBtnClass"
-          type="button"
-          :aria-label="t('load3d.centerCameraOnModel')"
-          @click="emit('centerCamera')"
-        >
-          <i class="icon-[lucide--crosshair] size-4" />
-        </button>
-        <Popover v-if="canExport" v-model:open="exportOpen">
-          <PopoverTrigger as-child>
-            <button
-              v-tooltip.top="tip(t('load3d.export'))"
-              :class="iconBtnClass"
-              type="button"
-              :aria-label="t('load3d.export')"
-            >
-              <i class="icon-[lucide--download] size-4" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            side="top"
-            align="end"
-            :side-offset="8"
-            :class="panelClass"
-          >
-            <button
-              v-for="format in exportFormats"
-              :key="format.value"
-              type="button"
-              :class="rowClass"
-              @click="onExport(format.value)"
-            >
-              {{ format.label }}
-            </button>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import { PopoverTrigger } from 'reka-ui'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import CameraMenuGroup from '@/components/load3d/menubar/CameraMenuGroup.vue'
-import GizmoMenuGroup from '@/components/load3d/menubar/GizmoMenuGroup.vue'
-import HdriMenuGroup from '@/components/load3d/menubar/HdriMenuGroup.vue'
-import LightMenuGroup from '@/components/load3d/menubar/LightMenuGroup.vue'
-import {
-  chipClass,
-  iconBtnClass,
-  panelClass,
-  rowClass,
-  tip
-} from '@/components/load3d/menubar/menuBarStyles'
-import ModelMenuGroup from '@/components/load3d/menubar/ModelMenuGroup.vue'
-import RecordMenuControl from '@/components/load3d/menubar/RecordMenuControl.vue'
-import SceneMenuGroup from '@/components/load3d/menubar/SceneMenuGroup.vue'
-import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import { getExportFormatOptions } from '@/extensions/core/load3d/constants'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type {
-  CameraConfig,
-  GizmoMode,
-  LightConfig,
-  MaterialMode,
-  ModelConfig,
-  SceneConfig
-} from '@/extensions/core/load3d/interfaces'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const {
-  canUseLighting = true,
-  canUseHdri = true,
-  canUseGizmo = true,
-  canExport = true,
-  canUseBackgroundImage = true,
-  canFitToViewer = true,
-  canCenterCameraOnModel = true,
-  canUseRecording = true,
-  enableViewer = false,
-  node = null,
-  materialModes = ['original', 'clay', 'normal', 'wireframe'],
-  hasSkeleton = false,
-  sourceFormat = null
-} = defineProps<{
-  canUseLighting?: boolean
-  canUseHdri?: boolean
-  canUseGizmo?: boolean
-  canExport?: boolean
-  canUseBackgroundImage?: boolean
-  canFitToViewer?: boolean
-  canCenterCameraOnModel?: boolean
-  canUseRecording?: boolean
-  enableViewer?: boolean
-  node?: LGraphNode | null
-  materialModes?: readonly MaterialMode[]
-  hasSkeleton?: boolean
-  sourceFormat?: string | null
-}>()
-
-const sceneConfig = defineModel<SceneConfig>('sceneConfig')
-const modelConfig = defineModel<ModelConfig>('modelConfig')
-const cameraConfig = defineModel<CameraConfig>('cameraConfig')
-const lightConfig = defineModel<LightConfig>('lightConfig')
-const isRecording = defineModel<boolean>('isRecording')
-const hasRecording = defineModel<boolean>('hasRecording')
-const recordingDuration = defineModel<number>('recordingDuration')
-
-const emit = defineEmits<{
-  (e: 'updateBackgroundImage', file: File | null): void
-  (e: 'updateHdriFile', file: File | null): void
-  (e: 'exportModel', format: string): void
-  (e: 'fitToViewer'): void
-  (e: 'centerCamera'): void
-  (e: 'toggleGizmo', enabled: boolean): void
-  (e: 'setGizmoMode', mode: GizmoMode): void
-  (e: 'resetGizmoTransform'): void
-  (e: 'startRecording'): void
-  (e: 'stopRecording'): void
-  (e: 'exportRecording'): void
-  (e: 'clearRecording'): void
-}>()
-
-const { t } = useI18n()
-
-const categoryDefs = computed(() =>
-  [
-    { key: 'scene', label: t('load3d.scene'), show: !!sceneConfig.value },
-    {
-      key: 'model',
-      label: t('load3d.model3d'),
-      show: !!modelConfig.value
-    },
-    { key: 'camera', label: t('load3d.camera'), show: !!cameraConfig.value },
-    {
-      key: 'light',
-      label: t('load3d.light'),
-      show: canUseLighting && !!lightConfig.value && !!modelConfig.value
-    },
-    {
-      key: 'hdri',
-      label: t('load3d.hdri.label'),
-      show: canUseHdri && !!lightConfig.value
-    },
-    {
-      key: 'gizmo',
-      label: t('load3d.gizmo.label'),
-      show: canUseGizmo && !!modelConfig.value
-    }
-  ].filter((c) => c.show)
-)
-
-const activeCategory = ref('scene')
-const activeLabel = computed(
-  () =>
-    categoryDefs.value.find((c) => c.key === activeCategory.value)?.label ?? ''
-)
-watch(categoryDefs, (defs) => {
-  if (!defs.some((c) => c.key === activeCategory.value)) {
-    activeCategory.value = defs[0]?.key ?? 'scene'
-  }
-})
-
-const catMenuOpen = ref(false)
-const exportOpen = ref(false)
-
-const sceneHasImage = computed(
-  () =>
-    !!sceneConfig.value?.backgroundImage &&
-    sceneConfig.value.backgroundImage !== ''
-)
-const hdriActive = computed(
-  () =>
-    !!lightConfig.value?.hdri?.hdriPath && !!lightConfig.value?.hdri?.enabled
-)
-const isOriginalMaterial = computed(
-  () => modelConfig.value?.materialMode === 'original'
-)
-const cameraFov = computed({
-  get: () => cameraConfig.value?.fov ?? 0,
-  set: (value) => {
-    if (cameraConfig.value) cameraConfig.value.fov = value
-  }
-})
-
-const exportFormats = computed(() => getExportFormatOptions(sourceFormat))
-
-const topBarRef = ref<HTMLElement | null>(null)
-const { width: topW } = useElementSize(topBarRef)
-const compactWidthThreshold = 480
-const compact = computed(
-  () => topW.value > 0 && topW.value < compactWidthThreshold
-)
-
-function selectCategory(key: string) {
-  activeCategory.value = key
-  catMenuOpen.value = false
-}
-
-function onExport(format: string) {
-  emit('exportModel', format)
-  exportOpen.value = false
-}
-</script>

src/components/load3d/controls/RecordingControls.test.ts

@@ -0,0 +1,205 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      load3d: {
+        startRecording: 'Start recording',
+        stopRecording: 'Stop recording',
+        exportRecording: 'Export recording',
+        clearRecording: 'Clear recording'
+      }
+    }
+  }
+})
+
+type RenderOpts = {
+  hasRecording?: boolean
+  isRecording?: boolean
+  recordingDuration?: number
+  onStartRecording?: () => void
+  onStopRecording?: () => void
+  onExportRecording?: () => void
+  onClearRecording?: () => void
+}
+
+function renderComponent(opts: RenderOpts = {}) {
+  const hasRecording = ref<boolean>(opts.hasRecording ?? false)
+  const isRecording = ref<boolean>(opts.isRecording ?? false)
+  const recordingDuration = ref<number>(opts.recordingDuration ?? 0)
+
+  const utils = render(RecordingControls, {
+    props: {
+      hasRecording: hasRecording.value,
+      'onUpdate:hasRecording': (v: boolean | undefined) => {
+        if (v !== undefined) hasRecording.value = v
+      },
+      isRecording: isRecording.value,
+      'onUpdate:isRecording': (v: boolean | undefined) => {
+        if (v !== undefined) isRecording.value = v
+      },
+      recordingDuration: recordingDuration.value,
+      'onUpdate:recordingDuration': (v: number | undefined) => {
+        if (v !== undefined) recordingDuration.value = v
+      },
+      onStartRecording: opts.onStartRecording,
+      onStopRecording: opts.onStopRecording,
+      onExportRecording: opts.onExportRecording,
+      onClearRecording: opts.onClearRecording
+    },
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: () => {} }
+    }
+  })
+
+  return { ...utils, user: userEvent.setup() }
+}
+
+describe('RecordingControls', () => {
+  it('shows the start-recording button initially', () => {
+    renderComponent()
+
+    expect(
+      screen.getByRole('button', { name: 'Start recording' })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Stop recording' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('shows the stop-recording button while recording is in progress', () => {
+    renderComponent({ isRecording: true })
+
+    expect(
+      screen.getByRole('button', { name: 'Stop recording' })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Start recording' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('emits startRecording when the button is clicked from a stopped state', async () => {
+    const onStartRecording = vi.fn()
+    const onStopRecording = vi.fn()
+    const { user } = renderComponent({
+      isRecording: false,
+      onStartRecording,
+      onStopRecording
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Start recording' }))
+
+    expect(onStartRecording).toHaveBeenCalledOnce()
+    expect(onStopRecording).not.toHaveBeenCalled()
+  })
+
+  it('emits stopRecording when the button is clicked from a recording state', async () => {
+    const onStartRecording = vi.fn()
+    const onStopRecording = vi.fn()
+    const { user } = renderComponent({
+      isRecording: true,
+      onStartRecording,
+      onStopRecording
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Stop recording' }))
+
+    expect(onStopRecording).toHaveBeenCalledOnce()
+    expect(onStartRecording).not.toHaveBeenCalled()
+  })
+
+  it('hides the export and clear buttons when there is no recording', () => {
+    renderComponent({ hasRecording: false, isRecording: false })
+
+    expect(
+      screen.queryByRole('button', { name: 'Export recording' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Clear recording' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('shows the export and clear buttons once a recording exists', () => {
+    renderComponent({ hasRecording: true, isRecording: false })
+
+    expect(
+      screen.getByRole('button', { name: 'Export recording' })
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Clear recording' })
+    ).toBeInTheDocument()
+  })
+
+  it('hides the export and clear buttons during a new recording even if a previous one exists', () => {
+    renderComponent({ hasRecording: true, isRecording: true })
+
+    expect(
+      screen.queryByRole('button', { name: 'Export recording' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Clear recording' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('emits exportRecording and clearRecording from their respective buttons', async () => {
+    const onExportRecording = vi.fn()
+    const onClearRecording = vi.fn()
+    const { user } = renderComponent({
+      hasRecording: true,
+      isRecording: false,
+      onExportRecording,
+      onClearRecording
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Export recording' }))
+    await user.click(screen.getByRole('button', { name: 'Clear recording' }))
+
+    expect(onExportRecording).toHaveBeenCalledOnce()
+    expect(onClearRecording).toHaveBeenCalledOnce()
+  })
+
+  it('renders the formatted duration as MM:SS once a recording exists', () => {
+    renderComponent({
+      hasRecording: true,
+      isRecording: false,
+      recordingDuration: 75
+    })
+
+    expect(screen.getByTestId('load3d-recording-duration')).toHaveTextContent(
+      '01:15'
+    )
+  })
+
+  it('hides the duration display while a recording is in progress', () => {
+    renderComponent({
+      hasRecording: true,
+      isRecording: true,
+      recordingDuration: 30
+    })
+
+    expect(
+      screen.queryByTestId('load3d-recording-duration')
+    ).not.toBeInTheDocument()
+  })
+
+  it('hides the duration display when recordingDuration is zero', () => {
+    renderComponent({
+      hasRecording: true,
+      isRecording: false,
+      recordingDuration: 0
+    })
+
+    expect(
+      screen.queryByTestId('load3d-recording-duration')
+    ).not.toBeInTheDocument()
+  })
+})

src/components/load3d/controls/RecordingControls.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="relative rounded-lg bg-backdrop/30">
+    <div class="flex flex-col gap-2">
+      <Button
+        v-tooltip.right="{
+          value: isRecording
+            ? $t('load3d.stopRecording')
+            : $t('load3d.startRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        :class="
+          cn(
+            'rounded-full',
+            isRecording && 'recording-button-blink text-red-500'
+          )
+        "
+        :aria-label="
+          isRecording ? $t('load3d.stopRecording') : $t('load3d.startRecording')
+        "
+        @click="toggleRecording"
+      >
+        <i
+          :class="[
+            'pi',
+            isRecording ? 'pi-circle-fill' : 'pi-video',
+            'text-lg text-base-foreground'
+          ]"
+        />
+      </Button>
+
+      <Button
+        v-if="hasRecording && !isRecording"
+        v-tooltip.right="{
+          value: $t('load3d.exportRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportRecording')"
+        @click="handleExportRecording"
+      >
+        <i class="pi pi-download text-lg text-base-foreground" />
+      </Button>
+
+      <Button
+        v-if="hasRecording && !isRecording"
+        v-tooltip.right="{
+          value: $t('load3d.clearRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.clearRecording')"
+        @click="handleClearRecording"
+      >
+        <i class="pi pi-trash text-lg text-base-foreground" />
+      </Button>
+
+      <div
+        v-if="recordingDuration && recordingDuration > 0 && !isRecording"
+        class="mt-1 text-center text-xs text-base-foreground"
+        data-testid="load3d-recording-duration"
+      >
+        {{ formatDuration(recordingDuration) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const hasRecording = defineModel<boolean>('hasRecording')
+const isRecording = defineModel<boolean>('isRecording')
+const recordingDuration = defineModel<number>('recordingDuration')
+
+const emit = defineEmits<{
+  (e: 'startRecording'): void
+  (e: 'stopRecording'): void
+  (e: 'exportRecording'): void
+  (e: 'clearRecording'): void
+}>()
+
+function toggleRecording() {
+  if (isRecording.value) {
+    emit('stopRecording')
+  } else {
+    emit('startRecording')
+  }
+}
+
+function handleExportRecording() {
+  emit('exportRecording')
+}
+
+function handleClearRecording() {
+  emit('clearRecording')
+}
+
+function formatDuration(seconds: number): string {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
+}
+</script>
+
+<style scoped>
+.recording-button-blink {
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>

src/components/load3d/menubar/CameraMenuGroup.test.ts

@@ -1,47 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import CameraMenuGroup from '@/components/load3d/menubar/CameraMenuGroup.vue'
-import type { CameraConfig } from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function makeConfig(overrides: Partial<CameraConfig> = {}): CameraConfig {
-  return { cameraType: 'perspective', fov: 75, ...overrides }
-}
-
-function renderGroup(config = makeConfig()) {
-  const result = render(CameraMenuGroup, {
-    props: { config },
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-  return { ...result, user: userEvent.setup(), config }
-}
-
-describe('CameraMenuGroup', () => {
-  it('switches the projection type', async () => {
-    const { user, config } = renderGroup()
-
-    await user.click(screen.getByRole('button', { name: 'Perspective' }))
-
-    expect(config.cameraType).toBe('orthographic')
-  })
-
-  it('offers the FOV control only for a perspective camera', () => {
-    renderGroup(makeConfig({ cameraType: 'orthographic' }))
-
-    expect(
-      screen.queryByRole('button', { name: 'FOV' })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole('button', { name: 'Orthographic' })
-    ).toBeInTheDocument()
-  })
-})

src/components/load3d/menubar/CameraMenuGroup.vue

@@ -1,86 +0,0 @@
-<template>
-  <button
-    v-tooltip.bottom="tip(t('load3d.menuBar.switchProjection'))"
-    :class="actionClass(false)"
-    type="button"
-    :aria-label="compact ? t('load3d.menuBar.switchProjection') : undefined"
-    @click="switchCamera"
-  >
-    <i class="icon-[lucide--camera] size-4" />
-    <span v-if="!compact">{{ cameraTypeLabel }}</span>
-  </button>
-
-  <Popover v-if="isPerspective">
-    <PopoverTrigger as-child>
-      <button
-        v-tooltip.bottom="tip(t('load3d.menuBar.fov'))"
-        :class="actionClass(false)"
-        type="button"
-        :aria-label="compact ? t('load3d.menuBar.fov') : undefined"
-      >
-        <i class="icon-[lucide--focus] size-4" />
-        <span v-if="!compact">{{ t('load3d.menuBar.fov') }}</span>
-      </button>
-    </PopoverTrigger>
-    <PopoverContent
-      side="bottom"
-      align="start"
-      :side-offset="8"
-      :class="cn(panelClass, 'w-56')"
-    >
-      <div class="flex flex-col gap-2 p-1">
-        <span class="text-sm text-base-foreground">{{ t('load3d.fov') }}</span>
-        <Slider
-          :model-value="[fov]"
-          :min="10"
-          :max="150"
-          :step="1"
-          class="w-full"
-          @update:model-value="setFov"
-        />
-      </div>
-    </PopoverContent>
-  </Popover>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  actionClass,
-  panelClass,
-  tip
-} from '@/components/load3d/menubar/menuBarStyles'
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import Slider from '@/components/ui/slider/Slider.vue'
-import type { CameraConfig } from '@/extensions/core/load3d/interfaces'
-import { cn } from '@comfyorg/tailwind-utils'
-import { PopoverTrigger } from 'reka-ui'
-
-const { compact = false } = defineProps<{
-  compact?: boolean
-}>()
-
-const config = defineModel<CameraConfig>('config')
-
-const { t } = useI18n()
-
-const cameraType = computed(() => config.value?.cameraType)
-const isPerspective = computed(() => cameraType.value === 'perspective')
-const cameraTypeLabel = computed(() =>
-  cameraType.value ? t(`load3d.cameraType.${cameraType.value}`) : ''
-)
-const fov = computed(() => config.value?.fov ?? 0)
-
-function switchCamera() {
-  if (!config.value) return
-  config.value.cameraType =
-    config.value.cameraType === 'perspective' ? 'orthographic' : 'perspective'
-}
-
-function setFov(value?: number[]) {
-  if (config.value && value?.length) config.value.fov = value[0]
-}
-</script>

src/components/load3d/menubar/GizmoMenuGroup.test.ts

@@ -1,72 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import GizmoMenuGroup from '@/components/load3d/menubar/GizmoMenuGroup.vue'
-import type { ModelConfig } from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function makeConfig(enabled: boolean): ModelConfig {
-  return {
-    upDirection: 'original',
-    materialMode: 'original',
-    showSkeleton: false,
-    gizmo: {
-      enabled,
-      mode: 'translate',
-      position: { x: 0, y: 0, z: 0 },
-      rotation: { x: 0, y: 0, z: 0 },
-      scale: { x: 1, y: 1, z: 1 }
-    }
-  }
-}
-
-type Props = {
-  config: ModelConfig
-  onToggleGizmo?: (enabled: boolean) => void
-  onSetGizmoMode?: (mode: string) => void
-}
-
-function renderGroup(props: Props) {
-  const result = render(GizmoMenuGroup, {
-    props,
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-  return { ...result, user: userEvent.setup() }
-}
-
-describe('GizmoMenuGroup', () => {
-  it('enables the gizmo and reveals the mode controls', async () => {
-    const config = makeConfig(false)
-    const onToggleGizmo = vi.fn()
-    const { user } = renderGroup({ config, onToggleGizmo })
-
-    expect(
-      screen.queryByRole('button', { name: 'Rotate' })
-    ).not.toBeInTheDocument()
-
-    await user.click(screen.getByRole('button', { name: 'Gizmo' }))
-
-    expect(onToggleGizmo).toHaveBeenCalledWith(true)
-    expect(config.gizmo?.enabled).toBe(true)
-    expect(screen.getByRole('button', { name: 'Rotate' })).toBeInTheDocument()
-  })
-
-  it('sets the transform mode', async () => {
-    const config = makeConfig(true)
-    const onSetGizmoMode = vi.fn()
-    const { user } = renderGroup({ config, onSetGizmoMode })
-
-    await user.click(screen.getByRole('button', { name: 'Rotate' }))
-
-    expect(onSetGizmoMode).toHaveBeenCalledWith('rotate')
-    expect(config.gizmo?.mode).toBe('rotate')
-  })
-})

src/components/load3d/menubar/GizmoMenuGroup.vue

@@ -1,105 +0,0 @@
-<template>
-  <button
-    v-tooltip.bottom="tip(t('load3d.gizmo.toggle'))"
-    :class="actionClass(gizmoEnabled)"
-    :aria-pressed="gizmoEnabled"
-    type="button"
-    :aria-label="compact ? t('load3d.gizmo.toggle') : undefined"
-    @click="toggleGizmo"
-  >
-    <i class="icon-[lucide--axis-3d] size-4" />
-    <span v-if="!compact">{{ t('load3d.gizmo.toggle') }}</span>
-  </button>
-
-  <template v-if="gizmoEnabled">
-    <button
-      v-tooltip.bottom="tip(t('load3d.gizmo.translate'))"
-      :class="actionClass(gizmoMode === 'translate')"
-      :aria-pressed="gizmoMode === 'translate'"
-      type="button"
-      :aria-label="compact ? t('load3d.gizmo.translate') : undefined"
-      @click="setGizmoMode('translate')"
-    >
-      <i class="icon-[lucide--move] size-4" />
-      <span v-if="!compact">{{ t('load3d.gizmo.translate') }}</span>
-    </button>
-    <button
-      v-tooltip.bottom="tip(t('load3d.gizmo.rotate'))"
-      :class="actionClass(gizmoMode === 'rotate')"
-      :aria-pressed="gizmoMode === 'rotate'"
-      type="button"
-      :aria-label="compact ? t('load3d.gizmo.rotate') : undefined"
-      @click="setGizmoMode('rotate')"
-    >
-      <i class="icon-[lucide--rotate-3d] size-4" />
-      <span v-if="!compact">{{ t('load3d.gizmo.rotate') }}</span>
-    </button>
-    <button
-      v-tooltip.bottom="tip(t('load3d.gizmo.scale'))"
-      :class="actionClass(gizmoMode === 'scale')"
-      :aria-pressed="gizmoMode === 'scale'"
-      type="button"
-      :aria-label="compact ? t('load3d.gizmo.scale') : undefined"
-      @click="setGizmoMode('scale')"
-    >
-      <i class="icon-[lucide--scale-3d] size-4" />
-      <span v-if="!compact">{{ t('load3d.gizmo.scale') }}</span>
-    </button>
-    <button
-      v-tooltip.bottom="tip(t('load3d.gizmo.reset'))"
-      :class="actionClass(false)"
-      type="button"
-      :aria-label="compact ? t('load3d.gizmo.reset') : undefined"
-      @click="resetGizmoTransform"
-    >
-      <i class="icon-[lucide--rotate-ccw] size-4" />
-      <span v-if="!compact">{{ t('load3d.gizmo.reset') }}</span>
-    </button>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { actionClass, tip } from '@/components/load3d/menubar/menuBarStyles'
-import type {
-  GizmoMode,
-  ModelConfig
-} from '@/extensions/core/load3d/interfaces'
-
-const { compact = false } = defineProps<{
-  compact?: boolean
-}>()
-
-const config = defineModel<ModelConfig>('config')
-
-const emit = defineEmits<{
-  (e: 'toggleGizmo', enabled: boolean): void
-  (e: 'setGizmoMode', mode: GizmoMode): void
-  (e: 'resetGizmoTransform'): void
-}>()
-
-const { t } = useI18n()
-
-const gizmoEnabled = computed(() => config.value?.gizmo?.enabled ?? false)
-const gizmoMode = computed(() => config.value?.gizmo?.mode ?? 'translate')
-
-function toggleGizmo() {
-  const gizmo = config.value?.gizmo
-  if (!gizmo) return
-  gizmo.enabled = !gizmo.enabled
-  emit('toggleGizmo', gizmo.enabled)
-}
-
-function setGizmoMode(mode: GizmoMode) {
-  const gizmo = config.value?.gizmo
-  if (!gizmo) return
-  gizmo.mode = mode
-  emit('setGizmoMode', mode)
-}
-
-function resetGizmoTransform() {
-  emit('resetGizmoTransform')
-}
-</script>

src/components/load3d/menubar/HdriMenuGroup.test.ts

@@ -1,74 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import HdriMenuGroup from '@/components/load3d/menubar/HdriMenuGroup.vue'
-import type {
-  HDRIConfig,
-  LightConfig
-} from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function makeConfig(hdri?: Partial<HDRIConfig>): LightConfig {
-  return {
-    intensity: 5,
-    hdri: hdri
-      ? {
-          enabled: false,
-          hdriPath: '',
-          showAsBackground: false,
-          intensity: 1,
-          ...hdri
-        }
-      : undefined
-  }
-}
-
-type Props = {
-  config?: LightConfig
-  sceneHasImage?: boolean
-  onUpdateHdriFile?: (file: File | null) => void
-}
-
-function renderGroup(props: Props = {}) {
-  const result = render(HdriMenuGroup, {
-    props: { config: makeConfig({}), ...props },
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-  return { ...result, user: userEvent.setup() }
-}
-
-describe('HdriMenuGroup', () => {
-  it('shows the upload button when no HDRI is loaded', () => {
-    renderGroup()
-
-    expect(screen.getByRole('button', { name: 'Upload' })).toBeInTheDocument()
-  })
-
-  it('hides the upload when a background image is set and no HDRI exists', () => {
-    renderGroup({ config: makeConfig({ hdriPath: '' }), sceneHasImage: true })
-
-    expect(
-      screen.queryByRole('button', { name: 'Upload' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('toggles enabled and forwards removal once a file is loaded', async () => {
-    const onUpdateHdriFile = vi.fn()
-    const config = makeConfig({ hdriPath: 'env.hdr', enabled: false })
-    const { user } = renderGroup({ config, onUpdateHdriFile })
-
-    await user.click(screen.getByRole('button', { name: 'HDRI' }))
-    expect(config.hdri?.enabled).toBe(true)
-
-    await user.click(screen.getByRole('button', { name: 'Remove' }))
-    expect(onUpdateHdriFile).toHaveBeenCalledWith(null)
-  })
-})

src/components/load3d/menubar/HdriMenuGroup.vue

@@ -1,130 +0,0 @@
-<template>
-  <template v-if="!sceneHasImage || hdriPath">
-    <button
-      v-tooltip.bottom="
-        tip(
-          hdriPath ? t('load3d.hdri.changeFile') : t('load3d.hdri.uploadFile')
-        )
-      "
-      :class="actionClass(false)"
-      type="button"
-      :aria-label="
-        compact
-          ? hdriPath
-            ? t('load3d.hdri.changeFile')
-            : t('load3d.hdri.uploadFile')
-          : undefined
-      "
-      @click="hdriFileRef?.click()"
-    >
-      <i class="icon-[lucide--upload] size-4" />
-      <span v-if="!compact">{{
-        hdriPath ? t('load3d.hdri.changeFile') : t('load3d.hdri.uploadFile')
-      }}</span>
-    </button>
-    <input
-      ref="hdriFileRef"
-      type="file"
-      :accept="SUPPORTED_HDRI_EXTENSIONS_ACCEPT"
-      class="pointer-events-none absolute size-0 opacity-0"
-      @change="onHdriFilePicked"
-    />
-  </template>
-
-  <template v-if="hdriPath">
-    <button
-      v-tooltip.bottom="tip(t('load3d.hdri.label'))"
-      :class="actionClass(hdriEnabled)"
-      :aria-pressed="hdriEnabled"
-      type="button"
-      :aria-label="compact ? t('load3d.hdri.label') : undefined"
-      @click="toggleHdriEnabled"
-    >
-      <i class="icon-[lucide--globe] size-4" />
-      <span v-if="!compact">{{ t('load3d.hdri.label') }}</span>
-    </button>
-    <button
-      v-tooltip.bottom="tip(t('load3d.hdri.showAsBackground'))"
-      :class="actionClass(hdriShowAsBackground)"
-      :aria-pressed="hdriShowAsBackground"
-      type="button"
-      :aria-label="compact ? t('load3d.hdri.showAsBackground') : undefined"
-      @click="toggleHdriShowAsBackground"
-    >
-      <i class="icon-[lucide--image] size-4" />
-      <span v-if="!compact">{{ t('load3d.hdri.showAsBackground') }}</span>
-    </button>
-    <button
-      v-tooltip.bottom="tip(t('load3d.hdri.removeFile'))"
-      :class="actionClass(false)"
-      type="button"
-      :aria-label="compact ? t('load3d.hdri.removeFile') : undefined"
-      @click="removeHdri"
-    >
-      <i class="icon-[lucide--x] size-4" />
-      <span v-if="!compact">{{ t('load3d.hdri.removeFile') }}</span>
-    </button>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { actionClass, tip } from '@/components/load3d/menubar/menuBarStyles'
-import {
-  SUPPORTED_HDRI_EXTENSIONS,
-  SUPPORTED_HDRI_EXTENSIONS_ACCEPT
-} from '@/extensions/core/load3d/constants'
-import type { LightConfig } from '@/extensions/core/load3d/interfaces'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-
-const { compact = false, sceneHasImage = false } = defineProps<{
-  compact?: boolean
-  sceneHasImage?: boolean
-}>()
-
-const config = defineModel<LightConfig>('config')
-
-const emit = defineEmits<{
-  (e: 'updateHdriFile', file: File | null): void
-}>()
-
-const { t } = useI18n()
-
-const hdriPath = computed(() => config.value?.hdri?.hdriPath ?? '')
-const hdriEnabled = computed(() => config.value?.hdri?.enabled ?? false)
-const hdriShowAsBackground = computed(
-  () => config.value?.hdri?.showAsBackground ?? false
-)
-
-const hdriFileRef = ref<HTMLInputElement | null>(null)
-
-function onHdriFilePicked(event: Event) {
-  const input = event.target as HTMLInputElement
-  const file = input.files?.[0] ?? null
-  input.value = ''
-  if (file) {
-    const ext = `.${file.name.split('.').pop()?.toLowerCase() ?? ''}`
-    if (!SUPPORTED_HDRI_EXTENSIONS.has(ext)) {
-      useToastStore().addAlert(t('toastMessages.unsupportedHDRIFormat'))
-      return
-    }
-  }
-  emit('updateHdriFile', file)
-}
-
-function toggleHdriEnabled() {
-  const hdri = config.value?.hdri
-  if (hdri) hdri.enabled = !hdri.enabled
-}
-
-function toggleHdriShowAsBackground() {
-  const hdri = config.value?.hdri
-  if (hdri) hdri.showAsBackground = !hdri.showAsBackground
-}
-
-function removeHdri() {
-  emit('updateHdriFile', null)
-}
-</script>

src/components/load3d/menubar/LightMenuGroup.test.ts

@@ -1,74 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import LightMenuGroup from '@/components/load3d/menubar/LightMenuGroup.vue'
-import type { LightConfig } from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const settingValues: Record<string, number> = {
-  'Comfy.Load3D.LightIntensityMinimum': 1,
-  'Comfy.Load3D.LightIntensityMaximum': 10,
-  'Comfy.Load3D.LightAdjustmentIncrement': 0.1
-}
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({ get: (key: string) => settingValues[key] })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function renderGroup(isOriginalMaterial: boolean) {
-  const config: LightConfig = { intensity: 5 }
-  return render(LightMenuGroup, {
-    props: { config, isOriginalMaterial },
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-}
-
-describe('LightMenuGroup', () => {
-  it('shows the intensity control for the original material', () => {
-    renderGroup(true)
-
-    expect(
-      screen.getByRole('button', { name: 'Intensity' })
-    ).toBeInTheDocument()
-  })
-
-  it('explains intensity is unavailable for other materials', () => {
-    renderGroup(false)
-
-    expect(
-      screen.queryByRole('button', { name: 'Intensity' })
-    ).not.toBeInTheDocument()
-    expect(screen.getByText('Original material only')).toBeInTheDocument()
-  })
-
-  it('drives HDRI intensity (0-5) when an HDRI environment is active', async () => {
-    const config: LightConfig = {
-      intensity: 5,
-      hdri: {
-        enabled: true,
-        hdriPath: 'env.hdr',
-        showAsBackground: false,
-        intensity: 2
-      }
-    }
-    render(LightMenuGroup, {
-      props: { config, isOriginalMaterial: true },
-      global: { plugins: [i18n], directives: { tooltip: () => {} } }
-    })
-    const user = userEvent.setup()
-
-    await user.click(screen.getByRole('button', { name: 'Intensity' }))
-
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuemax', '5')
-    expect(slider).toHaveAttribute('aria-valuenow', '2')
-  })
-})

src/components/load3d/menubar/LightMenuGroup.vue

@@ -1,105 +0,0 @@
-<template>
-  <Popover v-if="isOriginalMaterial">
-    <PopoverTrigger as-child>
-      <button
-        v-tooltip.bottom="tip(t('load3d.menuBar.intensity'))"
-        :class="actionClass(false)"
-        type="button"
-        :aria-label="compact ? t('load3d.menuBar.intensity') : undefined"
-      >
-        <i class="icon-[lucide--sun] size-4" />
-        <span v-if="!compact">{{ t('load3d.menuBar.intensity') }}</span>
-      </button>
-    </PopoverTrigger>
-    <PopoverContent
-      side="bottom"
-      align="start"
-      :side-offset="8"
-      :class="cn(panelClass, 'w-56')"
-    >
-      <div class="flex flex-col gap-2 p-1">
-        <span class="text-sm text-base-foreground">{{
-          t('load3d.lightIntensity')
-        }}</span>
-        <Slider
-          :model-value="[sliderValue]"
-          :min="sliderMin"
-          :max="sliderMax"
-          :step="sliderStep"
-          class="w-full"
-          @update:model-value="onIntensityUpdate"
-        />
-      </div>
-    </PopoverContent>
-  </Popover>
-  <span v-else class="px-2 text-sm text-muted">{{
-    t('load3d.menuBar.originalMaterialOnly')
-  }}</span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  actionClass,
-  panelClass,
-  tip
-} from '@/components/load3d/menubar/menuBarStyles'
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import Slider from '@/components/ui/slider/Slider.vue'
-import type { LightConfig } from '@/extensions/core/load3d/interfaces'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { cn } from '@comfyorg/tailwind-utils'
-import { PopoverTrigger } from 'reka-ui'
-
-const { compact = false, isOriginalMaterial = false } = defineProps<{
-  compact?: boolean
-  isOriginalMaterial?: boolean
-}>()
-
-const config = defineModel<LightConfig>('config')
-
-const { t } = useI18n()
-
-const settingStore = useSettingStore()
-const lightIntensityMinimum = settingStore.get(
-  'Comfy.Load3D.LightIntensityMinimum'
-)
-const lightIntensityMaximum = settingStore.get(
-  'Comfy.Load3D.LightIntensityMaximum'
-)
-const lightAdjustmentIncrement = settingStore.get(
-  'Comfy.Load3D.LightAdjustmentIncrement'
-)
-
-const usesHdriIntensity = computed(
-  () => !!config.value?.hdri?.hdriPath?.length && !!config.value?.hdri?.enabled
-)
-
-const sliderMin = computed(() =>
-  usesHdriIntensity.value ? 0 : lightIntensityMinimum
-)
-const sliderMax = computed(() =>
-  usesHdriIntensity.value ? 5 : lightIntensityMaximum
-)
-const sliderStep = computed(() =>
-  usesHdriIntensity.value ? 0.1 : lightAdjustmentIncrement
-)
-const sliderValue = computed(() =>
-  usesHdriIntensity.value
-    ? (config.value?.hdri?.intensity ?? 1)
-    : (config.value?.intensity ?? lightIntensityMinimum)
-)
-
-function onIntensityUpdate(value?: number[]) {
-  if (!value?.length || !config.value) return
-  const next = value[0]
-  if (usesHdriIntensity.value) {
-    if (config.value.hdri) config.value.hdri.intensity = next
-  } else {
-    config.value.intensity = next
-  }
-}
-</script>

src/components/load3d/menubar/ModelMenuGroup.test.ts

@@ -1,69 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ModelMenuGroup from '@/components/load3d/menubar/ModelMenuGroup.vue'
-import type { ModelConfig } from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function makeConfig(overrides: Partial<ModelConfig> = {}): ModelConfig {
-  return {
-    upDirection: 'original',
-    materialMode: 'original',
-    showSkeleton: false,
-    ...overrides
-  }
-}
-
-function renderGroup(
-  props: { config?: ModelConfig; hasSkeleton?: boolean } = {}
-) {
-  const result = render(ModelMenuGroup, {
-    props: { config: makeConfig(), ...props },
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-  return { ...result, user: userEvent.setup() }
-}
-
-describe('ModelMenuGroup', () => {
-  it('sets the up direction from the popover', async () => {
-    const config = makeConfig()
-    const { user } = renderGroup({ config })
-
-    await user.click(screen.getByRole('button', { name: 'Up Direction' }))
-    await user.click(screen.getByRole('button', { name: '+Y' }))
-
-    expect(config.upDirection).toBe('+y')
-  })
-
-  it('sets the material mode from the popover', async () => {
-    const config = makeConfig()
-    const { user } = renderGroup({ config })
-
-    await user.click(screen.getByRole('button', { name: 'Material' }))
-    await user.click(screen.getByRole('button', { name: 'Wireframe' }))
-
-    expect(config.materialMode).toBe('wireframe')
-  })
-
-  it('toggles the skeleton only when supported', async () => {
-    const config = makeConfig({ showSkeleton: false })
-    const { user, rerender } = renderGroup({ config, hasSkeleton: false })
-
-    expect(
-      screen.queryByRole('button', { name: 'Skeleton' })
-    ).not.toBeInTheDocument()
-
-    await rerender({ config, hasSkeleton: true })
-    await user.click(screen.getByRole('button', { name: 'Skeleton' }))
-
-    expect(config.showSkeleton).toBe(true)
-  })
-})

src/components/load3d/menubar/ModelMenuGroup.vue

@@ -1,135 +0,0 @@
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <button
-        v-tooltip.bottom="tip(t('load3d.menuBar.upDirection'))"
-        :class="actionClass(false)"
-        type="button"
-        :aria-label="compact ? t('load3d.menuBar.upDirection') : undefined"
-      >
-        <i class="icon-[lucide--move-3d] size-4" />
-        <span v-if="!compact">{{ t('load3d.menuBar.upDirection') }}</span>
-      </button>
-    </PopoverTrigger>
-    <PopoverContent
-      side="bottom"
-      align="start"
-      :side-offset="8"
-      :class="panelClass"
-    >
-      <button
-        v-for="d in upDirections"
-        :key="d"
-        type="button"
-        :class="cn(rowClass, upDirection === d && 'bg-button-active-surface')"
-        @click="setUpDirection(d)"
-      >
-        {{ d.toUpperCase() }}
-      </button>
-    </PopoverContent>
-  </Popover>
-
-  <Popover v-if="materialModes.length">
-    <PopoverTrigger as-child>
-      <button
-        v-tooltip.bottom="tip(t('load3d.menuBar.material'))"
-        :class="actionClass(false)"
-        type="button"
-        :aria-label="compact ? t('load3d.menuBar.material') : undefined"
-      >
-        <i class="icon-[lucide--box] size-4" />
-        <span v-if="!compact">{{ t('load3d.menuBar.material') }}</span>
-      </button>
-    </PopoverTrigger>
-    <PopoverContent
-      side="bottom"
-      align="start"
-      :side-offset="8"
-      :class="panelClass"
-    >
-      <button
-        v-for="m in materialModes"
-        :key="m"
-        type="button"
-        :class="cn(rowClass, materialMode === m && 'bg-button-active-surface')"
-        @click="setMaterialMode(m)"
-      >
-        {{ t(`load3d.materialModes.${m}`) }}
-      </button>
-    </PopoverContent>
-  </Popover>
-
-  <button
-    v-if="hasSkeleton"
-    v-tooltip.bottom="tip(t('load3d.menuBar.skeleton'))"
-    :class="actionClass(showSkeleton)"
-    :aria-pressed="showSkeleton"
-    type="button"
-    :aria-label="compact ? t('load3d.menuBar.skeleton') : undefined"
-    @click="toggleSkeleton"
-  >
-    <i class="icon-[lucide--bone] size-4" />
-    <span v-if="!compact">{{ t('load3d.menuBar.skeleton') }}</span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  actionClass,
-  panelClass,
-  rowClass,
-  tip
-} from '@/components/load3d/menubar/menuBarStyles'
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import type {
-  MaterialMode,
-  ModelConfig,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import { cn } from '@comfyorg/tailwind-utils'
-import { PopoverTrigger } from 'reka-ui'
-
-const {
-  compact = false,
-  hasSkeleton = false,
-  materialModes = ['original', 'clay', 'normal', 'wireframe']
-} = defineProps<{
-  compact?: boolean
-  hasSkeleton?: boolean
-  materialModes?: readonly MaterialMode[]
-}>()
-
-const config = defineModel<ModelConfig>('config')
-
-const { t } = useI18n()
-
-const upDirection = computed(() => config.value?.upDirection)
-const materialMode = computed(() => config.value?.materialMode)
-const showSkeleton = computed(() => config.value?.showSkeleton ?? false)
-
-const upDirections: UpDirection[] = [
-  'original',
-  '-x',
-  '+x',
-  '-y',
-  '+y',
-  '-z',
-  '+z'
-]
-
-function setUpDirection(direction: UpDirection) {
-  if (config.value) config.value.upDirection = direction
-}
-
-function setMaterialMode(mode: MaterialMode) {
-  if (config.value) config.value.materialMode = mode
-}
-
-function toggleSkeleton() {
-  if (config.value) config.value.showSkeleton = !config.value.showSkeleton
-}
-</script>

src/components/load3d/menubar/RecordMenuControl.test.ts

@@ -1,138 +0,0 @@
-import { render, screen, within } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import RecordMenuControl from '@/components/load3d/menubar/RecordMenuControl.vue'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-type Props = {
-  isRecording?: boolean
-  hasRecording?: boolean
-  recordingDuration?: number
-  onStartRecording?: () => void
-  onStopRecording?: () => void
-  onExportRecording?: () => void
-  onClearRecording?: () => void
-}
-
-function renderControl(props: Props = {}) {
-  const result = render(RecordMenuControl, {
-    props,
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-  return { ...result, user: userEvent.setup() }
-}
-
-async function openRecordingMenu(user: ReturnType<typeof userEvent.setup>) {
-  await user.click(
-    screen.getByRole('button', { name: 'Video recording of the scene [mp4]' })
-  )
-}
-
-describe('RecordMenuControl', () => {
-  it('starts recording when idle', async () => {
-    const onStartRecording = vi.fn()
-    const { user } = renderControl({ isRecording: false, onStartRecording })
-
-    await user.click(screen.getByRole('button', { name: 'Record' }))
-
-    expect(onStartRecording).toHaveBeenCalledOnce()
-  })
-
-  it('stops recording when active', async () => {
-    const onStopRecording = vi.fn()
-    const { user } = renderControl({ isRecording: true, onStopRecording })
-
-    await user.click(screen.getByRole('button', { name: 'Stop recording' }))
-
-    expect(onStopRecording).toHaveBeenCalledOnce()
-  })
-
-  it('shows the recording duration once a recording exists', () => {
-    renderControl({
-      isRecording: false,
-      hasRecording: true,
-      recordingDuration: 65
-    })
-
-    expect(screen.getByText('01:05')).toBeInTheDocument()
-  })
-
-  it('downloads the recording from the menu', async () => {
-    const onExportRecording = vi.fn()
-    const { user } = renderControl({
-      hasRecording: true,
-      recordingDuration: 4,
-      onExportRecording
-    })
-
-    await openRecordingMenu(user)
-    await user.click(screen.getByRole('button', { name: 'Download Recording' }))
-
-    expect(onExportRecording).toHaveBeenCalledOnce()
-  })
-
-  it('starts a new recording from the menu', async () => {
-    const onStartRecording = vi.fn()
-    const { user } = renderControl({
-      hasRecording: true,
-      recordingDuration: 4,
-      onStartRecording
-    })
-
-    await openRecordingMenu(user)
-    await user.click(
-      screen.getByRole('button', { name: 'Start New Recording' })
-    )
-
-    expect(onStartRecording).toHaveBeenCalledOnce()
-  })
-
-  it('deletes the recording from the menu', async () => {
-    const onClearRecording = vi.fn()
-    const { user } = renderControl({
-      hasRecording: true,
-      recordingDuration: 4,
-      onClearRecording
-    })
-
-    await openRecordingMenu(user)
-    await user.click(
-      within(screen.getByRole('dialog')).getByRole('button', {
-        name: 'Delete Recording'
-      })
-    )
-
-    expect(onClearRecording).toHaveBeenCalledOnce()
-  })
-
-  it('deletes the recording via the chip dismiss button', async () => {
-    const onClearRecording = vi.fn()
-    const { user } = renderControl({
-      hasRecording: true,
-      recordingDuration: 4,
-      onClearRecording
-    })
-
-    await user.click(screen.getByRole('button', { name: 'Delete Recording' }))
-
-    expect(onClearRecording).toHaveBeenCalledOnce()
-  })
-
-  it('shows only the stop control while recording is in progress', () => {
-    renderControl({ isRecording: true, hasRecording: true })
-
-    expect(
-      screen.queryByRole('button', {
-        name: 'Video recording of the scene [mp4]'
-      })
-    ).not.toBeInTheDocument()
-  })
-})

src/components/load3d/menubar/RecordMenuControl.vue

@@ -1,141 +0,0 @@
-<template>
-  <button
-    v-if="isRecording"
-    v-tooltip.top="tip(t('load3d.menuBar.stopRecording'))"
-    :class="chipClass"
-    type="button"
-    :aria-label="t('load3d.menuBar.stopRecording')"
-    @click="emit('stopRecording')"
-  >
-    <span class="size-2 animate-pulse rounded-full bg-red-500" />
-    <span v-if="!compact">{{ t('load3d.menuBar.recording') }}</span>
-  </button>
-
-  <div
-    v-else-if="hasRecording"
-    class="flex shrink-0 items-center gap-0.5 rounded-lg bg-button-active-surface py-0.5 pr-0.5 pl-1 text-sm text-base-foreground"
-  >
-    <Popover v-model:open="menuOpen">
-      <PopoverTrigger as-child>
-        <button
-          v-tooltip.top="tip(t('load3d.menuBar.videoRecordingTooltip'))"
-          class="focus-visible:ring-ring flex items-center gap-1.5 rounded-md border-0 bg-transparent px-1 py-0.5 text-sm text-base-foreground transition-colors outline-none hover:bg-button-hover-surface focus-visible:ring-1"
-          type="button"
-          :aria-label="t('load3d.menuBar.videoRecordingTooltip')"
-          data-testid="load3d-recording-duration"
-        >
-          <i class="icon-[lucide--film] size-4" />
-          {{ formatDuration(recordingDuration ?? 0) }}
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        side="bottom"
-        align="start"
-        :side-offset="8"
-        :class="panelClass"
-      >
-        <button
-          type="button"
-          :class="cn(rowClass, 'gap-2')"
-          @click="downloadRecording"
-        >
-          <i class="icon-[lucide--download] size-4" />
-          {{ t('load3d.menuBar.downloadRecording') }}
-        </button>
-        <button
-          type="button"
-          :class="cn(rowClass, 'gap-2')"
-          @click="startNewRecording"
-        >
-          <i class="icon-[lucide--video] size-4" />
-          {{ t('load3d.menuBar.startNewRecording') }}
-        </button>
-        <button
-          type="button"
-          :class="cn(rowClass, 'gap-2')"
-          @click="deleteRecording"
-        >
-          <i class="icon-[lucide--trash-2] size-4" />
-          {{ t('load3d.menuBar.deleteRecording') }}
-        </button>
-      </PopoverContent>
-    </Popover>
-    <button
-      v-tooltip.top="tip(t('load3d.menuBar.deleteRecording'))"
-      class="focus-visible:ring-ring flex size-6 items-center justify-center rounded-md border-0 bg-transparent text-base-foreground transition-colors outline-none hover:bg-button-hover-surface focus-visible:ring-1"
-      type="button"
-      :aria-label="t('load3d.menuBar.deleteRecording')"
-      @click="emit('clearRecording')"
-    >
-      <i class="icon-[lucide--x] size-3.5" />
-    </button>
-  </div>
-
-  <button
-    v-else
-    v-tooltip.top="tip(t('load3d.menuBar.record'))"
-    :class="chipClass"
-    type="button"
-    :aria-label="compact ? t('load3d.menuBar.record') : undefined"
-    @click="emit('startRecording')"
-  >
-    <i class="icon-[lucide--video] size-4" />
-    <span v-if="!compact">{{ t('load3d.menuBar.record') }}</span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { PopoverTrigger } from 'reka-ui'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  chipClass,
-  panelClass,
-  rowClass,
-  tip
-} from '@/components/load3d/menubar/menuBarStyles'
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { compact = false } = defineProps<{
-  compact?: boolean
-}>()
-
-const isRecording = defineModel<boolean>('isRecording')
-const hasRecording = defineModel<boolean>('hasRecording')
-const recordingDuration = defineModel<number>('recordingDuration')
-
-const emit = defineEmits<{
-  (e: 'startRecording'): void
-  (e: 'stopRecording'): void
-  (e: 'exportRecording'): void
-  (e: 'clearRecording'): void
-}>()
-
-const { t } = useI18n()
-
-const menuOpen = ref(false)
-
-function downloadRecording() {
-  menuOpen.value = false
-  emit('exportRecording')
-}
-
-function startNewRecording() {
-  menuOpen.value = false
-  emit('startRecording')
-}
-
-function deleteRecording() {
-  menuOpen.value = false
-  emit('clearRecording')
-}
-
-function formatDuration(seconds: number) {
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = Math.floor(seconds % 60)
-  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
-}
-</script>

src/components/load3d/menubar/SceneMenuGroup.test.ts

@@ -1,108 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import SceneMenuGroup from '@/components/load3d/menubar/SceneMenuGroup.vue'
-import type { SceneConfig } from '@/extensions/core/load3d/interfaces'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-function makeConfig(overrides: Partial<SceneConfig> = {}): SceneConfig {
-  return {
-    showGrid: true,
-    backgroundColor: '#000000',
-    backgroundImage: '',
-    backgroundRenderMode: 'tiled',
-    ...overrides
-  }
-}
-
-type Props = {
-  config?: SceneConfig
-  fov?: number
-  hdriActive?: boolean
-  canUseBackgroundImage?: boolean
-  onUpdateBackgroundImage?: (file: File | null) => void
-}
-
-function renderGroup(props: Props = {}) {
-  const result = render(SceneMenuGroup, {
-    props: { config: makeConfig(), ...props },
-    global: { plugins: [i18n], directives: { tooltip: () => {} } }
-  })
-  return { ...result, user: userEvent.setup() }
-}
-
-describe('SceneMenuGroup', () => {
-  it('toggles showGrid on the bound config', async () => {
-    const config = makeConfig({ showGrid: true })
-    const { user } = renderGroup({ config })
-
-    await user.click(screen.getByRole('button', { name: 'Show grid' }))
-
-    expect(config.showGrid).toBe(false)
-  })
-
-  it('hides background color and image controls while HDRI is active', () => {
-    renderGroup({ hdriActive: true })
-
-    expect(
-      screen.queryByRole('button', { name: 'BG Color' })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'BG Image' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('hides the image upload when background images are not allowed', () => {
-    renderGroup({ canUseBackgroundImage: false })
-
-    expect(screen.getByRole('button', { name: 'BG Color' })).toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'BG Image' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('shows panorama and remove once a background image exists', async () => {
-    const onUpdateBackgroundImage = vi.fn()
-    const { user } = renderGroup({
-      config: makeConfig({ backgroundImage: 'bg.png' }),
-      onUpdateBackgroundImage
-    })
-
-    expect(screen.getByRole('button', { name: 'Panorama' })).toBeInTheDocument()
-    await user.click(screen.getByRole('button', { name: 'Remove BG' }))
-
-    expect(onUpdateBackgroundImage).toHaveBeenCalledWith(null)
-  })
-
-  it('exposes the FOV control while a panorama background is active', () => {
-    renderGroup({
-      config: makeConfig({
-        backgroundImage: 'bg.png',
-        backgroundRenderMode: 'panorama'
-      }),
-      fov: 75
-    })
-
-    expect(screen.getByRole('button', { name: 'FOV' })).toBeInTheDocument()
-  })
-
-  it('clears the file input so the same image can be re-picked', async () => {
-    const onUpdateBackgroundImage = vi.fn()
-    const { user } = renderGroup({ onUpdateBackgroundImage })
-    const input = screen.getByTestId<HTMLInputElement>('scene-bg-image-input')
-    const file = new File(['x'], 'bg.png', { type: 'image/png' })
-
-    await user.upload(input, file)
-
-    expect(onUpdateBackgroundImage).toHaveBeenCalledWith(file)
-    expect(input.value).toBe('')
-  })
-})

src/components/load3d/menubar/SceneMenuGroup.vue

@@ -1,190 +0,0 @@
-<template>
-  <button
-    v-tooltip.bottom="tip(t('load3d.menuBar.showGrid'))"
-    :class="actionClass(showGrid)"
-    :aria-pressed="showGrid"
-    type="button"
-    :aria-label="compact ? t('load3d.menuBar.showGrid') : undefined"
-    @click="toggleGrid"
-  >
-    <i class="icon-[lucide--grid-3x3] size-4" />
-    <span v-if="!compact">{{ t('load3d.menuBar.showGrid') }}</span>
-  </button>
-
-  <template v-if="!hasImage && !hdriActive">
-    <button
-      v-tooltip.bottom="tip(t('load3d.menuBar.bgColor'))"
-      :class="actionClass(false)"
-      type="button"
-      :aria-label="compact ? t('load3d.menuBar.bgColor') : undefined"
-      @click="colorRef?.click()"
-    >
-      <i class="icon-[lucide--palette] size-4" />
-      <span v-if="!compact">{{ t('load3d.menuBar.bgColor') }}</span>
-    </button>
-    <input
-      ref="colorRef"
-      type="color"
-      class="pointer-events-none absolute size-0 opacity-0"
-      :value="bgColor"
-      @input="setBackgroundColor"
-    />
-    <template v-if="canUseBackgroundImage">
-      <button
-        v-tooltip.bottom="tip(t('load3d.menuBar.bgImage'))"
-        :class="actionClass(false)"
-        type="button"
-        :aria-label="compact ? t('load3d.menuBar.bgImage') : undefined"
-        @click="bgImageRef?.click()"
-      >
-        <i class="icon-[lucide--image] size-4" />
-        <span v-if="!compact">{{ t('load3d.menuBar.bgImage') }}</span>
-      </button>
-      <input
-        ref="bgImageRef"
-        type="file"
-        accept="image/*"
-        class="pointer-events-none absolute size-0 opacity-0"
-        data-testid="scene-bg-image-input"
-        @change="onBackgroundImagePicked"
-      />
-    </template>
-  </template>
-
-  <template v-if="hasImage">
-    <button
-      v-tooltip.bottom="tip(t('load3d.menuBar.panorama'))"
-      :class="actionClass(isPanorama)"
-      :aria-pressed="isPanorama"
-      type="button"
-      :aria-label="compact ? t('load3d.menuBar.panorama') : undefined"
-      @click="togglePanorama"
-    >
-      <i class="icon-[lucide--globe] size-4" />
-      <span v-if="!compact">{{ t('load3d.menuBar.panorama') }}</span>
-    </button>
-    <Popover v-if="isPanorama">
-      <PopoverTrigger as-child>
-        <button
-          v-tooltip.bottom="tip(t('load3d.menuBar.fov'))"
-          :class="actionClass(false)"
-          type="button"
-          :aria-label="compact ? t('load3d.menuBar.fov') : undefined"
-        >
-          <i class="icon-[lucide--focus] size-4" />
-          <span v-if="!compact">{{ t('load3d.menuBar.fov') }}</span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        side="bottom"
-        align="start"
-        :side-offset="8"
-        :class="cn(panelClass, 'w-56')"
-      >
-        <div class="flex flex-col gap-2 p-1">
-          <span class="text-sm text-base-foreground">{{
-            t('load3d.fov')
-          }}</span>
-          <Slider
-            :model-value="[fovValue]"
-            :min="10"
-            :max="150"
-            :step="1"
-            class="w-full"
-            @update:model-value="setFov"
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-    <button
-      v-tooltip.bottom="tip(t('load3d.menuBar.removeBackground'))"
-      :class="actionClass(false)"
-      type="button"
-      :aria-label="compact ? t('load3d.menuBar.removeBackground') : undefined"
-      @click="removeBackgroundImage"
-    >
-      <i class="icon-[lucide--x] size-4" />
-      <span v-if="!compact">{{ t('load3d.menuBar.removeBackground') }}</span>
-    </button>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  actionClass,
-  panelClass,
-  tip
-} from '@/components/load3d/menubar/menuBarStyles'
-import Popover from '@/components/ui/popover/Popover.vue'
-import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
-import Slider from '@/components/ui/slider/Slider.vue'
-import type { SceneConfig } from '@/extensions/core/load3d/interfaces'
-import { cn } from '@comfyorg/tailwind-utils'
-import { PopoverTrigger } from 'reka-ui'
-
-const {
-  compact = false,
-  canUseBackgroundImage = true,
-  hdriActive = false
-} = defineProps<{
-  compact?: boolean
-  canUseBackgroundImage?: boolean
-  hdriActive?: boolean
-}>()
-
-const config = defineModel<SceneConfig>('config')
-const fov = defineModel<number>('fov')
-
-const emit = defineEmits<{
-  (e: 'updateBackgroundImage', file: File | null): void
-}>()
-
-const { t } = useI18n()
-
-const showGrid = computed(() => config.value?.showGrid ?? false)
-const bgColor = computed(() => config.value?.backgroundColor ?? '#000000')
-const hasImage = computed(
-  () => !!config.value?.backgroundImage && config.value.backgroundImage !== ''
-)
-const isPanorama = computed(
-  () => config.value?.backgroundRenderMode === 'panorama'
-)
-const fovValue = computed(() => fov.value ?? 10)
-
-const colorRef = ref<HTMLInputElement | null>(null)
-const bgImageRef = ref<HTMLInputElement | null>(null)
-
-function toggleGrid() {
-  if (config.value) config.value.showGrid = !config.value.showGrid
-}
-
-function setBackgroundColor(event: Event) {
-  if (config.value) {
-    config.value.backgroundColor = (event.target as HTMLInputElement).value
-  }
-}
-
-function onBackgroundImagePicked(event: Event) {
-  const input = event.target as HTMLInputElement
-  const file = input.files?.[0]
-  input.value = ''
-  if (file) emit('updateBackgroundImage', file)
-}
-
-function removeBackgroundImage() {
-  emit('updateBackgroundImage', null)
-}
-
-function togglePanorama() {
-  if (!config.value) return
-  config.value.backgroundRenderMode =
-    config.value.backgroundRenderMode === 'panorama' ? 'tiled' : 'panorama'
-}
-
-function setFov(value?: number[]) {
-  if (value?.length) fov.value = value[0]
-}
-</script>

src/components/load3d/menubar/menuBarStyles.ts

@@ -1,24 +0,0 @@
-import { cn } from '@comfyorg/tailwind-utils'
-
-export const chipClass =
-  'flex shrink-0 items-center gap-1.5 rounded-lg border-0 bg-interface-menu-surface px-2.5 py-1 text-sm text-base-foreground outline-none transition-colors hover:bg-button-active-surface focus-visible:ring-1 focus-visible:ring-ring'
-
-export const iconBtnClass =
-  'flex size-8 items-center justify-center rounded-md border-0 bg-transparent text-base-foreground outline-none transition-colors hover:bg-button-hover-surface focus-visible:ring-1 focus-visible:ring-ring'
-
-export const panelClass =
-  'w-48 max-h-80 overflow-y-auto flex flex-col gap-0.5 p-1.5 rounded-lg border-border-default bg-interface-menu-surface shadow-interface'
-
-export const rowClass =
-  'flex w-full cursor-pointer items-center rounded-md border-0 bg-transparent px-2 py-1.5 text-left text-sm text-base-foreground outline-none hover:bg-button-hover-surface focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset'
-
-export function actionClass(active: boolean) {
-  return cn(
-    'focus-visible:ring-ring flex shrink-0 items-center gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 text-sm text-base-foreground transition-colors outline-none hover:bg-button-hover-surface focus-visible:ring-1',
-    active && 'bg-button-active-surface'
-  )
-}
-
-export function tip(label: string) {
-  return { value: label, showDelay: 300 }
-}