refactor(load3d): split menu bar into per-responsibility group components

Replace the floating viewer controls with a framed chrome: a black top bar
holding a category dropdown (Scene/3D Model/Camera/Lighting) plus the active
category's actions (labels collapse to icons on narrow nodes), and a black
bottom bar with Record and fit/export. Move export out of the menu into a
bottom-right button.

Add a 'Clay' material mode that renders meshes with a flat grey material so
geometry is visible without textures.

Proof-of-concept for design exploration; not intended to merge as-is.

.gitignore

@@ -96,7 +96,4 @@ vitest.config.*.timestamp*
 # Weekly docs check output
 /output.txt
 
-.amp
-.vercel
-.env*
-!.env_example
+.amp

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

@@ -266,9 +266,6 @@
   --component-node-widget-promoted: var(--color-purple-700);
   --component-node-widget-advanced: var(--color-azure-400);
 
-  --video-trim-selection-background: var(--color-datatype-CLIP, #ffd500);
-  --video-trim-playhead-background: #f0513b;
-
   /* Default UI element color palette variables */
   --palette-contrast-mix-color: #fff;
   --palette-interface-panel-surface: var(--comfy-menu-bg);
@@ -552,10 +549,6 @@
   );
   --color-component-node-widget-promoted: var(--component-node-widget-promoted);
   --color-component-node-widget-advanced: var(--component-node-widget-advanced);
-  --color-video-trim-selection-background: var(
-    --video-trim-selection-background
-  );
-  --color-video-trim-playhead-background: var(--video-trim-playhead-background);
 
   /* Semantic tokens */
   --color-base-foreground: var(--base-foreground);

src/components/load3d/Load3D.test.ts

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

src/components/load3d/Load3D.vue

@@ -15,25 +15,39 @@
       :is-preview="isPreview"
     />
     <div class="pointer-events-none absolute top-0 left-0 size-full">
-      <Load3DControls
+      <Load3DMenuBar
         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"
-        @export-model="handleExportModel"
         @update-hdri-file="handleHDRIFileUpdate"
+        @export-model="handleExportModel"
+        @fit-to-viewer="handleFitToViewer"
+        @center-camera="handleCenterCameraOnModel"
         @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"
@@ -46,59 +60,6 @@
         @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>
 
