fix: track workflow status dismissal updates

.github/workflows/cla.yml

@@ -1,63 +0,0 @@
-name: CLA Assistant
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_target:
-    types: [opened, synchronize, closed]
-  merge_group:
-
-permissions:
-  actions: write
-  contents: read # 'read' is enough because signatures live in a REMOTE repo
-  pull-requests: write
-  statuses: write
-
-jobs:
-  cla-assistant:
-    runs-on: ubuntu-latest
-    steps:
-      - name: CLA Assistant
-        # Run on PR events, on "recheck" comment, or when someone posts the exact signing phrase.
-        # IMPORTANT: this phrase must match `custom-pr-sign-comment` below.
-        if: >
-          github.event_name == 'pull_request_target' ||
-          github.event.comment.body == 'recheck' ||
-          github.event.comment.body == 'I have read and agree to the Contributor License Agreement'
-        uses: contributor-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # PAT required to write to the centralized signatures repo.
-          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
-        with:
-          # Where the CLA document lives (shown to contributors)
-          path-to-document: https://github.com/Comfy-Org/comfy-cla/blob/main/comfyui_icla.md
-
-          # Centralized signature storage
-          remote-organization-name: comfy-org
-          remote-repository-name: comfy-cla
-          path-to-signatures: signatures/cla.json
-          branch: main
-
-          # Allowlist bots so they don't need to sign (optional, comma-separated).
-          # *[bot] is a catch-all for any GitHub App bot account.
-          allowlist: actions-user,ampagent,claude,coderabbitai[bot],comfy-pr-bot,dependabot[bot],github-actions[bot],copilot-swe-agent[bot],devin-ai-integration[bot],*[bot]
-
-          # Custom PR comment messages
-          custom-notsigned-prcomment: |
-            🎉 Thank you for your contribution, we really appreciate it! 🎉
-
-            Like many open source projects, we require contributors to sign our [Contributor License Agreement (CLA)](https://github.com/Comfy-Org/comfy-cla/blob/main/comfyui_icla.md). A CLA makes the ownership of contributions explicit, so contributors and the project share a clear understanding of how the code can be used. By signing, you:
-
-            - Confirm that you own your contribution.
-            - Keep the right to reuse your own code.
-            - Grant us a copyright license to include and share it within our projects.
-
-            CLAs are standard practice across major open source projects including those under the Apache Software Foundation and the Linux Foundation. Ours is based on the Apache Software Foundation's CLA. Most importantly, it would enable us to relicense the project under a more permissive license in the future, giving the project and its community greater flexibility.
-
-            ✍ **To sign, please post a new comment on this PR with exactly the following text:** ✍
-
-          custom-pr-sign-comment: I have read and agree to the Contributor License Agreement
-
-          custom-allsigned-prcomment: |
-            ✅ All contributors have signed the CLA. Thank you! This PR is ready to be merged.

AGENTS.md

@@ -179,9 +179,6 @@ This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g
 23. Favor pure functions (especially testable ones)
 24. Do not use function expressions if it's possible to use function declarations instead
 25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
-26. Do not add alias helpers whose implementation is just a single-line call to another function
-    - Bad: `function id(value) { return nodeId(value) }`
-    - Use the real function directly, or introduce a named helper only when it adds validation, branching, domain meaning, or shared behavior beyond renaming
 
 ## Design Standards
 

browser_tests/fixtures/ComfyPage.ts

@@ -56,16 +56,12 @@ class ComfyPropertiesPanel {
   readonly panelTitle: Locator
   readonly searchBox: Locator
   readonly titleEditor: TitleEditor
-  readonly toggleButton: Locator
 
   constructor(readonly page: Page) {
     this.root = page.getByTestId(TestIds.propertiesPanel.root)
     this.panelTitle = this.root.locator('h3')
     this.searchBox = this.root.getByPlaceholder(/^Search/)
     this.titleEditor = new TitleEditor(this.root)
-    this.toggleButton = page.getByRole('button', {
-      name: 'Toggle properties panel'
-    })
   }
 }
 

browser_tests/fixtures/selectors.ts

@@ -112,10 +112,6 @@ export const TestIds = {
     root: 'properties-panel',
     errorsTab: 'panel-tab-errors'
   },
-  assets: {
-    browserModal: 'asset-browser-modal',
-    card: 'asset-card'
-  },
   subgraphEditor: {
     hiddenSection: 'subgraph-editor-hidden-section',
     iconEye: 'icon-eye',

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -223,23 +223,4 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(comfyPage.settingDialog.root).toBeVisible()
     await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
   })
-
-  test('should focus keybindings search when opening manage shortcuts', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.keyboardShortcutsButton.click()
-    await bottomPanel.shortcuts.manageButton.click()
-
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
-
-    await expect(
-      comfyPage.page.getByPlaceholder('Search Keybindings...')
-    ).toBeFocused()
-    await expect(
-      comfyPage.page.getByPlaceholder('Search Settings...')
-    ).not.toBeFocused()
-  })
 })

browser_tests/tests/cloud-asset-promoted-widget.spec.ts

@@ -1,99 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
-
-import {
-  assetRequestIncludesTag,
-  createCloudAssetsFixture
-} from '@e2e/fixtures/assetApiFixture'
-import {
-  STABLE_CHECKPOINT,
-  STABLE_CHECKPOINT_2
-} from '@e2e/fixtures/data/assetFixtures'
-import { TestIds } from '@e2e/fixtures/selectors'
-
-const WORKFLOW = 'missing/missing_model_promoted_widget'
-const HOST_NODE_ID = 2
-const WIDGET_NAME = 'ckpt_name'
-const SELECTED_MODEL = STABLE_CHECKPOINT_2.name
-
-const test = createCloudAssetsFixture([STABLE_CHECKPOINT, STABLE_CHECKPOINT_2])
-
-interface WidgetSnapshot {
-  type: string
-  value: string
-  hasLayout: boolean
-}
-
-async function getHostWidgetSnapshot(page: Page): Promise<WidgetSnapshot> {
-  return await page.evaluate(
-    ({ nodeId, widgetName }) => {
-      const node = window.app!.graph.getNodeById(nodeId)
-      const widget = node?.widgets?.find((widget) => widget.name === widgetName)
-
-      return {
-        type: widget?.type ?? '',
-        value: String(widget?.value ?? ''),
-        hasLayout: widget?.last_y != null
-      }
-    },
-    { nodeId: HOST_NODE_ID, widgetName: WIDGET_NAME }
-  )
-}
-
-test.describe(
-  'Promoted subgraph asset widgets',
-  { tag: ['@cloud', '@canvas', '@widget'] },
-  () => {
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.nodeOps.clearGraph()
-    })
-
-    test('legacy asset browser selection updates the promoted host widget value', async ({
-      cloudAssetRequests,
-      comfyPage
-    }) => {
-      await comfyPage.settings.setSetting('Comfy.Assets.UseAssetAPI', true)
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-      await expect
-        .poll(
-          () =>
-            cloudAssetRequests.some((url) =>
-              assetRequestIncludesTag(url, 'checkpoints')
-            ),
-          { timeout: 10_000 }
-        )
-        .toBe(true)
-      await expect
-        .poll(() => getHostWidgetSnapshot(comfyPage.page))
-        .toMatchObject({
-          type: 'asset',
-          hasLayout: true
-        })
-      const initialWidget = await getHostWidgetSnapshot(comfyPage.page)
-      expect(initialWidget.value).not.toBe(SELECTED_MODEL)
-
-      const hostNode = await comfyPage.nodeOps.getNodeRefById(HOST_NODE_ID)
-      await hostNode.centerOnNode()
-      const promotedWidget = await hostNode.getWidgetByName(WIDGET_NAME)
-      await promotedWidget.click()
-
-      const modal = comfyPage.page.getByTestId(TestIds.assets.browserModal)
-      await expect(modal).toBeVisible()
-
-      const assetCard = modal
-        .getByTestId(TestIds.assets.card)
-        .filter({ hasText: SELECTED_MODEL })
-        .first()
-      await expect(assetCard).toBeVisible()
-      await assetCard.getByRole('button', { name: 'Use' }).click()
-
-      await expect(modal).toBeHidden()
-      await expect
-        .poll(() =>
-          getHostWidgetSnapshot(comfyPage.page).then((widget) => widget.value)
-        )
-        .toBe(SELECTED_MODEL)
-    })
-  }
-)

browser_tests/tests/subgraph/subgraphLifecycle.spec.ts

@@ -1,9 +1,6 @@
-import type { ConsoleMessage } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
 import { getPseudoPreviewWidgets } from '@e2e/fixtures/utils/promotedWidgets'
 
 const domPreviewSelector = '.image-preview'
@@ -98,225 +95,4 @@ test.describe('Subgraph Lifecycle', { tag: ['@subgraph'] }, () => {
       await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
     })
   })
-
-  test.describe('Detach Race Repro', { tag: ['@vue-nodes'] }, () => {
-    const SUBGRAPH_NODE_TITLE = 'New Subgraph'
-
-    // Queues legacy onNodeRemoved/onSelectionChange so unpack completes first,
-    // widening the race window so a guard regression deterministically surfaces.
-    async function deferLegacyHandlers(comfyPage: ComfyPage) {
-      return await comfyPage.page.evaluateHandle(() => {
-        const graph = window.app!.graph!
-        const canvas = window.app!.canvas!
-        const queue: Array<() => void> = []
-        const originalNodeRemoved = graph.onNodeRemoved
-        const originalSelectionChange = canvas.onSelectionChange
-        graph.onNodeRemoved = function (node) {
-          queue.push(() => originalNodeRemoved?.call(this, node))
-        }
-        canvas.onSelectionChange = function (selected) {
-          queue.push(() => originalSelectionChange?.call(this, selected))
-        }
-        return {
-          drain: () => {
-            for (const fn of queue.splice(0)) fn()
-          },
-          restore: () => {
-            graph.onNodeRemoved = originalNodeRemoved
-            canvas.onSelectionChange = originalSelectionChange
-          }
-        }
-      })
-    }
-
-    type DeferredHandlers = Awaited<ReturnType<typeof deferLegacyHandlers>>
-
-    // Defers only the legacy selection-change callback, so the detached host
-    // node lingers in the reactive selection while onNodeRemoved still runs
-    // normally and clears it from the canvas. This isolates the panel render
-    // path: a panel mounted during this window reads the stale selection.
-    async function deferSelectionChange(
-      comfyPage: ComfyPage
-    ): Promise<DeferredHandlers> {
-      return await comfyPage.page.evaluateHandle(() => {
-        const canvas = window.app!.canvas!
-        const queue: Array<() => void> = []
-        const original = canvas.onSelectionChange
-        canvas.onSelectionChange = function (selected) {
-          queue.push(() => original?.call(this, selected))
-        }
-        return {
-          drain: () => {
-            for (const fn of queue.splice(0)) fn()
-          },
-          restore: () => {
-            canvas.onSelectionChange = original
-          }
-        }
-      })
-    }
-
-    function isNullGraphErrorText(text: string): boolean {
-      return text.includes('NullGraphError') || text.endsWith('has no graph')
-    }
-
-    // Vue's default errorHandler routes render throws to console.error,
-    // not pageerror - listen to both.
-    function captureNullGraphErrors(comfyPage: ComfyPage) {
-      const captured: string[] = []
-      const onPageError = (err: Error) => {
-        if (
-          err.name === 'NullGraphError' ||
-          isNullGraphErrorText(err.message ?? '')
-        ) {
-          captured.push(`pageerror ${err.name}: ${err.message}`)
-        }
-      }
-      const onConsoleMessage = (msg: ConsoleMessage) => {
-        if (msg.type() !== 'error') return
-        const text = msg.text()
-        if (isNullGraphErrorText(text)) {
-          captured.push(`console.error: ${text}`)
-        }
-      }
-      comfyPage.page.on('pageerror', onPageError)
-      comfyPage.page.on('console', onConsoleMessage)
-      return {
-        getErrors: () => [...captured],
-        stop: () => {
-          comfyPage.page.off('pageerror', onPageError)
-          comfyPage.page.off('console', onConsoleMessage)
-        }
-      }
-    }
-
-    async function unpackViaContextMenu(comfyPage: ComfyPage, title: string) {
-      const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-      await comfyPage.contextMenu.openForVueNode(fixture.header)
-      await comfyPage.contextMenu.clickMenuItemExact('Unpack Subgraph')
-    }
-
-    async function reopenRightSidePanel(comfyPage: ComfyPage) {
-      const { propertiesPanel } = comfyPage.menu
-      await propertiesPanel.toggleButton.click()
-      await expect(propertiesPanel.root).toBeHidden()
-      await propertiesPanel.toggleButton.click()
-      await comfyPage.nextFrame()
-    }
-
-    // Unpacks the subgraph behind deferred teardown, runs an optional
-    // interaction while the node is detached but not yet cleaned up, then
-    // drains the deferred handlers and reports any NullGraphErrors seen.
-    async function unpackAndCaptureNullGraphErrors(
-      comfyPage: ComfyPage,
-      options: {
-        defer: (comfyPage: ComfyPage) => Promise<DeferredHandlers>
-        duringWindow?: (comfyPage: ComfyPage) => Promise<void>
-      }
-    ): Promise<string[]> {
-      const subgraphNode =
-        comfyPage.vueNodes.getNodeByTitle(SUBGRAPH_NODE_TITLE)
-      const errors = captureNullGraphErrors(comfyPage)
-      const deferred = await options.defer(comfyPage)
-      try {
-        await unpackViaContextMenu(comfyPage, SUBGRAPH_NODE_TITLE)
-        await expect(subgraphNode).toHaveCount(0)
-        await options.duringWindow?.(comfyPage)
-        await deferred.evaluate((handlers) => handlers.drain())
-        // Let drained-handler reactive flushes settle before stop().
-        await comfyPage.nextFrame()
-        return errors.getErrors()
-      } finally {
-        await deferred.evaluate((handlers) => handlers.restore())
-        await deferred.dispose()
-        errors.stop()
-      }
-    }
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', true)
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      const subgraphNode =
-        comfyPage.vueNodes.getNodeByTitle(SUBGRAPH_NODE_TITLE)
-      await expect(subgraphNode).toBeVisible()
-
-      const fixture =
-        await comfyPage.vueNodes.getFixtureByTitle(SUBGRAPH_NODE_TITLE)
-      await fixture.header.click()
-      await expect(
-        comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
-      ).toBeVisible()
-      await comfyPage.nextFrame()
-    })
-
-    test('unpack does not surface NullGraphError on the LGraphNode render path', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferLegacyHandlers
-      })
-      expect(
-        nullGraphErrors,
-        'LGraphNode render path: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('unpack does not surface NullGraphError from the TabSubgraphInputs panel', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferLegacyHandlers
-      })
-      expect(
-        nullGraphErrors,
-        'TabSubgraphInputs panel: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('unpack with subgraph editor open does not surface NullGraphError from the SubgraphEditor panel', async ({
-      comfyPage
-    }) => {
-      await comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle).click()
-      await comfyPage.nextFrame()
-
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferLegacyHandlers
-      })
-      expect(
-        nullGraphErrors,
-        'SubgraphEditor panel: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('reopening the right side panel after unpack does not surface NullGraphError', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferSelectionChange,
-        duringWindow: reopenRightSidePanel
-      })
-      expect(
-        nullGraphErrors,
-        'TabSubgraphInputs remount: stale selection must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('reopening the right side panel with the subgraph editor open does not surface NullGraphError', async ({
-      comfyPage
-    }) => {
-      await comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle).click()
-      await comfyPage.nextFrame()
-
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferSelectionChange,
-        duringWindow: reopenRightSidePanel
-      })
-      expect(
-        nullGraphErrors,
-        'SubgraphEditor remount: stale selection must not surface NullGraphError'
-      ).toEqual([])
-    })
-  })
 })

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

@@ -335,30 +335,6 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.canvasOps.moveMouseToEmptyArea()
   })
 
-  test('pointerCancel stops autopan', async ({ comfyPage }) => {
-    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-    await ksampler.header.click({ trial: true })
-    await comfyPage.page.mouse.down()
-
-    const getOffset = () => comfyPage.canvasOps.getOffset()
-    const initialOffset = await getOffset()
-    await comfyPage.page.mouse.move(10, 10, { steps: 20 })
-    await expect.poll(getOffset, 'drag with autopan').not.toEqual(initialOffset)
-
-    await test.step('move outside pan range and cancel drag', async () => {
-      await comfyPage.page.mouse.move(400, 400, { steps: 20 })
-      await ksampler.header.evaluate((node) =>
-        node.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
-      )
-    })
-
-    const secondaryOffset = await getOffset()
-
-    await comfyPage.page.mouse.move(10, 10, { steps: 20 })
-    await comfyPage.nextFrame()
-    expect(await getOffset(), 'drag canceled').toEqual(secondaryOffset)
-  })
-
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

src/components/boundingBoxes/WidgetBoundingBoxes.test.ts

@@ -1,224 +0,0 @@
-/* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { createPinia, setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import WidgetBoundingBoxes from './WidgetBoundingBoxes.vue'
-import boundingBoxes from '@/locales/en/main.json'
-import type { BoundingBox } from '@/types/boundingBoxes'
-
-const { appState } = vi.hoisted(() => ({ appState: { node: null as unknown } }))
-
-vi.mock('@/scripts/app', () => ({
-  app: { canvas: { graph: { getNodeById: () => appState.node } } }
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      boundingBoxes: boundingBoxes.boundingBoxes,
-      palette: { swatchTitle: 'Edit', addColor: 'Add' }
-    }
-  }
-})
-
-const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
-  x: 51,
-  y: 51,
-  width: 256,
-  height: 256,
-  metadata: { type: 'obj', text: '', desc: '', palette: ['#ff0000'] },
-  ...over
-})
-
-const fakeCtx = {
-  measureText: (s: string) => ({ width: s.length * 7 }),
-  setTransform: () => {},
-  clearRect: () => {},
-  fillRect: () => {},
-  strokeRect: () => {},
-  fillText: () => {},
-  drawImage: () => {},
-  save: () => {},
-  restore: () => {},
-  beginPath: () => {},
-  rect: () => {},
-  clip: () => {},
-  font: '',
-  fillStyle: '',
-  strokeStyle: '',
-  lineWidth: 0
-} as unknown as CanvasRenderingContext2D
-
-function prepCanvas(canvas: HTMLCanvasElement) {
-  Object.defineProperty(canvas, 'clientWidth', {
-    value: 100,
-    configurable: true
-  })
-  Object.defineProperty(canvas, 'clientHeight', {
-    value: 100,
-    configurable: true
-  })
-  canvas.getContext = (() =>
-    fakeCtx) as unknown as HTMLCanvasElement['getContext']
-  canvas.getBoundingClientRect = () =>
-    ({
-      left: 0,
-      top: 0,
-      right: 100,
-      bottom: 100,
-      width: 100,
-      height: 100,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    }) as DOMRect
-  canvas.setPointerCapture = () => {}
-  canvas.releasePointerCapture = () => {}
-}
-
-function renderWidget(modelValue: BoundingBox[]) {
-  const result = render(WidgetBoundingBoxes, {
-    props: { nodeId: '1', modelValue },
-    global: { plugins: [i18n] }
-  })
-  const canvas = screen.getByTestId('bounding-boxes').querySelector('canvas')!
-  prepCanvas(canvas)
-  return { ...result, canvas }
-}
-
-const lastBoxes = (emitted: () => Record<string, unknown[][]>) => {
-  const calls = emitted()['update:modelValue']
-  return calls[calls.length - 1][0] as BoundingBox[]
-}
-
-beforeEach(() => {
-  setActivePinia(createPinia())
-  appState.node = {
-    widgets: [
-      { name: 'width', value: 512 },
-      { name: 'height', value: 512 }
-    ],
-    findInputSlot: () => -1,
-    getInputNode: () => null
-  }
-  vi.stubGlobal('requestAnimationFrame', () => 1)
-  vi.stubGlobal('cancelAnimationFrame', () => {})
-})
-
-afterEach(() => {
-  vi.unstubAllGlobals()
-})
-
-describe('WidgetBoundingBoxes', () => {
-  it('renders the canvas and editor shell', () => {
-    renderWidget([])
-    expect(
-      screen.getByTestId('bounding-boxes').querySelector('canvas')
-    ).not.toBeNull()
-  })
-
-  it('shows the region editor panel when a region is active', () => {
-    renderWidget([box()])
-    expect(screen.getByText('obj')).toBeTruthy()
-    expect(screen.getByText('text')).toBeTruthy()
-  })
-
-  it('reveals the text field after switching the region to text', async () => {
-    renderWidget([box()])
-    expect(
-      screen.queryByPlaceholderText('text to render (verbatim)')
-    ).toBeNull()
-    await userEvent.click(screen.getByText('text'))
-    expect(
-      screen.getByPlaceholderText('text to render (verbatim)')
-    ).toBeTruthy()
-  })
-
-  it('clears all regions via the clear button', async () => {
-    const { emitted } = renderWidget([box()])
-    await userEvent.click(screen.getByText('Clear all'))
-    expect(lastBoxes(emitted)).toEqual([])
-  })
-
-  it('draws a region through canvas pointer events', async () => {
-    const { canvas, emitted } = renderWidget([])
-    await fireEvent.pointerDown(canvas, {
-      button: 0,
-      clientX: 10,
-      clientY: 10,
-      pointerId: 1
-    })
-    await fireEvent.pointerMove(canvas, {
-      clientX: 60,
-      clientY: 60,
-      pointerId: 1
-    })
-    await fireEvent.pointerUp(canvas, {
-      clientX: 60,
-      clientY: 60,
-      pointerId: 1
-    })
-    expect(lastBoxes(emitted)).toHaveLength(1)
-  })
-
-  it('tracks focus and blur on the canvas', async () => {
-    const { canvas } = renderWidget([box()])
-    await fireEvent.focus(canvas)
-    await fireEvent.blur(canvas)
-    expect(canvas).toBeTruthy()
-  })
-
-  it('opens an inline editor on double click', async () => {
-    const { canvas, container } = renderWidget([box()])
-    await fireEvent.dblClick(canvas, { clientX: 30, clientY: 30 })
-    expect(container.querySelector('textarea')).not.toBeNull()
-  })
-
-  it('syncs description edits back to the model', async () => {
-    const { emitted } = renderWidget([box()])
-    await fireEvent.update(
-      screen.getByPlaceholderText('description of this region'),
-      'a caption'
-    )
-    expect(lastBoxes(emitted)[0].metadata.desc).toBe('a caption')
-  })
-
-  it('edits the text field once the region is a text region', async () => {
-    const { emitted } = renderWidget([box()])
-    await userEvent.click(screen.getByText('text'))
-    await fireEvent.update(
-      screen.getByPlaceholderText('text to render (verbatim)'),
-      'hello'
-    )
-    expect(lastBoxes(emitted)[0].metadata.text).toBe('hello')
-  })
-
-  it('deletes the active region with the Delete key', async () => {
-    const { canvas, emitted } = renderWidget([box()])
-    await fireEvent.keyDown(canvas, { key: 'Delete' })
-    expect(lastBoxes(emitted)).toEqual([])
-  })
-
-  it('clears hover state on pointer leave', async () => {
-    const { canvas } = renderWidget([
-      box({ x: 10, y: 10, width: 256, height: 256 })
-    ])
-    await fireEvent.pointerMove(canvas, { clientX: 15, clientY: 15 })
-    await fireEvent.pointerLeave(canvas)
-    expect(canvas).toBeTruthy()
-  })
-
-  it('commits the inline editor on blur', async () => {
-    const { canvas, container, emitted } = renderWidget([box()])
-    await fireEvent.dblClick(canvas, { clientX: 30, clientY: 30 })
-    const editor = container.querySelector('textarea')!
-    await fireEvent.update(editor, 'committed')
-    await fireEvent.blur(editor)
-    expect(lastBoxes(emitted)[0].metadata.desc).toBe('committed')
-  })
-})

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -1,183 +0,0 @@
-<template>
-  <div
-    class="widget-expands flex size-full flex-col gap-1 select-none"
-    data-testid="bounding-boxes"
-    @pointerdown.stop
-  >
-    <div
-      ref="canvasContainer"
-      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
-      :style="canvasStyle"
-    >
-      <canvas
-        ref="canvasEl"
-        tabindex="0"
-        class="absolute inset-0 size-full rounded-sm outline-none"
-        :style="{ cursor: canvasCursor }"
-        @pointerdown="onPointerDown"
-        @pointermove="onCanvasPointerMove"
-        @pointerup="onDocPointerUp"
-        @pointercancel="onDocPointerUp"
-        @pointerleave="onPointerLeave"
-        @lostpointercapture="onDocPointerUp"
-        @dblclick="onDoubleClick"
-        @keydown="onCanvasKeyDown"
-        @focus="focused = true"
-        @blur="focused = false"
-      />
-      <textarea
-        v-if="inlineEditor"
-        ref="inlineEditorEl"
-        v-model="inlineEditor.value"
-        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
-        :style="inlineEditor.style"
-        data-capture-wheel="true"
-        @keydown.stop="onInlineKeyDown"
-        @blur="commitInlineEditor"
-      />
-    </div>
-
-    <div
-      v-if="activeRegion"
-      class="flex flex-col gap-2 rounded-sm bg-node-component-surface p-2 text-xs"
-    >
-      <div
-        class="flex h-8 items-center gap-1 rounded-sm bg-component-node-widget-background p-1"
-      >
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="
-            cn(
-              'flex-1 self-stretch px-2 text-xs transition-colors',
-              activeRegion.type === 'obj'
-                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
-                : 'text-node-text-muted hover:text-node-text'
-            )
-          "
-          @click="setActiveType('obj')"
-        >
-          {{ $t('boundingBoxes.typeObj') }}
-        </Button>
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="
-            cn(
-              'flex-1 self-stretch px-2 text-xs transition-colors',
-              activeRegion.type === 'text'
-                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
-                : 'text-node-text-muted hover:text-node-text'
-            )
-          "
-          @click="setActiveType('text')"
-        >
-          {{ $t('boundingBoxes.typeText') }}
-        </Button>
-      </div>
-      <div
-        v-if="activeRegion.type === 'text'"
-        class="group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered"
-      >
-        <span
-          class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
-        >
-          {{ $t('boundingBoxes.textLabel') }}
-        </span>
-        <Textarea
-          v-model="activeRegion.text"
-          :placeholder="$t('boundingBoxes.textPlaceholder')"
-          class="min-h-14 resize-none overflow-hidden pt-5 text-(length:--comfy-textarea-font-size) leading-normal not-disabled:bg-component-node-widget-background not-disabled:text-component-node-foreground hover:overflow-auto focus:overflow-auto"
-          data-capture-wheel="true"
-          @update:model-value="syncState"
-        />
-      </div>
-      <div
-        class="group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered"
-      >
-        <span
-          class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
-        >
-          {{ $t('boundingBoxes.descLabel') }}
-        </span>
-        <Textarea
-          v-model="activeRegion.desc"
-          :placeholder="$t('boundingBoxes.descPlaceholder')"
-          class="min-h-20 resize-none overflow-hidden pt-5 text-(length:--comfy-textarea-font-size) leading-normal not-disabled:bg-component-node-widget-background not-disabled:text-component-node-foreground hover:overflow-auto focus:overflow-auto"
-          data-capture-wheel="true"
-          @update:model-value="syncState"
-        />
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="shrink-0 truncate text-sm text-muted-foreground">
-          {{ $t('boundingBoxes.colors') }}
-        </span>
-        <PaletteSwatchRow
-          v-model="activeRegion.palette"
-          :max="maxColors"
-          @update:model-value="syncState"
-        />
-      </div>
-    </div>
-    <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
-      {{ $t('boundingBoxes.clickRegionToEdit') }}
-    </div>
-
-    <Button
-      variant="secondary"
-      size="md"
-      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
-      @click="clearAll"
-    >
-      <i class="icon-[lucide--undo-2]" />
-      {{ $t('boundingBoxes.clearAll') }}
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-import PaletteSwatchRow from '@/components/palette/PaletteSwatchRow.vue'
-import Button from '@/components/ui/button/Button.vue'
-import Textarea from '@/components/ui/textarea/Textarea.vue'
-import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
-import type { BoundingBox } from '@/types/boundingBoxes'
-import { nodeId as toNodeId } from '@/types/nodeId'
-
-const { nodeId } = defineProps<{ nodeId: string }>()
-const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
-const normalizedNodeId = toNodeId(nodeId)
-
-const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')
-const canvasContainer = useTemplateRef<HTMLDivElement>('canvasContainer')
-const inlineEditorEl = useTemplateRef<HTMLTextAreaElement>('inlineEditorEl')
-
-const {
-  canvasStyle,
-  canvasCursor,
-  focused,
-  activeRegion,
-  hasRegions,
-  inlineEditor,
-  maxColors,
-  onPointerDown,
-  onCanvasPointerMove,
-  onDocPointerUp,
-  onPointerLeave,
-  onDoubleClick,
-  onCanvasKeyDown,
-  onInlineKeyDown,
-  commitInlineEditor,
-  setActiveType,
-  clearAll,
-  syncState
-} = useBoundingBoxes(normalizedNodeId, {
-  canvasEl,
-  canvasContainer,
-  inlineEditorEl,
-  modelValue
-})
-</script>

src/components/builder/AppBuilder.vue

@@ -12,9 +12,8 @@ import { useResolvedSelectedInputs } from '@/components/builder/useResolvedSelec
 import type { ResolvedSelection } from '@/components/builder/useResolvedSelectedInputs'
 import type { WidgetId } from '@/types/widgetId'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
-import type { SerializedNodeId } from '@/types/nodeId'
 import {
   LGraphEventMode,
   TitleMode
@@ -51,7 +50,7 @@ workflowStore.activeWorkflow?.changeTracker?.reset()
 
 const resolvedInputs = useResolvedSelectedInputs()
 
-const outputsWithState = computed<[SerializedNodeId, string][]>(() =>
+const outputsWithState = computed<[NodeId, string][]>(() =>
   appModeStore.selectedOutputs.map((nodeId) => [
     nodeId,
     app.rootGraph.getNodeById(nodeId)?.title ?? String(nodeId)
@@ -76,7 +75,7 @@ function getHovered(
   if (widget || node.constructor.nodeData?.output_node) return [node, widget]
 }
 
-function getNodeBounding(nodeId: SerializedNodeId) {
+function getNodeBounding(nodeId: NodeId) {
   if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
   const node = app.rootGraph.getNodeById(nodeId)
   if (!node) return
@@ -150,7 +149,7 @@ function handleClick(e: MouseEvent) {
 
 function nodeToDisplayTuple(
   n: LGraphNode
-): [SerializedNodeId, MaybeRef<BoundStyle> | undefined, boolean] {
+): [NodeId, MaybeRef<BoundStyle> | undefined, boolean] {
   return [
     n.id,
     getNodeBounding(n.id),

src/components/builder/AppModeWidgetList.vue

@@ -23,7 +23,6 @@ import { useAppModeStore } from '@/stores/appModeStore'
 import { parseImageWidgetValue } from '@/utils/imageUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 
 interface WidgetEntry {
@@ -76,7 +75,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
     if (!matchingWidget) return []
 
     matchingWidget.slotMetadata = undefined
-    matchingWidget.nodeId = toNodeId(node.id)
+    matchingWidget.nodeId = String(node.id)
 
     return [
       {

src/components/curve/WidgetCurve.test.ts

@@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import { nodeId as toNodeId } from '@/types/nodeId'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 const i18n = createI18n({
@@ -240,7 +239,7 @@ describe('WidgetCurve', () => {
       renderWidget(
         makeWidget({
           options: { disabled: true },
-          linkedUpstream: { nodeId: toNodeId('n1') }
+          linkedUpstream: { nodeId: 'n1' }
         })
       )
       const parsed = JSON.parse(

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -427,6 +427,7 @@ import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { usePrimeVueOverlayChildStyle } from '@/composables/usePopoverSizing'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
@@ -452,14 +453,16 @@ onMounted(() => {
 
 // Wrap onClose to track session end
 const onClose = () => {
-  const timeSpentSeconds = Math.floor(
-    (Date.now() - sessionStartTime.value) / 1000
-  )
+  if (isCloud) {
+    const timeSpentSeconds = Math.floor(
+      (Date.now() - sessionStartTime.value) / 1000
+    )
 
-  useTelemetry()?.trackTemplateLibraryClosed({
-    template_selected: templateWasSelected.value,
-    time_spent_seconds: timeSpentSeconds
-  })
+    useTelemetry()?.trackTemplateLibraryClosed({
+      template_selected: templateWasSelected.value,
+      time_spent_seconds: timeSpentSeconds
+    })
+  }
 
   originalOnClose()
 }

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -8,7 +8,6 @@
         v-model="filters['global'].value"
         class="max-w-96"
         size="lg"
-        autofocus
         :placeholder="
           $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
         "

src/components/graph/GraphCanvas.vue

@@ -73,7 +73,7 @@
       :key="nodeData.id"
       :node-data="nodeData"
       :error="
-        executionErrorStore.lastExecutionErrorNodeId === nodeData.id
+        executionErrorStore.lastExecutionError?.node_id === nodeData.id
           ? 'Execution error'
           : null
       "

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

@@ -3,9 +3,6 @@ import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick, ref } from 'vue'
 
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
-
 const execHolder = vi.hoisted(() => ({
   state: null as {
     executingNodeIds: Array<string | number>
@@ -38,7 +35,7 @@ const SkeletonStub = defineComponent({
 
 function renderPreview(
   text: string,
-  { nodeId = toNodeId('node-1') }: { nodeId?: NodeId } = {}
+  { nodeId = 'node-1' }: { nodeId?: string | number } = {}
 ) {
   const value = ref(text)
   const Harness = defineComponent({
@@ -170,21 +167,21 @@ describe('TextPreviewWidget', () => {
     it('hides the Skeleton on mount when execution is already idle', () => {
       execState().executingNodeIds = []
       execState().isIdle = true
-      renderPreview('text', { nodeId: toNodeId('n1') })
+      renderPreview('text', { nodeId: 'n1' })
       expect(screen.queryByTestId('skeleton')).toBeNull()
     })
 
     it('shows a Skeleton on mount when the parent node is executing', () => {
       execState().executingNodeIds = ['n1']
       execState().isIdle = false
-      renderPreview('text', { nodeId: toNodeId('n1') })
+      renderPreview('text', { nodeId: 'n1' })
       expect(screen.getByTestId('skeleton')).toBeInTheDocument()
     })
 
     it('hides the Skeleton when execution transitions to idle', async () => {
       execState().executingNodeIds = ['n1']
       execState().isIdle = false
-      renderPreview('text', { nodeId: toNodeId('n1') })
+      renderPreview('text', { nodeId: 'n1' })
       expect(screen.getByTestId('skeleton')).toBeInTheDocument()
 
       execState().executingNodeIds = []
@@ -197,7 +194,7 @@ describe('TextPreviewWidget', () => {
     it('hides the Skeleton when the parent node leaves executingNodeIds', async () => {
       execState().executingNodeIds = ['n1']
       execState().isIdle = false
-      renderPreview('text', { nodeId: toNodeId('n1') })
+      renderPreview('text', { nodeId: 'n1' })
 
       execState().executingNodeIds = ['other']
       await nextTick()

src/components/graph/widgets/TextPreviewWidget.vue

@@ -16,9 +16,8 @@ import { default as DOMPurify } from 'dompurify'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, watch } from 'vue'
 
+import type { NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
 const modelValue = defineModel<string>({ required: true })
@@ -77,7 +76,7 @@ onMounted(() => {
 watch(
   () => executionStore.executingNodeIds,
   (ids) => {
-    if (!parentNodeId && ids.length > 0) parentNodeId = toNodeId(ids[0])
+    if (!parentNodeId && ids.length > 0) parentNodeId = ids[0]
   }
 )
 </script>

src/components/hdr/HdrViewerContent.test.ts

@@ -1,126 +0,0 @@
-/* eslint-disable testing-library/no-container, testing-library/no-node-access */
-import { render, screen } from '@testing-library/vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import HdrViewerContent from './HdrViewerContent.vue'
-
-vi.mock('@/base/common/downloadUtil', () => ({ downloadFile: vi.fn() }))
-
-const holder = vi.hoisted(() => ({ viewer: undefined as unknown }))
-vi.mock('@/composables/useHdrViewer', () => ({
-  useHdrViewer: () => holder.viewer,
-  CHANNEL_MODES: ['rgb', 'r', 'g', 'b', 'a', 'luminance']
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: { loading: 'Loading', downloadImage: 'Download' },
-      hdrViewer: {
-        failedToLoad: 'Failed',
-        exposure: 'Exposure',
-        normalizeExposure: 'Auto exposure',
-        channel: 'Channel',
-        channels: {
-          rgb: 'RGB',
-          r: 'R',
-          g: 'G',
-          b: 'B',
-          a: 'Alpha',
-          luminance: 'Luminance'
-        },
-        sourceGamut: 'Source gamut',
-        dither: 'Dither',
-        clipWarnings: 'Clip warnings',
-        fitView: 'Fit',
-        histogram: 'Histogram',
-        resolution: 'Resolution',
-        min: 'Min',
-        max: 'Max',
-        mean: 'Mean',
-        stdDev: 'Std dev',
-        nan: 'NaN',
-        inf: 'Inf'
-      }
-    }
-  }
-})
-
-function makeViewer(overrides: Record<string, unknown> = {}) {
-  return {
-    exposureStops: ref(0),
-    dither: ref(true),
-    clipWarnings: ref(false),
-    gamut: ref('sRGB'),
-    channel: ref('r'),
-    loading: ref(false),
-    error: ref(null),
-    dimensions: ref('512 x 512'),
-    stats: ref({
-      min: 0,
-      max: 4,
-      mean: 0.5,
-      stdDev: 0.2,
-      nanCount: 2,
-      infCount: 1
-    }),
-    histogram: ref(new Uint32Array([1, 2, 3, 4])),
-    pixel: ref({ x: 1, y: 2, r: 0.1, g: 0.2, b: 0.3, a: 1 }),
-    mount: vi.fn(),
-    dispose: vi.fn(),
-    fitView: vi.fn(),
-    normalizeExposure: vi.fn(),
-    ...overrides
-  }
-}
-
-function renderViewer() {
-  return render(HdrViewerContent, {
-    props: { imageUrl: '/api/view?filename=out.exr' },
-    global: { plugins: [i18n], stubs: { Button: true } }
-  })
-}
-
-describe('HdrViewerContent', () => {
-  beforeEach(() => {
-    holder.viewer = makeViewer()
-  })
-
-  it('renders the full statistics set including NaN/Inf', () => {
-    renderViewer()
-    for (const label of [
-      'Resolution',
-      'Min',
-      'Max',
-      'Mean',
-      'Std dev',
-      'NaN',
-      'Inf'
-    ]) {
-      screen.getByText(label)
-    }
-  })
-
-  it('shows the pixel readout when a pixel is hovered', () => {
-    renderViewer()
-    expect(screen.getByTestId('hdr-pixel-readout')).toBeInTheDocument()
-  })
-
-  it('colors the histogram according to the selected channel', () => {
-    holder.viewer = makeViewer({ channel: ref('g') })
-    const { container } = renderViewer()
-    const path = container.querySelector('svg path')
-    expect(path?.getAttribute('class')).toContain('text-green-500')
-  })
-
-  it('renders an option for each channel mode', () => {
-    renderViewer()
-    expect(
-      screen.getByRole('option', { name: 'Luminance' })
-    ).toBeInTheDocument()
-  })
-})

