docs: add staging environment setup instructions to CONTRIBUTING.md

Document how to test partner/API nodes that require cloud backend
authentication. Add two approaches:
- Frontend: pnpm dev:cloud or custom DEV_SERVER_COMFYUI_URL
- Backend: --comfy-api-base flag for staging API

CONTRIBUTING.md

@@ -62,6 +62,37 @@ python main.py --port 8188 --cpu
 - Run `pnpm dev:electron` to start the dev server with electron API mocked
 - Run `pnpm dev:cloud` to start the dev server against the cloud backend (instead of local ComfyUI server)
 
+#### Testing with Cloud & Staging Environments
+
+Some features — particularly **partner/API nodes** (e.g. BFL, OpenAI, Stability AI) — require a cloud backend for authentication and billing. Running these against a local ComfyUI instance will result in permission errors or logged-out states. There are two ways to connect to a cloud/staging backend:
+
+**Option 1: Frontend — `pnpm dev:cloud`**
+
+The simplest approach. This proxies all API requests to the test cloud environment:
+
+```bash
+pnpm dev:cloud
+```
+
+This sets `DEV_SERVER_COMFYUI_URL` to `https://testcloud.comfy.org/` automatically. You can also set this variable manually in your `.env` file to target a different environment:
+
+```bash
+# .env
+DEV_SERVER_COMFYUI_URL=https://stagingcloud.comfy.org/
+```
+
+Any `*.comfy.org` URL automatically enables cloud mode, which includes the GCS media proxy needed for viewing generated images and videos. See [.env_example](.env_example) for all available cloud URLs.
+
+**Option 2: Backend — `--comfy-api-base`**
+
+Alternatively, launch the ComfyUI backend pointed at the staging API:
+
+```bash
+python main.py --comfy-api-base https://stagingapi.comfy.org --verbose
+```
+
+Then run `pnpm dev` as usual. This keeps the frontend in local mode but routes backend API calls through staging.
+
 #### Access dev server on touch devices
 
 Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.

browser_tests/fixtures/components/BottomPanel.ts