@@ -106,12 +67,9 @@
 import { computed, onMounted, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import Load3DControls from '@/components/load3d/Load3DControls.vue'
+import Load3DMenuBar from '@/components/load3d/Load3DMenuBar.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'
@@ -192,11 +150,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

@@ -0,0 +1,239 @@
+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('shows export/clear and forwards exportRecording once a recording exists', async () => {
+    const onExportRecording = vi.fn()
+    const { user } = renderMenuBar({
+      hasRecording: true,
+      isRecording: false,
+      onExportRecording
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Export 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

@@ -0,0 +1,329 @@
+<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">
+            {{ 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="flex-1" />
+
+    <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

@@ -1,205 +0,0 @@
-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

@@ -1,126 +0,0 @@
-<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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,105 @@
+<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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,130 @@
+<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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,105 @@
+<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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,135 @@
+<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

@@ -0,0 +1,78 @@
+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 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() }
+}
+
+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('exposes export, clear and duration once a recording exists', async () => {
+    const onExportRecording = vi.fn()
+    const onClearRecording = vi.fn()
+    const { user } = renderControl({
+      isRecording: false,
+      hasRecording: true,
+      recordingDuration: 65,
+      onExportRecording,
+      onClearRecording
+    })
+
+    expect(screen.getByText('01:05')).toBeInTheDocument()
+    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('hides export and clear while recording is in progress', () => {
+    renderControl({ isRecording: true, hasRecording: true })
+
+    expect(
+      screen.queryByRole('button', { name: 'Export Recording' })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/load3d/menubar/RecordMenuControl.vue

@@ -0,0 +1,88 @@
+<template>
+  <button
+    v-tooltip.top="tip(recordLabel)"
+    :class="chipClass"
+    type="button"
+    :aria-label="compact ? recordLabel : undefined"
+    @click="toggleRecording"
+  >
+    <span
+      v-if="isRecording"
+      class="size-2 animate-pulse rounded-full bg-red-500"
+    />
+    <i v-else class="icon-[lucide--video] size-4" />
+    <span v-if="!compact">{{ recordLabel }}</span>
+  </button>
+
+  <template v-if="hasRecording && !isRecording">
+    <button
+      v-tooltip.top="tip(t('load3d.exportRecording'))"
+      :class="iconBtnClass"
+      type="button"
+      :aria-label="t('load3d.exportRecording')"
+      @click="emit('exportRecording')"
+    >
+      <i class="icon-[lucide--download] size-4" />
+    </button>
+    <button
+      v-tooltip.top="tip(t('load3d.clearRecording'))"
+      :class="iconBtnClass"
+      type="button"
+      :aria-label="t('load3d.clearRecording')"
+      @click="emit('clearRecording')"
+    >
+      <i class="icon-[lucide--trash-2] size-4" />
+    </button>
+    <span
+      v-if="recordingDuration && recordingDuration > 0"
+      class="px-1 text-sm text-base-foreground"
+    >
+      {{ formatDuration(recordingDuration) }}
+    </span>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  chipClass,
+  iconBtnClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+
+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 recordLabel = computed(() =>
+  isRecording.value
+    ? t('load3d.menuBar.stopRecording')
+    : t('load3d.menuBar.record')
+)
+
+function toggleRecording() {
+  if (isRecording.value) emit('stopRecording')
+  else emit('startRecording')
+}
+
+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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,190 @@
+<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

@@ -0,0 +1,24 @@
+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 }
+}

src/components/ui/tooltip/Tooltip.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
-import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
-
-// eslint-disable-next-line vue/no-unused-properties -- forwarded to Reka via useForwardPropsEmits
-const props = defineProps<TooltipRootProps>()
-const emits = defineEmits<TooltipRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <TooltipRoot v-bind="forwarded">
-    <slot />
-  </TooltipRoot>
-</template>

src/components/ui/tooltip/TooltipContent.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
-import {
-  TooltipArrow,
-  TooltipContent,
-  TooltipPortal,
-  useForwardPropsEmits
-} from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { computed } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const {
-  sideOffset = 4,
-  class: className,
-  arrowClass,
-  ...restProps
-} = defineProps<
-  TooltipContentProps & {
-    class?: HTMLAttributes['class']
-    arrowClass?: HTMLAttributes['class']
-  }
->()
-const emits = defineEmits<TooltipContentEmits>()
-
-const delegatedProps = computed(() => ({
-  sideOffset,
-  ...restProps
-}))
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <TooltipPortal>
-    <TooltipContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'z-50 w-fit rounded-md border bg-base-background px-3 py-1.5 text-sm text-base-foreground shadow-md',
-          'animate-in fade-in-0 zoom-in-95',
-          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          className
-        )
-      "
-    >
-      <slot />
-      <TooltipArrow
-        :class="cn('fill-base-background', arrowClass)"
-        :width="10"
-        :height="5"
-      />
-    </TooltipContent>
-  </TooltipPortal>
-</template>

src/components/ui/tooltip/TooltipHint.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import TooltipHint from './TooltipHint.vue'
-import Button from '@/components/ui/button/Button.vue'
-
-const meta: Meta<typeof TooltipHint> = {
-  title: 'Components/Tooltip/TooltipHint',
-  component: TooltipHint,
-  tags: ['autodocs'],
-  args: {
-    content: 'Tooltip hint',
-    side: 'top',
-    delayDuration: 300,
-    disabled: false
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { TooltipHint, Button },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div class="flex items-center justify-center p-16">
-        <TooltipHint v-bind="args">
-          <Button variant="secondary">Hover me</Button>
-        </TooltipHint>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    content: 'Hidden tooltip'
-  },
-  render: Default.render
-}
-
-export const IconButton: Story = {
-  args: {
-    content: 'Set start frame'
-  },
-  render: (args) => ({
-    components: { TooltipHint },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div class="flex items-center justify-center p-16">
-        <TooltipHint v-bind="args">
-          <button
-            type="button"
-            class="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-component-node-widget-background text-component-node-foreground"
-            aria-label="Set start frame"
-          >
-            <i class="icon-[lucide--skip-back] size-4" />
-          </button>
-        </TooltipHint>
-      </div>
-    `
-  })
-}

src/components/ui/tooltip/TooltipHint.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { TooltipContentProps } from 'reka-ui'
-
-import Tooltip from '@/components/ui/tooltip/Tooltip.vue'
-import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue'
-import TooltipProvider from '@/components/ui/tooltip/TooltipProvider.vue'
-import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const {
-  content,
-  side = 'top',
-  sideOffset = 4,
-  delayDuration = 300,
-  disabled = false
-} = defineProps<{
-  content: string
-  side?: TooltipContentProps['side']
-  sideOffset?: number
-  delayDuration?: number
-  disabled?: boolean
-}>()
-</script>
-
-<template>
-  <TooltipProvider :delay-duration="delayDuration">
-    <Tooltip :disabled="disabled">
-      <TooltipTrigger as-child>
-        <slot />
-      </TooltipTrigger>
-      <TooltipContent
-        :side
-        :side-offset="sideOffset"
-        :class="
-          cn(
-            'rounded-md border border-node-component-tooltip-border bg-node-component-tooltip-surface px-2.5 py-1 text-xs leading-none text-node-component-tooltip shadow-none'
-          )
-        "
-        arrow-class="fill-node-component-tooltip-surface"
-      >
-        {{ content }}
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-</template>

src/components/ui/tooltip/TooltipProvider.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { TooltipProviderProps } from 'reka-ui'
-import { TooltipProvider } from 'reka-ui'
-
-const { ...restProps } = defineProps<TooltipProviderProps>()
-</script>
-
-<template>
-  <TooltipProvider v-bind="restProps">
-    <slot />
-  </TooltipProvider>
-</template>

src/components/ui/tooltip/TooltipTrigger.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { TooltipTriggerProps } from 'reka-ui'
-import { TooltipTrigger } from 'reka-ui'
-
-const { ...restProps } = defineProps<TooltipTriggerProps>()
-</script>
-
-<template>
-  <TooltipTrigger v-bind="restProps">
-    <slot />
-  </TooltipTrigger>
-</template>

src/components/video/LoadVideoTrimPanel.stories.ts

@@ -1,169 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { ref, toRefs } from 'vue'
-
-import LoadVideoTrimPanel from './LoadVideoTrimPanel.vue'
-
-const SAMPLE_VIDEO =
-  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
-
-type StoryArgs = ComponentPropsAndSlots<typeof LoadVideoTrimPanel> & {
-  trimEnabled?: boolean
-  startFrame?: number
-  endFrame?: number
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Video/LoadVideoTrimPanel',
-  component: LoadVideoTrimPanel,
-  tags: ['autodocs'],
-  decorators: [
-    () => ({
-      template:
-        '<div class="w-[350px] rounded-2xl bg-node-component-surface p-2"><story /></div>'
-    })
-  ],
-  args: {
-    videoUrl: SAMPLE_VIDEO,
-    trimEnabled: false,
-    startFrame: 0,
-    endFrame: 400
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-function renderPanel(initialTrimEnabled: boolean) {
-  return (args: StoryArgs) => ({
-    components: { LoadVideoTrimPanel },
-    setup() {
-      const { videoUrl } = toRefs(args)
-      const trimEnabled = ref(initialTrimEnabled)
-      const startFrame = ref(args.startFrame ?? 0)
-      const endFrame = ref(args.endFrame ?? 400)
-      const playheadFrame = ref(0)
-      return {
-        videoUrl,
-        trimEnabled,
-        startFrame,
-        endFrame,
-        playheadFrame
-      }
-    },
-    template: `
-      <LoadVideoTrimPanel
-        v-model:trim-enabled="trimEnabled"
-        v-model:start-frame="startFrame"
-        v-model:end-frame="endFrame"
-        v-model:playhead-frame="playheadFrame"
-        :video-url="videoUrl"
-      />
-    `
-  })
-}
-
-export const TrimDisabled: Story = {
-  render: renderPanel(false)
-}
-
-export const TrimEnabled: Story = {
-  render: renderPanel(true)
-}
-
-export const EmptyNoVideo: Story = {
-  args: {
-    videoUrl: undefined
-  },
-  render: (args) => ({
-    components: { LoadVideoTrimPanel },
-    setup() {
-      const trimEnabled = ref(false)
-      const startFrame = ref(0)
-      const endFrame = ref(0)
-      const playheadFrame = ref(0)
-      const uploading = ref(false)
-      function handleBrowse() {
-        uploading.value = true
-        setTimeout(() => {
-          uploading.value = false
-        }, 1200)
-      }
-      return {
-        args,
-        trimEnabled,
-        startFrame,
-        endFrame,
-        playheadFrame,
-        uploading,
-        handleBrowse
-      }
-    },
-    template: `
-      <LoadVideoTrimPanel
-        v-model:trim-enabled="trimEnabled"
-        v-model:start-frame="startFrame"
-        v-model:end-frame="endFrame"
-        v-model:playhead-frame="playheadFrame"
-        :video-url="args.videoUrl"
-        :uploading="uploading"
-        @browse="handleBrowse"
-      />
-    `
-  })
-}
-
-export const EmptyNodeLayout: Story = {
-  args: {
-    videoUrl: undefined
-  },
-  render: (args) => ({
-    components: { LoadVideoTrimPanel },
-    setup() {
-      const trimEnabled = ref(false)
-      const startFrame = ref(0)
-      const endFrame = ref(0)
-      const playheadFrame = ref(0)
-      const uploading = ref(false)
-      return {
-        args,
-        trimEnabled,
-        startFrame,
-        endFrame,
-        playheadFrame,
-        uploading
-      }
-    },
-    template: `
-      <div class="flex flex-col gap-2">
-        <div class="px-2">
-          <label class="mb-1 block text-sm text-muted-foreground">video</label>
-          <div class="flex h-8 items-center justify-between rounded-lg bg-component-node-widget-background px-2 text-sm text-text-secondary">
-            <span>Browse asset library</span>
-            <i class="icon-[lucide--chevron-down] size-4 text-component-node-foreground-secondary" />
-          </div>
-        </div>
-        <LoadVideoTrimPanel
-          v-model:trim-enabled="trimEnabled"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:playhead-frame="playheadFrame"
-          :video-url="args.videoUrl"
-          :uploading="uploading"
-        />
-      </div>
-    `
-  })
-}
-
-export const LongVideoManyFrames: Story = {
-  args: {
-    videoUrl: SAMPLE_VIDEO,
-    startFrame: 120,
-    endFrame: 3600
-  },
-  render: renderPanel(true)
-}

src/components/video/LoadVideoTrimPanel.test.ts

@@ -1,446 +0,0 @@
-import type { ComponentProps } from 'vue-component-type-helpers'
-import userEvent from '@testing-library/user-event'
-import { fireEvent, render, screen } from '@testing-library/vue'
-import { defineComponent, ref } from 'vue'
-import { createI18n } from 'vue-i18n'
-import { describe, expect, it, vi } from 'vitest'
-
-import LoadVideoTrimPanel from './LoadVideoTrimPanel.vue'
-
-vi.mock('@/composables/video/useVideoFilmstrip', () => ({
-  DEFAULT_VIDEO_FPS: 30,
-  useVideoFilmstrip: () => ({
-    thumbnails: ref<string[]>(['data:image/jpeg;base64,one']),
-    duration: ref(10),
-    totalFrames: ref(101),
-    width: ref(1920),
-    height: ref(1080),
-    fps: ref(30),
-    fileSize: ref(5 * 1024 * 1024),
-    loading: ref(false)
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        increment: 'Increment',
-        decrement: 'Decrement',
-        remove: 'Remove'
-      },
-      loadVideoTrim: {
-        trimVideo: 'Trim Video',
-        startFrame: 'Start Frame',
-        endFrame: 'End Frame',
-        setStartFrame: 'Set start frame',
-        setEndFrame: 'Set end frame',
-        play: 'Play',
-        pause: 'Pause',
-        adjustStartFrame: 'Adjust start frame',
-        adjustEndFrame: 'Adjust end frame',
-        duration: 'Duration',
-        frames: 'Number of Frames',
-        fileSize: 'File Size',
-        durationZero: '0s',
-        durationSeconds: '{count}s',
-        fileSizeUnknown: '—',
-        fileSizeBytes: '{count} B',
-        fileSizeKilobytes: '{count} KB',
-        fileSizeMegabytes: '{count} MB',
-        resolution: '{width} × {height}',
-        dragAndDropVideos: 'Drag and drop videos here to upload',
-        uploadFromDevice: 'Upload from device',
-        uploading: 'Uploading…',
-        loadingVideo: 'Loading video preview'
-      }
-    }
-  }
-})
-
-type PanelProps = ComponentProps<typeof LoadVideoTrimPanel>
-
-async function flushPromises() {
-  await Promise.resolve()
-  await Promise.resolve()
-}
-
-function renderPanel(props: PanelProps) {
-  return render(LoadVideoTrimPanel, {
-    props,
-    global: {
-      plugins: [i18n]
-    }
-  })
-}
-
-describe('LoadVideoTrimPanel', () => {
-  it('shows upload empty state and hides trim controls when no video', () => {
-    renderPanel({
-      videoUrl: undefined
-    })
-
-    expect(screen.getByTestId('media-upload-empty')).toBeTruthy()
-    expect(screen.queryByText('Trim Video')).toBeNull()
-  })
-
-  it('shows trim controls when video is loaded', () => {
-    renderPanel({
-      videoUrl: 'https://example.com/video.mp4'
-    })
-
-    expect(screen.queryByTestId('media-upload-empty')).toBeNull()
-    expect(screen.getByText('Trim Video')).toBeTruthy()
-  })
-
-  it('keeps the filmstrip visible when trim is toggled off', () => {
-    renderPanel({
-      videoUrl: 'https://example.com/video.mp4',
-      trimEnabled: false
-    })
-
-    expect(screen.getByTestId('trim-track')).toBeTruthy()
-    expect(screen.queryByText('Start Frame')).toBeNull()
-    expect(screen.queryByText('End Frame')).toBeNull()
-  })
-
-  it('shows drag and drop empty state while not uploading', () => {
-    renderPanel({
-      videoUrl: undefined,
-      uploading: false
-    })
-
-    expect(screen.getByTestId('media-upload-browse-button')).toBeTruthy()
-    expect(screen.queryByText('Uploading…')).toBeNull()
-  })
-
-  it('shows uploading state only while an upload is in progress', () => {
-    renderPanel({
-      videoUrl: undefined,
-      uploading: true
-    })
-
-    expect(screen.queryByTestId('media-upload-browse-button')).toBeNull()
-    expect(screen.getByText('Uploading…')).toBeTruthy()
-  })
-
-  it('shows remove button and emits remove when clicked', async () => {
-    const user = userEvent.setup()
-    const { emitted } = renderPanel({
-      videoUrl: 'https://example.com/video.mp4'
-    })
-
-    const removeButton = screen.getByTestId('video-remove-button')
-    expect(removeButton).toBeTruthy()
-    expect(removeButton).toHaveAttribute('aria-label', 'Remove')
-
-    await user.click(removeButton)
-    expect(emitted().remove).toHaveLength(1)
-  })
-
-  it('activates remove from keyboard', async () => {
-    const user = userEvent.setup()
-    const { emitted } = renderPanel({
-      videoUrl: 'https://example.com/video.mp4'
-    })
-
-    const removeButton = screen.getByTestId('video-remove-button')
-    removeButton.focus()
-    await user.keyboard('{Enter}')
-
-    expect(emitted().remove).toHaveLength(1)
-  })
-
-  it('forwards browse event from empty state', async () => {
-    const user = userEvent.setup()
-    const { emitted } = renderPanel({
-      videoUrl: undefined
-    })
-
-    await user.click(screen.getByTestId('media-upload-browse-button'))
-
-    expect(emitted().browse).toHaveLength(1)
-  })
-
-  it('keeps playhead when trim edges move without collision', async () => {
-    const playheadFrame = ref(50)
-    const startFrame = ref(10)
-    const endFrame = ref(80)
-
-    const Host = defineComponent({
-      components: { LoadVideoTrimPanel },
-      setup() {
-        return {
-          playheadFrame,
-          startFrame,
-          endFrame,
-          trimEnabled: ref(true),
-          videoUrl: 'https://example.com/video.mp4'
-        }
-      },
-      template: `
-        <LoadVideoTrimPanel
-          v-model:playhead-frame="playheadFrame"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:trim-enabled="trimEnabled"
-          :video-url="videoUrl"
-        />
-      `
-    })
-
-    render(Host, { global: { plugins: [i18n] } })
-
-    startFrame.value = 20
-    await Promise.resolve()
-
-    expect(playheadFrame.value).toBe(50)
-  })
-
-  it('moves playhead when trim edge collides with it', async () => {
-    const playheadFrame = ref(50)
-    const startFrame = ref(10)
-    const endFrame = ref(80)
-
-    const Host = defineComponent({
-      components: { LoadVideoTrimPanel },
-      setup() {
-        return {
-          playheadFrame,
-          startFrame,
-          endFrame,
-          trimEnabled: ref(true),
-          videoUrl: 'https://example.com/video.mp4'
-        }
-      },
-      template: `
-        <LoadVideoTrimPanel
-          v-model:playhead-frame="playheadFrame"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:trim-enabled="trimEnabled"
-          :video-url="videoUrl"
-        />
-      `
-    })
-
-    render(Host, { global: { plugins: [i18n] } })
-
-    startFrame.value = 60
-    await Promise.resolve()
-
-    expect(playheadFrame.value).toBe(60)
-  })
-
-  it('moves playhead when start frame increment passes playhead', async () => {
-    const user = userEvent.setup()
-    const playheadFrame = ref(50)
-    const startFrame = ref(50)
-    const endFrame = ref(80)
-
-    const Host = defineComponent({
-      components: { LoadVideoTrimPanel },
-      setup() {
-        return {
-          playheadFrame,
-          startFrame,
-          endFrame,
-          trimEnabled: ref(true),
-          videoUrl: 'https://example.com/video.mp4'
-        }
-      },
-      template: `
-        <LoadVideoTrimPanel
-          v-model:playhead-frame="playheadFrame"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:trim-enabled="trimEnabled"
-          :video-url="videoUrl"
-        />
-      `
-    })
-
-    render(Host, { global: { plugins: [i18n] } })
-
-    await user.click(screen.getAllByTestId('increment')[0])
-
-    expect(startFrame.value).toBe(51)
-    expect(playheadFrame.value).toBe(51)
-  })
-
-  it('disables set start and end frame when trim handles are at defaults', () => {
-    renderPanel({
-      videoUrl: 'https://example.com/video.mp4',
-      trimEnabled: true,
-      startFrame: 0,
-      endFrame: 100,
-      playheadFrame: 0
-    })
-
-    expect(screen.getByLabelText('Set start frame')).toBeDisabled()
-    expect(screen.getByLabelText('Set end frame')).toBeDisabled()
-  })
-
-  it('disables set end frame when trim end is already at the last frame', () => {
-    renderPanel({
-      videoUrl: 'https://example.com/video.mp4',
-      trimEnabled: true,
-      startFrame: 10,
-      endFrame: 100,
-      playheadFrame: 50
-    })
-
-    expect(screen.getByLabelText('Set start frame')).not.toBeDisabled()
-    expect(screen.getByLabelText('Set end frame')).toBeDisabled()
-  })
-
-  it('resets the start trim handle to the first frame', async () => {
-    const user = userEvent.setup()
-    const startFrame = ref(10)
-    const endFrame = ref(100)
-    const playheadFrame = ref(50)
-
-    const Host = defineComponent({
-      components: { LoadVideoTrimPanel },
-      setup() {
-        return {
-          playheadFrame,
-          startFrame,
-          endFrame,
-          trimEnabled: ref(true),
-          videoUrl: 'https://example.com/video.mp4'
-        }
-      },
-      template: `
-        <LoadVideoTrimPanel
-          v-model:playhead-frame="playheadFrame"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:trim-enabled="trimEnabled"
-          :video-url="videoUrl"
-        />
-      `
-    })
-
-    render(Host, { global: { plugins: [i18n] } })
-
-    await user.click(screen.getByLabelText('Set start frame'))
-
-    expect(startFrame.value).toBe(0)
-    expect(playheadFrame.value).toBe(0)
-  })
-
-  it('resets the end trim handle to the last frame', async () => {
-    const user = userEvent.setup()
-    const startFrame = ref(10)
-    const endFrame = ref(80)
-    const playheadFrame = ref(50)
-
-    const Host = defineComponent({
-      components: { LoadVideoTrimPanel },
-      setup() {
-        return {
-          playheadFrame,
-          startFrame,
-          endFrame,
-          trimEnabled: ref(true),
-          videoUrl: 'https://example.com/video.mp4'
-        }
-      },
-      template: `
-        <LoadVideoTrimPanel
-          v-model:playhead-frame="playheadFrame"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:trim-enabled="trimEnabled"
-          :video-url="videoUrl"
-        />
-      `
-    })
-
-    render(Host, { global: { plugins: [i18n] } })
-
-    await user.click(screen.getByLabelText('Set end frame'))
-
-    expect(endFrame.value).toBe(100)
-    expect(playheadFrame.value).toBe(100)
-  })
-
-  it('seeks the video preview when scrubbing the filmstrip', async () => {
-    const playheadFrame = ref(0)
-    const startFrame = ref(0)
-    const endFrame = ref(100)
-
-    const Host = defineComponent({
-      components: { LoadVideoTrimPanel },
-      setup() {
-        return {
-          playheadFrame,
-          startFrame,
-          endFrame,
-          trimEnabled: ref(true),
-          videoUrl: 'https://example.com/video.mp4'
-        }
-      },
-      template: `
-        <LoadVideoTrimPanel
-          v-model:playhead-frame="playheadFrame"
-          v-model:start-frame="startFrame"
-          v-model:end-frame="endFrame"
-          v-model:trim-enabled="trimEnabled"
-          :video-url="videoUrl"
-        />
-      `
-    })
-
-    render(Host, { global: { plugins: [i18n] } })
-
-    const video = screen.getByTestId('video-preview') as HTMLVideoElement
-    let currentTime = 0
-    Object.defineProperty(video, 'currentTime', {
-      get: () => currentTime,
-      set: (value: number) => {
-        currentTime = value
-      },
-      configurable: true
-    })
-    Object.defineProperty(video, 'duration', {
-      value: 10,
-      configurable: true
-    })
-
-    await fireEvent.loadedMetadata(video)
-    await flushPromises()
-    await fireEvent.seeked(video)
-    await flushPromises()
-
-    const track = screen.getByTestId('trim-track')
-    vi.spyOn(track, 'getBoundingClientRect').mockReturnValue({
-      left: 0,
-      top: 0,
-      width: 200,
-      height: 64,
-      right: 200,
-      bottom: 64,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    })
-    track.setPointerCapture = vi.fn()
-
-    // eslint-disable-next-line testing-library/prefer-user-event -- pointer capture scrubbing needs low-level pointer events
-    await fireEvent.pointerDown(track, {
-      clientX: 100,
-      button: 0,
-      pointerId: 1
-    })
-    await flushPromises()
-    await fireEvent.seeked(video)
-    await flushPromises()
-
-    expect(playheadFrame.value).toBe(50)
-    expect(currentTime).toBe(5)
-  })
-})

src/components/video/LoadVideoTrimPanel.vue

@@ -1,501 +0,0 @@
-<template>
-  <div
-    class="flex flex-col gap-2"
-    :class="!videoUrl && 'min-h-0 flex-1 pb-3'"
-    @pointerdown.stop
-  >
-    <MediaUploadEmpty
-      v-if="!videoUrl"
-      fill
-      accept="video/*"
-      :disabled="uploadDisabled"
-      :uploading
-      :on-drag-over
-      :on-drag-drop
-      @browse="emit('browse')"
-    />
-    <div
-      v-else
-      data-testid="video-preview-container"
-      class="group relative w-full"
-      :style="videoAspectRatioStyle"
-    >
-      <div
-        class="relative size-full overflow-hidden rounded-lg bg-node-component-surface"
-      >
-        <video
-          ref="videoRef"
-          data-testid="video-preview"
-          :src="videoUrl"
-          class="size-full object-contain"
-          preload="auto"
-          muted
-          playsinline
-          @loadedmetadata="handleVideoMetadata"
-          @timeupdate="handleTimeUpdate"
-        />
-        <div
-          v-if="filmstripLoading"
-          class="absolute inset-0 flex flex-col items-center justify-center gap-0 bg-node-component-surface"
-          data-testid="video-preview-loading"
-          :aria-busy="true"
-          :aria-label="t('loadVideoTrim.loadingVideo')"
-        >
-          <Loader size="md" variant="loader-circle" />
-          <p class="text-sm text-muted-foreground">
-            {{ t('loadVideoTrim.loadingVideo') }}
-          </p>
-        </div>
-      </div>
-      <TooltipHint v-if="!filmstripLoading" :content="t('g.remove')">
-        <button
-          type="button"
-          data-testid="video-remove-button"
-          :class="
-            cn(
-              removeButtonClass,
-              'opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100'
-            )
-          "
-          :aria-label="t('g.remove')"
-          @pointerdown.stop
-          @click.stop="emit('remove')"
-        >
-          <i class="icon-[lucide--x] size-4" />
-        </button>
-      </TooltipHint>
-    </div>
-
-    <div
-      v-if="videoUrl"
-      class="grid grid-cols-[minmax(80px,min-content)_minmax(125px,1fr)] gap-1"
-    >
-      <WidgetToggleSwitch
-        v-model="trimEnabled"
-        class="col-span-full grid grid-cols-subgrid"
-        :widget="trimToggleWidget"
-      />
-
-      <VideoFilmstripTrim
-        v-model:start-frame="startFrame"
-        v-model:end-frame="endFrame"
-        v-model:playhead-frame="playheadFrame"
-        v-model:is-playing="isPlaying"
-        class="col-span-full mt-2"
-        :trim-enabled="trimEnabled"
-        :total-frames="effectiveTotalFrames"
-        :thumbnails="thumbnails"
-        @scrub="handleScrub"
-      />
-
-      <WidgetInputNumberInput
-        v-if="trimEnabled"
-        v-model="startFrame"
-        root-class="col-span-full grid grid-cols-subgrid items-center"
-        :widget="startFrameWidget"
-      />
-
-      <WidgetInputNumberInput
-        v-if="trimEnabled"
-        v-model="endFrame"
-        root-class="col-span-full grid grid-cols-subgrid items-center"
-        :widget="endFrameWidget"
-      />
-
-      <div v-if="trimEnabled" class="col-span-full grid grid-cols-2 gap-1">
-        <TooltipHint
-          :content="t('loadVideoTrim.setStartFrame')"
-          :disabled="setStartFrameDisabled"
-        >
-          <button
-            type="button"
-            :class="WidgetInputActionButtonClass"
-            :disabled="setStartFrameDisabled"
-            :aria-label="t('loadVideoTrim.setStartFrame')"
-            @click="setStartFrame"
-          >
-            <i class="icon-[lucide--skip-back] size-4" />
-          </button>
-        </TooltipHint>
-        <TooltipHint
-          :content="t('loadVideoTrim.setEndFrame')"
-          :disabled="setEndFrameDisabled"
-        >
-          <button
-            type="button"
-            :class="WidgetInputActionButtonClass"
-            :disabled="setEndFrameDisabled"
-            :aria-label="t('loadVideoTrim.setEndFrame')"
-            @click="setEndFrame"
-          >
-            <i class="icon-[lucide--skip-forward] size-4" />
-          </button>
-        </TooltipHint>
-      </div>
-
-      <div
-        class="col-span-full mt-2 grid grid-cols-subgrid gap-y-0.5 border-t border-node-stroke py-2"
-      >
-        <div
-          v-for="row in metadataRows"
-          :key="row.label"
-          class="col-span-full grid grid-cols-subgrid py-0.5 text-sm"
-        >
-          <span class="truncate text-muted-foreground">{{ row.label }}</span>
-          <span class="text-right text-base-foreground">{{ row.value }}</span>
-        </div>
-      </div>
-      <p
-        v-if="resolutionLabel"
-        class="col-span-full m-0 border-t border-node-stroke py-3 text-center text-sm text-base-foreground"
-      >
-        {{ resolutionLabel }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { clamp } from 'es-toolkit'
-import { computed, ref, useTemplateRef, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Loader from '@/components/loader/Loader.vue'
-import MediaUploadEmpty from '@/components/video/MediaUploadEmpty.vue'
-import VideoFilmstripTrim from '@/components/video/VideoFilmstripTrim.vue'
-import TooltipHint from '@/components/ui/tooltip/TooltipHint.vue'
-import { cn } from '@comfyorg/tailwind-utils'
-import {
-  DEFAULT_VIDEO_FPS,
-  useVideoFilmstrip
-} from '@/composables/video/useVideoFilmstrip'
-import { WidgetInputActionButtonClass } from '@/renderer/extensions/vueNodes/widgets/components/layout'
-import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue'
-import WidgetToggleSwitch from '@/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-const {
-  videoUrl,
-  uploading = false,
-  uploadDisabled = false,
-  onDragOver,
-  onDragDrop
-} = defineProps<{
-  videoUrl?: string
-  uploading?: boolean
-  uploadDisabled?: boolean
-  onDragOver?: (event: DragEvent) => boolean
-  onDragDrop?: (event: DragEvent) => boolean | Promise<boolean>
-}>()
-
-const emit = defineEmits<{
-  browse: []
-  remove: []
-}>()
-
-const removeButtonClass =
-  'absolute top-2 right-2 z-10 flex size-8 cursor-pointer items-center justify-center rounded-lg border-0 bg-base-foreground text-base-background shadow-interface transition-colors duration-200 hover:bg-base-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-transparent'
-
-const trimEnabled = defineModel<boolean>('trimEnabled', { default: false })
-const startFrame = defineModel<number>('startFrame', { default: 0 })
-const endFrame = defineModel<number>('endFrame', { default: 0 })
-const playheadFrame = defineModel<number>('playheadFrame', { default: 0 })
-
-const { t } = useI18n()
-const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
-const isPlaying = ref(false)
-const isSeeking = ref(false)
-const videoIntrinsicSize = ref<{ width: number; height: number } | null>(null)
-let activeSeekId = 0
-
-const videoUrlRef = computed(() => videoUrl)
-const {
-  thumbnails,
-  duration,
-  totalFrames,
-  width,
-  height,
-  fps,
-  fileSize,
-  loading: filmstripLoading
-} = useVideoFilmstrip(videoUrlRef)
-
-const effectiveTotalFrames = computed(() => Math.max(totalFrames.value, 1))
-
-const frameMax = computed(() => Math.max(totalFrames.value - 1, 0))
-
-const controlsDisabled = computed(() => !trimEnabled.value || !videoUrl)
-
-const setStartFrameDisabled = computed(
-  () => controlsDisabled.value || startFrame.value <= 0
-)
-
-const setEndFrameDisabled = computed(
-  () => controlsDisabled.value || endFrame.value >= frameMax.value
-)
-
-const trimToggleWidget = computed(
-  (): SimplifiedWidget<boolean> => ({
-    name: 'trim_enabled',
-    label: t('loadVideoTrim.trimVideo'),
-    type: 'toggle',
-    value: trimEnabled.value
-  })
-)
-
-const startFrameWidget = computed(
-  (): SimplifiedWidget<number> => ({
-    name: 'start_frame',
-    label: t('loadVideoTrim.startFrame'),
-    type: 'number',
-    value: startFrame.value,
-    options: {
-      min: 0,
-      max: Math.max(endFrame.value - 1, 0),
-      step: 1,
-      step2: 1,
-      precision: 0,
-      disabled: !videoUrl
-    }
-  })
-)
-
-const endFrameWidget = computed(
-  (): SimplifiedWidget<number> => ({
-    name: 'end_frame',
-    label: t('loadVideoTrim.endFrame'),
-    type: 'number',
-    value: endFrame.value,
-    options: {
-      min: Math.min(startFrame.value + 1, effectiveTotalFrames.value - 1),
-      max: Math.max(effectiveTotalFrames.value - 1, 0),
-      step: 1,
-      step2: 1,
-      precision: 0,
-      disabled: !videoUrl
-    }
-  })
-)
-
-const videoAspectRatioStyle = computed(() => {
-  const intrinsic = videoIntrinsicSize.value
-  const aspectWidth = width.value || intrinsic?.width
-  const aspectHeight = height.value || intrinsic?.height
-  if (aspectWidth && aspectHeight) {
-    return { aspectRatio: `${aspectWidth} / ${aspectHeight}` }
-  }
-  return { aspectRatio: '16 / 9' }
-})
-
-const metadataRows = computed(() => [
-  {
-    label: t('loadVideoTrim.duration'),
-    value: formatDuration(duration.value)
-  },
-  {
-    label: t('loadVideoTrim.frames'),
-    value: String(effectiveTotalFrames.value)
-  },
-  {
-    label: t('loadVideoTrim.fileSize'),
-    value: formatFileSize(fileSize.value)
-  }
-])
-
-const resolutionLabel = computed(() => {
-  const intrinsic = videoIntrinsicSize.value
-  const displayWidth = width.value || intrinsic?.width
-  const displayHeight = height.value || intrinsic?.height
-  if (!displayWidth || !displayHeight) return ''
-  return t('loadVideoTrim.resolution', {
-    width: displayWidth,
-    height: displayHeight
-  })
-})
-
-watch(
-  () => videoUrl,
-  () => {
-    startFrame.value = 0
-    playheadFrame.value = 0
-    endFrame.value = 0
-    isPlaying.value = false
-    videoIntrinsicSize.value = null
-  }
-)
-
-watch(
-  totalFrames,
-  (frames) => {
-    if (!videoUrl || frames <= 0) return
-    const lastFrame = Math.max(frames - 1, 0)
-    if (endFrame.value === 0 || endFrame.value > lastFrame) {
-      endFrame.value = lastFrame
-    }
-    playheadFrame.value = clamp(playheadFrame.value, 0, frameMax.value)
-  },
-  { immediate: true }
-)
-
-watch([startFrame, endFrame], ([start, end]) => {
-  if (start >= end && end > 0) {
-    startFrame.value = Math.max(end - 1, 0)
-  }
-  resolvePlayheadTrimCollision()
-})
-
-watch(isPlaying, (playing) => {
-  void handlePlaybackChange(playing)
-})
-
-async function handlePlaybackChange(playing: boolean) {
-  const video = videoRef.value
-  if (!video) return
-  if (playing) {
-    const startAt = trimEnabled.value
-      ? clamp(playheadFrame.value, startFrame.value, endFrame.value)
-      : clamp(playheadFrame.value, 0, frameMax.value)
-    await seekPreviewToFrame(startAt)
-    if (!isPlaying.value) return
-    try {
-      await video.play()
-    } catch {
-      isPlaying.value = false
-    }
-  } else {
-    video.pause()
-  }
-}
-
-function frameToTime(frame: number) {
-  if (duration.value > 0 && frameMax.value > 0) {
-    return (frame / frameMax.value) * duration.value
-  }
-  return frame / (fps.value || DEFAULT_VIDEO_FPS)
-}
-
-function clampSeekTime(video: HTMLVideoElement, time: number) {
-  if (!Number.isFinite(video.duration) || video.duration <= 0) {
-    return Math.max(time, 0)
-  }
-  return clamp(time, 0, Math.max(video.duration - 0.001, 0))
-}
-
-function waitForVideoSeek(video: HTMLVideoElement): Promise<void> {
-  return new Promise((resolve) => {
-    const finish = () => {
-      video.removeEventListener('seeked', finish)
-      video.removeEventListener('error', finish)
-      resolve()
-    }
-    video.addEventListener('seeked', finish, { once: true })
-    video.addEventListener('error', finish, { once: true })
-  })
-}
-
-async function seekPreviewToFrame(frame: number) {
-  const video = videoRef.value
-  if (!video) return
-
-  const clamped = clamp(frame, 0, frameMax.value)
-  playheadFrame.value = clamped
-
-  const targetTime = clampSeekTime(video, frameToTime(clamped))
-  if (Math.abs(video.currentTime - targetTime) <= 0.0001) return
-
-  const seekId = ++activeSeekId
-  isSeeking.value = true
-  video.currentTime = targetTime
-  await waitForVideoSeek(video)
-
-  if (seekId === activeSeekId) {
-    isSeeking.value = false
-  }
-}
-
-function resolvePlayheadTrimCollision() {
-  if (!trimEnabled.value) return
-
-  const start = startFrame.value
-  const end = endFrame.value
-  const previous = playheadFrame.value
-  if (previous < start) {
-    playheadFrame.value = start
-  } else if (previous > end) {
-    playheadFrame.value = end
-  }
-  if (!isPlaying.value && playheadFrame.value !== previous) {
-    void seekPreviewToFrame(playheadFrame.value)
-  }
-}
-
-function handleScrub(frame: number) {
-  isPlaying.value = false
-  void seekPreviewToFrame(frame)
-}
-
-function handleVideoMetadata() {
-  const video = videoRef.value
-  if (video?.videoWidth && video.videoHeight) {
-    videoIntrinsicSize.value = {
-      width: video.videoWidth,
-      height: video.videoHeight
-    }
-  }
-  void seekPreviewToFrame(playheadFrame.value)
-}
-
-function timeToFrame(time: number) {
-  if (duration.value > 0 && frameMax.value > 0) {
-    return Math.round((time / duration.value) * frameMax.value)
-  }
-  return Math.round(time * (fps.value || DEFAULT_VIDEO_FPS))
-}
-
-function handleTimeUpdate() {
-  const video = videoRef.value
-  if (!video || !isPlaying.value || isSeeking.value) return
-
-  const frame = timeToFrame(video.currentTime)
-  const minFrame = trimEnabled.value ? startFrame.value : 0
-  const maxFrame = trimEnabled.value ? endFrame.value : frameMax.value
-  playheadFrame.value = clamp(frame, minFrame, maxFrame)
-
-  if (frame >= maxFrame) {
-    isPlaying.value = false
-    void seekPreviewToFrame(maxFrame)
-  }
-}
-
-function setStartFrame() {
-  isPlaying.value = false
-  startFrame.value = 0
-  void seekPreviewToFrame(0)
-}
-
-function setEndFrame() {
-  isPlaying.value = false
-  endFrame.value = frameMax.value
-  void seekPreviewToFrame(frameMax.value)
-}
-
-function formatDuration(seconds: number) {
-  if (!seconds) return t('loadVideoTrim.durationZero')
-  return t('loadVideoTrim.durationSeconds', { count: Math.round(seconds) })
-}
-
-function formatFileSize(bytes?: number) {
-  if (bytes == null) return t('loadVideoTrim.fileSizeUnknown')
-  if (bytes < 1024) {
-    return t('loadVideoTrim.fileSizeBytes', { count: bytes })
-  }
-  if (bytes < 1024 * 1024) {
-    return t('loadVideoTrim.fileSizeKilobytes', {
-      count: Math.round(bytes / 1024)
-    })
-  }
-  return t('loadVideoTrim.fileSizeMegabytes', {
-    count: Number((bytes / (1024 * 1024)).toFixed(1))
-  })
-}
-</script>

src/components/video/MediaUploadEmpty.stories.ts

@@ -1,80 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import MediaUploadEmpty from './MediaUploadEmpty.vue'
-
-type StoryArgs = ComponentPropsAndSlots<typeof MediaUploadEmpty>
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Video/MediaUploadEmpty',
-  component: MediaUploadEmpty,
-  tags: ['autodocs'],
-  decorators: [
-    () => ({
-      template:
-        '<div class="w-[350px] rounded-2xl bg-node-component-surface p-2"><story /></div>'
-    })
-  ],
-  args: {
-    accept: 'video/*',
-    disabled: false,
-    uploading: false
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { MediaUploadEmpty },
-    setup() {
-      const uploading = ref(false)
-      function handleBrowse() {
-        uploading.value = true
-        setTimeout(() => {
-          uploading.value = false
-        }, 1200)
-      }
-      return { args, uploading, handleBrowse }
-    },
-    template: `
-      <MediaUploadEmpty
-        v-bind="args"
-        :uploading="uploading"
-        @browse="handleBrowse"
-      />
-    `
-  })
-}
-
-export const Uploading: Story = {
-  args: {
-    uploading: true
-  }
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true
-  }
-}
-
-export const Hovered: Story = {
-  render: (args) => ({
-    components: { MediaUploadEmpty },
-    setup() {
-      return { args }
-    },
-    template: `
-      <MediaUploadEmpty
-        v-bind="args"
-        class="border-component-node-foreground-secondary bg-component-node-widget-background-hovered"
-      />
-    `
-  })
-}

src/components/video/MediaUploadEmpty.test.ts

@@ -1,188 +0,0 @@
-import type { ComponentProps } from 'vue-component-type-helpers'
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { nextTick, ref, watch } from 'vue'
-import { createI18n } from 'vue-i18n'
-import { describe, expect, it, vi } from 'vitest'
-
-import MediaUploadEmpty from './MediaUploadEmpty.vue'
-
-vi.mock('@vueuse/core', async (importOriginal) => {
-  const actual = (await importOriginal()) as Record<string, unknown>
-
-  function useDropZone(
-    target: { value: HTMLElement | null | undefined },
-    options?:
-      | {
-          onDrop?: (files: File[] | null, event: DragEvent) => void
-          onOver?: (files: File[] | null, event: DragEvent) => void
-          onLeave?: (files: File[] | null, event: DragEvent) => void
-        }
-      | ((files: File[] | null, event: DragEvent) => void)
-  ) {
-    const isOverDropZone = ref(false)
-    const resolved =
-      typeof options === 'function' ? { onDrop: options } : options
-
-    watch(
-      () => target.value,
-      (element, _, onCleanup) => {
-        if (!element || !resolved) return
-        const callbacks = resolved
-
-        function onDragOver(event: DragEvent) {
-          event.preventDefault()
-          isOverDropZone.value = true
-          callbacks.onOver?.(Array.from(event.dataTransfer?.files ?? []), event)
-        }
-
-        function onDrop(event: DragEvent) {
-          event.preventDefault()
-          isOverDropZone.value = false
-          callbacks.onDrop?.(Array.from(event.dataTransfer?.files ?? []), event)
-        }
-
-        function onDragLeave(event: DragEvent) {
-          isOverDropZone.value = false
-          callbacks.onLeave?.(null, event)
-        }
-
-        element.addEventListener('dragover', onDragOver)
-        element.addEventListener('drop', onDrop)
-        element.addEventListener('dragleave', onDragLeave)
-        onCleanup(() => {
-          element.removeEventListener('dragover', onDragOver)
-          element.removeEventListener('drop', onDrop)
-          element.removeEventListener('dragleave', onDragLeave)
-        })
-      },
-      { immediate: true }
-    )
-
-    return { isOverDropZone }
-  }
-
-  return { ...actual, useDropZone }
-})
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      loadVideoTrim: {
-        dragAndDropVideos: 'Drag and drop videos here to upload',
-        uploadFromDevice: 'Upload from device',
-        uploading: 'Uploading…'
-      },
-      g: {
-        loading: 'Loading'
-      }
-    }
-  }
-})
-
-function dragPayload(files: File[] = []) {
-  return {
-    dataTransfer: {
-      files,
-      types: ['Files'],
-      items: files.map((file) => ({
-        kind: 'file',
-        type: file.type,
-        getAsFile: () => file
-      }))
-    }
-  }
-}
-
-async function renderEmpty(
-  props: Partial<ComponentProps<typeof MediaUploadEmpty>> = {}
-) {
-  const result = render(MediaUploadEmpty, {
-    props: {
-      accept: 'video/*',
-      ...props
-    },
-    global: {
-      plugins: [i18n]
-    }
-  })
-  await nextTick()
-  return result
-}
-
-async function simulateDrop(
-  target: HTMLElement,
-  payload: ReturnType<typeof dragPayload>
-) {
-  await fireEvent.dragOver(target, payload)
-  await fireEvent.drop(target, payload)
-}
-
-describe('MediaUploadEmpty', () => {
-  it('renders drag-drop prompt and upload button', async () => {
-    await renderEmpty()
-
-    expect(screen.getByText('Drag and drop videos here to upload')).toBeTruthy()
-    expect(screen.getByTestId('media-upload-browse-button')).toBeTruthy()
-    expect(screen.getByText('Upload from device')).toBeTruthy()
-  })
-
-  it('emits browse when upload button is clicked', async () => {
-    const user = userEvent.setup()
-    const { emitted } = await renderEmpty()
-
-    await user.click(screen.getByTestId('media-upload-browse-button'))
-
-    expect(emitted().browse).toHaveLength(1)
-  })
-
-  it('emits upload with video files on drop', async () => {
-    const { emitted } = await renderEmpty()
-    const zone = screen.getByTestId('media-upload-empty')
-    const file = new File(['video'], 'clip.mp4', { type: 'video/mp4' })
-
-    await simulateDrop(zone, dragPayload([file]))
-
-    expect(emitted().upload).toHaveLength(1)
-    expect((emitted().upload[0] as [File[]])[0][0].name).toBe('clip.mp4')
-  })
-
-  it('delegates drag events to provided handlers', async () => {
-    const onDragOver = vi.fn(() => true)
-    const onDragDrop = vi.fn(() => true)
-    await renderEmpty({ onDragOver, onDragDrop })
-    const zone = screen.getByTestId('media-upload-empty')
-
-    await simulateDrop(zone, dragPayload([]))
-
-    expect(onDragOver).toHaveBeenCalled()
-    expect(onDragDrop).toHaveBeenCalled()
-  })
-
-  it('does not emit browse when disabled', async () => {
-    const user = userEvent.setup()
-    const { emitted } = await renderEmpty({ disabled: true })
-
-    await user.click(screen.getByTestId('media-upload-browse-button'))
-
-    expect(emitted().browse).toBeUndefined()
-  })
-
-  it('shows uploading spinner and hides upload controls while processing', async () => {
-    await renderEmpty({
-      uploading: true
-    })
-
-    expect(screen.getByText('Uploading…')).toBeTruthy()
-    expect(screen.queryByText('Drag and drop videos here to upload')).toBeNull()
-    expect(screen.queryByTestId('media-upload-browse-button')).toBeNull()
-  })
-
-  it('does not emit browse while uploading', async () => {
-    await renderEmpty({ uploading: true })
-
-    expect(screen.queryByTestId('media-upload-browse-button')).toBeNull()
-  })
-})

src/components/video/MediaUploadEmpty.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { useDropZone } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Loader from '@/components/loader/Loader.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const {
-  accept = 'video/*',
-  disabled = false,
-  uploading = false,
-  fill = false,
-  onDragOver,
-  onDragDrop
-} = defineProps<{
-  accept?: string
-  disabled?: boolean
-  uploading?: boolean
-  fill?: boolean
-  onDragOver?: (event: DragEvent) => boolean
-  onDragDrop?: (event: DragEvent) => boolean | Promise<boolean>
-}>()
-
-const emit = defineEmits<{
-  browse: []
-  upload: [files: File[]]
-}>()
-
-const { t } = useI18n()
-
-const dropZoneRef = ref<HTMLElement | null>(null)
-const canAcceptDrop = ref(false)
-
-const isInteractionDisabled = computed(() => disabled || uploading)
-
-function matchesAccept(file: File) {
-  if (!accept || accept === '*/*') return true
-  return accept.split(',').some((pattern) => {
-    const trimmed = pattern.trim()
-    if (trimmed.endsWith('/*')) {
-      return file.type.startsWith(trimmed.slice(0, -1))
-    }
-    return file.type === trimmed
-  })
-}
-
-const { isOverDropZone } = useDropZone(dropZoneRef, {
-  onDrop: (files, event) => {
-    event?.stopPropagation()
-    if (isInteractionDisabled.value) return
-
-    if (onDragDrop && event) {
-      void Promise.resolve(onDragDrop(event)).catch(() => {})
-    } else {
-      const droppedFiles =
-        files && files.length > 0
-          ? files
-          : Array.from(event?.dataTransfer?.files ?? [])
-      const accepted = droppedFiles.filter(matchesAccept)
-      if (accepted.length) emit('upload', accepted)
-    }
-    canAcceptDrop.value = false
-  },
-  onOver: (_, event) => {
-    if (isInteractionDisabled.value) {
-      canAcceptDrop.value = false
-      return
-    }
-    if (onDragOver && event) {
-      canAcceptDrop.value = onDragOver(event)
-      return
-    }
-    const items = event?.dataTransfer?.items
-    canAcceptDrop.value = items
-      ? Array.from(items).some(
-          (item) => item.kind === 'file' && matchesAcceptType(item.type)
-        )
-      : false
-  },
-  onLeave: () => {
-    canAcceptDrop.value = false
-  }
-})
-
-function matchesAcceptType(type: string) {
-  if (!accept || accept === '*/*') return true
-  return accept.split(',').some((pattern) => {
-    const trimmed = pattern.trim()
-    if (trimmed.endsWith('/*')) {
-      return type.startsWith(trimmed.slice(0, -1))
-    }
-    return type === trimmed
-  })
-}
-
-const isHovered = computed(
-  () =>
-    !isInteractionDisabled.value && canAcceptDrop.value && isOverDropZone.value
-)
-
-function handleBrowseClick() {
-  if (isInteractionDisabled.value) return
-  emit('browse')
-}
-</script>
-
-<template>
-  <div
-    ref="dropZoneRef"
-    data-testid="media-upload-empty"
-    :class="
-      cn(
-        'flex min-h-75 w-full min-w-75 flex-col items-center justify-center gap-0 rounded-lg border border-dashed border-node-component-border bg-node-component-surface px-6 py-8 transition-colors',
-        fill && 'size-full flex-1',
-        isHovered &&
-          'border-component-node-foreground-secondary bg-component-node-widget-background-hovered'
-      )
-    "
-  >
-    <template v-if="uploading">
-      <Loader size="md" variant="loader-circle" />
-      <p class="text-sm text-muted-foreground">
-        {{ t('loadVideoTrim.uploading') }}
-      </p>
-    </template>
-    <template v-else>
-      <i
-        class="icon-[lucide--upload] size-8 text-muted-foreground"
-        aria-hidden="true"
-      />
-      <p class="max-w-48 text-center text-sm/snug text-muted-foreground">
-        {{ t('loadVideoTrim.dragAndDropVideos') }}
-      </p>
-      <Button
-        variant="inverted"
-        size="lg"
-        class="min-w-40"
-        :disabled="disabled"
-        data-testid="media-upload-browse-button"
-        @click="handleBrowseClick"
-      >
-        {{ t('loadVideoTrim.uploadFromDevice') }}
-      </Button>
-    </template>
-  </div>
-</template>

src/components/video/VideoFilmstripTrim.test.ts

@@ -1,367 +0,0 @@
-/* eslint-disable testing-library/prefer-user-event -- pointer capture scrubbing needs low-level pointer events */
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-import type { Ref } from 'vue'
-
-const { activeHandle } = vi.hoisted(() => {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const { ref: createRef } = require('vue')
-  return {
-    activeHandle: createRef(null) as Ref<'min' | 'max' | 'midpoint' | null>
-  }
-})
-
-vi.mock('@/composables/useRangeEditor', () => ({
-  useRangeEditor: () => ({
-    startDrag: vi.fn(),
-    activeHandle
-  })
-}))
-
-import type { ComponentProps } from 'vue-component-type-helpers'
-import { fireEvent, render, screen } from '@testing-library/vue'
-import { createI18n } from 'vue-i18n'
-
-import VideoFilmstripTrim from './VideoFilmstripTrim.vue'
-import { timelineInsetLeftStyle } from './timelineInsetStyle'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      loadVideoTrim: {
-        play: 'Play',
-        pause: 'Pause',
-        loadingFilmstrip: 'Loading filmstrip…',
-        adjustStartFrame: 'Adjust start frame',
-        adjustEndFrame: 'Adjust end frame'
-      }
-    }
-  }
-})
-
-type FilmstripProps = ComponentProps<typeof VideoFilmstripTrim>
-
-function expectedFrameAt(clientX: number, width = 200, frameMax = 100) {
-  const contentWidth = Math.max(width - 32, 1)
-  const norm = Math.min(Math.max((clientX - 16) / contentWidth, 0), 1)
-  return Math.round(norm * frameMax)
-}
-
-function renderFilmstrip(props: FilmstripProps) {
-  return render(VideoFilmstripTrim, {
-    props,
-    global: {
-      plugins: [i18n]
-    }
-  })
-}
-
-function mockTrackRect() {
-  const track = screen.getByTestId('trim-track')
-  vi.spyOn(track, 'getBoundingClientRect').mockReturnValue({
-    left: 0,
-    top: 0,
-    width: 200,
-    height: 64,
-    right: 200,
-    bottom: 64,
-    x: 0,
-    y: 0,
-    toJSON: () => ({})
-  })
-  return track
-}
-
-describe('VideoFilmstripTrim', () => {
-  beforeEach(() => {
-    activeHandle.value = null
-  })
-
-  it('insets the filmstrip track by handle width on each side', () => {
-    renderFilmstrip({
-      totalFrames: 100,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 0,
-      endFrame: 99,
-      playheadFrame: 0,
-      disabled: false
-    })
-
-    const filmstrip = screen.getByTestId('filmstrip-track')
-    expect(filmstrip.style.left).toBe('16px')
-    expect(filmstrip.style.right).toBe('16px')
-  })
-
-  it('prevents filmstrip thumbnails from being dragged', () => {
-    renderFilmstrip({
-      totalFrames: 100,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 0,
-      endFrame: 99,
-      playheadFrame: 0,
-      disabled: false
-    })
-
-    expect(
-      screen.getByTestId('filmstrip-thumbnail').getAttribute('draggable')
-    ).toBe('false')
-  })
-
-  it('shows whole frame number in tooltip while dragging end handle', () => {
-    activeHandle.value = 'max'
-    renderFilmstrip({
-      totalFrames: 401,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 0,
-      endFrame: 400,
-      playheadFrame: 0,
-      disabled: false
-    })
-
-    expect(screen.getByTestId('trim-handle-tooltip')).toHaveTextContent('400')
-    expect(timelineInsetLeftStyle(1).left).toBe(
-      'calc(1 * (100% - 2rem) + 1rem)'
-    )
-  })
-
-  it('shows whole frame number in tooltip while dragging start handle', () => {
-    activeHandle.value = 'min'
-    renderFilmstrip({
-      totalFrames: 401,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 120,
-      endFrame: 400,
-      playheadFrame: 120,
-      disabled: false
-    })
-
-    expect(screen.getByTestId('trim-handle-tooltip')).toHaveTextContent('120')
-    expect(timelineInsetLeftStyle(120 / 400).left).toBe(
-      'calc(0.3 * (100% - 2rem) + 1rem)'
-    )
-  })
-
-  it('positions the playhead on the timeline', () => {
-    renderFilmstrip({
-      totalFrames: 101,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 0,
-      endFrame: 100,
-      playheadFrame: 50,
-      disabled: false
-    })
-
-    expect(screen.getByTestId('playhead')).toBeTruthy()
-    expect(timelineInsetLeftStyle(50 / 100).left).toBe(
-      'calc(0.5 * (100% - 2rem) + 1rem)'
-    )
-  })
-
-  it('scrubs to the clicked frame on the filmstrip', async () => {
-    const playheadFrame = ref(0)
-    const { emitted } = render(VideoFilmstripTrim, {
-      props: {
-        totalFrames: 101,
-        thumbnails: ['data:image/jpeg;base64,one'],
-        startFrame: 0,
-        endFrame: 100,
-        playheadFrame: 0,
-        disabled: false,
-        'onUpdate:playheadFrame': (value: number) => {
-          playheadFrame.value = value
-        }
-      },
-      global: {
-        plugins: [i18n]
-      }
-    })
-
-    const track = mockTrackRect()
-
-    await fireEvent.pointerDown(track, { clientX: 100, button: 0 })
-
-    expect(playheadFrame.value).toBe(expectedFrameAt(100))
-    expect(emitted().scrub).toEqual([[expectedFrameAt(100)]])
-  })
-
-  it('clamps scrubbing to the trim selection when trim is enabled', async () => {
-    const playheadFrame = ref(50)
-    const { emitted } = render(VideoFilmstripTrim, {
-      props: {
-        totalFrames: 101,
-        thumbnails: ['data:image/jpeg;base64,one'],
-        startFrame: 10,
-        endFrame: 80,
-        playheadFrame: 50,
-        disabled: false,
-        'onUpdate:playheadFrame': (value: number) => {
-          playheadFrame.value = value
-        }
-      },
-      global: {
-        plugins: [i18n]
-      }
-    })
-
-    const track = mockTrackRect()
-
-    await fireEvent.pointerDown(track, { clientX: 20, button: 0 })
-
-    expect(playheadFrame.value).toBe(10)
-    expect(emitted().scrub).toEqual([[10]])
-
-    await fireEvent.pointerDown(track, { clientX: 180, button: 0 })
-
-    expect(playheadFrame.value).toBe(80)
-    expect(emitted().scrub).toEqual([[10], [80]])
-  })
-
-  it('updates playhead while dragging across the filmstrip', async () => {
-    const playheadFrame = ref(0)
-    const { emitted } = render(VideoFilmstripTrim, {
-      props: {
-        totalFrames: 101,
-        thumbnails: ['data:image/jpeg;base64,one'],
-        startFrame: 0,
-        endFrame: 100,
-        playheadFrame: 0,
-        disabled: false,
-        'onUpdate:playheadFrame': (value: number) => {
-          playheadFrame.value = value
-        }
-      },
-      global: {
-        plugins: [i18n]
-      }
-    })
-
-    const track = mockTrackRect()
-    track.setPointerCapture = vi.fn()
-
-    await fireEvent.pointerDown(track, { clientX: 40, button: 0, pointerId: 1 })
-    await fireEvent.pointerMove(track, {
-      clientX: 120,
-      button: 0,
-      pointerId: 1
-    })
-
-    expect(playheadFrame.value).toBe(expectedFrameAt(120))
-    expect(emitted().scrub).toEqual([
-      [expectedFrameAt(40)],
-      [expectedFrameAt(120)]
-    ])
-  })
-
-  it('shows the frame number in a tooltip while scrubbing', async () => {
-    const playheadFrame = ref(0)
-    render(VideoFilmstripTrim, {
-      props: {
-        totalFrames: 101,
-        thumbnails: ['data:image/jpeg;base64,one'],
-        startFrame: 0,
-        endFrame: 100,
-        playheadFrame: 0,
-        disabled: false,
-        'onUpdate:playheadFrame': (value: number) => {
-          playheadFrame.value = value
-        }
-      },
-      global: {
-        plugins: [i18n]
-      }
-    })
-
-    const track = mockTrackRect()
-    track.setPointerCapture = vi.fn()
-
-    expect(screen.queryByTestId('scrub-tooltip')).toBeNull()
-
-    await fireEvent.pointerDown(track, {
-      clientX: 120,
-      button: 0,
-      pointerId: 1
-    })
-
-    expect(screen.getByTestId('scrub-tooltip')).toHaveTextContent(
-      String(expectedFrameAt(120))
-    )
-
-    await fireEvent.pointerUp(track, { pointerId: 1 })
-
-    expect(screen.queryByTestId('scrub-tooltip')).toBeNull()
-  })
-
-  it('renders trim handles when enabled', () => {
-    renderFilmstrip({
-      totalFrames: 100,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 10,
-      endFrame: 80,
-      playheadFrame: 10,
-      disabled: false
-    })
-
-    expect(screen.getByTestId('handle-start')).toBeTruthy()
-    expect(screen.getByTestId('handle-end')).toBeTruthy()
-  })
-
-  it('hides trim handles when disabled', () => {
-    renderFilmstrip({
-      totalFrames: 100,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 10,
-      endFrame: 80,
-      playheadFrame: 10,
-      disabled: true
-    })
-
-    expect(screen.queryByTestId('handle-start')).toBeNull()
-    expect(screen.queryByTestId('handle-end')).toBeNull()
-  })
-
-  it('hides trim selection UI when trim is toggled off', () => {
-    renderFilmstrip({
-      totalFrames: 100,
-      thumbnails: ['data:image/jpeg;base64,one'],
-      startFrame: 10,
-      endFrame: 80,
-      playheadFrame: 10,
-      trimEnabled: false
-    })
-
-    expect(screen.getByTestId('playhead')).toBeTruthy()
-    expect(screen.getByTestId('filmstrip-track').style.left).toBe('16px')
-    expect(screen.getByTestId('filmstrip-track').style.right).toBe('16px')
-    expect(screen.queryByTestId('handle-start')).toBeNull()
-    expect(screen.queryByTestId('handle-end')).toBeNull()
-  })
-
-  it('scrubs across the full timeline when trim is toggled off', async () => {
-    const playheadFrame = ref(0)
-    const { emitted } = render(VideoFilmstripTrim, {
-      props: {
-        totalFrames: 101,
-        thumbnails: ['data:image/jpeg;base64,one'],
-        startFrame: 10,
-        endFrame: 80,
-        playheadFrame: 0,
-        trimEnabled: false,
-        'onUpdate:playheadFrame': (value: number) => {
-          playheadFrame.value = value
-        }
-      },
-      global: {
-        plugins: [i18n]
-      }
-    })
-
-    const track = mockTrackRect()
-
-    await fireEvent.pointerDown(track, { clientX: 100, button: 0 })
-
-    expect(playheadFrame.value).toBe(expectedFrameAt(100))
-    expect(emitted().scrub).toEqual([[expectedFrameAt(100)]])
-  })
-})

src/components/video/VideoFilmstripTrim.vue

@@ -1,365 +0,0 @@
-<template>
-  <div class="flex h-16 w-full items-stretch gap-px" @pointerdown.stop>
-    <button
-      type="button"
-      :class="
-        cn(
-          'flex w-14 shrink-0 items-center justify-center rounded-l-lg border-none bg-component-node-widget-background px-4 text-muted-foreground',
-          !disabled &&
-            'cursor-pointer hover:bg-component-node-widget-background-hovered',
-          disabled && 'cursor-default opacity-50'
-        )
-      "
-      :disabled="disabled"
-      :aria-label="
-        isPlaying ? t('loadVideoTrim.pause') : t('loadVideoTrim.play')
-      "
-      @click="togglePlay"
-    >
-      <i
-        :class="
-          cn(
-            isPlaying ? 'icon-[lucide--pause]' : 'icon-[lucide--play]',
-            !isPlaying && 'ml-0.5',
-            'size-5'
-          )
-        "
-      />
-    </button>
-
-    <div
-      ref="trackRef"
-      data-testid="trim-track"
-      :class="
-        cn(
-          'relative min-w-0 flex-1 rounded-r-lg bg-component-node-widget-background',
-          isDraggingTimeline ? 'cursor-ew-resize' : 'cursor-default'
-        )
-      "
-      @pointerdown.stop="startScrubDrag"
-      @contextmenu.prevent.stop
-    >
-      <div
-        v-if="isScrubDragging"
-        data-testid="scrub-tooltip"
-        class="pointer-events-none absolute bottom-full z-30 mb-1 flex -translate-x-1/2 flex-col items-center"
-        :style="playheadStyle"
-      >
-        <span
-          class="rounded-lg bg-interface-menu-surface px-2.5 py-1 text-sm font-semibold text-base-foreground tabular-nums"
-        >
-          {{ playheadFrame }}
-        </span>
-        <span
-          class="size-0 border-x-[5px] border-t-[5px] border-x-transparent border-t-interface-menu-surface"
-        />
-      </div>
-
-      <div
-        v-if="trimEnabled && (activeHandle === 'min' || activeHandle === 'max')"
-        data-testid="trim-handle-tooltip"
-        class="pointer-events-none absolute bottom-full z-10 mb-1 flex -translate-x-1/2 flex-col items-center"
-        :style="activeHandleTooltipStyle"
-      >
-        <span
-          class="rounded-lg bg-interface-menu-surface px-2.5 py-1 text-sm font-semibold text-base-foreground tabular-nums"
-        >
-          {{ activeHandleFrame }}
-        </span>
-        <span
-          class="size-0 border-x-[5px] border-t-[5px] border-x-transparent border-t-interface-menu-surface"
-        />
-      </div>
-
-      <div
-        data-testid="filmstrip-track"
-        class="pointer-events-none absolute top-2 flex h-12 items-stretch overflow-hidden"
-        :style="{
-          left: `${HANDLE_WIDTH_PX}px`,
-          right: `${HANDLE_WIDTH_PX}px`
-        }"
-        aria-hidden="true"
-      >
-        <img
-          v-for="(thumbnail, index) in thumbnails"
-          :key="index"
-          data-testid="filmstrip-thumbnail"
-          :src="thumbnail"
-          alt=""
-          draggable="false"
-          class="h-full w-auto shrink-0 select-none"
-        />
-        <div
-          v-if="isFilmstripLoading"
-          class="flex size-full items-stretch gap-px overflow-hidden"
-          data-testid="filmstrip-skeleton"
-          :aria-busy="true"
-          :aria-label="t('loadVideoTrim.loadingFilmstrip')"
-        >
-          <Skeleton
-            v-for="index in FILMSTRIP_SAMPLE_COUNT"
-            :key="index"
-            class="h-full min-w-10 flex-1 rounded-none"
-          />
-        </div>
-      </div>
-
-      <div
-        v-if="trimEnabled && startNorm > 0"
-        class="pointer-events-none absolute inset-y-0 left-0 bg-black/50"
-        :style="leftDimStyle"
-      />
-      <div
-        v-if="trimEnabled && endNorm < 1"
-        class="pointer-events-none absolute inset-y-0 right-0 bg-black/50"
-        :style="rightDimStyle"
-      />
-
-      <div
-        v-if="trimEnabled"
-        class="pointer-events-none absolute inset-y-0 flex"
-        :style="selectionStyle"
-      >
-        <button
-          v-if="!disabled && totalFrames > 1"
-          type="button"
-          data-testid="handle-start"
-          :class="
-            cn(
-              'pointer-events-auto flex w-4 shrink-0 cursor-ew-resize',
-              'items-center justify-center bg-video-trim-selection-background',
-              'rounded-l-lg border-none p-0'
-            )
-          "
-          :aria-label="t('loadVideoTrim.adjustStartFrame')"
-          @pointerdown.stop="startDrag('min', $event)"
-        >
-          <span class="h-4 w-px rounded-full bg-secondary-background" />
-        </button>
-
-        <div class="flex min-w-0 flex-1 flex-col">
-          <div :class="cn('h-2 shrink-0', trimSelectionBarClass)" />
-          <div class="h-12 shrink-0" />
-          <div :class="cn('h-2 shrink-0', trimSelectionBarClass)" />
-        </div>
-
-        <button
-          v-if="!disabled && totalFrames > 1"
-          type="button"
-          data-testid="handle-end"
-          :class="
-            cn(
-              'pointer-events-auto flex w-4 shrink-0 cursor-ew-resize',
-              'items-center justify-center bg-video-trim-selection-background',
-              'rounded-r-lg border-none p-0'
-            )
-          "
-          :aria-label="t('loadVideoTrim.adjustEndFrame')"
-          @pointerdown.stop="startDrag('max', $event)"
-        >
-          <span class="h-4 w-px rounded-full bg-secondary-background" />
-        </button>
-      </div>
-
-      <div
-        data-testid="playhead"
-        class="absolute top-2 z-20 flex h-12 w-3 -translate-x-1/2 cursor-ew-resize touch-none items-stretch justify-center"
-        :style="playheadStyle"
-        @pointerdown.stop="startScrubDrag"
-      >
-        <div
-          class="pointer-events-none w-0.5 bg-video-trim-playhead-background"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref, toRef, useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { clamp } from 'es-toolkit'
-
-import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
-import { timelineInsetLeftStyle } from '@/components/video/timelineInsetStyle'
-import { FILMSTRIP_SAMPLE_COUNT } from '@/composables/video/useVideoFilmstrip'
-import { useRangeEditor } from '@/composables/useRangeEditor'
-import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
-import { denormalize } from '@/utils/mathUtil'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const HANDLE_WIDTH_PX = 16
-
-const {
-  totalFrames,
-  thumbnails,
-  disabled = false,
-  trimEnabled = true
-} = defineProps<{
-  totalFrames: number
-  thumbnails: string[]
-  disabled?: boolean
-  trimEnabled?: boolean
-}>()
-
-const startFrame = defineModel<number>('startFrame', { required: true })
-const endFrame = defineModel<number>('endFrame', { required: true })
-const playheadFrame = defineModel<number>('playheadFrame', { required: true })
-const isPlaying = defineModel<boolean>('isPlaying', { default: false })
-
-const emit = defineEmits<{
-  scrub: [frame: number]
-}>()
-
-const { t } = useI18n()
-
-const trackRef = useTemplateRef<HTMLDivElement>('trackRef')
-const isScrubDragging = ref(false)
-const frameMax = computed(() => Math.max(totalFrames - 1, 0))
-
-const rangeValue = computed<RangeValue>({
-  get: () => ({
-    min: startFrame.value,
-    max: endFrame.value
-  }),
-  set: (value) => {
-    startFrame.value = Math.round(value.min)
-    endFrame.value = Math.round(value.max)
-  }
-})
-
-const contentInsetX = computed(() => HANDLE_WIDTH_PX)
-
-const { startDrag, activeHandle } = useRangeEditor({
-  trackRef,
-  modelValue: rangeValue,
-  valueMin: toRef(() => 0),
-  valueMax: frameMax,
-  showMidpoint: toRef(() => false),
-  contentInsetX
-})
-
-const isDraggingTimeline = computed(
-  () => isScrubDragging.value || activeHandle.value !== null
-)
-
-const isFilmstripLoading = computed(() => thumbnails.length === 0)
-
-const trimSelectionBarClass = computed(() =>
-  isFilmstripLoading.value
-    ? 'bg-component-node-widget-background'
-    : 'bg-video-trim-selection-background'
-)
-
-function pointerToFrame(event: PointerEvent) {
-  const el = trackRef.value
-  if (!el) return playheadFrame.value
-  const rect = el.getBoundingClientRect()
-  const inset = HANDLE_WIDTH_PX
-  const contentWidth = Math.max(rect.width - 2 * inset, 1)
-  const normalized = clamp(
-    (event.clientX - rect.left - inset) / contentWidth,
-    0,
-    1
-  )
-  return Math.round(denormalize(normalized, 0, frameMax.value))
-}
-
-const scrubFrameMin = computed(() => (trimEnabled ? startFrame.value : 0))
-const scrubFrameMax = computed(() =>
-  trimEnabled ? endFrame.value : frameMax.value
-)
-
-function scrubToFrame(frame: number) {
-  const clamped = clamp(frame, scrubFrameMin.value, scrubFrameMax.value)
-  playheadFrame.value = clamped
-  emit('scrub', clamped)
-}
-
-function updateScrubFromPointer(event: PointerEvent) {
-  const frame = pointerToFrame(event)
-  if (frame === playheadFrame.value) return
-  scrubToFrame(frame)
-}
-
-let cleanupScrubDrag: (() => void) | null = null
-
-function startScrubDrag(event: PointerEvent) {
-  if (disabled || totalFrames <= 1 || event.button !== 0) return
-
-  const el = trackRef.value
-  if (!el) return
-
-  cleanupScrubDrag?.()
-
-  isScrubDragging.value = true
-  scrubToFrame(pointerToFrame(event))
-  el.setPointerCapture(event.pointerId)
-
-  const onMove = (moveEvent: PointerEvent) => {
-    updateScrubFromPointer(moveEvent)
-  }
-
-  const endDrag = () => {
-    isScrubDragging.value = false
-    el.removeEventListener('pointermove', onMove)
-    el.removeEventListener('pointerup', endDrag)
-    el.removeEventListener('lostpointercapture', endDrag)
-    cleanupScrubDrag = null
-  }
-
-  cleanupScrubDrag = endDrag
-
-  el.addEventListener('pointermove', onMove)
-  el.addEventListener('pointerup', endDrag)
-  el.addEventListener('lostpointercapture', endDrag)
-}
-
-onBeforeUnmount(() => {
-  isScrubDragging.value = false
-  cleanupScrubDrag?.()
-})
-
-const startNorm = computed(() =>
-  frameMax.value <= 0 ? 0 : startFrame.value / frameMax.value
-)
-const endNorm = computed(() =>
-  frameMax.value <= 0 ? 1 : endFrame.value / frameMax.value
-)
-
-const playheadNorm = computed(() =>
-  frameMax.value <= 0 ? 0 : playheadFrame.value / frameMax.value
-)
-
-const playheadStyle = computed(() => timelineInsetLeftStyle(playheadNorm.value))
-
-const leftDimStyle = computed(() => ({
-  width: `calc(${startNorm.value} * (100% - 2rem))`
-}))
-
-const rightDimStyle = computed(() => ({
-  width: `calc(${1 - endNorm.value} * (100% - 2rem))`
-}))
-
-const selectionStyle = computed(() => ({
-  left: `calc(${startNorm.value} * (100% - 2rem))`,
-  width: `calc((${endNorm.value} - ${startNorm.value}) * (100% - 2rem) + 2rem)`
-}))
-
-const activeHandleFrame = computed(() => {
-  if (activeHandle.value === 'min') return startFrame.value
-  if (activeHandle.value === 'max') return endFrame.value
-  return 0
-})
-
-const activeHandleTooltipStyle = computed(() => {
-  const norm = activeHandle.value === 'min' ? startNorm.value : endNorm.value
-  return timelineInsetLeftStyle(norm)
-})
-
-function togglePlay() {
-  if (disabled) return
-  isPlaying.value = !isPlaying.value
-}
-</script>

src/components/video/timelineInsetStyle.ts

@@ -1,5 +0,0 @@
-export function timelineInsetLeftStyle(normalized: number) {
-  return {
-    left: `calc(${normalized} * (100% - 2rem) + 1rem)`
-  }
-}

src/composables/useLoad3d.ts

@@ -177,6 +177,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
   const canExport = ref(true)
   const materialModes = ref<readonly MaterialMode[]>([
     'original',
+    'clay',
     'normal',
     'wireframe'
   ])

src/composables/useRangeEditor.test.ts

@@ -50,7 +50,6 @@ interface HarnessOptions {
   valueMax?: number
   showMidpoint?: boolean
   track?: HTMLElement | null
-  contentInsetX?: number
 }
 
 interface Harness {
@@ -73,7 +72,6 @@ const mountRangeEditor = (opts: HarnessOptions = {}): Harness => {
   const valueMin = ref(opts.valueMin ?? 0)
   const valueMax = ref(opts.valueMax ?? 100)
   const showMidpoint = ref(opts.showMidpoint ?? true)
-  const contentInsetX = ref(opts.contentInsetX ?? 0)
 
   let api: ReturnType<typeof useRangeEditor> | undefined
   const TestComponent = defineComponent({
@@ -83,8 +81,7 @@ const mountRangeEditor = (opts: HarnessOptions = {}): Harness => {
         modelValue,
         valueMin,
         valueMax,
-        showMidpoint,
-        contentInsetX
+        showMidpoint
       })
       return () => null
     }
@@ -326,44 +323,4 @@ describe('useRangeEditor', () => {
       expect.arrayContaining(['pointermove', 'pointerup', 'lostpointercapture'])
     )
   })
-
-  it('maps pointer at content inset to valueMin when contentInsetX is set', () => {
-    harness = mountRangeEditor({
-      initial: { min: 20, max: 80, midpoint: 0.5 },
-      valueMin: 0,
-      valueMax: 100,
-      showMidpoint: false,
-      contentInsetX: 16
-    })
-
-    harness.api.startDrag(
-      'min',
-      createPointerEvent('pointerdown', { clientX: 16 })
-    )
-    harness.trackRef.value!.dispatchEvent(
-      createPointerEvent('pointermove', { clientX: 16 })
-    )
-
-    expect(harness.modelValue.value.min).toBe(0)
-  })
-
-  it('maps pointer at right content inset to valueMax when contentInsetX is set', () => {
-    harness = mountRangeEditor({
-      initial: { min: 0, max: 80, midpoint: 0.5 },
-      valueMin: 0,
-      valueMax: 100,
-      showMidpoint: false,
-      contentInsetX: 16
-    })
-
-    harness.api.startDrag(
-      'max',
-      createPointerEvent('pointerdown', { clientX: 184 })
-    )
-    harness.trackRef.value!.dispatchEvent(
-      createPointerEvent('pointermove', { clientX: 184 })
-    )
-
-    expect(harness.modelValue.value.max).toBe(100)
-  })
 })

src/composables/useRangeEditor.ts

@@ -14,7 +14,6 @@ interface UseRangeEditorOptions {
   valueMin: Ref<number>
   valueMax: Ref<number>
   showMidpoint: Ref<boolean>
-  contentInsetX?: Ref<number>
 }
 
 export function useRangeEditor({
@@ -22,8 +21,7 @@ export function useRangeEditor({
   modelValue,
   valueMin,
   valueMax,
-  showMidpoint,
-  contentInsetX
+  showMidpoint
 }: UseRangeEditorOptions) {
   const activeHandle = ref<HandleType | null>(null)
   let cleanupDrag: (() => void) | null = null
@@ -32,13 +30,7 @@ export function useRangeEditor({
     const el = trackRef.value
     if (!el) return valueMin.value
     const rect = el.getBoundingClientRect()
-    const inset = contentInsetX?.value ?? 0
-    const contentWidth = Math.max(rect.width - 2 * inset, 1)
-    const normalized = clamp(
-      (e.clientX - rect.left - inset) / contentWidth,
-      0,
-      1
-    )
+    const normalized = clamp((e.clientX - rect.left) / rect.width, 0, 1)
     return denormalize(normalized, valueMin.value, valueMax.value)
   }
 
@@ -116,7 +108,6 @@ export function useRangeEditor({
 
   return {
     handleTrackPointerDown,
-    startDrag,
-    activeHandle
+    startDrag
   }
 }

src/composables/video/probeVideoFrameRate.test.ts

@@ -1,75 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { parseMp4AverageFrameRate } from './probeVideoFrameRate'
-
-function writeUint32(value: number): Uint8Array {
-  const bytes = new Uint8Array(4)
-  new DataView(bytes.buffer).setUint32(0, value)
-  return bytes
-}
-
-function writeBox(type: string, content: Uint8Array): Uint8Array {
-  const box = new Uint8Array(8 + content.length)
-  box.set(writeUint32(8 + content.length), 0)
-  for (let index = 0; index < 4; index++) {
-    box[4 + index] = type.charCodeAt(index)
-  }
-  box.set(content, 8)
-  return box
-}
-
-function concatBoxes(...boxes: Uint8Array[]): Uint8Array {
-  const totalLength = boxes.reduce((sum, box) => sum + box.length, 0)
-  const merged = new Uint8Array(totalLength)
-  let offset = 0
-  for (const box of boxes) {
-    merged.set(box, offset)
-    offset += box.length
-  }
-  return merged
-}
-
-function createVideoTrackBox(
-  sampleCount: number,
-  timescale: number
-): Uint8Array {
-  const handler = writeBox(
-    'hdlr',
-    concatBoxes(
-      writeUint32(0),
-      writeUint32(0),
-      new Uint8Array([0x76, 0x69, 0x64, 0x65])
-    )
-  )
-  const mediaHeader = writeBox(
-    'mdhd',
-    concatBoxes(
-      writeUint32(0),
-      writeUint32(0),
-      writeUint32(0),
-      writeUint32(timescale),
-      writeUint32(timescale * 10)
-    )
-  )
-  const sampleSizes = writeBox(
-    'stsz',
-    concatBoxes(writeUint32(0), writeUint32(0), writeUint32(sampleCount))
-  )
-  const media = writeBox('mdia', concatBoxes(mediaHeader, sampleSizes, handler))
-  return writeBox('trak', concatBoxes(media))
-}
-
-describe('parseMp4AverageFrameRate', () => {
-  it('derives average frame rate from video track sample count and duration', () => {
-    const moov = writeBox('moov', createVideoTrackBox(240, 24))
-    const data = concatBoxes(moov)
-
-    expect(parseMp4AverageFrameRate(data, 10)).toBe(24)
-  })
-
-  it('returns undefined when moov metadata is missing', () => {
-    expect(parseMp4AverageFrameRate(new Uint8Array([0, 0, 0, 0]), 10)).toBe(
-      undefined
-    )
-  })
-})

src/composables/video/probeVideoFrameRate.ts

@@ -1,198 +0,0 @@
-import { fetchHttpResourceByteSize } from '@/utils/httpResourceByteSize'
-
-const PROBE_CHUNK_BYTES = 512 * 1024
-const MAX_FRAME_RATE = 240
-
-interface BoxRange {
-  type: string
-  start: number
-  end: number
-}
-
-function readUint32(data: Uint8Array, offset: number): number {
-  if (offset + 4 > data.length) return 0
-  const view = new DataView(data.buffer, data.byteOffset, data.byteLength)
-  return view.getUint32(offset)
-}
-
-function readBoxType(data: Uint8Array, offset: number): string {
-  if (offset + 4 > data.length) return ''
-  return String.fromCharCode(
-    data[offset],
-    data[offset + 1],
-    data[offset + 2],
-    data[offset + 3]
-  )
-}
-
-function* iterateBoxes(
-  data: Uint8Array,
-  start: number,
-  end: number
-): Generator<BoxRange> {
-  let pos = start
-
-  while (pos + 8 <= end) {
-    let size = readUint32(data, pos)
-    const type = readBoxType(data, pos + 4)
-    let headerSize = 8
-
-    if (size === 1) {
-      if (pos + 16 > end) return
-      const view = new DataView(data.buffer, data.byteOffset, data.byteLength)
-      size = Number(view.getBigUint64(pos + 8))
-      headerSize = 16
-    }
-
-    if (size < headerSize) return
-
-    const boxEnd = pos + size
-    if (boxEnd > end) return
-
-    yield { type, start: pos + headerSize, end: boxEnd }
-    pos = boxEnd
-  }
-}
-
-function findBox(
-  data: Uint8Array,
-  start: number,
-  end: number,
-  type: string
-): BoxRange | undefined {
-  for (const box of iterateBoxes(data, start, end)) {
-    if (box.type === type) return box
-  }
-  return undefined
-}
-
-function findBoxDeep(
-  data: Uint8Array,
-  root: BoxRange,
-  type: string
-): BoxRange | undefined {
-  const direct = findBox(data, root.start, root.end, type)
-  if (direct) return direct
-
-  for (const child of iterateBoxes(data, root.start, root.end)) {
-    const nested = findBoxDeep(data, child, type)
-    if (nested) return nested
-  }
-
-  return undefined
-}
-
-function isVideoTrack(data: Uint8Array, trak: BoxRange): boolean {
-  const handler = findBoxDeep(data, trak, 'hdlr')
-  if (!handler || handler.start + 12 > handler.end) return false
-  return readBoxType(data, handler.start + 8) === 'vide'
-}
-
-function readUint64(data: Uint8Array, offset: number): number {
-  if (offset + 8 > data.length) return 0
-  const view = new DataView(data.buffer, data.byteOffset, data.byteLength)
-  return Number(view.getBigUint64(offset))
-}
-
-function frameRateFromTrack(
-  data: Uint8Array,
-  trak: BoxRange,
-  durationSeconds: number
-): number | undefined {
-  const mediaHeader = findBoxDeep(data, trak, 'mdhd')
-  const sampleSizes = findBoxDeep(data, trak, 'stsz')
-  if (!mediaHeader || !sampleSizes) return undefined
-
-  const version = data[mediaHeader.start]
-  let timescale: number
-  let mediaDurationTicks: number
-
-  if (version === 1) {
-    timescale = readUint32(data, mediaHeader.start + 20)
-    mediaDurationTicks = readUint64(data, mediaHeader.start + 24)
-  } else {
-    timescale = readUint32(data, mediaHeader.start + 12)
-    mediaDurationTicks = readUint32(data, mediaHeader.start + 16)
-  }
-
-  const sampleCount = readUint32(data, sampleSizes.start + 8)
-
-  if (timescale <= 0 || sampleCount <= 0) return undefined
-
-  const trackDurationSeconds =
-    mediaDurationTicks > 0 ? mediaDurationTicks / timescale : durationSeconds
-  const duration =
-    trackDurationSeconds > 0 ? trackDurationSeconds : durationSeconds
-  if (duration <= 0) return undefined
-
-  const frameRate = sampleCount / duration
-  if (frameRate <= 0 || frameRate > MAX_FRAME_RATE) return undefined
-
-  return frameRate
-}
-
-export function parseMp4AverageFrameRate(
-  data: Uint8Array,
-  durationSeconds: number
-): number | undefined {
-  if (durationSeconds <= 0) return undefined
-
-  const movie = findBox(data, 0, data.length, 'moov')
-  if (!movie) return undefined
-
-  for (const track of iterateBoxes(data, movie.start, movie.end)) {
-    if (track.type !== 'trak' || !isVideoTrack(data, track)) continue
-
-    const frameRate = frameRateFromTrack(data, track, durationSeconds)
-    if (frameRate != null) return frameRate
-  }
-
-  return undefined
-}
-
-async function fetchRange(
-  url: string,
-  start: number,
-  end: number
-): Promise<ArrayBuffer | undefined> {
-  try {
-    const response = await fetch(url, {
-      headers: { Range: `bytes=${start}-${end}` }
-    })
-    if (response.status !== 206) return undefined
-    return await response.arrayBuffer()
-  } catch {
-    return undefined
-  }
-}
-
-export async function probeVideoFrameRate(
-  url: string,
-  durationSeconds: number,
-  byteSize?: number
-): Promise<number | undefined> {
-  if (durationSeconds <= 0) return undefined
-
-  const resolvedByteSize = byteSize ?? (await fetchHttpResourceByteSize(url))
-  const chunks: Uint8Array[] = []
-
-  const leading = await fetchRange(url, 0, PROBE_CHUNK_BYTES - 1)
-  if (leading) chunks.push(new Uint8Array(leading))
-
-  if (resolvedByteSize != null && resolvedByteSize > PROBE_CHUNK_BYTES) {
-    const trailingStart = Math.max(0, resolvedByteSize - PROBE_CHUNK_BYTES)
-    const trailing = await fetchRange(
-      url,
-      trailingStart,
-      Math.max(trailingStart, resolvedByteSize - 1)
-    )
-    if (trailing) chunks.push(new Uint8Array(trailing))
-  }
-
-  for (const chunk of chunks) {
-    const frameRate = parseMp4AverageFrameRate(chunk, durationSeconds)
-    if (frameRate != null) return frameRate
-  }
-
-  return undefined
-}

src/composables/video/useLoadVideoPreview.test.ts

@@ -1,91 +0,0 @@
-import { computed } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
-
-import {
-  useLoadVideoPreview,
-  nodeHasLoadVideoPreview
-} from './useLoadVideoPreview'
-
-const { getNodeImageUrlsMock } = vi.hoisted(() => ({
-  getNodeImageUrlsMock: vi.fn<(node: unknown) => string[] | undefined>(
-    () => undefined
-  )
-}))
-
-vi.mock('@/stores/nodeOutputStore', () => ({
-  useNodeOutputStore: () => ({
-    nodeOutputs: {},
-    getNodeImageUrls: getNodeImageUrlsMock
-  })
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    getPreviewFormatParam: () => ''
-  }
-}))
-
-vi.mock('@/scripts/api', () => ({
-  api: {
-    apiURL: (path: string) => `https://example.test${path}`
-  }
-}))
-
-describe('useLoadVideoPreview', () => {
-  it('falls back to the file widget value when node outputs are unavailable', () => {
-    getNodeImageUrlsMock.mockReturnValue(undefined)
-
-    const node = computed(() => ({
-      widgets: [{ name: 'file', value: 'clip.mp4' }]
-    }))
-
-    const { videoUrl } = useLoadVideoPreview(node as never)
-
-    expect(videoUrl.value).toBe(
-      'https://example.test/view?filename=clip.mp4&subfolder=&type=input'
-    )
-  })
-
-  it('prefers node output preview urls over the file widget fallback', () => {
-    getNodeImageUrlsMock.mockReturnValue([
-      'https://example.test/view?filename=from-output.mp4'
-    ])
-
-    const node = computed(() => ({
-      widgets: [{ name: 'file', value: 'clip.mp4' }]
-    }))
-
-    const { videoUrl } = useLoadVideoPreview(node as never)
-
-    expect(videoUrl.value).toBe(
-      'https://example.test/view?filename=from-output.mp4'
-    )
-  })
-
-  it('detects preview availability from the file widget fallback', () => {
-    getNodeImageUrlsMock.mockReturnValue(undefined)
-
-    expect(
-      nodeHasLoadVideoPreview({
-        widgets: [{ name: 'file', value: 'clip.mp4' }]
-      } as never)
-    ).toBe(true)
-  })
-
-  it('ignores remote widget placeholder values', () => {
-    getNodeImageUrlsMock.mockReturnValue(undefined)
-
-    const node = computed(() => ({
-      widgets: [{ name: 'file', value: 'Loading...' }]
-    }))
-
-    const { videoUrl } = useLoadVideoPreview(node as never)
-
-    expect(videoUrl.value).toBeUndefined()
-    expect(
-      nodeHasLoadVideoPreview({
-        widgets: [{ name: 'file', value: 'Loading...' }]
-      } as never)
-    ).toBe(false)
-  })
-})

src/composables/video/useLoadVideoPreview.ts

@@ -1,75 +0,0 @@
-import { computed } from 'vue'
-import type { ComputedRef } from 'vue'
-
-import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { widgetId } from '@/types/widgetId'
-import { parseImageWidgetValue } from '@/utils/imageUtil'
-
-const REMOTE_WIDGET_PLACEHOLDER = 'Loading...'
-
-function isResolvableFileWidgetValue(raw: unknown): raw is string {
-  if (typeof raw !== 'string' || !raw || raw === REMOTE_WIDGET_PLACEHOLDER) {
-    return false
-  }
-
-  const { filename } = parseImageWidgetValue(raw)
-  return Boolean(filename)
-}
-
-function resolveVideoUrlFromFileWidget(node: LGraphNode): string | undefined {
-  const fileWidget = node.widgets?.find((widget) => widget.name === 'file')
-  const raw = fileWidget?.value
-  if (!isResolvableFileWidgetValue(raw)) return undefined
-
-  const { filename, subfolder, type } = parseImageWidgetValue(raw)
-  if (!filename) return undefined
-
-  const params = new URLSearchParams({ filename, subfolder, type })
-  appendCloudResParam(params, filename)
-  return api.apiURL(`/view?${params}${app.getPreviewFormatParam()}`)
-}
-
-export function nodeHasLoadVideoPreview(
-  node: LGraphNode | null | undefined
-): boolean {
-  if (!node) return false
-
-  const nodeOutputStore = useNodeOutputStore()
-  if ((nodeOutputStore.getNodeImageUrls(node)?.length ?? 0) > 0) {
-    return true
-  }
-
-  return resolveVideoUrlFromFileWidget(node) !== undefined
-}
-
-export function useLoadVideoPreview(
-  node: ComputedRef<LGraphNode | null | undefined>
-) {
-  const nodeOutputStore = useNodeOutputStore()
-  const widgetValueStore = useWidgetValueStore()
-
-  const videoUrl = computed(() => {
-    const currentNode = node.value
-    if (!currentNode) return undefined
-
-    void nodeOutputStore.nodeOutputs
-
-    const graphId = currentNode.graph?.rootGraph?.id
-    if (graphId) {
-      void widgetValueStore.getWidget(widgetId(graphId, currentNode.id, 'file'))
-        ?.value
-    }
-
-    return (
-      nodeOutputStore.getNodeImageUrls(currentNode)?.[0] ??
-      resolveVideoUrlFromFileWidget(currentNode)
-    )
-  })
-
-  return { videoUrl }
-}

src/composables/video/useVideoFilmstrip.test.ts

@@ -1,198 +0,0 @@
-import { effectScope, nextTick, ref } from 'vue'
-import type { EffectScope } from 'vue'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import { probeVideoFrameRate } from '@/composables/video/probeVideoFrameRate'
-import { fetchHttpResourceByteSize } from '@/utils/httpResourceByteSize'
-
-import {
-  DEFAULT_VIDEO_FPS,
-  FILMSTRIP_SAMPLE_COUNT,
-  useVideoFilmstrip
-} from './useVideoFilmstrip'
-
-vi.mock('@/composables/video/probeVideoFrameRate', () => ({
-  probeVideoFrameRate: vi.fn(async () => undefined)
-}))
-
-vi.mock('@/utils/httpResourceByteSize', () => ({
-  fetchHttpResourceByteSize: vi.fn(async () => undefined)
-}))
-
-type VideoListener = (event: Event) => void
-
-class MockVideoElement {
-  preload = ''
-  muted = false
-  playsInline = false
-  crossOrigin = ''
-  duration = 10
-  videoWidth = 512
-  videoHeight = 512
-  src = ''
-  private listeners = new Map<string, Set<VideoListener>>()
-
-  set currentTime(_value: number) {
-    queueMicrotask(() => this.emit('seeked'))
-  }
-
-  addEventListener(type: string, listener: VideoListener, options?: boolean) {
-    if (options === true) {
-      const wrapped = (event: Event) => {
-        this.removeEventListener(type, wrapped)
-        listener(event)
-      }
-      this.getListeners(type).add(wrapped)
-      return
-    }
-    this.getListeners(type).add(listener)
-  }
-
-  removeEventListener(type: string, listener: VideoListener) {
-    this.getListeners(type).delete(listener)
-  }
-
-  load() {
-    this.src = ''
-  }
-
-  removeAttribute(name: string) {
-    if (name === 'src') this.src = ''
-  }
-
-  private getListeners(type: string) {
-    if (!this.listeners.has(type)) {
-      this.listeners.set(type, new Set())
-    }
-    return this.listeners.get(type)!
-  }
-
-  emit(type: string) {
-    for (const listener of [...this.getListeners(type)]) {
-      listener(new Event(type))
-    }
-  }
-}
-
-function createMockCanvas(): HTMLCanvasElement {
-  return {
-    width: 0,
-    height: 0,
-    getContext: () => ({
-      drawImage: vi.fn()
-    }),
-    toDataURL: () => 'data:image/jpeg;base64,thumb'
-  } as unknown as HTMLCanvasElement
-}
-
-function installVideoMocks() {
-  const originalCreateElement = document.createElement.bind(document)
-
-  vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
-    if (tagName === 'video') {
-      const video = new MockVideoElement()
-      queueMicrotask(() => video.emit('loadedmetadata'))
-      return video as unknown as HTMLVideoElement
-    }
-    if (tagName === 'canvas') {
-      return createMockCanvas()
-    }
-    return originalCreateElement(tagName)
-  })
-}
-
-describe('useVideoFilmstrip', () => {
-  let scope: EffectScope | undefined
-
-  function runWithScope<T>(fn: () => T): T {
-    scope = effectScope()
-    return scope.run(fn)!
-  }
-
-  afterEach(() => {
-    scope?.stop()
-    scope = undefined
-    vi.restoreAllMocks()
-  })
-
-  it('estimates total frames from duration and default fps', async () => {
-    installVideoMocks()
-
-    const videoUrl = ref('https://example.com/video.mp4')
-    const { totalFrames, duration, loading } = runWithScope(() =>
-      useVideoFilmstrip(videoUrl)
-    )
-
-    await vi.waitFor(() => expect(loading.value).toBe(false))
-
-    expect(duration.value).toBe(10)
-    expect(totalFrames.value).toBe(Math.round(10 * DEFAULT_VIDEO_FPS))
-  })
-
-  it('clears state when url is removed', async () => {
-    installVideoMocks()
-
-    const videoUrl = ref<string | undefined>('https://example.com/video.mp4')
-    const { thumbnails, totalFrames, loading } = runWithScope(() =>
-      useVideoFilmstrip(videoUrl)
-    )
-
-    await vi.waitFor(() => expect(loading.value).toBe(false))
-
-    videoUrl.value = undefined
-    await nextTick()
-
-    expect(thumbnails.value).toEqual([])
-    expect(totalFrames.value).toBe(0)
-    expect(loading.value).toBe(false)
-  })
-
-  it('uses probed frame rate and file size when available', async () => {
-    installVideoMocks()
-    vi.mocked(probeVideoFrameRate).mockResolvedValueOnce(24)
-    vi.mocked(fetchHttpResourceByteSize).mockResolvedValueOnce(5 * 1024 * 1024)
-
-    const videoUrl = ref('https://example.com/video.mp4')
-    const { totalFrames, fps, fileSize, loading } = runWithScope(() =>
-      useVideoFilmstrip(videoUrl)
-    )
-
-    await vi.waitFor(() => expect(loading.value).toBe(false))
-
-    expect(fps.value).toBe(24)
-    expect(totalFrames.value).toBe(240)
-    expect(fileSize.value).toBe(5 * 1024 * 1024)
-  })
-
-  it('samples the configured number of frames', async () => {
-    let seekCount = 0
-    const originalCreateElement = document.createElement.bind(document)
-
-    vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
-      if (tagName === 'video') {
-        const video = new MockVideoElement()
-        video.addEventListener('seeked', () => {
-          seekCount += 1
-        })
-        queueMicrotask(() => video.emit('loadedmetadata'))
-        return video as unknown as HTMLVideoElement
-      }
-      if (tagName === 'canvas') {
-        return createMockCanvas()
-      }
-      return originalCreateElement(tagName)
-    })
-
-    const videoUrl = ref('https://example.com/video.mp4')
-    const { thumbnails, loading } = runWithScope(() =>
-      useVideoFilmstrip(videoUrl, {
-        sampleCount: FILMSTRIP_SAMPLE_COUNT
-      })
-    )
-
-    await vi.waitFor(() => expect(loading.value).toBe(false))
-
-    expect(seekCount).toBe(FILMSTRIP_SAMPLE_COUNT)
-    expect(thumbnails.value).toHaveLength(FILMSTRIP_SAMPLE_COUNT)
-  })
-})

src/composables/video/useVideoFilmstrip.ts

@@ -1,206 +0,0 @@
-import { onScopeDispose, ref, watch } from 'vue'
-import type { Ref } from 'vue'
-
-import { probeVideoFrameRate } from '@/composables/video/probeVideoFrameRate'
-import { fetchHttpResourceByteSize } from '@/utils/httpResourceByteSize'
-
-export const DEFAULT_VIDEO_FPS = 20
-export const FILMSTRIP_SAMPLE_COUNT = 20
-
-interface UseVideoFilmstripOptions {
-  fps?: number
-  sampleCount?: number
-}
-
-function waitForEvent(target: EventTarget, eventName: string): Promise<Event> {
-  return new Promise((resolve, reject) => {
-    const onSuccess = (event: Event) => {
-      cleanup()
-      resolve(event)
-    }
-    const onError = () => {
-      cleanup()
-      reject(new Error(`Failed to load ${eventName}`))
-    }
-    const cleanup = () => {
-      target.removeEventListener(eventName, onSuccess)
-      target.removeEventListener('error', onError)
-    }
-    target.addEventListener(eventName, onSuccess, { once: true })
-    target.addEventListener('error', onError, { once: true })
-  })
-}
-
-async function captureFrame(
-  video: HTMLVideoElement,
-  canvas: HTMLCanvasElement,
-  context: CanvasRenderingContext2D
-): Promise<string> {
-  const width = video.videoWidth
-  const height = video.videoHeight
-  if (width <= 0 || height <= 0) return ''
-
-  canvas.width = width
-  canvas.height = height
-  context.drawImage(video, 0, 0, width, height)
-  return canvas.toDataURL('image/jpeg', 0.7)
-}
-
-async function sampleFilmstripFrames(
-  video: HTMLVideoElement,
-  canvas: HTMLCanvasElement,
-  context: CanvasRenderingContext2D,
-  duration: number,
-  sampleCount: number
-): Promise<string[]> {
-  const thumbnails: string[] = []
-  const lastIndex = Math.max(sampleCount - 1, 1)
-
-  for (let index = 0; index < sampleCount; index++) {
-    const time = sampleCount <= 1 ? 0 : (duration * index) / lastIndex
-    video.currentTime = Math.min(time, Math.max(duration - 0.001, 0))
-    await waitForEvent(video, 'seeked')
-    const thumbnail = await captureFrame(video, canvas, context)
-    if (thumbnail) thumbnails.push(thumbnail)
-  }
-
-  return thumbnails
-}
-
-export function useVideoFilmstrip(
-  videoUrl: Ref<string | undefined>,
-  options: UseVideoFilmstripOptions = {}
-) {
-  const sampleCount = options.sampleCount ?? FILMSTRIP_SAMPLE_COUNT
-
-  const thumbnails = ref<string[]>([])
-  const duration = ref(0)
-  const totalFrames = ref(0)
-  const width = ref(0)
-  const height = ref(0)
-  const fps = ref(options.fps ?? DEFAULT_VIDEO_FPS)
-  const fileSize = ref<number | undefined>()
-  const loading = ref(false)
-  const error = ref<string | null>(null)
-
-  let activeLoadId = 0
-
-  function isLoadStale(loadId: number, url: string) {
-    return loadId !== activeLoadId || videoUrl.value !== url
-  }
-
-  async function loadVideo(url: string) {
-    const loadId = ++activeLoadId
-    loading.value = true
-    error.value = null
-    thumbnails.value = []
-
-    const video = document.createElement('video')
-    video.preload = 'metadata'
-    video.muted = true
-    video.playsInline = true
-    video.crossOrigin = 'anonymous'
-
-    const canvas = document.createElement('canvas')
-    const context = canvas.getContext('2d')
-    if (!context) {
-      loading.value = false
-      error.value = 'Canvas is unavailable'
-      return
-    }
-
-    try {
-      video.src = url
-      await waitForEvent(video, 'loadedmetadata')
-
-      if (isLoadStale(loadId, url)) return
-
-      const videoDuration = Number.isFinite(video.duration) ? video.duration : 0
-      duration.value = videoDuration
-      width.value = video.videoWidth
-      height.value = video.videoHeight
-
-      const detectedFileSize = await fetchHttpResourceByteSize(url)
-
-      if (isLoadStale(loadId, url)) return
-
-      const detectedFrameRate = await probeVideoFrameRate(
-        url,
-        videoDuration,
-        detectedFileSize
-      )
-
-      if (isLoadStale(loadId, url)) return
-
-      fps.value = detectedFrameRate ?? options.fps ?? DEFAULT_VIDEO_FPS
-      fileSize.value = detectedFileSize
-      totalFrames.value = Math.max(Math.round(videoDuration * fps.value), 1)
-
-      const sampledThumbnails = await sampleFilmstripFrames(
-        video,
-        canvas,
-        context,
-        videoDuration,
-        sampleCount
-      )
-
-      if (isLoadStale(loadId, url)) return
-
-      thumbnails.value = sampledThumbnails
-    } catch (loadError) {
-      if (isLoadStale(loadId, url)) return
-      error.value =
-        loadError instanceof Error ? loadError.message : 'Failed to load video'
-      duration.value = 0
-      totalFrames.value = 0
-      width.value = 0
-      height.value = 0
-      fps.value = options.fps ?? DEFAULT_VIDEO_FPS
-      fileSize.value = undefined
-      thumbnails.value = []
-    } finally {
-      if (loadId === activeLoadId) {
-        loading.value = false
-      }
-      video.removeAttribute('src')
-      video.load()
-    }
-  }
-
-  watch(
-    videoUrl,
-    (url) => {
-      if (!url) {
-        activeLoadId++
-        loading.value = false
-        error.value = null
-        thumbnails.value = []
-        duration.value = 0
-        totalFrames.value = 0
-        width.value = 0
-        height.value = 0
-        fps.value = options.fps ?? DEFAULT_VIDEO_FPS
-        fileSize.value = undefined
-        return
-      }
-      void loadVideo(url)
-    },
-    { immediate: true }
-  )
-
-  onScopeDispose(() => {
-    activeLoadId++
-  })
-
-  return {
-    thumbnails,
-    duration,
-    totalFrames,
-    width,
-    height,
-    fps,
-    fileSize,
-    loading,
-    error
-  }
-}

src/extensions/core/index.ts

@@ -13,7 +13,6 @@ import './imageCompare'
 import './imageCrop'
 // load3d and saveMesh are loaded on-demand to defer THREE.js (~1.8MB)
 // The lazy loader triggers loading when a 3D node is used
-import './loadVideoTrim'
 import './load3dLazy'
 import './maskeditor'
 if (!isCloud) {

src/extensions/core/load3d/MeshModelAdapter.test.ts

@@ -108,6 +108,7 @@ describe('MeshModelAdapter', () => {
       expect(adapter.capabilities.exportable).toBe(true)
       expect([...adapter.capabilities.materialModes]).toEqual([
         'original',
+        'clay',
         'normal',
         'wireframe'
       ])

src/extensions/core/load3d/MeshModelAdapter.ts

@@ -24,7 +24,7 @@ export class MeshModelAdapter implements ModelAdapter {
     gizmoTransform: true,
     lighting: true,
     exportable: true,
-    materialModes: ['original', 'normal', 'wireframe'],
+    materialModes: ['original', 'clay', 'normal', 'wireframe'],
     fitTargetSize: 5
   }
 

src/extensions/core/load3d/ModelAdapter.test.ts

@@ -19,6 +19,7 @@ describe('DEFAULT_MODEL_CAPABILITIES', () => {
     expect(DEFAULT_MODEL_CAPABILITIES.exportable).toBe(true)
     expect([...DEFAULT_MODEL_CAPABILITIES.materialModes]).toEqual([
       'original',
+      'clay',
       'normal',
       'wireframe'
     ])

src/extensions/core/load3d/ModelAdapter.ts

@@ -60,7 +60,7 @@ export const DEFAULT_MODEL_CAPABILITIES: ModelAdapterCapabilities = {
   gizmoTransform: true,
   lighting: true,
   exportable: true,
-  materialModes: ['original', 'normal', 'wireframe'],
+  materialModes: ['original', 'clay', 'normal', 'wireframe'],
   fitTargetSize: 5
 }
 

src/extensions/core/load3d/SceneModelManager.ts

@@ -29,6 +29,7 @@ export class SceneModelManager implements ModelManagerInterface {
   standardMaterial: THREE.MeshStandardMaterial
   wireframeMaterial: THREE.MeshBasicMaterial
   depthMaterial: THREE.MeshDepthMaterial
+  clayMaterial: THREE.MeshStandardMaterial
   originalFileName: string | null = null
   originalURL: string | null = null
   appliedTexture: THREE.Texture | null = null
@@ -98,8 +99,44 @@ export class SceneModelManager implements ModelManagerInterface {
       depthPacking: THREE.BasicDepthPacking,
       side: THREE.DoubleSide
     })
+    this.depthMaterial.onBeforeCompile = (shader) => {
+      shader.uniforms.cameraType = {
+        value: this.activeCamera instanceof THREE.OrthographicCamera ? 1.0 : 0.0
+      }
+
+      shader.fragmentShader = `
+                uniform float cameraType;
+                ${shader.fragmentShader}
+              `
+
+      shader.fragmentShader = shader.fragmentShader.replace(
+        /gl_FragColor\s*=\s*vec4\(\s*vec3\(\s*1.0\s*-\s*fragCoordZ\s*\)\s*,\s*opacity\s*\)\s*;/,
+        `
+                  float depth = 1.0 - fragCoordZ;
+                  if (cameraType > 0.5) {
+                    depth = pow(depth, 400.0);
+                  } else {
+                    depth = pow(depth, 0.6);
+                  }
+                  gl_FragColor = vec4(vec3(depth), opacity);
+                `
+      )
+    }
+    this.depthMaterial.customProgramCacheKey = () => {
+      return this.activeCamera instanceof THREE.OrthographicCamera
+        ? 'ortho'
+        : 'persp'
+    }
 
     this.standardMaterial = this.createSTLMaterial()
+
+    this.clayMaterial = new THREE.MeshStandardMaterial({
+      color: 0x888888,
+      metalness: 0.0,
+      roughness: 0.9,
+      flatShading: false,
+      side: THREE.DoubleSide
+    })
   }
 
   init(): void {}
@@ -110,6 +147,7 @@ export class SceneModelManager implements ModelManagerInterface {
     this.standardMaterial.dispose()
     this.wireframeMaterial.dispose()
     this.depthMaterial.dispose()
+    this.clayMaterial.dispose()
 
     if (this.appliedTexture) {
       this.appliedTexture.dispose()
@@ -212,68 +250,25 @@ export class SceneModelManager implements ModelManagerInterface {
             if (!this.originalMaterials.has(child)) {
               this.originalMaterials.set(child, child.material)
             }
-            const depthMat = new THREE.MeshDepthMaterial({
-              depthPacking: THREE.BasicDepthPacking,
-              side: THREE.DoubleSide
-            })
-
-            depthMat.onBeforeCompile = (shader) => {
-              shader.uniforms.cameraType = {
-                value:
-                  this.activeCamera instanceof THREE.OrthographicCamera
-                    ? 1.0
-                    : 0.0
-              }
-
-              shader.fragmentShader = `
-                uniform float cameraType;
-                ${shader.fragmentShader}
-              `
-
-              shader.fragmentShader = shader.fragmentShader.replace(
-                /gl_FragColor\s*=\s*vec4\(\s*vec3\(\s*1.0\s*-\s*fragCoordZ\s*\)\s*,\s*opacity\s*\)\s*;/,
-                `
-                  float depth = 1.0 - fragCoordZ;
-                  if (cameraType > 0.5) {
-                    depth = pow(depth, 400.0);
-                  } else {
-                    depth = pow(depth, 0.6);
-                  }
-                  gl_FragColor = vec4(vec3(depth), opacity);
-                `
-              )
-            }
-
-            depthMat.customProgramCacheKey = () => {
-              return this.activeCamera instanceof THREE.OrthographicCamera
-                ? 'ortho'
-                : 'persp'
-            }
-
-            child.material = depthMat
+            child.material = this.depthMaterial
             break
           case 'normal':
             if (!this.originalMaterials.has(child)) {
               this.originalMaterials.set(child, child.material)
             }
-            child.material = new THREE.MeshNormalMaterial({
-              flatShading: false,
-              side: THREE.DoubleSide,
-              normalScale: new THREE.Vector2(1, 1),
-              transparent: false,
-              opacity: 1.0
-            })
+            child.material = this.normalMaterial
             break
           case 'wireframe':
             if (!this.originalMaterials.has(child)) {
               this.originalMaterials.set(child, child.material)
             }
-            child.material = new THREE.MeshBasicMaterial({
-              color: 0xffffff,
-              wireframe: true,
-              transparent: false,
-              opacity: 1.0
-            })
+            child.material = this.wireframeMaterial
+            break
+          case 'clay':
+            if (!this.originalMaterials.has(child)) {
+              this.originalMaterials.set(child, child.material)
+            }
+            child.material = this.clayMaterial
             break
           case 'original':
           case 'pointCloud':

src/extensions/core/load3d/interfaces.ts

@@ -11,6 +11,7 @@ export type MaterialMode =
   | 'normal'
   | 'wireframe'
   | 'depth'
+  | 'clay'
 export type UpDirection = 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
 export type CameraType = 'perspective' | 'orthographic'
 export type BackgroundRenderModeType = 'tiled' | 'panorama'

src/extensions/core/loadVideoTrim.ts

@@ -1,17 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useExtensionService } from '@/services/extensionService'
-
-import { useVideoTrimWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useVideoTrimWidget'
-
-useExtensionService().registerExtension({
-  name: 'Comfy.LoadVideoTrimPrototype',
-
-  nodeCreated(node: LGraphNode) {
-    if (node.constructor.comfyClass !== 'LoadVideo') return
-
-    node.hideOutputImages = true
-    node.setSize([Math.max(node.size[0], 350), node.size[1]])
-
-    useVideoTrimWidget(node)
-  }
-})

src/lib/litegraph/src/types/widgets.ts

@@ -146,7 +146,6 @@ export type IWidget =
   | ICurveWidget
   | IPainterWidget
   | IRangeWidget
-  | IVideoTrimWidget
   | IBoundingBoxesWidget
   | IColorsWidget
 
@@ -370,12 +369,6 @@ export interface RangeValue {
   midpoint?: number
 }
 
-export interface VideoTrimValue {
-  trimEnabled: boolean
-  startFrame: number
-  endFrame: number
-}
-
 export interface IWidgetRangeOptions extends IWidgetOptions {
   display?: 'plain' | 'gradient' | 'histogram'
   gradient_stops?: ColorStop[]
@@ -394,14 +387,6 @@ export interface IRangeWidget extends IBaseWidget<
   value: RangeValue
 }
 
-export interface IVideoTrimWidget extends IBaseWidget<
-  VideoTrimValue,
-  'videotrim'
-> {
-  type: 'videotrim'
-  value: VideoTrimValue
-}
-
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]

src/lib/litegraph/src/widgets/VideoTrimWidget.ts

@@ -1,16 +0,0 @@
-import type { IVideoTrimWidget } from '../types/widgets'
-import { BaseWidget } from './BaseWidget'
-import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
-
-export class VideoTrimWidget
-  extends BaseWidget<IVideoTrimWidget>
-  implements IVideoTrimWidget
-{
-  override type = 'videotrim' as const
-
-  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
-    this.drawVueOnlyWarning(ctx, options, 'Video Trim')
-  }
-
-  onClick(_options: WidgetEventOptions): void {}
-}

src/lib/litegraph/src/widgets/widgetMap.ts

@@ -25,7 +25,6 @@ import { BoundingBoxesWidget } from './BoundingBoxesWidget'
 import { ColorsWidget } from './ColorsWidget'
 import { PainterWidget } from './PainterWidget'
 import { RangeWidget } from './RangeWidget'
-import { VideoTrimWidget } from './VideoTrimWidget'
 import { ImageCropWidget } from './ImageCropWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
@@ -65,7 +64,6 @@ export type WidgetTypeMap = {
   curve: CurveWidget
   painter: PainterWidget
   range: RangeWidget
-  videotrim: VideoTrimWidget
   boundingboxes: BoundingBoxesWidget
   colors: ColorsWidget
   [key: string]: BaseWidget
@@ -150,8 +148,6 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(PainterWidget, narrowedWidget, node)
     case 'range':
       return toClass(RangeWidget, narrowedWidget, node)
-    case 'videotrim':
-      return toClass(VideoTrimWidget, narrowedWidget, node)
     case 'boundingboxes':
       return toClass(BoundingBoxesWidget, narrowedWidget, node)
     case 'colors':

src/locales/en/main.json

@@ -2061,6 +2061,7 @@
     "centerCameraOnModel": "Center Camera on Model",
     "scene": "Scene",
     "model": "Model",
+    "model3d": "3D Model",
     "camera": "Camera",
     "light": "Light",
     "switchingMaterialMode": "Switching Material Mode...",
@@ -2071,13 +2072,30 @@
     "reloadingModel": "Reloading model...",
     "uploadTexture": "Upload Texture",
     "applyingTexture": "Applying Texture...",
+    "menuBar": {
+      "showGrid": "Show grid",
+      "bgColor": "BG Color",
+      "bgImage": "BG Image",
+      "panorama": "Panorama",
+      "removeBackground": "Remove BG",
+      "upDirection": "Up Direction",
+      "material": "Material",
+      "skeleton": "Skeleton",
+      "fov": "FOV",
+      "intensity": "Intensity",
+      "record": "Record",
+      "stopRecording": "Stop recording",
+      "switchProjection": "Switch projection",
+      "originalMaterialOnly": "Original material only"
+    },
     "materialModes": {
       "normal": "Normal",
       "wireframe": "Wireframe",
       "original": "Original",
       "pointCloud": "Point Cloud",
       "depth": "Depth",
-      "lineart": "Lineart"
+      "lineart": "Lineart",
+      "clay": "Clay"
     },
     "upDirections": {
       "original": "Original"
@@ -2109,10 +2127,10 @@
     "uploadingModel": "Uploading 3D model...",
     "loadingHDRI": "Loading HDRI...",
     "hdri": {
-      "label": "HDRI Environment",
-      "uploadFile": "Upload HDRI (.hdr, .exr)",
-      "changeFile": "Change HDRI",
-      "removeFile": "Remove HDRI",
+      "label": "HDRI",
+      "uploadFile": "Upload",
+      "changeFile": "Change",
+      "removeFile": "Remove",
       "showAsBackground": "Show as Background",
       "intensity": "Intensity"
     },
@@ -2122,7 +2140,7 @@
       "translate": "Translate",
       "rotate": "Rotate",
       "scale": "Scale",
-      "reset": "Reset Transform"
+      "reset": "Reset"
     }
   },
   "imageCrop": {
@@ -3017,7 +3035,6 @@
       "placeholderImage": "Select image...",
       "placeholderAudio": "Select audio...",
       "placeholderVideo": "Select video...",
-      "browseAssetLibrary": "Browse asset library",
       "placeholderMesh": "Select mesh...",
       "placeholderModel": "Select model...",
       "placeholderUnknown": "Select media...",
@@ -4478,32 +4495,6 @@
     "continueLocally": "Continue Locally",
     "exploreCloud": "Try Cloud for Free"
   },
-  "loadVideoTrim": {
-    "trimVideo": "Trim Video",
-    "startFrame": "Start Frame",
-    "endFrame": "End Frame",
-    "setStartFrame": "Set start frame",
-    "setEndFrame": "Set end frame",
-    "duration": "Duration",
-    "frames": "Number of Frames",
-    "fileSize": "File Size",
-    "resolution": "{width} × {height}",
-    "play": "Play",
-    "pause": "Pause",
-    "dragAndDropVideos": "Drag and drop videos here to upload",
-    "uploadFromDevice": "Upload from device",
-    "uploading": "Uploading…",
-    "loadingVideo": "Loading video preview",
-    "loadingFilmstrip": "Loading filmstrip…",
-    "adjustStartFrame": "Adjust start frame",
-    "adjustEndFrame": "Adjust end frame",
-    "durationZero": "0s",
-    "durationSeconds": "{count}s",
-    "fileSizeUnknown": "—",
-    "fileSizeBytes": "{count} B",
-    "fileSizeKilobytes": "{count} KB",
-    "fileSizeMegabytes": "{count} MB"
-  },
   "execution": {
     "generating": "Generating…",
     "saving": "Saving…",

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.test.ts

@@ -109,7 +109,7 @@ describe('PostHogTelemetryProvider', () => {
           api_host: 'https://t.comfy.org',
           ui_host: 'https://us.posthog.com',
           autocapture: false,
-          capture_pageview: 'history_change',
+          capture_pageview: false,
           capture_pageleave: false,
           persistence: 'localStorage+cookie'
         })
@@ -635,7 +635,7 @@ describe('PostHogTelemetryProvider', () => {
   })
 
   describe('page view', () => {
-    it('captures legacy page view event with page_name property', async () => {
+    it('captures page view with page_name property', async () => {
       const provider = createProvider()
       await vi.dynamicImportSettled()
 
@@ -645,13 +645,9 @@ describe('PostHogTelemetryProvider', () => {
         TelemetryEvents.PAGE_VIEW,
         { page_name: 'workflow_editor' }
       )
-      expect(hoisted.mockCapture).not.toHaveBeenCalledWith(
-        '$pageview',
-        expect.anything()
-      )
     })
 
-    it('forwards additional metadata to legacy page view event', async () => {
+    it('forwards additional metadata', async () => {
       const provider = createProvider()
       await vi.dynamicImportSettled()
 
@@ -664,20 +660,6 @@ describe('PostHogTelemetryProvider', () => {
         { page_name: 'workflow_editor', path: '/workflows/123' }
       )
     })
-
-    it('queues legacy page view event before initialization', async () => {
-      const provider = createProvider()
-
-      provider.trackPageView('workflow_editor')
-      expect(hoisted.mockCapture).not.toHaveBeenCalled()
-
-      await vi.dynamicImportSettled()
-
-      expect(hoisted.mockCapture).toHaveBeenCalledWith(
-        TelemetryEvents.PAGE_VIEW,
-        { page_name: 'workflow_editor' }
-      )
-    })
   })
 
   describe('before_send', () => {

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts

@@ -126,7 +126,7 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
                 window.__CONFIG__?.posthog_api_host || 'https://t.comfy.org',
               ui_host: 'https://us.posthog.com',
               autocapture: false,
-              capture_pageview: 'history_change',
+              capture_pageview: false,
               capture_pageleave: false,
               persistence: 'localStorage+cookie',
               debug: import.meta.env.VITE_POSTHOG_DEBUG === 'true',

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -15,9 +15,7 @@
         'flex flex-col contain-layout contain-style',
         isRerouteNode
           ? 'h-(--node-height)'
-          : loadVideoShrinkWrapBody
-            ? 'h-auto min-h-0 min-w-(--min-node-width)'
-            : 'min-h-(--node-height) min-w-(--min-node-width)',
+          : 'min-h-(--node-height) min-w-(--min-node-width)',
         cursorClass,
         isSelected && 'outline-node-component-outline',
         executing && 'outline-node-stroke-executing',
@@ -79,9 +77,7 @@
       data-testid="node-inner-wrapper"
       :class="
         cn(
-          loadVideoShrinkWrapBody
-            ? 'flex flex-none flex-col border border-solid border-transparent bg-node-component-header-surface'
-            : 'flex flex-1 flex-col border border-solid border-transparent bg-node-component-header-surface',
+          'flex flex-1 flex-col border border-solid border-transparent bg-node-component-header-surface',
           'w-(--node-width)',
           !isRerouteNode && 'min-w-(--min-node-width)',
           shapeClass,
@@ -155,8 +151,7 @@
         <div
           :class="
             cn(
-              'flex flex-col gap-1 bg-component-node-background pt-1',
-              loadVideoShrinkWrapBody ? 'flex-none' : 'flex-1',
+              'flex flex-1 flex-col gap-1 bg-component-node-background pt-1 pb-3',
               bodyRoundingClass
             )
           "
@@ -187,7 +182,7 @@
             v-if="!isTransparentHeaderless"
             v-bind="badges"
             :pricing="undefined"
-            :class="loadVideoShrinkWrapBody ? undefined : 'mt-auto'"
+            class="mt-auto"
           />
         </div>
       </template>
@@ -265,7 +260,6 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { nodeHasLoadVideoPreview } from '@/composables/video/useLoadVideoPreview'
 import { showNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 import { useAppMode } from '@/composables/useAppMode'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -296,10 +290,7 @@ import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables
 import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
 import { usePartitionedBadges } from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
-import {
-  requestVueElementFreshMeasurement,
-  useVueElementTracking
-} from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
+import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeDrag } from '@/renderer/extensions/vueNodes/layout/useNodeDrag'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
@@ -482,11 +473,7 @@ function initSizeStyles() {
   const fullHeight = height + LiteGraph.NODE_TITLE_HEIGHT
 
   el.style.setProperty(`--node-width${suffix}`, `${width}px`)
-  if (loadVideoShrinkWrapBody.value) {
-    el.style.removeProperty(`--node-height${suffix}`)
-  } else {
-    el.style.setProperty(`--node-height${suffix}`, `${fullHeight}px`)
-  }
+  el.style.setProperty(`--node-height${suffix}`, `${fullHeight}px`)
 }
 
 /**
@@ -507,11 +494,9 @@ function handleLayoutChange(change: LayoutChange) {
   if (!el) return
 
   const newSize = size.value
+  const fullHeight = newSize.height + LiteGraph.NODE_TITLE_HEIGHT
   el.style.setProperty('--node-width', `${newSize.width}px`)
-  if (!loadVideoShrinkWrapBody.value) {
-    const fullHeight = newSize.height + LiteGraph.NODE_TITLE_HEIGHT
-    el.style.setProperty('--node-height', `${fullHeight}px`)
-  }
+  el.style.setProperty('--node-height', `${fullHeight}px`)
 }
 
 let unsubscribeLayoutChange: (() => void) | null = null
@@ -745,28 +730,6 @@ const lgraphNode = computed(() => {
   return getNodeByLocatorId(app.rootGraph, locatorId)
 })
 
-const loadVideoShrinkWrapBody = computed(() => {
-  if (nodeData.type !== 'LoadVideo') return false
-  void nodeOutputs.nodeOutputs
-  return nodeHasLoadVideoPreview(lgraphNode.value)
-})
-
-watch(loadVideoShrinkWrapBody, async (shrinkWrap, wasShrinkWrap) => {
-  if (shrinkWrap === wasShrinkWrap) return
-
-  const el = nodeContainerRef.value
-  if (!el) return
-
-  if (shrinkWrap) {
-    el.style.removeProperty('--node-height')
-  } else {
-    initSizeStyles()
-  }
-
-  await nextTick()
-  requestVueElementFreshMeasurement(el)
-})
-
 // TODO: Surface subgraph info more cleanly in VueNodeData instead of
 // reaching through lgraphNode for promoted preview resolution.
 const { promotedPreviews } = usePromotedPreviews(lgraphNode)

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -8,7 +8,6 @@
     :class="
       cn(
         'lg-node-widgets grid grid-cols-[min-content_minmax(80px,min-content)_minmax(125px,1fr)] gap-y-1 pr-3',
-        hasExpandingRows && 'min-h-0',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
@@ -16,7 +15,7 @@
     "
     :style="{
       'grid-template-rows': gridTemplateRows,
-      flex: hasExpandingRows ? 1 : undefined
+      flex: gridTemplateRows.includes('auto') ? 1 : undefined
     }"
     @pointerdown.capture="handleBringToFront"
     @pointerdown="handleWidgetPointerEvent"
@@ -28,9 +27,6 @@
         v-if="widget.visible"
         data-testid="node-widget"
         class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch"
-        :class="
-          widget.type === 'videotrim' && loadVideoTrimFillsSpace && 'min-h-0'
-        "
       >
         <!-- Widget Input Slot Dot -->
         <div
@@ -72,9 +68,6 @@
             :class="
               cn(
                 'col-span-2',
-                widget.type === 'videotrim' &&
-                  loadVideoTrimFillsSpace &&
-                  'h-full min-h-0',
                 widget.hasError && 'font-bold text-node-stroke-error'
               )
             "
@@ -135,14 +128,8 @@ onErrorCaptured((error) => {
   return false
 })
 
-const {
-  canSelectInputs,
-  gridTemplateRows,
-  hasExpandingRows,
-  loadVideoTrimFillsSpace,
-  nodeType,
-  processedWidgets
-} = useProcessedWidgets(() => nodeData)
+const { canSelectInputs, gridTemplateRows, nodeType, processedWidgets } =
+  useProcessedWidgets(() => nodeData)
 
 // Tracks widget-row growth that the node-level RO can't see
 if (nodeData?.id != null) {

src/renderer/extensions/vueNodes/composables/useProcessedWidgets.ts

@@ -7,7 +7,6 @@ import type {
   VueNodeData,
   WidgetSlotMetadata
 } from '@/composables/graph/useGraphNodeManager'
-import { nodeHasLoadVideoPreview } from '@/composables/video/useLoadVideoPreview'
 import { useAppMode } from '@/composables/useAppMode'
 import { showNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
@@ -31,7 +30,6 @@ import {
 } from '@/stores/widgetValueStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import {
   createNodeExecutionId,
   createNodeLocatorId
@@ -405,8 +403,6 @@ export function useProcessedWidgets(
 ) {
   const canvasStore = useCanvasStore()
   const settingStore = useSettingStore()
-  const nodeOutputStore = useNodeOutputStore()
-  const widgetValueStore = useWidgetValueStore()
   const { isSelectInputsMode } = useAppMode()
   const { handleNodeRightClick } = useNodeEventHandlers()
 
@@ -452,54 +448,17 @@ export function useProcessedWidgets(
     processedWidgets.value.filter((w) => w.visible)
   )
 
-  const loadVideoHasPreview = computed(() => {
-    const nodeData = nodeDataGetter()
-    if (nodeData?.type !== 'LoadVideo') return false
-    const node = app.canvas.graph?.getNodeById(nodeData.id)
-    if (!node) return false
-
-    void nodeOutputStore.nodeOutputs
-    void nodeOutputStore.nodePreviewImages
-    const graphId = canvasStore.canvas?.graph?.rootGraph.id
-    if (graphId) {
-      void widgetValueStore.getWidget(widgetId(graphId, nodeData.id, 'file'))
-        ?.value
-    }
-
-    return nodeHasLoadVideoPreview(node)
-  })
-
-  const loadVideoTrimFillsSpace = computed(
-    () => nodeType.value === 'LoadVideo' && !loadVideoHasPreview.value
-  )
-
-  function widgetGridRow(widget: ProcessedWidget) {
-    if (
-      widget.type === 'videotrim' &&
-      nodeType.value === 'LoadVideo' &&
-      !loadVideoHasPreview.value
-    ) {
-      return 'minmax(0, 1fr)'
-    }
-    if (shouldExpand(widget.type) || widget.hasLayoutSize) return 'auto'
-    return 'min-content'
-  }
-
   const gridTemplateRows = computed((): string =>
-    visibleWidgets.value.map(widgetGridRow).join(' ')
-  )
-
-  const hasExpandingRows = computed(() =>
-    visibleWidgets.value.some(
-      (widget) => widgetGridRow(widget) !== 'min-content'
-    )
+    visibleWidgets.value
+      .map((w) =>
+        shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
+      )
+      .join(' ')
   )
 
   return {
     canSelectInputs,
     gridTemplateRows,
-    hasExpandingRows,
-    loadVideoTrimFillsSpace,
     nodeType,
     processedWidgets,
     visibleWidgets

src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts

@@ -87,12 +87,6 @@ function markElementForFreshMeasurement(element: HTMLElement) {
   cachedNodeMeasurements.delete(element)
 }
 
-export function requestVueElementFreshMeasurement(element: HTMLElement) {
-  if (!element.isConnected) return
-  markElementForFreshMeasurement(element)
-  resizeObserver.observe(element)
-}
-
 watch(visibility, (state) => {
   if (state !== 'visible' || deferredElements.size === 0) return
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue

@@ -3,7 +3,6 @@
     v-if="isDropdownUIWidget"
     v-model="modelValue"
     :widget
-    :node-id="nodeId"
     :node-type="widget.nodeType ?? nodeType"
     :asset-kind="assetKind"
     :allow-upload="allowUpload"
@@ -36,7 +35,6 @@ import type {
   SimplifiedControlWidget,
   SimplifiedWidget
 } from '@/types/simplifiedWidget'
-import type { NodeId } from '@/types/nodeId'
 import type { AssetKind } from '@/types/widgetTypes'
 
 type StringControlWidget = SimplifiedControlWidget<string | undefined>
@@ -44,7 +42,6 @@ type StringControlWidget = SimplifiedControlWidget<string | undefined>
 const props = defineProps<{
   widget: SimplifiedWidget<string | undefined>
   nodeType?: string
-  nodeId?: NodeId
 }>()
 
 const modelValue = defineModel<string | undefined>()

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts

@@ -79,36 +79,6 @@ vi.mock('@/platform/assets/utils/outputAssetUtil', () => ({
 
 const mockUpdateSelectedItems = vi.hoisted(() => vi.fn())
 const mockHandleFilesUpdate = vi.hoisted(() => vi.fn())
-const { getNodeImageUrlsMock, mockLoadVideoNode, getNodeByIdMock } = vi.hoisted(
-  () => ({
-    getNodeImageUrlsMock: vi.fn<(node: unknown) => string[] | undefined>(
-      () => undefined
-    ),
-    getNodeByIdMock: vi.fn(),
-    mockLoadVideoNode: {
-      isUploading: false,
-      widgets: [{ name: 'file', value: 'ltx2-audio_to_video.mov' }]
-    }
-  })
-)
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    canvas: {
-      graph: {
-        getNodeById: getNodeByIdMock
-      }
-    },
-    getPreviewFormatParam: () => ''
-  }
-}))
-
-vi.mock('@/stores/nodeOutputStore', () => ({
-  useNodeOutputStore: () => ({
-    nodeOutputs: {},
-    getNodeImageUrls: getNodeImageUrlsMock
-  })
-}))
 
 const { mockItemsRef, mockSelectedSetRef, mockFilterSelectedRef } = vi.hoisted(
   () => {
@@ -174,12 +144,6 @@ describe('WidgetSelectDropdown', () => {
     mockFilterSelectedRef.value = 'all'
     mockUpdateSelectedItems.mockClear()
     mockHandleFilesUpdate.mockClear()
-    getNodeImageUrlsMock.mockReturnValue(undefined)
-    mockLoadVideoNode.isUploading = false
-    mockLoadVideoNode.widgets = [
-      { name: 'file', value: 'ltx2-audio_to_video.mov' }
-    ]
-    getNodeByIdMock.mockReturnValue(mockLoadVideoNode)
   })
 
   function renderComponent(
@@ -293,44 +257,4 @@ describe('WidgetSelectDropdown', () => {
       expect(screen.queryByText('cat.png')).toBeNull()
     })
   })
-
-  describe('LoadVideo file dropdown', () => {
-    function renderLoadVideoDropdown(modelValue = 'ltx2-audio_to_video.mov') {
-      mockItemsRef.value = [{ id: 'input-0', name: 'ltx2-audio_to_video.mov' }]
-      mockSelectedSetRef.value = new Set(['input-0'])
-      const widget = createMockWidget<string | undefined>({
-        value: modelValue,
-        name: 'file',
-        type: 'combo',
-        options: {
-          values: ['ltx2-audio_to_video.mov']
-        }
-      })
-      return renderComponent(widget, modelValue, {
-        assetKind: 'video',
-        nodeType: 'LoadVideo',
-        nodeId: 'load-video-node',
-        allowUpload: false
-      })
-    }
-
-    it('stays enabled when preview resolves from the file widget fallback', () => {
-      renderLoadVideoDropdown()
-      const button = screen.getByRole('button', {
-        name: 'ltx2-audio_to_video.mov'
-      })
-
-      expect(button).not.toBeDisabled()
-    })
-
-    it('disables while the node is uploading', () => {
-      mockLoadVideoNode.isUploading = true
-      renderLoadVideoDropdown()
-      const button = screen.getByRole('button', {
-        name: 'ltx2-audio_to_video.mov'
-      })
-
-      expect(button).toBeDisabled()
-    })
-  })
 })

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -3,7 +3,6 @@ import { useDebounceFn } from '@vueuse/core'
 import { computed, provide, ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useLoadVideoPreview } from '@/composables/video/useLoadVideoPreview'
 import { SUPPORTED_EXTENSIONS_ACCEPT } from '@/extensions/core/load3d/constants'
 import { useAssetsApi } from '@/platform/assets/composables/media/useAssetsApi'
 import { useFlatOutputAssets } from '@/platform/assets/composables/media/useFlatOutputAssets'
@@ -15,9 +14,7 @@ import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components
 import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
 import { useWidgetSelectActions } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions'
 import { useWidgetSelectItems } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems'
-import type { NodeId } from '@/types/nodeId'
 import type { ResultItemType } from '@/schemas/apiSchema'
-import { app } from '@/scripts/app'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
 import {
@@ -27,7 +24,6 @@ import {
 
 interface Props {
   widget: SimplifiedWidget<string | undefined>
-  nodeId?: NodeId
   nodeType?: string
   assetKind?: AssetKind
   allowUpload?: boolean
@@ -112,9 +108,7 @@ const mediaPlaceholder = computed(() => {
     case 'image':
       return t('widgets.uploadSelect.placeholderImage')
     case 'video':
-      return props.nodeType === 'LoadVideo'
-        ? t('widgets.uploadSelect.browseAssetLibrary')
-        : t('widgets.uploadSelect.placeholderVideo')
+      return t('widgets.uploadSelect.placeholderVideo')
     case 'audio':
       return t('widgets.uploadSelect.placeholderAudio')
     case 'mesh':
@@ -130,7 +124,6 @@ const mediaPlaceholder = computed(() => {
 
 const uploadable = computed(() => {
   if (props.isAssetMode) return false
-  if (props.nodeType === 'LoadVideo') return false
   return props.allowUpload === true
 })
 
@@ -170,38 +163,6 @@ const handleApproachEnd = useDebounceFn(async () => {
 }, 300)
 
 const isUploading = ref(false)
-
-const node = computed(() => {
-  if (!props.nodeId) return undefined
-  return app.canvas.graph?.getNodeById(props.nodeId)
-})
-
-const { videoUrl: loadVideoPreviewUrl } = useLoadVideoPreview(node)
-
-const nodeIsUploading = computed(() => node.value?.isUploading ?? false)
-
-const awaitingVideoPreview = computed(() => {
-  if (props.nodeType !== 'LoadVideo' || props.assetKind !== 'video') {
-    return false
-  }
-  if (!modelValue.value) return false
-  if (!node.value) return false
-  return !loadVideoPreviewUrl.value
-})
-
-const isLoadVideoProcessing = computed(
-  () =>
-    props.nodeType === 'LoadVideo' &&
-    props.assetKind === 'video' &&
-    (nodeIsUploading.value || awaitingVideoPreview.value)
-)
-
-const dropdownDisabled = computed(() => isLoadVideoProcessing.value)
-
-const dropdownIsUploading = computed(
-  () => isUploading.value || isLoadVideoProcessing.value
-)
-
 async function updateFiles(files: File[]) {
   isUploading.value = true
   await handleFilesUpdate(files)
@@ -222,14 +183,13 @@ async function updateFiles(files: File[]) {
       :placeholder="mediaPlaceholder"
       :multiple="false"
       :uploadable
-      :disabled="dropdownDisabled"
       :accept="acceptTypes"
       :filter-options
       :show-ownership-filter
       :ownership-options
       :show-base-model-filter
       :base-model-options
-      :is-uploading="dropdownIsUploading"
+      :is-uploading
       v-bind="combinedProps"
       :loading-more="outputMediaAssets.isLoadingMore.value"
       class="w-full"

src/renderer/extensions/vueNodes/widgets/components/WidgetVideoTrim.vue

@@ -1,138 +0,0 @@
-<template>
-  <div
-    :class="cn(!videoUrl && 'flex h-full min-h-0 min-w-0 flex-1 flex-col')"
-    :data-widget-name="widget.name"
-  >
-    <LoadVideoTrimPanel
-      v-model:trim-enabled="trimEnabled"
-      v-model:start-frame="startFrame"
-      v-model:end-frame="endFrame"
-      v-model:playhead-frame="playheadFrame"
-      :video-url="videoUrl"
-      :uploading="isUploading"
-      :on-drag-over="handleDragOver"
-      :on-drag-drop="handleDragDrop"
-      @browse="handleBrowse"
-      @remove="handleRemove"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-import LoadVideoTrimPanel from '@/components/video/LoadVideoTrimPanel.vue'
-import { useLoadVideoPreview } from '@/composables/video/useLoadVideoPreview'
-import type { VideoTrimValue } from '@/lib/litegraph/src/types/widgets'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import type { NodeId } from '@/types/nodeId'
-import { cn } from '@comfyorg/tailwind-utils'
-import { app } from '@/scripts/app'
-import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { widgetId } from '@/types/widgetId'
-
-const { nodeId } = defineProps<{
-  widget: SimplifiedWidget<VideoTrimValue>
-  nodeId: NodeId
-}>()
-
-const modelValue = defineModel<VideoTrimValue>({
-  default: () => ({
-    trimEnabled: false,
-    startFrame: 0,
-    endFrame: 0
-  })
-})
-
-const playheadFrame = ref(0)
-
-const node = computed(() => app.canvas.graph?.getNodeById(nodeId))
-
-const { videoUrl } = useLoadVideoPreview(node)
-
-const isUploading = computed(() => node.value?.isUploading ?? false)
-
-const trimEnabled = computed({
-  get: () => modelValue.value.trimEnabled,
-  set: (trimEnabled) => {
-    modelValue.value = { ...modelValue.value, trimEnabled }
-  }
-})
-
-const startFrame = computed({
-  get: () => modelValue.value.startFrame,
-  set: (startFrame) => {
-    modelValue.value = { ...modelValue.value, startFrame }
-  }
-})
-
-const endFrame = computed({
-  get: () => modelValue.value.endFrame,
-  set: (endFrame) => {
-    modelValue.value = { ...modelValue.value, endFrame }
-  }
-})
-
-function handleBrowse() {
-  node.value?.widgets
-    ?.find((widget) => widget.name === 'upload')
-    ?.callback?.(undefined)
-}
-
-function handleRemove() {
-  const currentNode = node.value
-  if (!currentNode) return
-
-  const fileWidget = currentNode.widgets?.find(
-    (widget) => widget.name === 'file'
-  )
-  if (!fileWidget) return
-
-  const oldValue = fileWidget.value
-  fileWidget.value = ''
-  fileWidget.callback?.('')
-  currentNode.onWidgetChanged?.('file', '', oldValue, fileWidget)
-
-  const graphId = currentNode.graph?.rootGraph?.id
-  if (graphId) {
-    useWidgetValueStore().setValue(
-      widgetId(graphId, currentNode.id, 'file'),
-      ''
-    )
-  }
-
-  useNodeOutputStore().removeNodeOutputsForNode(currentNode)
-  currentNode.imgs = undefined
-  currentNode.videoContainer = undefined
-
-  modelValue.value = {
-    trimEnabled: false,
-    startFrame: 0,
-    endFrame: 0
-  }
-  playheadFrame.value = 0
-  currentNode.graph?.setDirtyCanvas(true)
-}
-
-function handleDragOver(event: DragEvent) {
-  return node.value?.onDragOver?.(event) ?? false
-}
-
-function handleDragDrop(event: DragEvent) {
-  event.stopPropagation()
-  return node.value?.onDragDrop?.(event) ?? false
-}
-
-watch(videoUrl, (url, previousUrl) => {
-  playheadFrame.value = 0
-  if (url && url !== previousUrl) {
-    modelValue.value = {
-      ...modelValue.value,
-      trimEnabled: false,
-      startFrame: 0,
-      endFrame: 0
-    }
-  }
-})
-</script>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -61,7 +61,6 @@ defineExpose({ focus })
   >
     <button
       ref="buttonRef"
-      :disabled="disabled"
       :class="
         cn(
           theButtonStyle,

src/renderer/extensions/vueNodes/widgets/components/layout/index.ts

@@ -10,12 +10,3 @@ export const WidgetInputBaseClass = cn([
   // Rounded
   'rounded-lg'
 ])
-
-export const WidgetInputActionButtonClass = cn(
-  WidgetInputBaseClass,
-  'flex h-8 cursor-pointer items-center justify-center',
-  'not-disabled:hover:bg-component-node-widget-background-hovered',
-  'disabled:cursor-not-allowed disabled:bg-component-node-widget-background-disabled',
-  'disabled:text-muted-foreground disabled:opacity-50',
-  'disabled:hover:bg-component-node-widget-background-disabled'
-)

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

@@ -437,11 +437,8 @@ describe('useComboWidget', () => {
           ]
         )
 
-        const expectedDefault =
-          scenario.nodeClass === 'LoadVideo' ? '' : scenario.assetHash
-
-        expect(getInputWidgetDefault(mockNode)).toBe(expectedDefault)
-        expect(widget.value).toBe(expectedDefault)
+        expect(getInputWidgetDefault(mockNode)).toBe(scenario.assetHash)
+        expect(widget.value).toBe(scenario.assetHash)
       }
     )
 
@@ -471,11 +468,8 @@ describe('useComboWidget', () => {
           ]
         )
 
-        const expectedDefault =
-          scenario.nodeClass === 'LoadVideo' ? '' : scenario.assetHash
-
-        expect(getInputWidgetDefault(mockNode)).toBe(expectedDefault)
-        expect(widget.value).toBe(expectedDefault)
+        expect(getInputWidgetDefault(mockNode)).toBe(scenario.assetHash)
+        expect(widget.value).toBe(scenario.assetHash)
       }
     )
 
@@ -746,30 +740,6 @@ describe('useComboWidget', () => {
       expect(widget).toBe(mockWidget)
     })
 
-    it('should start LoadVideo with an empty file selection in OSS', () => {
-      const constructor = useComboWidget()
-      const mockWidget = createMockWidget()
-      const mockNode = createMockNode('LoadVideo')
-      vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-      const inputSpec = createMockInputSpec({
-        name: 'file',
-        options: ['edu social.mp4', 'other-video.mp4']
-      })
-
-      const widget = constructor(mockNode, inputSpec)
-
-      expect(mockNode.addWidget).toHaveBeenCalledWith(
-        'combo',
-        'file',
-        '',
-        expect.any(Function),
-        {
-          values: ['edu social.mp4', 'other-video.mp4']
-        }
-      )
-      expect(widget).toBe(mockWidget)
-    })
-
     it('should trigger lazy load for cloud input nodes', () => {
       const scenario = cloudInputScenarios[0]
       mockDistributionState.isCloud = true

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -25,10 +25,7 @@ import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
-const getDefaultValue = (inputSpec: ComboInputSpec, nodeType?: string) => {
-  if (nodeType === 'LoadVideo' && inputSpec.name === 'file') {
-    return ''
-  }
+const getDefaultValue = (inputSpec: ComboInputSpec) => {
   if (inputSpec.default) return inputSpec.default
   if (inputSpec.options?.length) return inputSpec.options[0]
   if (inputSpec.remote) return 'Loading...'
@@ -153,8 +150,6 @@ function resolveCloudInputDefault(
   nodeType: string | undefined,
   specDefault: string | undefined
 ): string | undefined {
-  if (nodeType === 'LoadVideo') return undefined
-
   const assets = getCloudInputAssets(nodeType)
   if (specDefault != null) {
     const matchingAsset =
@@ -243,7 +238,7 @@ const addComboWidget = (
   node: LGraphNode,
   inputSpec: ComboInputSpec
 ): IBaseWidget => {
-  const defaultValue = getDefaultValue(inputSpec, node.comfyClass)
+  const defaultValue = getDefaultValue(inputSpec)
 
   if (isCloud) {
     if (assetService.shouldUseAssetBrowser(node.comfyClass, inputSpec.name)) {

src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.test.ts

@@ -110,27 +110,4 @@ describe('useImageUploadWidget', () => {
       fileComboWidget
     )
   })
-
-  it('does not preload preview when the file widget starts empty', () => {
-    const { node } = createUploadNode()
-    node.widgets![0].value = ''
-    const constructor = useImageUploadWidget()
-
-    constructor(
-      node,
-      'upload',
-      [
-        'IMAGEUPLOAD',
-        { imageInputName: 'image', image_upload: true }
-      ] as InputSpec,
-      fromPartial({})
-    )
-
-    const raf = vi.mocked(requestAnimationFrame)
-    expect(raf).toHaveBeenCalledTimes(1)
-    raf.mock.calls[0]?.[0]?.(0)
-
-    expect(mocks.setNodeOutputs).not.toHaveBeenCalled()
-    expect(mocks.showPreview).not.toHaveBeenCalled()
-  })
 })

src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts

@@ -113,13 +113,9 @@ export const useImageUploadWidget = () => {
     // Add our own callback to the combo widget to render an image when it changes
     fileComboWidget.callback = function () {
       node.imgs = undefined
-      const raw = fileComboWidget.value
-      if (raw == null || raw === '' || raw === 'Loading...') {
-        nodeOutputStore.setNodeOutputs(node, '', { isAnimated })
-        node.graph?.setDirtyCanvas(true)
-        return
-      }
-      nodeOutputStore.setNodeOutputs(node, String(raw), { isAnimated })
+      nodeOutputStore.setNodeOutputs(node, String(fileComboWidget.value), {
+        isAnimated
+      })
       node.graph?.setDirtyCanvas(true)
     }
 
@@ -127,10 +123,7 @@ export const useImageUploadWidget = () => {
     // The value isn't set immediately so we need to wait a moment
     // No change callbacks seem to be fired on initial setting of the value
     requestAnimationFrame(() => {
-      const raw = fileComboWidget.value
-      if (raw == null || raw === '' || raw === 'Loading...') return
-
-      nodeOutputStore.setNodeOutputs(node, String(raw), {
+      nodeOutputStore.setNodeOutputs(node, String(fileComboWidget.value), {
         isAnimated
       })
       showPreview({ block: false })

src/renderer/extensions/vueNodes/widgets/composables/useVideoTrimWidget.test.ts

@@ -1,100 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-
-import { useVideoTrimWidget } from './useVideoTrimWidget'
-
-type MockWidget = {
-  type: string
-  name: string
-  value: string | number | boolean | object
-  callback?: (value: unknown) => void
-  options: Record<string, unknown>
-  y: number
-  linkedWidgets?: MockWidget[]
-}
-
-function createMockNode() {
-  const widgets: MockWidget[] = []
-
-  const node = {
-    widgets,
-    addWidget(
-      type: string,
-      name: string,
-      value: string | number | boolean | object,
-      callback: (value: unknown) => void,
-      options: Record<string, unknown> = {}
-    ) {
-      const widget: MockWidget = {
-        type,
-        name,
-        value,
-        callback,
-        options,
-        y: 0
-      }
-      widgets.push(widget)
-      return widget as unknown as IBaseWidget
-    }
-  } as unknown as LGraphNode
-
-  return { node, widgets }
-}
-
-describe('useVideoTrimWidget', () => {
-  it('creates parent and hidden linked trim widgets', () => {
-    const { node, widgets } = createMockNode()
-
-    const parent = useVideoTrimWidget(node)
-
-    expect(widgets).toHaveLength(4)
-    expect(parent.name).toBe('trim')
-    expect(parent.type).toBe('videotrim')
-    expect(parent.linkedWidgets).toHaveLength(3)
-    expect(
-      widgets.find((widget) => widget.name === 'trim_enabled')?.options
-    ).toMatchObject({
-      canvasOnly: true,
-      serialize: true
-    })
-  })
-
-  it('syncs sub-widgets when parent value changes', () => {
-    const { node, widgets } = createMockNode()
-    const parent = useVideoTrimWidget(node)
-
-    parent.value = {
-      trimEnabled: true,
-      startFrame: 12,
-      endFrame: 99
-    }
-    parent.callback?.(parent.value)
-
-    expect(
-      widgets.find((widget) => widget.name === 'trim_enabled')?.value
-    ).toBe(true)
-    expect(widgets.find((widget) => widget.name === 'start_frame')?.value).toBe(
-      12
-    )
-    expect(widgets.find((widget) => widget.name === 'end_frame')?.value).toBe(
-      99
-    )
-  })
-
-  it('updates parent when a linked sub-widget changes', () => {
-    const { node, widgets } = createMockNode()
-    const parent = useVideoTrimWidget(node)
-    const parentCallback = vi.fn()
-    parent.callback = parentCallback
-
-    const startFrameWidget = widgets.find(
-      (widget) => widget.name === 'start_frame'
-    )
-    startFrameWidget?.callback?.(45)
-
-    expect(parent.value.startFrame).toBe(45)
-    expect(parentCallback).toHaveBeenCalled()
-  })
-})

src/renderer/extensions/vueNodes/widgets/composables/useVideoTrimWidget.ts

@@ -1,126 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type {
-  IBaseWidget,
-  INumericWidget,
-  IVideoTrimWidget,
-  VideoTrimValue
-} from '@/lib/litegraph/src/types/widgets'
-
-function isNumericWidget(widget: IBaseWidget): widget is INumericWidget {
-  return widget.type === 'number'
-}
-
-function syncSubWidgets(
-  parent: IVideoTrimWidget,
-  trimEnabledWidget: IBaseWidget,
-  startFrameWidget: INumericWidget,
-  endFrameWidget: INumericWidget
-) {
-  trimEnabledWidget.value = parent.value.trimEnabled
-  startFrameWidget.value = parent.value.startFrame
-  endFrameWidget.value = parent.value.endFrame
-}
-
-/**
- * Adds the LoadVideo trim widget surface and linked sub-widgets.
- *
- * Extension migration: LoadVideo nodes now expose `trim` (videotrim),
- * `trim_enabled`, `start_frame`, and `end_frame` widgets. Code that reads
- * `node.widgets` by index or name should tolerate the new entries and prefer
- * lookup by widget name over positional access.
- */
-export function useVideoTrimWidget(node: LGraphNode) {
-  const defaultValue: VideoTrimValue = {
-    trimEnabled: false,
-    startFrame: 0,
-    endFrame: 0
-  }
-
-  const rawParent = node.addWidget(
-    'videotrim',
-    'trim',
-    { ...defaultValue },
-    () => {},
-    {
-      serialize: false,
-      canvasOnly: false
-    }
-  )
-
-  if (rawParent.type !== 'videotrim') {
-    throw new Error(`Unexpected widget type: ${rawParent.type}`)
-  }
-
-  const parent = rawParent as IVideoTrimWidget & {
-    linkedWidgets?: IBaseWidget[]
-  }
-
-  const trimEnabledWidget = node.addWidget(
-    'toggle',
-    'trim_enabled',
-    defaultValue.trimEnabled,
-    function (this: IBaseWidget, value: boolean) {
-      parent.value = { ...parent.value, trimEnabled: value }
-      parent.callback?.(parent.value)
-    },
-    {
-      serialize: true,
-      canvasOnly: true,
-      hidden: true
-    }
-  )
-
-  const startFrameWidget = node.addWidget(
-    'number',
-    'start_frame',
-    defaultValue.startFrame,
-    function (this: INumericWidget, value: number) {
-      this.value = Math.round(value)
-      parent.value = { ...parent.value, startFrame: this.value }
-      parent.callback?.(parent.value)
-    },
-    {
-      min: 0,
-      max: 999999,
-      step: 1,
-      step2: 1,
-      precision: 0,
-      serialize: true,
-      canvasOnly: true,
-      hidden: true
-    }
-  )
-
-  const endFrameWidget = node.addWidget(
-    'number',
-    'end_frame',
-    defaultValue.endFrame,
-    function (this: INumericWidget, value: number) {
-      this.value = Math.round(value)
-      parent.value = { ...parent.value, endFrame: this.value }
-      parent.callback?.(parent.value)
-    },
-    {
-      min: 0,
-      max: 999999,
-      step: 1,
-      step2: 1,
-      precision: 0,
-      serialize: true,
-      canvasOnly: true,
-      hidden: true
-    }
-  )
-
-  if (!isNumericWidget(startFrameWidget) || !isNumericWidget(endFrameWidget)) {
-    throw new Error('Unexpected numeric widget type for video trim')
-  }
-
-  parent.callback = () => {
-    syncSubWidgets(parent, trimEnabledWidget, startFrameWidget, endFrameWidget)
-  }
-
-  parent.linkedWidgets = [trimEnabledWidget, startFrameWidget, endFrameWidget]
-
-  return parent
-}

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -69,9 +69,6 @@ const WidgetPainter = defineAsyncComponent(
 const WidgetRange = defineAsyncComponent(
   () => import('@/components/range/WidgetRange.vue')
 )
-const WidgetVideoTrim = defineAsyncComponent(
-  () => import('../components/WidgetVideoTrim.vue')
-)
 const WidgetBoundingBoxes = defineAsyncComponent(
   () => import('@/components/boundingBoxes/WidgetBoundingBoxes.vue')
 )
@@ -229,14 +226,6 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
       essential: false
     }
   ],
-  [
-    'videotrim',
-    {
-      component: WidgetVideoTrim,
-      aliases: ['VIDEOTRIM'],
-      essential: false
-    }
-  ],
   [
     'boundingboxes',
     {

src/utils/httpResourceByteSize.test.ts

@@ -1,67 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import { fetchHttpResourceByteSize } from './httpResourceByteSize'
-
-describe('fetchHttpResourceByteSize', () => {
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('returns Content-Length from a plausible HEAD response', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
-      new Response(null, {
-        status: 200,
-        headers: { 'Content-Length': '5242880' }
-      })
-    )
-
-    await expect(
-      fetchHttpResourceByteSize('https://example.com/video.mp4')
-    ).resolves.toBe(5242880)
-  })
-
-  it('ignores implausible HEAD Content-Length and falls back to Range', async () => {
-    vi.spyOn(globalThis, 'fetch')
-      .mockResolvedValueOnce(
-        new Response(null, {
-          status: 200,
-          headers: { 'Content-Length': '53' }
-        })
-      )
-      .mockResolvedValueOnce(
-        new Response(null, {
-          status: 206,
-          headers: { 'Content-Range': 'bytes 0-0/5242880' }
-        })
-      )
-
-    await expect(
-      fetchHttpResourceByteSize('https://example.com/video.mp4')
-    ).resolves.toBe(5242880)
-  })
-
-  it('returns undefined when neither HEAD nor Range expose a total size', async () => {
-    vi.spyOn(globalThis, 'fetch')
-      .mockResolvedValueOnce(new Response(null, { status: 404 }))
-      .mockResolvedValueOnce(new Response(null, { status: 404 }))
-
-    await expect(
-      fetchHttpResourceByteSize('https://example.com/video.mp4')
-    ).resolves.toBeUndefined()
-  })
-
-  it('uses Content-Length from a full-body Range fallback response', async () => {
-    vi.spyOn(globalThis, 'fetch')
-      .mockResolvedValueOnce(new Response(null, { status: 404 }))
-      .mockResolvedValueOnce(
-        new Response(null, {
-          status: 200,
-          headers: { 'Content-Length': '5242880' }
-        })
-      )
-
-    await expect(
-      fetchHttpResourceByteSize('https://example.com/video.mp4')
-    ).resolves.toBe(5242880)
-  })
-})

src/utils/httpResourceByteSize.ts

@@ -1,50 +0,0 @@
-const CONTENT_RANGE_TOTAL = /\/(\d+)$/
-
-const MIN_PLAUSIBLE_VIDEO_BYTES = 1024
-
-function parseContentLength(header: string | null): number | undefined {
-  if (!header) return undefined
-  const bytes = Number.parseInt(header, 10)
-  if (!Number.isFinite(bytes) || bytes < MIN_PLAUSIBLE_VIDEO_BYTES) {
-    return undefined
-  }
-  return bytes
-}
-
-function parseContentRangeTotal(header: string | null): number | undefined {
-  if (!header) return undefined
-  const match = header.match(CONTENT_RANGE_TOTAL)
-  if (!match) return undefined
-  return parseContentLength(match[1])
-}
-
-export async function fetchHttpResourceByteSize(
-  url: string
-): Promise<number | undefined> {
-  try {
-    const headResponse = await fetch(url, { method: 'HEAD' })
-    if (headResponse.ok) {
-      const fromHead = parseContentLength(
-        headResponse.headers.get('Content-Length')
-      )
-      if (fromHead != null) return fromHead
-    }
-  } catch {
-    // Range fallback below
-  }
-
-  try {
-    const rangeResponse = await fetch(url, {
-      headers: { Range: 'bytes=0-0' }
-    })
-    if (rangeResponse.status === 206) {
-      return parseContentRangeTotal(rangeResponse.headers.get('Content-Range'))
-    }
-    if (rangeResponse.ok) {
-      return parseContentLength(rangeResponse.headers.get('Content-Length'))
-    }
-    return undefined
-  } catch {
-    return undefined
-  }
-}