src/components/hdr/HdrViewerContent.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="flex size-full bg-base-background">
-    <div class="relative flex-1">
-      <div
-        ref="containerRef"
-        class="absolute size-full"
-        data-testid="hdr-viewer-canvas"
-      />
-
-      <div
-        v-if="viewer.loading.value"
-        class="absolute inset-0 flex items-center justify-center text-base-foreground"
-      >
-        {{ $t('g.loading') }}...
-      </div>
-      <div
-        v-else-if="viewer.error.value"
-        role="alert"
-        class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-base-foreground"
-      >
-        <i class="icon-[lucide--image-off] size-12" />
-        <p class="text-sm">{{ $t('hdrViewer.failedToLoad') }}</p>
-      </div>
-
-      <div
-        v-if="viewer.pixel.value"
-        class="absolute top-2 left-2 rounded-sm bg-base-background/80 px-2 py-1 font-mono text-xs text-base-foreground"
-        data-testid="hdr-pixel-readout"
-      >
-        <div>{{ viewer.pixel.value.x }}, {{ viewer.pixel.value.y }}</div>
-        <div>
-          {{ formatNum(viewer.pixel.value.r) }}
-          {{ formatNum(viewer.pixel.value.g) }}
-          {{ formatNum(viewer.pixel.value.b) }}
-          <template v-if="viewer.pixel.value.a !== null">
-            {{ formatNum(viewer.pixel.value.a) }}
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex w-72 flex-col" data-testid="hdr-viewer-sidebar">
-      <div class="flex-1 overflow-y-auto p-4">
-        <div class="space-y-2">
-          <div class="space-y-4 p-2">
-            <div class="flex flex-col gap-2">
-              <label>{{ $t('hdrViewer.exposure') }}: {{ exposureLabel }}</label>
-              <input
-                v-model.number="viewer.exposureStops.value"
-                type="range"
-                min="-10"
-                max="10"
-                step="0.1"
-                class="w-full"
-                :aria-label="$t('hdrViewer.exposure')"
-              />
-            </div>
-            <Button
-              variant="secondary"
-              class="w-full"
-              @click="viewer.normalizeExposure"
-            >
-              {{ $t('hdrViewer.normalizeExposure') }}
-            </Button>
-          </div>
-
-          <div class="space-y-4 p-2">
-            <div class="flex flex-col gap-2">
-              <label>{{ $t('hdrViewer.channel') }}</label>
-              <select
-                v-model="viewer.channel.value"
-                class="bg-base-component-surface w-full rounded-sm px-2 py-1"
-                :aria-label="$t('hdrViewer.channel')"
-              >
-                <option v-for="mode in channelModes" :key="mode" :value="mode">
-                  {{ channelLabels[mode] }}
-                </option>
-              </select>
-            </div>
-
-            <div class="flex flex-col gap-2">
-              <label>{{ $t('hdrViewer.sourceGamut') }}</label>
-              <select
-                v-model="viewer.gamut.value"
-                class="bg-base-component-surface w-full rounded-sm px-2 py-1"
-                :aria-label="$t('hdrViewer.sourceGamut')"
-              >
-                <option v-for="name in gamutNames" :key="name" :value="name">
-                  {{ name }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="space-y-4 p-2">
-            <div class="flex items-center gap-2">
-              <input
-                id="hdr-dither"
-                v-model="viewer.dither.value"
-                type="checkbox"
-                class="size-4 cursor-pointer accent-node-component-surface-highlight"
-              />
-              <label for="hdr-dither" class="cursor-pointer">
-                {{ $t('hdrViewer.dither') }}
-              </label>
-            </div>
-            <div class="flex items-center gap-2">
-              <input
-                id="hdr-clip"
-                v-model="viewer.clipWarnings.value"
-                type="checkbox"
-                class="size-4 cursor-pointer accent-node-component-surface-highlight"
-              />
-              <label for="hdr-clip" class="cursor-pointer">
-                {{ $t('hdrViewer.clipWarnings') }}
-              </label>
-            </div>
-          </div>
-
-          <div v-if="histogramPath" class="space-y-2 p-2">
-            <label>{{ $t('hdrViewer.histogram') }}</label>
-            <svg
-              viewBox="0 0 1 1"
-              preserveAspectRatio="none"
-              class="bg-base-component-surface aspect-3/2 w-full rounded-sm"
-            >
-              <path
-                :d="histogramPath"
-                :class="histogramColorClass"
-                fill="currentColor"
-                fill-opacity="0.5"
-                stroke="none"
-              />
-            </svg>
-          </div>
-
-          <div
-            v-if="viewer.stats.value"
-            class="space-y-1 p-2 text-xs tabular-nums"
-          >
-            <div v-if="viewer.dimensions.value" class="flex justify-between">
-              <span>{{ $t('hdrViewer.resolution') }}</span>
-              <span>{{ viewer.dimensions.value }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.min') }}</span>
-              <span>{{ formatNum(viewer.stats.value.min) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.max') }}</span>
-              <span>{{ formatNum(viewer.stats.value.max) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.mean') }}</span>
-              <span>{{ formatNum(viewer.stats.value.mean) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.stdDev') }}</span>
-              <span>{{ formatNum(viewer.stats.value.stdDev) }}</span>
-            </div>
-            <div
-              v-if="viewer.stats.value.nanCount"
-              class="flex justify-between text-error"
-            >
-              <span>{{ $t('hdrViewer.nan') }}</span>
-              <span>{{ viewer.stats.value.nanCount }}</span>
-            </div>
-            <div
-              v-if="viewer.stats.value.infCount"
-              class="flex justify-between text-error"
-            >
-              <span>{{ $t('hdrViewer.inf') }}</span>
-              <span>{{ viewer.stats.value.infCount }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="p-4">
-        <div class="flex gap-2">
-          <Button variant="secondary" class="flex-1" @click="viewer.fitView">
-            {{ $t('hdrViewer.fitView') }}
-          </Button>
-          <Button variant="secondary" class="flex-1" @click="handleDownload">
-            {{ $t('g.downloadImage') }}
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { downloadFile } from '@/base/common/downloadUtil'
-import Button from '@/components/ui/button/Button.vue'
-import type { ChannelMode } from '@/composables/useHdrViewer'
-import { CHANNEL_MODES, useHdrViewer } from '@/composables/useHdrViewer'
-import { GAMUT_NAMES } from '@/renderer/hdr/colorGamut'
-import { toFullResolutionUrl } from '@/utils/hdrFormatUtil'
-import { histogramToPath } from '@/utils/histogramUtil'
-
-const { imageUrl } = defineProps<{ imageUrl: string }>()
-
-const { t } = useI18n()
-const viewer = useHdrViewer()
-const gamutNames = GAMUT_NAMES
-const channelModes = CHANNEL_MODES
-const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
-
-const exposureLabel = computed(() => {
-  const value = viewer.exposureStops.value
-  return `${value > 0 ? '+' : ''}${value.toFixed(1)}`
-})
-
-const histogramPath = computed(() =>
-  viewer.histogram.value ? histogramToPath(viewer.histogram.value) : ''
-)
-
-const histogramColorClass = computed(() => {
-  switch (viewer.channel.value) {
-    case 'r':
-      return 'text-red-500'
-    case 'g':
-      return 'text-green-500'
-    case 'b':
-      return 'text-blue-500'
-    default:
-      return 'text-base-foreground'
-  }
-})
-
-const channelLabels = computed<Record<ChannelMode, string>>(() => ({
-  rgb: t('hdrViewer.channels.rgb'),
-  r: t('hdrViewer.channels.r'),
-  g: t('hdrViewer.channels.g'),
-  b: t('hdrViewer.channels.b'),
-  a: t('hdrViewer.channels.a'),
-  luminance: t('hdrViewer.channels.luminance')
-}))
-
-function formatNum(value: number): string {
-  if (!Number.isFinite(value)) return String(value)
-  return Math.abs(value) >= 1000 || (value !== 0 && Math.abs(value) < 0.001)
-    ? value.toExponential(3)
-    : value.toFixed(4)
-}
-
-function handleDownload() {
-  downloadFile(toFullResolutionUrl(imageUrl))
-}
-
-onMounted(() => {
-  if (containerRef.value) void viewer.mount(containerRef.value, imageUrl)
-})
-</script>

src/components/imagecrop/WidgetImageCrop.test.ts

@@ -5,7 +5,6 @@ import { defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { Bounds } from '@/renderer/core/layout/types'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { Ref } from 'vue'
 
@@ -133,12 +132,11 @@ function renderWidget(
   initialModel: Bounds = { x: 0, y: 0, width: 512, height: 512 }
 ) {
   const value = ref<Bounds>(initialModel)
-  const nodeId = toNodeId(1)
   const Harness = defineComponent({
     components: { WidgetImageCrop },
-    setup: () => ({ value, widget, nodeId }),
+    setup: () => ({ value, widget }),
     template:
-      '<WidgetImageCrop v-model="value" :widget="widget" :node-id="nodeId" />'
+      '<WidgetImageCrop v-model="value" :widget="widget" :node-id="1" />'
   })
   const utils = render(Harness, {
     global: {
@@ -235,7 +233,7 @@ describe('WidgetImageCrop', () => {
       renderWidget(
         makeWidget({
           options: { disabled: true },
-          linkedUpstream: { nodeId: toNodeId('n1') }
+          linkedUpstream: { nodeId: 'n1' }
         }),
         { x: 0, y: 0, width: 512, height: 512 }
       )

src/components/imagecrop/WidgetImageCrop.vue

@@ -135,8 +135,8 @@ import {
   boundsExtractor,
   useUpstreamValue
 } from '@/composables/useUpstreamValue'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { Bounds } from '@/renderer/core/layout/types'
-import type { NodeId } from '@/types/nodeId'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@comfyorg/tailwind-utils'
 

src/components/load3d/Load3D.test.ts

@@ -6,8 +6,6 @@ import { createI18n } from 'vue-i18n'
 
 import Load3D from '@/components/load3d/Load3D.vue'
 import type { ComponentWidget } from '@/scripts/domWidget'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 
 const { load3dState, resolveNodeMock, settingGetMock } = vi.hoisted(() => ({
   load3dState: {
@@ -85,7 +83,7 @@ const i18n = createI18n({
 
 type RenderOptions = {
   widget?: unknown
-  nodeId?: NodeId
+  nodeId?: number | string
   stateOverrides?: Partial<ReturnType<typeof buildLoad3dStub>>
   enable3DViewer?: boolean
 }
@@ -167,17 +165,16 @@ describe('Load3D', () => {
     })
 
     it('falls back to resolveNode(nodeId) when the widget lacks a node', async () => {
-      const nodeId = toNodeId(42)
       resolveNodeMock.mockReturnValue(MOCK_NODE)
-      renderLoad3D({ widget: {}, nodeId })
+      renderLoad3D({ widget: {}, nodeId: 42 })
 
-      expect(resolveNodeMock).toHaveBeenCalledWith(nodeId)
+      expect(resolveNodeMock).toHaveBeenCalledWith(42)
       expect(await screen.findByTestId('load3d-scene')).toBeInTheDocument()
     })
 
     it('does not render Load3DScene when no node can be resolved', async () => {
       resolveNodeMock.mockReturnValue(null)
-      renderLoad3D({ widget: {}, nodeId: toNodeId(99) })
+      renderLoad3D({ widget: {}, nodeId: 99 })
 
       await Promise.resolve()
       expect(screen.queryByTestId('load3d-scene')).not.toBeInTheDocument()
@@ -222,11 +219,7 @@ describe('Load3D', () => {
 
     it('hides ViewerControls when there is no node even if the setting is on', () => {
       resolveNodeMock.mockReturnValue(null)
-      renderLoad3D({
-        widget: {},
-        nodeId: toNodeId(1),
-        enable3DViewer: true
-      })
+      renderLoad3D({ widget: {}, nodeId: 1, enable3DViewer: true })
       expect(screen.queryByTestId('viewer-controls')).not.toBeInTheDocument()
     })
   })

src/components/load3d/Load3D.vue

@@ -115,10 +115,10 @@ 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'
-import type { ComponentWidget } from '@/scripts/domWidget'
-import type { NodeId } from '@/types/nodeId'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { resolveNode } from '@/utils/litegraphUtil'
+import type { ComponentWidget } from '@/scripts/domWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 const {
   widget,

src/components/load3d/Load3DAdvanced.test.ts

@@ -2,8 +2,6 @@ import { render } from '@testing-library/vue'
 import { describe, expect, it, vi } from 'vitest'
 import { defineComponent, h, ref } from 'vue'
 
-import { nodeId as toNodeId } from '@/types/nodeId'
-
 const lastProps = ref<Record<string, unknown> | null>(null)
 
 vi.mock('@/components/load3d/Load3D.vue', () => ({
@@ -41,10 +39,9 @@ describe('Load3DAdvanced', () => {
   })
 
   it('forwards widget and nodeId to the inner Load3D', () => {
-    const nodeId = toNodeId('a')
     const widget = { node: { id: 'a', type: 'Load3DAdvanced' } }
-    render(Load3DAdvanced, { props: { widget: widget as never, nodeId } })
+    render(Load3DAdvanced, { props: { widget: widget as never, nodeId: 'a' } })
     expect(lastProps.value?.widget).toEqual(widget)
-    expect(lastProps.value?.nodeId).toBe(nodeId)
+    expect(lastProps.value?.nodeId).toBe('a')
   })
 })

src/components/load3d/Load3DAdvanced.vue

@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 import Load3D from '@/components/load3d/Load3D.vue'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComponentWidget } from '@/scripts/domWidget'
-import type { NodeId } from '@/types/nodeId'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 defineProps<{

src/components/painter/WidgetPainter.vue

@@ -289,12 +289,11 @@ import { computed, useTemplateRef } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import Slider from '@/components/ui/slider/Slider.vue'
 import { PAINTER_TOOLS, usePainter } from '@/composables/painter/usePainter'
-import type { NodeId } from '@/types/nodeId'
 import { toHexFromFormat } from '@/utils/colorUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 
 const { nodeId } = defineProps<{
-  nodeId: NodeId
+  nodeId: string
 }>()
 
 const modelValue = defineModel<string>({ default: '' })

src/components/palette/PaletteSwatchRow.test.ts

@@ -1,70 +0,0 @@
-/* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
-import { fireEvent, 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 PaletteSwatchRow from './PaletteSwatchRow.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: { palette: { swatchTitle: 'Edit', addColor: 'Add' } } }
-})
-
-function renderRow(modelValue: string[], max = 5) {
-  return render(PaletteSwatchRow, {
-    props: { modelValue, max },
-    global: { plugins: [i18n] }
-  })
-}
-
-const lastEmit = (emitted: () => Record<string, unknown[][]>) => {
-  const calls = emitted()['update:modelValue']
-  return calls[calls.length - 1][0]
-}
-
-describe('PaletteSwatchRow', () => {
-  it('renders one swatch per color', () => {
-    const { container } = renderRow(['#ff0000', '#00ff00'])
-    expect(container.querySelectorAll('[data-index]')).toHaveLength(2)
-  })
-
-  it('appends a color when the add button is clicked', async () => {
-    const { emitted } = renderRow(['#ff0000'])
-    await userEvent.click(screen.getByRole('button'))
-    expect(lastEmit(emitted)).toEqual(['#ff0000', '#ffffff'])
-  })
-
-  it('removes a color on right click', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.contextMenu(container.querySelector('[data-index="0"]')!)
-    expect(lastEmit(emitted)).toEqual(['#00ff00'])
-  })
-
-  it('hides the add button once the max is reached', () => {
-    renderRow(['#a', '#b'], 2)
-    expect(screen.queryByRole('button')).toBeNull()
-  })
-
-  it('writes a picked color back through the hidden color input', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.click(container.querySelector('[data-index="1"]')!)
-    const input = container.querySelector(
-      'input[type="color"]'
-    ) as HTMLInputElement
-    input.value = '#0000ff'
-    await fireEvent.input(input)
-    expect(lastEmit(emitted)).toEqual(['#ff0000', '#0000ff'])
-  })
-
-  it('starts a drag on pointer down without emitting', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.pointerDown(container.querySelector('[data-index="0"]')!, {
-      button: 0,
-      clientX: 5,
-      clientY: 5
-    })
-    expect(emitted()['update:modelValue']).toBeUndefined()
-  })
-})

src/components/palette/PaletteSwatchRow.vue

@@ -1,48 +0,0 @@
-<template>
-  <div ref="container" class="flex flex-wrap items-center gap-1">
-    <div
-      v-for="(hex, i) in modelValue"
-      :key="`${i}-${hex}`"
-      :data-index="i"
-      :data-hex="hex"
-      class="relative size-5 cursor-pointer rounded-sm border border-component-node-border"
-      :style="{ background: hex }"
-      :title="t('palette.swatchTitle')"
-      @click="openPicker(i, $event)"
-      @contextmenu.prevent.stop="remove(i)"
-      @pointerdown="onPointerDown(i, $event)"
-    />
-    <button
-      v-if="modelValue.length < max"
-      type="button"
-      class="h-5 rounded-sm border border-component-node-border bg-component-node-widget-background px-2 text-xs leading-none"
-      :title="t('palette.addColor')"
-      @click="addColor"
-    >
-      +
-    </button>
-    <input
-      ref="picker"
-      type="color"
-      class="pointer-events-none absolute size-0 opacity-0"
-      @input="onPickerInput"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { usePaletteSwatchRow } from '@/composables/palette/usePaletteSwatchRow'
-
-const { max = 5 } = defineProps<{ max?: number }>()
-const modelValue = defineModel<string[]>({ required: true })
-const { t } = useI18n()
-
-const container = useTemplateRef<HTMLDivElement>('container')
-const picker = useTemplateRef<HTMLInputElement>('picker')
-
-const { openPicker, onPickerInput, remove, addColor, onPointerDown } =
-  usePaletteSwatchRow({ modelValue, container, picker })
-</script>

src/components/palette/WidgetColors.test.ts

@@ -1,54 +0,0 @@
-/* eslint-disable testing-library/no-node-access, testing-library/no-container, testing-library/prefer-user-event */
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import WidgetColors from './WidgetColors.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: { palette: { swatchTitle: 'Edit', addColor: 'Add' } } }
-})
-
-function renderWidget(modelValue: string[], widget?: { name: string }) {
-  return render(WidgetColors, {
-    props: { modelValue, widget },
-    global: { plugins: [i18n] }
-  })
-}
-
-const cleanups: Array<() => void> = []
-afterEach(() => {
-  while (cleanups.length) cleanups.pop()?.()
-})
-
-describe('WidgetColors', () => {
-  it('renders the palette swatch row for each color', () => {
-    renderWidget(['#ff0000', '#00ff00'])
-    const root = screen.getByTestId('colors')
-    expect(root.querySelectorAll('[data-index]')).toHaveLength(2)
-  })
-
-  it('shows the widget name as an inline label', () => {
-    renderWidget(['#ff0000'], { name: 'color_palette' })
-    expect(screen.getByText('color_palette')).toBeInTheDocument()
-  })
-
-  it('emits an updated palette when a color is added', async () => {
-    const { emitted } = renderWidget([])
-    await userEvent.click(screen.getByRole('button'))
-    const calls = emitted()['update:modelValue'] as unknown[][]
-    expect(calls[calls.length - 1][0]).toEqual(['#ffffff'])
-  })
-
-  it('does not stop swatch pointer moves from reaching document drag handlers', async () => {
-    const { container } = renderWidget(['#ff0000'])
-    const onDocMove = vi.fn()
-    document.addEventListener('pointermove', onDocMove)
-    cleanups.push(() => document.removeEventListener('pointermove', onDocMove))
-    await fireEvent.pointerMove(container.querySelector('[data-index="0"]')!)
-    expect(onDocMove).toHaveBeenCalled()
-  })
-})

src/components/palette/WidgetColors.vue

@@ -1,29 +0,0 @@
-<template>
-  <div
-    class="flex size-full items-center gap-2"
-    data-testid="colors"
-    @pointerdown.stop
-  >
-    <span
-      v-if="widget?.name"
-      class="shrink-0 truncate text-node-component-slot-text"
-    >
-      {{ widget.label || widget.name }}
-    </span>
-    <PaletteSwatchRow v-model="modelValue" :max="MAX_COLORS" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-import PaletteSwatchRow from './PaletteSwatchRow.vue'
-
-const MAX_COLORS = 16
-
-const { widget } = defineProps<{
-  widget?: Pick<SimplifiedWidget<string[]>, 'name' | 'label'>
-}>()
-
-const modelValue = defineModel<string[]>({ default: () => [] })
-</script>

src/components/range/WidgetRange.test.ts

@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/vue'
-import { createNodeLocatorId } from '@/types/nodeIdentification'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, ref } from 'vue'
@@ -136,7 +134,7 @@ describe('WidgetRange', () => {
       setUpstream({ min: 0.3, max: 0.7 })
       renderWidget(
         makeWidget({ disabled: true } as IWidgetRangeOptions, {
-          linkedUpstream: { nodeId: toNodeId('n1') }
+          linkedUpstream: { nodeId: 'n1' }
         }),
         { min: 0, max: 1 }
       )
@@ -146,13 +144,10 @@ describe('WidgetRange', () => {
 
     it('ignores upstream value when not disabled', () => {
       setUpstream({ min: 0.3, max: 0.7 })
-      renderWidget(
-        makeWidget({}, { linkedUpstream: { nodeId: toNodeId('n1') } }),
-        {
-          min: 0,
-          max: 1
-        }
-      )
+      renderWidget(makeWidget({}, { linkedUpstream: { nodeId: 'n1' } }), {
+        min: 0,
+        max: 1
+      })
       const el = screen.getByTestId('range-editor')
       expect(JSON.parse(el.dataset.model!)).toEqual({ min: 0, max: 1 })
     })
@@ -170,9 +165,7 @@ describe('WidgetRange', () => {
       outputsHolder.nodeOutputs = {
         loc1: { histogram_range_w: [1, 2, 3, 4] }
       }
-      renderWidget(
-        makeWidget({}, { nodeLocatorId: createNodeLocatorId(null, 'loc1') })
-      )
+      renderWidget(makeWidget({}, { nodeLocatorId: 'loc1' }))
       expect(screen.getByTestId('range-editor').dataset.hasHistogram).toBe(
         'true'
       )
@@ -182,9 +175,7 @@ describe('WidgetRange', () => {
       outputsHolder.nodeOutputs = {
         loc1: { histogram_range_w: [] }
       }
-      renderWidget(
-        makeWidget({}, { nodeLocatorId: createNodeLocatorId(null, 'loc1') })
-      )
+      renderWidget(makeWidget({}, { nodeLocatorId: 'loc1' }))
       expect(screen.getByTestId('range-editor').dataset.hasHistogram).toBe(
         'false'
       )

src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import type { ErrorCardData } from './types'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 
 const meta: Meta<typeof ErrorNodeCard> = {
   title: 'RightSidePanel/Errors/ErrorNodeCard',
@@ -24,7 +23,7 @@ type Story = StoryObj<typeof meta>
 const singleErrorCard: ErrorCardData = {
   id: 'node-10',
   title: 'CLIPTextEncode',
-  nodeId: createNodeExecutionId([10]),
+  nodeId: '10',
   nodeTitle: 'CLIP Text Encode (Prompt)',
   isSubgraphNode: false,
   errors: [
@@ -38,7 +37,7 @@ const singleErrorCard: ErrorCardData = {
 const multipleErrorsCard: ErrorCardData = {
   id: 'node-24',
   title: 'VAEDecode',
-  nodeId: createNodeExecutionId([24]),
+  nodeId: '24',
   nodeTitle: 'VAE Decode',
   isSubgraphNode: false,
   errors: [
@@ -56,7 +55,7 @@ const multipleErrorsCard: ErrorCardData = {
 const runtimeErrorCard: ErrorCardData = {
   id: 'exec-45',
   title: 'KSampler',
-  nodeId: createNodeExecutionId([45]),
+  nodeId: '45',
   nodeTitle: 'KSampler',
   isSubgraphNode: false,
   errors: [
@@ -76,7 +75,7 @@ const runtimeErrorCard: ErrorCardData = {
 const subgraphErrorCard: ErrorCardData = {
   id: 'node-3:15',
   title: 'KSampler',
-  nodeId: createNodeExecutionId([3, 15]),
+  nodeId: '3:15',
   nodeTitle: 'Nested KSampler',
   isSubgraphNode: true,
   errors: [

src/components/rightSidePanel/errors/ErrorNodeCard.test.ts

@@ -6,7 +6,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import type { ErrorCardData } from './types'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 
 const mockGetLogs = vi.fn(() => Promise.resolve('mock server logs'))
 const mockSerialize = vi.fn(() => ({ nodes: [] }))
@@ -157,7 +156,7 @@ describe('ErrorNodeCard.vue', () => {
     return {
       id: `exec-${++cardIdCounter}`,
       title: 'KSampler',
-      nodeId: createNodeExecutionId([10]),
+      nodeId: '10',
       nodeTitle: 'KSampler',
       errors: [
         {
@@ -250,7 +249,7 @@ describe('ErrorNodeCard.vue', () => {
     renderCard({
       id: `node-${++cardIdCounter}`,
       title: 'KSampler',
-      nodeId: createNodeExecutionId([10]),
+      nodeId: '10',
       nodeTitle: 'KSampler',
       errors: [
         {
@@ -388,7 +387,7 @@ describe('ErrorNodeCard.vue', () => {
     const card: ErrorCardData = {
       id: `exec-${++cardIdCounter}`,
       title: 'KSampler',
-      nodeId: createNodeExecutionId([10]),
+      nodeId: '10',
       nodeTitle: 'KSampler',
       errors: [
         {

src/components/rightSidePanel/errors/types.ts

@@ -1,5 +1,4 @@
 import type { ResolvedErrorMessage } from '@/platform/errorCatalog/types'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
 
 export interface ErrorItem extends ResolvedErrorMessage {
   /** Raw source/API-compatible message. */
@@ -13,7 +12,7 @@ export interface ErrorItem extends ResolvedErrorMessage {
 export interface ErrorCardData {
   id: string
   title: string
-  nodeId?: NodeExecutionId
+  nodeId?: string
   nodeTitle?: string
   graphNodeId?: string
   isSubgraphNode?: boolean

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -671,30 +671,6 @@ describe('useErrorGroups', () => {
       expect(nodeIds).toEqual(['1', '2', '10'])
     })
 
-    it('marks only nested execution paths as subgraph node cards', async () => {
-      const { store, groups } = createErrorGroups()
-      store.lastNodeErrors = {
-        '1': {
-          class_type: 'KSampler',
-          dependent_outputs: [],
-          errors: [{ type: 'err', message: 'Error', details: '' }]
-        },
-        '1:20': {
-          class_type: 'KSampler',
-          dependent_outputs: [],
-          errors: [{ type: 'err', message: 'Error', details: '' }]
-        }
-      }
-      await nextTick()
-
-      const execGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'execution'
-      )
-      expect(execGroup?.cards).toMatchObject([
-        { nodeId: '1', isSubgraphNode: false },
-        { nodeId: '1:20', isSubgraphNode: true }
-      ])
-    })
     it('sorts cards with subpath nodeIds before higher root IDs', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -39,8 +39,8 @@ import {
   resolveRunErrorMessage
 } from '@/platform/errorCatalog/errorMessageResolver'
 import {
-  compareExecutionId,
-  tryNormalizeNodeExecutionId
+  isNodeExecutionId,
+  compareExecutionId
 } from '@/types/nodeIdentification'
 
 const PROMPT_CARD_ID = '__prompt__'
@@ -82,7 +82,7 @@ interface ErrorSearchItem {
 type CataloguedErrorItem = ErrorItem & ResolvedCatalogErrorMessage
 
 /** Resolve display info for a node by its execution ID. */
-function resolveNodeInfo(nodeId: NodeExecutionId) {
+function resolveNodeInfo(nodeId: string) {
   const graphNode = getNodeByExecutionId(app.rootGraph, nodeId)
 
   return {
@@ -119,7 +119,7 @@ function getOrCreateGroup(
 }
 
 function createErrorCard(
-  nodeId: NodeExecutionId,
+  nodeId: string,
   classType: string,
   idPrefix: string
 ): ErrorCardData {
@@ -130,7 +130,7 @@ function createErrorCard(
     nodeId,
     nodeTitle: nodeInfo.title,
     graphNodeId: nodeInfo.graphNodeId,
-    isSubgraphNode: nodeId.includes(':'),
+    isSubgraphNode: isNodeExecutionId(nodeId),
     errors: []
   }
 }
@@ -288,7 +288,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     return map
   })
 
-  function isErrorInSelection(executionNodeId: NodeExecutionId): boolean {
+  function isErrorInSelection(executionNodeId: string): boolean {
     const nodeIds = selectedNodeInfo.value.nodeIds
     if (!nodeIds) return true
 
@@ -305,7 +305,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
 
   function addNodeErrorToGroup(
     groupsMap: Map<string, GroupEntry>,
-    nodeId: NodeExecutionId,
+    nodeId: string,
     classType: string,
     idPrefix: string,
     error: CataloguedErrorItem,
@@ -371,11 +371,9 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
   ) {
     if (!executionErrorStore.lastNodeErrors) return
 
-    for (const [rawNodeId, nodeError] of Object.entries(
+    for (const [nodeId, nodeError] of Object.entries(
       executionErrorStore.lastNodeErrors
     )) {
-      const nodeId = tryNormalizeNodeExecutionId(rawNodeId)
-      if (!nodeId) continue
       const nodeDisplayName =
         resolveNodeInfo(nodeId).title || nodeError.class_type
       for (const e of nodeError.errors) {
@@ -406,12 +404,9 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     if (!executionErrorStore.lastExecutionError) return
 
     const e = executionErrorStore.lastExecutionError
-    const nodeId = tryNormalizeNodeExecutionId(e.node_id)
-    if (!nodeId) return
-
     addNodeErrorToGroup(
       groupsMap,
-      nodeId,
+      String(e.node_id),
       e.node_type,
       'exec',
       {
@@ -422,7 +417,8 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
         ...resolveRunErrorMessage({
           kind: 'execution',
           error: e,
-          nodeDisplayName: resolveNodeInfo(nodeId).title || e.node_type
+          nodeDisplayName:
+            resolveNodeInfo(String(e.node_id)).title || e.node_type
         })
       },
       filterBySelection
@@ -673,7 +669,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     ]
   }
 
-  function isAssetErrorInSelection(executionNodeId: NodeExecutionId): boolean {
+  function isAssetErrorInSelection(executionNodeId: string): boolean {
     const nodeIds = selectedNodeInfo.value.nodeIds
     if (!nodeIds) return true
 
@@ -695,17 +691,12 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     return false
   }
 
-  function isAssetCandidateInSelection(nodeId: string | number): boolean {
-    const executionNodeId = tryNormalizeNodeExecutionId(nodeId)
-    return executionNodeId ? isAssetErrorInSelection(executionNodeId) : false
-  }
-
   const filteredMissingModelGroups = computed(() => {
     if (!selectedNodeInfo.value.nodeIds) return missingModelGroups.value
     const candidates = missingModelStore.missingModelCandidates
     if (!candidates?.length) return []
     const filtered = candidates.filter(
-      (c) => c.nodeId != null && isAssetCandidateInSelection(c.nodeId)
+      (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
     )
     if (!filtered.length) return []
     return groupMissingModelCandidates(filtered, isCloud)
@@ -716,7 +707,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     const candidates = missingMediaStore.missingMediaCandidates
     if (!candidates?.length) return []
     const filtered = candidates.filter(
-      (c) => c.nodeId != null && isAssetCandidateInSelection(c.nodeId)
+      (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
     )
     if (!filtered.length) return []
     return groupCandidatesByMediaType(filtered)

src/components/rightSidePanel/errors/useErrorReport.test.ts

@@ -4,7 +4,6 @@ import { nextTick, ref } from 'vue'
 import type { useSystemStatsStore } from '@/stores/systemStatsStore'
 
 import type { ErrorCardData } from './types'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 import { useErrorReport } from './useErrorReport'
 
 async function flushPromises() {
@@ -104,7 +103,7 @@ function makeCard(overrides: Partial<ErrorCardData> = {}): ErrorCardData {
   return {
     id: 'card-1',
     title: 'KSampler',
-    nodeId: createNodeExecutionId([42]),
+    nodeId: '42',
     errors: [],
     ...overrides
   }
@@ -182,7 +181,7 @@ describe('useErrorReport', () => {
       exceptionType: 'RuntimeError',
       exceptionMessage: 'CUDA oom',
       traceback: 'trace-0',
-      nodeId: createNodeExecutionId([42]),
+      nodeId: '42',
       nodeType: 'KSampler',
       systemStats: sampleSystemStats,
       serverLogs: 'server logs',

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -22,7 +22,6 @@ import { DraggableList } from '@/scripts/ui/draggableList'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@comfyorg/tailwind-utils'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
@@ -150,11 +149,10 @@ function isWidgetShownOnParents(
   const source = widgetPromotedSource(widgetNode, widget)
   return parents.some((parent) => {
     if (source) {
-      const widgetNodeId = toNodeId(widgetNode.id)
       const interiorNodeId =
         String(widgetNode.id) === String(parent.id)
           ? source.nodeId
-          : widgetNodeId
+          : String(widgetNode.id)
 
       return isWidgetPromotedOnSubgraphNode(parent, {
         sourceNodeId: interiorNodeId,
@@ -162,7 +160,7 @@ function isWidgetShownOnParents(
       })
     }
     return isWidgetPromotedOnSubgraphNode(parent, {
-      sourceNodeId: toNodeId(widgetNode.id),
+      sourceNodeId: String(widgetNode.id),
       sourceWidgetName: widget.name
     })
   })

src/components/rightSidePanel/parameters/TabNodes.vue

@@ -4,13 +4,11 @@ import { computed, reactive, ref, shallowRef, watch } from 'vue'
 
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
 
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 
 import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
 import type { NodeWidgetsListList } from '../shared'
@@ -58,12 +56,12 @@ function setSectionCollapsed(nodeId: NodeId, collapsed: boolean) {
 const isAllCollapsed = computed({
   get() {
     return searchedWidgetsSectionDataList.value.every(({ node }) =>
-      isSectionCollapsed(toNodeId(node.id))
+      isSectionCollapsed(node.id)
     )
   },
   set(collapse: boolean) {
     for (const { node } of widgetsSectionDataList.value) {
-      setSectionCollapsed(toNodeId(node.id), collapse)
+      setSectionCollapsed(node.id, collapse)
     }
   }
 })
@@ -103,7 +101,7 @@ async function searcher(query: string) {
       :key="node.id"
       :node
       :widgets
-      :collapse="isSectionCollapsed(toNodeId(node.id)) && !isSearching"
+      :collapse="isSectionCollapsed(node.id) && !isSearching"
       :tooltip="
         isSearching || widgets.length
           ? ''
@@ -111,7 +109,7 @@ async function searcher(query: string) {
       "
       show-locate-button
       class="border-b border-interface-stroke"
-      @update:collapse="setSectionCollapsed(toNodeId(node.id), $event)"
+      @update:collapse="setSectionCollapsed(node.id, $event)"
     />
   </TransitionGroup>
 </template>

src/components/rightSidePanel/parameters/TabNormalInputs.vue

@@ -3,13 +3,11 @@ import { storeToRefs } from 'pinia'
 import { computed, reactive, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 
 import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
 import type { NodeWidgetsListList } from '../shared'
@@ -82,7 +80,7 @@ function setSectionCollapsed(nodeId: NodeId, collapsed: boolean) {
 const isAllCollapsed = computed({
   get() {
     const normalAllCollapsed = searchedWidgetsSectionDataList.value.every(
-      ({ node }) => isSectionCollapsed(toNodeId(node.id))
+      ({ node }) => isSectionCollapsed(node.id)
     )
     const hasAdvanced = advancedWidgetsSectionDataList.value.length > 0
     return hasAdvanced
@@ -91,7 +89,7 @@ const isAllCollapsed = computed({
   },
   set(collapse: boolean) {
     for (const { node } of widgetsSectionDataList.value) {
-      setSectionCollapsed(toNodeId(node.id), collapse)
+      setSectionCollapsed(node.id, collapse)
     }
     advancedCollapsed.value = collapse
   }
@@ -156,7 +154,7 @@ const advancedLabel = computed(() => {
       :node
       :label
       :widgets
-      :collapse="isSectionCollapsed(toNodeId(node.id)) && !isSearching"
+      :collapse="isSectionCollapsed(node.id) && !isSearching"
       :show-locate-button="isMultipleNodesSelected"
       :tooltip="
         isSearching || widgets.length
@@ -164,7 +162,7 @@ const advancedLabel = computed(() => {
           : t('rightSidePanel.inputsNoneTooltip')
       "
       class="border-b border-interface-stroke"
-      @update:collapse="setSectionCollapsed(toNodeId(node.id), $event)"
+      @update:collapse="setSectionCollapsed(node.id, $event)"
     />
   </TransitionGroup>
   <template v-if="advancedWidgetsSectionDataList.length > 0 && !isSearching">

src/components/rightSidePanel/parameters/TabSubgraphInputs.vue

@@ -14,7 +14,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 
 import { searchWidgets } from '../shared'
 import type { NodeWidgetsList } from '../shared'
@@ -83,7 +82,7 @@ const advancedInputsWidgets = computed((): NodeWidgetsList => {
   return allInteriorWidgets.filter(
     ({ node: interiorNode, widget }) =>
       !isWidgetPromotedOnSubgraphNode(node, {
-        sourceNodeId: toNodeId(interiorNode.id),
+        sourceNodeId: String(interiorNode.id),
         sourceWidgetName: getWidgetName(widget)
       })
   )

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -19,7 +19,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import { getWidgetDefaultValue, promptWidgetLabel } from '@/utils/widgetUtil'
 import type { WidgetValue } from '@/utils/widgetUtil'
 
@@ -91,10 +90,9 @@ function handleHideInput() {
 
   const source = widgetPromotedSource(node, widget)
   if (source) {
-    const currentNodeId = toNodeId(node.id)
     for (const parent of parents) {
       const sourceNodeId =
-        String(node.id) === String(parent.id) ? source.nodeId : currentNodeId
+        String(node.id) === String(parent.id) ? source.nodeId : String(node.id)
       demotePromotedInput(parent, {
         sourceNodeId,
         sourceWidgetName: source.widgetName

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -21,7 +21,6 @@ import {
   useWidgetValueStore
 } from '@/stores/widgetValueStore'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { widgetId } from '@/types/widgetId'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -71,7 +70,7 @@ const widgetComponent = computed(() => {
 
 const isLinked = computed(() => {
   const safeWidget = useVueNodeLifecycle()
-    .nodeManager.value?.vueNodeData.get(toNodeId(node.id))
+    .nodeManager.value?.vueNodeData.get(String(node.id))
     ?.widgets?.find((w) => w.name === widget.name)
   return safeWidget?.slotMetadata
     ? !!safeWidget.slotMetadata.linked
@@ -213,7 +212,7 @@ const displayLabel = customRef((track, trigger) => {
       :is="widgetComponent"
       v-model="widgetValue"
       :widget="simplifiedWidget"
-      :node-id="toNodeId(node.id)"
+      :node-id="String(node.id)"
       :node-type="node.type"
       :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
     />

src/components/rightSidePanel/shared.ts

@@ -5,10 +5,8 @@ import type { IFuseOptions } from 'fuse.js'
 
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
@@ -94,7 +92,7 @@ export function searchWidgetsAndNodes(
   }
 
   const searchableList: NodeSearchItem[] = list.map((item) => ({
-    nodeId: toNodeId(item.node.id),
+    nodeId: item.node.id,
     searchableTitle: (item.node.getTitle() ?? '').toLowerCase()
   }))
 
@@ -110,8 +108,8 @@ export function searchWidgetsAndNodes(
   )
 
   return list
-    .map((item, index) => {
-      if (matchedNodeIds.has(searchableList[index].nodeId)) {
+    .map((item) => {
+      if (matchedNodeIds.has(item.node.id)) {
         return { ...item, keep: true }
       }
       return {

src/components/sidebar/SidebarIcon.test.ts

@@ -3,12 +3,17 @@ import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
-import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'
 
 import SidebarIcon from './SidebarIcon.vue'
 
-type SidebarIconProps = ComponentProps<typeof SidebarIcon>
+type SidebarIconProps = {
+  icon: string
+  selected: boolean
+  tooltip?: string
+  class?: string
+  iconBadge?: string | (() => string | null)
+}
 
 const i18n = createI18n({
   legacy: false,
@@ -79,20 +84,4 @@ describe('SidebarIcon', () => {
       tooltipText
     )
   })
-
-  it('falls back to label for tooltip when no tooltip is provided', async () => {
-    const labelText = 'WASNodeSuitePreprocessors'
-    const { user } = renderSidebarIcon({ label: labelText })
-
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', labelText)
-
-    await user.hover(screen.getByRole('button'))
-
-    await waitFor(
-      () => {
-        expect(screen.getByRole('tooltip')).toHaveTextContent(labelText)
-      },
-      { timeout: 1000 }
-    )
-  })
 })

src/components/sidebar/SidebarIcon.vue

@@ -40,11 +40,9 @@
           </span>
         </div>
       </slot>
-      <!-- w-max sizes the label to the rail instead of the padding-inset
-           button content box, which is too narrow for one-line labels -->
       <span
         v-if="label && !isSmall"
-        class="side-bar-button-label line-clamp-2 w-max max-w-[calc(var(--sidebar-width)-var(--sidebar-padding))] text-center text-2xs wrap-break-word whitespace-normal"
+        class="side-bar-button-label text-center text-2xs"
         >{{ st(label, label) }}</span
       >
     </div>
@@ -85,14 +83,7 @@ const overlayValue = computed(() =>
   typeof iconBadge === 'function' ? (iconBadge() ?? '') : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
-/**
- * Falls back to the label when no tooltip is provided, so labels clamped
- * to two lines can always be recovered in full on hover.
- */
-const computedTooltip = computed(() => {
-  const text = tooltip || label
-  return st(text, text) + tooltipSuffix
-})
+const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
 </script>
 
 <style>

src/components/sidebar/tabs/queue/MediaLightbox.test.ts

@@ -4,8 +4,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ResultItemImpl } from '@/stores/queueStore'
-import type { SerializedNodeId } from '@/types/nodeId'
 
 import MediaLightbox from './MediaLightbox.vue'
 
@@ -28,7 +28,7 @@ type MockResultItem = Partial<ResultItemImpl> & {
   filename: string
   subfolder: string
   type: string
-  nodeId: SerializedNodeId
+  nodeId: NodeId
   mediaType: string
   id?: string
   url?: string
@@ -63,7 +63,7 @@ describe('MediaLightbox', () => {
       filename: 'image1.jpg',
       subfolder: 'outputs',
       type: 'output',
-      nodeId: '123',
+      nodeId: '123' as NodeId,
       mediaType: 'images',
       isImage: true,
       isVideo: false,
@@ -75,7 +75,7 @@ describe('MediaLightbox', () => {
       filename: 'image2.jpg',
       subfolder: 'outputs',
       type: 'output',
-      nodeId: '456',
+      nodeId: '456' as NodeId,
       mediaType: 'images',
       isImage: true,
       isVideo: false,
@@ -87,7 +87,7 @@ describe('MediaLightbox', () => {
       filename: 'image3.jpg',
       subfolder: 'outputs',
       type: 'output',
-      nodeId: '789',
+      nodeId: '789' as NodeId,
       mediaType: 'images',
       isImage: true,
       isVideo: false,

src/composables/boundingBoxes/boundingBoxesUtil.test.ts

@@ -1,237 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { BoundingBox } from '@/types/boundingBoxes'
-
-import type { HitMode, Region } from './boundingBoxesUtil'
-import {
-  applyDrag,
-  boxesAt,
-  fromBoundingBoxes,
-  tagRects,
-  toBoundingBoxes
-} from './boundingBoxesUtil'
-
-const region = (over: Partial<Region> = {}): Region => ({
-  x: 0.2,
-  y: 0.2,
-  w: 0.2,
-  h: 0.2,
-  type: 'obj',
-  text: '',
-  desc: '',
-  palette: [],
-  ...over
-})
-
-describe('applyDrag', () => {
-  it('moves without resizing and keeps width/height', () => {
-    const out = applyDrag('move', region({ x: 0.2, y: 0.2 }), 0.1, 0.1)
-    expect(out.x).toBeCloseTo(0.3)
-    expect(out.y).toBeCloseTo(0.3)
-    expect(out.w).toBeCloseTo(0.2)
-    expect(out.h).toBeCloseTo(0.2)
-  })
-
-  it('clamps a move so the box stays inside the unit square', () => {
-    const out = applyDrag(
-      'move',
-      region({ x: 0.9, y: 0.9, w: 0.2, h: 0.2 }),
-      0.5,
-      0.5
-    )
-    expect(out.x).toBeCloseTo(0.8)
-    expect(out.y).toBeCloseTo(0.8)
-  })
-
-  it('grows from the bottom-right for draw and resize-br', () => {
-    for (const mode of ['draw', 'resize-br'] as HitMode[]) {
-      const out = applyDrag(
-        mode,
-        region({ x: 0.2, y: 0.2, w: 0.1, h: 0.1 }),
-        0.1,
-        0.2
-      )
-      expect(out).toMatchObject({ x: 0.2, y: 0.2 })
-      expect(out.w).toBeCloseTo(0.2)
-      expect(out.h).toBeCloseTo(0.3)
-    }
-  })
-
-  it('moves the top-left corner on resize-tl', () => {
-    const out = applyDrag(
-      'resize-tl',
-      region({ x: 0.5, y: 0.5, w: 0.2, h: 0.2 }),
-      0.1,
-      0.1
-    )
-    expect(out.x).toBeCloseTo(0.6)
-    expect(out.y).toBeCloseTo(0.6)
-    expect(out.w).toBeCloseTo(0.1)
-    expect(out.h).toBeCloseTo(0.1)
-  })
-
-  it('normalizes a corner drag that inverts the box', () => {
-    const out = applyDrag(
-      'resize-tl',
-      region({ x: 0.5, y: 0.5, w: 0.2, h: 0.2 }),
-      0.3,
-      0
-    )
-    expect(out.x).toBeCloseTo(0.7)
-    expect(out.w).toBeCloseTo(0.1)
-    expect(out.y).toBeCloseTo(0.5)
-    expect(out.h).toBeCloseTo(0.2)
-  })
-
-  it('resizes single edges', () => {
-    expect(applyDrag('resize-r', region({ w: 0.2 }), 0.1, 0).w).toBeCloseTo(0.3)
-    expect(applyDrag('resize-b', region({ h: 0.2 }), 0, 0.1).h).toBeCloseTo(0.3)
-    const top = applyDrag('resize-t', region({ y: 0.4, h: 0.2 }), 0, 0.1)
-    expect(top.y).toBeCloseTo(0.5)
-    expect(top.h).toBeCloseTo(0.1)
-    const left = applyDrag('resize-l', region({ x: 0.4, w: 0.2 }), 0.1, 0)
-    expect(left.x).toBeCloseTo(0.5)
-    expect(left.w).toBeCloseTo(0.1)
-  })
-})
-
-describe('boxesAt', () => {
-  const regions: Region[] = [region({ x: 0.2, y: 0.2, w: 0.2, h: 0.2 })]
-
-  it('detects a corner handle', () => {
-    const hits = boxesAt(regions, 0.2, 0.2, 6, 100, 100, -1)
-    expect(hits[0]).toEqual({ index: 0, mode: 'resize-tl' })
-  })
-
-  it('detects an interior move', () => {
-    const hits = boxesAt(regions, 0.3, 0.3, 6, 100, 100, -1)
-    expect(hits[0]).toEqual({ index: 0, mode: 'move' })
-  })
-
-  it('returns nothing when the pointer misses every box', () => {
-    expect(boxesAt(regions, 0.9, 0.9, 6, 100, 100, -1)).toEqual([])
-  })
-
-  it('brings the active box to the front of overlapping candidates', () => {
-    const overlapping: Region[] = [
-      region({ x: 0.2, y: 0.2, w: 0.2, h: 0.2 }),
-      region({ x: 0.25, y: 0.25, w: 0.2, h: 0.2 })
-    ]
-    const hits = boxesAt(overlapping, 0.3, 0.3, 6, 100, 100, 1)
-    expect(hits).toHaveLength(2)
-    expect(hits[0].index).toBe(1)
-  })
-})
-
-describe('tagRects', () => {
-  const measure = (s: string) => s.length * 7
-
-  it('places the first tag at the top-left corner', () => {
-    const rects = tagRects(
-      [region({ x: 0.1, y: 0.1, w: 0.3, h: 0.3 })],
-      100,
-      100,
-      measure
-    )
-    expect(rects[0]).toMatchObject({ x: 10, y: 10, tag: '01' })
-    expect(rects[0].w).toBe(measure('01') + 8)
-  })
-
-  it('moves a colliding tag to a different corner', () => {
-    const boxes = [
-      region({ x: 0.1, y: 0.1, w: 0.3, h: 0.3 }),
-      region({ x: 0.1, y: 0.1, w: 0.3, h: 0.3 })
-    ]
-    const rects = tagRects(boxes, 100, 100, measure)
-    const sameSpot = rects[1].x === rects[0].x && rects[1].y === rects[0].y
-    expect(sameSpot).toBe(false)
-  })
-})
-
-describe('fromBoundingBoxes', () => {
-  it('converts pixel boxes to normalized regions with metadata', () => {
-    const boxes: BoundingBox[] = [
-      {
-        x: 100,
-        y: 200,
-        width: 300,
-        height: 400,
-        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#fff'] }
-      }
-    ]
-    expect(fromBoundingBoxes(boxes, 1000, 1000)[0]).toEqual({
-      x: 0.1,
-      y: 0.2,
-      w: 0.3,
-      h: 0.4,
-      type: 'text',
-      text: 'hi',
-      desc: 'd',
-      palette: ['#fff']
-    })
-  })
-
-  it('fills defaults when metadata is missing or partial', () => {
-    const boxes = [{ x: 0, y: 0, width: 10, height: 10 }] as BoundingBox[]
-    expect(fromBoundingBoxes(boxes, 100, 100)[0]).toMatchObject({
-      type: 'obj',
-      text: '',
-      desc: '',
-      palette: []
-    })
-  })
-
-  it('drops entries that are not bounding boxes', () => {
-    const boxes = [null, { x: 1 }, undefined] as unknown as BoundingBox[]
-    expect(fromBoundingBoxes(boxes, 100, 100)).toEqual([])
-  })
-
-  it('guards against zero dimensions', () => {
-    const boxes: BoundingBox[] = [
-      {
-        x: 5,
-        y: 5,
-        width: 5,
-        height: 5,
-        metadata: { type: 'obj', text: '', desc: '', palette: [] }
-      }
-    ]
-    expect(fromBoundingBoxes(boxes, 0, 0)[0]).toMatchObject({
-      x: 5,
-      y: 5,
-      w: 5,
-      h: 5
-    })
-  })
-})
-
-describe('toBoundingBoxes', () => {
-  it('rounds normalized regions back to pixels and copies the palette', () => {
-    const palette = ['#abc']
-    const regions: Region[] = [
-      region({ x: 0.1, y: 0.2, w: 0.3, h: 0.4, palette })
-    ]
-    const [box] = toBoundingBoxes(regions, 1000, 1000)
-    expect(box).toMatchObject({ x: 100, y: 200, width: 300, height: 400 })
-    expect(box.metadata.palette).toEqual(['#abc'])
-    expect(box.metadata.palette).not.toBe(palette)
-  })
-
-  it('round-trips from pixels to regions and back', () => {
-    const boxes: BoundingBox[] = [
-      {
-        x: 100,
-        y: 200,
-        width: 300,
-        height: 400,
-        metadata: { type: 'obj', text: '', desc: '', palette: [] }
-      }
-    ]
-    const restored = toBoundingBoxes(
-      fromBoundingBoxes(boxes, 1000, 1000),
-      1000,
-      1000
-    )
-    expect(restored).toEqual(boxes)
-  })
-})

src/composables/boundingBoxes/boundingBoxesUtil.ts

@@ -1,246 +0,0 @@
-import type { BoundingBox, BoundingBoxMetadata } from '@/types/boundingBoxes'
-
-export type HitMode =
-  | 'move'
-  | 'draw'
-  | 'resize-tl'
-  | 'resize-tr'
-  | 'resize-bl'
-  | 'resize-br'
-  | 'resize-t'
-  | 'resize-b'
-  | 'resize-l'
-  | 'resize-r'
-
-export interface Region extends BoundingBoxMetadata {
-  x: number
-  y: number
-  w: number
-  h: number
-}
-
-interface BoxCandidate {
-  index: number
-  mode: HitMode
-}
-
-interface TagRect {
-  x: number
-  y: number
-  w: number
-  h: number
-  tag: string
-}
-
-const clamp01 = (v: number) => Math.max(0, Math.min(1, v))
-
-function normalizeBox(b: Region): Region {
-  let { x, y, w, h } = b
-  if (w < 0) {
-    x += w
-    w = -w
-  }
-  if (h < 0) {
-    y += h
-    h = -h
-  }
-  x = clamp01(x)
-  y = clamp01(y)
-  w = Math.min(w, 1 - x)
-  h = Math.min(h, 1 - y)
-  return { ...b, x, y, w: Math.max(0, w), h: Math.max(0, h) }
-}
-
-function rectHitTest(
-  mx: number,
-  my: number,
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  rx: number,
-  ry: number
-): HitMode | null {
-  const h = (cx: number, cy: number) =>
-    Math.abs(mx - cx) < rx && Math.abs(my - cy) < ry
-  if (h(x1, y1)) return 'resize-tl'
-  if (h(x2, y1)) return 'resize-tr'
-  if (h(x1, y2)) return 'resize-bl'
-  if (h(x2, y2)) return 'resize-br'
-  if (mx >= x1 && mx <= x2 && Math.abs(my - y1) < ry) return 'resize-t'
-  if (mx >= x1 && mx <= x2 && Math.abs(my - y2) < ry) return 'resize-b'
-  if (my >= y1 && my <= y2 && Math.abs(mx - x1) < rx) return 'resize-l'
-  if (my >= y1 && my <= y2 && Math.abs(mx - x2) < rx) return 'resize-r'
-  if (mx >= x1 && mx <= x2 && my >= y1 && my <= y2) return 'move'
-  return null
-}
-
-export function applyDrag(
-  mode: HitMode,
-  start: Region,
-  dx: number,
-  dy: number
-): Region {
-  let { x, y, w, h } = start
-  switch (mode) {
-    case 'move':
-      x += dx
-      y += dy
-      x = clamp01(Math.min(x, 1 - w))
-      y = clamp01(Math.min(y, 1 - h))
-      break
-    case 'draw':
-    case 'resize-br':
-      w += dx
-      h += dy
-      break
-    case 'resize-tl':
-      x += dx
-      y += dy
-      w -= dx
-      h -= dy
-      break
-    case 'resize-tr':
-      y += dy
-      w += dx
-      h -= dy
-      break
-    case 'resize-bl':
-      x += dx
-      w -= dx
-      h += dy
-      break
-    case 'resize-t':
-      y += dy
-      h -= dy
-      break
-    case 'resize-b':
-      h += dy
-      break
-    case 'resize-l':
-      x += dx
-      w -= dx
-      break
-    case 'resize-r':
-      w += dx
-      break
-  }
-  return mode === 'move'
-    ? { ...start, x, y }
-    : normalizeBox({ ...start, x, y, w, h })
-}
-
-export function boxesAt(
-  regions: readonly Region[],
-  mxN: number,
-  myN: number,
-  handlePx: number,
-  logW: number,
-  logH: number,
-  activeIdx: number
-): BoxCandidate[] {
-  const rx = handlePx / Math.max(1, logW)
-  const ry = handlePx / Math.max(1, logH)
-  const res: BoxCandidate[] = []
-  for (let i = 0; i < regions.length; i++) {
-    const b = regions[i]
-    const mode = rectHitTest(mxN, myN, b.x, b.y, b.x + b.w, b.y + b.h, rx, ry)
-    if (mode) res.push({ index: i, mode })
-  }
-  const ai = res.findIndex((c) => c.index === activeIdx)
-  if (ai > 0) res.unshift(res.splice(ai, 1)[0])
-  return res
-}
-
-export function tagRects(
-  regions: readonly Region[],
-  logW: number,
-  logH: number,
-  measureWidth: (s: string) => number,
-  height = 14
-): TagRect[] {
-  const placed: TagRect[] = []
-  const rects: TagRect[] = []
-  const hits = (a: TagRect, b: TagRect) =>
-    a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
-  for (let i = 0; i < regions.length; i++) {
-    const b = regions[i]
-    const x1 = b.x * logW
-    const y1 = b.y * logH
-    const x2 = (b.x + b.w) * logW
-    const y2 = (b.y + b.h) * logH
-    const tag = String(i + 1).padStart(2, '0')
-    const w = measureWidth(tag) + 8
-    let pick: [number, number] = [x1, y1]
-    for (const [cx, cy] of [
-      [x1, y1],
-      [x2 - w, y1],
-      [x2 - w, y2 - height],
-      [x1, y2 - height]
-    ] as const) {
-      const candidate: TagRect = { x: cx, y: cy, w, h: height, tag }
-      if (!placed.some((p) => hits(candidate, p))) {
-        pick = [cx, cy]
-        break
-      }
-    }
-    const r: TagRect = { x: pick[0], y: pick[1], w, h: height, tag }
-    placed.push(r)
-    rects[i] = r
-  }
-  return rects
-}
-
-function isBoundingBox(b: unknown): b is BoundingBox {
-  if (!b || typeof b !== 'object') return false
-  const box = b as Record<string, unknown>
-  return (
-    typeof box.x === 'number' &&
-    typeof box.y === 'number' &&
-    typeof box.width === 'number' &&
-    typeof box.height === 'number'
-  )
-}
-
-export function fromBoundingBoxes(
-  boxes: readonly BoundingBox[],
-  width: number,
-  height: number
-): Region[] {
-  const w = width || 1
-  const h = height || 1
-  return boxes.filter(isBoundingBox).map((box) => {
-    const meta = (box.metadata ?? {}) as Partial<BoundingBoxMetadata>
-    return {
-      x: box.x / w,
-      y: box.y / h,
-      w: box.width / w,
-      h: box.height / h,
-      type: meta.type === 'text' ? 'text' : 'obj',
-      text: typeof meta.text === 'string' ? meta.text : '',
-      desc: typeof meta.desc === 'string' ? meta.desc : '',
-      palette: Array.isArray(meta.palette)
-        ? meta.palette.filter((c): c is string => typeof c === 'string')
-        : []
-    }
-  })
-}
-
-export function toBoundingBoxes(
-  regions: readonly Region[],
-  width: number,
-  height: number
-): BoundingBox[] {
-  return regions.map((r) => ({
-    x: Math.round(r.x * width),
-    y: Math.round(r.y * height),
-    width: Math.round(r.w * width),
-    height: Math.round(r.h * height),
-    metadata: {
-      type: r.type,
-      text: r.text,
-      desc: r.desc,
-      palette: r.palette.slice()
-    }
-  }))
-}

src/composables/boundingBoxes/useBoundingBoxes.test.ts

@@ -1,250 +0,0 @@
-import { render } from '@testing-library/vue'
-import { createPinia, setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Ref, ShallowRef } from 'vue'
-import { defineComponent, h, nextTick, ref, shallowRef } from 'vue'
-
-import { useBoundingBoxes } from './useBoundingBoxes'
-import type { BoundingBox } from '@/types/boundingBoxes'
-import { nodeId as toNodeId } from '@/types/nodeId'
-
-const { appState } = vi.hoisted(() => ({
-  appState: { node: null as unknown }
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: { canvas: { graph: { getNodeById: () => appState.node } } }
-}))
-
-const ctx = {
-  measureText: (s: string) => ({ width: s.length * 7 }),
-  setTransform: () => {},
-  clearRect: () => {},
-  fillRect: () => {},
-  strokeRect: () => {},
-  fillText: () => {},
-  drawImage: () => {},
-  save: () => {},
-  restore: () => {},
-  beginPath: () => {},
-  rect: () => {},
-  clip: () => {},
-  font: '',
-  fillStyle: '',
-  strokeStyle: '',
-  lineWidth: 0
-} as unknown as CanvasRenderingContext2D
-
-function makeCanvas(): HTMLCanvasElement {
-  const el = document.createElement('canvas')
-  Object.defineProperty(el, 'clientWidth', { value: 100, configurable: true })
-  Object.defineProperty(el, 'clientHeight', { value: 100, configurable: true })
-  el.getContext = (() => ctx) as unknown as HTMLCanvasElement['getContext']
-  el.getBoundingClientRect = () =>
-    ({
-      left: 0,
-      top: 0,
-      right: 100,
-      bottom: 100,
-      width: 100,
-      height: 100,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    }) as DOMRect
-  el.focus = () => {}
-  el.setPointerCapture = () => {}
-  el.releasePointerCapture = () => {}
-  return el
-}
-
-function makeNode() {
-  return {
-    widgets: [
-      { name: 'width', value: 512 },
-      { name: 'height', value: 512 }
-    ],
-    findInputSlot: () => -1,
-    getInputNode: () => null
-  }
-}
-
-const pe = (
-  clientX: number,
-  clientY: number,
-  over: Partial<PointerEvent> = {}
-) =>
-  ({
-    button: 0,
-    clientX,
-    clientY,
-    altKey: false,
-    pointerId: 1,
-    preventDefault: () => {},
-    stopPropagation: () => {},
-    ...over
-  }) as unknown as PointerEvent
-
-const flush = async () => {
-  await Promise.resolve()
-  await nextTick()
-}
-
-type Api = ReturnType<typeof useBoundingBoxes>
-interface Captured extends Api {
-  canvasEl: ShallowRef<HTMLCanvasElement | null>
-  modelValue: Ref<BoundingBox[]>
-}
-
-function setup(initial: BoundingBox[] = []) {
-  let captured: Captured | undefined
-  const Harness = defineComponent({
-    setup() {
-      const canvasEl = shallowRef<HTMLCanvasElement | null>(null)
-      const canvasContainer = shallowRef<HTMLDivElement | null>(null)
-      const inlineEditorEl = shallowRef<HTMLTextAreaElement | null>(null)
-      const modelValue = ref(initial)
-      const api = useBoundingBoxes(toNodeId('1'), {
-        canvasEl,
-        canvasContainer,
-        inlineEditorEl,
-        modelValue
-      })
-      captured = { canvasEl, modelValue, ...api }
-      return () => h('div')
-    }
-  })
-  render(Harness)
-  captured!.canvasEl.value = makeCanvas()
-  return captured!
-}
-
-const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
-  x: 51,
-  y: 51,
-  width: 256,
-  height: 256,
-  metadata: { type: 'obj', text: '', desc: '', palette: ['#ff0000'] },
-  ...over
-})
-
-beforeEach(() => {
-  setActivePinia(createPinia())
-  appState.node = makeNode()
-  vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
-    void Promise.resolve().then(() => cb(0))
-    return 1
-  })
-  vi.stubGlobal('cancelAnimationFrame', () => {})
-})
-
-afterEach(() => {
-  vi.unstubAllGlobals()
-})
-
-describe('useBoundingBoxes initialization', () => {
-  it('derives regions from the initial model value', () => {
-    const c = setup([box()])
-    expect(c.hasRegions.value).toBe(true)
-    expect(c.activeRegion.value).toMatchObject({ type: 'obj' })
-  })
-
-  it('exposes an aspect-ratio canvas style from the node width/height', () => {
-    const c = setup()
-    expect(c.canvasStyle.value).toEqual({ aspectRatio: '512 / 512' })
-  })
-
-  it('starts with no active region when empty', () => {
-    const c = setup()
-    expect(c.hasRegions.value).toBe(false)
-    expect(c.activeRegion.value).toBeNull()
-  })
-})
-
-describe('useBoundingBoxes drawing', () => {
-  it('draws a new region and syncs it to the model value', async () => {
-    const c = setup()
-    c.onPointerDown(pe(10, 10))
-    c.onCanvasPointerMove(pe(60, 60))
-    c.onDocPointerUp(pe(60, 60))
-    await flush()
-    expect(c.modelValue.value).toHaveLength(1)
-    expect(c.modelValue.value[0].width).toBeGreaterThan(0)
-  })
-
-  it('discards a zero-size draw', async () => {
-    const c = setup()
-    c.onPointerDown(pe(10, 10))
-    c.onDocPointerUp(pe(10, 10))
-    await flush()
-    expect(c.modelValue.value).toHaveLength(0)
-  })
-
-  it('selects an existing region instead of drawing when clicking inside it', async () => {
-    const c = setup([box()])
-    c.onPointerDown(pe(30, 30))
-    c.onDocPointerUp(pe(30, 30))
-    await flush()
-    expect(c.modelValue.value).toHaveLength(1)
-  })
-})
-
-describe('useBoundingBoxes region editing', () => {
-  it('changes the active region type', async () => {
-    const c = setup([box()])
-    c.setActiveType('text')
-    await flush()
-    expect(c.modelValue.value[0].metadata.type).toBe('text')
-  })
-
-  it('deletes the active region on Delete', async () => {
-    const c = setup([box()])
-    c.onCanvasKeyDown({
-      key: 'Delete',
-      preventDefault: () => {},
-      stopPropagation: () => {}
-    } as unknown as KeyboardEvent)
-    await flush()
-    expect(c.modelValue.value).toHaveLength(0)
-  })
-
-  it('clears all regions', async () => {
-    const c = setup([box(), box({ x: 0 })])
-    c.clearAll()
-    await flush()
-    expect(c.modelValue.value).toHaveLength(0)
-  })
-})
-
-describe('useBoundingBoxes inline editor', () => {
-  it('opens on double click and commits the description', async () => {
-    const c = setup([box()])
-    c.onDoubleClick(pe(30, 30) as unknown as MouseEvent)
-    await flush()
-    expect(c.inlineEditor.value).not.toBeNull()
-
-    c.inlineEditor.value!.value = 'a label'
-    c.commitInlineEditor()
-    await flush()
-    expect(c.modelValue.value[0].metadata.desc).toBe('a label')
-    expect(c.inlineEditor.value).toBeNull()
-  })
-
-  it('closes the inline editor on Escape', async () => {
-    const c = setup([box()])
-    c.onDoubleClick(pe(30, 30) as unknown as MouseEvent)
-    await flush()
-    c.onInlineKeyDown({ key: 'Escape' } as KeyboardEvent)
-    expect(c.inlineEditor.value).toBeNull()
-  })
-})
-
-describe('useBoundingBoxes hover cursor', () => {
-  it('switches to a pointer cursor over a tag', async () => {
-    const c = setup([box({ x: 10, y: 10, width: 256, height: 256 })])
-    expect(c.canvasCursor.value).toBe('crosshair')
-    c.onCanvasPointerMove(pe(15, 15))
-    await flush()
-    expect(c.canvasCursor.value).toBe('pointer')
-  })
-})

src/composables/boundingBoxes/useBoundingBoxes.ts

@@ -1,613 +0,0 @@
-import { useElementSize } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import type { Ref, ShallowRef } from 'vue'
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-
-import {
-  applyDrag,
-  boxesAt,
-  fromBoundingBoxes,
-  tagRects,
-  toBoundingBoxes
-} from '@/composables/boundingBoxes/boundingBoxesUtil'
-import type {
-  HitMode,
-  Region
-} from '@/composables/boundingBoxes/boundingBoxesUtil'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { app } from '@/scripts/app'
-import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import type { BoundingBox } from '@/types/boundingBoxes'
-import type { NodeId } from '@/types/nodeId'
-import { readableTextColor, textOnColor } from '@/utils/colorUtil'
-
-const HANDLE_PX = 8
-const DIMENSION_STEP = 16
-const BG_DIM = 0.75
-const MAX_ELEMENT_COLORS = 5
-
-interface InlineEditorState {
-  value: string
-  style: Record<string, string>
-  index: number
-}
-
-interface UseBoundingBoxesOptions {
-  canvasEl: Readonly<ShallowRef<HTMLCanvasElement | null>>
-  canvasContainer: Readonly<ShallowRef<HTMLDivElement | null>>
-  inlineEditorEl: Readonly<ShallowRef<HTMLTextAreaElement | null>>
-  modelValue: Ref<BoundingBox[]>
-}
-
-export function useBoundingBoxes(
-  nodeId: NodeId,
-  {
-    canvasEl,
-    canvasContainer,
-    inlineEditorEl,
-    modelValue
-  }: UseBoundingBoxesOptions
-) {
-  const focused = ref(false)
-  const drawing = ref(false)
-  const dragMode = ref<HitMode | null>(null)
-  const dragStartNorm = ref<{ x: number; y: number } | null>(null)
-  const boxAtStart = ref<Region | null>(null)
-  const hoverIndex = ref<number | null>(null)
-  const hoverTagIndex = ref<number | null>(null)
-  const bgImage = ref<HTMLImageElement | null>(null)
-  const inlineEditor = ref<InlineEditorState | null>(null)
-
-  const { width: containerWidth } = useElementSize(canvasContainer)
-
-  const litegraphNode = computed(() =>
-    nodeId && app.canvas?.graph ? app.canvas.graph.getNodeById(nodeId) : null
-  )
-  const { selectedNodeIds } = storeToRefs(useCanvasStore())
-  const isNodeSelected = computed(() => selectedNodeIds.value.has(nodeId))
-
-  function dimWidget(name: 'width' | 'height'): number | undefined {
-    const v = litegraphNode.value?.widgets?.find((w) => w.name === name)?.value
-    return typeof v === 'number' && v > 0 ? v : undefined
-  }
-  const widthValue = computed(() => dimWidget('width') ?? 1024)
-  const heightValue = computed(() => dimWidget('height') ?? 1024)
-
-  const state = ref({
-    regions: fromBoundingBoxes(
-      modelValue.value ?? [],
-      widthValue.value,
-      heightValue.value
-    )
-  })
-  const activeIndex = ref(state.value.regions.length ? 0 : -1)
-
-  const aspectRatio = computed(
-    () => `${widthValue.value} / ${heightValue.value}`
-  )
-  const canvasStyle = computed(() => ({ aspectRatio: aspectRatio.value }))
-
-  const activeRegion = computed(() =>
-    activeIndex.value >= 0 ? state.value.regions[activeIndex.value] : null
-  )
-  const hasRegions = computed(() => state.value.regions.length > 0)
-
-  function clampToCanvas(n: number) {
-    return Math.max(0, Math.min(1, n))
-  }
-
-  function logicalSize() {
-    const el = canvasEl.value
-    return { w: el?.clientWidth || 1, h: el?.clientHeight || 1 }
-  }
-
-  function pointerNorm(e: PointerEvent) {
-    const el = canvasEl.value
-    if (!el) return { x: 0, y: 0 }
-    const r = el.getBoundingClientRect()
-    return {
-      x: clampToCanvas((e.clientX - r.left) / r.width),
-      y: clampToCanvas((e.clientY - r.top) / r.height)
-    }
-  }
-
-  let rafHandle = 0
-  function requestDraw() {
-    if (rafHandle) return
-    rafHandle = requestAnimationFrame(() => {
-      rafHandle = 0
-      drawCanvas()
-    })
-  }
-
-  function measureWidth(ctx: CanvasRenderingContext2D, s: string) {
-    return ctx.measureText(s).width
-  }
-
-  function drawCanvas() {
-    const el = canvasEl.value
-    if (!el) return
-    const { w: W, h: H } = logicalSize()
-    const dpr = window.devicePixelRatio || 1
-    const bw = Math.max(1, Math.round(W * dpr))
-    const bh = Math.max(1, Math.round(H * dpr))
-    if (el.width !== bw || el.height !== bh) {
-      el.width = bw
-      el.height = bh
-    }
-    const ctx = el.getContext('2d')
-    if (!ctx) return
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-    ctx.clearRect(0, 0, W, H)
-
-    if (bgImage.value) {
-      ctx.drawImage(bgImage.value, 0, 0, W, H)
-      ctx.fillStyle = `rgba(0,0,0,${BG_DIM})`
-      ctx.fillRect(0, 0, W, H)
-    }
-
-    const showActive = focused.value || isNodeSelected.value
-    const aIdx = showActive ? activeIndex.value : -1
-    const order = state.value.regions
-      .map((_, i) => i)
-      .filter((i) => i !== aIdx)
-      .reverse()
-    if (aIdx >= 0 && aIdx < state.value.regions.length) order.push(aIdx)
-
-    ctx.font = 'bold 11px monospace'
-    const tag_rects = tagRects(state.value.regions, W, H, (s) =>
-      measureWidth(ctx, s)
-    )
-
-    for (const i of order) {
-      const b = state.value.regions[i]
-      const active = i === aIdx
-      const pal = (b.palette || []).filter(Boolean)
-      const col = pal.length ? pal[0] : '#8c8c8c'
-      const x1 = b.x * W
-      const y1 = b.y * H
-      const x2 = (b.x + b.w) * W
-      const y2 = (b.y + b.h) * H
-      const w = x2 - x1
-      const h = y2 - y1
-      const hovered = i === hoverIndex.value || active
-
-      if (active) {
-        ctx.fillStyle = 'rgba(26,26,26,0.88)'
-        ctx.fillRect(x1, y1, w, h)
-      }
-      ctx.fillStyle = col + (hovered ? '3a' : '22')
-      ctx.fillRect(x1, y1, w, h)
-
-      const lw = active ? 2 : hovered ? 1.5 : 1
-      ctx.strokeStyle = col
-      ctx.lineWidth = lw
-      ctx.strokeRect(x1 + lw / 2, y1 + lw / 2, w - lw, h - lw)
-
-      if (pal.length) {
-        const sw = w / pal.length
-        const sh = 7
-        for (let p = 0; p < pal.length; p++) {
-          const sx = x1 + Math.round(p * sw)
-          ctx.fillStyle = pal[p]
-          ctx.fillRect(sx, y1, x1 + Math.round((p + 1) * sw) - sx, sh)
-        }
-      }
-
-      ctx.save()
-      ctx.beginPath()
-      ctx.rect(x1, y1, w, h)
-      ctx.clip()
-
-      let body = b.desc || ''
-      if (b.type === 'text' && b.text)
-        body = `"${b.text}"` + (body ? ` — ${body}` : '')
-      if (body) {
-        ctx.font = '12px monospace'
-        ctx.fillStyle = readableTextColor(col)
-        const pad = 4
-        const lh = 14
-        let ty = y1 + 15 + 12
-        for (const line of wrapLines(ctx, body, w - pad * 2)) {
-          if (ty > y1 + h) break
-          ctx.fillText(line, x1 + pad, ty)
-          ty += lh
-        }
-      }
-
-      const tr = tag_rects[i]
-      ctx.font = 'bold 11px monospace'
-      ctx.fillStyle = col
-      ctx.fillRect(tr.x, tr.y, tr.w, 14)
-      if (i === hoverTagIndex.value) {
-        ctx.fillStyle = 'rgba(255,255,255,0.25)'
-        ctx.fillRect(tr.x, tr.y, tr.w, 14)
-        ctx.strokeStyle = '#fff'
-        ctx.lineWidth = 1
-        ctx.strokeRect(tr.x + 0.5, tr.y + 0.5, tr.w - 1, 13)
-      }
-      ctx.fillStyle = textOnColor(col)
-      ctx.fillText(tr.tag, tr.x + 4, tr.y + 11)
-      ctx.restore()
-    }
-  }
-
-  function wrapLines(
-    ctx: CanvasRenderingContext2D,
-    text: string,
-    maxW: number
-  ): string[] {
-    const out: string[] = []
-    for (const para of text.split('\n')) {
-      let line = ''
-      for (const word of para.split(/\s+/)) {
-        if (!word) continue
-        const test = line ? `${line} ${word}` : word
-        if (line && ctx.measureText(test).width > maxW) {
-          out.push(line)
-          line = word
-        } else {
-          line = test
-        }
-      }
-      out.push(line)
-    }
-    return out
-  }
-
-  const hitTestPoint = (mN: { x: number; y: number }) => {
-    const { w: W, h: H } = logicalSize()
-    const cands = boxesAt(
-      state.value.regions,
-      mN.x,
-      mN.y,
-      HANDLE_PX,
-      W,
-      H,
-      activeIndex.value
-    )
-    if (!cands.length) return null
-    return (
-      cands.find((c) => c.index === activeIndex.value && c.mode !== 'move') ||
-      cands[0]
-    )
-  }
-
-  const titleAt = (mN: { x: number; y: number }) => {
-    const el = canvasEl.value
-    if (!el) return null
-    const ctx = el.getContext('2d')
-    if (!ctx) return null
-    const { w: W, h: H } = logicalSize()
-    const rects = tagRects(state.value.regions, W, H, (s) =>
-      measureWidth(ctx, s)
-    )
-    const px = mN.x * W
-    const py = mN.y * H
-    for (let i = state.value.regions.length - 1; i >= 0; i--) {
-      const r = rects[i]
-      if (r && px >= r.x && px <= r.x + r.w && py >= r.y && py <= r.y + r.h)
-        return i
-    }
-    return null
-  }
-
-  function pickForSelection(mN: { x: number; y: number }, cycle: boolean) {
-    const { w: W, h: H } = logicalSize()
-    const cands = boxesAt(
-      state.value.regions,
-      mN.x,
-      mN.y,
-      HANDLE_PX,
-      W,
-      H,
-      activeIndex.value
-    )
-    if (!cands.length) return null
-    const activeResize = cands.find(
-      (c) => c.index === activeIndex.value && c.mode !== 'move'
-    )
-    if (activeResize && !cycle) return activeResize
-    const ti = titleAt(mN)
-    if (ti !== null && !cycle) return { index: ti, mode: 'move' as HitMode }
-    if (cycle && cands.length > 1) {
-      const pos = cands.findIndex((c) => c.index === activeIndex.value)
-      return cands[(pos + 1) % cands.length]
-    }
-    return (
-      cands.find((c) => c.index === activeIndex.value && c.mode !== 'move') ||
-      cands[0]
-    )
-  }
-
-  function onPointerDown(e: PointerEvent) {
-    if (e.button !== 0) return
-    canvasEl.value?.focus()
-    hoverTagIndex.value = null
-    hoverIndex.value = null
-    const mN = pointerNorm(e)
-    const hit = pickForSelection(mN, e.altKey)
-    if (hit) {
-      activeIndex.value = hit.index
-      dragMode.value = hit.mode
-      boxAtStart.value = { ...state.value.regions[hit.index] }
-    } else {
-      dragMode.value = 'draw'
-      const nb: Region = {
-        x: mN.x,
-        y: mN.y,
-        w: 0,
-        h: 0,
-        type: 'obj',
-        text: '',
-        desc: '',
-        palette: []
-      }
-      state.value.regions.push(nb)
-      activeIndex.value = state.value.regions.length - 1
-      boxAtStart.value = { ...nb }
-    }
-    drawing.value = true
-    dragStartNorm.value = mN
-    canvasEl.value?.setPointerCapture(e.pointerId)
-    e.preventDefault()
-    requestDraw()
-  }
-
-  function onDocPointerMove(e: PointerEvent) {
-    if (
-      !drawing.value ||
-      !boxAtStart.value ||
-      !dragStartNorm.value ||
-      !dragMode.value
-    )
-      return
-    const mN = pointerNorm(e)
-    const dx = mN.x - dragStartNorm.value.x
-    const dy = mN.y - dragStartNorm.value.y
-    const nb = applyDrag(dragMode.value, boxAtStart.value, dx, dy)
-    state.value.regions[activeIndex.value] = nb
-    requestDraw()
-  }
-
-  function onDocPointerUp(e: PointerEvent) {
-    if (!drawing.value) return
-    drawing.value = false
-    canvasEl.value?.releasePointerCapture?.(e.pointerId)
-    const b = state.value.regions[activeIndex.value]
-    if (b && (b.w < 0.005 || b.h < 0.005) && dragMode.value === 'draw') {
-      removeRegion(activeIndex.value)
-    }
-    syncState()
-  }
-
-  function onCanvasPointerMove(e: PointerEvent) {
-    if (drawing.value) onDocPointerMove(e)
-    else onPointerMove(e)
-  }
-
-  function onPointerMove(e: PointerEvent) {
-    if (drawing.value) return
-    const mN = pointerNorm(e)
-    const ti = titleAt(mN)
-    const hit = hitTestPoint(mN)
-    const hb = ti !== null ? ti : hit ? hit.index : null
-    if (ti !== hoverTagIndex.value || hb !== hoverIndex.value) {
-      hoverTagIndex.value = ti
-      hoverIndex.value = hb
-      requestDraw()
-    }
-  }
-
-  function onPointerLeave() {
-    if (hoverTagIndex.value !== null || hoverIndex.value !== null) {
-      hoverTagIndex.value = null
-      hoverIndex.value = null
-      requestDraw()
-    }
-  }
-
-  const canvasCursor = computed(() =>
-    hoverTagIndex.value !== null ? 'pointer' : 'crosshair'
-  )
-
-  function onDoubleClick(e: MouseEvent) {
-    e.preventDefault()
-    const mN = pointerNormFromMouse(e)
-    const { w: W, h: H } = logicalSize()
-    const cands = boxesAt(
-      state.value.regions,
-      mN.x,
-      mN.y,
-      HANDLE_PX,
-      W,
-      H,
-      activeIndex.value
-    )
-    const target = cands.find((c) => c.index === activeIndex.value) || cands[0]
-    if (!target) return
-    openInlineEditor(target.index)
-  }
-
-  function pointerNormFromMouse(e: MouseEvent) {
-    const el = canvasEl.value
-    if (!el) return { x: 0, y: 0 }
-    const r = el.getBoundingClientRect()
-    return {
-      x: clampToCanvas((e.clientX - r.left) / r.width),
-      y: clampToCanvas((e.clientY - r.top) / r.height)
-    }
-  }
-
-  function openInlineEditor(index: number) {
-    const b = state.value.regions[index]
-    if (!b) return
-    activeIndex.value = index
-    const { w: W, h: H } = logicalSize()
-    const w = Math.min(W, Math.max(70, b.w * W))
-    const h = Math.min(H, Math.max(42, b.h * H))
-    const left = Math.max(0, Math.min(b.x * W, W - w))
-    const top = Math.max(0, Math.min(b.y * H, H - h))
-    inlineEditor.value = {
-      value: b.desc || '',
-      index,
-      style: {
-        left: `${left}px`,
-        top: `${top}px`,
-        width: `${w}px`,
-        height: `${h}px`,
-        borderColor: (b.palette || []).find(Boolean) || '#46b4e6'
-      }
-    }
-    void nextTick(() => {
-      inlineEditorEl.value?.focus()
-      inlineEditorEl.value?.select()
-    })
-  }
-
-  function onInlineKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      inlineEditor.value = null
-    } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-      commitInlineEditor()
-    }
-  }
-
-  function commitInlineEditor() {
-    const ed = inlineEditor.value
-    if (!ed) return
-    const b = state.value.regions[ed.index]
-    if (b) b.desc = ed.value
-    inlineEditor.value = null
-    syncState()
-  }
-
-  function onCanvasKeyDown(e: KeyboardEvent) {
-    if (drawing.value) return
-    const idx = activeIndex.value
-    if ((e.key === 'Delete' || e.key === 'Backspace') && idx >= 0) {
-      e.preventDefault()
-      e.stopPropagation()
-      removeRegion(idx)
-      syncState()
-    }
-  }
-
-  function removeRegion(i: number) {
-    state.value.regions.splice(i, 1)
-    if (!state.value.regions.length) activeIndex.value = -1
-    else if (i <= activeIndex.value)
-      activeIndex.value = Math.max(0, activeIndex.value - 1)
-  }
-
-  function setActiveType(t: 'obj' | 'text') {
-    if (activeRegion.value) {
-      activeRegion.value.type = t
-      syncState()
-    }
-  }
-
-  function clearAll() {
-    state.value.regions = []
-    activeIndex.value = -1
-    syncState()
-  }
-
-  function syncState() {
-    modelValue.value = toBoundingBoxes(
-      state.value.regions,
-      widthValue.value,
-      heightValue.value
-    )
-    requestDraw()
-  }
-
-  watch(containerWidth, () => requestDraw())
-  watch(
-    () => state.value.regions.length,
-    () => requestDraw()
-  )
-  watch(isNodeSelected, () => requestDraw())
-  watch([widthValue, heightValue], () => syncState())
-
-  const nodeOutputStore = useNodeOutputStore()
-  function applyImageDimensions(naturalWidth: number, naturalHeight: number) {
-    const node = litegraphNode.value
-    if (!node) return
-    const snap = (v: number) =>
-      Math.max(DIMENSION_STEP, Math.round(v / DIMENSION_STEP) * DIMENSION_STEP)
-    const targetW = snap(naturalWidth)
-    const targetH = snap(naturalHeight)
-    const widthWidget = node.widgets?.find((w) => w.name === 'width')
-    const heightWidget = node.widgets?.find((w) => w.name === 'height')
-    if (widthWidget && widthWidget.value !== targetW) {
-      widthWidget.value = targetW
-      widthWidget.callback?.(targetW)
-    }
-    if (heightWidget && heightWidget.value !== targetH) {
-      heightWidget.value = targetH
-      heightWidget.callback?.(targetH)
-    }
-  }
-
-  let lastBgUrl = ''
-  function updateBgImage() {
-    const node = litegraphNode.value
-    if (!node) return
-    const slot = node.findInputSlot('background')
-    const inputNode = slot >= 0 ? node.getInputNode(slot) : null
-    const url = inputNode
-      ? nodeOutputStore.getNodeImageUrls(inputNode)?.[0]
-      : undefined
-    if (!url) {
-      if (bgImage.value) {
-        bgImage.value = null
-        lastBgUrl = ''
-        requestDraw()
-      }
-      return
-    }
-    if (url === lastBgUrl) return
-    lastBgUrl = url
-    const currentUrl = url
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-    img.onload = () => {
-      if (currentUrl !== lastBgUrl) return
-      bgImage.value = img
-      applyImageDimensions(img.naturalWidth, img.naturalHeight)
-      requestDraw()
-    }
-    img.src = url
-  }
-  watch(() => nodeOutputStore.nodeOutputs, updateBgImage, { deep: true })
-  watch(() => nodeOutputStore.nodePreviewImages, updateBgImage, { deep: true })
-
-  updateBgImage()
-  void nextTick(() => requestDraw())
-
-  onBeforeUnmount(() => {
-    if (rafHandle) cancelAnimationFrame(rafHandle)
-  })
-
-  return {
-    canvasStyle,
-    canvasCursor,
-    focused,
-    activeRegion,
-    hasRegions,
-    inlineEditor,
-    maxColors: MAX_ELEMENT_COLORS,
-    onPointerDown,
-    onCanvasPointerMove,
-    onDocPointerUp,
-    onPointerLeave,
-    onDoubleClick,
-    onCanvasKeyDown,
-    onInlineKeyDown,
-    commitInlineEditor,
-    setActiveType,
-    clearAll,
-    syncState
-  }
-}

src/composables/canvas/useSelectedLiteGraphItems.test.ts

@@ -11,7 +11,6 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { NodeId } from '@/renderer/core/layout/types'
-import { nodeId } from '@/types/nodeId'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
 
 const mockApp = vi.hoisted(() => ({
@@ -70,7 +69,7 @@ class MockNode implements Positionable {
   ) {
     this.pos = pos
     this.size = size
-    this.id = nodeId('mock-node')
+    this.id = 'mock-node'
     this.boundingRect = [0, 0, 0, 0]
   }
 

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -12,7 +12,6 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 import { computeUnionBounds } from '@/utils/mathUtil'
 
@@ -101,7 +100,8 @@ export function useSelectionToolboxPosition(
       if (item.id == null) continue
 
       if (shouldRenderVueNodes.value && typeof item.id === 'string') {
-        const layout = layoutStore.getNodeLayoutRef(toNodeId(item.id)).value
+        // Use layout store for Vue nodes (only works with string IDs)
+        const layout = layoutStore.getNodeLayoutRef(item.id).value
         if (layout) {
           allBounds.push([
             layout.bounds.x,

src/composables/graph/useArrangeNodes.ts

@@ -1,14 +1,12 @@
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { Point } from '@/renderer/core/layout/types'
 import { app } from '@/scripts/app'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 
 export type ArrangeLayout = 'vertical' | 'horizontal' | 'grid'
 
@@ -41,7 +39,7 @@ const titleHeightOf = (node: LGraphNode): number => {
 const toBox = (node: LGraphNode): NodeBox => {
   const titleHeight = titleHeightOf(node)
   return {
-    id: toNodeId(node.id),
+    id: node.id,
     posX: node.pos[0],
     posY: node.pos[1],
     visualWidth: node.size[0],

src/composables/graph/useErrorClearingHooks.test.ts

@@ -21,7 +21,6 @@ import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 import { seedRequiredInputMissingNodeError } from '@/utils/__tests__/executionErrorTestUtils'
 import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
@@ -51,11 +50,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
 
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedRequiredInputMissingNodeError(
-      store,
-      createNodeExecutionId([node.id]),
-      'clip'
-    )
+    seedRequiredInputMissingNodeError(store, String(node.id), 'clip')
 
     node.onConnectionsChange!(NodeSlotType.INPUT, 0, true, null, node.inputs[0])
 
@@ -67,11 +62,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
     installErrorClearingHooks(graph)
 
     const store = useExecutionErrorStore()
-    seedRequiredInputMissingNodeError(
-      store,
-      createNodeExecutionId([node.id]),
-      'clip'
-    )
+    seedRequiredInputMissingNodeError(store, String(node.id), 'clip')
 
     node.onConnectionsChange!(
       NodeSlotType.INPUT,
@@ -90,11 +81,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
     installErrorClearingHooks(graph)
 
     const store = useExecutionErrorStore()
-    seedRequiredInputMissingNodeError(
-      store,
-      createNodeExecutionId([node.id]),
-      'clip'
-    )
+    seedRequiredInputMissingNodeError(store, String(node.id), 'clip')
 
     node.onConnectionsChange!(
       NodeSlotType.OUTPUT,
@@ -116,11 +103,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
 
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedRequiredInputMissingNodeError(
-      store,
-      createNodeExecutionId([node.id]),
-      'model'
-    )
+    seedRequiredInputMissingNodeError(store, String(node.id), 'model')
 
     node.onConnectionsChange!(NodeSlotType.INPUT, 0, true, null, node.inputs[0])
 
@@ -246,11 +229,7 @@ describe('Widget change error clearing via onWidgetChanged', () => {
     const store = useExecutionErrorStore()
     const mediaStore = useMissingMediaStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedRequiredInputMissingNodeError(
-      store,
-      createNodeExecutionId([node.id]),
-      'image'
-    )
+    seedRequiredInputMissingNodeError(store, String(node.id), 'image')
     mediaStore.setMissingMedia([
       {
         nodeId: String(node.id),
@@ -300,11 +279,7 @@ describe('installErrorClearingHooks lifecycle', () => {
     // Verify the hooks actually work
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedRequiredInputMissingNodeError(
-      store,
-      createNodeExecutionId([lateNode.id]),
-      'value'
-    )
+    seedRequiredInputMissingNodeError(store, String(lateNode.id), 'value')
 
     lateNode.onConnectionsChange!(
       NodeSlotType.INPUT,

src/composables/graph/useErrorClearingHooks.ts

@@ -34,7 +34,6 @@ import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacem
 import { getCnrIdFromNode } from '@/platform/nodeReplacement/cnrIdUtil'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { appendNodeExecutionId } from '@/types/nodeIdentification'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import {
   collectAllNodes,
@@ -84,7 +83,7 @@ function installNodeHooks(node: LGraphNode): void {
 
       const promotedSource = widgetPromotedSource(node, widget)
       const executionId = promotedSource
-        ? appendNodeExecutionId(hostExecId, promotedSource.nodeId)
+        ? `${hostExecId}:${promotedSource.nodeId}`
         : hostExecId
       const widgetName = promotedSource?.widgetName ?? widget.name
 

src/composables/graph/useGraphNodeManager.test.ts

@@ -16,7 +16,6 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 
 describe('Node Reactivity', () => {
   beforeEach(() => {
@@ -69,7 +68,7 @@ describe('Node Reactivity', () => {
     const onValueChange = vi.fn()
 
     graph.trigger('node:slot-links:changed', {
-      nodeId: toNodeId(node.id),
+      nodeId: String(node.id),
       slotType: NodeSlotType.INPUT
     })
     await nextTick()
@@ -117,7 +116,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const { graph, node } = createWidgetInputGraph()
     const { vueNodeData } = useGraphNodeManager(graph)
 
-    const nodeData = vueNodeData.get(toNodeId(node.id))
+    const nodeData = vueNodeData.get(String(node.id))
     const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
 
     expect(widgetData?.slotMetadata).toBeDefined()
@@ -128,7 +127,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const { graph, node } = createWidgetInputGraph()
     const { vueNodeData } = useGraphNodeManager(graph)
 
-    const nodeData = vueNodeData.get(toNodeId(node.id))
+    const nodeData = vueNodeData.get(String(node.id))
     const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
 
     // Verify initially linked
@@ -156,7 +155,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const { graph, node } = createWidgetInputGraph()
     const { vueNodeData } = useGraphNodeManager(graph)
 
-    const nodeData = vueNodeData.get(toNodeId(node.id))!
+    const nodeData = vueNodeData.get(String(node.id))!
 
     // Mimic what processedWidgets does in NodeWidgets.vue:
     // derive disabled from slotMetadata.linked
@@ -205,7 +204,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
       throw new Error('Expected SubgraphInput.connect to produce a link')
 
     const { vueNodeData } = useGraphNodeManager(subgraph)
-    const nodeData = vueNodeData.get(toNodeId(node.id))
+    const nodeData = vueNodeData.get(String(node.id))
     const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
 
     expect(widgetData?.slotMetadata?.linked).toBe(true)
@@ -231,7 +230,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     graph.add(subgraphNode)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeData = vueNodeData.get(toNodeId(subgraphNode.id))
+    const nodeData = vueNodeData.get(String(subgraphNode.id))
 
     const widgetData = nodeData?.widgets?.find((w) => w.name === 'value')
     expect(widgetData).toBeDefined()
@@ -243,7 +242,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const { graph, node } = createWidgetInputGraph()
     const { vueNodeData } = useGraphNodeManager(graph)
 
-    const nodeData = vueNodeData.get(toNodeId(node.id))!
+    const nodeData = vueNodeData.get(String(node.id))!
     const widgetData = nodeData.widgets!.find((w) => w.name === 'prompt')!
 
     expect(widgetData.slotMetadata?.linked).toBe(true)
@@ -279,7 +278,7 @@ describe('Subgraph output slot label reactivity', () => {
     graph.add(node)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeId = toNodeId(node.id)
+    const nodeId = String(node.id)
     const nodeData = vueNodeData.get(nodeId)
     if (!nodeData?.outputs) throw new Error('Expected output data to exist')
 
@@ -307,7 +306,7 @@ describe('Subgraph output slot label reactivity', () => {
     graph.add(node)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeId = toNodeId(node.id)
+    const nodeId = String(node.id)
     const nodeData = vueNodeData.get(nodeId)
     if (!nodeData?.inputs) throw new Error('Expected input data to exist')
 
@@ -370,7 +369,7 @@ describe('Nested promoted widget mapping', () => {
     graph.add(subgraphNodeB)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeData = vueNodeData.get(toNodeId(subgraphNodeB.id))
+    const nodeData = vueNodeData.get(String(subgraphNodeB.id))
     const mappedWidget = nodeData?.widgets?.[0]
 
     expect(mappedWidget).toBeDefined()
@@ -407,7 +406,7 @@ describe('Nested promoted widget mapping', () => {
     graph.add(subgraphNode)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeData = vueNodeData.get(toNodeId(subgraphNode.id))
+    const nodeData = vueNodeData.get(String(subgraphNode.id))
     const widgets = nodeData?.widgets
 
     expect(widgets).toHaveLength(2)
@@ -453,7 +452,7 @@ describe('Promoted widget sourceExecutionId', () => {
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeData = vueNodeData.get(toNodeId(subgraphNode.id))
+    const nodeData = vueNodeData.get(String(subgraphNode.id))
     const promotedWidget = nodeData?.widgets?.find(
       (w) => w.name === 'ckpt_input'
     )
@@ -476,7 +475,7 @@ describe('Promoted widget sourceExecutionId', () => {
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
 
     const { vueNodeData } = useGraphNodeManager(graph)
-    const nodeData = vueNodeData.get(toNodeId(node.id))
+    const nodeData = vueNodeData.get(String(node.id))
     const widget = nodeData?.widgets?.find((w) => w.name === 'steps')
 
     expect(widget).toBeDefined()
@@ -704,56 +703,3 @@ describe('reconcileNodeErrorFlags (via lastNodeErrors watcher)', () => {
     expect(subgraphNode.has_errors).toBe(true)
   })
 })
-
-describe('Pre-remove vueNodeData drain', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-  })
-
-  it('drops vueNodeData entry before node.onRemoved fires', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-    const { vueNodeData } = useGraphNodeManager(graph)
-    const id = toNodeId(node.id)
-
-    expect(vueNodeData.has(id)).toBe(true)
-
-    let dataPresentInOnRemoved: boolean | undefined
-    node.onRemoved = () => {
-      dataPresentInOnRemoved = vueNodeData.has(id)
-    }
-
-    graph.remove(node)
-
-    expect(
-      dataPresentInOnRemoved,
-      'vueNodeData entry must be cleared before node.onRemoved fires so reactive consumers cannot observe the detached node'
-    ).toBe(false)
-  })
-
-  it('clears vueNodeData when LGraph.clear() dispatches node:before-removed for each node', () => {
-    const graph = new LGraph()
-    const nodeA = new LGraphNode('a')
-    const nodeB = new LGraphNode('b')
-    graph.add(nodeA)
-    graph.add(nodeB)
-    const { vueNodeData } = useGraphNodeManager(graph)
-
-    expect(vueNodeData.size).toBe(2)
-
-    const beforeRemovedSpy = vi.fn()
-    graph.events.addEventListener('node:before-removed', beforeRemovedSpy)
-
-    graph.clear()
-
-    expect(
-      beforeRemovedSpy,
-      'clear() must dispatch node:before-removed so reactive consumers can drop refs before nodes detach'
-    ).toHaveBeenCalledTimes(2)
-    expect(
-      vueNodeData.size,
-      'node:before-removed listener must drain vueNodeData when clear() removes every node'
-    ).toBe(0)
-  })
-})

src/composables/graph/useGraphNodeManager.ts

@@ -21,8 +21,7 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
+import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { IS_CONTROL_WIDGET } from '@/scripts/widgets'
@@ -31,7 +30,6 @@ import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
 import { normalizeControlOption } from '@/types/simplifiedWidget'
 import { getWidgetIdForNode } from '@/utils/litegraphUtil'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
 import type { WidgetId } from '@/types/widgetId'
 
 import type {
@@ -51,7 +49,7 @@ import { getExecutionIdByNode } from '@/utils/graphTraversalUtil'
 export interface WidgetSlotMetadata {
   index: number
   linked: boolean
-  originNodeId?: NodeId
+  originNodeId?: string
   originOutputName?: string
   type: string
 }
@@ -96,7 +94,7 @@ export interface SafeWidgetData {
    * host subgraph node. Used for missing-model lookups that key by
    * execution ID (e.g. `"65:42"` vs the host node's `"65"`).
    */
-  sourceExecutionId?: NodeExecutionId
+  sourceExecutionId?: string
   /**
    * Interior source widget name. Only set for promoted widgets, where `name`
    * is the host input slot name; missing-model lookups key by the interior
@@ -136,10 +134,10 @@ export interface VueNodeData {
 
 export interface GraphNodeManager {
   // Reactive state - safe data extracted from LiteGraph nodes
-  vueNodeData: ReadonlyMap<NodeId, VueNodeData>
+  vueNodeData: ReadonlyMap<string, VueNodeData>
 
   // Access to original LiteGraph nodes (non-reactive)
-  getNode(id: NodeId): LGraphNode | undefined
+  getNode(id: string): LGraphNode | undefined
 
   // Lifecycle methods
   cleanup(): void
@@ -227,7 +225,7 @@ function isDOMBackedWidget(widget: IBaseWidget): boolean {
 interface PromotedWidgetMetadata {
   controlWidget?: SafeControlWidget
   isDOMWidget: boolean
-  sourceExecutionId?: NodeExecutionId
+  sourceExecutionId?: string
   sourceWidgetName?: string
 }
 
@@ -353,14 +351,14 @@ function buildSlotMetadata(
 ): Map<string, WidgetSlotMetadata> {
   const metadata = new Map<string, WidgetSlotMetadata>()
   inputs?.forEach((input, index) => {
-    let originNodeId: NodeId | undefined
+    let originNodeId: string | undefined
     let originOutputName: string | undefined
 
     if (input.link != null && graphRef) {
       const link = graphRef.getLink(input.link)
       const originNode = link ? graphRef.getNodeById(link.origin_id) : null
       if (link && originNode) {
-        originNodeId = toNodeId(link.origin_id)
+        originNodeId = String(link.origin_id)
         originOutputName = originNode.outputs?.[link.origin_slot]?.name
       }
     }
@@ -471,7 +469,7 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
   const badges = node.badges
 
   return {
-    id: toNodeId(node.id),
+    id: String(node.id),
     title: typeof node.title === 'string' ? node.title : '',
     type: nodeType,
     mode: node.mode || 0,
@@ -498,12 +496,12 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   // Get layout mutations composable
   const { createNode, deleteNode, setSource } = useLayoutMutations()
   // Safe reactive data extracted from LiteGraph nodes
-  const vueNodeData = reactive(new Map<NodeId, VueNodeData>())
+  const vueNodeData = reactive(new Map<string, VueNodeData>())
 
   // Non-reactive storage for original LiteGraph nodes
-  const nodeRefs = new Map<NodeId, LGraphNode>()
+  const nodeRefs = new Map<string, LGraphNode>()
 
-  const refreshNodeSlots = (nodeId: NodeId) => {
+  const refreshNodeSlots = (nodeId: string) => {
     const nodeRef = nodeRefs.get(nodeId)
     const currentData = vueNodeData.get(nodeId)
 
@@ -518,14 +516,14 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   }
 
   // Get access to original LiteGraph node (non-reactive)
-  const getNode = (id: NodeId): LGraphNode | undefined => {
+  const getNode = (id: string): LGraphNode | undefined => {
     return nodeRefs.get(id)
   }
 
   const syncWithGraph = () => {
     if (!graph?._nodes) return
 
-    const currentNodes = new Set(graph._nodes.map((n) => toNodeId(n.id)))
+    const currentNodes = new Set(graph._nodes.map((n) => String(n.id)))
 
     // Remove deleted nodes
     for (const id of Array.from(vueNodeData.keys())) {
@@ -537,7 +535,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
 
     // Add/update existing nodes
     graph._nodes.forEach((node) => {
-      const id = toNodeId(node.id)
+      const id = String(node.id)
 
       // Store non-reactive reference
       nodeRefs.set(id, node)
@@ -555,7 +553,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     node: LGraphNode,
     originalCallback?: (node: LGraphNode) => void
   ) => {
-    const id = toNodeId(node.id)
+    const id = String(node.id)
 
     // Store non-reactive reference to original node
     nodeRefs.set(id, node)
@@ -610,22 +608,27 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
-  const dropNodeReferences = (id: NodeId) => {
-    nodeRefs.delete(id)
-    vueNodeData.delete(id)
-  }
-
+  /**
+   * Handles node removal from the graph - cleans up all references
+   */
   const handleNodeRemoved = (
     node: LGraphNode,
     originalCallback?: (node: LGraphNode) => void
   ) => {
-    const id = toNodeId(node.id)
+    const id = String(node.id)
 
     // Remove node from layout store
     setSource(LayoutSource.Canvas)
     void deleteNode(id)
-    dropNodeReferences(id)
-    originalCallback?.(node)
+
+    // Clean up all tracking references
+    nodeRefs.delete(id)
+    vueNodeData.delete(id)
+
+    // Call original callback if provided
+    if (originalCallback) {
+      originalCallback(node)
+    }
   }
 
   /**
@@ -634,8 +637,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   const createCleanupFunction = (
     originalOnNodeAdded: ((node: LGraphNode) => void) | undefined,
     originalOnNodeRemoved: ((node: LGraphNode) => void) | undefined,
-    originalOnTrigger: ((event: LGraphTriggerEvent) => void) | undefined,
-    beforeNodeRemovedListener: (e: CustomEvent<{ node: LGraphNode }>) => void
+    originalOnTrigger: ((event: LGraphTriggerEvent) => void) | undefined
   ) => {
     return () => {
       // Restore original callbacks
@@ -643,17 +645,15 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       graph.onNodeRemoved = originalOnNodeRemoved || undefined
       graph.onTrigger = originalOnTrigger || undefined
 
-      graph.events.removeEventListener(
-        'node:before-removed',
-        beforeNodeRemovedListener
-      )
-
       // Clear all state maps
       nodeRefs.clear()
       vueNodeData.clear()
     }
   }
 
+  /**
+   * Sets up event listeners - now simplified with extracted handlers
+   */
   const setupEventListeners = (): (() => void) => {
     // Store original callbacks
     const originalOnNodeAdded = graph.onNodeAdded
@@ -669,21 +669,11 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       handleNodeRemoved(node, originalOnNodeRemoved)
     }
 
-    const beforeNodeRemovedListener = (
-      e: CustomEvent<{ node: LGraphNode }>
-    ) => {
-      dropNodeReferences(toNodeId(e.detail.node.id))
-    }
-    graph.events.addEventListener(
-      'node:before-removed',
-      beforeNodeRemovedListener
-    )
-
     const triggerHandlers: {
       [K in LGraphTriggerAction]: (event: LGraphTriggerParam<K>) => void
     } = {
       'node:property:changed': (propertyEvent) => {
-        const nodeId = toNodeId(propertyEvent.nodeId)
+        const nodeId = String(propertyEvent.nodeId)
         const currentData = vueNodeData.get(nodeId)
 
         if (currentData) {
@@ -779,15 +769,15 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         }
       },
       'node:slot-errors:changed': (slotErrorsEvent) => {
-        refreshNodeSlots(toNodeId(slotErrorsEvent.nodeId))
+        refreshNodeSlots(String(slotErrorsEvent.nodeId))
       },
       'node:slot-links:changed': (slotLinksEvent) => {
         if (slotLinksEvent.slotType === NodeSlotType.INPUT) {
-          refreshNodeSlots(toNodeId(slotLinksEvent.nodeId))
+          refreshNodeSlots(String(slotLinksEvent.nodeId))
         }
       },
       'node:slot-label:changed': (slotLabelEvent) => {
-        const nodeId = toNodeId(slotLabelEvent.nodeId)
+        const nodeId = String(slotLabelEvent.nodeId)
         const nodeRef = nodeRefs.get(nodeId)
         if (!nodeRef) return
 
@@ -827,11 +817,11 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     // Initialize state
     syncWithGraph()
 
+    // Return cleanup function
     return createCleanupFunction(
       originalOnNodeAdded || undefined,
       originalOnNodeRemoved || undefined,
-      originalOnTrigger || undefined,
-      beforeNodeRemovedListener
+      originalOnTrigger || undefined
     )
   }
 

src/composables/graph/useMoreOptionsMenu.ts

@@ -1,10 +1,13 @@
 import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  LGraphGroup,
+  LGraphNode,
+  NodeId
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { getExtraOptionsForWidget } from '@/services/litegraphService'
-import type { SerializedNodeId } from '@/types/nodeId'
 import { isLGraphGroup } from '@/utils/litegraphUtil'
 
 import {
@@ -47,7 +50,7 @@ export enum BadgeVariant {
 // Global singleton for NodeOptions component reference
 let nodeOptionsInstance: null | NodeOptionsInstance = null
 
-const hoveredWidget = ref<[string, SerializedNodeId | undefined]>()
+const hoveredWidget = ref<[string, NodeId | undefined]>()
 
 /**
  * Toggle the node options popover
@@ -67,7 +70,7 @@ export function toggleNodeOptions(event: Event) {
 export function showNodeOptions(
   event: MouseEvent,
   widgetName?: string,
-  nodeId?: SerializedNodeId
+  nodeId?: NodeId
 ) {
   hoveredWidget.value = widgetName ? [widgetName, nodeId] : undefined
   if (nodeOptionsInstance?.show) {

src/composables/graph/useVueNodeLifecycle.ts

@@ -10,7 +10,6 @@ import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMuta
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { app as comfyApp } from '@/scripts/app'
-import { nodeId as toNodeId } from '@/types/nodeId'
 
 function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
@@ -48,9 +47,9 @@ function useVueNodeLifecycleIndividual() {
     for (const link of activeGraph._links.values()) {
       layoutMutations.createLink(
         link.id,
-        toNodeId(link.origin_id),
+        link.origin_id,
         link.origin_slot,
-        toNodeId(link.target_id),
+        link.target_id,
         link.target_slot
       )
     }

src/composables/maskeditor/useMaskEditorLoader.ts

@@ -1,5 +1,4 @@
 import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import type { ImageRef, ImageLayer } from '@/stores/maskEditorDataStore'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
@@ -179,7 +178,7 @@ export function useMaskEditorLoader() {
         maskLayer,
         paintLayer,
         sourceRef,
-        nodeId: toNodeId(node.id)
+        nodeId: node.id
       }
 
       dataStore.sourceNode = node

src/composables/node/useNodePricing.ts

@@ -24,8 +24,6 @@ import type {
   WidgetDependency
 } from '@/schemas/nodeDefSchema'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId, SerializedNodeId } from '@/types/nodeId'
 import type { Expression } from 'jsonata'
 import jsonata from 'jsonata'
 
@@ -454,18 +452,18 @@ const pricingTick = ref(0)
 // Per-node revision tracking for VueNodes mode (more efficient than global tick)
 // Uses plain Map with individual refs per node for fine-grained reactivity
 // Keys are stringified node IDs to handle both string and number ID types
-const nodeRevisions = new Map<NodeId, Ref<number>>()
+const nodeRevisions = new Map<string, Ref<number>>()
 
 /**
  * Get or create a revision ref for a specific node.
  * Each node has its own independent ref, so updates to one won't trigger others.
  */
-const getNodeRevisionRef = (rawNodeId: SerializedNodeId): Ref<number> => {
-  const nodeId = toNodeId(rawNodeId)
-  let rev = nodeRevisions.get(nodeId)
+const getNodeRevisionRef = (nodeId: string | number): Ref<number> => {
+  const key = String(nodeId)
+  let rev = nodeRevisions.get(key)
   if (!rev) {
     rev = ref(0)
-    nodeRevisions.set(nodeId, rev)
+    nodeRevisions.set(key, rev)
   }
   return rev
 }

src/composables/node/usePromotedPreviews.test.ts

@@ -137,18 +137,6 @@ describe(usePromotedPreviews, () => {
     expect(promotedPreviews.value).toEqual([])
   })
 
-  it('returns empty array (does not throw) when SubgraphNode is detached', () => {
-    const setup = createSetup()
-    const parentGraph = setup.subgraphNode.graph!
-    parentGraph.add(setup.subgraphNode)
-    parentGraph.remove(setup.subgraphNode)
-
-    expect(setup.subgraphNode.graph).toBeNull()
-    const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
-    expect(() => promotedPreviews.value).not.toThrow()
-    expect(promotedPreviews.value).toEqual([])
-  })
-
   it('returns empty array when no $$ promotions exist', () => {
     const setup = createSetup()
     addInteriorNode(setup, { id: 10 })

src/composables/node/usePromotedPreviews.ts

@@ -6,16 +6,10 @@ import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { UUID } from '@/utils/uuid'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
-import {
-  appendNodeExecutionId,
-  createNodeLocatorId
-} from '@/types/nodeIdentification'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
+import { createNodeLocatorId } from '@/types/nodeIdentification'
 
 interface PromotedPreview {
-  sourceNodeId: NodeId
+  sourceNodeId: string
   sourceWidgetName: string
   type: 'image' | 'video' | 'audio'
   urls: string[]
@@ -43,8 +37,8 @@ export function usePromotedPreviews(
   /** Touches reactive sources for Vue tracking; `getNodeImageUrls` reads non-reactive app state. */
   function readReactivePreviewUrls(
     leafHost: SubgraphNode,
-    leafSourceNodeId: NodeId,
-    leafExecutionId: NodeExecutionId,
+    leafSourceNodeId: string,
+    leafExecutionId: string,
     interiorNode: LGraphNode
   ): string[] | undefined {
     const locatorId = createNodeLocatorId(
@@ -74,7 +68,6 @@ export function usePromotedPreviews(
   const promotedPreviews = computed((): PromotedPreview[] => {
     const node = toValue(lgraphNode)
     if (!(node instanceof SubgraphNode)) return []
-    if (node.isDetached) return []
 
     const rootGraphId = node.rootGraph.id
     const hostLocator = String(node.id)
@@ -91,7 +84,7 @@ export function usePromotedPreviews(
     function resolveNestedHost(
       rootGraphId: UUID,
       currentHostLocator: string,
-      sourceNodeId: NodeId
+      sourceNodeId: string
     ) {
       const currentHost = hostNodesByLocator.get(currentHostLocator)
       const sourceNode = currentHost?.subgraph.getNodeById(sourceNodeId)
@@ -116,7 +109,7 @@ export function usePromotedPreviews(
         resolveNestedHost
       )
       const leaf = resolved?.leaf ?? {
-        sourceNodeId: toNodeId(exposure.sourceNodeId),
+        sourceNodeId: exposure.sourceNodeId,
         sourcePreviewName: exposure.sourcePreviewName
       }
       const leafHostLocator =
@@ -128,7 +121,7 @@ export function usePromotedPreviews(
       const urls = readReactivePreviewUrls(
         leafHost,
         leaf.sourceNodeId,
-        appendNodeExecutionId(leafHostLocator, leaf.sourceNodeId),
+        `${leafHostLocator}:${leaf.sourceNodeId}`,
         interiorNode
       )
       if (!urls?.length) return []

src/composables/painter/usePainter.test.ts

@@ -7,8 +7,6 @@ import { defineComponent, nextTick, ref } from 'vue'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { api } from '@/scripts/api'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 
 import { usePainter } from './usePainter'
 
@@ -96,10 +94,7 @@ function makeWidget(name: string, value: unknown = null): IBaseWidget {
 /**
  * Mounts a thin wrapper component so Vue lifecycle hooks fire.
  */
-function mountPainter(
-  nodeId: NodeId = toNodeId('test-node'),
-  initialModelValue = ''
-) {
+function mountPainter(nodeId = 'test-node', initialModelValue = '') {
   let painter!: PainterResult
   const canvasEl = ref<HTMLCanvasElement | null>(null)
   const cursorEl = ref<HTMLElement | null>(null)
@@ -358,7 +353,7 @@ describe('usePainter', () => {
       const maskWidget = makeWidget('mask', '')
       mockWidgets.push(maskWidget)
 
-      mountPainter(toNodeId('test-node'), 'painter/existing.png [temp]')
+      mountPainter('test-node', 'painter/existing.png [temp]')
 
       const result = await maskWidget.serializeValue!({} as LGraphNode, 0)
       expect(result).toBe('painter/existing.png [temp]')
@@ -380,7 +375,7 @@ describe('usePainter', () => {
         toBlob: (cb: BlobCallback) => cb(new Blob(['x']))
       } as unknown as HTMLCanvasElement
 
-      const { canvasEl } = mountPainter(toNodeId('test-node'), '')
+      const { canvasEl } = mountPainter('test-node', '')
       canvasEl.value = fakeCanvas
       await nextTick()
 
@@ -413,7 +408,7 @@ describe('usePainter', () => {
         toBlob: (cb: BlobCallback) => cb(new Blob(['x']))
       } as unknown as HTMLCanvasElement
 
-      const { canvasEl } = mountPainter(toNodeId('test-node'), '')
+      const { canvasEl } = mountPainter('test-node', '')
       canvasEl.value = fakeCanvas
       await nextTick()
 
@@ -439,7 +434,7 @@ describe('usePainter', () => {
         toBlob: (cb: BlobCallback) => cb(new Blob(['x']))
       } as unknown as HTMLCanvasElement
 
-      const { canvasEl } = mountPainter(toNodeId('test-node'), '')
+      const { canvasEl } = mountPainter('test-node', '')
       canvasEl.value = fakeCanvas
       await nextTick()
 
@@ -452,7 +447,7 @@ describe('usePainter', () => {
       const maskWidget = makeWidget('mask', '')
       mockWidgets.push(maskWidget)
 
-      mountPainter(toNodeId('test-node'), 'painter/cached.png [temp]')
+      mountPainter('test-node', 'painter/cached.png [temp]')
 
       const result = await maskWidget.serializeValue!({} as LGraphNode, 0)
       expect(result).toBe('painter/cached.png [temp]')
@@ -471,7 +466,7 @@ describe('usePainter', () => {
       } as unknown as HTMLCanvasElement
 
       const { painter, canvasEl, modelValue } = mountPainter(
-        toNodeId('test-node'),
+        'test-node',
         'painter/old-upload.png [temp]'
       )
       canvasEl.value = fakeCanvas
@@ -486,7 +481,7 @@ describe('usePainter', () => {
     it('calls api.apiURL with parsed filename params when modelValue is set', () => {
       vi.mocked(api.apiURL).mockClear()
 
-      mountPainter(toNodeId('test-node'), 'painter/my-image.png [temp]')
+      mountPainter('test-node', 'painter/my-image.png [temp]')
 
       expect(api.apiURL).toHaveBeenCalledWith(
         expect.stringContaining('filename=my-image.png')

src/composables/painter/usePainter.ts

@@ -17,7 +17,6 @@ import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import type { NodeId } from '@/types/nodeId'
 
 type PainterTool = 'brush' | 'eraser'
 
@@ -32,7 +31,7 @@ interface UsePainterOptions {
   modelValue: Ref<string>
 }
 
-export function usePainter(nodeId: NodeId, options: UsePainterOptions) {
+export function usePainter(nodeId: string, options: UsePainterOptions) {
   const { canvasEl, cursorEl, modelValue } = options
   const { t } = useI18n()
   const nodeOutputStore = useNodeOutputStore()

src/composables/palette/usePaletteSwatchRow.test.ts

@@ -1,114 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import type { EffectScope } from 'vue'
-import { effectScope, ref, shallowRef } from 'vue'
-
-import { usePaletteSwatchRow } from './usePaletteSwatchRow'
-
-const scopes: EffectScope[] = []
-
-afterEach(() => {
-  while (scopes.length) scopes.pop()?.stop()
-})
-
-function setup(initial: string[]) {
-  const modelValue = ref(initial)
-  const container = shallowRef(document.createElement('div'))
-  const picker = shallowRef(document.createElement('input'))
-  const scope = effectScope()
-  scopes.push(scope)
-  const api = scope.run(() =>
-    usePaletteSwatchRow({ modelValue, container, picker })
-  )!
-  return { modelValue, container, picker, ...api }
-}
-
-const mouseEvent = () => ({ stopPropagation: vi.fn() }) as unknown as MouseEvent
-
-describe('usePaletteSwatchRow', () => {
-  it('appends a default color', () => {
-    const { modelValue, addColor } = setup(['#000000'])
-    addColor()
-    expect(modelValue.value).toEqual(['#000000', '#ffffff'])
-  })
-
-  it('removes a color by index', () => {
-    const { modelValue, remove } = setup(['#a', '#b', '#c'])
-    remove(1)
-    expect(modelValue.value).toEqual(['#a', '#c'])
-  })
-
-  it('seeds the picker input with the clicked color before opening it', () => {
-    const { picker, openPicker } = setup(['#112233'])
-    const click = vi.spyOn(picker.value!, 'click')
-    openPicker(0, mouseEvent())
-    expect(picker.value!.value).toBe('#112233')
-    expect(click).toHaveBeenCalled()
-  })
-
-  it('falls back to white when the slot is empty', () => {
-    const { picker, openPicker } = setup([''])
-    openPicker(0, mouseEvent())
-    expect(picker.value!.value).toBe('#ffffff')
-  })
-
-  it('writes the picked color back to the open slot', () => {
-    const { modelValue, openPicker, onPickerInput } = setup(['#a', '#b'])
-    openPicker(1, mouseEvent())
-    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
-    expect(modelValue.value).toEqual(['#a', '#123456'])
-  })
-
-  it('ignores picker input when no slot is open', () => {
-    const { modelValue, onPickerInput } = setup(['#a'])
-    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
-    expect(modelValue.value).toEqual(['#a'])
-  })
-
-  it('reorders via drag when the pointer crosses another swatch', () => {
-    const { modelValue, container, onPointerDown } = setup(['#a', '#b'])
-    for (const i of [0, 1]) {
-      const swatch = document.createElement('div')
-      swatch.setAttribute('data-index', String(i))
-      container.value!.appendChild(swatch)
-    }
-    const second = container.value!.children[1] as HTMLDivElement
-    second.getBoundingClientRect = () =>
-      ({ left: 100, right: 140, top: 0, bottom: 20, width: 40 }) as DOMRect
-
-    onPointerDown(0, { button: 0, clientX: 10, clientY: 10 } as PointerEvent)
-    document.dispatchEvent(
-      new MouseEvent('pointermove', { clientX: 130, clientY: 10, buttons: 1 })
-    )
-    expect(modelValue.value).toEqual(['#b', '#a'])
-  })
-
-  it('cancels a stale drag when the primary button is no longer pressed', () => {
-    const { modelValue, container, onPointerDown } = setup(['#a', '#b'])
-    for (const i of [0, 1]) {
-      const swatch = document.createElement('div')
-      swatch.setAttribute('data-index', String(i))
-      container.value!.appendChild(swatch)
-    }
-    const second = container.value!.children[1] as HTMLDivElement
-    second.getBoundingClientRect = () =>
-      ({ left: 100, right: 140, top: 0, bottom: 20, width: 40 }) as DOMRect
-
-    onPointerDown(0, { button: 0, clientX: 10, clientY: 10 } as PointerEvent)
-    document.dispatchEvent(
-      new MouseEvent('pointermove', { clientX: 130, clientY: 10, buttons: 0 })
-    )
-    expect(modelValue.value).toEqual(['#a', '#b'])
-  })
-
-  it('ignores non-left-button pointer downs', () => {
-    const { modelValue, container, onPointerDown } = setup(['#a', '#b'])
-    const swatch = document.createElement('div')
-    swatch.setAttribute('data-index', '1')
-    container.value!.appendChild(swatch)
-    onPointerDown(0, { button: 2, clientX: 10, clientY: 10 } as PointerEvent)
-    document.dispatchEvent(
-      new MouseEvent('pointermove', { clientX: 130, clientY: 10 })
-    )
-    expect(modelValue.value).toEqual(['#a', '#b'])
-  })
-})

src/composables/palette/usePaletteSwatchRow.ts

@@ -1,114 +0,0 @@
-import { useEventListener } from '@vueuse/core'
-import type { Ref, ShallowRef } from 'vue'
-import { ref } from 'vue'
-
-interface UsePaletteSwatchRowOptions {
-  modelValue: Ref<string[]>
-  container: Readonly<ShallowRef<HTMLDivElement | null>>
-  picker: Readonly<ShallowRef<HTMLInputElement | null>>
-}
-
-export function usePaletteSwatchRow({
-  modelValue,
-  container,
-  picker
-}: UsePaletteSwatchRowOptions) {
-  const pickerIndex = ref<number | null>(null)
-
-  function openPicker(i: number, e: MouseEvent) {
-    e.stopPropagation()
-    pickerIndex.value = i
-    const el = picker.value
-    if (!el) return
-    el.value = modelValue.value[i] || '#ffffff'
-    el.click()
-  }
-
-  function onPickerInput(e: Event) {
-    const v = (e.target as HTMLInputElement).value
-    if (pickerIndex.value === null) return
-    const next = modelValue.value.slice()
-    next[pickerIndex.value] = v
-    modelValue.value = next
-  }
-
-  function remove(i: number) {
-    const next = modelValue.value.slice()
-    next.splice(i, 1)
-    modelValue.value = next
-  }
-
-  function addColor() {
-    modelValue.value = [...modelValue.value, '#ffffff']
-  }
-
-  const drag = ref<{
-    index: number
-    startX: number
-    startY: number
-    active: boolean
-  } | null>(null)
-
-  function onPointerDown(i: number, e: PointerEvent) {
-    if (e.button !== 0) return
-    drag.value = {
-      index: i,
-      startX: e.clientX,
-      startY: e.clientY,
-      active: false
-    }
-  }
-
-  useEventListener(document, 'pointermove', (e: PointerEvent) => {
-    const d = drag.value
-    if (!d) return
-    if ((e.buttons & 1) === 0) {
-      drag.value = null
-      return
-    }
-    if (!d.active) {
-      if (Math.abs(e.clientX - d.startX) + Math.abs(e.clientY - d.startY) < 4)
-        return
-      d.active = true
-    }
-    const rows =
-      container.value?.querySelectorAll<HTMLDivElement>('[data-index]')
-    if (!rows) return
-    for (const other of rows) {
-      if (parseInt(other.dataset.index || '-1', 10) === d.index) continue
-      const r = other.getBoundingClientRect()
-      if (
-        e.clientX >= r.left &&
-        e.clientX <= r.right &&
-        e.clientY >= r.top - 6 &&
-        e.clientY <= r.bottom + 6
-      ) {
-        const oi = parseInt(other.dataset.index || '-1', 10)
-        if (oi < 0) continue
-        const next = modelValue.value.slice()
-        const [moved] = next.splice(d.index, 1)
-        const insertAt = e.clientX > r.left + r.width / 2 ? oi + 1 : oi
-        next.splice(insertAt > d.index ? insertAt - 1 : insertAt, 0, moved)
-        modelValue.value = next
-        drag.value = null
-        return
-      }
-    }
-  })
-
-  useEventListener(document, 'pointerup', () => {
-    drag.value = null
-  })
-
-  useEventListener(document, 'pointercancel', () => {
-    drag.value = null
-  })
-
-  return {
-    openPicker,
-    onPickerInput,
-    remove,
-    addColor,
-    onPointerDown
-  }
-}

src/composables/useHdrViewer.ts

@@ -1,443 +0,0 @@
-import * as THREE from 'three'
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
-import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
-
-import type { ChromaticityCoords, GamutName } from '@/renderer/hdr/colorGamut'
-import {
-  detectGamutFromChromaticities,
-  gamutToSrgbMatrix
-} from '@/renderer/hdr/colorGamut'
-import {
-  HDR_VIEWER_FRAGMENT_SHADER,
-  HDR_VIEWER_VERTEX_SHADER
-} from '@/renderer/hdr/hdrViewerShader'
-import type { ChannelHistograms, ImageStats } from '@/renderer/hdr/hdrStats'
-import {
-  computeChannelHistograms,
-  computeImageStats
-} from '@/renderer/hdr/hdrStats'
-import { WebGLViewport } from '@/renderer/three/WebGLViewport'
-import { getImageFilenameFromUrl } from '@/utils/hdrFormatUtil'
-
-const MIN_ZOOM = 0.05
-const MAX_ZOOM = 64
-
-export type ChannelMode = 'rgb' | 'r' | 'g' | 'b' | 'a' | 'luminance'
-
-export const CHANNEL_MODES: ChannelMode[] = [
-  'rgb',
-  'r',
-  'g',
-  'b',
-  'a',
-  'luminance'
-]
-
-const CHANNEL_INDEX: Record<ChannelMode, number> = {
-  rgb: 0,
-  r: 1,
-  g: 2,
-  b: 3,
-  a: 4,
-  luminance: 5
-}
-
-export interface PixelReadout {
-  x: number
-  y: number
-  r: number
-  g: number
-  b: number
-  a: number | null
-}
-
-interface ExrTexData {
-  header?: { chromaticities?: ChromaticityCoords }
-}
-
-function createLoader(url: string) {
-  const filename = getImageFilenameFromUrl(url)
-  if (filename?.toLowerCase().endsWith('.hdr')) return new RGBELoader()
-  const loader = new EXRLoader()
-  loader.setDataType(THREE.FloatType)
-  return loader
-}
-
-function makeReader(
-  data: ArrayLike<number>,
-  type: THREE.TextureDataType
-): (index: number) => number {
-  if (type === THREE.HalfFloatType) {
-    return (index) => THREE.DataUtils.fromHalfFloat(data[index])
-  }
-  return (index) => data[index]
-}
-
-function loadHdrTexture(
-  url: string
-): Promise<{ texture: THREE.DataTexture; gamut: GamutName }> {
-  return new Promise((resolve, reject) => {
-    createLoader(url).load(
-      url,
-      (texture, texData) => {
-        const chromaticities = (texData as ExrTexData)?.header?.chromaticities
-        resolve({
-          texture,
-          gamut: detectGamutFromChromaticities(chromaticities)
-        })
-      },
-      undefined,
-      reject
-    )
-  })
-}
-
-export function useHdrViewer() {
-  const exposureStops = ref(0)
-  const dither = ref(true)
-  const clipWarnings = ref(false)
-  const gamut = ref<GamutName>('sRGB')
-  const channel = ref<ChannelMode>('rgb')
-  const loading = ref(true)
-  const error = ref<string | null>(null)
-  const dimensions = ref<string | null>(null)
-  const stats = ref<ImageStats | null>(null)
-  const histograms = shallowRef<ChannelHistograms | null>(null)
-  const pixel = ref<PixelReadout | null>(null)
-
-  const histogram = computed<Uint32Array | null>(() => {
-    const channelHistograms = histograms.value
-    if (!channelHistograms) return null
-    switch (channel.value) {
-      case 'r':
-        return channelHistograms.r
-      case 'g':
-        return channelHistograms.g
-      case 'b':
-        return channelHistograms.b
-      case 'a':
-        return channelHistograms.a
-      default:
-        return channelHistograms.luminance
-    }
-  })
-
-  const containerRef = shallowRef<HTMLElement | null>(null)
-
-  let renderer: THREE.WebGLRenderer | null = null
-  let viewport: WebGLViewport | null = null
-  let scene: THREE.Scene | null = null
-  let camera: THREE.OrthographicCamera | null = null
-  let material: THREE.ShaderMaterial | null = null
-  let mesh: THREE.Mesh | null = null
-  let texture: THREE.Texture | null = null
-  let imageAspect = 1
-  let frameRequested = false
-
-  let readSample: ((index: number) => number) | null = null
-  let imageWidth = 0
-  let imageHeight = 0
-  let imageChannels = 4
-
-  const raycaster = new THREE.Raycaster()
-  const pointerNdc = new THREE.Vector2()
-
-  function requestRender() {
-    if (!renderer || frameRequested) return
-    frameRequested = true
-    requestAnimationFrame(() => {
-      frameRequested = false
-      if (renderer && scene && camera) renderer.render(scene, camera)
-    })
-  }
-
-  function containerSize() {
-    const el = containerRef.value
-    return {
-      width: el?.clientWidth || 1,
-      height: el?.clientHeight || 1
-    }
-  }
-
-  function updateProjection() {
-    if (!camera) return
-    const { width, height } = containerSize()
-    const halfH = 0.5
-    const halfW = (0.5 * width) / height
-    camera.left = -halfW
-    camera.right = halfW
-    camera.top = halfH
-    camera.bottom = -halfH
-    camera.updateProjectionMatrix()
-  }
-
-  function fitView() {
-    if (!camera) return
-    const { width, height } = containerSize()
-    const containerAspect = width / height
-    camera.zoom = Math.min(1, containerAspect / imageAspect)
-    camera.position.set(0, 0, 1)
-    camera.updateProjectionMatrix()
-    requestRender()
-  }
-
-  function applyUniforms() {
-    if (!material) return
-    material.uniforms.uGain.value = Math.pow(2, exposureStops.value)
-    material.uniforms.uDither.value = dither.value
-    material.uniforms.uClipWarnings.value = clipWarnings.value
-    material.uniforms.uChannel.value = CHANNEL_INDEX[channel.value]
-    const m = gamutToSrgbMatrix(gamut.value)
-    ;(material.uniforms.uGamutToSRGB.value as THREE.Matrix3).set(
-      m[0],
-      m[1],
-      m[2],
-      m[3],
-      m[4],
-      m[5],
-      m[6],
-      m[7],
-      m[8]
-    )
-    requestRender()
-  }
-
-  function buildScene() {
-    renderer = new THREE.WebGLRenderer({ antialias: false, alpha: false })
-    viewport = new WebGLViewport(renderer)
-    renderer.outputColorSpace = THREE.LinearSRGBColorSpace
-    renderer.setPixelRatio(window.devicePixelRatio)
-    renderer.setClearColor(0x0a0a0a, 1)
-
-    scene = new THREE.Scene()
-    camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10)
-    camera.position.set(0, 0, 1)
-
-    material = new THREE.ShaderMaterial({
-      glslVersion: THREE.GLSL3,
-      vertexShader: HDR_VIEWER_VERTEX_SHADER,
-      fragmentShader: HDR_VIEWER_FRAGMENT_SHADER,
-      uniforms: {
-        uImage: { value: null },
-        uGamutToSRGB: { value: new THREE.Matrix3() },
-        uGain: { value: 1 },
-        uChannel: { value: 0 },
-        uDither: { value: true },
-        uClipWarnings: { value: false },
-        uClipRange: { value: new THREE.Vector2(0, 1) }
-      }
-    })
-
-    mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material)
-    scene.add(mesh)
-  }
-
-  function resize() {
-    if (!renderer) return
-    const { width, height } = containerSize()
-    renderer.setSize(width, height, false)
-    updateProjection()
-    requestRender()
-  }
-
-  function setTexture(loaded: THREE.DataTexture) {
-    if (!material || !mesh) return
-    loaded.colorSpace = THREE.LinearSRGBColorSpace
-    loaded.minFilter = THREE.LinearFilter
-    loaded.magFilter = THREE.LinearFilter
-    loaded.needsUpdate = true
-
-    const { width, height, data } = loaded.image
-    texture = loaded
-    imageAspect = width / height
-    mesh.scale.set(imageAspect, 1, 1)
-    material.uniforms.uImage.value = loaded
-    dimensions.value = `${width} x ${height}`
-
-    if (!data) return
-    imageWidth = width
-    imageHeight = height
-    imageChannels = data.length / (width * height)
-    readSample = makeReader(data, loaded.type)
-    stats.value = computeImageStats(readSample, data.length, imageChannels)
-    histograms.value = computeChannelHistograms(
-      readSample,
-      data.length,
-      imageChannels
-    )
-  }
-
-  async function mount(container: HTMLElement, url: string) {
-    containerRef.value = container
-    loading.value = true
-    error.value = null
-
-    try {
-      buildScene()
-      container.appendChild(renderer!.domElement)
-      renderer!.domElement.classList.add('block', 'size-full')
-      resize()
-      applyUniforms()
-      attachInteractions(renderer!.domElement)
-      viewport!.observeResize(container, resize)
-
-      const { texture: loaded, gamut: detectedGamut } =
-        await loadHdrTexture(url)
-      if (!material || !mesh) {
-        loaded.dispose()
-        return
-      }
-      gamut.value = detectedGamut
-      setTexture(loaded)
-      applyUniforms()
-      fitView()
-    } catch (e) {
-      error.value = e instanceof Error ? e.message : String(e)
-      dispose()
-    } finally {
-      loading.value = false
-    }
-  }
-
-  function normalizeExposure() {
-    const max = stats.value?.max ?? 0
-    exposureStops.value = max > 0 ? -Math.log2(max) : 0
-  }
-
-  function attachInteractions(canvas: HTMLCanvasElement) {
-    canvas.addEventListener('wheel', onWheel, { passive: false })
-    canvas.addEventListener('pointerdown', onPointerDown)
-    canvas.addEventListener('pointermove', onHoverMove)
-    canvas.addEventListener('pointerleave', onHoverLeave)
-  }
-
-  function onWheel(event: WheelEvent) {
-    if (!camera) return
-    event.preventDefault()
-    const factor = Math.exp(-event.deltaY * 0.001)
-    const nextZoom = THREE.MathUtils.clamp(
-      camera.zoom * factor,
-      MIN_ZOOM,
-      MAX_ZOOM
-    )
-    camera.zoom = nextZoom
-    camera.updateProjectionMatrix()
-    requestRender()
-  }
-
-  let dragStart: { x: number; y: number; camX: number; camY: number } | null =
-    null
-
-  function onPointerDown(event: PointerEvent) {
-    if (!camera) return
-    dragStart = {
-      x: event.clientX,
-      y: event.clientY,
-      camX: camera.position.x,
-      camY: camera.position.y
-    }
-    window.addEventListener('pointermove', onPointerMove)
-    window.addEventListener('pointerup', onPointerUp)
-  }
-
-  function onPointerMove(event: PointerEvent) {
-    if (!camera || !dragStart) return
-    const { height } = containerSize()
-    const worldPerPixel = 1 / (height * camera.zoom)
-    camera.position.x =
-      dragStart.camX - (event.clientX - dragStart.x) * worldPerPixel
-    camera.position.y =
-      dragStart.camY + (event.clientY - dragStart.y) * worldPerPixel
-    requestRender()
-  }
-
-  function onPointerUp() {
-    dragStart = null
-    window.removeEventListener('pointermove', onPointerMove)
-    window.removeEventListener('pointerup', onPointerUp)
-  }
-
-  function onHoverMove(event: PointerEvent) {
-    if (!camera || !mesh || !renderer || dragStart || !readSample) return
-    const rect = renderer.domElement.getBoundingClientRect()
-    pointerNdc.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
-    pointerNdc.y = -(((event.clientY - rect.top) / rect.height) * 2 - 1)
-    raycaster.setFromCamera(pointerNdc, camera)
-    const hit = raycaster.intersectObject(mesh)[0]
-    if (!hit?.uv) {
-      pixel.value = null
-      return
-    }
-    const col = THREE.MathUtils.clamp(
-      Math.floor(hit.uv.x * imageWidth),
-      0,
-      imageWidth - 1
-    )
-    const row = THREE.MathUtils.clamp(
-      Math.floor(hit.uv.y * imageHeight),
-      0,
-      imageHeight - 1
-    )
-    const base = (row * imageWidth + col) * imageChannels
-    pixel.value = {
-      x: col,
-      y: imageHeight - 1 - row,
-      r: readSample(base),
-      g: readSample(base + 1),
-      b: readSample(base + 2),
-      a: imageChannels === 4 ? readSample(base + 3) : null
-    }
-  }
-
-  function onHoverLeave() {
-    pixel.value = null
-  }
-
-  function dispose() {
-    window.removeEventListener('pointermove', onPointerMove)
-    window.removeEventListener('pointerup', onPointerUp)
-
-    if (renderer) {
-      renderer.domElement.removeEventListener('wheel', onWheel)
-      renderer.domElement.removeEventListener('pointerdown', onPointerDown)
-      renderer.domElement.removeEventListener('pointermove', onHoverMove)
-      renderer.domElement.removeEventListener('pointerleave', onHoverLeave)
-    }
-    viewport?.disposeRenderer()
-    texture?.dispose()
-    material?.dispose()
-    mesh?.geometry.dispose()
-
-    renderer = null
-    viewport = null
-    scene = null
-    camera = null
-    material = null
-    mesh = null
-    texture = null
-    readSample = null
-  }
-
-  watch([exposureStops, dither, clipWarnings, gamut, channel], applyUniforms)
-
-  onUnmounted(dispose)
-
-  return {
-    exposureStops,
-    dither,
-    clipWarnings,
-    gamut,
-    channel,
-    loading,
-    error,
-    dimensions,
-    stats,
-    histogram,
-    pixel,
-    mount,
-    dispose,
-    fitView,
-    normalizeExposure
-  }
-}

src/composables/useImageCrop.test.ts

@@ -9,8 +9,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import WidgetImageCrop from '@/components/imagecrop/WidgetImageCrop.vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   createMockLGraphNode,
@@ -84,7 +83,7 @@ const ImageCropHarness = defineComponent({
       modelValue,
       imageEl,
       containerEl,
-      ...useImageCrop(toNodeId(props.nodeId), {
+      ...useImageCrop(props.nodeId as NodeId, {
         imageEl,
         containerEl,
         modelValue
@@ -184,7 +183,7 @@ function setupImageLayout(vm: CropVm, nw: number, nh: number) {
 
 const harnessCleanups: Array<() => void> = []
 
-async function mountHarness(nodeId: NodeId = toNodeId(2)) {
+async function mountHarness(nodeId: NodeId = 2 as NodeId) {
   const el = document.createElement('div')
   document.body.appendChild(el)
   const app = createApp(ImageCropHarness, { nodeId: Number(nodeId) })
@@ -658,7 +657,7 @@ describe('WidgetImageCrop', () => {
       container: attach,
       props: {
         widget,
-        nodeId: toNodeId(2),
+        nodeId: 2 as NodeId,
         modelValue: { x: 0, y: 0, width: 100, height: 100 }
       },
       global: {
@@ -690,7 +689,7 @@ describe('WidgetImageCrop', () => {
       container: attach,
       props: {
         widget,
-        nodeId: toNodeId(2),
+        nodeId: 2 as NodeId,
         modelValue: { x: 0, y: 0, width: 200, height: 200 }
       },
       global: {
@@ -734,7 +733,7 @@ describe('WidgetImageCrop', () => {
       container: attach,
       props: {
         widget,
-        nodeId: toNodeId(2),
+        nodeId: 2 as NodeId,
         modelValue: { x: 0, y: 0, width: 200, height: 200 }
       },
       global: {
@@ -780,7 +779,7 @@ describe('WidgetImageCrop', () => {
       container: attach,
       props: {
         widget,
-        nodeId: toNodeId(2),
+        nodeId: 2 as NodeId,
         modelValue: { x: 0, y: 0, width: 100, height: 100 }
       },
       global: {

src/composables/useImageCrop.ts

@@ -2,10 +2,9 @@ import { useResizeObserver } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { Bounds } from '@/renderer/core/layout/types'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import type { NodeId } from '@/types/nodeId'
 import { resolveNode } from '@/utils/litegraphUtil'
 
 export type ResizeDirection =

src/composables/useUpstreamValue.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { nodeId } from '@/types/nodeId'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { WidgetState } from '@/types/widgetState'
 
 import { boundsExtractor, singleValueExtractor } from './useUpstreamValue'
@@ -10,7 +10,7 @@ function widget(name: string, value: unknown): WidgetState {
     name,
     type: 'INPUT',
     value,
-    nodeId: nodeId(1),
+    nodeId: '1' as NodeId,
     options: {},
     y: 0
   }

src/composables/useWorkflowStatusDismissal.ts

@@ -10,15 +10,10 @@ export function useWorkflowStatusDismissal() {
   watch(
     () => {
       const workflow = workflowStore.activeWorkflow
-      return {
-        workflow,
-        status: workflow
-          ? executionStore.getWorkflowStatus(workflow)
-          : undefined
-      }
+      return [workflow, executionStore.getWorkflowStatus(workflow)] as const
     },
-    ({ workflow, status }) => {
-      if (workflow && status && status !== 'running') {
+    ([workflow, status]) => {
+      if (workflow && status !== undefined && status !== 'running') {
         executionStore.clearWorkflowStatus(workflow)
       }
     },

src/core/graph/subgraph/migration/proxyWidgetMigration.ts

@@ -17,7 +17,7 @@ import type {
 } from '@/core/schemas/proxyWidgetQuarantineSchema'
 import { parseProxyWidgetErrorQuarantine } from '@/core/schemas/proxyWidgetQuarantineSchema'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import { nextUniqueName } from '@/lib/litegraph/src/strings'
 import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
 import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
@@ -29,34 +29,32 @@ import type {
 import { isWidgetValue } from '@/lib/litegraph/src/types/widgets'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId, SerializedNodeId } from '@/types/nodeId'
 
 interface LegacyProxyEntrySource extends PromotedWidgetSource {
-  disambiguatingSourceNodeId?: NodeId
+  disambiguatingSourceNodeId?: string
 }
 
 const LEGACY_PROXY_WIDGET_PREFIX_PATTERN = /^\s*(\d+)\s*:\s*(.+)$/
 
 interface StrippedPrefix {
   sourceWidgetName: string
-  deepestPrefixId?: NodeId
+  deepestPrefixId?: string
 }
 
 function stripLegacyPrefixes(sourceWidgetName: string): StrippedPrefix {
   let remaining = sourceWidgetName
-  let deepestPrefixId: NodeId | undefined
+  let deepestPrefixId: string | undefined
   while (true) {
     const match = LEGACY_PROXY_WIDGET_PREFIX_PATTERN.exec(remaining)
     if (!match) return { sourceWidgetName: remaining, deepestPrefixId }
-    deepestPrefixId = toNodeId(match[1])
+    deepestPrefixId = match[1]
     remaining = match[2]
   }
 }
 
 function canResolveLegacyProxy(
   hostNode: SubgraphNode,
-  sourceNodeId: SerializedNodeId,
+  sourceNodeId: string,
   widgetName: string
 ): boolean {
   return (
@@ -67,32 +65,24 @@ function canResolveLegacyProxy(
 
 export function normalizeLegacyProxyWidgetEntry(
   hostNode: SubgraphNode,
-  sourceNodeId: SerializedNodeId,
+  sourceNodeId: string,
   sourceWidgetName: string,
-  disambiguatingSourceNodeId?: SerializedNodeId
+  disambiguatingSourceNodeId?: string
 ): LegacyProxyEntrySource {
-  const normalizedSourceNodeId = toNodeId(sourceNodeId)
-  const normalizedDisambiguatingSourceNodeId =
-    disambiguatingSourceNodeId === undefined
-      ? undefined
-      : toNodeId(disambiguatingSourceNodeId)
-
   if (canResolveLegacyProxy(hostNode, sourceNodeId, sourceWidgetName)) {
     return {
-      sourceNodeId: normalizedSourceNodeId,
+      sourceNodeId,
       sourceWidgetName,
-      ...(normalizedDisambiguatingSourceNodeId && {
-        disambiguatingSourceNodeId: normalizedDisambiguatingSourceNodeId
-      })
+      ...(disambiguatingSourceNodeId && { disambiguatingSourceNodeId })
     }
   }
 
   const stripped = stripLegacyPrefixes(sourceWidgetName)
   const patchDisambiguatingSourceNodeId =
-    stripped.deepestPrefixId ?? normalizedDisambiguatingSourceNodeId
+    stripped.deepestPrefixId ?? disambiguatingSourceNodeId
 
   return {
-    sourceNodeId: normalizedSourceNodeId,
+    sourceNodeId,
     sourceWidgetName: stripped.sourceWidgetName,
     ...(patchDisambiguatingSourceNodeId && {
       disambiguatingSourceNodeId: patchDisambiguatingSourceNodeId
@@ -272,7 +262,7 @@ function collectTargetsStrict(
     const link = subgraph.links.get(linkId)
     if (!link) return undefined
     targets.push({
-      targetNodeId: toNodeId(link.target_id),
+      targetNodeId: link.target_id,
       targetSlot: link.target_slot
     })
   }
@@ -288,19 +278,14 @@ function collectTargetsSkippingDangling(
   return linkIds.flatMap((linkId) => {
     const link = subgraph.links.get(linkId)
     return link
-      ? [
-          {
-            targetNodeId: toNodeId(link.target_id),
-            targetSlot: link.target_slot
-          }
-        ]
+      ? [{ targetNodeId: link.target_id, targetSlot: link.target_slot }]
       : []
   })
 }
 
 function cohortDuplicatesPrimitive(
   cohort: readonly LegacyProxyEntrySource[],
-  primitiveNodeId: NodeId
+  primitiveNodeId: string
 ): boolean {
   return (
     cohort.filter((entry) => entry.sourceNodeId === primitiveNodeId).length >= 2
@@ -345,7 +330,7 @@ function classify(
     if (targets.length >= 1 || cohortDuplicated) {
       return {
         kind: 'primitiveBypass',
-        primitiveNodeId: toNodeId(sourceNode.id),
+        primitiveNodeId: sourceNode.id,
         sourceWidgetName: normalized.sourceWidgetName,
         targets
       }
@@ -618,7 +603,7 @@ function repairPrimitive(
     .filter((l): l is NonNullable<typeof l> => l !== undefined)
     .map((l) => ({
       primitiveSlot: l.origin_slot,
-      targetNodeId: toNodeId(l.target_id),
+      targetNodeId: l.target_id,
       targetSlot: l.target_slot
     }))
 

src/core/graph/subgraph/preview/previewExposureChain.ts

@@ -1,6 +1,4 @@
 import type { PreviewExposure } from '@/core/schemas/previewExposureSchema'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 import type { UUID } from '@/utils/uuid'
 
 interface ResolvedPreviewChainStep {
@@ -13,7 +11,7 @@ export interface ResolvedPreviewChain {
   steps: readonly ResolvedPreviewChainStep[]
   leaf: {
     rootGraphId: UUID
-    sourceNodeId: NodeId
+    sourceNodeId: string
     sourcePreviewName: string
   }
 }
@@ -26,16 +24,12 @@ export interface PreviewExposureChainContext {
   resolveNestedHost(
     rootGraphId: UUID,
     hostNodeLocator: string,
-    sourceNodeId: NodeId
+    sourceNodeId: string
   ): { rootGraphId: UUID; hostNodeLocator: string } | undefined
 }
 
 const MAX_CHAIN_DEPTH = 32
 
-function exposureSourceNodeId(exposure: PreviewExposure): NodeId {
-  return toNodeId(exposure.sourceNodeId)
-}
-
 export function resolvePreviewExposureChain(
   rootGraphId: UUID,
   hostNodeLocator: string,
@@ -56,7 +50,7 @@ export function resolvePreviewExposureChain(
       steps,
       leaf: {
         rootGraphId: lastStep.rootGraphId,
-        sourceNodeId: exposureSourceNodeId(lastStep.exposure),
+        sourceNodeId: lastStep.exposure.sourceNodeId,
         sourcePreviewName: lastStep.exposure.sourcePreviewName
       }
     }
@@ -86,14 +80,14 @@ export function resolvePreviewExposureChain(
     const nested = ctx.resolveNestedHost(
       currentRootGraphId,
       currentHost,
-      exposureSourceNodeId(exposure)
+      exposure.sourceNodeId
     )
     if (!nested) {
       return {
         steps,
         leaf: {
           rootGraphId: currentRootGraphId,
-          sourceNodeId: exposureSourceNodeId(exposure),
+          sourceNodeId: exposure.sourceNodeId,
           sourcePreviewName: exposure.sourcePreviewName
         }
       }

src/core/graph/subgraph/promotedInputWidget.ts

@@ -3,7 +3,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { isWidgetValue } from '@/lib/litegraph/src/types/widgets'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import type { NodeId } from '@/types/nodeId'
 
 import { resolveSubgraphInputTarget } from './resolveSubgraphInputTarget'
 
@@ -14,7 +13,7 @@ import { resolveSubgraphInputTarget } from './resolveSubgraphInputTarget'
  * on the projected widget.
  */
 export interface PromotedSource {
-  nodeId: NodeId
+  nodeId: string
   widgetName: string
 }
 
@@ -110,6 +109,7 @@ export function promotedInputWidget(input: INodeInputSlot): IBaseWidget | null {
   }
 }
 
+/** Every promoted subgraph input on a node, projected to ordinary widgets. */
 export function promotedInputWidgets(node: LGraphNode): IBaseWidget[] {
   return node.inputs.flatMap((input) => {
     const widget = promotedInputWidget(input)

src/core/graph/subgraph/promotedWidgetTypes.ts

@@ -1,6 +1,5 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import type { NodeId } from '@/types/nodeId'
 
 export interface ResolvedPromotedWidget {
   node: LGraphNode
@@ -13,6 +12,6 @@ export interface ResolvedPromotedWidget {
  * the source is a stored tuple rather than something link-derivable.
  */
 export interface PromotedWidgetSource {
-  sourceNodeId: NodeId
+  sourceNodeId: string
   sourceWidgetName: string
 }

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

@@ -522,22 +522,6 @@ describe('hasUnpromotedWidgets', () => {
 
     expect(hasUnpromotedWidgets(subgraphNode)).toBe(false)
   })
-
-  it('returns false (does not throw) when SubgraphNode is detached', () => {
-    const subgraph = createTestSubgraph()
-    const subgraphNode = createTestSubgraphNode(subgraph)
-    const parentGraph = subgraphNode.graph!
-    parentGraph.add(subgraphNode)
-    const interiorNode = new LGraphNode('InnerNode')
-    subgraph.add(interiorNode)
-    interiorNode.addWidget('text', 'seed', '123', () => {})
-
-    parentGraph.remove(subgraphNode)
-
-    expect(subgraphNode.graph).toBeNull()
-    expect(() => hasUnpromotedWidgets(subgraphNode)).not.toThrow()
-    expect(hasUnpromotedWidgets(subgraphNode)).toBe(false)
-  })
 })
 
 describe('isLinkedPromotion', () => {

src/core/graph/subgraph/promotionUtils.ts

@@ -18,8 +18,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { SerializedNodeId } from '@/types/nodeId'
 import type { WidgetId } from '@/types/widgetId'
 import { widgetId } from '@/types/widgetId'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
@@ -35,7 +33,7 @@ export function getWidgetName(w: IBaseWidget): string {
 
 export function isLinkedPromotion(
   subgraphNode: SubgraphNode,
-  sourceNodeId: SerializedNodeId,
+  sourceNodeId: string,
   sourceWidgetName: string
 ): boolean {
   return (
@@ -46,10 +44,9 @@ export function isLinkedPromotion(
 
 export function findHostInputForPromotion(
   subgraphNode: SubgraphNode,
-  rawSourceNodeId: SerializedNodeId,
+  sourceNodeId: string,
   sourceWidgetName: string
 ) {
-  const sourceNodeId = toNodeId(rawSourceNodeId)
   return subgraphNode.inputs.find((input) => {
     const source = input._subgraphSlot
       ? resolvePromotionSource(subgraphNode, input._subgraphSlot)
@@ -77,7 +74,7 @@ function resolvePromotionSource(
 
     if (inputNode.isSubgraphNode()) {
       return {
-        sourceNodeId: toNodeId(inputNode.id),
+        sourceNodeId: String(inputNode.id),
         sourceWidgetName: targetInput.name
       }
     }
@@ -86,7 +83,7 @@ function resolvePromotionSource(
     if (!targetWidget) continue
 
     return {
-      sourceNodeId: toNodeId(inputNode.id),
+      sourceNodeId: String(inputNode.id),
       sourceWidgetName: targetWidget.name
     }
   }
@@ -215,7 +212,7 @@ function toPromotionSource(
   widget: IBaseWidget
 ): PromotedWidgetSource {
   return {
-    sourceNodeId: toNodeId(node.id),
+    sourceNodeId: String(node.id),
     sourceWidgetName: getWidgetName(widget)
   }
 }
@@ -238,7 +235,9 @@ export function promoteValueWidgetViaSubgraphInput(
   sourceWidget: IBaseWidget
 ): CanonicalPromotionResult {
   const sourceWidgetName = getWidgetName(sourceWidget)
-  if (isLinkedPromotion(subgraphNode, sourceNode.id, sourceWidgetName)) {
+  if (
+    isLinkedPromotion(subgraphNode, String(sourceNode.id), sourceWidgetName)
+  ) {
     return { ok: true }
   }
 
@@ -316,7 +315,7 @@ function promotePreviewViaExposure(
   if (existing) return
 
   store.addExposure(rootGraphId, hostLocator, {
-    sourceNodeId: sourceNode.id,
+    sourceNodeId: String(sourceNode.id),
     sourcePreviewName
   })
 }
@@ -604,7 +603,7 @@ export function pruneDisconnected(subgraphNode: SubgraphNode) {
     if (!hostInput?.widgetId && !hostInput?._widget) return false
 
     removedEntries.push({
-      sourceNodeId: toNodeId(subgraphNode.id),
+      sourceNodeId: String(subgraphNode.id),
       sourceWidgetName: input.name
     })
     return true
@@ -634,7 +633,6 @@ export function pruneDisconnected(subgraphNode: SubgraphNode) {
 }
 
 export function hasUnpromotedWidgets(subgraphNode: SubgraphNode): boolean {
-  if (subgraphNode.isDetached) return false
   const { subgraph } = subgraphNode
 
   return subgraph.nodes.some((interiorNode) =>
@@ -644,7 +642,7 @@ export function hasUnpromotedWidgets(subgraphNode: SubgraphNode): boolean {
         !isWidgetPromotedOnSubgraphNode(
           subgraphNode,
           {
-            sourceNodeId: toNodeId(interiorNode.id),
+            sourceNodeId: String(interiorNode.id),
             sourceWidgetName: widget.name
           },
           widget

src/core/graph/subgraph/resolveConcretePromotedWidget.ts

@@ -2,8 +2,6 @@ import type { ResolvedPromotedWidget } from '@/core/graph/subgraph/promotedWidge
 import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId, SerializedNodeId } from '@/types/nodeId'
 
 type PromotedWidgetResolutionFailure =
   | 'invalid-host'
@@ -20,7 +18,7 @@ const MAX_PROMOTED_WIDGET_CHAIN_DEPTH = 100
 
 function traversePromotedWidgetChain(
   hostNode: SubgraphNode,
-  nodeId: NodeId,
+  nodeId: string,
   widgetName: string
 ): PromotedWidgetResolutionResult {
   const visitedByHost = new WeakMap<SubgraphNode, Set<string>>()
@@ -71,12 +69,11 @@ function traversePromotedWidgetChain(
 
 export function resolveConcretePromotedWidget(
   hostNode: LGraphNode,
-  rawNodeId: SerializedNodeId,
+  nodeId: string,
   widgetName: string
 ): PromotedWidgetResolutionResult {
   if (!hostNode.isSubgraphNode()) {
     return { status: 'failure', failure: 'invalid-host' }
   }
-  const nodeId = toNodeId(rawNodeId)
   return traversePromotedWidgetChain(hostNode, nodeId, widgetName)
 }

src/core/graph/subgraph/resolveSubgraphInputTarget.ts

@@ -1,11 +1,9 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
 
 import { resolveSubgraphInputLink } from './resolveSubgraphInputLink'
 
 type ResolvedSubgraphInputTarget = {
-  nodeId: NodeId
+  nodeId: string
   widgetName: string
 }
 
@@ -19,7 +17,7 @@ export function resolveSubgraphInputTarget(
     ({ inputNode, targetInput, getTargetWidget }) => {
       if (inputNode.isSubgraphNode()) {
         return {
-          nodeId: toNodeId(inputNode.id),
+          nodeId: String(inputNode.id),
           widgetName: targetInput.name
         }
       }
@@ -28,7 +26,7 @@ export function resolveSubgraphInputTarget(
       if (!targetWidget) return undefined
 
       return {
-        nodeId: toNodeId(inputNode.id),
+        nodeId: String(inputNode.id),
         widgetName: targetWidget.name
       }
     }

src/extensions/core/createBoundingBoxes.test.ts

@@ -1,89 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-const { state } = vi.hoisted(() => ({
-  state: {
-    extension: null as { nodeCreated: (node: unknown) => void } | null,
-    widgetState: undefined as { options: Record<string, unknown> } | undefined
-  }
-}))
-
-vi.mock('@/services/extensionService', () => ({
-  useExtensionService: () => ({
-    registerExtension: (ext: { nodeCreated: (node: unknown) => void }) => {
-      state.extension = ext
-    }
-  })
-}))
-
-vi.mock('@/stores/widgetValueStore', () => ({
-  useWidgetValueStore: () => ({ getWidget: () => state.widgetState })
-}))
-
-await import('./createBoundingBoxes')
-
-interface MockWidget {
-  name: string
-  hidden: boolean
-  options: Record<string, unknown>
-  widgetId?: string
-}
-
-function makeNode(connected: boolean, comfyClass = 'CreateBoundingBoxes') {
-  const widgets: MockWidget[] = [
-    { name: 'width', hidden: false, options: {} },
-    { name: 'height', hidden: false, options: {} },
-    { name: 'other', hidden: false, options: {} }
-  ]
-  return {
-    constructor: { comfyClass },
-    size: [100, 100] as [number, number],
-    setSize: vi.fn(),
-    findInputSlot: () => 0,
-    isInputConnected: () => connected,
-    widgets,
-    onConnectionsChange: undefined as unknown
-  }
-}
-
-beforeEach(() => {
-  state.widgetState = undefined
-})
-
-describe('Comfy.CreateBoundingBoxes extension', () => {
-  it('ignores nodes of other classes', () => {
-    const node = makeNode(true, 'SomethingElse')
-    state.extension!.nodeCreated(node)
-    expect(node.setSize).not.toHaveBeenCalled()
-  })
-
-  it('enlarges the node and hides width/height when a background is connected', () => {
-    const node = makeNode(true)
-    state.extension!.nodeCreated(node)
-    expect(node.setSize).toHaveBeenCalledWith([420, 560])
-    expect(node.widgets[0].hidden).toBe(true)
-    expect(node.widgets[1].hidden).toBe(true)
-    expect(node.widgets[0].options.hidden).toBe(true)
-    expect(node.widgets[2].hidden).toBe(false)
-  })
-
-  it('shows width/height when no background is connected', () => {
-    const node = makeNode(false)
-    state.extension!.nodeCreated(node)
-    expect(node.widgets[0].hidden).toBe(false)
-    expect(node.widgets[0].options.hidden).toBe(false)
-  })
-
-  it('writes visibility through the widget value store when present', () => {
-    state.widgetState = { options: {} }
-    const node = makeNode(true)
-    node.widgets[0].widgetId = 'w-0'
-    state.extension!.nodeCreated(node)
-    expect(state.widgetState.options.hidden).toBe(true)
-  })
-
-  it('chains a connections-change handler that re-syncs visibility', () => {
-    const node = makeNode(false)
-    state.extension!.nodeCreated(node)
-    expect(typeof node.onConnectionsChange).toBe('function')
-  })
-})

src/extensions/core/createBoundingBoxes.ts

@@ -1,38 +0,0 @@
-import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useExtensionService } from '@/services/extensionService'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-
-const DIMENSION_WIDGETS = new Set(['width', 'height'])
-
-useExtensionService().registerExtension({
-  name: 'Comfy.CreateBoundingBoxes',
-
-  nodeCreated(node) {
-    if (node.constructor.comfyClass !== 'CreateBoundingBoxes') return
-
-    const [oldWidth, oldHeight] = node.size
-    node.setSize([Math.max(oldWidth, 420), Math.max(oldHeight, 560)])
-
-    const widgetValueStore = useWidgetValueStore()
-
-    const syncDimensionVisibility = () => {
-      const slot = node.findInputSlot('background')
-      const hidden = slot >= 0 && node.isInputConnected(slot)
-      for (const widget of node.widgets ?? []) {
-        if (!DIMENSION_WIDGETS.has(widget.name)) continue
-        widget.hidden = hidden
-        const state = widget.widgetId
-          ? widgetValueStore.getWidget(widget.widgetId)
-          : undefined
-        if (state?.options) state.options.hidden = hidden
-        else widget.options.hidden = hidden
-      }
-    }
-
-    syncDimensionVisibility()
-    node.onConnectionsChange = useChainCallback(
-      node.onConnectionsChange,
-      syncDimensionVisibility
-    )
-  }
-})

src/extensions/core/index.ts

@@ -2,7 +2,6 @@ import { isCloud, isNightly } from '@/platform/distribution/types'
 
 import './clipspace'
 import './contextMenuFilter'
-import './createBoundingBoxes'
 import './customWidgets'
 import './dynamicPrompts'
 import './editAttention'

src/extensions/core/load3d/Viewport3d.ts

@@ -1,7 +1,5 @@
 import * as THREE from 'three'
 
-import { WebGLViewport } from '@/renderer/three/WebGLViewport'
-
 import type { CameraManager } from './CameraManager'
 import type { ControlsManager } from './ControlsManager'
 import type { EventManager } from './EventManager'
@@ -29,7 +27,8 @@ export type Viewport3dDeps = {
   viewHelperManager: ViewHelperManager
 }
 
-export class Viewport3d extends WebGLViewport {
+export class Viewport3d {
+  renderer: THREE.WebGLRenderer
   protected clock: THREE.Clock
   private renderLoop: RenderLoopHandle | null = null
   private onContextMenuCallback?: (event: MouseEvent) => void
@@ -53,6 +52,7 @@ export class Viewport3d extends WebGLViewport {
   isViewerMode: boolean = false
 
   private disposeContextMenuGuard: (() => void) | null = null
+  private resizeObserver: ResizeObserver | null = null
   private getZoomScaleCallback: (() => number) | undefined
   private externalActiveCamera: THREE.Camera | null = null
   private overlay: SceneOverlay | null = null
@@ -63,7 +63,6 @@ export class Viewport3d extends WebGLViewport {
     deps: Viewport3dDeps,
     options: Load3DOptions = {}
   ) {
-    super(deps.renderer)
     this.clock = new THREE.Clock()
     this.isViewerMode = options.isViewerMode || false
     this.onContextMenuCallback = options.onContextMenu
@@ -74,6 +73,7 @@ export class Viewport3d extends WebGLViewport {
       this.applyTargetSize(options.width, options.height)
     }
 
+    this.renderer = deps.renderer
     this.eventManager = deps.eventManager
     this.sceneManager = deps.sceneManager
     this.cameraManager = deps.cameraManager
@@ -94,7 +94,7 @@ export class Viewport3d extends WebGLViewport {
     this.STATUS_MOUSE_ON_VIEWER = false
 
     this.initContextMenu()
-    this.observeResize(container, () => this.handleResize())
+    this.initResizeObserver(container)
   }
 
   start(): void {
@@ -118,6 +118,16 @@ export class Viewport3d extends WebGLViewport {
     this.targetAspectRatio = width / height
   }
 
+  private initResizeObserver(container: Element | HTMLElement): void {
+    if (typeof ResizeObserver === 'undefined') return
+
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize()
+    })
+    this.resizeObserver.observe(container)
+  }
+
   private initContextMenu(): void {
     this.disposeContextMenuGuard = attachContextMenuGuard(
       this.renderer.domElement,
@@ -390,15 +400,29 @@ export class Viewport3d extends WebGLViewport {
       this.initialRenderTimer = null
     }
 
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+
     this.disposeContextMenuGuard?.()
     this.disposeContextMenuGuard = null
 
+    this.renderer.forceContextLoss()
+    const canvas = this.renderer.domElement
+    const event = new Event('webglcontextlost', {
+      bubbles: true,
+      cancelable: true
+    })
+    canvas.dispatchEvent(event)
+
     this.renderLoop?.stop()
     this.renderLoop = null
 
     this.disposeManagers()
 
-    this.disposeRenderer()
+    this.renderer.dispose()
+    this.renderer.domElement.remove()
   }
 
   protected disposeManagers(): void {

src/extensions/core/widgetInputs.ts

@@ -7,6 +7,7 @@ import type {
   LLink
 } from '@/lib/litegraph/src/litegraph'
 import { NodeSlot } from '@/lib/litegraph/src/node/NodeSlot'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type {
   IBaseWidget,
   TWidgetValue
@@ -272,7 +273,17 @@ export class PrimitiveNode extends LGraphNode {
       widgetName: 'value',
       nodeTypeForBrowser: targetNode.comfyClass ?? '',
       inputNameForBrowser: targetInputName,
-      defaultValue
+      defaultValue,
+      onValueChange: (widget, newValue, oldValue) => {
+        widget.callback?.(
+          widget.value,
+          app.canvas,
+          this,
+          app.canvas.graph_mouse,
+          {} as CanvasPointerEvent
+        )
+        this.onWidgetChanged?.(widget.name, newValue, oldValue, widget)
+      }
     })
   }
 

src/lib/litegraph/src/LGraph.test.ts

@@ -2,10 +2,9 @@ import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { NodeId, Subgraph } from '@/lib/litegraph/src/litegraph'
 import {
   LGraph,
-  LGraphGroup,
   LGraphNode,
   LiteGraph,
   LLink,
@@ -298,7 +297,7 @@ describe('Graph Clearing and Callbacks', () => {
     })
 
     const widgetValueStore = useWidgetValueStore()
-    const seedWidgetId = widgetId(graphId, '10', 'seed')
+    const seedWidgetId = widgetId(graphId, '10' as NodeId, 'seed')
     widgetValueStore.registerWidget(seedWidgetId, {
       type: 'number',
       value: 1,
@@ -324,96 +323,6 @@ describe('Graph Clearing and Callbacks', () => {
   })
 })
 
-describe('node:before-removed event', () => {
-  it('fires node:before-removed for a successful node removal', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-
-    const events: { node: LGraphNode; graphAtDispatch: unknown }[] = []
-    graph.events.addEventListener('node:before-removed', (e) => {
-      events.push({
-        node: e.detail.node,
-        graphAtDispatch: e.detail.node.graph
-      })
-    })
-
-    graph.remove(node)
-
-    expect(events).toHaveLength(1)
-    expect(events[0].node).toBe(node)
-    expect(events[0].graphAtDispatch).toBe(graph)
-    expect(node.graph).toBeNull()
-  })
-
-  it('does not fire node:before-removed for a node not in the graph', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-
-    const fired = vi.fn()
-    graph.events.addEventListener('node:before-removed', fired)
-
-    graph.remove(node)
-
-    expect(fired).not.toHaveBeenCalled()
-  })
-
-  it('does not fire node:before-removed when removing an LGraphGroup', () => {
-    const graph = new LGraph()
-    const group = new LGraphGroup('test-group')
-    graph.add(group)
-
-    const fired = vi.fn()
-    graph.events.addEventListener('node:before-removed', fired)
-
-    graph.remove(group)
-
-    expect(fired).not.toHaveBeenCalled()
-  })
-
-  it('does not fire node:before-removed when ignore_remove is set', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-    node.ignore_remove = true
-
-    const fired = vi.fn()
-    graph.events.addEventListener('node:before-removed', fired)
-
-    graph.remove(node)
-
-    expect(fired).not.toHaveBeenCalled()
-    expect(graph.nodes).toContain(node)
-  })
-
-  it('fires node:before-removed before node.onRemoved and detach', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-
-    const order: string[] = []
-    graph.events.addEventListener('node:before-removed', () => {
-      order.push(
-        `before-removed(graph=${node.graph === graph ? 'set' : 'null'})`
-      )
-    })
-    node.onRemoved = () => {
-      order.push(`onRemoved(graph=${node.graph === graph ? 'set' : 'null'})`)
-    }
-    graph.onNodeRemoved = (n) => {
-      order.push(`onNodeRemoved(graph=${n.graph === null ? 'null' : 'set'})`)
-    }
-
-    graph.remove(node)
-
-    expect(order).toEqual([
-      'before-removed(graph=set)',
-      'onRemoved(graph=set)',
-      'onNodeRemoved(graph=null)'
-    ])
-  })
-})
-
 describe('Subgraph Definition Garbage Collection', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
@@ -466,53 +375,6 @@ describe('Subgraph Definition Garbage Collection', () => {
     expect(graphRemovedNodeIds.size).toBe(2)
   })
 
-  it('subgraph-definition GC dispatches node:before-removed on the inner subgraph for each inner node', () => {
-    const rootGraph = new LGraph()
-    const { subgraph, innerNodes } = createSubgraphWithNodes(rootGraph, 2)
-
-    const dispatched: { node: LGraphNode; graphAtDispatch: unknown }[] = []
-    subgraph.events.addEventListener('node:before-removed', (e) => {
-      dispatched.push({
-        node: e.detail.node,
-        graphAtDispatch: e.detail.node.graph
-      })
-    })
-
-    const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
-    rootGraph.add(subgraphNode)
-
-    rootGraph.remove(subgraphNode)
-
-    expect(dispatched.map((e) => e.node)).toEqual(innerNodes)
-    for (const entry of dispatched) {
-      expect(entry.graphAtDispatch).toBe(subgraph)
-    }
-  })
-
-  it('subgraph-definition GC dispatches node:before-removed before each inner node onRemoved', () => {
-    const rootGraph = new LGraph()
-    const { subgraph, innerNodes } = createSubgraphWithNodes(rootGraph, 1)
-    const innerNode = innerNodes[0]
-
-    const order: string[] = []
-    subgraph.events.addEventListener('node:before-removed', () => {
-      order.push('before-removed')
-    })
-    innerNode.onRemoved = () => {
-      order.push('onRemoved')
-    }
-    subgraph.onNodeRemoved = () => {
-      order.push('onNodeRemoved')
-    }
-
-    const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
-    rootGraph.add(subgraphNode)
-
-    rootGraph.remove(subgraphNode)
-
-    expect(order).toEqual(['before-removed', 'onRemoved', 'onNodeRemoved'])
-  })
-
   it('subgraph definition is removed when SubgraphNode is removed', () => {
     const rootGraph = new LGraph()
     const { subgraph } = createSubgraphWithNodes(rootGraph, 1)
@@ -1053,7 +915,7 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => {
     const idsB = nodeIdSet(graph, SUBGRAPH_B)
 
     for (const id of SHARED_NODE_IDS) {
-      expect(idsA.has(id)).toBe(true)
+      expect(idsA.has(id as NodeId)).toBe(true)
     }
     for (const id of idsA) {
       expect(idsB.has(id)).toBe(false)
@@ -1089,14 +951,14 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => {
       graph.subgraphs.get(SUBGRAPH_B)!.nodes.map((n) => String(n.id))
     )
 
-    const pw102 = graph.getNodeById(102)?.properties?.proxyWidgets
+    const pw102 = graph.getNodeById(102 as NodeId)?.properties?.proxyWidgets
     expect(Array.isArray(pw102)).toBe(true)
     for (const entry of pw102 as unknown[][]) {
       expect(Array.isArray(entry)).toBe(true)
       expect(idsA.has(String(entry[0]))).toBe(true)
     }
 
-    const pw103 = graph.getNodeById(103)?.properties?.proxyWidgets
+    const pw103 = graph.getNodeById(103 as NodeId)?.properties?.proxyWidgets
     expect(Array.isArray(pw103)).toBe(true)
     for (const entry of pw103 as unknown[][]) {
       expect(Array.isArray(entry)).toBe(true)
@@ -1114,7 +976,7 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => {
 
     const innerNode = graph.subgraphs
       .get(SUBGRAPH_A)!
-      .nodes.find((n) => n.id === 50)
+      .nodes.find((n) => n.id === (50 as NodeId))
     const pw = innerNode?.properties?.proxyWidgets
     expect(Array.isArray(pw)).toBe(true)
     for (const entry of pw as unknown[][]) {

src/lib/litegraph/src/LGraph.ts

@@ -25,7 +25,7 @@ import { LGraphCanvas } from './LGraphCanvas'
 import { LGraphGroup } from './LGraphGroup'
 import type { GroupId } from './LGraphGroup'
 import { LGraphNode } from './LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { NodeId } from './LGraphNode'
 import { LLink } from './LLink'
 import type { LinkId } from './LLink'
 import { MapProxyHandler } from './MapProxyHandler'
@@ -155,13 +155,6 @@ export interface BaseLGraph {
   readonly rootGraph: LGraph
 }
 
-function fireNodeRemovalLifecycle(node: LGraphNode): void {
-  const graph: LGraph | null = node.graph
-  graph?.events.dispatch('node:before-removed', { node })
-  node.onRemoved?.()
-  graph?.onNodeRemoved?.(node)
-}
-
 /**
  * LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.
  * supported callbacks:
@@ -244,7 +237,7 @@ export class LGraph
   readonly _subgraphs: Map<SubgraphId, Subgraph> = new Map()
 
   _nodes: (LGraphNode | SubgraphNode)[] = []
-  _nodes_by_id: Record<SerializedNodeId, LGraphNode> = {}
+  _nodes_by_id: Record<NodeId, LGraphNode> = {}
   _nodes_in_order: LGraphNode[] = []
   _nodes_executable: LGraphNode[] | null = null
   _groups: LGraphGroup[] = []
@@ -393,7 +386,8 @@ export class LGraph
     // safe clear
     if (this._nodes) {
       for (const _node of this._nodes) {
-        fireNodeRemovalLifecycle(_node)
+        _node.onRemoved?.()
+        this.onNodeRemoved?.(_node)
       }
     }
 
@@ -638,8 +632,8 @@ export class LGraph
     const S: LGraphNode[] = []
     const M: Dictionary<LGraphNode> = {}
     // to avoid repeating links
-    const visited_links: Record<SerializedNodeId, boolean> = {}
-    const remaining_links: Record<SerializedNodeId, number> = {}
+    const visited_links: Record<NodeId, boolean> = {}
+    const remaining_links: Record<NodeId, number> = {}
 
     // search for the nodes without inputs (starting nodes)
     for (const node of this._nodes) {
@@ -1052,8 +1046,6 @@ export class LGraph
     // sure? - almost sure is wrong
     this.beforeChange()
 
-    this.events.dispatch('node:before-removed', { node })
-
     const { inputs, outputs } = node
 
     // disconnect inputs
@@ -1089,7 +1081,10 @@ export class LGraph
       )
 
       if (!hasRemainingReferences) {
-        forEachNode(node.subgraph, fireNodeRemovalLifecycle)
+        forEachNode(node.subgraph, (innerNode) => {
+          innerNode.onRemoved?.()
+          innerNode.graph?.onNodeRemoved?.(innerNode)
+        })
         this.rootGraph.subgraphs.delete(node.subgraph.id)
       }
     }
@@ -1133,7 +1128,7 @@ export class LGraph
   /**
    * Returns a node by its id.
    */
-  getNodeById(id: SerializedNodeId | null | undefined): LGraphNode | null {
+  getNodeById(id: NodeId | null | undefined): LGraphNode | null {
     return id != null ? this._nodes_by_id[id] : null
   }
 
@@ -1948,7 +1943,7 @@ export class LGraph
     const offsetX = subgraphNode.pos[0] - center[0] + subgraphNode.size[0] / 2
     const offsetY = subgraphNode.pos[1] - center[1] + subgraphNode.size[1] / 2
     const movedNodes = multiClone(subgraphNode.subgraph.nodes)
-    const nodeIdMap = new Map<SerializedNodeId, SerializedNodeId>()
+    const nodeIdMap = new Map<NodeId, NodeId>()
     for (const n_info of movedNodes) {
       let node = LiteGraph.createNode(String(n_info.type), n_info.title)
       if (!node) {
@@ -2023,9 +2018,9 @@ export class LGraph
       }
     }
     const newLinks: {
-      oid: SerializedNodeId
+      oid: NodeId
       oslot: number
-      tid: SerializedNodeId
+      tid: NodeId
       tslot: number
       id: LinkId
       iparent?: RerouteId
@@ -2239,7 +2234,7 @@ export class LGraph
    * @param nodeIds An ordered list of node IDs, from the root graph to the most nested subgraph node
    * @returns An ordered list of nested subgraph nodes.
    */
-  resolveSubgraphIdPath(nodeIds: readonly SerializedNodeId[]): SubgraphNode[] {
+  resolveSubgraphIdPath(nodeIds: readonly NodeId[]): SubgraphNode[] {
     const result: SubgraphNode[] = []
     let currentGraph: GraphOrSubgraph = this.rootGraph
 
@@ -2538,7 +2533,7 @@ export class LGraph
       }
 
       let error = false
-      const nodeDataMap = new Map<SerializedNodeId, ISerialisedNode>()
+      const nodeDataMap = new Map<NodeId, ISerialisedNode>()
 
       // create nodes
       this._nodes = []
@@ -2678,7 +2673,7 @@ export class LGraph
 
     const usedNodeIds = new Set<number>(reservedNodeIds)
     for (const graph of allGraphs) {
-      const remappedIds = new Map<SerializedNodeId, SerializedNodeId>()
+      const remappedIds = new Map<NodeId, NodeId>()
 
       for (const node of graph._nodes) {
         if (typeof node.id !== 'number') continue
@@ -3106,7 +3101,7 @@ export class Subgraph
 
 function patchLinkNodeIds(
   links: Map<LinkId, LLink>,
-  remappedIds: Map<SerializedNodeId, SerializedNodeId>
+  remappedIds: Map<NodeId, NodeId>
 ): void {
   for (const link of links.values()) {
     const newOrigin = remappedIds.get(link.origin_id)

src/lib/litegraph/src/LGraphCanvas.cloneZIndex.test.ts

@@ -1,8 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { NodeId } from '@/types/nodeId'
-
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { NodeLayout } from '@/renderer/core/layout/types'
@@ -77,7 +74,7 @@ function createCanvas(graph: LGraph): LGraphCanvas {
 }
 
 function createLayoutEntry(node: LGraphNode, zIndex: number) {
-  const nodeId = toNodeId(node.id)
+  const nodeId = String(node.id)
   const layout: NodeLayout = {
     id: nodeId,
     position: { x: node.pos[0], y: node.pos[1] },
@@ -102,7 +99,7 @@ function createLayoutEntry(node: LGraphNode, zIndex: number) {
   })
 }
 
-function setZIndex(nodeId: NodeId, zIndex: number, previousZIndex: number) {
+function setZIndex(nodeId: string, zIndex: number, previousZIndex: number) {
   layoutStore.applyOperation({
     type: 'setNodeZIndex',
     entity: 'node',
@@ -148,7 +145,7 @@ describe('cloned node z-index in Vue renderer', () => {
     originalNode.size = [200, 100]
     graph.add(originalNode)
 
-    const originalNodeId = toNodeId(originalNode.id)
+    const originalNodeId = String(originalNode.id)
 
     setZIndex(originalNodeId, 5, 0)
 
@@ -161,7 +158,7 @@ describe('cloned node z-index in Vue renderer', () => {
     expect(result!.created.length).toBe(1)
 
     const clonedNode = result!.created[0] as LGraphNode
-    const clonedNodeId = toNodeId(clonedNode.id)
+    const clonedNodeId = String(clonedNode.id)
 
     // The cloned node should have a z-index higher than the original
     const clonedLayout = layoutStore.getNodeLayoutRef(clonedNodeId).value
@@ -174,13 +171,13 @@ describe('cloned node z-index in Vue renderer', () => {
     nodeA.pos = [100, 100]
     nodeA.size = [200, 100]
     graph.add(nodeA)
-    setZIndex(toNodeId(nodeA.id), 3, 0)
+    setZIndex(String(nodeA.id), 3, 0)
 
     const nodeB = new TestNode()
     nodeB.pos = [400, 100]
     nodeB.size = [200, 100]
     graph.add(nodeB)
-    setZIndex(toNodeId(nodeB.id), 7, 0)
+    setZIndex(String(nodeB.id), 7, 0)
 
     const result = LGraphCanvas.cloneNodes([nodeA, nodeB])
     expect(result).toBeDefined()
@@ -188,8 +185,8 @@ describe('cloned node z-index in Vue renderer', () => {
 
     const clonedA = result!.created[0] as LGraphNode
     const clonedB = result!.created[1] as LGraphNode
-    const layoutA = layoutStore.getNodeLayoutRef(toNodeId(clonedA.id)).value!
-    const layoutB = layoutStore.getNodeLayoutRef(toNodeId(clonedB.id)).value!
+    const layoutA = layoutStore.getNodeLayoutRef(String(clonedA.id)).value!
+    const layoutB = layoutStore.getNodeLayoutRef(String(clonedB.id)).value!
 
     // Both cloned nodes should be above the highest original (z-index 7)
     expect(layoutA.zIndex).toBeGreaterThan(7)

src/lib/litegraph/src/LGraphCanvas.slotHitDetection.test.ts

@@ -1,7 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { nodeId as toNodeId } from '@/types/nodeId'
-
 import {
   LGraph,
   LGraphCanvas,
@@ -109,7 +107,7 @@ describe('LGraphCanvas slot hit detection', () => {
 
       // Mock the slot query to return our node's slot
       vi.mocked(layoutStore.querySlotAtPoint).mockReturnValue({
-        nodeId: toNodeId(node.id),
+        nodeId: String(node.id),
         index: 0,
         type: 'output',
         position: { x: 252, y: 120 },
@@ -190,7 +188,7 @@ describe('LGraphCanvas slot hit detection', () => {
       expect(node.isPointInside(clickX, clickY)).toBe(false)
 
       vi.mocked(layoutStore.querySlotAtPoint).mockReturnValue({
-        nodeId: toNodeId(node.id),
+        nodeId: String(node.id),
         index: 0,
         type: 'input',
         position: { x: 98, y: 140 },

src/lib/litegraph/src/LGraphCanvas.ts

@@ -11,7 +11,6 @@ import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculatio
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import { nodeId as toNodeId } from '@/types/nodeId'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import { CanvasPointer } from './CanvasPointer'
@@ -22,8 +21,7 @@ import type { AnimationOptions } from './DragAndScale'
 import type { LGraph, SubgraphId } from './LGraph'
 import { LGraphGroup } from './LGraphGroup'
 import { LGraphNode } from './LGraphNode'
-import type { NodeProperty } from './LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { NodeId, NodeProperty } from './LGraphNode'
 import { LLink } from './LLink'
 import type { LinkId } from './LLink'
 import { Reroute } from './Reroute'
@@ -215,7 +213,7 @@ interface LGraphCanvasState {
   selectionChanged: boolean
 
   /** ID of node currently in ghost placement mode (semi-transparent, following cursor). */
-  ghostNodeId: SerializedNodeId | null
+  ghostNodeId: NodeId | null
 }
 
 /**
@@ -226,7 +224,7 @@ interface ClipboardPasteResult {
   /** All successfully created items */
   created: Positionable[]
   /** Map: original node IDs to newly created nodes */
-  nodes: Map<SerializedNodeId, LGraphNode>
+  nodes: Map<NodeId, LGraphNode>
   /** Map: original link IDs to new link IDs */
   links: Map<LinkId, LLink>
   /** Map: original reroute IDs to newly created reroutes */
@@ -680,7 +678,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
    * The IDs of the nodes that are currently visible on the canvas. More
    * performant than {@link visible_nodes} for visibility checks.
    */
-  private _visible_node_ids: Set<SerializedNodeId> = new Set()
+  private _visible_node_ids: Set<NodeId> = new Set()
   node_over?: LGraphNode
   node_capturing_input?: LGraphNode | null
   highlighted_links: Dictionary<boolean> = {}
@@ -693,7 +691,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   dirty_canvas: boolean = true
   dirty_bgcanvas: boolean = true
   /** A map of nodes that require selective-redraw */
-  dirty_nodes = new Map<SerializedNodeId, LGraphNode>()
+  dirty_nodes = new Map<NodeId, LGraphNode>()
   dirty_area?: Rect | null
   /** @deprecated Unused */
   node_in_panel?: LGraphNode | null
@@ -831,7 +829,6 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       if (this._lowQualityZoomThreshold > 0) {
         this._isLowQuality = scale < this._lowQualityZoomThreshold
       }
-      this.setDirty(true, true)
     }
 
     // Initialize link renderer if graph is available
@@ -4170,7 +4167,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
     const results: ClipboardPasteResult = {
       created: [],
-      nodes: new Map<SerializedNodeId, LGraphNode>(),
+      nodes: new Map<NodeId, LGraphNode>(),
       links: new Map<LinkId, LLink>(),
       reroutes: new Map<RerouteId, Reroute>(),
       subgraphs: new Map<SubgraphId, Subgraph>()
@@ -4313,7 +4310,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     const newPositions = created
       .filter((item): item is LGraphNode => item instanceof LGraphNode)
       .map((node) => ({
-        nodeId: toNodeId(node.id),
+        nodeId: String(node.id),
         bounds: {
           x: node.pos[0],
           y: node.pos[1],
@@ -8961,10 +8958,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 }
 
 function patchLinkNodeIds(
-  links:
-    | { origin_id: SerializedNodeId; target_id: SerializedNodeId }[]
-    | undefined,
-  remappedIds: Map<SerializedNodeId, SerializedNodeId>
+  links: { origin_id: NodeId; target_id: NodeId }[] | undefined,
+  remappedIds: Map<NodeId, NodeId>
 ) {
   if (!links?.length) return
 
@@ -8979,8 +8974,8 @@ function patchLinkNodeIds(
 
 function remapNodeId(
   nodeId: string,
-  remappedIds: Map<SerializedNodeId, SerializedNodeId>
-): SerializedNodeId | undefined {
+  remappedIds: Map<NodeId, NodeId>
+): NodeId | undefined {
   const directMatch = remappedIds.get(nodeId)
   if (directMatch !== undefined) return directMatch
   if (!/^-?\d+$/.test(nodeId)) return undefined
@@ -8993,7 +8988,7 @@ function remapNodeId(
 
 function remapProxyWidgets(
   info: ISerialisedNode,
-  remappedIds: Map<SerializedNodeId, SerializedNodeId> | undefined
+  remappedIds: Map<NodeId, NodeId> | undefined
 ) {
   if (!remappedIds || remappedIds.size === 0) return
 
@@ -9024,7 +9019,7 @@ function hasStringSourceNodeId(
 
 function remapPreviewExposures(
   info: ISerialisedNode,
-  remappedIds: Map<SerializedNodeId, SerializedNodeId> | undefined
+  remappedIds: Map<NodeId, NodeId> | undefined
 ) {
   if (!remappedIds || remappedIds.size === 0) return
 
@@ -9059,12 +9054,9 @@ export function remapClipboardSubgraphNodeIds(
     return nextId
   }
 
-  const subgraphNodeIdMap = new Map<
-    SubgraphId,
-    Map<SerializedNodeId, SerializedNodeId>
-  >()
+  const subgraphNodeIdMap = new Map<SubgraphId, Map<NodeId, NodeId>>()
   for (const subgraphInfo of parsed.subgraphs ?? []) {
-    const remappedIds = new Map<SerializedNodeId, SerializedNodeId>()
+    const remappedIds = new Map<NodeId, NodeId>()
     const interiorNodes = subgraphInfo.nodes ?? []
 
     for (const nodeInfo of interiorNodes) {

src/lib/litegraph/src/LGraphNode.ts

@@ -8,8 +8,6 @@ import {
 import type { SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import { nodeId as toNodeId } from '@/types/nodeId'
-import type { SerializedNodeId } from '@/types/nodeId'
 import { adjustColor } from '@/utils/colorUtil'
 import type { ColorAdjustOptions } from '@/utils/colorUtil'
 import {
@@ -100,6 +98,8 @@ import type { WidgetTypeMap } from './widgets/widgetMap'
 
 // #region Types
 
+export type NodeId = number | string
+
 export type NodeProperty = string | number | boolean | object
 
 interface INodePropertyInfo {
@@ -274,7 +274,7 @@ export class LGraphNode
   }
 
   graph: LGraph | Subgraph | null = null
-  id: SerializedNodeId
+  id: NodeId
   type: string = ''
   inputs: INodeInputSlot[] = []
   outputs: INodeOutputSlot[] = []
@@ -498,11 +498,10 @@ export class LGraphNode
 
     this._pos[0] = value[0]
     this._pos[1] = value[1]
-    if (this.id === -1 || !this.graph) return
 
     const mutations = useLayoutMutations()
     mutations.setSource(LayoutSource.Canvas)
-    mutations.moveNode(toNodeId(this.id), { x: value[0], y: value[1] })
+    mutations.moveNode(String(this.id), { x: value[0], y: value[1] })
   }
 
   /**
@@ -521,11 +520,10 @@ export class LGraphNode
 
     this._size[0] = value[0]
     this._size[1] = value[1]
-    if (this.id === -1 || !this.graph) return
 
     const mutations = useLayoutMutations()
     mutations.setSource(LayoutSource.Canvas)
-    mutations.resizeNode(toNodeId(this.id), {
+    mutations.resizeNode(String(this.id), {
       width: value[0],
       height: value[1]
     })
@@ -2949,9 +2947,9 @@ export class LGraphNode
     layoutMutations.setSource(LayoutSource.Canvas)
     layoutMutations.createLink(
       link.id,
-      toNodeId(this.id),
+      this.id,
       outputIndex,
-      toNodeId(inputNode.id),
+      inputNode.id,
       inputIndex
     )
 

src/lib/litegraph/src/LLink.ts

@@ -7,8 +7,7 @@ import type { SubgraphOutput } from '@/lib/litegraph/src/subgraph/SubgraphOutput
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
-import type { LGraphNode } from './LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { LGraphNode, NodeId } from './LGraphNode'
 import type { Reroute, RerouteId } from './Reroute'
 import type {
   CanvasColour,
@@ -28,9 +27,9 @@ export type LinkId = number
 
 export type SerialisedLLinkArray = [
   id: LinkId,
-  origin_id: SerializedNodeId,
+  origin_id: NodeId,
   origin_slot: number,
-  target_id: SerializedNodeId,
+  target_id: NodeId,
   target_slot: number,
   type: ISlotType
 ]
@@ -98,11 +97,11 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
   parentId?: RerouteId
   type: ISlotType
   /** Output node ID */
-  origin_id: SerializedNodeId
+  origin_id: NodeId
   /** Output slot index */
   origin_slot: number
   /** Input node ID */
-  target_id: SerializedNodeId
+  target_id: NodeId
   /** Input slot index */
   target_slot: number
 
@@ -155,9 +154,9 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
   constructor(
     id: LinkId,
     type: ISlotType,
-    origin_id: SerializedNodeId,
+    origin_id: NodeId,
     origin_slot: number,
-    target_id: SerializedNodeId,
+    target_id: NodeId,
     target_slot: number,
     parentId?: RerouteId
   ) {
@@ -374,7 +373,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    * @param outputIndex The array index of the node output
    * @returns `true` if the origin matches, otherwise `false`.
    */
-  hasOrigin(nodeId: SerializedNodeId, outputIndex: number): boolean {
+  hasOrigin(nodeId: NodeId, outputIndex: number): boolean {
     return this.origin_id === nodeId && this.origin_slot === outputIndex
   }
 
@@ -384,7 +383,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    * @param inputIndex The array index of the node input
    * @returns `true` if the target matches, otherwise `false`.
    */
-  hasTarget(nodeId: SerializedNodeId, inputIndex: number): boolean {
+  hasTarget(nodeId: NodeId, inputIndex: number): boolean {
     return this.target_id === nodeId && this.target_slot === inputIndex
   }
 

src/lib/litegraph/src/Reroute.ts

@@ -2,8 +2,7 @@ import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMuta
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import { LGraphBadge } from './LGraphBadge'
-import type { LGraphNode } from './LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { LGraphNode, NodeId } from './LGraphNode'
 import { LLink } from './LLink'
 import type { LinkId } from './LLink'
 import type {
@@ -183,7 +182,7 @@ export class Reroute
   }
 
   /** @inheritdoc */
-  get origin_id(): SerializedNodeId | undefined {
+  get origin_id(): NodeId | undefined {
     return this.firstLink?.origin_id
   }
 

src/lib/litegraph/src/canvas/FloatingRenderLink.ts

@@ -1,5 +1,4 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LLink } from '@/lib/litegraph/src/LLink'
 import type { Reroute } from '@/lib/litegraph/src/Reroute'
 import {
@@ -38,13 +37,13 @@ export class FloatingRenderLink implements RenderLink {
   readonly fromDirection: LinkDirection
   readonly fromSlotIndex: SlotIndex
 
-  readonly outputNodeId: SerializedNodeId = -1
+  readonly outputNodeId: NodeId = -1
   readonly outputNode?: LGraphNode
   readonly outputSlot?: INodeOutputSlot
   readonly outputIndex: number = -1
   readonly outputPos?: Point
 
-  readonly inputNodeId: SerializedNodeId = -1
+  readonly inputNodeId: NodeId = -1
   readonly inputNode?: LGraphNode
   readonly inputSlot?: INodeInputSlot
   readonly inputIndex: number = -1

src/lib/litegraph/src/canvas/MovingLinkBase.ts

@@ -1,5 +1,4 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LLink } from '@/lib/litegraph/src/LLink'
 import type { Reroute } from '@/lib/litegraph/src/Reroute'
 import type { CustomEventTarget } from '@/lib/litegraph/src/infrastructure/CustomEventTarget'
@@ -37,13 +36,13 @@ export abstract class MovingLinkBase implements RenderLink {
   abstract readonly fromDirection: LinkDirection
   abstract readonly fromSlotIndex: SlotIndex
 
-  readonly outputNodeId: SerializedNodeId
+  readonly outputNodeId: NodeId
   readonly outputNode: LGraphNode
   readonly outputSlot: INodeOutputSlot
   readonly outputIndex: number
   readonly outputPos: Point
 
-  readonly inputNodeId: SerializedNodeId
+  readonly inputNodeId: NodeId
   readonly inputNode: LGraphNode
   readonly inputSlot: INodeInputSlot
   readonly inputIndex: number

src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts

@@ -1,8 +1,7 @@
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
 import type { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
 import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
 import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
@@ -58,6 +57,6 @@ export interface LGraphCanvasEventMap {
   /** Ghost placement mode has started or ended. */
   'litegraph:ghost-placement': {
     active: boolean
-    nodeId: SerializedNodeId
+    nodeId: NodeId
   }
 }

src/lib/litegraph/src/infrastructure/LGraphEventMap.ts

@@ -1,6 +1,5 @@
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
-import type { SerializedNodeId } from '@/types/nodeId'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LLink, ResolvedConnection } from '@/lib/litegraph/src/LLink'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
 import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
@@ -52,29 +51,22 @@ export interface LGraphEventMap {
     closingGraph: LGraph | Subgraph
   }
 
-  /**
-   * Fires on the owning graph before per-node teardown begins
-   */
-  'node:before-removed': {
-    node: LGraphNode
-  }
-
   'node:property:changed': {
-    nodeId: SerializedNodeId
+    nodeId: NodeId
     property: string
     oldValue: unknown
     newValue: unknown
   }
-  'node:slot-errors:changed': { nodeId: SerializedNodeId }
+  'node:slot-errors:changed': { nodeId: NodeId }
   'node:slot-links:changed': {
-    nodeId: SerializedNodeId
+    nodeId: NodeId
     slotType: NodeSlotType
     slotIndex: number
     connected: boolean
     linkId: number
   }
   'node:slot-label:changed': {
-    nodeId: SerializedNodeId
+    nodeId: NodeId
     slotType?: NodeSlotType
   }
 }

src/lib/litegraph/src/interfaces.ts

@@ -4,8 +4,7 @@ import type { WidgetId } from '@/types/widgetId'
 import type { TWidgetValue } from '@/lib/litegraph/src/types/widgets'
 
 import type { ContextMenu } from './ContextMenu'
-import type { LGraphNode, NodeProperty } from './LGraphNode'
-import type { SerializedNodeId } from '@/types/nodeId'
+import type { LGraphNode, NodeId, NodeProperty } from './LGraphNode'
 import type { LLink, LinkId } from './LLink'
 import type { Reroute, RerouteId } from './Reroute'
 import type { SubgraphInput } from './subgraph/SubgraphInput'
@@ -87,7 +86,7 @@ interface Parent<TChild> {
  * May contain other {@link Positionable} objects.
  */
 export interface Positionable extends Parent<Positionable>, HasBoundingRect {
-  readonly id: SerializedNodeId | RerouteId | number
+  readonly id: NodeId | RerouteId | number
   /**
    * Position in graph coordinates. This may be the top-left corner,
    * the centre, or another point depending on concrete type.
@@ -163,7 +162,7 @@ export interface ReadonlyLinkNetwork {
   readonly links: ReadonlyMap<LinkId, LLink>
   readonly reroutes: ReadonlyMap<RerouteId, Reroute>
   readonly floatingLinks: ReadonlyMap<LinkId, LLink>
-  getNodeById(id: SerializedNodeId | null | undefined): LGraphNode | null
+  getNodeById(id: NodeId | null | undefined): LGraphNode | null
   getLink(id: null | undefined): undefined
   getLink(id: LinkId | null | undefined): LLink | undefined
   getReroute(parentId: null | undefined): undefined
@@ -218,7 +217,7 @@ export interface LinkSegment {
   _dragging?: boolean
 
   /** Output node ID */
-  readonly origin_id: SerializedNodeId | undefined
+  readonly origin_id: NodeId | undefined
   /** Output slot index */
   readonly origin_slot: SlotIndex | undefined
 }