@@ -20,8 +20,6 @@ export class BottomPanel {
   readonly root: Locator
   readonly keyboardShortcutsButton: Locator
   readonly toggleButton: Locator
-  readonly closeButton: Locator
-  readonly resizeGutter: Locator
   readonly shortcuts: ShortcutsTab
 
   constructor(readonly page: Page) {
@@ -32,10 +30,6 @@ export class BottomPanel {
     this.toggleButton = page.getByRole('button', {
       name: /Toggle Bottom Panel/i
     })
-    this.closeButton = this.root.getByRole('button', { name: /Close/i })
-    this.resizeGutter = page.locator(
-      '.splitter-overlay-bottom > .p-splitter-gutter'
-    )
     this.shortcuts = new ShortcutsTab(page)
   }
 }

browser_tests/fixtures/utils/slotBoundsUtil.ts

@@ -1,98 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
-
-export interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-export interface NodeSlotData {
-  nodeId: string
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Collect slot center offsets relative to the parent node element.
- * Returns `null` when the node element is not found.
- */
-export async function measureNodeSlotOffsets(
-  page: Page,
-  nodeId: string
-): Promise<NodeSlotData | null> {
-  return page.evaluate((id) => {
-    const nodeEl = document.querySelector(`[data-node-id="${id}"]`)
-    if (!nodeEl || !(nodeEl instanceof HTMLElement)) return null
-
-    const nodeRect = nodeEl.getBoundingClientRect()
-    const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-    const slots: SlotMeasurement[] = []
-
-    for (const slotEl of slotEls) {
-      const slotRect = slotEl.getBoundingClientRect()
-      slots.push({
-        key: (slotEl as HTMLElement).dataset.slotKey ?? 'unknown',
-        offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-        offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-      })
-    }
-
-    return {
-      nodeId: id,
-      nodeW: nodeRect.width,
-      nodeH: nodeRect.height,
-      slots
-    }
-  }, nodeId)
-}
-
-/**
- * Assert that every slot falls within the node dimensions (± `margin` px).
- */
-export function expectSlotsWithinBounds(
-  data: NodeSlotData,
-  margin: number,
-  label?: string
-) {
-  const prefix = label ? `${label}: ` : ''
-
-  for (const slot of data.slots) {
-    expect(
-      slot.offsetX,
-      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
-    ).toBeGreaterThanOrEqual(-margin)
-    expect(
-      slot.offsetX,
-      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
-    ).toBeLessThanOrEqual(data.nodeW + margin)
-
-    expect(
-      slot.offsetY,
-      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
-    ).toBeGreaterThanOrEqual(-margin)
-    expect(
-      slot.offsetY,
-      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
-    ).toBeLessThanOrEqual(data.nodeH + margin)
-  }
-}
-
-/**
- * Wait for slots, measure, and assert within bounds — single-node convenience.
- */
-export async function assertNodeSlotsWithinBounds(
-  page: Page,
-  nodeId: string,
-  margin: number = 20
-) {
-  await page
-    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
-    .first()
-    .waitFor()
-
-  const data = await measureNodeSlotOffsets(page, nodeId)
-  expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
-  expectSlotsWithinBounds(data!, margin, `Node ${nodeId}`)
-}

browser_tests/tests/bottomPanel.spec.ts

@@ -1,99 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Bottom Panel', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('should close panel via close button inside the panel', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    await bottomPanel.closeButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
-  })
-
-  test('should display resize gutter when panel is open', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-    await expect(bottomPanel.resizeGutter).toBeVisible()
-  })
-
-  test('should hide resize gutter when panel is closed', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await expect(bottomPanel.root).not.toBeVisible()
-    await expect(bottomPanel.resizeGutter).toBeHidden()
-  })
-
-  test('should resize panel by dragging the gutter', async ({ comfyPage }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const initialHeight = await bottomPanel.root.evaluate(
-      (el) => el.getBoundingClientRect().height
-    )
-
-    const gutterBox = await bottomPanel.resizeGutter.boundingBox()
-    expect(gutterBox, 'Resize gutter should have layout').not.toBeNull()
-
-    const gutterCenterX = gutterBox!.x + gutterBox!.width / 2
-    const gutterCenterY = gutterBox!.y + gutterBox!.height / 2
-
-    // Drag gutter upward to enlarge the bottom panel
-    await comfyPage.page.mouse.move(gutterCenterX, gutterCenterY)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(gutterCenterX, gutterCenterY - 100, {
-      steps: 5
-    })
-    await comfyPage.page.mouse.up()
-
-    const newHeight = await bottomPanel.root.evaluate(
-      (el) => el.getBoundingClientRect().height
-    )
-
-    expect(newHeight).toBeGreaterThan(initialHeight)
-  })
-
-  test('should not block canvas interactions when panel is closed', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    // Ensure panel is closed
-    await expect(bottomPanel.root).not.toBeVisible()
-
-    // Click the canvas without `force` -- Playwright's actionability checks
-    // will fail if an invisible overlay is intercepting pointer events.
-    await comfyPage.canvas.click({
-      position: { x: 100, y: 100 }
-    })
-  })
-
-  test('should close panel via close button from shortcuts view', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    await bottomPanel.closeButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
-  })
-})

browser_tests/tests/collapsedNodeLinks.spec.ts

@@ -1,68 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { assertNodeSlotsWithinBounds } from '../fixtures/utils/slotBoundsUtil'
-
-const NODE_ID = '3'
-const NODE_TITLE = 'KSampler'
-
-test.describe(
-  'Collapsed node link positions',
-  { tag: ['@canvas', '@node'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.canvasOps.resetView()
-    })
-
-    test('link endpoints stay within collapsed node bounds', async ({
-      comfyPage
-    }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-
-    test('links follow collapsed node after drag', async ({ comfyPage }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      const box = await node.boundingBox()
-      expect(box).not.toBeNull()
-      await comfyPage.page.mouse.move(
-        box!.x + box!.width / 2,
-        box!.y + box!.height / 2
-      )
-      await comfyPage.page.mouse.down()
-      await comfyPage.page.mouse.move(
-        box!.x + box!.width / 2 + 200,
-        box!.y + box!.height / 2 + 100,
-        { steps: 10 }
-      )
-      await comfyPage.page.mouse.up()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-
-    test('links recover correct positions after expand', async ({
-      comfyPage
-    }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-  }
-)

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -7,10 +7,6 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 
 import { comfyPageFixture as test, comfyExpect } from '../../fixtures/ComfyPage'
 import { SubgraphHelper } from '../../fixtures/helpers/SubgraphHelper'
-import {
-  expectSlotsWithinBounds,
-  measureNodeSlotOffsets
-} from '../../fixtures/utils/slotBoundsUtil'
 
 // Constants
 const RENAMED_INPUT_NAME = 'renamed_input'
@@ -23,6 +19,20 @@ const SELECTORS = {
   promptDialog: '.graphdialog input'
 } as const
 
+interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+interface NodeSlotData {
+  nodeId: string
+  isSubgraph: boolean
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
 test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -594,19 +604,71 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       )
       await comfyPage.nextFrame()
 
+      // Wait for slot elements to appear in DOM
       await comfyPage.page.locator('[data-slot-key]').first().waitFor()
 
-      const nodeIds = await comfyPage.page.evaluate(() =>
-        window
-          .app!.graph._nodes.filter((n) => !!n.isSubgraphNode?.())
-          .map((n) => String(n.id))
-      )
-      expect(nodeIds.length).toBeGreaterThan(0)
+      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.graph._nodes
+        const slotData: NodeSlotData[] = []
 
-      for (const nodeId of nodeIds) {
-        const data = await measureNodeSlotOffsets(comfyPage.page, nodeId)
-        expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
-        expectSlotsWithinBounds(data!, SLOT_BOUNDS_MARGIN, `Node ${nodeId}`)
+        for (const node of nodes) {
+          const nodeId = String(node.id)
+          const nodeEl = document.querySelector(
+            `[data-node-id="${nodeId}"]`
+          ) as HTMLElement | null
+          if (!nodeEl) continue
+
+          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+          if (slotEls.length === 0) continue
+
+          const slots: SlotMeasurement[] = []
+
+          const nodeRect = nodeEl.getBoundingClientRect()
+          for (const slotEl of slotEls) {
+            const slotRect = slotEl.getBoundingClientRect()
+            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
+            slots.push({
+              key: slotKey,
+              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+            })
+          }
+
+          slotData.push({
+            nodeId,
+            isSubgraph: !!node.isSubgraphNode?.(),
+            nodeW: nodeRect.width,
+            nodeH: nodeRect.height,
+            slots
+          })
+        }
+
+        return slotData
+      })
+
+      const subgraphNodes = result.filter((n) => n.isSubgraph)
+      expect(subgraphNodes.length).toBeGreaterThan(0)
+
+      for (const node of subgraphNodes) {
+        for (const slot of node.slots) {
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
+
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
+        }
       }
     })
   })

src/components/graph/widgets/domWidgetZIndex.test.ts

@@ -1,4 +1,4 @@
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -15,7 +15,7 @@ describe('getDomWidgetZIndex', () => {
     first.order = 0
     second.order = 1
 
-    const nodes = fromPartial<{ _nodes: LGraphNode[] }>(graph)._nodes
+    const nodes = fromAny<{ _nodes: LGraphNode[] }, unknown>(graph)._nodes
     nodes.splice(nodes.indexOf(first), 1)
     nodes.push(first)
 

src/components/load3d/Load3dViewerContent.vue

@@ -197,15 +197,4 @@ onBeforeUnmount(() => {
 :deep(.p-panel-content) {
   padding: 0;
 }
-
-:deep(.p-slider) {
-  height: 6px;
-}
-
-:deep(.p-slider-handle) {
-  width: 14px;
-  height: 14px;
-  margin-top: -4px;
-  margin-left: -7px;
-}
 </style>

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="space-y-4">
-    <div class="flex flex-col gap-2">
-      <label>{{ t('load3d.viewer.cameraType') }}</label>
+    <div class="space-y-4">
+      <label>
+        {{ t('load3d.viewer.cameraType') }}
+      </label>
       <Select
         v-model="cameraType"
         :options="cameras"
@@ -11,7 +13,7 @@
       </Select>
     </div>
 
-    <div v-if="showFOVButton" class="flex flex-col gap-2">
+    <div v-if="showFOVButton" class="space-y-4">
       <label>{{ t('load3d.fov') }}</label>
       <Slider
         v-model="fov"

src/components/load3d/controls/viewer/ViewerLightControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="space-y-4">
     <label>{{ $t('load3d.lightIntensity') }}</label>
 
     <Slider

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-4">
-    <div class="flex flex-col gap-2">
+    <div>
       <label>{{ $t('load3d.upDirection') }}</label>
       <Select
         v-model="upDirection"
@@ -10,7 +10,7 @@
       />
     </div>
 
-    <div v-if="!hideMaterialMode" class="flex flex-col gap-2">
+    <div v-if="!hideMaterialMode">
       <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="space-y-4">
-    <div v-if="!hasBackgroundImage" class="flex flex-col gap-2">
+    <div v-if="!hasBackgroundImage">
       <label>
         {{ $t('load3d.backgroundColor') }}
       </label>
-      <input v-model="backgroundColor" type="color" class="h-8 w-full" />
+      <input v-model="backgroundColor" type="color" class="w-full" />
     </div>
 
     <div>

src/core/graph/subgraph/matchPromotedInput.test.ts

@@ -1,4 +1,4 @@
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -31,11 +31,12 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      fromPartial<
+      fromAny<
         Array<{
           name: string
           _widget?: IBaseWidget
-        }>
+        }>,
+        unknown
       >([aliasInput, exactInput]),
       targetWidget
     )
@@ -50,7 +51,9 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      fromPartial<Array<{ name: string; _widget?: IBaseWidget }>>([aliasInput]),
+      fromAny<Array<{ name: string; _widget?: IBaseWidget }>, unknown>([
+        aliasInput
+      ]),
       targetWidget
     )
 
@@ -67,11 +70,12 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      fromPartial<
+      fromAny<
         Array<{
           name: string
           _widget?: IBaseWidget
-        }>
+        }>,
+        unknown
       >([firstAliasInput, secondAliasInput]),
       targetWidget
     )

src/core/graph/subgraph/promotedWidgetView.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
-import { fromAny, fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 
 // Barrel import must come first to avoid circular dependency
 // (promotedWidgetView → widgetMap → BaseWidget → LegacyWidget → barrel)
@@ -293,7 +293,7 @@ describe(createPromotedWidgetView, () => {
       value: 'initial',
       options: {}
     } satisfies Pick<IBaseWidget, 'name' | 'type' | 'value' | 'options'>
-    const fallbackWidget = fromPartial<IBaseWidget>(fallbackWidgetShape)
+    const fallbackWidget = fromAny<IBaseWidget, unknown>(fallbackWidgetShape)
     innerNode.widgets = [fallbackWidget]
 
     const widgetValueStore = useWidgetValueStore()

src/core/graph/subgraph/promotionUtils.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -30,7 +30,7 @@ function widget(
     Pick<IBaseWidget, 'name' | 'serialize' | 'type' | 'options'>
   >
 ): IBaseWidget {
-  return fromPartial<IBaseWidget>({ name: 'widget', ...overrides })
+  return fromAny<IBaseWidget, unknown>({ name: 'widget', ...overrides })
 }
 
 describe('isPreviewPseudoWidget', () => {

src/renderer/extensions/vueNodes/composables/useSlotElementTracking.test.ts

@@ -19,27 +19,11 @@ import {
 } from './useSlotElementTracking'
 
 const mockGraph = vi.hoisted(() => ({ _nodes: [] as unknown[] }))
-const mockCanvasState = vi.hoisted(() => ({
-  canvas: {} as object | null
-}))
-const mockClientPosToCanvasPos = vi.hoisted(() =>
-  vi.fn(([x, y]: [number, number]) => [x * 0.5, y * 0.5] as [number, number])
-)
 
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { graph: mockGraph, setDirty: vi.fn() } }
 }))
 
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => mockCanvasState
-}))
-
-vi.mock('@/composables/element/useCanvasPositionConversion', () => ({
-  useSharedCanvasPositionConversion: () => ({
-    clientPosToCanvasPos: mockClientPosToCanvasPos
-  })
-}))
-
 const NODE_ID = 'test-node'
 const SLOT_INDEX = 0
 
@@ -61,10 +45,9 @@ function createWrapperComponent(type: 'input' | 'output') {
   })
 }
 
-function createSlotElement(collapsed = false): HTMLElement {
+function createSlotElement(): HTMLElement {
   const container = document.createElement('div')
   container.dataset.nodeId = NODE_ID
-  if (collapsed) container.dataset.collapsed = ''
   container.getBoundingClientRect = () =>
     ({
       left: 0,
@@ -130,8 +113,6 @@ describe('useSlotElementTracking', () => {
       actor: 'test'
     })
     mockGraph._nodes = [{ id: 1 }]
-    mockCanvasState.canvas = {}
-    mockClientPosToCanvasPos.mockClear()
   })
 
   it.each([
@@ -270,57 +251,4 @@ describe('useSlotElementTracking', () => {
 
     expect(batchUpdateSpy).not.toHaveBeenCalled()
   })
-
-  describe('collapsed node slot sync', () => {
-    function registerCollapsedSlot() {
-      const slotKey = getSlotKey(NODE_ID, SLOT_INDEX, true)
-      const slotEl = createSlotElement(true)
-
-      const registryStore = useNodeSlotRegistryStore()
-      const node = registryStore.ensureNode(NODE_ID)
-      node.slots.set(slotKey, {
-        el: slotEl,
-        index: SLOT_INDEX,
-        type: 'input',
-        cachedOffset: { x: 50, y: 60 }
-      })
-
-      return { slotKey, node }
-    }
-
-    it('uses clientPosToCanvasPos for collapsed nodes', () => {
-      const { slotKey } = registerCollapsedSlot()
-
-      syncNodeSlotLayoutsFromDOM(NODE_ID)
-
-      // Slot element center: (10 + 10/2, 30 + 10/2) = (15, 35)
-      const screenCenter: [number, number] = [15, 35]
-      expect(mockClientPosToCanvasPos).toHaveBeenCalledWith(screenCenter)
-
-      // Mock returns x*0.5, y*0.5
-      const layout = layoutStore.getSlotLayout(slotKey)
-      expect(layout).not.toBeNull()
-      expect(layout!.position.x).toBe(screenCenter[0] * 0.5)
-      expect(layout!.position.y).toBe(screenCenter[1] * 0.5)
-    })
-
-    it('clears cachedOffset for collapsed nodes', () => {
-      const { slotKey, node } = registerCollapsedSlot()
-      const entry = node.slots.get(slotKey)!
-      expect(entry.cachedOffset).toBeDefined()
-
-      syncNodeSlotLayoutsFromDOM(NODE_ID)
-
-      expect(entry.cachedOffset).toBeUndefined()
-    })
-
-    it('defers sync when canvas is not initialized', () => {
-      mockCanvasState.canvas = null
-      registerCollapsedSlot()
-
-      syncNodeSlotLayoutsFromDOM(NODE_ID)
-
-      expect(mockClientPosToCanvasPos).not.toHaveBeenCalled()
-    })
-  })
 })

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

@@ -8,9 +8,7 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { app } from '@/scripts/app'
@@ -136,26 +134,11 @@ export function syncNodeSlotLayoutsFromDOM(nodeId: string) {
     .value?.el.closest('[data-node-id]')
   const nodeEl = closestNode instanceof HTMLElement ? closestNode : null
   const nodeRect = nodeEl?.getBoundingClientRect()
-
-  // Collapsed nodes preserve expanded size in layoutStore, so DOM-relative
-  // scale derivation breaks. Fall back to clientPosToCanvasPos instead.
-  const isCollapsed = nodeEl?.dataset.collapsed != null
   const effectiveScale =
-    !isCollapsed && nodeRect && nodeLayout.size.width > 0
+    nodeRect && nodeLayout.size.width > 0
       ? nodeRect.width / nodeLayout.size.width
       : 0
 
-  const canvasStore = useCanvasStore()
-  const conv =
-    isCollapsed && canvasStore.canvas
-      ? useSharedCanvasPositionConversion()
-      : null
-
-  if (isCollapsed && !conv) {
-    scheduleSlotLayoutSync(nodeId)
-    return
-  }
-
   const batch: Array<{ key: string; layout: SlotLayout }> = []
 
   for (const [slotKey, entry] of node.slots) {
@@ -172,30 +155,22 @@ export function syncNodeSlotLayoutsFromDOM(nodeId: string) {
       rect.top + rect.height / 2
     ]
 
-    let centerCanvas: { x: number; y: number }
+    if (!nodeRect || effectiveScale <= 0) continue
 
-    if (conv) {
-      const [cx, cy] = conv.clientPosToCanvasPos(screenCenter)
-      centerCanvas = { x: cx, y: cy }
-      entry.cachedOffset = undefined
-    } else {
-      if (!nodeRect || effectiveScale <= 0) continue
+    // DOM-relative measurement: compute offset from the node element's
+    // top-left corner in canvas units. The node element is rendered at
+    // (position.x, position.y - NODE_TITLE_HEIGHT), so the Y offset
+    // must subtract NODE_TITLE_HEIGHT to be relative to position.y.
+    entry.cachedOffset = {
+      x: (screenCenter[0] - nodeRect.left) / effectiveScale,
+      y:
+        (screenCenter[1] - nodeRect.top) / effectiveScale -
+        LiteGraph.NODE_TITLE_HEIGHT
+    }
 
-      // DOM-relative measurement: compute offset from the node element's
-      // top-left corner in canvas units. The node element is rendered at
-      // (position.x, position.y - NODE_TITLE_HEIGHT), so the Y offset
-      // must subtract NODE_TITLE_HEIGHT to be relative to position.y.
-      entry.cachedOffset = {
-        x: (screenCenter[0] - nodeRect.left) / effectiveScale,
-        y:
-          (screenCenter[1] - nodeRect.top) / effectiveScale -
-          LiteGraph.NODE_TITLE_HEIGHT
-      }
-
-      centerCanvas = {
-        x: nodeLayout.position.x + entry.cachedOffset.x,
-        y: nodeLayout.position.y + entry.cachedOffset.y
-      }
+    const centerCanvas = {
+      x: nodeLayout.position.x + entry.cachedOffset.x,
+      y: nodeLayout.position.y + entry.cachedOffset.y
     }
 
     const nextLayout = createSlotLayout({

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

@@ -15,8 +15,8 @@ import { useDocumentVisibility } from '@vueuse/core'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import {

src/stores/nodeOutputStore.test.ts

@@ -32,7 +32,7 @@ vi.mock('@/scripts/app', () => ({
 }))
 
 const createMockNode = (overrides: Record<string, unknown> = {}): LGraphNode =>
-  fromAny<LGraphNode, unknown>({
+  fromAny<LGraphNode, Record<string, unknown>>({
     id: 1,
     type: 'TestNode',
     ...overrides

src/stores/subgraphNavigationStore.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -20,7 +20,7 @@ function createMockSubgraph(id: string, rootGraph = app.rootGraph): Subgraph {
     nodes: []
   } satisfies MockSubgraph
 
-  return fromPartial<Subgraph>(mockSubgraph)
+  return fromAny<Subgraph, unknown>(mockSubgraph)
 }
 
 vi.mock('@/scripts/app', () => {

src/utils/widgetUtil.test.ts

@@ -1,4 +1,4 @@
-import { fromAny, fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
@@ -50,7 +50,7 @@ describe('getWidgetDefaultValue', () => {
 })
 
 function makeWidget(overrides: Record<string, unknown> = {}): IBaseWidget {
-  return fromPartial<IBaseWidget>({
+  return fromAny<IBaseWidget, unknown>({
     name: 'myWidget',
     type: 'number',
     value: 0,